kritzel-stencil 0.0.106 → 0.0.107

package/dist/components/{p-JvUh5Cky.js → p-maiDeBe9.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
 import { d as defineCustomElement$6 } from './p-Ck2d5Wd1.js';
-import { d as defineCustomElement$5 } from './p-Bhfk_puI.js';
-import { d as defineCustomElement$4 } from './p-wUZba7Vi.js';
+import { d as defineCustomElement$5 } from './p-DFhbw-Fr.js';
+import { d as defineCustomElement$4 } from './p-DHT5gK0E.js';
 import { d as defineCustomElement$3 } from './p-c6tIpE_t.js';
 import { d as defineCustomElement$2 } from './p-CZkSABuJ.js';
-import { d as defineCustomElement$1 } from './p-CF5pcRGS.js';
+import { d as defineCustomElement$1 } from './p-CPjl7Inl.js';
 
 const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
 
@@ -41,14 +41,14 @@ const KritzelControlBrushConfig = /*@__PURE__*/ proxyCustomElement(class Kritzel
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '29f0492264283879fd86195fc0db8e5a8f352a0f' }, h("div", { key: 'c5bde66ab565eb717bf302f3f97d08ed0b261289', style: {
+        return (h(Host, { key: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: 'e78ec70c5d0eb24933543e12389f1a3db4c3b8f2', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '9fbde247a8ed3cf43ef0bd0b269f8562dfac56a0', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '3cf37dd520fabd632cfd7d764254467d563670e1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'daa59edce48e683a52a39ae4062fe811908dc685', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: 'b71bfb1176c35c24c15827ebc89dcac56bb42f0e', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlBrushConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-JvUh5Cky.js.map
+//# sourceMappingURL=p-maiDeBe9.js.map
 
-//# sourceMappingURL=p-JvUh5Cky.js.map
+//# sourceMappingURL=p-maiDeBe9.js.map

package/dist/components/{p-JvUh5Cky.js.map → p-maiDeBe9.js.map}

@@ -1 +1 @@
-{"file":"p-JvUh5Cky.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelBrushTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State()\r\n  palette: string[] = [];\r\n\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.palette}\r\n          selectedColor={this.tool.color}\r\n          isExpanded={this.isExpanded}\r\n          isOpaque={true}\r\n          onColorChange={color => this.handleColorChange(color)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-maiDeBe9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelBrushTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State()\r\n  palette: string[] = [];\r\n\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.palette}\r\n          selectedColor={this.tool.color}\r\n          isExpanded={this.isExpanded}\r\n          isOpaque={true}\r\n          onColorChange={color => this.handleColorChange(color)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -58,13 +58,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: '606cfb813de66c495b2a2ff1e54aac4a5f761ab8' }, h("div", { key: '066d364e6e025b245c896603f68a15962684f78b', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '19ad3872a132c885c612dc3b96698a0c8dc7214d' }, h("div", { key: 'f67108e82396cbaa3d070c8dfc83da2b080ddf47', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '500d1a781d0b7a1777a7a43f89be8c6217726584', class: {
+            } }, h("div", { key: '1af0cc3e9f6eebc04cae2367510ef3b98420a818', 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: '9590fbda0cb20e767880c49323350b12c7d287e4' }, h("div", { key: '9fd8699050018a90919c0045630b766183abb42e', class: {
+        return (h(Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', 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: '29f0492264283879fd86195fc0db8e5a8f352a0f' }, h("div", { key: 'c5bde66ab565eb717bf302f3f97d08ed0b261289', style: {
+        return (h(Host, { key: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: 'e78ec70c5d0eb24933543e12389f1a3db4c3b8f2', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '9fbde247a8ed3cf43ef0bd0b269f8562dfac56a0', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '3cf37dd520fabd632cfd7d764254467d563670e1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'daa59edce48e683a52a39ae4062fe811908dc685', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: 'b71bfb1176c35c24c15827ebc89dcac56bb42f0e', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', 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: '4a530500af6a26013d286f995987c8321c3565ec' }, h("div", { key: '98499852c8c2b95e2485058c8d0d114dfc4c133d', style: {
+        return (h(Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: '21a06dd2a43b47219bf9fd983cbd75af75a7489d', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: 'dfef40e171b4c2c5c771a017448ae2c22597834b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: 'ce3f80a32af959676b3dd16faedf195e9686fff3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '61dd15d6577784511b7abce9fe9e0c38c10a99fa', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '162b9e3b4c342b4c224ec20bba61adbe168a638f', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, 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) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -934,6 +934,37 @@ class KritzelToolRegistry {
 }
 KritzelToolRegistry.registry = {};
 
+class KritzelKeyboardHelper {
+    static forceHideKeyboard() {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+    static enableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            if (!currentContent.includes('interactive-widget=resizes-content')) {
+                currentContent += ', interactive-widget=resizes-content';
+            }
+            meta.setAttribute('content', currentContent);
+        }
+    }
+    static disableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
+            newContent = newContent
+                .replace(/,(\s*,)+/g, ',')
+                .replace(/^,/, '')
+                .replace(/,$/, '')
+                .trim();
+            meta.setAttribute('content', newContent);
+        }
+    }
+}
+
 class KritzelTextTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
@@ -1016,6 +1047,7 @@ class KritzelTextTool extends KritzelBaseTool {
         if (this._store.state.touchCount > 1) {
             return;
         }
+        KritzelKeyboardHelper.disableInteractiveWidget();
         const clientX = Math.round(event.touches[0].clientX - this._store.offsetX);
         const clientY = Math.round(event.touches[0].clientY - this._store.offsetY);
         const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
@@ -1030,6 +1062,7 @@ class KritzelTextTool extends KritzelBaseTool {
         var _a, _b;
         (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
         (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+        KritzelKeyboardHelper.enableInteractiveWidget();
     }
 }
 
@@ -1123,11 +1156,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: 'ed654553a1d3f5d2b5e85e3b3bce4a5705cc51e3' }, h("kritzel-utility-panel", { key: '9db82dacbe7360acba1b58b15536c7fed0c1f0dd', style: {
+        return (h(Host, { key: '2b13783ef0f1638ad76bfcef22c17c3eeb849d67' }, h("kritzel-utility-panel", { key: '1babeb88133cebc9057c85723b812b99152316c6', 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: '193a4efd69c51425dc0c8b142c8fba7c6f133077', 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: '8fafebdf6726dd2bffe85cb2b3ada5f4885a2bf8', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -2810,7 +2843,6 @@ const KritzelEditor = class {
         this.controls = DEFAULT_KRITZEL_CONTROLS;
         this.customSvgIcons = {};
         this.hideControls = false;
-        this.text = null;
     }
     handleTouchStart(event) {
         if (event.cancelable) {
@@ -2820,52 +2852,13 @@ const KritzelEditor = class {
     componentWillLoad() {
         this.registerCustomSvgIcons();
     }
-    addTextObject() {
-        const obj = new KritzelText({
-            translateX: 100,
-            translateY: 100,
-            width: 200,
-            height: 50,
-            value: 'New Text',
-            fontSize: 16,
-            fontFamily: 'Arial',
-            fontColor: '#000000',
-            scale: 1,
-        });
-        this.engineRef.addObject(obj).then((text) => this.text = text);
-    }
-    getTextObject() {
-        var _a;
-        this.engineRef.getObjectById(((_a = this.text) === null || _a === void 0 ? void 0 : _a.id) || '').then((object) => {
-            console.log('Retrieved Text Object:', object);
-        });
-    }
-    updateTextObject() {
-        const updatedText = {
-            value: 'Updated Text',
-            translateX: 150,
-            translateY: 150,
-            rotation: Math.PI / 2
-        };
-        this.engineRef.updateObject(this.text, updatedText)
-            .then((text) => {
-            this.text = text;
-            console.log('Updated Text Object:', text);
-        });
-    }
-    removeTextObject() {
-        this.engineRef.removeObject(this.text).then((text) => {
-            console.log('Text Object removed', text);
-            this.text = null;
-        });
-    }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
             KritzelIconRegistry.register(name, svg);
         }
     }
     render() {
-        return (h(Host, { key: '3e54e232dd459dcebf3322dcba5ac2f1936ef23a' }, h("div", { key: '5c7f90645dfe6010187a709a657b5366d0e6d402', class: "button-panel", style: { position: 'absolute', top: '0', left: '0', zIndex: '10', display: 'flex', flexDirection: 'row' } }, h("button", { key: 'b8c22edc7b752f176c8bee4af186692100d09e1c', onClick: () => this.addTextObject() }, "Add Text"), h("button", { key: 'd38091f4142392ab4d1ed3e4b26c9e4a38ded104', onClick: () => this.getTextObject() }, "Get Text"), h("button", { key: '2f2bacf47603b5fb50a782bf24a8e6b3954d77e2', onClick: () => this.updateTextObject() }, "Update Text"), h("button", { key: '5ce49401b19a3730b30a24aaee6474f8ff8ed94f', onClick: () => this.removeTextObject() }, "Remove Text"), h("button", { key: '38870ef7c6776a37c742722fc96c37055c9e2ae3', onClick: () => this.engineRef.selectObjects([this.text]) }, "Select Text"), h("button", { key: '9a95113343e746cac85a0643a7633bf1030987b5', onClick: () => this.engineRef.selectAllObjectsInViewport() }, "Select All"), h("button", { key: 'c2caf8b0f02ad07d9b7f2166ed04e17daff10786', onClick: () => this.engineRef.clearSelection() }, "Clear Selection")), h("kritzel-engine", { key: 'c3174bc087b7875744f222d9fd03c68f06ce2522', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: 'b22337b1d0cb2f703f69c197a3c2b50a21a7a9b1', controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (h(Host, { key: 'f86e43f5b908d682ba2e20e55466dcdf9f128140' }, h("kritzel-engine", { key: '11d72009fd277ea4379b596d57aa2a1b19b9d6bd', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '4a575354c9bf117b12db7deaafaffcdcb9461bc6', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return getElement(this); }
 };
@@ -3648,14 +3641,6 @@ class KritzelKeyHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelKeyboardHelper {
-    static forceHideKeyboard() {
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-    }
-}
-
 class KritzelContextMenuHandler extends KritzelBaseHandler {
     constructor(store, globalContextMenuItems, objectContextMenuItems) {
         super(store);
@@ -4170,7 +4155,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (h(Host, { key: 'b4ebef665dacaca67e0a7574a15eae851e40ba3d' }, h("div", { key: '3af8906e1092fe333daf52da9e0da7a764fc47e3', class: "font-preview", style: {
+        return (h(Host, { key: 'd0378237899c5641ae4354f3bffb14e3f8bafb59' }, h("div", { key: '1475a6ae39ffc97eb780b30c85015c22cecafa6e', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -4235,7 +4220,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'daf7a1f16f96dfcbaaaa2ba43b77c99565c9893d' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '1c09a403f1e8278d30b2675c3a6e17e12ec79afa' }, 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 }))))));
@@ -4279,7 +4264,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'ee73f8679fa8e1f99bc01f31fb5cd8935fa597a8' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, 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 }))))));
@@ -4328,23 +4313,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd0ec1b12583a5e69a022ed4538060a0fe609b4fc', style: {
+        return (h(Host, { key: '3161826337f6957d2e568f52cfe3f57d705af0ed', 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: 'f4edf3ee17d5074aff60808dada77ddb601ea33d', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '947ea9110ccb0ed4a02684d7a51b04da8df6c909' }), h("div", { key: 'bffda8ba16f67e54cb581f96f355b5ddefca5792', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: '12fc4bc05b7be756102ce3779c9be1d51f3fe13b', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '90f645f8f7cec371aaeda7207a9fb420b02b2ae4' }), h("div", { key: '73380e2c6df22bc4a97479a52315e7b34d069fa1', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '76d33735507f0164dc68173f02c3ca2d45070744', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '2e13cb01a3282e161d3212f4970a93b20ca1a0fe', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '8f1913c9ed12f8a3171963cfb0360241fab21302', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '30ddbd00b928c0c734656d6309eaefbae5baf264', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -4378,7 +4363,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'c295ba2931094213a276ca2ccf002fea4a17a9a5' }, h("button", { key: 'ad636f88a4fb8540e0a5607b505fa157257a0cd4', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '9a6ebf66cafddeb5fd191ffe374831ad583598ae', name: "undo" })), h("button", { key: '334cb5c195b6da4992f08964f31f412172f3904d', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '5f3528d7cfdee42ed8203c8cb09f54550ab57810', name: "redo" })), h("div", { key: 'f859dcfd8a576323a2d52fc1bf3787b8ac589532', class: "utility-separator" }), h("button", { key: '30e28fc71e12caca42effe63fc033f84b9b07d02', class: "utility-button" }, h("kritzel-icon", { key: 'f448f23126e2d29a1be44d88e39c7dd6d5927ca2', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '496ed78323c9899ad363e7f7732a1464d99e1b3b' }, h("button", { key: '7b6b9cd238a8d254f032d5752f184d567e9a3096', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '8ac19f36c6b82f7cc4a0249e60cf429f75c09218', name: "undo" })), h("button", { key: '1164727510a968356042507c1e302b85a135baf8', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '1c6cc414d5841a06853f99316eee7a0a609d5c92', name: "redo" })), h("div", { key: 'e6f3342569b1c6b5a6b267cc215bc8e5d259e302', class: "utility-separator" }), h("button", { key: '0aa486a543df924c224f3637857cdcdb06f995ea', class: "utility-button" }, h("kritzel-icon", { key: '9ee324e03f5df5297916549743539f7f19950768', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;