kritzel-stencil 0.0.170 → 0.0.172

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -86,12 +86,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: '7e1c4957d32429f235cb0f5a71fe3e0d2ca52934', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '3a8119288e14c4de188663910a58e0ba67b47614', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '2e478e0ee73b11aaca57b56c25fdbeaa449a543e', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'b5dadbff0a915fb032f4a22207683667363eba1d', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -189,7 +189,7 @@ export class KritzelPortal {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'aa7399f8a2e744eaa89e881bc9e710bd8a0c6c53', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'df4d8446cf770dfd98476d19c6b18511e2531574' })));
+        return (h(Host, { key: '9706a815c6f49853983a0fdb68b097d62e65e90b', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1bd76deeb440cd25e3895dc8824f5200461e4ae0' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -80,7 +80,7 @@ export class KritzelSplitButton {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '3603874994e8a9d666448460d7e403252d38f799', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a6a2f8cd22118f7be668f3fd1fc52e38c44b22b3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'e61abf53a2890b6587746eb2aef5a813e81ff1b9', name: this.buttonIcon })), h("div", { key: '17f78d85b2fbd0fe6e7925e10c2531c51bcfdf41', class: "split-divider" }), h("button", { key: 'ac507c76479d66e3483ee898e144a6bea4e8cf6a', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '8274be53e327d537c2987bc9a3761bc768bdd41f', name: this.dropdownIcon })), h("kritzel-portal", { key: '71136ef798f3c77cff30426a0fcd4ff91bf312b8', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'd1363d2029d7b4aafbd6cba9a4ca6cdf617064e9', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'a5587085e47c4e33148f9d0817731bfa3aa804b6', class: { mobile: this.isTouchDevice } }, h("button", { key: 'd3815785bb0919e2385bc7b9b0812466ed2b45a3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'b3225e1966bd21e8d37590cb39c0922e46afdaa9', name: this.buttonIcon })), h("div", { key: '526a88ef833cae7d2c7749f2a4bd96bcd2210a56', class: "split-divider" }), h("button", { key: '2c3ee46806bc64edc1f89a97c5e76ec493822065', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'c6204d8b14d8cefe9d6eff33af95b2a7ea9a6b7c', name: this.dropdownIcon })), h("kritzel-portal", { key: '07a5e9793484f79d9b4b1f9ae09503f762cb2580', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0cf7601fd43b846a69152f0fc6ab950ac108ebff', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -8,7 +8,7 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '7c9041e061a946f20210cff2330cb736c2703ac7' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'd204d14384367ca8847ad30cab9801788c8d8fac' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -4,13 +4,10 @@ export class KritzelTooltip {
     host;
     isVisible = false;
     anchorElement;
-    arrowSize = 8;
     offsetY = 24;
-    showArrow = true;
     tooltipClosed;
     positionX = 0;
     positionY = 0;
-    arrowOffset = '0px';
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
@@ -62,36 +59,17 @@ export class KritzelTooltip {
             this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
             // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
             this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
-            // Step 4: Calculate arrow offset to point to the center of the anchor element
-            // Arrow should point to anchorCenterX, relative to where tooltip is positioned
-            const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;
-            this.arrowOffset = `${arrowPositionInTooltip}px`;
         }
     }
     render() {
-        return (h(Host, { key: '468ba81a0a9265f04725e23b19dd879c1287e473', style: {
+        return (h(Host, { key: 'c257f254b8ba6b95f251eac3136f5be282d23e30', 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.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: 'c6867197197f4e80e93bc63f0e7dd5dfbb19a523', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'a4df46360e349cbf68af08c0cc3297dd8d141b3c' }), this.showArrow && (h("div", { key: '9a7c9011b3286179f592c36afb2cdaf927838930', class: "tooltip-arrow-wrapper", style: {
-                position: 'fixed',
-                left: this.arrowOffset,
-                bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'd215175c6cb66c72b1fcb30eafc6af073946ad87', 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: '65cd5bf2f0de3897794e7ba4e77d0866aa5724e5', class: "tooltip-arrow-rect", style: {
-                position: 'relative',
-                width: `${this.arrowSize * 2}px`,
-                height: `${this.arrowSize}px`,
-                backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
-                bottom: `${this.arrowSize * 2}px`,
-            } }))))));
+            } }, h("div", { key: '14f31dc995236a2309e2371ecef278a0e6374139', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '6dace4d6ed82878333f8771cf4670d53cea36873' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -149,26 +127,6 @@ export class KritzelTooltip {
                 "getter": false,
                 "setter": false
             },
-            "arrowSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "arrow-size",
-                "defaultValue": "8"
-            },
             "offsetY": {
                 "type": "number",
                 "mutable": false,
@@ -188,34 +146,13 @@ export class KritzelTooltip {
                 "reflect": false,
                 "attribute": "offset-y",
                 "defaultValue": "24"
-            },
-            "showArrow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-arrow",
-                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "positionX": {},
-            "positionY": {},
-            "arrowOffset": {}
+            "positionY": {}
         };
     }
     static get events() {

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() arrowSize: number = 8;\r\n  @Prop() offsetY: number = 24;\r\n  @Prop() showArrow: boolean = true;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() positionY: number = 0;\r\n  @State() arrowOffset: string = '0px';\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n      const tooltipRect = tooltipContent?.getBoundingClientRect();\r\n      const tooltipWidth = tooltipRect?.width || 0;\r\n      \r\n      const viewportPadding = 12; // Minimum distance from viewport edges\r\n      const anchorCenterX = anchorRect.left + anchorRect.width / 2;\r\n      \r\n      // Step 1: Try to center the tooltip above the anchor\r\n      let idealLeft = anchorCenterX - tooltipWidth / 2;\r\n      \r\n      // Step 2: Clamp to viewport bounds\r\n      const minLeft = viewportPadding;\r\n      const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;\r\n      \r\n      // Apply clamping - adjust if tooltip would overflow\r\n      this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));\r\n      \r\n      // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)\r\n      this.positionY = window.innerHeight - anchorRect.top + this.offsetY;\r\n      \r\n      // Step 4: Calculate arrow offset to point to the center of the anchor element\r\n      // Arrow should point to anchorCenterX, relative to where tooltip is positioned\r\n      const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;\r\n      this.arrowOffset = `${arrowPositionInTooltip}px`;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: `${this.positionX}px`,\r\n          bottom: `${this.positionY}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n          {this.showArrow && (\r\n            <div\r\n              class=\"tooltip-arrow-wrapper\"\r\n              style={{\r\n                position: 'fixed',\r\n                left: this.arrowOffset,\r\n                bottom: `-${this.arrowSize * 2}px`,\r\n              }}\r\n            >\r\n              <div\r\n                class=\"tooltip-arrow\"\r\n                style={{\r\n                borderLeft: `${this.arrowSize}px solid transparent`,\r\n                borderRight: `${this.arrowSize}px solid transparent`,\r\n                borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n                filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n                }}\r\n              ></div>\r\n              <div\r\n                class=\"tooltip-arrow-rect\"\r\n                style={{\r\n                position: 'relative',\r\n                width: `${this.arrowSize * 2}px`,\r\n                height: `${this.arrowSize}px`,\r\n                backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n                bottom: `${this.arrowSize * 2}px`,\r\n                }}\r\n              ></div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() positionY: number = 0;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n      const tooltipRect = tooltipContent?.getBoundingClientRect();\r\n      const tooltipWidth = tooltipRect?.width || 0;\r\n      \r\n      const viewportPadding = 12; // Minimum distance from viewport edges\r\n      const anchorCenterX = anchorRect.left + anchorRect.width / 2;\r\n      \r\n      // Step 1: Try to center the tooltip above the anchor\r\n      let idealLeft = anchorCenterX - tooltipWidth / 2;\r\n      \r\n      // Step 2: Clamp to viewport bounds\r\n      const minLeft = viewportPadding;\r\n      const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;\r\n      \r\n      // Apply clamping - adjust if tooltip would overflow\r\n      this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));\r\n      \r\n      // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)\r\n      this.positionY = window.innerHeight - anchorRect.top + this.offsetY;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: `${this.positionX}px`,\r\n          bottom: `${this.positionY}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+const VIEWPORT_PADDING = 8;
 export class KritzelContextMenu {
     host;
     items;
@@ -18,6 +19,42 @@ export class KritzelContextMenu {
     componentWillLoad() {
         this.updateMenuItems();
     }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+    }
+    adjustPositionToViewport() {
+        const rect = this.host.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const currentLeft = parseFloat(this.host.style.left) || 0;
+        const currentTop = parseFloat(this.host.style.top) || 0;
+        let newLeft = currentLeft;
+        let newTop = currentTop;
+        // Check if menu extends beyond right edge
+        if (rect.right > viewportWidth - VIEWPORT_PADDING) {
+            newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;
+        }
+        // Check if menu extends beyond bottom edge
+        if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {
+            newTop = viewportHeight - rect.height - VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond left edge
+        if (newLeft < VIEWPORT_PADDING) {
+            newLeft = VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond top edge
+        if (newTop < VIEWPORT_PADDING) {
+            newTop = VIEWPORT_PADDING;
+        }
+        // Only update if position changed to avoid infinite loops
+        if (newLeft !== currentLeft || newTop !== currentTop) {
+            this.host.style.left = `${newLeft}px`;
+            this.host.style.top = `${newTop}px`;
+        }
+    }
     handleItemClick(item, isDisabled) {
         if (!isDisabled) {
             this.actionSelected.emit(item);
@@ -44,7 +81,7 @@ export class KritzelContextMenu {
         return defaultValue;
     }
     render() {
-        return (h(Host, { key: '102f1fd72d991e6d5c0fa6025ed75d860e8e9852' }, h("div", { key: '510ea27fdcddc78a51220f68a8d8ba82fd2bd108', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: 'f57688eb3c0921c0a2d85cab7bbe9273ecf4fdab' }, h("div", { key: '8082568dd09f4ad5ef07885308d752e8c924f02e', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     static get is() { return "kritzel-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch, Listen, Element } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: ContextMenuItem[];\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Prop() objects: KritzelBaseObject[];\r\n\r\n  @Event() actionSelected: EventEmitter<ContextMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  private async evaluateProperty(value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>), defaultValue: boolean): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`}\r\n              class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\r\n              disabled={isDisabled}\r\n            >\r\n              {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n              <span class=\"label\">{item.label}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch, Listen, Element } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\r\n\r\nconst VIEWPORT_PADDING = 8;\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: ContextMenuItem[];\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Prop() objects: KritzelBaseObject[];\r\n\r\n  @Event() actionSelected: EventEmitter<ContextMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.adjustPositionToViewport();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.adjustPositionToViewport();\r\n  }\r\n\r\n  private adjustPositionToViewport() {\r\n    const rect = this.host.getBoundingClientRect();\r\n    const viewportWidth = window.innerWidth;\r\n    const viewportHeight = window.innerHeight;\r\n\r\n    const currentLeft = parseFloat(this.host.style.left) || 0;\r\n    const currentTop = parseFloat(this.host.style.top) || 0;\r\n\r\n    let newLeft = currentLeft;\r\n    let newTop = currentTop;\r\n\r\n    // Check if menu extends beyond right edge\r\n    if (rect.right > viewportWidth - VIEWPORT_PADDING) {\r\n      newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Check if menu extends beyond bottom edge\r\n    if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {\r\n      newTop = viewportHeight - rect.height - VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Ensure menu doesn't go beyond left edge\r\n    if (newLeft < VIEWPORT_PADDING) {\r\n      newLeft = VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Ensure menu doesn't go beyond top edge\r\n    if (newTop < VIEWPORT_PADDING) {\r\n      newTop = VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Only update if position changed to avoid infinite loops\r\n    if (newLeft !== currentLeft || newTop !== currentTop) {\r\n      this.host.style.left = `${newLeft}px`;\r\n      this.host.style.top = `${newTop}px`;\r\n    }\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  private async evaluateProperty(value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>), defaultValue: boolean): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`}\r\n              class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\r\n              disabled={isDisabled}\r\n            >\r\n              {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n              <span class=\"label\">{item.label}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js

@@ -28,14 +28,14 @@ export class KritzelControlBrushConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '3111b2870e4a02da26bac5450424cadeef8c8d39' }, h("div", { key: '4bbf6bede0822c35e206566dd176e6b150b54098', style: {
+        return (h(Host, { key: 'ce2ac77db22f52239a45b62f690d54009f2c6954' }, h("div", { key: '5f6c50853e876c3612bb5c270bccc468c2c9a726', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'eb9c5690f823ca278d60629b9ac0595411771d05', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: 'd5b0d12188babdd26bbf97344cec60760b7c4f87', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'e1beea772a60dda335a56815fa39609c37849769', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '8b31bac4e67752f55d2c2281b37a38e6fd801a57', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'bfa24bb8683027c37f200ad65e4e6787d7224c56', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '8e2c55c6d16ca3911c5f068c354bdce5a4f7e844', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '33610ada109fe5d1d9cb2da4c70a60d672e3d6cb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-brush-config"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -19,14 +19,14 @@ export class KritzelControlTextConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '172bfe742f7fcb7db080729ac9b07cfd7a2f3f86' }, h("div", { key: 'de4000668ebc8a0fb27d9ae9b817b68a5d3e69b0', style: {
+        return (h(Host, { key: '4a0027969b183fef77c374eb114d9d30104e5ad7' }, h("div", { key: '9f49eb3a95080447b938fdfeb256fafbe5ff9ddc', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: '4940703e315d0991d4eb2000f4e1a1da6e113cb2', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '5a32fe373c1ce5cd312fa67e2b345fcc9eda81e5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '2dc5d0ed3d4bfe02e560e0d9b7fc487e343f56d9', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c3cba9ef7408aa726954b649d76bd1ae40f0aec6', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: 'b9f879d5f2bcc4b92519235e6fc0a22195a30a8f', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '4e75cda048f8b8c04e6cb5568e7cdcde91e28112', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '2db1d1166c0544489e1d854653c3c0ce8b881711', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '2b0ca1efc11023a96d8379eb042716edd6bd3f56', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'e5ced7a1ea76d19a65a6b377972455a929c5b2cb', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '938cde81947c3bf6d78d6d237a3c665182c6ffef', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-text-config"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -144,6 +144,7 @@
 .kritzel-submenu-content {
   display: flex;
   flex-direction: column;
+  gap: var(--kritzel-submenu-gap, 4px);
   min-width: 140px;
 }
 
@@ -176,7 +177,6 @@
   background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);
 }
 
-
 .kritzel-config-container {
   position: relative;
   display: flex;
@@ -204,7 +204,6 @@
   margin-left: 0;
 }
 
-
 .kritzel-config {
   display: flex;
   justify-content: center;

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -142,13 +142,13 @@ export class KritzelControls {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
             this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: '542415492107a5aa516602f53cbb830ee58ae320', class: {
+        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '38ea0136db9c81b38753a88915b98433f75dc9d4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '30843843f99eeb50cdbe2dd22472c112bfe952f4', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -164,7 +164,7 @@ export class KritzelControls {
                         } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
                             'kritzel-control-dropdown': true,
                             'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, showArrow: false, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                             'kritzel-submenu-item': true,
                             'active': option.id === selectedSubOption?.id,
                         }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n  @State() openSubMenuControl: KritzelToolbarControl | null = null;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.openSubMenuControl = null;\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  /**\r\n   * Get the currently selected sub-option for a control.\r\n   * Returns the first sub-option as default if none is selected.\r\n   */\r\n  private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption | undefined {\r\n    if (!control.subOptions?.length) return undefined;\r\n    return this.selectedSubOptions.get(control.name) || control.subOptions[0];\r\n  }\r\n\r\n  /**\r\n   * Toggle the submenu for a split-button control\r\n   */\r\n  private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n    event.stopPropagation();\r\n    if (this.openSubMenuControl?.name === control.name) {\r\n      this.openSubMenuControl = null;\r\n    } else {\r\n      this.openSubMenuControl = control;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Select a sub-option and update the tool property\r\n   */\r\n  private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n    // Update the selected sub-options map (create new Map for reactivity)\r\n    const newMap = new Map(this.selectedSubOptions);\r\n    newMap.set(control.name, option);\r\n    this.selectedSubOptions = newMap;\r\n\r\n    // Update the tool property if the tool is instantiated\r\n    if (control.tool && typeof control.tool !== 'function') {\r\n      (control.tool as any)[option.toolProperty] = option.value;\r\n    }\r\n\r\n    // Close the submenu\r\n    this.openSubMenuControl = null;\r\n\r\n    // Activate this control\r\n    await this.handleControlClick(control);\r\n  }\r\n\r\n  render() {\r\n    const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool || \r\n                        this.activeControl?.tool instanceof KritzelTextTool;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            undoState={this.undoState}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              // Check if this control has sub-options (split-button)\r\n              if (control.subOptions?.length) {\r\n                const selectedSubOption = this.getSelectedSubOption(control);\r\n                const isActive = this.activeControl?.name === control.name;\r\n                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n              return (\r\n                  <div\r\n                    class={{\r\n                      'kritzel-control-split': true,\r\n                      'selected': isActive,\r\n                    }}\r\n                    key={control.name}\r\n                    ref={el => { if (el) (control as any)._anchorRef = el; }}\r\n                  >\r\n                    <button\r\n                      class=\"kritzel-control-main\"\r\n                      onClick={() => this.handleControlClick(control)}\r\n                      title={selectedSubOption?.label}\r\n                    >\r\n                      <kritzel-icon name={selectedSubOption?.icon || control.icon}></kritzel-icon>\r\n                    </button>\r\n                    <button\r\n                      class={{\r\n                        'kritzel-control-dropdown': true,\r\n                        'visible': isActive,\r\n                      }}\r\n                      onClick={(e) => this.toggleSubMenu(e, control)}\r\n                      aria-label=\"Select shape type\"\r\n                      aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n                      tabIndex={isActive ? 0 : -1}\r\n                    >\r\n                      <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n                    </button>\r\n\r\n                    <kritzel-tooltip\r\n                      isVisible={isSubMenuOpen}\r\n                      anchorElement={(control as any)._anchorRef}\r\n                      showArrow={false}\r\n                      onTooltipClosed={() => { this.openSubMenuControl = null; }}\r\n                    >\r\n                      <div class=\"kritzel-submenu-content\">\r\n                        {control.subOptions.map(option => (\r\n                          <button\r\n                            class={{\r\n                              'kritzel-submenu-item': true,\r\n                              'active': option.id === selectedSubOption?.id,\r\n                            }}\r\n                            key={option.id}\r\n                            onClick={() => this.selectSubOption(control, option)}\r\n                          >\r\n                            <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n                            <span>{option.label}</span>\r\n                          </button>\r\n                        ))}\r\n                      </div>\r\n                    </kritzel-tooltip>\r\n                  </div>\r\n                );\r\n              }\r\n\r\n              // Regular tool control (no sub-options)\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div \r\n                  class={{\r\n                    'kritzel-config-container': true,\r\n                    'visible': hasConfigUI,\r\n                  }}\r\n                  key={control.name}\r\n                >\r\n                  <kritzel-tooltip\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    tabIndex={hasConfigUI ? 0 : -1}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\r\n                    style={{\r\n                      cursor: 'pointer',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n  @State() openSubMenuControl: KritzelToolbarControl | null = null;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.openSubMenuControl = null;\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  /**\r\n   * Get the currently selected sub-option for a control.\r\n   * Returns the first sub-option as default if none is selected.\r\n   */\r\n  private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption | undefined {\r\n    if (!control.subOptions?.length) return undefined;\r\n    return this.selectedSubOptions.get(control.name) || control.subOptions[0];\r\n  }\r\n\r\n  /**\r\n   * Toggle the submenu for a split-button control\r\n   */\r\n  private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n    event.stopPropagation();\r\n    if (this.openSubMenuControl?.name === control.name) {\r\n      this.openSubMenuControl = null;\r\n    } else {\r\n      this.openSubMenuControl = control;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Select a sub-option and update the tool property\r\n   */\r\n  private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n    // Update the selected sub-options map (create new Map for reactivity)\r\n    const newMap = new Map(this.selectedSubOptions);\r\n    newMap.set(control.name, option);\r\n    this.selectedSubOptions = newMap;\r\n\r\n    // Update the tool property if the tool is instantiated\r\n    if (control.tool && typeof control.tool !== 'function') {\r\n      (control.tool as any)[option.toolProperty] = option.value;\r\n    }\r\n\r\n    // Close the submenu\r\n    this.openSubMenuControl = null;\r\n\r\n    // Activate this control\r\n    await this.handleControlClick(control);\r\n  }\r\n\r\n  render() {\r\n    const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool || \r\n                        this.activeControl?.tool instanceof KritzelTextTool;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            undoState={this.undoState}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              // Check if this control has sub-options (split-button)\r\n              if (control.subOptions?.length) {\r\n                const selectedSubOption = this.getSelectedSubOption(control);\r\n                const isActive = this.activeControl?.name === control.name;\r\n                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n              return (\r\n                  <div\r\n                    class={{\r\n                      'kritzel-control-split': true,\r\n                      'selected': isActive,\r\n                    }}\r\n                    key={control.name}\r\n                    ref={el => { if (el) (control as any)._anchorRef = el; }}\r\n                  >\r\n                    <button\r\n                      class=\"kritzel-control-main\"\r\n                      onClick={() => this.handleControlClick(control)}\r\n                      title={selectedSubOption?.label}\r\n                    >\r\n                      <kritzel-icon name={selectedSubOption?.icon || control.icon}></kritzel-icon>\r\n                    </button>\r\n                    <button\r\n                      class={{\r\n                        'kritzel-control-dropdown': true,\r\n                        'visible': isActive,\r\n                      }}\r\n                      onClick={(e) => this.toggleSubMenu(e, control)}\r\n                      aria-label=\"Select shape type\"\r\n                      aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n                      tabIndex={isActive ? 0 : -1}\r\n                    >\r\n                      <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n                    </button>\r\n\r\n                    <kritzel-tooltip\r\n                      isVisible={isSubMenuOpen}\r\n                      anchorElement={(control as any)._anchorRef}\r\n                      onTooltipClosed={() => { this.openSubMenuControl = null; }}\r\n                    >\r\n                      <div class=\"kritzel-submenu-content\">\r\n                        {control.subOptions.map(option => (\r\n                          <button\r\n                            class={{\r\n                              'kritzel-submenu-item': true,\r\n                              'active': option.id === selectedSubOption?.id,\r\n                            }}\r\n                            key={option.id}\r\n                            onClick={() => this.selectSubOption(control, option)}\r\n                          >\r\n                            <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n                            <span>{option.label}</span>\r\n                          </button>\r\n                        ))}\r\n                      </div>\r\n                    </kritzel-tooltip>\r\n                  </div>\r\n                );\r\n              }\r\n\r\n              // Regular tool control (no sub-options)\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div \r\n                  class={{\r\n                    'kritzel-config-container': true,\r\n                    'visible': hasConfigUI,\r\n                  }}\r\n                  key={control.name}\r\n                >\r\n                  <kritzel-tooltip\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    tabIndex={hasConfigUI ? 0 : -1}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\r\n                    style={{\r\n                      cursor: 'pointer',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -17,7 +17,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '6e33687f7c71ec342d47f1ae4a507de1f08fad6f' }, h("button", { key: 'd0cf45d78743a954764d03abdb49a725c0979cf8', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '6303892952ef0426023dde47b909fe90abfbd4c6', name: "undo" })), h("button", { key: '0542b66850c61e001d7461ddcbceb7999f98dc6a', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'faf61b34c8d5abe3ba0bdb1787a08418874532a4', name: "redo" })), h("div", { key: 'a8482d17b7e9b68204d81097ced692daa1fb11cc', class: "utility-separator" }), h("button", { key: 'd733f273095a96c914285908088d9c1536dddaf0', class: "utility-button" }, h("kritzel-icon", { key: 'd5322357c8ffc646c77acb02c5c5ce9131ba66cd', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '998008f3c138f18d0e3f5183c3280e646e6c8e73' }, h("button", { key: '2ea58a2df20e038e00c0090c44714efbc1221314', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1843d211731f83f2f828b17f0bc0cf83a76705e1', name: "undo" })), h("button", { key: '71064186570d8e849a634a4c68e96f3fba1ebdab', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '12694a6dcddc1f893752d3edcc1deafe700cff5c', name: "redo" })), h("div", { key: '5bbfb5e535d9e0a861d227df57bd5cc7ab8c22fb', class: "utility-separator" }), h("button", { key: 'fda95410a66afa98c0abf6eb82e323f926ef596a', class: "utility-button" }, h("kritzel-icon", { key: '0d1d77f6d65481825c2edbdb38de821a2de7b043', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,7 +1,7 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CwkUrTy1.js';
 export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-BUsg2vtg.js';
-import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './p-9Sbn9-7-.js';
-export { N as IndexedDBSyncProvider, Q as KritzelAnchorManager, P as KritzelAppStateMap, L as KritzelCursorHelper, I as KritzelEraserTool, F as KritzelGroup, K as KritzelImage, J as KritzelImageTool, E as KritzelLine, G as KritzelLineTool, M as KritzelSelectionTool } from './p-9Sbn9-7-.js';
+import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './p-fqLbEfE0.js';
+export { N as IndexedDBSyncProvider, Q as KritzelAnchorManager, P as KritzelAppStateMap, L as KritzelCursorHelper, I as KritzelEraserTool, F as KritzelGroup, K as KritzelImage, J as KritzelImageTool, E as KritzelLine, G as KritzelLineTool, M as KritzelSelectionTool } from './p-fqLbEfE0.js';
 export { K as KritzelWorkspace } from './p-n789Y3S-.js';
 export { D as DEFAULT_BRUSH_CONFIG, b as DEFAULT_LINE_TOOL_CONFIG, a as DEFAULT_TEXT_CONFIG, KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor } from './kritzel-editor.js';
 export { KritzelBrushStyle, defineCustomElement as defineCustomElementKritzelBrushStyle } from './kritzel-brush-style.js';

package/dist/components/kritzel-brush-style.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { d as defineCustomElement$3 } from './p-BdwB-S9G.js';
+import { d as defineCustomElement$3 } from './p-Cdw55iW6.js';
 import { d as defineCustomElement$2 } from './p-CIts5Uma.js';
 
 const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
@@ -27,7 +27,7 @@ const KritzelBrushStyle$1 = /*@__PURE__*/ proxyCustomElement(class KritzelBrushS
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '0eb1359bd2bc9d007edf804e62f4b47b1c91c507' }, h("kritzel-dropdown", { key: '47fea48007590b350d1005ce8440f95e4b0cdd9f', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '76ef20892c37258211caa5511845a2b2551afd80', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '396b36343f0c91274131f3f148c57c22ed988fec', name: this.type, size: 16 })))));
+        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
     }
     static get style() { return kritzelBrushStyleCss; }
 }, [769, "kritzel-brush-style", {

package/dist/components/kritzel-color-palette.js

@@ -1,4 +1,4 @@
-import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-Brd9SxWS.js';
+import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-c7AGmG3p.js';
 
 const KritzelColorPalette = KritzelColorPalette$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-color.js

@@ -1,4 +1,4 @@
-import { K as KritzelColor$1, d as defineCustomElement$1 } from './p-LAsVgL2e.js';
+import { K as KritzelColor$1, d as defineCustomElement$1 } from './p-CIlIrPRp.js';
 
 const KritzelColor = KritzelColor$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-context-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-D_uh1RUI.js';
+import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-Bo-NQ68K.js';
 
 const KritzelContextMenu = KritzelContextMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-control-brush-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-Co5HWjr6.js';
+import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-B80ry-r4.js';
 
 const KritzelControlBrushConfig = KritzelControlBrushConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-control-text-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-DG7VXGxX.js';
+import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-vLN8eXFe.js';
 
 const KritzelControlTextConfig = KritzelControlTextConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-controls.js

@@ -1,4 +1,4 @@
-import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-cv2RCdI1.js';
+import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-C92UCXyc.js';
 
 const KritzelControls = KritzelControls$1;
 const defineCustomElement = defineCustomElement$1;