kritzel-stencil 0.3.1 → 0.3.7

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CFnj_FXt.js');
-var workspace_migrations = require('./workspace.migrations-D5sPPbQN.js');
+var workspace_migrations = require('./workspace.migrations-BlC8KRoQ.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -833,10 +833,11 @@ KritzelContextMenu.style = kritzelContextMenuCss();
 
 class KritzelToolConfigHelper {
     static getToolConfig(tool) {
-        if (tool instanceof workspace_migrations.KritzelSelectionTool) {
+        const toolConstructorName = tool?.constructor?.name;
+        if (tool instanceof workspace_migrations.KritzelSelectionTool || toolConstructorName === 'KritzelSelectionTool') {
             return tool.getToolConfig();
         }
-        if (tool instanceof workspace_migrations.KritzelBrushTool) {
+        if (tool instanceof workspace_migrations.KritzelBrushTool || toolConstructorName === 'KritzelBrushTool') {
             return {
                 type: 'brush',
                 colorProperty: 'color',
@@ -848,7 +849,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof workspace_migrations.KritzelLineTool) {
+        if (tool instanceof workspace_migrations.KritzelLineTool || toolConstructorName === 'KritzelLineTool') {
             return {
                 type: 'line',
                 colorProperty: 'color',
@@ -861,7 +862,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof workspace_migrations.KritzelShapeTool) {
+        if (tool instanceof workspace_migrations.KritzelShapeTool || toolConstructorName === 'KritzelShapeTool') {
             return {
                 type: 'shape',
                 colorProperty: 'strokeColor',
@@ -874,7 +875,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof workspace_migrations.KritzelTextTool) {
+        if (tool instanceof workspace_migrations.KritzelTextTool || toolConstructorName === 'KritzelTextTool') {
             return {
                 type: 'text',
                 colorProperty: 'fontColor',
@@ -892,7 +893,7 @@ class KritzelToolConfigHelper {
     }
 }
 
-const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.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;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-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:var(--kritzel-global-pointer-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{z-index:10001}`;
+const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.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;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-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:var(--kritzel-global-pointer-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{z-index:10001}`;
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -913,6 +914,9 @@ const KritzelControls = class {
     canScrollRight = false;
     needsScrolling = false;
     displayValues = null;
+    internalControls = [];
+    handleActiveToolChangeBound = this.handleActiveToolChange.bind(this);
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -921,7 +925,7 @@ const KritzelControls = class {
         }
     }
     async handleActiveToolChange(event) {
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        this.activeControl = this.internalControls.find(control => control.tool === event.detail) || null;
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
         }
@@ -932,6 +936,11 @@ const KritzelControls = class {
             this.updateDisplayValues(this.activeControl.tool);
         }
     }
+    async onControlsChange() {
+        if (this.kritzelEngine) {
+            await this.initializeTools();
+        }
+    }
     onThemeChange() {
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
@@ -998,6 +1007,12 @@ const KritzelControls = class {
     componentDidRender() {
         this.updateScrollIndicators();
     }
+    disconnectedCallback() {
+        if (this.kritzelEngine) {
+            this.kritzelEngine.removeEventListener('activeToolChange', this.handleActiveToolChangeBound);
+            this.kritzelEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     updateScrollIndicators() {
         if (!this.toolsScrollRef)
             return;
@@ -1022,16 +1037,28 @@ const KritzelControls = class {
         if (!this.kritzelEngine) {
             throw new Error('kritzel-engine not found in parent element.');
         }
+        this.kritzelEngine.addEventListener('activeToolChange', this.handleActiveToolChangeBound);
+        this.kritzelEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
     }
     async initializeTools() {
-        for (const c of this.controls) {
+        let hasDefault = false;
+        const newControls = this.controls.map(c => ({ ...c }));
+        for (const c of newControls) {
             if (c.type === 'tool' && c.tool) {
-                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+                let toolConstructor = c.tool;
+                if (typeof toolConstructor !== 'function') {
+                    toolConstructor = toolConstructor.constructor;
+                }
+                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                if (registered) {
+                    c.tool = registered;
+                }
             }
             if (c.type === 'tool' && c.isDefault && c.tool) {
                 await this.kritzelEngine.changeActiveTool(c.tool);
                 this.activeControl = c;
                 this.updateDisplayValues(c.tool);
+                hasDefault = true;
             }
             if (c.type === 'config') {
                 if (this.firstConfig === null) {
@@ -1042,6 +1069,16 @@ const KritzelControls = class {
                 }
             }
         }
+        this.internalControls = newControls;
+        // If no tool is marked as default, activate the first tool control
+        if (!hasDefault) {
+            const firstTool = this.internalControls.find(c => c.type === 'tool' && c.tool);
+            if (firstTool) {
+                await this.kritzelEngine.changeActiveTool(firstTool.tool);
+                this.activeControl = firstTool;
+                this.updateDisplayValues(firstTool.tool);
+            }
+        }
     }
     async handleControlClick(control) {
         this.activeControl = control;
@@ -1081,21 +1118,20 @@ const KritzelControls = class {
         await this.handleControlClick(control);
     }
     render() {
-        const hasConfigUI = this.activeControl?.tool instanceof workspace_migrations.KritzelBrushTool ||
-            this.activeControl?.tool instanceof workspace_migrations.KritzelTextTool ||
-            this.activeControl?.tool instanceof workspace_migrations.KritzelLineTool ||
-            this.activeControl?.tool instanceof workspace_migrations.KritzelShapeTool ||
-            (this.activeControl?.tool instanceof workspace_migrations.KritzelSelectionTool && this.activeControl.tool.hasSelection());
+        const activeToolConfig = this.activeControl?.tool
+            ? KritzelToolConfigHelper.getToolConfig(this.activeControl.tool)
+            : null;
+        const hasConfigUI = activeToolConfig !== null;
         // Separate tool controls from config control
-        const toolControls = this.controls.filter(c => c.type === 'tool' || c.type === 'separator');
-        const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: '93d08a3268edb67fc4cccb291b6e0aff6cf5a4bd', class: {
+        const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
+        const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (index.h(index.Host, { key: '7f2a5fed45ac89b34a86b87552ffaa1b94f44d8b', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '8862ea7e524b3e23d87ffea2929e04df7231bb0c', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '2dcbbe498bce0b59fbd225d103f2e322d3b7ff85', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '2ea2a41ba4cda77f5abde9231d293da181a2a568', class: "kritzel-controls" }, index.h("div", { key: '6bd4f6d930a0a51d5549b6dbae1e7be14cbe7822', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: 'c712ca502a4ebd244394158b39391a49839bc386', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '6431079040502a78f021c612a7e953b1349f319a', class: "kritzel-controls" }, index.h("div", { key: '6e0d6dce107cf6b54fb904809fd525ce3b2ae4f0', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '2686304ad10deac2d022e1deba19195587659d64', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1125,10 +1161,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: '0d8ae76ea22cb0aea4f7971a17c787c722d1f476', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: 'f4bcbc856f6e027cdb579356faf54288b43aa080', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: 'd3da3913362d96109f618c86bd8370f6253a1b7c', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '26fed6901c67362ec0c18eacd23b48fff5a361ef', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '0371c038859c0bc3c413b8c72a836d611da01608', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: 'b9bb29fc19ee335103ea050155f5e240f2ad2cd9', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '0646c98b32047f51841f75dd5fb57813ebb153f5', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '0816b8d7ca55add3c6a81de788be3c61a8a814f2', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '8f299593454e7855d83ad5d79b528940b2dcb202', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '8b2dc1dcc61df93a92cea8ba2aeb776e57965ab3', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1137,13 +1173,16 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: '5918f90d824c41700c5dac4fca13cb8b47759473', class: "color-container" }, index.h("kritzel-color", { key: '08b7847f1d9117cec216979016d10d7b25076ecc', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: '1074fc05048aed92ec9d62e347822df0a57a80e4', class: "color-container" }, index.h("kritzel-color", { key: '222efa6883ccbc6c97d10360039a1315de7d6273', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
     }
     static get assetsDirs() { return ["../assets"]; }
     static get watchers() { return {
+        "controls": [{
+                "onControlsChange": 0
+            }],
         "theme": [{
                 "onThemeChange": 0
             }]
@@ -2091,7 +2130,7 @@ const DEFAULT_SYNC_CONFIG = {
     ],
 };
 
-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;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px;z-index:10000}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px;z-index:10000}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+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;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -20962,7 +21001,7 @@ class KritzelKeyHandler extends workspace_migrations.KritzelBaseHandler {
      * @param index - The zero-based index of the tool to activate from the tool registry.
      */
     switchToolByIndex(index) {
-        const toolInstance = workspace_migrations.KritzelToolRegistry.getToolByIndex(index);
+        const toolInstance = this._core.toolRegistry.getToolByIndex(index);
         if (toolInstance) {
             this._core.store.setState('activeTool', toolInstance);
             this._core.deselectAllObjects();
@@ -21093,8 +21132,8 @@ class KritzelContextMenuHandler extends workspace_migrations.KritzelBaseHandler
         let y = clickY;
         const menuWidthEstimate = 150;
         const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
+        if (x + menuWidthEstimate > this._core.store.state.viewportWidth - margin) {
+            x = this._core.store.state.viewportWidth - menuWidthEstimate - margin;
         }
         x = Math.max(margin, x);
         y = Math.max(margin, y);
@@ -21474,6 +21513,76 @@ class AlignmentHelper {
     }
 }
 
+/**
+ * A per-engine registry for managing drawing tools in the Kritzel library.
+ * Each `KritzelCore` owns its own `KritzelToolRegistry` instance so that
+ * multiple editors on the same page do not share tool instances or configs.
+ *
+ * Tools are instantiated and stored by name, allowing retrieval by name or index.
+ */
+class KritzelToolRegistry {
+    core;
+    /** Internal storage for registered tools, mapping tool names to their instances. */
+    registry = {};
+    /**
+     * Creates a new tool registry bound to a specific `KritzelCore` instance.
+     * The bound core is used as the constructor argument when registering new tools.
+     *
+     * @param core - The `KritzelCore` instance this registry is bound to.
+     */
+    constructor(core) {
+        this.core = core;
+    }
+    /**
+     * Registers a new tool by instantiating it with the registry's bound core.
+     * The tool is stored in the registry under the specified name.
+     *
+     * @param toolName - The unique identifier for the tool.
+     * @param constructor - The tool class constructor that extends `KritzelBaseTool`.
+     * @returns The newly created and registered tool instance.
+     */
+    registerTool(toolName, constructor) {
+        const toolInstance = new constructor(this.core);
+        toolInstance.name = toolName;
+        this.registry[toolName] = toolInstance;
+        return toolInstance;
+    }
+    /**
+     * Checks if a tool with the given name is registered.
+     *
+     * @param toolName - The unique identifier of the tool to check.
+     * @returns `true` if the tool is registered, `false` otherwise.
+     */
+    hasTool(toolName) {
+        return toolName in this.registry;
+    }
+    /**
+     * Retrieves a registered tool by its name.
+     * Logs a warning if the tool is not found.
+     *
+     * @param toolName - The unique identifier of the tool to retrieve.
+     * @returns The tool instance if found, or `null` if not registered.
+     */
+    getTool(toolName) {
+        const toolInstance = this.registry[toolName];
+        if (!toolInstance) {
+            console.warn(`Unknown tool: ${toolName}`);
+            return null;
+        }
+        return toolInstance;
+    }
+    /**
+     * Retrieves a registered tool by its index in the registry.
+     * The index is based on the order tools were registered.
+     *
+     * @param index - The zero-based index of the tool in the registry.
+     * @returns The tool instance at the specified index, or `null` if the index is out of bounds.
+     */
+    getToolByIndex(index) {
+        return Object.values(this.registry)[index] ?? null;
+    }
+}
+
 /**
  * A quadtree data structure for efficient spatial indexing of objects.
  * Quadtrees recursively subdivide 2D space into four quadrants to enable
@@ -22982,7 +23091,14 @@ class KritzelStore {
      * @param state - The initial engine state configuration
      */
     constructor(state) {
-        this._state = state;
+        this._state = {
+            ...state,
+            contextMenuItems: [...state.contextMenuItems],
+            debugInfo: { ...state.debugInfo },
+            pointers: new Map(state.pointers),
+            workspaces: [...state.workspaces],
+            cursor: { ...state.cursor },
+        };
         this._state.objects = new KritzelObjectMap();
     }
     /**
@@ -23621,6 +23737,8 @@ class KritzelCore {
     _cursorManager;
     /** Manager for theme styling */
     _themeManager;
+    /** Per-core registry of drawing tools (one instance per editor). */
+    _toolRegistry;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances */
     _editorId;
     /** Current user for awareness broadcasting */
@@ -23667,6 +23785,13 @@ class KritzelCore {
     get themeManager() {
         return this._themeManager;
     }
+    /**
+     * Gets the tool registry scoped to this core instance.
+     * @returns The KritzelToolRegistry owned by this core
+     */
+    get toolRegistry() {
+        return this._toolRegistry;
+    }
     /**
      * Gets the editor ID used for namespacing storage keys.
      * @returns The editor ID or undefined if not set
@@ -23712,6 +23837,7 @@ class KritzelCore {
         this._anchorManager = new workspace_migrations.KritzelAnchorManager(this);
         this._cursorManager = new KritzelCursorManager(this);
         this._themeManager = new workspace_migrations.KritzelThemeManager(this);
+        this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new workspace_migrations.KritzelAssetResolver();
     }
     /**
@@ -23818,6 +23944,7 @@ class KritzelCore {
     async initializeWorkspace(workspace, options) {
         // Load all workspaces from app state map
         const workspaces = this.loadWorkspacesFromAppState();
+        const shouldCreateEditorScopedFallback = !workspace && !!this._editorId;
         // Find newest created workspace (tie-break by most recently updated)
         const newestCreatedWorkspace = workspaces.length > 0
             ? [...workspaces].sort((a, b) => {
@@ -23843,7 +23970,7 @@ class KritzelCore {
             // Use last active workspace from localStorage
             activeWorkspace = lastActiveWorkspace;
         }
-        else if (newestCreatedWorkspace) {
+        else if (newestCreatedWorkspace && !shouldCreateEditorScopedFallback) {
             // Use newest created workspace
             activeWorkspace = newestCreatedWorkspace;
         }
@@ -24408,7 +24535,7 @@ class KritzelCore {
                 this._store.state.copiedObjectIdMapping = newIdMapping;
             }
         });
-        this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
+        this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
         this.engine.emitObjectsChange();
         this.rerender();
     }
@@ -24597,7 +24724,7 @@ class KritzelCore {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
             this.addSelectionGroup(selectionGroup);
-            this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
+            this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
             this.rerender();
         }
     }
@@ -24631,7 +24758,7 @@ class KritzelCore {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
             this.addSelectionGroup(selectionGroup);
-            this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
+            this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
             this.rerender();
         }
     }
@@ -24787,7 +24914,7 @@ class KritzelCore {
         }
         this.resetActiveText();
         this.clearSelection();
-        this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
+        this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
     }
     /**
      * Determines whether to display the selection group UI for an object.
@@ -26475,11 +26602,22 @@ const KritzelEngine = class {
      * @returns The registered tool instance, or `null` if registration failed.
      */
     async registerTool(toolName, toolClass, toolConfig) {
-        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof workspace_migrations.KritzelBaseTool)) {
+        if (typeof toolClass !== 'function') {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = workspace_migrations.KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
+        // If a tool with this name is already registered, return the existing instance
+        // This avoids dual-package issues when tool classes are passed from external bundles
+        if (this.core.toolRegistry.hasTool(toolName)) {
+            const existingTool = this.core.toolRegistry.getTool(toolName);
+            if (toolConfig) {
+                Object.entries(toolConfig).forEach(([key, value]) => {
+                    existingTool[key] = value;
+                });
+            }
+            return existingTool;
+        }
+        const registeredTool = this.core.toolRegistry.registerTool(toolName, toolClass);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -26757,7 +26895,7 @@ const KritzelEngine = class {
      * @param objects - The objects to select.
      */
     async selectObjects(objects) {
-        const selectionTool = workspace_migrations.KritzelToolRegistry.getTool('selection');
+        const selectionTool = this.core.toolRegistry.getTool('selection');
         if (!selectionTool) {
             return;
         }
@@ -26768,7 +26906,7 @@ const KritzelEngine = class {
     }
     /** Selects all objects currently visible in the viewport. Switches to the selection tool automatically. */
     async selectAllObjectsInViewport() {
-        const selectionTool = workspace_migrations.KritzelToolRegistry.getTool('selection');
+        const selectionTool = this.core.toolRegistry.getTool('selection');
         if (!selectionTool) {
             return;
         }
@@ -28127,7 +28265,7 @@ const KritzelEngine = class {
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
-                position: 'fixed',
+                position: 'absolute',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10002',
@@ -28872,7 +29010,7 @@ const KritzelMenuItem = class {
 };
 KritzelMenuItem.style = kritzelMenuItemCss();
 
-const kritzelMoreMenuCss = () => `:host{display:inline-flex}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
+const kritzelMoreMenuCss = () => `:host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
 
 const KritzelMoreMenu = class {
     constructor(hostRef) {
@@ -29436,7 +29574,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.1';
+const KRITZEL_VERSION = '0.3.7';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 
@@ -29962,9 +30100,19 @@ const KritzelToolConfig = class {
     }
     isExpanded = false;
     theme;
+    engine;
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
     onThemeChange() {
         this.emitDisplayValues();
     }
+    handleEngineChange(newEngine, oldEngine) {
+        if (oldEngine) {
+            oldEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+        if (newEngine) {
+            newEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     toolChange;
     displayValuesChange;
     config;
@@ -29981,6 +30129,11 @@ const KritzelToolConfig = class {
             }
         }
     }
+    disconnectedCallback() {
+        if (this.engine) {
+            this.engine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
     componentWillLoad() {
         this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
         if (this.config) {
@@ -29988,6 +30141,9 @@ const KritzelToolConfig = class {
             this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
             this.emitDisplayValues();
         }
+        if (this.engine) {
+            this.engine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
     }
     emitDisplayValues() {
         if (!this.config)
@@ -30119,6 +30275,9 @@ const KritzelToolConfig = class {
             }],
         "theme": [{
                 "onThemeChange": 0
+            }],
+        "engine": [{
+                "handleEngineChange": 0
             }]
     }; }
 };
@@ -30279,7 +30438,7 @@ const KritzelTooltip = class {
 };
 KritzelTooltip.style = kritzelTooltipCss();
 
-const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:10000}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
+const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:1}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
 
 const KritzelUtilityPanel = class {
     constructor(hostRef) {