kritzel-stencil 0.0.76 → 0.0.78

package/dist/esm/{kritzel-brush-style_18.entry.js → kritzel-brush-style_19.entry.js}

@@ -58,13 +58,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: 'e913815994a30d97f92781e742c4a13de19e59fe' }, h("div", { key: 'e0cc40b10dcb298f5b86be7d4283d6bffbd08c2c', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '6771c3aac90292a82070af08b995fdf297061bc1' }, h("div", { key: '4bb3e10fee1566db56f8a727dc858351e8a4184f', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '5e0a092a6d3463d852a1760d125fba04494e0d90', class: {
+            } }, h("div", { key: '290f49b17b686482057d3492752217e35af85d81', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -106,7 +106,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
+        return (h(Host, { key: 'e3e89140f833e336a3e0c299c1e9c9d4cad21fdb' }, h("div", { key: '019b62ab59cf468fc497ba0f6b429b844bcc4584', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -173,14 +173,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (h(Host, { key: '57c18e06633951d2d82006d5b28cf863e9414bf4' }, h("div", { key: '6e4666f8efb3f1c9f1b1c8362119d2eababcc314', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'b52b7f8d0a64c0f973fbfbf35aad04c4b17b2b57', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'e74f649d44e94e45668aa335935e4c3e05888a85', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '457c7b47b45ac62e696e69459b9674d8679e6736', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '3914791059ff9215c082315a4c52170b88cb0908', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '51e8a2080cf27e08b060f099ed4696b352e3d10c', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -212,14 +212,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
+        return (h(Host, { key: 'dd94cc7171046d9683c5e320a2fef2c5598d6e2a' }, h("div", { key: 'c19e1cddc78ffa51e1117db01edc83e89db51158', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '17dc46439b2e578da30a04551dfa5a47e0fd6328', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '412b5b812c63d9c067ae43042a457185b8e6af48', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '6b9d098076145e4bb7b500f782baf9df713b666a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '6f58506e220ec54c1c934e38e65bc30d52bfb406', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2d595ab0d6abb342503ad00e439efa577e3f1f49', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -3055,45 +3055,46 @@ const KritzelControls = class {
         var _a;
         return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
     }
-    // async componentDidLoad() {
-    //   console.log('KritzelControls componentDidLoad');
-    //   this.forceUpdate++;
-    //   this.controlsReady.emit();
-    //   this.initializeEngine().then(() => {
-    //     this.initializeTools()
-    //       .then(() => {
-    //         console.info('KritzelControls initialized with tools:', this.controls);
-    //         this.forceUpdate++;
-    //       })
-    //       .catch(error => {
-    //         console.error('Error initializing tools:', error);
-    //       });
-    //   });
-    // }
-    // private async initializeEngine() {
-    //   this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
-    //   if (!this.kritzelEngine) {
-    //     throw new Error('kritzel-engine not found in parent element.');
-    //   }
-    // }
-    // private async initializeTools() {
-    //   for (const c of this.controls) {
-    //     if (c.type === 'tool' && c.tool) {
-    //       c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
-    //     }
-    //     if (c.type === 'tool' && c.isDefault && c.tool) {
-    //       await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);
-    //       this.activeControl = c;
-    //     }
-    //     if (c.type === 'config') {
-    //       if (this.firstConfig === null) {
-    //         this.firstConfig = c;
-    //       } else {
-    //         console.warn('Only one config control is allowed. The first one will be used.');
-    //       }
-    //     }
-    //   }
-    // }
+    async componentDidLoad() {
+        console.log('KritzelControls componentDidLoad');
+        this.forceUpdate++;
+        this.controlsReady.emit();
+        this.initializeEngine().then(() => {
+            this.initializeTools()
+                .then(() => {
+                console.info('KritzelControls initialized with tools:', this.controls);
+                this.forceUpdate++;
+            })
+                .catch(error => {
+                console.error('Error initializing tools:', error);
+            });
+        });
+    }
+    async initializeEngine() {
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    async initializeTools() {
+        for (const c of this.controls) {
+            if (c.type === 'tool' && c.tool) {
+                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+            }
+            if (c.type === 'tool' && c.isDefault && c.tool) {
+                await this.kritzelEngine.changeActiveTool(c.tool);
+                this.activeControl = c;
+            }
+            if (c.type === 'config') {
+                if (this.firstConfig === null) {
+                    this.firstConfig = c;
+                }
+                else {
+                    console.warn('Only one config control is allowed. The first one will be used.');
+                }
+            }
+        }
+    }
     async handleActiveToolChange(event) {
         var _a;
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
@@ -3131,11 +3132,11 @@ 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 (h(Host, { key: 'e17295147adc548fc3051cafe5625a8f87474c3b' }, h("kritzel-utility-panel", { key: 'b8e715a2534b2750f31f5fe5f311528f64c1c013', style: {
+        return (h(Host, { key: 'b2ccafa0e74d1a036f1bfd0fb994bd5aa746401d' }, h("kritzel-utility-panel", { key: '585a8058b22015956b11df13614e8acf721be969', 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(); } }), h("div", { key: 'c82659049cc0a55659159ad393c603759c25c2d3', 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(); } }), h("div", { key: '56238089b382ba65f6951ee841bdb1cd36159b31', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -3351,6 +3352,18 @@ const KritzelDropdown = class {
 };
 KritzelDropdown.style = kritzelDropdownCss;
 
+const kritzelDummyCss = ":host{display:block}";
+
+const KritzelDummy = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'aff3d5d844af503ead3cd02a1a62f26c885587ef' }, "Dummy Component Works!"));
+    }
+};
+KritzelDummy.style = kritzelDummyCss;
+
 class KritzelIconRegistry {
     static register(name, svgContent) {
         if (this.registry.has(name)) {
@@ -4790,7 +4803,7 @@ const DEFAULT_KRITZEL_CONTROLS = [
     },
 ];
 
-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;--kritzel-primary-color:blue;--kritzel-selection-box-background-color:rgba(0, 0, 255, 0.2);--kritzel-selection-box-border-color:rgba(0, 0, 255, 0.5);--kritzel-selection-border-color:var(--kritzel-primary-color);--kritzel-selection-border-width:2px;--kritzel-selection-border-style:solid;--kritzel-selection-handle-size:6px;--kritzel-selection-handle-color:#000000;--kritzel-context-menu-background-color:#ffffff;--kritzel-context-menu-border-radius:8px;--kritzel-context-menu-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-context-menu-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-padding:4px;--kritzel-context-menu-item-gap:8px;--kritzel-context-menu-item-padding:8px;--kritzel-context-menu-item-border-radius:8px;--kritzel-context-menu-item-color:#333333;--kritzel-context-menu-item-font-size:14px;--kritzel-context-menu-item-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-item-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-context-menu-item-disabled-color:#aaaaaa;--kritzel-controls-box-shadow:0 0 3px rgba(0, 0, 0, 0.08);--kritzel-controls-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-controls-border-radius:8px;--kritzel-controls-background-color:#ffffff;--kritzel-controls-padding:8px;--kritzel-controls-gap:8px;--kritzel-controls-control-color:#000;--kritzel-controls-control-border-radius:8px;--kritzel-controls-control-padding:8px;--kritzel-controls-control-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-control-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-controls-control-selected-background-color:var(--kritzel-primary-color);--kritzel-controls-control-selected-color:#ffffff;--kritzel-controls-divider-width:1px;--kritzel-controls-divider-height:24px;--kritzel-controls-divider-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-tooltip-background-color:#fff;--kritzel-controls-tooltip-color:#000;--kritzel-controls-tooltip-border-radius:8px;--kritzel-controls-tooltip-padding:8px;--kritzel-controls-tooltip-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-color-palette-hover-background-color:#f0f0f0;--kritzel-color-palette-circle-border-color:#dddcdc;--kritzel-color-palette-selected-border-color:var(--kritzel-primary-color);--kritzel-color-palette-selected-background-color:#f0f0f0;--kritzel-color-palette-expand-toggle-color:#666;--kritzel-color-palette-expand-toggle-hover-color:#333;--kritzel-stroke-size-hover-background-color:#f0f0f0;--kritzel-stroke-size-selected-border-color:var(--kritzel-primary-color);--kritzel-stroke-size-selected-background-color:#f0f0f0;--kritzel-stroke-size-circle-color:#000;--kritzel-cursor-trail-color:rgb(228, 228, 228);--kritzel-cursor-trail-opacity:0.6;--kritzel-engine-background-color:#ffffff}kritzel-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:16px}";
+const kritzelEditorCss = ":host{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;--kritzel-primary-color:blue;--kritzel-selection-box-background-color:rgba(0, 0, 255, 0.2);--kritzel-selection-box-border-color:rgba(0, 0, 255, 0.5);--kritzel-selection-border-color:var(--kritzel-primary-color);--kritzel-selection-border-width:2px;--kritzel-selection-border-style:solid;--kritzel-selection-handle-size:6px;--kritzel-selection-handle-color:#000000;--kritzel-context-menu-background-color:#ffffff;--kritzel-context-menu-border-radius:8px;--kritzel-context-menu-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-context-menu-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-padding:4px;--kritzel-context-menu-item-gap:8px;--kritzel-context-menu-item-padding:8px;--kritzel-context-menu-item-border-radius:8px;--kritzel-context-menu-item-color:#333333;--kritzel-context-menu-item-font-size:14px;--kritzel-context-menu-item-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-item-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-context-menu-item-disabled-color:#aaaaaa;--kritzel-controls-box-shadow:0 0 3px rgba(0, 0, 0, 0.08);--kritzel-controls-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-controls-border-radius:8px;--kritzel-controls-background-color:#ffffff;--kritzel-controls-padding:8px;--kritzel-controls-gap:8px;--kritzel-controls-control-color:#000;--kritzel-controls-control-border-radius:8px;--kritzel-controls-control-padding:8px;--kritzel-controls-control-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-control-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-controls-control-selected-background-color:var(--kritzel-primary-color);--kritzel-controls-control-selected-color:#ffffff;--kritzel-controls-divider-width:1px;--kritzel-controls-divider-height:24px;--kritzel-controls-divider-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-tooltip-background-color:#fff;--kritzel-controls-tooltip-color:#000;--kritzel-controls-tooltip-border-radius:8px;--kritzel-controls-tooltip-padding:8px;--kritzel-controls-tooltip-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-color-palette-hover-background-color:#f0f0f0;--kritzel-color-palette-circle-border-color:#dddcdc;--kritzel-color-palette-selected-border-color:var(--kritzel-primary-color);--kritzel-color-palette-selected-background-color:#f0f0f0;--kritzel-color-palette-expand-toggle-color:#666;--kritzel-color-palette-expand-toggle-hover-color:#333;--kritzel-stroke-size-hover-background-color:#f0f0f0;--kritzel-stroke-size-selected-border-color:var(--kritzel-primary-color);--kritzel-stroke-size-selected-background-color:#f0f0f0;--kritzel-stroke-size-circle-color:#000;--kritzel-cursor-trail-color:rgb(228, 228, 228);--kritzel-cursor-trail-opacity:0.6;--kritzel-engine-background-color:#ffffff}.dummy-top{position:absolute;left:50%;transform:translateX(-50%);top:16px;z-index:1}.dummy-bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:1}kritzel-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:16px}";
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -4827,7 +4840,9 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '1498c131b352144fbe99d0cadcf3de1eef794aff' }, h("kritzel-engine", { key: '65aa62cd9bd11f42c6bb460f943af8fb7832fae9', onEngineReady: () => this.handleEngineReady() }), h("kritzel-controls", { key: 'ec8b22b47b369b76580e7d164bda28b4fed538c2', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: this.hideControls ? { display: 'none' } : {} })));
+        return (h(Host, { key: '37e291c25a636b65cc751799cfe57de216a14990' }, h("kritzel-dummy", { key: '5b3b3e9c6baf1885a85f749f674ca257fa9f109e', class: "dummy-top" }), h("kritzel-engine", { key: '11ec65ad0858d842c472b829667c1be7086d92b1', onEngineReady: () => this.handleEngineReady() }), h("kritzel-dummy", { key: 'c3e3586692f5f8340aa34cd8b04e7ac1fbd7401b', class: "dummy-bottom" }), h("kritzel-controls", { key: '3f999492eeabe6e3179027753138099d387aa541', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: {
+                visibility: 'hidden'
+            } })));
     }
 };
 KritzelEditor.style = kritzelEditorCss;
@@ -6076,7 +6091,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (h(Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
+        return (h(Host, { key: '4e952fbcaea52c332a72cda1ba6fc060696aa107' }, h("div", { key: 'db371b9552eceb53470b2bbd964c9c31578bb7e1', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -6141,7 +6156,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '2cd69fb4d291f46121f2f05acd44153d4fe51801' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -6185,7 +6200,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '9738591d397c522c72d9744bbb7e0ff7f6976175' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
@@ -6234,23 +6249,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', style: {
+        return (h(Host, { key: 'a8c55d66efd76aeea390e7a5bdb05dbdb1e35bd2', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: '3f270c9bdb1a5282f67034618123a5d61f9f8b40', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'bd4a11782eb2e263f21a8ab57ad64eb4fd4fe7ec' }), h("div", { key: '4ede173979b8e0335fb3a012b662a694dc09ea28', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: '5d3ad02c4885e9ee3dc55a7358357bb224ae102e', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '767fb0dbf8fa9a63d184f601d28536fbff677a02' }), h("div", { key: '30c0bdd69f56cab6b94fb0f4290de370d990c500', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '8bf67c5383b53ac908b1d0865cf2ffe9cadf3fd6', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '2d2197a52e69477308ae7591446b4ca20635e0bc', 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)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '0991da16ce655de3f9a798b1da9ddb3e8e399487', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'fa932ba1b6b242455c85fbf13b51c58c53ad3e9a', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -6284,12 +6299,12 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '41a059b44da75d93169ad9c3ab9e7094a178ce6a' }, h("button", { key: 'cb6ce47be3b7b8efa863658b45339c084c006558', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '2cd0e214a354603a0b6d3c5a20414e5592b57c72', name: "undo" })), h("button", { key: '3a2c931d270d1173603722eb6f0be7450905225d', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '647ee8f80f8ee7991278ae09c824c2d41939b799', name: "redo" })), h("div", { key: 'cc8aab4de10a3c7997e8b65682fa5fed4a0e9ee7', class: "utility-separator" }), h("button", { key: '8e1f513af08407fafc4d2cfe48dc781120942ebd', class: "utility-button" }, h("kritzel-icon", { key: '4758c3bdcbb2a273424982ce4c1a05575199c130', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;
 
-export { KritzelBrushStyle as kritzel_brush_style, KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel };
-//# 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.js.map
+export { KritzelBrushStyle as kritzel_brush_style, KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelDummy as kritzel_dummy, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel };
+//# 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-dummy.kritzel-editor.kritzel-engine.kritzel-font.kritzel-font-family.kritzel-font-size.kritzel-icon.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.entry.js.map
 
-//# sourceMappingURL=kritzel-brush-style_18.entry.js.map
+//# sourceMappingURL=kritzel-brush-style_19.entry.js.map