kritzel-stencil 0.0.129 → 0.0.131

package/dist/components/p-Dozs0Zfn.js

@@ -1,115 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
-import { K as KritzelDevicesHelper } from './p-CJKA5zIE.js';
-import { d as defineCustomElement$3 } from './p-BLmFBe2a.js';
-import { d as defineCustomElement$2 } from './p-C6OxvITm.js';
-import { d as defineCustomElement$1 } from './p-BmJbJwkH.js';
-
-const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-controls-padding, 4px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}:host(.mobile){--kritzel-context-menu-item-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
-
-const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitButton extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.buttonClick = createEvent(this, "buttonClick");
-        this.optionSelect = createEvent(this, "optionSelect");
-        this.menuOpened = createEvent(this, "menuOpened");
-        this.menuClosed = createEvent(this, "menuClosed");
-        this.dropdownIcon = 'chevron-down';
-        this.options = [];
-        this.disabled = false;
-        this.activeItemIndex = null;
-        this.editingIndex = null;
-        this.isMenuOpen = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.handleDocumentClick = (event) => {
-            const path = (event.composedPath && event.composedPath()) || [];
-            const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
-            if (!clickedInside) {
-                this.closeMenu();
-            }
-            else if (this.isMenuOpen) {
-                document.addEventListener('click', this.handleDocumentClick, { once: true });
-            }
-        };
-        this.toggleMenu = () => {
-            if (this.isMenuOpen) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu();
-            }
-        };
-        this.handleButtonClick = () => {
-            if (!this.disabled) {
-                this.buttonClick.emit();
-            }
-        };
-    }
-    async openMenu() {
-        if (this.disabled || this.isMenuOpen)
-            return;
-        this.isMenuOpen = true;
-        this.menuOpened.emit();
-        document.addEventListener('click', this.handleDocumentClick, { once: true });
-    }
-    async closeMenu() {
-        if (this.disabled || !this.isMenuOpen)
-            return;
-        this.isMenuOpen = false;
-        this.menuClosed.emit();
-        this.host.focus();
-    }
-    render() {
-        return (h(Host, { key: '1c0010ff46e3e6ac4753f332e683752f82bfb699', tabIndex: 0, class: { mobile: this.isTouchDevice } }, h("button", { key: 'b9e60cea56197641c15a58a3899d09a604a0ca20', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '3bd9a97e9511eb734665bd45e646f68d9cdcafc5', name: this.buttonIcon }), this.buttonText && (h("span", { key: 'f4a7bbd42bfdf8b748167b439a25ec7cc9f72ecf' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: 'bd6ce66c2debee87fa78904730a7fa09bcfe6514', class: "split-divider" }), h("button", { key: '5a7b918856ebfc77dd8aa290acb62f4fceaff2b3', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: '28ab4da8d1c4703f0df6551dd85791528b6af793', name: this.dropdownIcon })), h("kritzel-portal", { key: '72746c9acfcbdc56f2a053662d3f1e8596d71eb9', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '98af211f4dbc21c4a5fd7223c9441a54451b38a2', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
-    }
-    get host() { return this; }
-    static get style() { return kritzelSplitButtonCss; }
-}, [257, "kritzel-split-button", {
-        "buttonText": [1, "button-text"],
-        "buttonIcon": [1, "button-icon"],
-        "dropdownIcon": [1, "dropdown-icon"],
-        "options": [16],
-        "disabled": [4],
-        "activeItemIndex": [2, "active-item-index"],
-        "editingIndex": [2, "editing-index"],
-        "isMenuOpen": [32],
-        "isTouchDevice": [32],
-        "openMenu": [64],
-        "closeMenu": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-split-button", "kritzel-icon", "kritzel-menu", "kritzel-portal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-split-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelSplitButton);
-            }
-            break;
-        case "kritzel-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "kritzel-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "kritzel-portal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-Dozs0Zfn.js.map
-
-//# sourceMappingURL=p-Dozs0Zfn.js.map

package/dist/components/p-Dozs0Zfn.js.map

@@ -1 +0,0 @@
-{"file":"p-Dozs0Zfn.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: sans-serif;\n  z-index: 1;\n  padding: var(--kritzel-controls-padding, 4px);\n  background-color: var(--kritzel-controls-background-color, #ffffff);\n  border-radius: var(--kritzel-controls-border-radius, 12px);\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\n  gap: var(--kritzel-context-menu-item-gap, 4px);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host(.mobile){\n  --kritzel-context-menu-item-hover-background-color: transparent;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: all;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.split-main-button,\n.split-menu-button {\n  height: auto;\n  display: flex;\n  align-items: center;\n  padding: var(--kritzel-controls-padding, 8px);\n  background-color: var(--kritzel-controls-background-color, #ffffff);\n  border-radius: var(--kritzel-controls-border-radius, 12px);\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\n}\n\n.split-main-button:hover,\n.split-menu-button:hover {\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n\n.split-main-button:focus,\n.split-menu-button:focus {\n  outline: none;\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n\n.split-main-button {\n  gap: var(--kritzel-context-menu-item-gap, 4px);\n}\n\n.split-menu-button {\n  border-left: none;\n  justify-content: center;\n}\n\n.split-divider {\n  width: var(--kritzel-controls-divider-width, 1px);\n  height: 24px;\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Prop()\r\n  buttonText: string;\r\n\r\n  @Prop()\r\n  buttonIcon: string;\r\n\r\n  @Prop()\r\n  dropdownIcon = 'chevron-down';\r\n\r\n  @Prop()\r\n  options: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  @Prop()\r\n  activeItemIndex: number | null = null;\r\n\r\n  @Prop()\r\n  editingIndex: number | null = null;\r\n\r\n  @Event()\r\n  buttonClick: EventEmitter<void>;\r\n\r\n  @Event()\r\n  optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n  @Event()\r\n  menuOpened: EventEmitter<void>;\r\n\r\n  @Event()\r\n  menuClosed: EventEmitter<void>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @State()\r\n  isMenuOpen = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  splitMenuButton: HTMLButtonElement;\r\n\r\n  @Method()\r\n  async openMenu() {\r\n    if (this.disabled || this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = true;\r\n    this.menuOpened.emit();\r\n    document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n  }\r\n\r\n  @Method()\r\n  async closeMenu() {\r\n    if (this.disabled || !this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = false;\r\n    this.menuClosed.emit();\r\n\r\n    this.host.focus();\r\n  }\r\n\r\n  private handleDocumentClick = (event: MouseEvent) => {\r\n    const path = (event.composedPath && event.composedPath()) || [];\r\n    const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n    if (!clickedInside) {\r\n      this.closeMenu();\r\n    } else if (this.isMenuOpen) {\r\n      document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n    }\r\n  };\r\n\r\n  private toggleMenu = () => {\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu();\r\n    }\r\n  };\r\n\r\n  private handleButtonClick = () => {\r\n    if (!this.disabled) {\r\n      this.buttonClick.emit();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0} class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n          {this.buttonText && (\r\n            <span>\r\n              {this.buttonText} ({this.options.length})\r\n            </span>\r\n          )}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.host} offsetY={4}>\r\n          {this.isMenuOpen && (\r\n            <kritzel-menu\r\n              style={{ maxHeight: '300px', width: '180px' }}\r\n              items={this.options}\r\n              activeItemIndex={this.activeItemIndex}\r\n              editingIndex={this.editingIndex}\r\n              onClose={() => this.closeMenu()}\r\n            ></kritzel-menu>\r\n          )}\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-DtmZW6eP.js.map

@@ -1 +0,0 @@
-{"file":"p-DtmZW6eP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css?tag=kritzel-cursor-trail&encapsulation=shadow","src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  pointer-events: none;\r\n  z-index: 9000;\r\n}\r\n","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelStore } from '../../../classes/store.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @Prop()\r\n  store: KritzelStore;\r\n\r\n  @State()\r\n  cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n\r\n  @State()\r\n  isLeftButtonDown: boolean = false;\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\r\n     if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if(ev.button === KritzelMouseButton.Left){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if(this.store.state.pointers.size === 0){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-V4ui5aWj.js.map

@@ -1 +0,0 @@
-{"file":"p-V4ui5aWj.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,wuBAAwuB;;MCUxvB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOE,QAAA,IAAI,CAAA,IAAA,GAA0B,KAAK;QAE3B,IAAA,CAAA,YAAY,GAAuB;AACzC,YAAA,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AAC9B,YAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;SAC/C;AAyBF;AApBC,IAAA,yBAAyB,CAAC,KAA0B,EAAA;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAA+B,CAAC;;IAG7D,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK;YACzE,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACpB,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAA,EAC1H,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9C,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAiB,CAAA,CACjD,CACQ,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-brush-style/kritzel-brush-style.css?tag=kritzel-brush-style&encapsulation=shadow","src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx"],"sourcesContent":[":host {\r\n  display: flex; \r\n  align-items: flex-start; \r\n  gap: 8px; \r\n  padding: 8px; \r\n  box-sizing: border-box; \r\n  width: 100%;\r\n}\r\n\r\n.brush-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: default;\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\nimport { DropdownOption } from '../kritzel-dropdown/kritzel-dropdown'; // Import DropdownOption\r\n\r\nexport interface BrushStyleOption extends DropdownOption {}\r\n\r\n@Component({\r\n  tag: 'kritzel-brush-style',\r\n  styleUrl: 'kritzel-brush-style.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelBrushStyle {\r\n  @Prop()\r\n  type: 'pen' | 'highlighter' = 'pen';\r\n\r\n  @Prop() brushOptions: BrushStyleOption[] = [\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ];\r\n\r\n  @Event()\r\n  typeChange: EventEmitter<'pen' | 'highlighter'>;\r\n\r\n  handleDropdownValueChange(event: CustomEvent<string>) {\r\n    this.typeChange.emit(event.detail as 'pen' | 'highlighter');\r\n  }\r\n\r\n  render() {\r\n    const dropdownOptions: DropdownOption[] = this.brushOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown options={dropdownOptions} value={this.type} onValueChanged={event => this.handleDropdownValueChange(event)}>\r\n          <button class=\"brush-style-button\" slot=\"prefix\">\r\n            <kritzel-icon name={this.type} size={16}></kritzel-icon>\r\n          </button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-_ntxNi8v.js.map

@@ -1 +0,0 @@
-{"file":"p-_ntxNi8v.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,wxBAAwxB;;MCYxyB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAOE,IAAA,CAAA,WAAW,GAAiB;AAC1B,YAAA,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;AAClC,YAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,YAAA,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;AAC1C,YAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;AACpC,YAAA,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;AAChD,YAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;AACtD,YAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACxC,YAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;AAC9C,YAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;SACvD;AAiBO,QAAA,IAAA,CAAA,yBAAyB,GAAG,CAAC,KAA0B,KAAI;YACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC1C,SAAC;AAuBF;IAlCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACnD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC;YAC9F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE;gBACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK;;;;IASzD,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAAK;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,YAAA,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;AACpC,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAA,EAErD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,EAC1D,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,CACrD,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-family/kritzel-font-family.css?tag=kritzel-font-family&encapsulation=shadow","src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"sourcesContent":[":host {\r\n  display: flex; \r\n  align-items: flex-start; \r\n  gap: 8px; \r\n  padding: 8px; \r\n  box-sizing: border-box; \r\n  width: 100%;\r\n}\r\n\r\n.font-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}\r\n\r\n.font-style-button.italic-text {\r\n  font-style: italic;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-font-family',\r\n  styleUrl: 'kritzel-font-family.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n  @Prop() \r\n  fontOptions: FontOption[] = [\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ];\r\n\r\n  @Prop({ mutable: true }) \r\n  selectedFontFamily: string;\r\n\r\n  @Event()\r\n  fontFamilyChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.fontOptions && this.fontOptions.length > 0) {\r\n      const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n      if (!this.selectedFontFamily || !isValidCurrentFont) {\r\n        this.selectedFontFamily = this.fontOptions[0].value;\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n    this.fontFamilyChange.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    const dropdownOptions = this.fontOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n      style: { fontFamily: option.value },\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown\r\n          options={dropdownOptions}\r\n          value={this.selectedFontFamily}\r\n          onValueChanged={this.handleDropdownValueChange}\r\n          selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n        >\r\n          <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n          <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-a7KmQzo4.js.map

@@ -1 +0,0 @@
-{"file":"p-a7KmQzo4.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/components/p-aaxf-h5S.js

@@ -1,159 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
-import { K as KritzelWorkspace } from './p-BeVv4o5c.js';
-import { O as ObjectHelper } from './p-Bb6od8He.js';
-import { d as defineCustomElement$4 } from './p-BLmFBe2a.js';
-import { d as defineCustomElement$3 } from './p-C6OxvITm.js';
-import { d as defineCustomElement$2 } from './p-BmJbJwkH.js';
-import { d as defineCustomElement$1 } from './p-Dozs0Zfn.js';
-
-const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
-
-const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWorkspaceManager extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.isWorkspaceManagerReady = createEvent(this, "isWorkspaceManagerReady");
-        this.workspaceChange = createEvent(this, "workspaceChange");
-        this.workspaces = [];
-        this.editingIndex = null;
-        this.newWorkspace = null;
-        this.kritzelEngine = null;
-        this.handleNewWorkspace = async () => {
-            var _a;
-            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
-            requestAnimationFrame(() => {
-                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
-                this.editingIndex = 0;
-            });
-        };
-        this.handleMenuClosed = () => {
-            this.editingIndex = null;
-            this.newWorkspace = null;
-        };
-        this.handleSave = async (item) => {
-            const workspace = item.value;
-            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
-            if (this.newWorkspace) {
-                await this.kritzelEngine.createWorkspace(updatedWorkspace);
-                this.editingIndex = null;
-                this.newWorkspace = null;
-                this.selectWorkspace(updatedWorkspace);
-            }
-            else {
-                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
-                this.editingIndex = null;
-                this.newWorkspace = null;
-            }
-        };
-        this.handleRename = (index) => {
-            this.editingIndex = index;
-        };
-        this.handleDelete = async (workspaceToDelete) => {
-            var _a;
-            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
-            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
-                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
-                this.selectWorkspace(newActiveWorkspace);
-            }
-        };
-    }
-    get sortedWorkspaces() {
-        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
-        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
-    }
-    get activeItemIndex() {
-        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
-    }
-    async componentWillLoad() {
-        await this.initializeEngine();
-        this.isWorkspaceManagerReady.emit();
-    }
-    async initializeEngine() {
-        await customElements.whenDefined('kritzel-engine');
-        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
-        if (!this.kritzelEngine) {
-            throw new Error('kritzel-engine not found in parent element.');
-        }
-    }
-    handleSelect(workspace) {
-        this.selectWorkspace(workspace);
-    }
-    selectWorkspace(workspace) {
-        debugger;
-        if (this.editingIndex !== null)
-            return;
-        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
-        this.workspaceChange.emit(workspace);
-    }
-    render() {
-        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
-            label: ws.name,
-            value: ws,
-            select: () => this.handleSelect(ws),
-            cancel: this.handleMenuClosed,
-            save: this.handleSave,
-            children: [
-                {
-                    label: 'Rename',
-                    value: 'rename',
-                    select: () => this.handleRename(index),
-                },
-                {
-                    label: 'Delete',
-                    value: 'delete',
-                    disabled: this.sortedWorkspaces.length <= 1,
-                    select: () => this.handleDelete(ws),
-                },
-            ],
-        }));
-        return (h(Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
-    }
-    get host() { return this; }
-    static get style() { return kritzelWorkspaceManagerCss; }
-}, [257, "kritzel-workspace-manager", {
-        "workspaces": [16],
-        "activeWorkspace": [1040, "active-workspace"],
-        "editingIndex": [32],
-        "newWorkspace": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-workspace-manager", "kritzel-icon", "kritzel-menu", "kritzel-portal", "kritzel-split-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-workspace-manager":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelWorkspaceManager);
-            }
-            break;
-        case "kritzel-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "kritzel-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "kritzel-portal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "kritzel-split-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-aaxf-h5S.js.map
-
-//# sourceMappingURL=p-aaxf-h5S.js.map

package/dist/components/p-aaxf-h5S.js.map

@@ -1 +0,0 @@
-{"file":"p-aaxf-h5S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css?tag=kritzel-workspace-manager&encapsulation=shadow","src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.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 handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n    }\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    debugger;\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-jG1e48OE.js.map

@@ -1 +0,0 @@
-{"file":"p-jG1e48OE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen } from '@stencil/core';\r\n\r\nconst MOBILE_BREAKPOINT = 768;\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  @Prop()\r\n  isVisible: boolean = false;\r\n\r\n  @Prop()\r\n  anchorElement: HTMLElement;\r\n\r\n  @Prop()\r\n  arrowSize: number = 8;\r\n\r\n  @Prop()\r\n  offsetY: number = 24;\r\n\r\n  @Element()\r\n  el: HTMLElement;\r\n\r\n  @State()\r\n  positionX: number = 0;\r\n\r\n  @State()\r\n  arrowOffset: string = '0px';\r\n\r\n  @State()\r\n  private isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\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.el.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n      if (!this.isMobileView) {\r\n        this.positionX = anchorRect.left + anchorRect.width / 2;\r\n        this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \r\n      } else {\r\n        const tooltipRect = tooltipContent.getBoundingClientRect();\r\n        this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\r\n        this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\r\n      }\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.isMobileView ? `${this.positionX}px` : '50%',\r\n          marginBottom: `${this.offsetY + this.arrowSize}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\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        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-rQeWFfPG.js.map

@@ -1 +0,0 @@
-{"file":"p-rQeWFfPG.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,8gBAA8gB;;MCO9hB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOE,QAAA,IAAA,CAAA,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAGvC,QAAA,IAAY,CAAA,YAAA,GAAkB,IAAI;AA2BnC;AAtBS,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,EAAA,CAAkB,CACvD,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-stroke-size/kritzel-stroke-size.css?tag=kritzel-stroke-size&encapsulation=shadow","src/components/shared/kritzel-stroke-size/kritzel-stroke-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-stroke-size',\r\n  styleUrl: 'kritzel-stroke-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelStrokeSize {\r\n  @Prop() \r\n  sizes: number[] = [4, 6, 8, 12, 16, 24];\r\n\r\n  @Prop({ mutable: true }) \r\n  selectedSize: number | null = null;\r\n\r\n  @Event() \r\n  sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-color value='#000000' size={size}></kritzel-color>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-yZFrTtMQ.js.map

@@ -1 +0,0 @@
-{"file":"p-yZFrTtMQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n  --kritzel-controls-control-hover-background-color: transparent;\r\n  --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--kritzel-controls-gap, 8px);\r\n  height: 100%;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 16px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 10000;\r\n  position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  -webkit-tap-highlight-color: transparent;\r\n  font-weight: bold;\r\n}\r\n\r\n.kritzel-control:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-divider {\r\n  width: var(--kritzel-controls-divider-width, 1px);\r\n  height: var(--kritzel-controls-divider-height, 24px);\r\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-config-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-config {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.color-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n    height: 24px;\r\n    width: 24px;\r\n    border-radius: 50%;\r\n    border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n  position: fixed;\r\n  bottom: 66px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 10001;\r\n}\r\n","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 } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\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  @Prop()\r\n  controls: KritzelToolbarControl[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeControl: KritzelToolbarControl | null = null;\r\n\r\n  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event()\r\n  isControlsReady: EventEmitter<void>;\r\n\r\n  @State()\r\n  firstConfig: ToolConfig | null = null;\r\n\r\n  @State()\r\n  isTooltipVisible: boolean = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Element()\r\n  host!: HTMLElement;\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.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    await this.kritzelEngine?.setFocus();\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\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    this.kritzelEngine?.disable();\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  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\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            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              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 === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\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                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\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\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\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}