kritzel-stencil 0.0.76 → 0.0.78

package/dist/components/kritzel-editor.js

@@ -2,21 +2,22 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-nnmjP18w.js';
 import { a as KritzelIconRegistry, d as defineCustomElement$5 } from './p-MPhvpAqa.js';
 import { K as KritzelBrushTool, a as KritzelTextTool } from './p-CFkDfXW4.js';
 import { a as KritzelSelectionTool, b as KritzelEraserTool, c as KritzelImageTool, d as defineCustomElement$9 } from './p-CejqoWNi.js';
-import { d as defineCustomElement$i } from './p-EZVcj_Vk.js';
-import { d as defineCustomElement$h } from './p-Dd-jVt1z.js';
-import { d as defineCustomElement$g } from './p-CwiXaI-9.js';
-import { d as defineCustomElement$f } from './p-CKvByKIq.js';
-import { d as defineCustomElement$e } from './p-CW800wxH.js';
-import { d as defineCustomElement$d } from './p-CtzUAFH7.js';
-import { d as defineCustomElement$c } from './p-DzVQltWB.js';
-import { d as defineCustomElement$b } from './p-DJtliiBi.js';
-import { d as defineCustomElement$a } from './p-CFqbFD48.js';
-import { d as defineCustomElement$8 } from './p-DkKI-ulw.js';
+import { d as defineCustomElement$j } from './p-EZVcj_Vk.js';
+import { d as defineCustomElement$i } from './p-B17z0dHf.js';
+import { d as defineCustomElement$h } from './p-DqnnZDDT.js';
+import { d as defineCustomElement$g } from './p-CKvByKIq.js';
+import { d as defineCustomElement$f } from './p-BzT7WSFX.js';
+import { d as defineCustomElement$e } from './p-BfOHORuS.js';
+import { d as defineCustomElement$d } from './p-CmwVLwvI.js';
+import { d as defineCustomElement$c } from './p-DJtliiBi.js';
+import { d as defineCustomElement$b } from './p-CFqbFD48.js';
+import { d as defineCustomElement$a } from './p-9_JiL_wH.js';
+import { d as defineCustomElement$8 } from './p-DBL15JoO.js';
 import { d as defineCustomElement$7 } from './p-NAXC-PTl.js';
-import { d as defineCustomElement$6 } from './p-D4WPb8MT.js';
-import { d as defineCustomElement$4 } from './p-RyhiTey9.js';
-import { d as defineCustomElement$3 } from './p-Vgp7wvdA.js';
-import { d as defineCustomElement$2 } from './p-ub68lkC1.js';
+import { d as defineCustomElement$6 } from './p-Clp62syd.js';
+import { d as defineCustomElement$4 } from './p-C25_uk1W.js';
+import { d as defineCustomElement$3 } from './p-rxaqUiJC.js';
+import { d as defineCustomElement$2 } from './p-CCcFfkWG.js';
 
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
@@ -152,12 +153,13 @@ const DEFAULT_KRITZEL_CONTROLS = [
     },
 ];
 
-const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;--kritzel-primary-color:blue;--kritzel-selection-box-background-color:rgba(0, 0, 255, 0.2);--kritzel-selection-box-border-color:rgba(0, 0, 255, 0.5);--kritzel-selection-border-color:var(--kritzel-primary-color);--kritzel-selection-border-width:2px;--kritzel-selection-border-style:solid;--kritzel-selection-handle-size:6px;--kritzel-selection-handle-color:#000000;--kritzel-context-menu-background-color:#ffffff;--kritzel-context-menu-border-radius:8px;--kritzel-context-menu-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-context-menu-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-padding:4px;--kritzel-context-menu-item-gap:8px;--kritzel-context-menu-item-padding:8px;--kritzel-context-menu-item-border-radius:8px;--kritzel-context-menu-item-color:#333333;--kritzel-context-menu-item-font-size:14px;--kritzel-context-menu-item-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-item-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-context-menu-item-disabled-color:#aaaaaa;--kritzel-controls-box-shadow:0 0 3px rgba(0, 0, 0, 0.08);--kritzel-controls-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-controls-border-radius:8px;--kritzel-controls-background-color:#ffffff;--kritzel-controls-padding:8px;--kritzel-controls-gap:8px;--kritzel-controls-control-color:#000;--kritzel-controls-control-border-radius:8px;--kritzel-controls-control-padding:8px;--kritzel-controls-control-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-control-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-controls-control-selected-background-color:var(--kritzel-primary-color);--kritzel-controls-control-selected-color:#ffffff;--kritzel-controls-divider-width:1px;--kritzel-controls-divider-height:24px;--kritzel-controls-divider-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-tooltip-background-color:#fff;--kritzel-controls-tooltip-color:#000;--kritzel-controls-tooltip-border-radius:8px;--kritzel-controls-tooltip-padding:8px;--kritzel-controls-tooltip-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-color-palette-hover-background-color:#f0f0f0;--kritzel-color-palette-circle-border-color:#dddcdc;--kritzel-color-palette-selected-border-color:var(--kritzel-primary-color);--kritzel-color-palette-selected-background-color:#f0f0f0;--kritzel-color-palette-expand-toggle-color:#666;--kritzel-color-palette-expand-toggle-hover-color:#333;--kritzel-stroke-size-hover-background-color:#f0f0f0;--kritzel-stroke-size-selected-border-color:var(--kritzel-primary-color);--kritzel-stroke-size-selected-background-color:#f0f0f0;--kritzel-stroke-size-circle-color:#000;--kritzel-cursor-trail-color:rgb(228, 228, 228);--kritzel-cursor-trail-opacity:0.6;--kritzel-engine-background-color:#ffffff}kritzel-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:16px}";
+const kritzelEditorCss = ":host{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;--kritzel-primary-color:blue;--kritzel-selection-box-background-color:rgba(0, 0, 255, 0.2);--kritzel-selection-box-border-color:rgba(0, 0, 255, 0.5);--kritzel-selection-border-color:var(--kritzel-primary-color);--kritzel-selection-border-width:2px;--kritzel-selection-border-style:solid;--kritzel-selection-handle-size:6px;--kritzel-selection-handle-color:#000000;--kritzel-context-menu-background-color:#ffffff;--kritzel-context-menu-border-radius:8px;--kritzel-context-menu-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-context-menu-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-padding:4px;--kritzel-context-menu-item-gap:8px;--kritzel-context-menu-item-padding:8px;--kritzel-context-menu-item-border-radius:8px;--kritzel-context-menu-item-color:#333333;--kritzel-context-menu-item-font-size:14px;--kritzel-context-menu-item-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-item-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-context-menu-item-disabled-color:#aaaaaa;--kritzel-controls-box-shadow:0 0 3px rgba(0, 0, 0, 0.08);--kritzel-controls-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-controls-border-radius:8px;--kritzel-controls-background-color:#ffffff;--kritzel-controls-padding:8px;--kritzel-controls-gap:8px;--kritzel-controls-control-color:#000;--kritzel-controls-control-border-radius:8px;--kritzel-controls-control-padding:8px;--kritzel-controls-control-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-control-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-controls-control-selected-background-color:var(--kritzel-primary-color);--kritzel-controls-control-selected-color:#ffffff;--kritzel-controls-divider-width:1px;--kritzel-controls-divider-height:24px;--kritzel-controls-divider-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-tooltip-background-color:#fff;--kritzel-controls-tooltip-color:#000;--kritzel-controls-tooltip-border-radius:8px;--kritzel-controls-tooltip-padding:8px;--kritzel-controls-tooltip-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-color-palette-hover-background-color:#f0f0f0;--kritzel-color-palette-circle-border-color:#dddcdc;--kritzel-color-palette-selected-border-color:var(--kritzel-primary-color);--kritzel-color-palette-selected-background-color:#f0f0f0;--kritzel-color-palette-expand-toggle-color:#666;--kritzel-color-palette-expand-toggle-hover-color:#333;--kritzel-stroke-size-hover-background-color:#f0f0f0;--kritzel-stroke-size-selected-border-color:var(--kritzel-primary-color);--kritzel-stroke-size-selected-background-color:#f0f0f0;--kritzel-stroke-size-circle-color:#000;--kritzel-cursor-trail-color:rgb(228, 228, 228);--kritzel-cursor-trail-opacity:0.6;--kritzel-engine-background-color:#ffffff}.dummy-top{position:absolute;left:50%;transform:translateX(-50%);top:16px;z-index:1}.dummy-bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:1}kritzel-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:16px}";
 
 const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.controls = DEFAULT_KRITZEL_CONTROLS;
         this.customSvgIcons = {};
         this.hideControls = false;
@@ -190,10 +192,12 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         }
     }
     render() {
-        return (h(Host, { key: '1498c131b352144fbe99d0cadcf3de1eef794aff' }, h("kritzel-engine", { key: '65aa62cd9bd11f42c6bb460f943af8fb7832fae9', onEngineReady: () => this.handleEngineReady() }), h("kritzel-controls", { key: 'ec8b22b47b369b76580e7d164bda28b4fed538c2', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: this.hideControls ? { display: 'none' } : {} })));
+        return (h(Host, { key: '37e291c25a636b65cc751799cfe57de216a14990' }, h("kritzel-dummy", { key: '5b3b3e9c6baf1885a85f749f674ca257fa9f109e', class: "dummy-top" }), h("kritzel-engine", { key: '11ec65ad0858d842c472b829667c1be7086d92b1', onEngineReady: () => this.handleEngineReady() }), h("kritzel-dummy", { key: 'c3e3586692f5f8340aa34cd8b04e7ac1fbd7401b', class: "dummy-bottom" }), h("kritzel-controls", { key: '3f999492eeabe6e3179027753138099d387aa541', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: {
+                visibility: 'hidden'
+            } })));
     }
     static get style() { return kritzelEditorCss; }
-}, [0, "kritzel-editor", {
+}, [1, "kritzel-editor", {
         "controls": [16],
         "customSvgIcons": [16, "custom-svg-icons"],
         "hideControls": [4, "hide-controls"],
@@ -203,7 +207,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["kritzel-editor", "kritzel-brush-style", "kritzel-color", "kritzel-color-palette", "kritzel-context-menu", "kritzel-control-brush-config", "kritzel-control-text-config", "kritzel-controls", "kritzel-cursor-trail", "kritzel-dropdown", "kritzel-engine", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-stroke-size", "kritzel-tooltip", "kritzel-utility-panel"];
+    const components = ["kritzel-editor", "kritzel-brush-style", "kritzel-color", "kritzel-color-palette", "kritzel-context-menu", "kritzel-control-brush-config", "kritzel-control-text-config", "kritzel-controls", "kritzel-cursor-trail", "kritzel-dropdown", "kritzel-dummy", "kritzel-engine", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-stroke-size", "kritzel-tooltip", "kritzel-utility-panel"];
     components.forEach(tagName => { switch (tagName) {
         case "kritzel-editor":
             if (!customElements.get(tagName)) {
@@ -212,45 +216,50 @@ function defineCustomElement$1() {
             break;
         case "kritzel-brush-style":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "kritzel-color":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "kritzel-color-palette":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "kritzel-context-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "kritzel-control-brush-config":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "kritzel-control-text-config":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "kritzel-controls":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "kritzel-cursor-trail":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "kritzel-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kritzel-dummy":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/kritzel-editor.js.map

@@ -1 +1 @@
-{"file":"kritzel-editor.js","mappings":"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","names":["KritzelEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/configs/default-toolbar-controls.ts","src/components/core/kritzel-editor/kritzel-editor.css?tag=kritzel-editor","src/components/core/kritzel-editor/kritzel-editor.tsx"],"sourcesContent":["import { KritzelBrushTool } from '../classes/tools/brush-tool.class';\r\nimport { KritzelEraserTool } from '../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../classes/tools/image-tool.class';\r\nimport { KritzelSelectionTool } from '../classes/tools/selection-tool.class';\r\nimport { KritzelTextTool } from '../classes/tools/text-tool.class';\r\nimport { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from '../interfaces/toolbar-control.interface';\r\n\r\nexport const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig = {\r\n  type: 'pen',\r\n  color: '#000000',\r\n  size: 16,\r\n  palettes: {\r\n    pen: [\r\n      '#000000',\r\n      '#ff5252',\r\n      '#ffbc00',\r\n      '#00c853',\r\n      '#0000FF',\r\n      '#d500f9',\r\n      '#fafafa',\r\n      '#a52714',\r\n      '#ee8100',\r\n      '#558b2f',\r\n      '#01579b',\r\n      '#8e24aa',\r\n      '#90a4ae',\r\n      '#ff4081',\r\n      '#ff6e40',\r\n      '#aeea00',\r\n      '#304ffe',\r\n      '#7c4dff',\r\n      '#cfd8dc',\r\n      '#f8bbd0',\r\n      '#ffccbc',\r\n      '#f0f4c3',\r\n      '#9fa8da',\r\n      '#d1c4e9',\r\n    ],\r\n    highlighter: [\r\n      '#0000006e',\r\n      '#ff52526e',\r\n      '#ffbb006e',\r\n      '#00c8536e',\r\n      '#0000FF6e',\r\n      '#d500f96e',\r\n      '#fafafa6e',\r\n      '#a527146e',\r\n      '#ee81006e',\r\n      '#558b2f6e',\r\n      '#01579b6e',\r\n      '#8e24aa6e',\r\n      '#90a4ae6e',\r\n      '#ff40816e',\r\n      '#ff6e406e',\r\n      '#aeea006e',\r\n      '#304ffe6e',\r\n      '#7c4dff6e',\r\n      '#cfd8dc6e',\r\n      '#f8bbd06e',\r\n      '#ffccbc6e',\r\n      '#f0f4c36e',\r\n      '#9fa8da6e',\r\n      '#d1c4e96e',\r\n    ],\r\n  },\r\n};\r\n\r\nexport const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig = {\r\n  color: '#000000',\r\n  size: 8,\r\n  fontFamily: 'Arial',\r\n  palette: [\r\n    '#000000',\r\n    '#ff5252',\r\n    '#ffbc00',\r\n    '#00c853',\r\n    '#0000FF',\r\n    '#d500f9',\r\n    '#fafafa',\r\n    '#a52714',\r\n    '#ee8100',\r\n    '#558b2f',\r\n    '#01579b',\r\n    '#8e24aa',\r\n    '#90a4ae',\r\n    '#ff4081',\r\n    '#ff6e40',\r\n    '#aeea00',\r\n    '#304ffe',\r\n    '#7c4dff',\r\n    '#cfd8dc',\r\n    '#f8bbd0',\r\n    '#ffccbc',\r\n    '#f0f4c3',\r\n    '#9fa8da',\r\n    '#d1c4e9',\r\n  ],\r\n};\r\n\r\nexport const DEFAULT_KRITZEL_CONTROLS: KritzelToolbarControl[] = [\r\n  {\r\n    name: 'selection',\r\n    type: 'tool',\r\n    tool: KritzelSelectionTool,\r\n    icon: 'cursor',\r\n  },\r\n  {\r\n    name: 'brush',\r\n    type: 'tool',\r\n    tool: KritzelBrushTool,\r\n    isDefault: true,\r\n    icon: 'pen',\r\n    config: DEFAULT_BRUSH_CONFIG,\r\n  },\r\n  {\r\n    name: 'eraser',\r\n    type: 'tool',\r\n    tool: KritzelEraserTool,\r\n    icon: 'eraser',\r\n  },\r\n  {\r\n    name: 'text',\r\n    type: 'tool',\r\n    tool: KritzelTextTool,\r\n    icon: 'type',\r\n    config: DEFAULT_TEXT_CONFIG,\r\n  },\r\n  {\r\n    name: 'image',\r\n    type: 'tool',\r\n    tool: KritzelImageTool,\r\n    icon: 'image',\r\n  },\r\n  {\r\n    name: 'divider',\r\n    type: 'divider',\r\n  },\r\n  {\r\n    name: 'config',\r\n    type: 'config',\r\n  },\r\n];\r\n","kritzel-editor {\r\n  display: flex;\r\n  margin: 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  touch-action: manipulation;\r\n  user-select: none;\r\n\r\n\r\n  --kritzel-primary-color: blue;\r\n\r\n  --kritzel-selection-box-background-color: rgba(0, 0, 255, 0.2);\r\n  --kritzel-selection-box-border-color: rgba(0, 0, 255, 0.5);\r\n  --kritzel-selection-border-color: var(--kritzel-primary-color);\r\n  --kritzel-selection-border-width: 2px;\r\n  --kritzel-selection-border-style: solid;\r\n  --kritzel-selection-handle-size: 6px;\r\n  --kritzel-selection-handle-color: #000000;\r\n\r\n  --kritzel-context-menu-background-color: #ffffff;\r\n  --kritzel-context-menu-border-radius: 8px;\r\n  --kritzel-context-menu-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);\r\n  --kritzel-context-menu-border: 1px solid hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-context-menu-padding: 4px;\r\n  --kritzel-context-menu-item-gap: 8px;\r\n  --kritzel-context-menu-item-padding: 8px;\r\n  --kritzel-context-menu-item-border-radius: 8px;\r\n  --kritzel-context-menu-item-color: #333333;\r\n  --kritzel-context-menu-item-font-size: 14px;\r\n  --kritzel-context-menu-item-hover-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-context-menu-item-active-background-color: hsl(0, 0%, 0%, 8.6%);\r\n  --kritzel-context-menu-item-disabled-color: #aaaaaa;\r\n\r\n  --kritzel-controls-box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);\r\n  --kritzel-controls-border: 1px solid hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-border-radius: 8px;\r\n  --kritzel-controls-background-color: #ffffff;\r\n  --kritzel-controls-padding: 8px;\r\n  --kritzel-controls-gap: 8px;\r\n  --kritzel-controls-control-color: #000;\r\n  --kritzel-controls-control-border-radius: 8px;\r\n  --kritzel-controls-control-padding: 8px;\r\n  --kritzel-controls-control-hover-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-control-active-background-color: hsl(0, 0%, 0%, 8.6%);\r\n  --kritzel-controls-control-selected-background-color: var(--kritzel-primary-color);\r\n  --kritzel-controls-control-selected-color: #ffffff;\r\n  --kritzel-controls-divider-width: 1px;\r\n  --kritzel-controls-divider-height: 24px;\r\n  --kritzel-controls-divider-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-tooltip-background-color: #fff;\r\n  --kritzel-controls-tooltip-color: #000;\r\n  --kritzel-controls-tooltip-border-radius: 8px;\r\n  --kritzel-controls-tooltip-padding: 8px;\r\n  --kritzel-controls-tooltip-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);\r\n\r\n  --kritzel-color-palette-hover-background-color: #f0f0f0;\r\n  --kritzel-color-palette-circle-border-color: #dddcdc;\r\n  --kritzel-color-palette-selected-border-color: var(--kritzel-primary-color);\r\n  --kritzel-color-palette-selected-background-color: #f0f0f0;\r\n  --kritzel-color-palette-expand-toggle-color: #666;\r\n  --kritzel-color-palette-expand-toggle-hover-color: #333;\r\n\r\n  --kritzel-stroke-size-hover-background-color: #f0f0f0;\r\n  --kritzel-stroke-size-selected-border-color: var(--kritzel-primary-color);\r\n  --kritzel-stroke-size-selected-background-color: #f0f0f0;\r\n  --kritzel-stroke-size-circle-color: #000;\r\n\r\n  --kritzel-cursor-trail-color: rgb(228, 228, 228);\r\n  --kritzel-cursor-trail-opacity: 0.6;\r\n\r\n  --kritzel-engine-background-color: #ffffff;\r\n}\r\n\r\nkritzel-controls {\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  bottom: 16px;\r\n}","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { DEFAULT_KRITZEL_CONTROLS } from '../../../configs/default-toolbar-controls';\r\n\r\n@Component({\r\n  tag: 'kritzel-editor',\r\n  styleUrl: 'kritzel-editor.css',\r\n  shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = DEFAULT_KRITZEL_CONTROLS;\r\n\r\n  @Prop()\r\n  customSvgIcons: Record<string, string> = {};\r\n\r\n  @Prop()\r\n  hideControls: boolean = false;\r\n\r\n  @State()\r\n  forceUpdate: number = 0;\r\n\r\n  private engineReady: boolean = false;\r\n\r\n  private controlsReady: boolean = false;\r\n\r\n  @Listen('dblclick', { passive: false })\r\n  handleTouchStart(event: TouchEvent) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n      KritzelIconRegistry.register(name, svg);\r\n    }\r\n  }\r\n\r\n  handleEngineReady() {\r\n    this.engineReady = true;\r\n    this.checkReadiness();\r\n  }\r\n\r\n  handleControlsReady() {\r\n    this.controlsReady = true;\r\n    this.checkReadiness();\r\n  }\r\n\r\n  checkReadiness() {\r\n    if (this.engineReady && this.controlsReady) {\r\n      console.info('KritzelEditor is ready');\r\n      this.forceUpdate++;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <kritzel-engine onEngineReady={() => this.handleEngineReady()}></kritzel-engine>\r\n\r\n        <kritzel-controls\r\n          controls={this.controls}\r\n          onControlsReady={() => this.handleControlsReady()}\r\n          style={this.hideControls ? { display: 'none' } : {}}\r\n        ></kritzel-controls>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"kritzel-editor.js","mappings":"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","names":["KritzelEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/configs/default-toolbar-controls.ts","src/components/core/kritzel-editor/kritzel-editor.css?tag=kritzel-editor&encapsulation=shadow","src/components/core/kritzel-editor/kritzel-editor.tsx"],"sourcesContent":["import { KritzelBrushTool } from '../classes/tools/brush-tool.class';\r\nimport { KritzelEraserTool } from '../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../classes/tools/image-tool.class';\r\nimport { KritzelSelectionTool } from '../classes/tools/selection-tool.class';\r\nimport { KritzelTextTool } from '../classes/tools/text-tool.class';\r\nimport { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from '../interfaces/toolbar-control.interface';\r\n\r\nexport const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig = {\r\n  type: 'pen',\r\n  color: '#000000',\r\n  size: 16,\r\n  palettes: {\r\n    pen: [\r\n      '#000000',\r\n      '#ff5252',\r\n      '#ffbc00',\r\n      '#00c853',\r\n      '#0000FF',\r\n      '#d500f9',\r\n      '#fafafa',\r\n      '#a52714',\r\n      '#ee8100',\r\n      '#558b2f',\r\n      '#01579b',\r\n      '#8e24aa',\r\n      '#90a4ae',\r\n      '#ff4081',\r\n      '#ff6e40',\r\n      '#aeea00',\r\n      '#304ffe',\r\n      '#7c4dff',\r\n      '#cfd8dc',\r\n      '#f8bbd0',\r\n      '#ffccbc',\r\n      '#f0f4c3',\r\n      '#9fa8da',\r\n      '#d1c4e9',\r\n    ],\r\n    highlighter: [\r\n      '#0000006e',\r\n      '#ff52526e',\r\n      '#ffbb006e',\r\n      '#00c8536e',\r\n      '#0000FF6e',\r\n      '#d500f96e',\r\n      '#fafafa6e',\r\n      '#a527146e',\r\n      '#ee81006e',\r\n      '#558b2f6e',\r\n      '#01579b6e',\r\n      '#8e24aa6e',\r\n      '#90a4ae6e',\r\n      '#ff40816e',\r\n      '#ff6e406e',\r\n      '#aeea006e',\r\n      '#304ffe6e',\r\n      '#7c4dff6e',\r\n      '#cfd8dc6e',\r\n      '#f8bbd06e',\r\n      '#ffccbc6e',\r\n      '#f0f4c36e',\r\n      '#9fa8da6e',\r\n      '#d1c4e96e',\r\n    ],\r\n  },\r\n};\r\n\r\nexport const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig = {\r\n  color: '#000000',\r\n  size: 8,\r\n  fontFamily: 'Arial',\r\n  palette: [\r\n    '#000000',\r\n    '#ff5252',\r\n    '#ffbc00',\r\n    '#00c853',\r\n    '#0000FF',\r\n    '#d500f9',\r\n    '#fafafa',\r\n    '#a52714',\r\n    '#ee8100',\r\n    '#558b2f',\r\n    '#01579b',\r\n    '#8e24aa',\r\n    '#90a4ae',\r\n    '#ff4081',\r\n    '#ff6e40',\r\n    '#aeea00',\r\n    '#304ffe',\r\n    '#7c4dff',\r\n    '#cfd8dc',\r\n    '#f8bbd0',\r\n    '#ffccbc',\r\n    '#f0f4c3',\r\n    '#9fa8da',\r\n    '#d1c4e9',\r\n  ],\r\n};\r\n\r\nexport const DEFAULT_KRITZEL_CONTROLS: KritzelToolbarControl[] = [\r\n  {\r\n    name: 'selection',\r\n    type: 'tool',\r\n    tool: KritzelSelectionTool,\r\n    icon: 'cursor',\r\n  },\r\n  {\r\n    name: 'brush',\r\n    type: 'tool',\r\n    tool: KritzelBrushTool,\r\n    isDefault: true,\r\n    icon: 'pen',\r\n    config: DEFAULT_BRUSH_CONFIG,\r\n  },\r\n  {\r\n    name: 'eraser',\r\n    type: 'tool',\r\n    tool: KritzelEraserTool,\r\n    icon: 'eraser',\r\n  },\r\n  {\r\n    name: 'text',\r\n    type: 'tool',\r\n    tool: KritzelTextTool,\r\n    icon: 'type',\r\n    config: DEFAULT_TEXT_CONFIG,\r\n  },\r\n  {\r\n    name: 'image',\r\n    type: 'tool',\r\n    tool: KritzelImageTool,\r\n    icon: 'image',\r\n  },\r\n  {\r\n    name: 'divider',\r\n    type: 'divider',\r\n  },\r\n  {\r\n    name: 'config',\r\n    type: 'config',\r\n  },\r\n];\r\n",":host {\r\n  display: flex;\r\n  margin: 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  touch-action: manipulation;\r\n  user-select: none;\r\n\r\n\r\n  --kritzel-primary-color: blue;\r\n\r\n  --kritzel-selection-box-background-color: rgba(0, 0, 255, 0.2);\r\n  --kritzel-selection-box-border-color: rgba(0, 0, 255, 0.5);\r\n  --kritzel-selection-border-color: var(--kritzel-primary-color);\r\n  --kritzel-selection-border-width: 2px;\r\n  --kritzel-selection-border-style: solid;\r\n  --kritzel-selection-handle-size: 6px;\r\n  --kritzel-selection-handle-color: #000000;\r\n\r\n  --kritzel-context-menu-background-color: #ffffff;\r\n  --kritzel-context-menu-border-radius: 8px;\r\n  --kritzel-context-menu-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);\r\n  --kritzel-context-menu-border: 1px solid hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-context-menu-padding: 4px;\r\n  --kritzel-context-menu-item-gap: 8px;\r\n  --kritzel-context-menu-item-padding: 8px;\r\n  --kritzel-context-menu-item-border-radius: 8px;\r\n  --kritzel-context-menu-item-color: #333333;\r\n  --kritzel-context-menu-item-font-size: 14px;\r\n  --kritzel-context-menu-item-hover-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-context-menu-item-active-background-color: hsl(0, 0%, 0%, 8.6%);\r\n  --kritzel-context-menu-item-disabled-color: #aaaaaa;\r\n\r\n  --kritzel-controls-box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);\r\n  --kritzel-controls-border: 1px solid hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-border-radius: 8px;\r\n  --kritzel-controls-background-color: #ffffff;\r\n  --kritzel-controls-padding: 8px;\r\n  --kritzel-controls-gap: 8px;\r\n  --kritzel-controls-control-color: #000;\r\n  --kritzel-controls-control-border-radius: 8px;\r\n  --kritzel-controls-control-padding: 8px;\r\n  --kritzel-controls-control-hover-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-control-active-background-color: hsl(0, 0%, 0%, 8.6%);\r\n  --kritzel-controls-control-selected-background-color: var(--kritzel-primary-color);\r\n  --kritzel-controls-control-selected-color: #ffffff;\r\n  --kritzel-controls-divider-width: 1px;\r\n  --kritzel-controls-divider-height: 24px;\r\n  --kritzel-controls-divider-background-color: hsl(0, 0%, 0%, 4.3%);\r\n  --kritzel-controls-tooltip-background-color: #fff;\r\n  --kritzel-controls-tooltip-color: #000;\r\n  --kritzel-controls-tooltip-border-radius: 8px;\r\n  --kritzel-controls-tooltip-padding: 8px;\r\n  --kritzel-controls-tooltip-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);\r\n\r\n  --kritzel-color-palette-hover-background-color: #f0f0f0;\r\n  --kritzel-color-palette-circle-border-color: #dddcdc;\r\n  --kritzel-color-palette-selected-border-color: var(--kritzel-primary-color);\r\n  --kritzel-color-palette-selected-background-color: #f0f0f0;\r\n  --kritzel-color-palette-expand-toggle-color: #666;\r\n  --kritzel-color-palette-expand-toggle-hover-color: #333;\r\n\r\n  --kritzel-stroke-size-hover-background-color: #f0f0f0;\r\n  --kritzel-stroke-size-selected-border-color: var(--kritzel-primary-color);\r\n  --kritzel-stroke-size-selected-background-color: #f0f0f0;\r\n  --kritzel-stroke-size-circle-color: #000;\r\n\r\n  --kritzel-cursor-trail-color: rgb(228, 228, 228);\r\n  --kritzel-cursor-trail-opacity: 0.6;\r\n\r\n  --kritzel-engine-background-color: #ffffff;\r\n}\r\n\r\n.dummy-top {\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  top: 16px;\r\n  z-index: 1;\r\n}\r\n\r\n.dummy-bottom {\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  bottom: 16px;\r\n  z-index: 1;\r\n}\r\n\r\nkritzel-controls{\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  bottom: 16px;\r\n}","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { DEFAULT_KRITZEL_CONTROLS } from '../../../configs/default-toolbar-controls';\r\n\r\n@Component({\r\n  tag: 'kritzel-editor',\r\n  styleUrl: 'kritzel-editor.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelEditor {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = DEFAULT_KRITZEL_CONTROLS;\r\n\r\n  @Prop()\r\n  customSvgIcons: Record<string, string> = {};\r\n\r\n  @Prop()\r\n  hideControls: boolean = false;\r\n\r\n  @State()\r\n  forceUpdate: number = 0;\r\n\r\n  private engineReady: boolean = false;\r\n\r\n  private controlsReady: boolean = false;\r\n\r\n  @Listen('dblclick', { passive: false })\r\n  handleTouchStart(event: TouchEvent) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n      KritzelIconRegistry.register(name, svg);\r\n    }\r\n  }\r\n\r\n  handleEngineReady() {\r\n    this.engineReady = true;\r\n    this.checkReadiness();\r\n  }\r\n\r\n  handleControlsReady() {\r\n    this.controlsReady = true;\r\n    this.checkReadiness();\r\n  }\r\n\r\n  checkReadiness() {\r\n    if (this.engineReady && this.controlsReady) {\r\n      console.info('KritzelEditor is ready');\r\n      this.forceUpdate++;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n\r\n        <kritzel-dummy class=\"dummy-top\"></kritzel-dummy>\r\n\r\n        <kritzel-engine onEngineReady={() => this.handleEngineReady()}></kritzel-engine>\r\n\r\n        <kritzel-dummy class=\"dummy-bottom\"></kritzel-dummy>\r\n\r\n        <kritzel-controls\r\n          controls={this.controls}\r\n          onControlsReady={() => this.handleControlsReady()}\r\n          style={{\r\n            visibility: 'hidden'\r\n          }}\r\n        ></kritzel-controls>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/kritzel-font-size.js

@@ -1,4 +1,4 @@
-import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-D4WPb8MT.js';
+import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-Clp62syd.js';
 
 const KritzelFontSize = KritzelFontSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-font.js

@@ -1,4 +1,4 @@
-import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DkKI-ulw.js';
+import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DBL15JoO.js';
 
 const KritzelFont = KritzelFont$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-RyhiTey9.js';
+import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-C25_uk1W.js';
 
 const KritzelStrokeSize = KritzelStrokeSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tooltip.js

@@ -1,4 +1,4 @@
-import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-Vgp7wvdA.js';
+import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-rxaqUiJC.js';
 
 const KritzelTooltip = KritzelTooltip$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-ub68lkC1.js';
+import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-CCcFfkWG.js';
 
 const KritzelUtilityPanel = KritzelUtilityPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/p-9_JiL_wH.js

@@ -0,0 +1,33 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-nnmjP18w.js';
+
+const kritzelDummyCss = ":host{display:block}";
+
+const KritzelDummy = /*@__PURE__*/ proxyCustomElement(class KritzelDummy extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'aff3d5d844af503ead3cd02a1a62f26c885587ef' }, "Dummy Component Works!"));
+    }
+    static get style() { return kritzelDummyCss; }
+}, [1, "kritzel-dummy"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-dummy"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-dummy":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelDummy);
+            }
+            break;
+    } });
+}
+
+export { KritzelDummy as K, defineCustomElement as d };
+//# sourceMappingURL=p-9_JiL_wH.js.map
+
+//# sourceMappingURL=p-9_JiL_wH.js.map

package/dist/components/p-9_JiL_wH.js.map

@@ -0,0 +1 @@
+{"file":"p-9_JiL_wH.js","mappings":";;AAAA,MAAM,eAAe,GAAG,sBAAsB;;MCOjC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;IACvB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,wBAAA,CAEE;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-dummy/kritzel-dummy.css?tag=kritzel-dummy&encapsulation=shadow","src/components/ui/kritzel-dummy/kritzel-dummy.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'kritzel-dummy',\n  styleUrl: 'kritzel-dummy.css',\n  shadow: true,\n})\nexport class KritzelDummy {\n  render() {\n    return (\n      <Host>\n        Dummy Component Works!\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Dd-jVt1z.js → p-B17z0dHf.js}

@@ -35,13 +35,13 @@ const KritzelColor = /*@__PURE__*/ proxyCustomElement(class KritzelColor extends
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: 'e913815994a30d97f92781e742c4a13de19e59fe' }, h("div", { key: 'e0cc40b10dcb298f5b86be7d4283d6bffbd08c2c', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '6771c3aac90292a82070af08b995fdf297061bc1' }, h("div", { key: '4bb3e10fee1566db56f8a727dc858351e8a4184f', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '5e0a092a6d3463d852a1760d125fba04494e0d90', class: {
+            } }, h("div", { key: '290f49b17b686482057d3492752217e35af85d81', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -75,6 +75,6 @@ function defineCustomElement() {
 }
 
 export { KritzelColor as K, defineCustomElement as d };
-//# sourceMappingURL=p-Dd-jVt1z.js.map
+//# sourceMappingURL=p-B17z0dHf.js.map
 
-//# sourceMappingURL=p-Dd-jVt1z.js.map
+//# sourceMappingURL=p-B17z0dHf.js.map

package/dist/components/{p-Dd-jVt1z.js.map → p-B17z0dHf.js.map}

@@ -1 +1 @@
-{"file":"p-Dd-jVt1z.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color/kritzel-color.css?tag=kritzel-color&encapsulation=shadow","src/components/shared/kritzel-color/kritzel-color.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.checkerboard-bg {\n  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;\n  position: relative;\n  overflow: hidden;\n}\n\n.color-circle {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n}\n\n.color-circle.white {\n  border: 1px solid var(--kritzel-color-palette-circle-border-color);\n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'kritzel-color',\n  styleUrl: 'kritzel-color.css',\n  shadow: true,\n})\nexport class KritzelColor {\n  @Prop()\n  value: string;\n\n  @Prop()\n  size: number = 24;\n\n  private isLightColor(hexColor: string): boolean {\n    if (!hexColor) return false;\n\n    let r = 0,\n      g = 0,\n      b = 0;\n\n    let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;\n\n    if (sanitizedHex.length === 3) {\n      r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);\n      g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);\n      b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);\n    } else if (sanitizedHex.length === 6) {\n      r = parseInt(sanitizedHex.substring(0, 2), 16);\n      g = parseInt(sanitizedHex.substring(2, 4), 16);\n      b = parseInt(sanitizedHex.substring(4, 6), 16);\n    } else {\n      return false;\n    }\n\n    if (isNaN(r) || isNaN(g) || isNaN(b)) {\n      return false;\n    }\n\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n\n    return luminance > 220;\n  }\n\n  render() {\n    const isColorVeryLight = this.isLightColor(this.value);\n    return (\n      <Host>\n        <div\n          class=\"checkerboard-bg\"\n          style={{\n            width: `${this.size}px`,\n            height: `${this.size}px`,\n            borderRadius: '50%',\n            display: 'inline-block',\n            position: 'relative',\n          }}\n        >\n          <div\n            class={{\n              'color-circle': true,\n              'white': isColorVeryLight,\n            }}\n            style={{\n              backgroundColor: this.value,\n              width: `${this.size}px`,\n              height: `${this.size}px`,\n              borderRadius: '50%',\n              position: 'absolute',\n              top: '0',\n              left: '0',\n              display: 'inline-block',\n            }}\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B17z0dHf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color/kritzel-color.css?tag=kritzel-color&encapsulation=shadow","src/components/shared/kritzel-color/kritzel-color.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.checkerboard-bg {\n  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;\n  position: relative;\n  overflow: hidden;\n}\n\n.color-circle {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n}\n\n.color-circle.white {\n  border: 1px solid var(--kritzel-color-palette-circle-border-color);\n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'kritzel-color',\n  styleUrl: 'kritzel-color.css',\n  shadow: true,\n})\nexport class KritzelColor {\n  @Prop()\n  value: string;\n\n  @Prop()\n  size: number = 24;\n\n  private isLightColor(hexColor: string): boolean {\n    if (!hexColor) return false;\n\n    let r = 0,\n      g = 0,\n      b = 0;\n\n    let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;\n\n    if (sanitizedHex.length === 3) {\n      r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);\n      g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);\n      b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);\n    } else if (sanitizedHex.length === 6) {\n      r = parseInt(sanitizedHex.substring(0, 2), 16);\n      g = parseInt(sanitizedHex.substring(2, 4), 16);\n      b = parseInt(sanitizedHex.substring(4, 6), 16);\n    } else {\n      return false;\n    }\n\n    if (isNaN(r) || isNaN(g) || isNaN(b)) {\n      return false;\n    }\n\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n\n    return luminance > 220;\n  }\n\n  render() {\n    const isColorVeryLight = this.isLightColor(this.value);\n    return (\n      <Host>\n        <div\n          class=\"checkerboard-bg\"\n          style={{\n            width: `${this.size}px`,\n            height: `${this.size}px`,\n            borderRadius: '50%',\n            display: 'inline-block',\n            position: 'relative',\n          }}\n        >\n          <div\n            class={{\n              'color-circle': true,\n              'white': isColorVeryLight,\n            }}\n            style={{\n              backgroundColor: this.value,\n              width: `${this.size}px`,\n              height: `${this.size}px`,\n              borderRadius: '50%',\n              position: 'absolute',\n              top: '0',\n              left: '0',\n              display: 'inline-block',\n            }}\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CtzUAFH7.js → p-BfOHORuS.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
-import { d as defineCustomElement$7 } from './p-Dd-jVt1z.js';
-import { d as defineCustomElement$6 } from './p-CwiXaI-9.js';
+import { d as defineCustomElement$7 } from './p-B17z0dHf.js';
+import { d as defineCustomElement$6 } from './p-DqnnZDDT.js';
 import { d as defineCustomElement$5 } from './p-CFqbFD48.js';
-import { d as defineCustomElement$4 } from './p-DkKI-ulw.js';
+import { d as defineCustomElement$4 } from './p-DBL15JoO.js';
 import { d as defineCustomElement$3 } from './p-NAXC-PTl.js';
-import { d as defineCustomElement$2 } from './p-D4WPb8MT.js';
+import { d as defineCustomElement$2 } from './p-Clp62syd.js';
 import { d as defineCustomElement$1 } from './p-MPhvpAqa.js';
 
 const kritzelControlTextConfigCss = ":host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color)}";
@@ -33,14 +33,14 @@ const KritzelControlTextConfig = /*@__PURE__*/ proxyCustomElement(class KritzelC
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
+        return (h(Host, { key: 'dd94cc7171046d9683c5e320a2fef2c5598d6e2a' }, h("div", { key: 'c19e1cddc78ffa51e1117db01edc83e89db51158', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '17dc46439b2e578da30a04551dfa5a47e0fd6328', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '412b5b812c63d9c067ae43042a457185b8e6af48', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '6b9d098076145e4bb7b500f782baf9df713b666a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '6f58506e220ec54c1c934e38e65bc30d52bfb406', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2d595ab0d6abb342503ad00e439efa577e3f1f49', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get style() { return kritzelControlTextConfigCss; }
 }, [1, "kritzel-control-text-config", {
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlTextConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-CtzUAFH7.js.map
+//# sourceMappingURL=p-BfOHORuS.js.map
 
-//# sourceMappingURL=p-CtzUAFH7.js.map
+//# sourceMappingURL=p-BfOHORuS.js.map

package/dist/components/{p-CtzUAFH7.js.map → p-BfOHORuS.js.map}

@@ -1 +1 @@
-{"file":"p-CtzUAFH7.js","mappings":";;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,mSAAmS;;MCQ1T,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;;AAUE,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAuD5B;IAlDC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;AAGpC,IAAA,kBAAkB,CAAC,KAA0B,EAAA;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,KAA0B,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,gBAAgB,CAAC,KAA0B,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM;QACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,KAAK;AACX,aAAA,EAAA,EAED,CAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAwB,CAAA,EAElJ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ,EAAA,EACpH,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CAAiB,CAC7E,CACL,EAEN,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EACzB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAClC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAA,EAEzB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAsB,CAAA,CAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-text-config/kritzel-control-text-config.css?tag=kritzel-control-text-config&encapsulation=shadow","src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"sourcesContent":[":host {\r\n  display: block;\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);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color);\r\n}\r\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-text-config',\r\n  styleUrl: 'kritzel-control-text-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlTextConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelTextTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelTextTool>;\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleFamilyChange(event: CustomEvent<string>) {\r\n    this.tool.fontFamily = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.fontColor = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.fontSize = 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-font-family selectedFontFamily={this.tool.fontFamily} onFontFamilyChange={event => this.handleFamilyChange(event)}></kritzel-font-family>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'}>\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.tool.palette}\r\n          selectedColor={this.tool.fontColor}\r\n          isExpanded={this.isExpanded}\r\n          onColorChange={event => this.handleColorChange(event)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-font-size selectedSize={this.tool.fontSize} fontFamily={this.tool.fontFamily} onSizeChange={event => this.handleSizeChange(event)}></kritzel-font-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-BfOHORuS.js","mappings":";;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,mSAAmS;;MCQ1T,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;;AAUE,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAuD5B;IAlDC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;AAGpC,IAAA,kBAAkB,CAAC,KAA0B,EAAA;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,KAA0B,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,gBAAgB,CAAC,KAA0B,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM;QACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,KAAK;AACX,aAAA,EAAA,EAED,CAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAwB,CAAA,EAElJ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ,EAAA,EACpH,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CAAiB,CAC7E,CACL,EAEN,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EACzB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAClC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAA,EAEzB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAsB,CAAA,CAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-text-config/kritzel-control-text-config.css?tag=kritzel-control-text-config&encapsulation=shadow","src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"sourcesContent":[":host {\r\n  display: block;\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);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color);\r\n}\r\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-text-config',\r\n  styleUrl: 'kritzel-control-text-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlTextConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelTextTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelTextTool>;\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleFamilyChange(event: CustomEvent<string>) {\r\n    this.tool.fontFamily = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.fontColor = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.fontSize = 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-font-family selectedFontFamily={this.tool.fontFamily} onFontFamilyChange={event => this.handleFamilyChange(event)}></kritzel-font-family>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'}>\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.tool.palette}\r\n          selectedColor={this.tool.fontColor}\r\n          isExpanded={this.isExpanded}\r\n          onColorChange={event => this.handleColorChange(event)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-font-size selectedSize={this.tool.fontSize} fontFamily={this.tool.fontFamily} onSizeChange={event => this.handleSizeChange(event)}></kritzel-font-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CW800wxH.js → p-BzT7WSFX.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
 import { d as defineCustomElement$6 } from './p-EZVcj_Vk.js';
-import { d as defineCustomElement$5 } from './p-Dd-jVt1z.js';
-import { d as defineCustomElement$4 } from './p-CwiXaI-9.js';
+import { d as defineCustomElement$5 } from './p-B17z0dHf.js';
+import { d as defineCustomElement$4 } from './p-DqnnZDDT.js';
 import { d as defineCustomElement$3 } from './p-CFqbFD48.js';
 import { d as defineCustomElement$2 } from './p-MPhvpAqa.js';
-import { d as defineCustomElement$1 } from './p-RyhiTey9.js';
+import { d as defineCustomElement$1 } from './p-C25_uk1W.js';
 
 const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color)}";
 
@@ -41,14 +41,14 @@ const KritzelControlBrushConfig = /*@__PURE__*/ proxyCustomElement(class Kritzel
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (h(Host, { key: '57c18e06633951d2d82006d5b28cf863e9414bf4' }, h("div", { key: '6e4666f8efb3f1c9f1b1c8362119d2eababcc314', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'b52b7f8d0a64c0f973fbfbf35aad04c4b17b2b57', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'e74f649d44e94e45668aa335935e4c3e05888a85', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '457c7b47b45ac62e696e69459b9674d8679e6736', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '3914791059ff9215c082315a4c52170b88cb0908', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '51e8a2080cf27e08b060f099ed4696b352e3d10c', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlBrushConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-CW800wxH.js.map
+//# sourceMappingURL=p-BzT7WSFX.js.map
 
-//# sourceMappingURL=p-CW800wxH.js.map
+//# sourceMappingURL=p-BzT7WSFX.js.map

package/dist/components/{p-CW800wxH.js.map → p-BzT7WSFX.js.map}

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

package/dist/components/{p-RyhiTey9.js → p-C25_uk1W.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
-import { d as defineCustomElement$1 } from './p-Dd-jVt1z.js';
+import { d as defineCustomElement$1 } from './p-B17z0dHf.js';
 
 const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color)}.size-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-stroke-size-selected-background-color)}";
 
@@ -17,7 +17,7 @@ const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSi
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '9738591d397c522c72d9744bbb7e0ff7f6976175' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 
 export { KritzelStrokeSize as K, defineCustomElement as d };
-//# sourceMappingURL=p-RyhiTey9.js.map
+//# sourceMappingURL=p-C25_uk1W.js.map
 
-//# sourceMappingURL=p-RyhiTey9.js.map
+//# sourceMappingURL=p-C25_uk1W.js.map

package/dist/components/{p-RyhiTey9.js.map → p-C25_uk1W.js.map}

@@ -1 +1 @@
-{"file":"p-RyhiTey9.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,mfAAmf;;MCOngB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;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 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px;\n  box-sizing: border-box;\n}\n\n.size-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n}\n\n.size-container:hover {\n  background-color: var(--kritzel-stroke-size-hover-background-color);\n}\n\n.size-container.selected {\n  border-color: var(--kritzel-selection-border-color);\n  background-color: var(--kritzel-stroke-size-selected-background-color);\n}\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}
+{"file":"p-C25_uk1W.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,mfAAmf;;MCOngB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;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 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px;\n  box-sizing: border-box;\n}\n\n.size-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n}\n\n.size-container:hover {\n  background-color: var(--kritzel-stroke-size-hover-background-color);\n}\n\n.size-container.selected {\n  border-color: var(--kritzel-selection-border-color);\n  background-color: var(--kritzel-stroke-size-selected-background-color);\n}\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-ub68lkC1.js → p-CCcFfkWG.js}

@@ -25,7 +25,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '41a059b44da75d93169ad9c3ab9e7094a178ce6a' }, h("button", { key: 'cb6ce47be3b7b8efa863658b45339c084c006558', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '2cd0e214a354603a0b6d3c5a20414e5592b57c72', name: "undo" })), h("button", { key: '3a2c931d270d1173603722eb6f0be7450905225d', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '647ee8f80f8ee7991278ae09c824c2d41939b799', name: "redo" })), h("div", { key: 'cc8aab4de10a3c7997e8b65682fa5fed4a0e9ee7', class: "utility-separator" }), h("button", { key: '8e1f513af08407fafc4d2cfe48dc781120942ebd', class: "utility-button" }, h("kritzel-icon", { key: '4758c3bdcbb2a273424982ce4c1a05575199c130', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get style() { return kritzelUtilityPanelCss; }
 }, [1, "kritzel-utility-panel"]);
@@ -49,6 +49,6 @@ function defineCustomElement() {
 }
 
 export { KritzelUtilityPanel as K, defineCustomElement as d };
-//# sourceMappingURL=p-ub68lkC1.js.map
+//# sourceMappingURL=p-CCcFfkWG.js.map
 
-//# sourceMappingURL=p-ub68lkC1.js.map
+//# sourceMappingURL=p-CCcFfkWG.js.map

package/dist/components/{p-ub68lkC1.js.map → p-CCcFfkWG.js.map}

@@ -1 +1 @@
-{"file":"p-ub68lkC1.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,wfAAwf;;MCO1gB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAU9B,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 6px;\r\n  border-top-right-radius: 6px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event()\r\n  undo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  redo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-CCcFfkWG.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,wfAAwf;;MCO1gB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAU9B,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 6px;\r\n  border-top-right-radius: 6px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event()\r\n  undo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  redo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-D4WPb8MT.js → p-Clp62syd.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
-import { d as defineCustomElement$1 } from './p-DkKI-ulw.js';
+import { d as defineCustomElement$1 } from './p-DBL15JoO.js';
 
 const kritzelFontSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #f0f0f0)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007bff);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
 
@@ -18,7 +18,7 @@ const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize e
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '2cd69fb4d291f46121f2f05acd44153d4fe51801' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -49,6 +49,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFontSize as K, defineCustomElement as d };
-//# sourceMappingURL=p-D4WPb8MT.js.map
+//# sourceMappingURL=p-Clp62syd.js.map
 
-//# sourceMappingURL=p-D4WPb8MT.js.map
+//# sourceMappingURL=p-Clp62syd.js.map