kritzel-stencil 0.0.56 → 0.0.57

package/dist/cjs/index-Dkw8gHuN.js

@@ -69,10 +69,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'kritzel-brush-style_17.cjs':
+                case 'kritzel-brush-style_18.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './kritzel-brush-style_17.cjs.entry.js')); }).then(processMod, consoleError);
+                        './kritzel-brush-style_18.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return import(

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

@@ -175,14 +175,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: 'c00208b3c044ec55f8c8a6a3d313b9ab4618c7ff' }, index.h("div", { key: '29fa7e2a42926fd470030143c67b21c49471c7a8', style: {
+        return (index.h(index.Host, { key: '0b5dceaacafbaf1bf7da375836d2aa937a3ad02b' }, index.h("div", { key: '7550af1c5b14f5d38a66b96355e853b149f10a10', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '65b51d25e4b425c5bd95344a56cb805ea42a29c1', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'a5b1697a4507394cdab2365503cf9476e504e02a', 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: '8a28445684ce67d9592a3995ab37fb8a4773d2aa', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '952c046f87b1a82f9e71b914b0840e51d25e60d9', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '9c1434078c24a3ed61a1a7a2147a888f674a42c9', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: 'c602dfcd7774fbae7c947506e929dce2bfbeedb0', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'cf97adae22fd0d0e870e19ffcc45d31b45207a24', 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: 'e53a52c3f5a8c193f60c5f7cc733c3c4b47380f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ecaed675e9f07fab1b602ca531e0f22ff5caef6b', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: 'c73eff04a89d6e3e692217601f6dc359f752d8c7', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -214,14 +214,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '6c4c739bdf2085798703ffb3aa1408e354c9a70c' }, index.h("div", { key: '1c46eb6993b3f615342ded2c63447359d6c8cbff', style: {
+        return (index.h(index.Host, { key: 'e5ca0d7b5d4f78f70bb8c61750e90c332b7f4af5' }, index.h("div", { key: '6273c2e286530359f44903609b574601b6b775ea', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '2acf6ef29515fd7af4dfd7e88beff64c953e74c8', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '321d818cce2e8bfcf6ec09e7d31f468e0cf15450', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '36f0e878c4ddfacd75ed134b97ebc6b98c51a291', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'b16779b3ea8a7fe1e091ffbb0de8e898c883a45a', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '6aed77ae857a3bbe0dd3b4bc6ae1bfa513aee9c4', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: '8d41a71d8a18ad5dffd8d6b85c43a23b0f7f4bef', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: 'd2517a0b09e97a501d500bd7d1f81900233ef289', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: 'a72d815a99e809ea78654f2a6b4ee632b16031fb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'a4ee92ff0d8c963af4568498bf6f0f22614f513a', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: 'baba610770d13935d51f0330f22a13cb717d3ba2', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -4298,7 +4298,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
     }
 }
 
-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);height:100%;padding:var(--kritzel-controls-padding);background-color:var(--kritzel-controls-background-color);border-radius:var(--kritzel-controls-border-radius);box-shadow:var(--kritzel-controls-box-shadow);border:var(--kritzel-controls-border);border-radius:var(--kritzel-controls-border-radius);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color);border-radius:var(--kritzel-controls-control-border-radius);padding:var(--kritzel-controls-control-padding);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)}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color)}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color);color:var(--kritzel-controls-control-selected-color)}.kritzel-divider{width:var(--kritzel-controls-divider-width);height:var(--kritzel-controls-divider-height);background-color:var(--kritzel-controls-divider-background-color)}.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)}.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)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}.kritzel-tooltip{position:absolute;bottom:40px;left:50%;width:290px;transform:translateX(-50%);margin-bottom:14px;display:flex;flex-direction:column;justify-content:center;background-color:var(--kritzel-controls-tooltip-background-color);color:var(--kritzel-controls-tooltip-color);align-items:flex-start;padding:var(--kritzel-controls-tooltip-padding);border-radius:var(--kritzel-controls-tooltip-border-radius);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow);z-index:10000;-webkit-tap-highlight-color:transparent;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px) scale(0.98);transition:opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1)}.kritzel-tooltip.kritzel-tooltip--visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}.kritzel-tooltip-arrow{position:absolute;bottom:40px;left:12px;border-width:8px;border-style:solid;border-color:var(--kritzel-controls-tooltip-background-color) transparent transparent transparent;filter:drop-shadow(var(--kritzel-controls-tooltip-box-shadow));z-index:10000;opacity:0;transform:translateY(10px) scale(0.98);transition:opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1)}.kritzel-tooltip-arrow.kritzel-tooltip-arrow--visible{opacity:1;transform:translateY(0) scale(1)}@media (max-width: 768px){.kritzel-tooltip{position:fixed;bottom:66px}.kritzel-control:hover{background-color:transparent}.kritzel-control:active{background-color:transparent}}";
+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);height:100%;padding:var(--kritzel-controls-padding);background-color:var(--kritzel-controls-background-color);border-radius:var(--kritzel-controls-border-radius);box-shadow:var(--kritzel-controls-box-shadow);border:var(--kritzel-controls-border);border-radius:var(--kritzel-controls-border-radius);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color);border-radius:var(--kritzel-controls-control-border-radius);padding:var(--kritzel-controls-control-padding);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)}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color)}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color);color:var(--kritzel-controls-control-selected-color)}.kritzel-divider{width:var(--kritzel-controls-divider-width);height:var(--kritzel-controls-divider-height);background-color:var(--kritzel-controls-divider-background-color)}.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)}.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)}.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) {
@@ -4514,12 +4514,12 @@ 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: '8a2dd731112b08ba40071c27cd382e42aede4ed1' }, index.h("kritzel-utility-panel", { key: '16b7a429969a005f2f660d0ede211d23de5b259c', style: {
+        return (index.h(index.Host, { key: 'ba860c7bfd212bb227bd3f9d452056ad37f274c4' }, index.h("kritzel-utility-panel", { key: '8989dd7349d448b14b31b460bc45146ee28a2dda', 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: '97a410c6aae8ef20e55703f19bfd222521e42b1c', class: "kritzel-controls" }, this.controls.map(control => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            }, 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: '81a56319d4c5ee991f28a7938ef8e89d48549cf9', 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: {
                         'kritzel-control': true,
@@ -4530,19 +4530,13 @@ const KritzelControls = class {
                 return index.h("div", { class: "kritzel-divider", key: control.name });
             }
             if (control.type === 'config' && control.name === ((_b = this.firstConfig) === null || _b === void 0 ? void 0 : _b.name) && this.activeControl) {
-                return (index.h("div", { class: "kritzel-config-container", key: control.name }, index.h("div", { class: {
-                        'kritzel-tooltip': true,
-                        'kritzel-tooltip--visible': this.tooltipVisible,
-                    }, onClick: event => this.preventDefault(event) }, this.activeControl.name === 'brush' && (index.h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (index.h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } }))), index.h("div", { class: {
-                        'kritzel-tooltip-arrow': true,
-                        'kritzel-tooltip-arrow--visible': this.tooltipVisible,
-                    } }), index.h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, event); }, style: {
+                return (index.h("div", { class: "kritzel-config-container", key: control.name }, index.h("kritzel-tooltip", { isVisible: this.tooltipVisible, anchorElement: (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.kritzel-config-container') }, index.h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (index.h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (index.h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })))), index.h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, event); }, style: {
                         cursor: this.activeControl.config ? 'pointer' : 'default',
                         pointerEvents: hasNoConfig ? 'none' : 'auto',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: (_c = this.activeToolAsBrushTool) === null || _c === void 0 ? void 0 : _c.color, size: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.size, style: {
+                    } }, this.activeControl.tool instanceof KritzelBrushTool && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.color, size: (_e = this.activeToolAsBrushTool) === null || _e === void 0 ? void 0 : _e.size, style: {
                         borderRadius: '50%',
                         border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: (_e = this.activeToolAsTextTool) === null || _e === void 0 ? void 0 : _e.fontFamily, size: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontSize, color: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontColor }))), hasNoConfig && index.h("div", { class: "no-config" }))));
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontFamily, size: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontSize, color: (_h = this.activeToolAsTextTool) === null || _h === void 0 ? void 0 : _h.fontColor }))), hasNoConfig && index.h("div", { class: "no-config" }))));
             }
         }))));
     }
@@ -6166,6 +6160,57 @@ const KritzelStrokeSize = class {
 };
 KritzelStrokeSize.style = kritzelStrokeSizeCss;
 
+const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color);color:var(--kritzel-controls-tooltip-color);padding:var(--kritzel-controls-tooltip-padding);border-radius:var(--kritzel-controls-tooltip-border-radius);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow)}.tooltip-arrow{position:absolute;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--kritzel-controls-tooltip-background-color);bottom:-8px;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))}.tooltip-arrow-rect{position:absolute;transform:translateX(-50%);width:16px;height:8px;bottom:0;background-color:var(--kritzel-controls-tooltip-background-color)}";
+
+const MOBILE_BREAKPOINT = 768;
+const KritzelTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isVisible = false;
+        this.offsetY = 20;
+        this.positionX = 0;
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+    }
+    handleWindowResize() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    componentWillLoad() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    calculateAdjustedPosition() {
+        if (this.isVisible && this.anchorElement) {
+            const anchorRect = this.anchorElement.getBoundingClientRect();
+            if (!this.isMobileView) {
+                this.positionX = anchorRect.left + anchorRect.width / 2;
+            }
+            else {
+                this.positionX = anchorRect.left - 8;
+            }
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '60d6cc34c6cb27ae8bec759c558d234fd9524073', style: {
+                position: 'fixed',
+                zIndex: '9999',
+                transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
+                display: this.isVisible ? 'inline-block' : 'none',
+                left: !this.isMobileView ? `${this.positionX}px` : '50%',
+                marginBottom: `${this.offsetY}px`,
+            } }, index.h("div", { key: 'e37cb7a8bf647536ad0996c8afcaa2f0018df541', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'd964c02ba582687a26b7e0d0a11630ec8d23448e' }), index.h("div", { key: 'f76522bea84f2f1273142c9aa45908f249735554', class: "tooltip-arrow", style: {
+                left: !this.isMobileView ? '50%' : `${this.positionX}px`,
+            } }), index.h("div", { key: '7c419037948cf7fe1d81741bb964aecfb7a08ad6', class: "tooltip-arrow-rect", style: {
+                left: !this.isMobileView ? '50%' : `${this.positionX}px`,
+            } }))));
+    }
+    get el() { return index.getElement(this); }
+};
+KritzelTooltip.style = kritzelTooltipCss;
+
 const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:6px;border-top-right-radius:6px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 
 const KritzelUtilityPanel = class {
@@ -6188,7 +6233,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'c3ab0aa976a4ce2a4b412ebcb808681510658ab7' }, index.h("button", { key: '7a6c9ee6b74bd38bfa085508e0820ed121ab547a', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'dd12ae17f1b64e8c98c7abe3b0f31db69793b1fb', name: "undo" })), index.h("button", { key: '0fbe8ac953da6cb6cf07527f0813fcc101dc5108', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '4abe227b018d051132c22ce009f4518120d83d5b', name: "redo" })), index.h("div", { key: '952083fd2b3339cddfaf7d0c6193d1e41e8d845d', class: "utility-separator" }), index.h("button", { key: 'd2da5474bebaceb968bdc81b436b997b14125e4f', class: "utility-button" }, index.h("kritzel-icon", { key: '4eee54431ff8af555018aa9c1e575f0fbc2cb215', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: 'cdff0db64de8f2b773f8f7854524f8ccb2a0a781' }, index.h("button", { key: '0dd02325f984d3fcd1fa1a60c611f212e5d8a057', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'b04e6589ac2a604e1d8dbf08acb4fa2234f281fb', name: "undo" })), index.h("button", { key: 'c2cde63c28b524be965e2a733b6fcd9479b9da2e', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '89d0315ed78cf170d6a9a66209bace33dfa3e3de', name: "redo" })), index.h("div", { key: 'f530dfefce1b36e853228594957b57e9ab077b76', class: "utility-separator" }), index.h("button", { key: 'fece887040c6db9d273b5e70e93eaa9c6ccc70b8', class: "utility-button" }, index.h("kritzel-icon", { key: 'f1ce4bb76232df6649345c4deab713e9195217ec', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;
@@ -6209,7 +6254,8 @@ exports.kritzel_font_family = KritzelFontFamily;
 exports.kritzel_font_size = KritzelFontSize;
 exports.kritzel_icon = KritzelIcon;
 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-utility-panel.entry.cjs.js.map
+//# sourceMappingURL=kritzel-brush-style.kritzel-color.kritzel-color-palette.kritzel-context-menu.kritzel-control-brush-config.kritzel-control-text-config.kritzel-controls.kritzel-cursor-trail.kritzel-dropdown.kritzel-editor.kritzel-engine.kritzel-font.kritzel-font-family.kritzel-font-size.kritzel-icon.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.entry.cjs.js.map
 
-//# sourceMappingURL=kritzel-brush-style_17.cjs.entry.js.map
+//# sourceMappingURL=kritzel-brush-style_18.cjs.entry.js.map