kritzel-stencil 0.0.170 → 0.0.172

package/dist/components/kritzel-cursor-trail.js

@@ -1,4 +1,4 @@
-import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-B_3OZeom.js';
+import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-CAxHKvww.js';
 
 const KritzelCursorTrail = KritzelCursorTrail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-dropdown.js

@@ -1,4 +1,4 @@
-import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p-BdwB-S9G.js';
+import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p-Cdw55iW6.js';
 
 const KritzelDropdown = KritzelDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-editor.js

@@ -1,27 +1,27 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$a } from './p-CIts5Uma.js';
-import { S as ShapeType, R as ABSOLUTE_SCALE_MAX, T as ABSOLUTE_SCALE_MIN, M as KritzelSelectionTool, G as KritzelLineTool, I as KritzelEraserTool, U as KritzelShapeTool, J as KritzelImageTool, V as defineCustomElement$e } from './p-9Sbn9-7-.js';
+import { S as ShapeType, R as ABSOLUTE_SCALE_MAX, T as ABSOLUTE_SCALE_MIN, M as KritzelSelectionTool, G as KritzelLineTool, I as KritzelEraserTool, U as KritzelShapeTool, J as KritzelImageTool, V as defineCustomElement$e } from './p-fqLbEfE0.js';
 import { b as KritzelBrushTool, c as KritzelTextTool, d as KritzelKeyboardHelper } from './p-BUsg2vtg.js';
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$m } from './p-LAsVgL2e.js';
-import { d as defineCustomElement$l } from './p-Brd9SxWS.js';
-import { d as defineCustomElement$k } from './p-D_uh1RUI.js';
-import { d as defineCustomElement$j } from './p-Co5HWjr6.js';
-import { d as defineCustomElement$i } from './p-DG7VXGxX.js';
-import { d as defineCustomElement$h } from './p-cv2RCdI1.js';
-import { d as defineCustomElement$g } from './p-B_3OZeom.js';
-import { d as defineCustomElement$f } from './p-BdwB-S9G.js';
-import { d as defineCustomElement$d } from './p-Ck4lGnmt.js';
-import { d as defineCustomElement$c } from './p-CFH6XRL5.js';
-import { d as defineCustomElement$b } from './p-B6r22FSC.js';
-import { d as defineCustomElement$8, a as defineCustomElement$9 } from './p-C6-tSCMR.js';
-import { d as defineCustomElement$7 } from './p-aeYt0bPO.js';
-import { d as defineCustomElement$6 } from './p-nZdy-Ii5.js';
-import { d as defineCustomElement$5 } from './p-CRGwaUcp.js';
-import { d as defineCustomElement$4 } from './p-C1S1zPH-.js';
-import { d as defineCustomElement$3 } from './p-CQd5oYXp.js';
-import { d as defineCustomElement$2 } from './p-y25EBKEA.js';
+import { d as defineCustomElement$m } from './p-CIlIrPRp.js';
+import { d as defineCustomElement$l } from './p-c7AGmG3p.js';
+import { d as defineCustomElement$k } from './p-Bo-NQ68K.js';
+import { d as defineCustomElement$j } from './p-B80ry-r4.js';
+import { d as defineCustomElement$i } from './p-vLN8eXFe.js';
+import { d as defineCustomElement$h } from './p-C92UCXyc.js';
+import { d as defineCustomElement$g } from './p-CAxHKvww.js';
+import { d as defineCustomElement$f } from './p-Cdw55iW6.js';
+import { d as defineCustomElement$d } from './p-DI7JQMsC.js';
+import { d as defineCustomElement$c } from './p-BC5-_yPs.js';
+import { d as defineCustomElement$b } from './p-qWf2T62p.js';
+import { d as defineCustomElement$8, a as defineCustomElement$9 } from './p-CD9cCvhR.js';
+import { d as defineCustomElement$7 } from './p-fm-bG_zL.js';
+import { d as defineCustomElement$6 } from './p-DoD6F7Y4.js';
+import { d as defineCustomElement$5 } from './p-DyVWaSSc.js';
+import { d as defineCustomElement$4 } from './p-WLXyD_eY.js';
+import { d as defineCustomElement$3 } from './p-DmYjCy-z.js';
+import { d as defineCustomElement$2 } from './p-C720oASC.js';
 
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
@@ -433,7 +433,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         }
     }
     render() {
-        return (h(Host, { key: '497c7c69759c966dd2132007d80c5c772258a6c9' }, h("kritzel-workspace-manager", { key: '169e10c9b338283e1be32868aa0e354e7a149749', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'c8cf58aa8bfc9a5d4a2e4a4499c60938b0d55758', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '68f2bce210dab937080618a2a4f069bf8103449f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'dd67bea86f807f0ccd5905183e73713a015d6bee' }, h("kritzel-workspace-manager", { key: '557edc7e3a131d338be6df91698ba6923e7bc50e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '98969d0f2bb5a9a365885fb4765e0c04c1394caa', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '6092f393562af07643622c07d432f6100497aaf0', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { W as KritzelEngine$1, V as defineCustomElement$1 } from './p-9Sbn9-7-.js';
+import { W as KritzelEngine$1, V as defineCustomElement$1 } from './p-fqLbEfE0.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelFontFamily$1, d as defineCustomElement$1 } from './p-CFH6XRL5.js';
+import { K as KritzelFontFamily$1, d as defineCustomElement$1 } from './p-BC5-_yPs.js';
 
 const KritzelFontFamily = KritzelFontFamily$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-B6r22FSC.js';
+import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-qWf2T62p.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-Ck4lGnmt.js';
+import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DI7JQMsC.js';
 
 const KritzelFont = KritzelFont$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-C6-tSCMR.js';
+import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-CD9cCvhR.js';
 
 const KritzelMenuItem = KritzelMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-C6-tSCMR.js';
+import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-CD9cCvhR.js';
 
 const KritzelMenu = KritzelMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-portal.js

@@ -1,4 +1,4 @@
-import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-aeYt0bPO.js';
+import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-fm-bG_zL.js';
 
 const KritzelPortal = KritzelPortal$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-nZdy-Ii5.js';
+import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-DoD6F7Y4.js';
 
 const KritzelSplitButton = KritzelSplitButton$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-CRGwaUcp.js';
+import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-DyVWaSSc.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-C1S1zPH-.js';
+import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-WLXyD_eY.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-CQd5oYXp.js';
+import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-DmYjCy-z.js';
 
 const KritzelUtilityPanel = KritzelUtilityPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-workspace-manager.js

@@ -1,4 +1,4 @@
-import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-y25EBKEA.js';
+import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-C720oASC.js';
 
 const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-Co5HWjr6.js → p-B80ry-r4.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { d as defineCustomElement$4 } from './p-LAsVgL2e.js';
-import { d as defineCustomElement$3 } from './p-Brd9SxWS.js';
+import { d as defineCustomElement$4 } from './p-CIlIrPRp.js';
+import { d as defineCustomElement$3 } from './p-c7AGmG3p.js';
 import { d as defineCustomElement$2 } from './p-CIts5Uma.js';
-import { d as defineCustomElement$1 } from './p-CRGwaUcp.js';
+import { d as defineCustomElement$1 } from './p-DyVWaSSc.js';
 
 const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
 
@@ -43,14 +43,14 @@ const KritzelControlBrushConfig = /*@__PURE__*/ proxyCustomElement(class Kritzel
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '3111b2870e4a02da26bac5450424cadeef8c8d39' }, h("div", { key: '4bbf6bede0822c35e206566dd176e6b150b54098', style: {
+        return (h(Host, { key: 'ce2ac77db22f52239a45b62f690d54009f2c6954' }, h("div", { key: '5f6c50853e876c3612bb5c270bccc468c2c9a726', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'eb9c5690f823ca278d60629b9ac0595411771d05', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: 'd5b0d12188babdd26bbf97344cec60760b7c4f87', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'e1beea772a60dda335a56815fa39609c37849769', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '8b31bac4e67752f55d2c2281b37a38e6fd801a57', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'bfa24bb8683027c37f200ad65e4e6787d7224c56', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '8e2c55c6d16ca3911c5f068c354bdce5a4f7e844', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '33610ada109fe5d1d9cb2da4c70a60d672e3d6cb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -98,6 +98,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlBrushConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-Co5HWjr6.js.map
+//# sourceMappingURL=p-B80ry-r4.js.map
 
-//# sourceMappingURL=p-Co5HWjr6.js.map
+//# sourceMappingURL=p-B80ry-r4.js.map

package/dist/components/{p-Co5HWjr6.js.map → p-B80ry-r4.js.map}

@@ -1 +1 @@
-{"file":"p-Co5HWjr6.js","mappings":";;;;;;AAAA,MAAM,4BAA4B,GAAG,mVAAmV;;MCQ3W,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACX,IAAA,IAAI;AAE7B,IAAA,gBAAgB,CAAC,OAAyB,EAAA;QACxC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;;IAEtB,UAAU,GAAY,KAAK;AAE3C,IAAA,UAAU;IAEV,OAAO,GAAa,EAAE;IAE/B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGnD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;AAGpC,IAAA,gBAAgB,CAAC,KAAyC,EAAA;AACxD,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,KAA0B,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,gBAAgB,CAAC,KAA0B,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM;QAC7B,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;gBACpB,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,QAAQ;AACrD,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,KAAK;AACX,aAAA,EAAA,EAED,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAC9B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,EACd,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAA,EAEzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EACxC,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ,EAC9C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAEtF,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CAAiB,CAC7E,CACL,EAEN,CAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,CAAwB,CACzH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: var(--kritzel-pointer-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 }) tool: KritzelBrushTool;\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State() palette: string[] = [];\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: this.isExpanded ? 'flex-start' : 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\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          <button\r\n            class=\"expand-toggle\"\r\n            onClick={() => this.handleToggleExpand()}\r\n            title={this.isExpanded ? 'Collapse' : 'Expand'}\r\n            style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}\r\n          >\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-B80ry-r4.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: var(--kritzel-pointer-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 }) tool: KritzelBrushTool;\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State() palette: string[] = [];\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: this.isExpanded ? 'flex-start' : 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\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          <button\r\n            class=\"expand-toggle\"\r\n            onClick={() => this.handleToggleExpand()}\r\n            title={this.isExpanded ? 'Collapse' : 'Expand'}\r\n            style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}\r\n          >\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\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-CFH6XRL5.js → p-BC5-_yPs.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { d as defineCustomElement$1 } from './p-BdwB-S9G.js';
+import { d as defineCustomElement$1 } from './p-Cdw55iW6.js';
 
 const kritzelFontFamilyCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}";
 
@@ -43,7 +43,7 @@ const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFami
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '5c31315857fa29e0d7c3dac2b7911a244467a052' }, h("kritzel-dropdown", { key: '05abce1f973cd49ef8c7ddc198545ec63d6ac249', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'd5c99c0277eeb40f7a0ce29ffb013768125d7fd2', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: 'db9348b72cd65b047994dba6c898bf6517d0358b', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: '74f27d2d9f73ee8589448a24bed64e885ef6d2d8' }, h("kritzel-dropdown", { key: '58abc26a54b124f253841faaa4ca4227a23baac2', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
     }
     static get style() { return kritzelFontFamilyCss; }
 }, [769, "kritzel-font-family", {
@@ -70,6 +70,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFontFamily as K, defineCustomElement as d };
-//# sourceMappingURL=p-CFH6XRL5.js.map
+//# sourceMappingURL=p-BC5-_yPs.js.map
 
-//# sourceMappingURL=p-CFH6XRL5.js.map
+//# sourceMappingURL=p-BC5-_yPs.js.map

package/dist/components/p-BC5-_yPs.js.map

@@ -0,0 +1 @@
+{"file":"p-BC5-_yPs.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,uzBAAuzB;;MCYv0B,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,WAAW,GAAiB;AAClC,QAAA,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;AAC1C,QAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;AACpC,QAAA,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;AAChD,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;AACtD,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACxC,QAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;AAC9C,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;KACvD;AAEwB,IAAA,kBAAkB;AAElC,IAAA,gBAAgB;IAEzB,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;;;;AAKjD,IAAA,yBAAyB,GAAG,CAAC,KAA0B,KAAI;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC1C,KAAC;IAED,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;QAEH,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,CAEpC,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: var(--kritzel-pointer-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() 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 }) selectedFontFamily: string;\r\n\r\n  @Event() 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        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-D_uh1RUI.js → p-Bo-NQ68K.js}

@@ -3,6 +3,7 @@ import { d as defineCustomElement$1 } from './p-CIts5Uma.js';
 
 const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
 
+const VIEWPORT_PADDING = 8;
 const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContextMenu extends H {
     constructor(registerHost) {
         super();
@@ -31,6 +32,42 @@ const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContext
     componentWillLoad() {
         this.updateMenuItems();
     }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+    }
+    adjustPositionToViewport() {
+        const rect = this.host.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const currentLeft = parseFloat(this.host.style.left) || 0;
+        const currentTop = parseFloat(this.host.style.top) || 0;
+        let newLeft = currentLeft;
+        let newTop = currentTop;
+        // Check if menu extends beyond right edge
+        if (rect.right > viewportWidth - VIEWPORT_PADDING) {
+            newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;
+        }
+        // Check if menu extends beyond bottom edge
+        if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {
+            newTop = viewportHeight - rect.height - VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond left edge
+        if (newLeft < VIEWPORT_PADDING) {
+            newLeft = VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond top edge
+        if (newTop < VIEWPORT_PADDING) {
+            newTop = VIEWPORT_PADDING;
+        }
+        // Only update if position changed to avoid infinite loops
+        if (newLeft !== currentLeft || newTop !== currentTop) {
+            this.host.style.left = `${newLeft}px`;
+            this.host.style.top = `${newTop}px`;
+        }
+    }
     handleItemClick(item, isDisabled) {
         if (!isDisabled) {
             this.actionSelected.emit(item);
@@ -57,7 +94,7 @@ const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContext
         return defaultValue;
     }
     render() {
-        return (h(Host, { key: '102f1fd72d991e6d5c0fa6025ed75d860e8e9852' }, h("div", { key: '510ea27fdcddc78a51220f68a8d8ba82fd2bd108', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: 'f57688eb3c0921c0a2d85cab7bbe9273ecf4fdab' }, h("div", { key: '8082568dd09f4ad5ef07885308d752e8c924f02e', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     static get watchers() { return {
         "items": ["onItemsChanged"]
@@ -90,6 +127,6 @@ function defineCustomElement() {
 }
 
 export { KritzelContextMenu as K, defineCustomElement as d };
-//# sourceMappingURL=p-D_uh1RUI.js.map
+//# sourceMappingURL=p-Bo-NQ68K.js.map
 
-//# sourceMappingURL=p-D_uh1RUI.js.map
+//# sourceMappingURL=p-Bo-NQ68K.js.map

package/dist/components/p-Bo-NQ68K.js.map

@@ -0,0 +1 @@
+{"file":"p-Bo-NQ68K.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-context-menu/kritzel-context-menu.css?tag=kritzel-context-menu&encapsulation=shadow","src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"sourcesContent":[":host {\r\n  display: block; \r\n}\r\n\r\n.menu-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--kritzel-context-menu-background-color, #ffffff);\r\n  border-radius: var(--kritzel-context-menu-border-radius, 12px);\r\n  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);\r\n  padding: var(--kritzel-context-menu-padding,4px);\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--kritzel-context-menu-item-gap, 8px);\r\n  background: none;\r\n  border: none;\r\n  text-align: left;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  white-space: nowrap;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.menu-item:not(.disabled):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.label {\r\n  flex-grow: 1;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, State, Watch, Listen, Element } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\r\n\r\nconst VIEWPORT_PADDING = 8;\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: ContextMenuItem[];\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Prop() objects: KritzelBaseObject[];\r\n\r\n  @Event() actionSelected: EventEmitter<ContextMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.adjustPositionToViewport();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.adjustPositionToViewport();\r\n  }\r\n\r\n  private adjustPositionToViewport() {\r\n    const rect = this.host.getBoundingClientRect();\r\n    const viewportWidth = window.innerWidth;\r\n    const viewportHeight = window.innerHeight;\r\n\r\n    const currentLeft = parseFloat(this.host.style.left) || 0;\r\n    const currentTop = parseFloat(this.host.style.top) || 0;\r\n\r\n    let newLeft = currentLeft;\r\n    let newTop = currentTop;\r\n\r\n    // Check if menu extends beyond right edge\r\n    if (rect.right > viewportWidth - VIEWPORT_PADDING) {\r\n      newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Check if menu extends beyond bottom edge\r\n    if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {\r\n      newTop = viewportHeight - rect.height - VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Ensure menu doesn't go beyond left edge\r\n    if (newLeft < VIEWPORT_PADDING) {\r\n      newLeft = VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Ensure menu doesn't go beyond top edge\r\n    if (newTop < VIEWPORT_PADDING) {\r\n      newTop = VIEWPORT_PADDING;\r\n    }\r\n\r\n    // Only update if position changed to avoid infinite loops\r\n    if (newLeft !== currentLeft || newTop !== currentTop) {\r\n      this.host.style.left = `${newLeft}px`;\r\n      this.host.style.top = `${newTop}px`;\r\n    }\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  private async evaluateProperty(value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>), defaultValue: boolean): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`}\r\n              class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\r\n              disabled={isDisabled}\r\n            >\r\n              {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n              <span class=\"label\">{item.label}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-y25EBKEA.js → p-C720oASC.js}

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { d as defineCustomElement$5 } from './p-CIts5Uma.js';
-import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-C6-tSCMR.js';
-import { d as defineCustomElement$2 } from './p-aeYt0bPO.js';
-import { d as defineCustomElement$1 } from './p-nZdy-Ii5.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-CD9cCvhR.js';
+import { d as defineCustomElement$2 } from './p-fm-bG_zL.js';
+import { d as defineCustomElement$1 } from './p-DoD6F7Y4.js';
 
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
 
@@ -196,6 +196,6 @@ function defineCustomElement() {
 }
 
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-y25EBKEA.js.map
+//# sourceMappingURL=p-C720oASC.js.map
 
-//# sourceMappingURL=p-y25EBKEA.js.map
+//# sourceMappingURL=p-C720oASC.js.map

package/dist/components/{p-y25EBKEA.js.map → p-C720oASC.js.map}

@@ -1 +1 @@
-{"file":"p-y25EBKEA.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 { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\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  @Element() host!: HTMLElement;\r\n\r\n  @Prop({ mutable: true }) activeWorkspace: KritzelWorkspace;\r\n  @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n  @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @State() childMenuAnchor: HTMLElement = null;\r\n  @State() openChildMenuItem: IKritzelMenuItem = null;\r\n  @State() newWorkspace: KritzelWorkspace | null = null;\r\n  @State() editingItemId: string | null = null;\r\n\r\n  @Listen('wheel', { target: 'window', passive: false })\r\n  handleWheel(event: WheelEvent) {\r\n    if(event.ctrlKey){\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\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.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngineRef) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n    if (this.editingItemId) {\r\n      return;\r\n    }\r\n\r\n    if (item.action) {\r\n      item.action(item, parent);\r\n      return;\r\n    }\r\n\r\n    this.workspaceChange.emit(item.value);\r\n  }\r\n\r\n  private async add() {\r\n    await this.splitButtonRef.open();\r\n    this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n    this.editingItemId = this.newWorkspace.id;\r\n  }\r\n\r\n  private edit(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    requestAnimationFrame(() => {\r\n      this.editingItemId = item.id;\r\n    });\r\n  }\r\n\r\n  private async save(item: IKritzelMenuItem) {\r\n    if (this.newWorkspace) {\r\n      this.newWorkspace.name = item.label;\r\n      await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n      this.workspaceChange.emit(this.newWorkspace);\r\n    } else {\r\n      const workspace = item.value;\r\n      workspace.name = item.label;\r\n      await this.kritzelEngineRef.updateWorkspace(workspace);\r\n    }\r\n\r\n    this.editingItemId = null;\r\n    this.newWorkspace = null;\r\n  }\r\n\r\n  private cancel() {\r\n    this.newWorkspace = null;\r\n    this.editingItemId = null;\r\n  }\r\n\r\n  private async delete(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n\r\n    await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n    if (item.value.id === this.activeWorkspace?.id) {\r\n      this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;\r\n      this.workspaceChange.emit(this.activeWorkspace);\r\n    }\r\n\r\n    await this.splitButtonRef.focusMenu();\r\n  }\r\n\r\n  private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n    this.openChildMenuItem = item;\r\n    this.childMenuAnchor = anchor;\r\n  }\r\n\r\n  private closeChildMenu() {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n  }\r\n\r\n  private handleMenuOpen() {\r\n    this.kritzelEngineRef.disable();\r\n  }\r\n\r\n  private handleMenuClose() {\r\n    this.cancel();\r\n    this.closeChildMenu();\r\n    this.kritzelEngineRef.enable();\r\n  }\r\n\r\n  render() {\r\n    const menuItems = this.sortedWorkspaces\r\n      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n      .filter(ws => ws !== null)\r\n      .map(ws => {\r\n        return {\r\n          id: ws.id,\r\n          label: ws.name,\r\n          value: ws,\r\n          isEditing: this.editingItemId === ws.id,\r\n          isSelected: this.activeWorkspace?.id === ws.id,\r\n          isNewItem: this.newWorkspace?.id === ws.id,\r\n          isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n          childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n          children: [\r\n            {\r\n              id: `${ws.id}-rename`,\r\n              label: 'Rename',\r\n              value: 'rename',\r\n              action: (_item, parent) => this.edit(parent),\r\n            },\r\n            {\r\n              id: `${ws.id}-delete`,\r\n              label: 'Delete',\r\n              value: 'delete',\r\n              isDisabled: this.sortedWorkspaces.length <= 1,\r\n              action: (_item, parent) => this.delete(parent),\r\n            },\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          items={menuItems}\r\n          mainButtonDisabled={this.editingItemId != null}\r\n          onMainButtonClick={() => this.add()}\r\n          onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n          onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n          onItemSave={event => this.save(event.detail)}\r\n          onItemCancel={() => this.cancel()}\r\n          onItemCloseChildMenu={() => this.closeChildMenu()}\r\n          onMenuOpen={() => this.handleMenuOpen()}\r\n          onMenuClose={() => this.handleMenuClose()}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-C720oASC.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 { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\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  @Element() host!: HTMLElement;\r\n\r\n  @Prop({ mutable: true }) activeWorkspace: KritzelWorkspace;\r\n  @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n  @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @State() childMenuAnchor: HTMLElement = null;\r\n  @State() openChildMenuItem: IKritzelMenuItem = null;\r\n  @State() newWorkspace: KritzelWorkspace | null = null;\r\n  @State() editingItemId: string | null = null;\r\n\r\n  @Listen('wheel', { target: 'window', passive: false })\r\n  handleWheel(event: WheelEvent) {\r\n    if(event.ctrlKey){\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\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.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngineRef) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n    if (this.editingItemId) {\r\n      return;\r\n    }\r\n\r\n    if (item.action) {\r\n      item.action(item, parent);\r\n      return;\r\n    }\r\n\r\n    this.workspaceChange.emit(item.value);\r\n  }\r\n\r\n  private async add() {\r\n    await this.splitButtonRef.open();\r\n    this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n    this.editingItemId = this.newWorkspace.id;\r\n  }\r\n\r\n  private edit(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    requestAnimationFrame(() => {\r\n      this.editingItemId = item.id;\r\n    });\r\n  }\r\n\r\n  private async save(item: IKritzelMenuItem) {\r\n    if (this.newWorkspace) {\r\n      this.newWorkspace.name = item.label;\r\n      await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n      this.workspaceChange.emit(this.newWorkspace);\r\n    } else {\r\n      const workspace = item.value;\r\n      workspace.name = item.label;\r\n      await this.kritzelEngineRef.updateWorkspace(workspace);\r\n    }\r\n\r\n    this.editingItemId = null;\r\n    this.newWorkspace = null;\r\n  }\r\n\r\n  private cancel() {\r\n    this.newWorkspace = null;\r\n    this.editingItemId = null;\r\n  }\r\n\r\n  private async delete(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n\r\n    await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n    if (item.value.id === this.activeWorkspace?.id) {\r\n      this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;\r\n      this.workspaceChange.emit(this.activeWorkspace);\r\n    }\r\n\r\n    await this.splitButtonRef.focusMenu();\r\n  }\r\n\r\n  private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n    this.openChildMenuItem = item;\r\n    this.childMenuAnchor = anchor;\r\n  }\r\n\r\n  private closeChildMenu() {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n  }\r\n\r\n  private handleMenuOpen() {\r\n    this.kritzelEngineRef.disable();\r\n  }\r\n\r\n  private handleMenuClose() {\r\n    this.cancel();\r\n    this.closeChildMenu();\r\n    this.kritzelEngineRef.enable();\r\n  }\r\n\r\n  render() {\r\n    const menuItems = this.sortedWorkspaces\r\n      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n      .filter(ws => ws !== null)\r\n      .map(ws => {\r\n        return {\r\n          id: ws.id,\r\n          label: ws.name,\r\n          value: ws,\r\n          isEditing: this.editingItemId === ws.id,\r\n          isSelected: this.activeWorkspace?.id === ws.id,\r\n          isNewItem: this.newWorkspace?.id === ws.id,\r\n          isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n          childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n          children: [\r\n            {\r\n              id: `${ws.id}-rename`,\r\n              label: 'Rename',\r\n              value: 'rename',\r\n              action: (_item, parent) => this.edit(parent),\r\n            },\r\n            {\r\n              id: `${ws.id}-delete`,\r\n              label: 'Delete',\r\n              value: 'delete',\r\n              isDisabled: this.sortedWorkspaces.length <= 1,\r\n              action: (_item, parent) => this.delete(parent),\r\n            },\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          items={menuItems}\r\n          mainButtonDisabled={this.editingItemId != null}\r\n          onMainButtonClick={() => this.add()}\r\n          onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n          onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n          onItemSave={event => this.save(event.detail)}\r\n          onItemCancel={() => this.cancel()}\r\n          onItemCloseChildMenu={() => this.closeChildMenu()}\r\n          onMenuOpen={() => this.handleMenuOpen()}\r\n          onMenuClose={() => this.handleMenuClose()}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-cv2RCdI1.js → p-C92UCXyc.js}

@@ -1,20 +1,20 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { b as KritzelBrushTool, c as KritzelTextTool } from './p-BUsg2vtg.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$c } from './p-LAsVgL2e.js';
-import { d as defineCustomElement$b } from './p-Brd9SxWS.js';
-import { d as defineCustomElement$a } from './p-Co5HWjr6.js';
-import { d as defineCustomElement$9 } from './p-DG7VXGxX.js';
-import { d as defineCustomElement$8 } from './p-BdwB-S9G.js';
-import { d as defineCustomElement$7 } from './p-Ck4lGnmt.js';
-import { d as defineCustomElement$6 } from './p-CFH6XRL5.js';
-import { d as defineCustomElement$5 } from './p-B6r22FSC.js';
+import { d as defineCustomElement$c } from './p-CIlIrPRp.js';
+import { d as defineCustomElement$b } from './p-c7AGmG3p.js';
+import { d as defineCustomElement$a } from './p-B80ry-r4.js';
+import { d as defineCustomElement$9 } from './p-vLN8eXFe.js';
+import { d as defineCustomElement$8 } from './p-Cdw55iW6.js';
+import { d as defineCustomElement$7 } from './p-DI7JQMsC.js';
+import { d as defineCustomElement$6 } from './p-BC5-_yPs.js';
+import { d as defineCustomElement$5 } from './p-qWf2T62p.js';
 import { d as defineCustomElement$4 } from './p-CIts5Uma.js';
-import { d as defineCustomElement$3 } from './p-CRGwaUcp.js';
-import { d as defineCustomElement$2 } from './p-C1S1zPH-.js';
-import { d as defineCustomElement$1 } from './p-CQd5oYXp.js';
+import { d as defineCustomElement$3 } from './p-DyVWaSSc.js';
+import { d as defineCustomElement$2 } from './p-WLXyD_eY.js';
+import { d as defineCustomElement$1 } from './p-DmYjCy-z.js';
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}";
 
 const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls extends H {
     constructor(registerHost) {
@@ -164,13 +164,13 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
             this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: '542415492107a5aa516602f53cbb830ee58ae320', class: {
+        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '38ea0136db9c81b38753a88915b98433f75dc9d4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '30843843f99eeb50cdbe2dd22472c112bfe952f4', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -186,7 +186,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
                         } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
                             'kritzel-control-dropdown': true,
                             'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, showArrow: false, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                             'kritzel-submenu-item': true,
                             'active': option.id === selectedSubOption?.id,
                         }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
@@ -303,6 +303,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-cv2RCdI1.js.map
+//# sourceMappingURL=p-C92UCXyc.js.map
 
-//# sourceMappingURL=p-cv2RCdI1.js.map
+//# sourceMappingURL=p-C92UCXyc.js.map