kritzel-stencil 0.0.136 → 0.0.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/cjs/{index-CVu--fM6.js → index-CYkadfjX.js} +9 -10
  2. package/dist/cjs/index-CYkadfjX.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/kritzel-color_22.cjs.entry.js +2 -1
  5. package/dist/collection/classes/core/core.class.js +1 -0
  6. package/dist/collection/classes/core/core.class.js.map +1 -1
  7. package/dist/collection/classes/handlers/move.handler.js +1 -1
  8. package/dist/collection/classes/handlers/move.handler.js.map +1 -1
  9. package/dist/collection/classes/handlers/rotation.handler.js +1 -0
  10. package/dist/collection/classes/handlers/rotation.handler.js.map +1 -1
  11. package/dist/collection/classes/handlers/selection.handler.js +4 -5
  12. package/dist/collection/classes/handlers/selection.handler.js.map +1 -1
  13. package/dist/collection/classes/objects/text.class.js +1 -2
  14. package/dist/collection/classes/objects/text.class.js.map +1 -1
  15. package/dist/components/index.js +2 -2
  16. package/dist/components/kritzel-controls.js +1 -1
  17. package/dist/components/kritzel-editor.js +3 -3
  18. package/dist/components/kritzel-engine.js +1 -1
  19. package/dist/components/{p-BdSbO-K6.js → p-D554MPA9.js} +10 -9
  20. package/dist/components/p-D554MPA9.js.map +1 -0
  21. package/dist/components/{p-obTL5Wl7.js → p-Di5CEwzQ.js} +3 -4
  22. package/dist/components/p-Di5CEwzQ.js.map +1 -0
  23. package/dist/components/{p-RKMcsakE.js → p-PvCKCYuw.js} +3 -3
  24. package/dist/components/{p-RKMcsakE.js.map → p-PvCKCYuw.js.map} +1 -1
  25. package/dist/esm/{index-445xFXAf.js → index-IhpPa9g4.js} +9 -10
  26. package/dist/esm/index-IhpPa9g4.js.map +1 -0
  27. package/dist/esm/index.js +1 -1
  28. package/dist/esm/kritzel-color_22.entry.js +2 -1
  29. package/dist/stencil/index.esm.js +1 -1
  30. package/dist/stencil/{p-7e666d4b.entry.js → p-32ac435d.entry.js} +2 -2
  31. package/dist/stencil/{p-7e666d4b.entry.js.map → p-32ac435d.entry.js.map} +1 -1
  32. package/dist/stencil/p-IhpPa9g4.js +2 -0
  33. package/dist/stencil/p-IhpPa9g4.js.map +1 -0
  34. package/dist/stencil/stencil.esm.js +1 -1
  35. package/package.json +1 -1
  36. package/dist/cjs/index-CVu--fM6.js.map +0 -1
  37. package/dist/components/p-BdSbO-K6.js.map +0 -1
  38. package/dist/components/p-obTL5Wl7.js.map +0 -1
  39. package/dist/esm/index-445xFXAf.js.map +0 -1
  40. package/dist/stencil/p-445xFXAf.js +0 -2
  41. package/dist/stencil/p-445xFXAf.js.map +0 -1
@@ -1,2 +1,2 @@
1
- import{r as t,h as e,H as i,c as s,g as o}from"./p-oCOlsFCN.js";import{K as n,a as r,b as a,c as l,D as c,d as h,e as d,f as u,g as f,h as p,i as b,j as g,k,l as y,B as v,R as w,A as x,m,n as z,O as C,o as I,p as M,q as S,U as j,r as D}from"./p-445xFXAf.js";const B=":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";const E=class{constructor(e){t(this,e)}value;size=24;isLightColor(t){if(!t)return false;let e=0,i=0,s=0;let o=t.startsWith("#")?t.slice(1):t;if(o.length===3){e=parseInt(o[0]+o[0],16);i=parseInt(o[1]+o[1],16);s=parseInt(o[2]+o[2],16)}else if(o.length===6){e=parseInt(o.substring(0,2),16);i=parseInt(o.substring(2,4),16);s=parseInt(o.substring(4,6),16)}else{return false}if(isNaN(e)||isNaN(i)||isNaN(s)){return false}const n=.299*e+.587*i+.114*s;return n>220}render(){const t=this.isLightColor(this.value);return e(i,{key:"198dba41e1600d76faace18de78191d2b7a551ec"},e("div",{key:"ee690cffb7925e09cb2c51022eec607247a4849f",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},e("div",{key:"66cc8df8fabd008db8c00942994875e3e8d722ce",class:{"color-circle":true,white:t},style:{backgroundColor:this.value,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}};E.style=B;const T=":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-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}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";const O=class{constructor(e){t(this,e);this.colorChange=s(this,"colorChange")}colors=[];selectedColor=null;isExpanded=false;isOpaque=false;colorChange;handleColorClick(t){this.selectedColor=t;this.colorChange.emit(t)}calculateHeight(){const t=6;const e=32;const i=8;const s=Math.ceil(this.colors.length/t);return`${s*e+(s-1)*i}px`}render(){const t=this.isExpanded?this.colors:this.colors.slice(0,6);const s=this.isExpanded?this.calculateHeight():"32px";return e(i,{key:"2ead7cd530ce181856e5f582f086a22a1fe69390"},e("div",{key:"fcc75b267f36e271d50615bfde42a29c28aa2536",class:{"color-grid":true,expanded:this.isExpanded},style:{height:s}},t.map((t=>e("div",{tabIndex:0,class:{"color-container":true,selected:this.selectedColor===t},onClick:()=>this.handleColorClick(t)},e("kritzel-color",{value:t}))))))}};O.style=T;const A=":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: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);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";const W=class{constructor(e){t(this,e);this.actionSelected=s(this,"actionSelected");this.close=s(this,"close")}get host(){return o(this)}items;onItemsChanged(){this.updateMenuItems()}objects;actionSelected;close;processedItems=[];handleOutsideClick(t){const e=t.composedPath();if(!e.includes(this.host)){this.close.emit()}}componentWillLoad(){this.updateMenuItems()}handleItemClick(t,e){if(!e){this.actionSelected.emit(t)}}async updateMenuItems(){const t=[];for(const e of this.items){const i=await this.evaluateProperty(e.visible,true);if(i){const i=await this.evaluateProperty(e.disabled,false);t.push({item:e,isDisabled:i})}}this.processedItems=t}async evaluateProperty(t,e){if(typeof t==="boolean"){return t}if(typeof t==="function"){return await Promise.resolve(t(null,this.objects))}return e}render(){return e(i,{key:"908711e45cb4ea41f25c4f66a9d3b03c847f886e"},e("div",{key:"7dcb6e5654ecafebc1fc1a2efb9fa1b8678236c4",class:"menu-container"},this.processedItems.map((({item:t,isDisabled:i},s)=>e("button",{key:`${t.label}-${s}`,class:{"menu-item":true,disabled:i},onClick:()=>this.handleItemClick(t,i),disabled:i},t.icon&&e("kritzel-icon",{name:t.icon,size:16}),e("span",{class:"label"},t.label))))))}static get watchers(){return{items:["onItemsChanged"]}}};W.style=A;const $=":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";const R=class{constructor(e){t(this,e);this.toolChange=s(this,"toolChange")}tool;handleToolChange(t){this.palette=t.palettes[t.type]}isExpanded=false;toolChange;palette=[];componentWillLoad(){this.palette=this.tool.palettes[this.tool.type]}handleToggleExpand(){this.isExpanded=!this.isExpanded}handleTypeChange(t){this.palette=this.tool.palettes[t.detail];this.tool.type=t.detail;this.tool.color=this.palette[0];this.toolChange.emit(this.tool)}handleColorChange(t){this.tool.color=t.detail;this.toolChange.emit(this.tool)}handleSizeChange(t){this.tool.size=t.detail;this.toolChange.emit(this.tool)}render(){return e(i,{key:"8fe8c0564f491121c0c44c6ff4083034f92dbb67"},e("div",{key:"3e8a69b827785976768bfc1e809126bee7c48c62",style:{display:"flex",flexDirection:"row",alignItems:this.isExpanded?"flex-start":"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},e("kritzel-color-palette",{key:"c9056f81cf47d81fef0a0f5743000dcd6633258a",colors:this.palette,selectedColor:this.tool.color,isExpanded:this.isExpanded,isOpaque:true,onColorChange:t=>this.handleColorChange(t)}),e("button",{key:"2f307264b80a732d976edeb025d509bc1164606b",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand",style:this.palette.length>6?{visibillity:"visible"}:{visibility:"hidden"}},e("kritzel-icon",{key:"08133ba0a23353b2bb3f87c685a7a0798b8dd16c",name:this.isExpanded?"chevron-up":"chevron-down"}))),e("kritzel-stroke-size",{key:"3de25cc80029ffdfdc173c4c79e937a7dc329743",selectedSize:this.tool.size,onSizeChange:t=>this.handleSizeChange(t)}))}static get watchers(){return{tool:["handleToolChange"]}}};R.style=$;const F=":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, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";const P=class{constructor(e){t(this,e);this.toolChange=s(this,"toolChange")}tool;isExpanded=false;toolChange;handleToggleExpand(){this.isExpanded=!this.isExpanded}handleFamilyChange(t){this.tool.fontFamily=t.detail;this.toolChange.emit(this.tool)}handleColorChange(t){this.tool.fontColor=t.detail;this.toolChange.emit(this.tool)}handleSizeChange(t){this.tool.fontSize=t.detail;this.toolChange.emit(this.tool)}render(){return e(i,{key:"3695b187943af25566885d63257ae3de9f405ea5"},e("div",{key:"7bb146ae3c188478ba17f18f70fd170ce3536308",style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},e("kritzel-font-family",{key:"87f4c5ac2e2a4cfea216b1b828faad231438b9ec",selectedFontFamily:this.tool.fontFamily,onFontFamilyChange:t=>this.handleFamilyChange(t)}),e("button",{key:"2e73aaf7da659b9e069c247cc762f68394212293",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand"},e("kritzel-icon",{key:"785b664697ba266432c535ea26e0665f8d8d657f",name:this.isExpanded?"chevron-up":"chevron-down"}))),e("kritzel-color-palette",{key:"ed2517a39d254b77f45154914b3ce6a934f66c33",colors:this.tool.palette,selectedColor:this.tool.fontColor,isExpanded:this.isExpanded,onColorChange:t=>this.handleColorChange(t)}),e("kritzel-font-size",{key:"9b25c9607fa69c991e769852e3e3e378e48387bd",selectedSize:this.tool.fontSize,fontFamily:this.tool.fontFamily,onSizeChange:t=>this.handleSizeChange(t)}))}};P.style=F;class V{static isTouchDevice(){return window.matchMedia("(any-pointer: coarse)").matches}static isAndroid(){return/android/i.test(navigator.userAgent)}static isIOS(){return/iPad|iPhone|iPod/.test(navigator.userAgent)}static detectOS(){if(this.isIOS()){return"iOS"}else if(this.isAndroid()){return"Android"}else{return"Other"}}static isFirefox(){return/firefox/i.test(navigator.userAgent)}}const _=":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;outline:none;background:none;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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.color-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;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: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{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";const Y=class{constructor(e){t(this,e);this.isControlsReady=s(this,"isControlsReady")}get host(){return o(this)}controls=[];activeControl=null;isUtilityPanelVisible=true;isControlsReady;firstConfig=null;isTooltipVisible=false;isTouchDevice=V.isTouchDevice();handleDocumentClick(t){const e=t.target;if(!this.kritzelEngine||e.closest(".kritzel-tooltip")){return}this.isTooltipVisible=false}handleKeyDown(t){if(t.key==="Escape"){t.preventDefault();this.closeTooltip();this.kritzelEngine?.enable()}}async handleActiveToolChange(t){this.activeControl=this.controls.find((e=>e.tool===t.detail))||null}async closeTooltip(){this.isTooltipVisible=false}kritzelEngine=null;tooltipRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}async componentWillLoad(){await this.initializeEngine();await this.initializeTools();this.isControlsReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine");if(!this.kritzelEngine){throw new Error("kritzel-engine not found in parent element.")}}async initializeTools(){for(const t of this.controls){if(t.type==="tool"&&t.tool){t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)}if(t.type==="tool"&&t.isDefault&&t.tool){await this.kritzelEngine.changeActiveTool(t.tool);this.activeControl=t}if(t.type==="config"){if(this.firstConfig===null){this.firstConfig=t}else{console.warn("Only one config control is allowed. The first one will be used.")}}}}async handleControlClick(t){this.activeControl=t;if(this.activeControl.type==="tool"){await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}}handleConfigClick(t){t.stopPropagation();this.isTooltipVisible=!this.isTooltipVisible;if(this.isTooltipVisible){this.kritzelEngine?.disable()}else{this.kritzelEngine?.enable()}setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail};await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=false;this.kritzelEngine?.enable()}render(){const t=this.activeControl?.config===undefined||this.activeControl?.config===null;return e(i,{key:"a463310d88265b71097f838bf775abdcabc99225",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&e("kritzel-utility-panel",{key:"267e9c26b41a52c655209dbaa8c85cbd72323577",style:{position:"absolute",bottom:"56px",left:"12px"},onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),e("div",{key:"c55773245c925e1b972f3e83cb4d8f1c93ebe995",class:"kritzel-controls"},this.controls.map((i=>{if(i.type==="tool"){return e("button",{class:{"kritzel-control":true,selected:this.activeControl?.name===i?.name},key:i.name,onClick:t=>this.handleControlClick?.(i)},e("kritzel-icon",{name:i.icon}))}if(i.type==="divider"){return e("div",{class:"kritzel-divider",key:i.name})}if(i.type==="config"&&i.name===this.firstConfig?.name&&this.activeControl){return e("div",{class:"kritzel-config-container",key:i.name},e("kritzel-tooltip",{ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},e("div",{style:{width:"294px",height:"100%"}},this.activeControl.name==="brush"&&e("kritzel-control-brush-config",{tool:this.activeToolAsBrushTool,onToolChange:t=>this.handleToolChange?.(t)}),this.activeControl.name==="text"&&e("kritzel-control-text-config",{tool:this.activeToolAsTextTool,onToolChange:t=>this.handleToolChange?.(t)}))),e("div",{tabIndex:0,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{if(t.key==="Enter"){this.handleConfigClick?.(t)}},style:{cursor:this.activeControl.config?"pointer":"default",pointerEvents:t?"none":"auto"}},this.activeControl.tool instanceof n&&e("div",{class:"color-container"},e("kritzel-color",{value:this.activeToolAsBrushTool?.color,size:this.activeToolAsBrushTool?.size,style:{borderRadius:"50%",border:"none"}})),this.activeControl.tool instanceof r&&e("div",{class:"font-container"},e("kritzel-font",{fontFamily:this.activeToolAsTextTool?.fontFamily,size:this.activeToolAsTextTool?.fontSize,color:this.activeToolAsTextTool?.fontColor})),t&&e("div",{class:"no-config"})))}}))))}static get assetsDirs(){return["../assets"]}};Y.style=_;const X=":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}";const L=class{constructor(e){t(this,e)}core;cursorTrailPoints=[];isLeftButtonDown=false;handleMouseDown(t){if(t.pointerType==="mouse"){if(t.button===a.Left){this.isLeftButtonDown=true;this.cursorTrailPoints=[]}}if(t.pointerType==="touch"){if(this.core.store.state.pointers.size===1){this.isLeftButtonDown=true;this.cursorTrailPoints=[]}}}handlePointerMove(t){if(!this.isLeftButtonDown){return}const e={x:t.clientX,y:t.clientY,timestamp:Date.now()};const i=[e,...this.cursorTrailPoints];if(i.length>this.MAX_TRAIL_POINTS){this.cursorTrailPoints=i.slice(0,this.MAX_TRAIL_POINTS)}else{this.cursorTrailPoints=i}}handlePointerUp(t){if(t.pointerType==="mouse"){if(t.button===a.Left){this.isLeftButtonDown=false;this.cursorTrailPoints=[]}}if(t.pointerType==="touch"){if(this.core.store.state.pointers.size===0){this.isLeftButtonDown=false;this.cursorTrailPoints=[]}}}trailCleanupIntervalId;TRAIL_DURATION_MS=100;MAX_TRAIL_POINTS=50;componentDidLoad(){this.trailCleanupIntervalId=window.setInterval((()=>{const t=Date.now();const e=this.cursorTrailPoints.filter((e=>t-e.timestamp<this.TRAIL_DURATION_MS));if(e.length!==this.cursorTrailPoints.length){this.cursorTrailPoints=e}}),50)}disconnectedCallback(){if(this.trailCleanupIntervalId){window.clearInterval(this.trailCleanupIntervalId)}}render(){return e(i,{key:"87003b14680b3cbca302e7b31ff57e74cc774e25"},this.cursorTrailPoints.length>1&&e("svg",{key:"aa6460089c9f3157d2dea9396405b14ab8cc1710",class:"cursor-trail-svg",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:"0",top:"0",width:"100%",height:"100%",pointerEvents:"none",opacity:"var(--kritzel-cursor-trail-opacity, 0.6)",zIndex:"9000"}},this.cursorTrailPoints.slice(1).map(((t,i)=>{const s=this.cursorTrailPoints[i];const o=Date.now();const n=o-t.timestamp;const r=Math.max(0,Math.min(1,n/this.TRAIL_DURATION_MS));if(r>=1)return null;const a=Math.max(2,15*(1-r));return e("line",{key:`trail-segment-${t.timestamp}`,x1:s.x.toString(),y1:s.y.toString(),x2:t.x.toString(),y2:t.y.toString(),stroke:"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))","stroke-width":a.toString(),"stroke-linecap":"round"})}))))}};L.style=X;const N=':host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:pointer;outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>\');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}';const H=class{constructor(e){t(this,e);this.valueChanged=s(this,"valueChanged")}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,true)}value;externalValueChanged(t){if(t!==this.internalValue){this.updateInternalValue(t,false)}}width;selectStyles={};internalValue;hasSuffixContent=false;hasPrefixContent=false;valueChanged;suffixSlotElement;prefixSlotElement;componentWillLoad(){this.updateInternalValue(this.value,false);this.evaluateSuffixContent();this.evaluatePrefixContent()}updateInternalValue(t,e){let i=t;if(this.options&&this.options.length>0){const t=this.options.some((t=>t.value===i));if(!i||!t){i=this.options[0].value}}else{i=undefined}if(this.internalValue!==i){this.internalValue=i;if(e||t!==i&&t!==undefined){this.valueChanged.emit(this.internalValue)}}}handleSelectChange=t=>{const e=t.target.value;if(this.internalValue!==e){this.internalValue=e;this.valueChanged.emit(this.internalValue)}};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const t=this.suffixSlotElement.assignedNodes({flatten:true}).length>0;if(this.hasSuffixContent!==t){this.hasSuffixContent=t}}else{if(this.hasSuffixContent!==false){this.hasSuffixContent=false}}};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const t=this.prefixSlotElement.assignedNodes({flatten:true}).length>0;if(this.hasPrefixContent!==t){this.hasPrefixContent=t}}else{if(this.hasPrefixContent!==false){this.hasPrefixContent=false}}};render(){const t={"custom-select":true,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent};return e(i,{key:"f24911715685ced571843ba7be6631248c8519b7"},e("div",{key:"520fdb74afdef8bd5228f76074e51981f44b910d",class:"dropdown-wrapper"},e("slot",{key:"cf6628437946b57ad0b27c066639e0b64b5a28f8",name:"prefix",ref:t=>this.prefixSlotElement=t,onSlotchange:this.evaluatePrefixContent}),e("select",{key:"3203ccd5b9c8b84e8f41bddfcb07786e879f0035",class:t,style:{...this.selectStyles,width:this.width},onInput:this.handleSelectChange},this.options.map((t=>e("option",{value:t.value,style:t.style,selected:t.value===this.internalValue},t.label)))),e("slot",{key:"d0abb52e082db81860c09d2c48b7c065adb406f3",name:"suffix",ref:t=>this.suffixSlotElement=t,onSlotchange:this.evaluateSuffixContent})))}static get watchers(){return{options:["optionsChanged"],value:["externalValueChanged"]}}};H.style=N;class K{static registry=new Map;static register(t,e){if(this.registry.has(t)){console.warn(`[IconRegistry] Icon "${t}" is already registered. It will be overwritten.`)}this.registry.set(t,e)}static get(t){return this.registry.get(t)}static registerIcons(t){for(const e in t){if(Object.prototype.hasOwnProperty.call(t,e)){this.register(e,t[e])}}}static has(t){return this.registry.has(t)}}K.registerIcons({cursor:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',pen:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',highlighter:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',eraser:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',type:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',image:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',"chevron-down":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',"chevron-up":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',copy:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',paste:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',cut:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',delete:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',"bring-to-front":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',"send-to-back":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',"select-all":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',download:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',undo:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',redo:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',plus:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',"ellipsis-vertical":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',x:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',check:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'});const U=1e3;const q=1e-4;const G="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;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";const Z=class{constructor(e){t(this,e);this.isReady=s(this,"isReady")}get host(){return o(this)}scaleMax=U;scaleMin=q;controls=[{name:"selection",type:"tool",isDefault:true,tool:l,icon:"cursor"},{name:"brush",type:"tool",tool:n,icon:"pen",config:c},{name:"eraser",type:"tool",tool:h,icon:"eraser"},{name:"text",type:"tool",tool:r,icon:"type",config:d},{name:"image",type:"tool",tool:u,icon:"image"},{name:"divider",type:"divider"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>(await this.engineRef.getCopiedObjects()).length===0,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Edit",icon:"pen",visible:(t,e)=>e.length===1&&e[0].isEditable,action:(t,e)=>{if(e.length===1){const t=e[0];if(t.isEditable){t.edit()}}}},{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>(await this.engineRef.getCopiedObjects()).length===0,action:(t,e)=>this.engineRef.paste(t.x,t.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()}];customSvgIcons={};isControlsVisible=true;isUtilityPanelVisible=true;isReady;isEngineReady=false;isControlsReady=false;isWorkspaceManagerReady=false;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=false;onIsEngineReady(t){if(t&&this.isControlsReady){this.checkIsReady()}}onIsControlsReady(t){if(t&&this.isEngineReady){this.checkIsReady()}}handleTouchStart(t){if(t.cancelable){t.preventDefault()}}async getObjectById(t){return this.engineRef.getObjectById(t)}async addObject(t){return this.engineRef.addObject(t)}async updateObject(t,e){return this.engineRef.updateObject(t,e)}async removeObject(t){return this.engineRef.removeObject(t)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(t){return this.engineRef.selectObjects(t)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(t){return this.engineRef.centerObjectInViewport(t)}async createWorkspace(t,e){const i=new f(`workspace-${Date.now()}`,t,e);return this.engineRef.createWorkspace(i)}async updateWorkspace(t){return this.engineRef.updateWorkspace(t)}async deleteWorkspace(t){return this.engineRef.deleteWorkspace(t)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons();this.listenForMobileKeyboard();this.setOsSpecificCssVariables()}async checkIsReady(){await customElements.whenDefined("kritzel-editor");await customElements.whenDefined("kritzel-workspace-manager");await customElements.whenDefined("kritzel-controls");await customElements.whenDefined("kritzel-engine");if(!this.isEngineReady||!this.isControlsReady||!this.isWorkspaceManagerReady){return}this.isReady.emit(this.host)}onEngineReady(t){this.isEngineReady=true;this.activeWorkspace=t.detail.activeWorkspace;this.workspaces=t.detail.workspaces}registerCustomSvgIcons(){for(const[t,e]of Object.entries(this.customSvgIcons)){K.register(t,e)}}listenForMobileKeyboard(){p.onKeyboardVisibleChanged((t=>{this.isVirtualKeyboardOpen=t}))}setOsSpecificCssVariables(){const t=V.detectOS();switch(t){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","14px");this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)");this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)");this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","14px");break}}render(){return e(i,{key:"17c4e1ce489a5cd359972e67105019ad64703b19"},e("kritzel-workspace-manager",{key:"963f62afe326d33eccdabda804bc3e260aafc306",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:t=>this.activeWorkspace=t.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=true}),e("kritzel-engine",{key:"f60f67d06ce73f5f86716fc0ec68408c71100d82",ref:t=>this.engineRef=t,workspace:this.activeWorkspace,scaleMax:this.scaleMax,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:t=>this.onEngineReady(t),onWorkspacesChange:t=>this.workspaces=t.detail}),e("kritzel-controls",{key:"1dc25c1bbb50978cfac3cdaa2d3ae0a32ca7c4f7",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:t=>this.controlsRef=t,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,onIsControlsReady:()=>this.isControlsReady=true}))}static get watchers(){return{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"]}}};Z.style=G;class J{_core;initialTouchDistance=0;startX=0;startY=0;constructor(t,e){this._core=t;this._core.store.setState("host",e);this._core.store.setState("viewportWidth",e.clientWidth);this._core.store.setState("viewportHeight",e.clientHeight);this._core.store.setState("startX",0);this._core.store.setState("startY",0);this._core.store.setState("translateX",0);this._core.store.setState("translateY",0)}handleResize(){this._core.store.setState("viewportWidth",this._core.store.state.host.clientWidth);this._core.store.setState("viewportHeight",this._core.store.state.host.clientHeight);this._core.store.setState("hasViewportChanged",true);this._core.rerender()}handlePointerDown(t){if(t.pointerType==="mouse"){const e=t.clientX-this._core.store.offsetX;const i=t.clientY-this._core.store.offsetY;if(t.button===a.Right){this._core.store.setState("isPanning",true);this._core.store.setState("startX",e);this._core.store.setState("startY",i)}}if(t.pointerType==="touch"){const t=Array.from(this._core.store.state.pointers.values());if(t.length===2){this._core.store.setState("currentPath",null);this._core.store.setState("isScaling",true);const e=t[0].clientX-this._core.store.offsetX;const i=t[0].clientY-this._core.store.offsetY;const s=t[1].clientX-this._core.store.offsetX;const o=t[1].clientY-this._core.store.offsetY;this.initialTouchDistance=Math.sqrt(Math.pow(e-s,2)+Math.pow(i-o,2));this.startX=(e+s)/2;this.startY=(i+o)/2;this._core.rerender()}}}handlePointerMove(t){if(t.pointerType==="mouse"){const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);if(this._core.store.state.isPanning){const t=i-this._core.store.state.startX;const e=s-this._core.store.state.startY;this._core.store.setState("translateX",this._core.store.state.translateX+t);this._core.store.setState("translateY",this._core.store.state.translateY+e);this._core.store.setState("startX",i);this._core.store.setState("startY",s);this._core.store.setState("hasViewportChanged",true);this._core.store.setState("skipContextMenu",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}if(t.pointerType==="touch"){const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);const o=Array.from(this._core.store.state.pointers.values());if(o.length===2){const t=o[0].clientX-this._core.store.offsetX;const e=o[0].clientY-this._core.store.offsetY;const i=o[1].clientX-this._core.store.offsetX;const s=o[1].clientY-this._core.store.offsetY;const n=Math.sqrt(Math.pow(t-i,2)+Math.pow(e-s,2));const r=(t+i)/2;const a=(e+s)/2;const l=n/this.initialTouchDistance;const c=this._core.store.state.scale*l;if(c>this._core.store.state.scaleMax||c<this._core.store.state.scaleMin){this._core.store.setState("translateX",this._core.store.state.translateX+r-this.startX);this._core.store.setState("translateY",this._core.store.state.translateY+a-this.startY)}else{const t=(r-this._core.store.state.translateX)*(l-1);const e=(a-this._core.store.state.translateY)*(l-1);this._core.store.setState("translateX",this._core.store.state.translateX+r-this.startX-t);this._core.store.setState("translateY",this._core.store.state.translateY+a-this.startY-e);this._core.store.setState("scale",c);this.initialTouchDistance=n}this.startX=r;this.startY=a;this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}}handlePointerUp(t){if(t.pointerType==="mouse"){if(this._core.store.state.isPanning){this._core.store.setState("isPanning",false);this._core.rerender()}}if(t.pointerType==="touch"){this._core.store.setState("isScaling",false);this._core.rerender()}}handleWheel(t){t.preventDefault();if(t.ctrlKey===true&&b.isMainMouseWheel(t)){this.handleZoom(t)}if(!t.ctrlKey){this.handlePan(t)}}handleZoom(t){this._core.store.setState("isScaling",true);const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);const o=t.deltaY>0?-this._core.store.state.scaleStep*this._core.store.state.scale:this._core.store.state.scaleStep*this._core.store.state.scale;const n=Math.min(this._core.store.state.scaleMax,Math.max(this._core.store.state.scaleMin,this._core.store.state.scale+o));const r=n/this._core.store.state.scale;const a=(i-this._core.store.state.translateX)*(r-1);const l=(s-this._core.store.state.translateY)*(r-1);this._core.store.setState("scale",n);this._core.store.setState("translateX",this._core.store.state.translateX-a);this._core.store.setState("translateY",this._core.store.state.translateY-l);this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale);setTimeout((()=>{this._core.store.setState("isScaling",false)}),300)}handlePan(t){const e=.8;this._core.store.setState("translateX",this._core.store.state.translateX-t.deltaX*e);this._core.store.setState("translateY",this._core.store.state.translateY-t.deltaY*e);this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}class Q extends g{shortcuts=[{key:"Escape",condition:t=>!!t.store.state.selectionGroup,action:t=>t.clearSelection()},{key:"Delete",condition:t=>!!t.store.state.selectionGroup,action:t=>t.delete()},{key:"z",ctrl:true,action:t=>t.history.undo()},{key:"y",ctrl:true,action:t=>t.history.redo()},{key:"s",ctrl:true,action:()=>this.switchTool("selection")},{key:"b",ctrl:true,action:()=>this.switchTool("brush")},{key:"e",ctrl:true,action:()=>this.switchTool("eraser")},{key:"i",ctrl:true,action:()=>this.switchTool("image")},{key:"x",ctrl:true,action:()=>this.switchTool("text")},{key:"c",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>{t.copy();t.rerender()}},{key:"v",ctrl:true,condition:t=>!!t.store.state.copiedObjects&&!t.store.state.activeText,action:t=>t.paste()},{key:"a",ctrl:true,condition:t=>!!t.store.state.activeText,action:t=>t.store.state.activeText.selectAll()},{key:"v",ctrl:true,condition:t=>!!t.store.state.activeText,action:t=>t.store.state.activeText.insertFromClipboard()},{key:"+",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.bringForward()},{key:"-",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.sendBackward()},{key:"*",shift:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.bringToFront()},{key:"_",shift:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.sendToBack()}];constructor(t){super(t)}switchTool(t){const e=k.getTool(t);this._core.store.setState("activeTool",e);this._core.deselectAllObjects();e.onActivate()}handleKeyDown(t){this._core.store.setState("isCtrlKeyPressed",t.ctrlKey);const e=this.shortcuts.find((e=>e.key===t.key&&!!e.ctrl===t.ctrlKey&&!!e.shift===t.shiftKey&&(!e.condition||e.condition(this._core))));if(e){t.preventDefault();e.action(this._core)}}handleKeyUp(t){this._core.store.setState("isCtrlKeyPressed",t.ctrlKey)}}class tt extends g{globalContextMenuItems=[];objectContextMenuItems=[];constructor(t,e,i){super(t);this.globalContextMenuItems=e;this.objectContextMenuItems=i}handleContextMenu(t){if(!(this._core.store.state.activeTool instanceof l)){return}if(this._core.store.state.skipContextMenu){this._core.store.setState("skipContextMenu",false);return}const e=this._core.getObjectFromPointerEvent(t,".object");if(e&&!(e instanceof y)){const t=y.create(this._core);t.addOrRemove(e);t.isSelected=true;t.rotation=e.rotation;this._core.store.setState("isSelecting",false);const i=new v(this._core,this,[new w(this._core,this._core.store.state.selectionGroup),new x(this._core,this,t)]);this._core.history.executeCommand(i)}this._core.store.setState("contextMenuItems",this._core.store.state.selectionGroup?this.objectContextMenuItems:this.globalContextMenuItems);let i=t.clientX-this._core.store.offsetX;let s=t.clientY-this._core.store.offsetY;const o=150;const n=200;const r=10;if(i+o>window.innerWidth-r){i=window.innerWidth-o-r}if(s+n>window.innerHeight-r){s=window.innerHeight-n-r}i=Math.max(r,i);s=Math.max(r,s);this._core.store.setState("contextMenuX",i);this._core.store.setState("contextMenuY",s);this._core.store.setState("isContextMenuVisible",true);this._core.store.setState("isEnabled",false);this._core.rerender()}}class et{static isInstanceOf(t,e){return!!t&&t.__class__===e}}const it={activeWorkspace:null,activeTool:null,activeText:null,currentPath:null,copiedObjects:null,objectsMap:null,selectionBox:null,selectionGroup:null,resizeHandleType:null,hasViewportChanged:false,isReady:false,isEnabled:true,isScaling:false,isPanning:false,isSelecting:false,isResizing:false,isResizeHandleSelected:false,isRotating:false,isRotationHandleSelected:false,isDragging:false,isDrawing:false,isErasing:false,isWriting:false,isCtrlKeyPressed:false,isContextMenuVisible:false,contextMenuItems:[],contextMenuX:0,contextMenuY:0,skipContextMenu:false,debugInfo:{showObjectInfo:false,showViewportInfo:false,logCommands:false,logDatabase:false},host:null,pointerX:0,pointerY:0,scale:1,scaleMax:1,scaleMin:1,scaleStep:.075,startX:0,startY:0,translateX:0,translateXMax:400,translateXMin:0,translateY:0,translateYMax:400,translateYMin:0,viewportWidth:0,viewportHeight:0,historyBufferSize:1e3,longTouchTimeout:null,longTouchDelay:300,pointers:new Map,workspaces:[]};class st{db=null;dbName;dbVersion;isLoggingEnabled;constructor(t,e,i=false){this.dbName=t;this.dbVersion=e;this.isLoggingEnabled=i}async open(t){return new Promise(((e,i)=>{if(this.db){e();return}if(this.isLoggingEnabled){console.info(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`)}const s=indexedDB.open(this.dbName,this.dbVersion);s.onerror=()=>{console.error("IndexedDB error:",s.error);i(s.error)};s.onsuccess=()=>{this.db=s.result;if(this.isLoggingEnabled){console.info(`[IndexedDB] Database opened successfully.`)}e()};s.onupgradeneeded=e=>{if(this.isLoggingEnabled){console.info(`[IndexedDB] Upgrade needed for database: ${this.dbName}`)}const i=e.target.result;t.forEach((t=>{if(!i.objectStoreNames.contains(t.name)){if(this.isLoggingEnabled){console.info(`[IndexedDB] Creating store: ${t.name}`)}const e=i.createObjectStore(t.name,t.options);if(t.indices){t.indices.forEach((i=>{if(this.isLoggingEnabled){console.info(`[IndexedDB] Creating index: ${i.name} on store: ${t.name}`)}e.createIndex(i.name,i.keyPath,i.options)}))}}}))}}))}close(){if(this.db){if(this.isLoggingEnabled){console.info(`[IndexedDB] Closing database: ${this.dbName}`)}this.db.close();this.db=null}}async add(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Add:",{storeName:t,item:e})}if(e.serialize===undefined){throw new Error("Item does not implement KritzelSerializable interface.")}const i=e.serialize();return this.executeTransaction(t,"readwrite",(t=>t.add(i)))}async get(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Get:",{storeName:t,key:e})}return this.executeTransaction(t,"readonly",(t=>t.get(e)))}async getAll(t){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAll:",{storeName:t})}return this.executeTransaction(t,"readonly",(t=>t.getAll()))}async update(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Update:",{storeName:t,item:e})}if(e.serialize===undefined){throw new Error("Item does not implement KritzelSerializable interface.")}const i=e.serialize();return this.executeTransaction(t,"readwrite",(t=>t.put(i)))}async delete(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Delete:",{storeName:t,key:e})}return this.executeTransaction(t,"readwrite",(t=>t.delete(e)))}async deleteByRange(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] DeleteByRange:",{storeName:t,range:e})}return this.executeTransaction(t,"readwrite",(t=>t.delete(e)))}async getAllByRange(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAllByRange:",{storeName:t,range:e})}return this.executeTransaction(t,"readonly",(t=>t.getAll(e)))}async getAllByIndex(t,e,i){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAllByIndex:",{storeName:t,indexName:e,query:i})}return this.executeTransaction(t,"readonly",(t=>{const s=t.index(e);return s.getAll(i)}))}async executeTransaction(t,e,i){if(!this.db){throw new Error("Database is not open.")}return new Promise(((s,o)=>{const n=this.db.transaction(t,e);const r=n.objectStore(t);const a=i(r);let l;n.oncomplete=()=>{s(l)};n.onabort=()=>{o(n.error??new Error("Transaction aborted"))};n.onerror=()=>{o(n.error)};a.onsuccess=()=>{l=a.result}}))}async batch(t){if(!this.db){throw new Error("Database is not open.")}const e=await this.extractStoreNamesFromActions(t);if(this.isLoggingEnabled){console.info("[IndexedDB] Starting batch transaction:",{storeNames:e})}return new Promise(((i,s)=>{const o=this.db.transaction(e,"readwrite");const n=[];const r=[];const a={add:(t,e)=>this.add(t,e),get:(t,e)=>this.get(t,e),getAll:t=>this.getAll(t),update:(t,e)=>this.update(t,e),delete:(t,e)=>this.delete(t,e),deleteByRange:(t,e)=>this.deleteByRange(t,e),getAllByRange:(t,e)=>this.getAllByRange(t,e),getAllByIndex:(t,e,i)=>this.getAllByIndex(t,e,i),executeTransaction:(t,e,i)=>new Promise(((s,n)=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Executing batch action:",{storeName:t,mode:e})}const r=o.objectStore(t);const a=i(r);a.onsuccess=()=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Batch action request successful:",{result:a.result})}s(a.result)};a.onerror=()=>{console.error("[IndexedDB] Batch action request error:",a.error);n(a.error)}}))};o.oncomplete=()=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Batch transaction complete.")}Promise.all(r).then((()=>i(n)))};o.onabort=()=>{console.error("[IndexedDB] Batch transaction aborted:",o.error);s(o.error??new Error("Transaction aborted"))};o.onerror=()=>{console.error("[IndexedDB] Batch transaction error:",o.error);s(o.error)};t.forEach(((t,e)=>{const i=t(a).then((t=>{n[e]=t})).catch((t=>{if(!o.error){o.abort()}s(t)}));r.push(i)}))}))}async extractStoreNamesFromActions(t){const e=new Set;const i=new Proxy(this,{get:(t,i)=>{if(["add","get","getAll","update","delete","deleteByRange","getAllByRange","getAllByIndex"].includes(i)){return t=>{e.add(t);return Promise.resolve()}}return t[i]}});await Promise.all(t.map((t=>t(i))));return Array.from(e)}}class ot extends m{currentViewport;previousViewport;constructor(t,e,i,s=false){super(t,e,s);this.previousViewport=i;this.currentViewport={scale:this._core.store.state.scale,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}execute(){this._core.store.setState("scale",this.currentViewport.scale);this._core.store.setState("translateX",this.currentViewport.translateX);this._core.store.setState("translateY",this.currentViewport.translateY)}undo(){this._core.store.setState("scale",this.previousViewport.scale);this._core.store.setState("translateX",this.previousViewport.translateX);this._core.store.setState("translateY",this.previousViewport.translateY)}}class nt{buffer;capacity;head=0;tail=0;size=0;constructor(t){this.capacity=t;this.buffer=new Array(t).fill(null)}add(t){this.buffer[this.head]=t;this.head=(this.head+1)%this.capacity;if(this.size<this.capacity){this.size++}else{this.tail=(this.tail+1)%this.capacity}}pop(){if(this.size===0){return null}this.head=(this.head-1+this.capacity)%this.capacity;const t=this.buffer[this.head];this.buffer[this.head]=null;this.size--;return t}peek(){if(this.size===0){return null}const t=(this.head-1+this.capacity)%this.capacity;return this.buffer[t]}isEmpty(){return this.size===0}clear(){this.buffer.fill(null);this.head=0;this.tail=0;this.size=0}}class rt{_core;undoStack;redoStack;previousViewport;constructor(t){this._core=t;this.undoStack=new nt(this._core.store.state.historyBufferSize);this.redoStack=new nt(this._core.store.state.historyBufferSize);this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}reset(){this.undoStack.clear();this.redoStack.clear();this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}executeCommand(t){if(this._core.store.state.hasViewportChanged){this.addUpdateViewportCommand()}t.execute();if(t.skipHistory===false){if(this._core.store.state.debugInfo.logCommands){console.info("add",t)}this.undoStack.add(t);if(this.redoStack.isEmpty()===false){this.redoStack.clear()}}this._core.rerender()}undo(){if(this._core.store.state.hasViewportChanged){const t=new ot(this._core,this,this.previousViewport);t.undo();this._core.store.setState("hasViewportChanged",false);this._core.rerender();return}const t=this.undoStack.pop();if(t){t.undo();if(this._core.store.state.debugInfo.logCommands)console.info("undo",t);this.redoStack.add(t)}this._core.store.setState("copiedObjects",null);this._core.rerender()}redo(){const t=this.redoStack.pop();if(t){t.execute();if(this._core.store.state.debugInfo.logCommands)console.info("redo",t);this.undoStack.add(t)}this._core.rerender()}addUpdateViewportCommand(){const t=new ot(this._core,this,this.previousViewport);t.execute();this.undoStack.add(t);if(this.redoStack.isEmpty()===false){this.redoStack.clear()}this._core.store.setState("hasViewportChanged",false);this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}}class at{map;constructor(){this.map=new Map}reset(){this.map.clear()}insert(t){if(!t.id){return false}this.map.set(t.id,t);return true}update(t){if(!t.id||!this.map.has(t.id)){return false}this.map.set(t.id,t);return true}remove(t){for(const[e,i]of this.map){if(t(i)){this.map.delete(e)}}}filter(t){const e=[];for(const i of this.map.values()){if(t(i)){e.push(i)}}return e}allObjects(){return Array.from(this.map.values())}}class lt{_state;_listeners=new Map;get state(){return this._state}get currentZIndex(){return this._state.objectsMap.filter((t=>!(t instanceof y)&&!(t instanceof z))).length}get allObjects(){return this._state.objectsMap.allObjects()}get selectedObjects(){return this.allObjects.filter((t=>!(t instanceof y))).filter((t=>t.isSelected))}get offsetX(){return this._state.host.getBoundingClientRect().left}get offsetY(){return this._state.host.getBoundingClientRect().top}get isDisabled(){return this._state.isEnabled===false||this._state.isReady===false||this._state.activeWorkspace===null}constructor(t){this._state=t;this._state.objectsMap=new at}onStateChange(t,e){if(!this._listeners.has(t)){this._listeners.set(t,new Set)}this._listeners.get(t).add(e)}getState(t){return this._state[t]}setState(t,e){const i=this._state[t];if(i!==e){this._state[t]=e;if(this._listeners.has(t)){this._listeners.get(t).forEach((s=>s(e,i,String(t))))}}}}class ct{_kritzelEngine;_store;_history;_database;get engine(){return this._kritzelEngine}get history(){return this._history}get database(){return this._database}get store(){return this._store}constructor(t){this._kritzelEngine=t;this._store=new lt(it);this._history=new rt(this);this._database=new st("kritzelDB",1,this._store.state.debugInfo.logDatabase)}async initializeDatabase(){await this._database.open([{name:"objects",options:{keyPath:["workspaceId","id"]}},{name:"workspaces",options:{keyPath:"id"}}]);this.rerender()}async initializeWorkspace(t){const e=await this.getWorkspaces();const i=[...e].sort(((t,e)=>e.updatedAt.getTime()-t.updatedAt.getTime()))[0];const s=new f(C.generateUUID(),"New Workspace");this._store.setState("activeWorkspace",t??i??s);const o=await this.getWorkspace(this._store.state.activeWorkspace.id);if(o){await this.updateWorkspace(this._store.state.activeWorkspace)}else{await this.createWorkspace(this._store.state.activeWorkspace)}this._store.setState("workspaces",await this.getWorkspaces());this._store.setState("translateX",this._store.state.activeWorkspace.viewport.translateX);this._store.setState("translateY",this._store.state.activeWorkspace.viewport.translateY);this._store.setState("scale",this._store.state.activeWorkspace.viewport.scale);await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id)}async initializeWorkspaceObjects(t){this._store.state.objectsMap.reset();this._history.reset();const e=await this._database.getAllByRange("objects",IDBKeyRange.bound([t],[t,"￿"]));const i=new I(this);e.forEach((t=>{const e=i.revive(t);this._store.state.objectsMap.insert(e)}));this.rerender()}async updateWorkspaceViewport(t,e,i){const s=this._store.state.activeWorkspace;if(!s){throw new Error("Workspace not initialized")}s.viewport={translateX:t,translateY:e,scale:i};s.updatedAt=new Date;await this._database.update("workspaces",s)}async addObjectToDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([e=>e.add("objects",t),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error adding object to database:",t)}))}async updateObjectInDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([e=>e.update("objects",t),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error updating object in database:",t)}))}async deleteObjectFromDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([i=>i.delete("objects",[e.id,t]),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error deleting object from database:",t)}))}async getWorkspace(t){if(!this._database){throw new Error("Database not initialized")}const e=new I(this);return this._database.get("workspaces",t).then((t=>t?e.revive(t):null))}async getWorkspaces(){if(!this._database){throw new Error("Database not initialized")}const t=new I(this);return this._database.getAll("workspaces").then((e=>e.map((e=>t.revive(e)))))}async createWorkspace(t){if(!this._database){throw new Error("Database not initialized")}t.createdAt=new Date;t.updatedAt=new Date;await this._database.add("workspaces",t);this._store.state.workspaces.push(t)}async updateWorkspace(t){if(!this._database){throw new Error("Database not initialized")}t.updatedAt=new Date;await this._database.update("workspaces",t);const e=this._store.state.workspaces;const i=e.findIndex((e=>e.id===t.id));if(i!==-1){e[i]=t;this._store.setState("workspaces",e)}}async deleteWorkspace(t){if(!this._database){throw new Error("Database not initialized")}const e=IDBKeyRange.bound([t.id],[t.id,"￿"]);await this._database.deleteByRange("objects",e);await this._database.delete("workspaces",t.id);this._store.setState("workspaces",this._store.state.workspaces.filter((e=>e.id!==t.id)))}rerender(){if(this._kritzelEngine){this._kritzelEngine.forceUpdate++}}findObjectById(t){for(const e of this._store.allObjects){if(e.id===t){return e}}return null}deselectAllObjects(){if(this._store.state.selectionGroup){this._history.executeCommand(new w(this,this))}}delete(){if(!this._store.state.selectionGroup){return}const t=this._store.state.selectionGroup.objects.map((t=>new M(this,this._store.state.selectionGroup,t)));const e=new w(this,this._store.state.selectionGroup);const i=[...t,e];this.history.executeCommand(new v(this,this._store.state.selectionGroup,i))}deleteObject(t,e=false){const i=this.findObjectById(t);if(i){const t=new M(this,this,i,e);this.history.executeCommand(t)}}copy(){this._store.setState("copiedObjects",this._store.state.selectionGroup.copy())}paste(t,e){const i=this._store.state.copiedObjects;i.isSelected=true;this._store.setState("copiedObjects",i);const s=t!==undefined?t:this._store.state.copiedObjects.translateX+25/this._store.state.scale;const o=e!==undefined?e:this._store.state.copiedObjects.translateY+25/this._store.state.scale;this._store.state.copiedObjects.updatePosition(s,o);const n=this._store.state.activeWorkspace;this.store.state.copiedObjects.updateWorkspaceId(n.id);this.store.state.copiedObjects.updateZIndices(this.store.currentZIndex);const r=[];let a=null;if(this._store.state.selectionGroup!==null){a=this._store.state.selectionGroup;r.push(new w(this,this._store.state.selectionGroup))}const l=this._store.state.copiedObjects.objects.map((t=>new S(this,this,t)));const c=new x(this,this,this._store.state.copiedObjects,a);r.push(...l,c);this.history.executeCommand(new v(this,this,r));this._store.setState("isSelecting",false);this._store.setState("copiedObjects",this._store.state.selectionGroup.copy());this._store.setState("activeTool",k.getTool("selection"))}bringForward(t){const e=this._store.allObjects.length+1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>{if(t.zIndex===e){return}return new j(this,this,t,{zIndex:t.zIndex+1})}));this.history.executeCommand(new v(this,this,s))}sendBackward(t){const e=0;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>{if(t.zIndex===e){return}return new j(this,this,t,{zIndex:t.zIndex-1})}));this.history.executeCommand(new v(this,this,s))}bringToFront(t){const e=Math.max(...this._store.allObjects.map((t=>t.zIndex)))+1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>new j(this,this,t,{zIndex:e})));this.history.executeCommand(new v(this,this,s))}sendToBack(t){const e=Math.min(...this._store.allObjects.map((t=>t.zIndex)))-1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>new j(this,this,t,{zIndex:e})));this.history.executeCommand(new v(this,this,s))}selectObjects(t){if(t.length===0){return}const e=y.create(this);t.forEach((t=>{t.isSelected=false;e.addOrRemove(t)}));e.isSelected=true;this._store.setState("selectionGroup",e);if(t.length===1){e.rotation=e.objects[0].rotation}this.history.executeCommand(new x(this,this,e))}selectAllObjectsInViewport(){const t=this._store.state.objectsMap.filter((t=>t.isInViewport())).filter((t=>!(t instanceof y)&&!(t instanceof z)&&!(t instanceof W)));if(t.length>0){const e=y.create(this);t.forEach((t=>{t.isSelected=false;e.addOrRemove(t)}));e.isSelected=true;this._store.setState("isSelecting",false);if(t.length===1){e.rotation=e.objects[0].rotation}this.history.executeCommand(new x(this,this,e));this._store.setState("activeTool",k.getTool("selection"))}}clearSelection(){const t=new w(this,this._store.state.selectionGroup);this.history.executeCommand(t);this._store.setState("selectionGroup",null);this._store.setState("selectionBox",null);this._store.setState("isSelecting",false);this._store.setState("isResizeHandleSelected",false);this._store.setState("isRotationHandleSelected",false)}resetActiveText(){if(this._store.state.activeText&&this._store.state.activeText.value===" "){this.deleteObject(this._store.state.activeText.id,true)}this._store.setState("activeText",null)}getObjectFromPointerEvent(t,e=".object"){const i=this._store.state.host?.shadowRoot;if(!i)return null;const s=t.clientX;const o=t.clientY;const n=i.elementFromPoint(s,o);if(!n)return null;const r=n.closest(e);if(r){const t=this._store.allObjects.find((t=>r.id===t.id));const e=t?.hitTest(s,o);return e?t:null}return null}getObjectsFromPointerEvent(t,e=".object"){const i=this._store.state.host?.shadowRoot;if(!i)return[];const s=t.clientX;const o=t.clientY;const n=i.elementsFromPoint(s,o);if(!n||n.length===0)return[];const r=new Set;n.forEach((t=>{const i=t.closest(e);if(i&&i.id){r.add(i.id)}}));if(r.size>0){return this._store.allObjects.filter((t=>r.has(t.id))).sort(((t,e)=>e.zIndex-t.zIndex))}return[]}getCanvasPoint(t){if(!this._store.state.host){return{x:0,y:0}}const e=this._store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;const o=i-this._store.state.translateX;const n=s-this._store.state.translateY;const r=o/this._store.state.scale;const a=n/this._store.state.scale;return{x:r,y:a}}}const ht=":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";const dt=class{get host(){return o(this)}workspace;onWorkspaceChange(t){if(this.core.store.state.activeWorkspace!==t){this.core.initializeWorkspace(t)}}activeTool;globalContextMenuItems;objectContextMenuItems;scaleMax=U;validateScaleMax(t){if(t>U){console.warn(`scaleMax cannot be greater than ${U}.`);this.scaleMax=U;this.core.store.setState("scaleMax",this.scaleMax)}else{this.core.store.setState("scaleMax",t)}}scaleMin=q;validateScaleMin(t){if(t<q){console.warn(`scaleMin cannot be less than ${q}.`);this.scaleMin=q;this.core.store.setState("scaleMin",this.scaleMin)}else{this.core.store.setState("scaleMin",t)}}isEngineReady;activeToolChange;workspacesChange;longpress;forceUpdate=0;handleWheel(t){if(this.core.store.isDisabled){return}if(this.core.store.state.isContextMenuVisible){this.hideContextMenu()}this.viewport.handleWheel(t);this.core.store.state?.activeTool?.handleWheel(t)}handlePointerDown(t){if(this.core.store.isDisabled){return}if(V.isTouchDevice()){b.onLongPress(t,(t=>this.longpress.emit(t)))}this.host.setPointerCapture(t.pointerId);this.core.store.state.pointers.set(t.pointerId,t);this.viewport.handlePointerDown(t);this.core.store.state?.activeTool?.handlePointerDown(t)}handlePointerMove(t){if(this.core.store.isDisabled){return}this.core.store.state.pointers.set(t.pointerId,t);this.viewport.handlePointerMove(t);this.core.store.state?.activeTool?.handlePointerMove(t)}handlePointerUp(t){if(this.core.store.isDisabled){return}this.core.store.state.pointers.delete(t.pointerId);this.host.releasePointerCapture(t.pointerId);this.viewport.handlePointerUp(t);this.core.store.state?.activeTool?.handlePointerUp(t)}handlePointerCancel(t){if(this.core.store.isDisabled){return}this.host.releasePointerCapture(t.pointerId);this.core.store.state.pointers.delete(t.pointerId);this.viewport.handlePointerUp(t);this.core.store.state?.activeTool?.handlePointerUp(t)}handleLongPress(t){this.contextMenuHandler.handleContextMenu(t.detail)}handleContextMenu(t){t.preventDefault();if(this.core.store.isDisabled){return}if(t.pointerType==="touch"){return}this.contextMenuHandler.handleContextMenu(t)}handleResize(){this.viewport.handleResize()}handleKeyDown(t){if(this.core.store.isDisabled){return}this.keyHandler.handleKeyDown(t)}handleKeyUp(t){if(this.core.store.isDisabled){return}this.keyHandler.handleKeyUp(t)}async registerTool(t,e,i){if(typeof e!=="function"||!(e.prototype instanceof D)){console.error(`Failed to register tool "${t}": Tool class must be a constructor function`);return null}const s=k.registerTool(t,e,this.core);if(i){Object.entries(i).forEach((([t,e])=>{s[t]=e}))}return Promise.resolve(s)}async changeActiveTool(t){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",t);this.core.deselectAllObjects();t?.onActivate()}async disable(){this.core.store.setState("isEnabled",false);this.core.rerender()}async enable(){this.core.store.setState("isEnabled",true);this.core.rerender()}async delete(){this.core.delete()}async copy(){this.core.copy()}async paste(t,e){this.core.paste(t,e)}async bringForward(t){this.core.bringForward(t)}async sendBackward(t){this.core.sendBackward(t)}async bringToFront(t){this.core.bringToFront(t)}async sendToBack(t){this.core.sendToBack(t)}async undo(){this.core.history.undo()}async redo(){this.core.history.redo()}async hideContextMenu(){this.core.store.state.pointers.clear();this.core.store.setState("isContextMenuVisible",false);this.core.store.setState("selectionBox",null);this.core.store.setState("isSelecting",false);this.core.store.setState("isEnabled",true);this.core.rerender()}async getObjectById(t){const e=this.core.store.allObjects.find((e=>e.id===t));return e||null}async addObject(t){this.core.deselectAllObjects();t.id=t.generateId();t._core=this.core;t.scale=t.scale?t.scale:this.core.store.state.scale;t.zIndex=this.core.store.currentZIndex;const e=new S(this.core,this,t);this.core.history.executeCommand(e);return t}async updateObject(t,e){this.core.deselectAllObjects();const i=new j(this.core,this,t,e);this.core.history.executeCommand(i);return t}async removeObject(t){this.core.deselectAllObjects();const e=new M(this.core,this,t);this.core.history.executeCommand(e);return t}async getSelectedObjects(){return this.core.store.state.selectionGroup?this.core.store.state.selectionGroup.objects:[]}async selectObjects(t){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",k.getTool("selection"));this.core.deselectAllObjects();this.core.selectObjects(t)}async selectAllObjectsInViewport(){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",k.getTool("selection"));this.core.deselectAllObjects();this.core.selectAllObjectsInViewport()}async clearSelection(){this.core.clearSelection()}async centerObjectInViewport(t){t.centerInViewport();const e=new j(this.core,this,t,t);this.core.history.executeCommand(e);return t}async getCopiedObjects(){return this.core.store.state.copiedObjects?.objects||[]}async createWorkspace(t){t._core=this.core;await this.core.createWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces);return t}async updateWorkspace(t){await this.core.updateWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces)}async deleteWorkspace(t){await this.core.deleteWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces)}async getWorkspaces(){return this.core.getWorkspaces()}async getActiveWorkspace(){return this.core.store.state.activeWorkspace}core;viewport;contextMenuHandler;keyHandler;contextMenuElement=null;get isSelecting(){return this.core.store.state.activeTool instanceof l&&this.core.store.state.isSelecting}get isSelectionActive(){return this.core.store.state.activeTool instanceof l&&this.core.store.state.selectionGroup!==null}constructor(e){t(this,e);this.isEngineReady=s(this,"isEngineReady");this.activeToolChange=s(this,"activeToolChange");this.workspacesChange=s(this,"workspacesChange");this.longpress=s(this,"longpress");this.core=new ct(this)}componentWillLoad(){this.validateScaleMax(this.scaleMax);this.validateScaleMin(this.scaleMin)}async componentDidLoad(){this.contextMenuHandler=new tt(this.core,this.globalContextMenuItems,this.objectContextMenuItems);this.keyHandler=new Q(this.core);this.viewport=new J(this.core,this.host);await this.core.initializeDatabase();await this.core.initializeWorkspace(this.workspace);this._registerStateChangeListeners();if(this.core.store.state.isReady===false){this.core.store.setState("isReady",true);this.isEngineReady.emit(this.core.store.state)}}_registerStateChangeListeners(){this.core.store.onStateChange("activeTool",this._handleActiveToolChange.bind(this))}_handleActiveToolChange(t){if(!(t instanceof l)){this.core.clearSelection()}this.core.store.setState("skipContextMenu",false);this.core.store.setState("copiedObjects",null);this.activeToolChange.emit(t);p.forceHideKeyboard()}render(){const t=window.getComputedStyle(this.host);const s=t.getPropertyValue("--kritzel-selection-handle-size").trim()||"6px";const o=parseFloat(s);const n=o*2<14?14:o;return e(i,{key:"54dce5fe3011a15e4cf77b1daecf578dd0402c67"},e("div",{key:"569c4253054b6c6e84059175716f180a76fd8a04",class:"debug-panel",style:{display:this.core.store.state.debugInfo.showViewportInfo?"block":"none"}},e("div",{key:"ff87fd8f171e46d211d92709d3141ad884ce0253"},"ActiveWorkspaceId: ",this.core.store.state?.activeWorkspace?.id),e("div",{key:"f43f53b4fc28ae9a7fe7e240635a3f410daaa72c"},"ActiveWorkspaceName: ",this.core.store.state?.activeWorkspace?.name),e("div",{key:"e2c45f541e0626a6ea1d5a36047fb2144eabf612"},"TranslateX: ",this.core.store.state?.translateX),e("div",{key:"f7897dde7e2a0b3be1c73342523db9f0c361bdb9"},"TranslateY: ",this.core.store.state?.translateY),e("div",{key:"8f6be6752c49f033eabfd63f1533666e4a4d3c15"},"ViewportWidth: ",this.core.store.state?.viewportWidth),e("div",{key:"26b96ecc0d184d9d224cfb14426503415a00a9ef"},"ViewportHeight: ",this.core.store.state?.viewportHeight),e("div",{key:"7275251e13cb83b670b944d6ce22015525247b83"},"Scale: ",this.core.store.state?.scale),e("div",{key:"f1f071ce637abd91639c0e6d0809d0493ff649e9"},"ActiveTool: ",this.core.store.state?.activeTool?.name),e("div",{key:"fbc6e5cc3fad57cbd54b821f9aa1b68b213447a0"},"HasViewportChanged: ",this.core.store.state?.hasViewportChanged?"true":"false"),e("div",{key:"ced900e880436a03d5490d818b10f079df3e2ed6"},"IsEnabled: ",this.core.store.state?.isEnabled?"true":"false"),e("div",{key:"ffb1c5e0310d246f04e747df85dcfde58c81d83f"},"IsScaling: ",this.core.store.state?.isScaling?"true":"false"),e("div",{key:"5ad7bc9e7957f071400cc997613ec080b6484b8e"},"IsPanning: ",this.core.store.state?.isPanning?"true":"false"),e("div",{key:"42d93051cb0ea2e24ef549abbffcc720dd62efa8"},"IsSelecting: ",this.isSelecting?"true":"false"),e("div",{key:"78a54f7df911c0721fed70be15ccbefae5d99b33"},"IsSelectionActive: ",this.isSelectionActive?"true":"false"),e("div",{key:"e4c4ca2b3f5429a5f9378122a5bfc380eea82cc6"},"IsResizeHandleSelected: ",this.core.store.state.isResizeHandleSelected?"true":"false"),e("div",{key:"1947034670be8512d3654e104c7ea62bf70f207f"},"IsRotationHandleSelected: ",this.core.store.state.isRotationHandleSelected?"true":"false"),e("div",{key:"ecca8afceda81c4817db3e91f5bc4837056c4de0"},"IsDrawing: ",this.core.store.state.isDrawing?"true":"false"),e("div",{key:"1ca1d5cac7421442851f35574bd7765d850399f9"},"IsWriting: ",this.core.store.state.isWriting?"true":"false"),e("div",{key:"1e388d4dd59026dff761a598838b5bd10843d177"},"PointerX: ",this.core.store.state?.pointerX),e("div",{key:"2c2b28eb4a9d293dd8d5d98a072f4bbeb7d0349c"},"PointerY: ",this.core.store.state?.pointerY),e("div",{key:"e41abf270f34643902a0a8d049dad405ead68321"},"SelectedObjects: ",this.core.store.state.selectionGroup?.objects.length||0)),e("div",{key:"e2ed793fac7f3f289daa962042e05e4fd8f44d3b",id:"origin",class:"origin",style:{transform:`matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`}},this.core.store.state.objectsMap.allObjects()?.map((t=>e("div",{key:t.id,style:{display:t.isInViewport()?"block":"none",transform:t?.transformationMatrix,transformOrigin:"top left",zIndex:t.zIndex.toString(),position:"absolute"}},e("svg",{xmlns:"http://www.w3.org/2000/svg",id:t.id,class:"object",style:{height:t?.totalHeight.toString(),width:t?.totalWidth.toString(),left:"0",top:"0",position:"absolute",transform:`rotate(${t.rotationDegrees}deg)`,transformOrigin:"center",opacity:t.markedForRemoval?"0.5":t.opacity.toString(),pointerEvents:t.markedForRemoval?"none":"auto"}},e("foreignObject",{x:"0",y:"0",width:t.totalWidth.toString(),height:t.totalHeight.toString(),style:{minHeight:"0",minWidth:"0",backgroundColor:t.backgroundColor,borderColor:t.borderColor,borderWidth:t.borderWidth+"px",borderStyle:"solid",padding:t.padding+"px",overflow:"visible"}},et.isInstanceOf(t,"KritzelPath")&&e("svg",{ref:e=>e?t.mount(e):t.unmount(),xmlns:"http://www.w3.org/2000/svg",style:{height:t?.height.toString(),width:t?.width.toString(),position:"absolute",overflow:"visible"},viewBox:t?.viewBox},e("path",{d:t?.d,fill:t.fill,stroke:t?.stroke})),et.isInstanceOf(t,"KritzelImage")&&e("img",{ref:e=>e?t.mount(e):t.unmount(),src:t.src,style:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none"},draggable:false,onDragStart:t=>t.preventDefault()}),et.isInstanceOf(t,"KritzelText")&&e("textarea",{ref:e=>e?t.mount(e):t.unmount(),value:t.value,onKeyDown:e=>t.handleKeyDown(e),onInput:e=>t.handleInput(e),rows:t.rows,style:{width:"100%",height:"100%",color:t.fontColor,fontSize:t.fontSize?.toString()+"px",fontFamily:t.fontFamily,border:"none",outline:"none",resize:"none",overflow:"hidden",display:"block",padding:"1px",whiteSpace:"nowrap",pointerEvents:t.isReadonly?"none":"auto",cursor:t.isReadonly?"default":"text",caretColor:t.isReadonly?"transparent":"auto"}}),et.isInstanceOf(t,"KritzelCustomElement")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%",pointerEvents:"auto",overflow:"hidden",display:"block"}}),et.isInstanceOf(t,"KritzelSelectionGroup")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%"}}),et.isInstanceOf(t,"KrtizelSelectionBox")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%",backgroundColor:V.isFirefox()?t.backgroundColor:"transparent",borderWidth:V.isFirefox()?t.borderWidth+"px":"0",borderStyle:V.isFirefox()?"solid":"none",borderColor:V.isFirefox()?t.borderColor:"transparent"}})),e("line",{x1:"0",y1:"0",x2:t.totalWidth,y2:"0",style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:"0",y1:"0",x2:"0",y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:"0",y1:t.totalHeight,x2:t.totalWidth,y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:t.totalWidth,y1:"0",x2:t.totalWidth,y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("circle",{class:"resize-handle top-left",cx:"0",cy:"0",r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay top-left",cx:"0",cy:"0",r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle top-right",cx:t.totalWidth,cy:"0",r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay top-right",cx:t.totalWidth,cy:"0",r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle bottom-left",cx:"0",cy:t.totalHeight,r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay bottom-left",cx:"0",cy:t.totalHeight,r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle bottom-right",cx:t.totalWidth,cy:t.totalHeight,r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay bottom-right",cx:t.totalWidth,cy:t.totalHeight,r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("line",{x1:t.totalWidth/2,y1:"0",x2:t.totalWidth/2,y2:-(15*t.scale/this.core.store.state?.scale),style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"rotation-handle",cx:t.totalWidth/2,cy:-(15*t.scale/this.core.store.state?.scale),r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"rotation-handle-overlay",cx:t.totalWidth/2,cy:-(15*t.scale/this.core.store.state?.scale),r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent",cursor:"grab"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("g",{style:{display:this.core.store.state.debugInfo.showObjectInfo?"block":"none",pointerEvents:"none"}},e("foreignObject",{x:t.totalWidth.toString(),y:"0",width:"400px",height:"160px",style:{minHeight:"0",minWidth:"0",display:t.isDebugInfoVisible?"block":"none"}},e("div",{style:{width:"100%",height:"100%"}},e("div",{style:{whiteSpace:"nowrap"}},"zIndex: ",t.zIndex),e("div",{style:{whiteSpace:"nowrap"}},"translateX: ",t.translateX),e("div",{style:{whiteSpace:"nowrap"}},"translateY: ",t.translateY),e("div",{style:{whiteSpace:"nowrap"}},"width: ",t.width),e("div",{style:{whiteSpace:"nowrap"}},"height: ",t.height),e("div",{style:{whiteSpace:"nowrap"}},"scale: ",t.scale),e("div",{style:{whiteSpace:"nowrap"}},"rotation: ",t.rotation),e("div",{style:{whiteSpace:"nowrap"}},"x: ",t.x),e("div",{style:{whiteSpace:"nowrap"}},"y: ",t.y)))))))),e("svg",{key:"current-path",class:"object",xmlns:"http://www.w3.org/2000/svg",width:this.core.store.state.currentPath?.width,height:this.core.store.state.currentPath?.height,style:{left:"0",top:"0",zIndex:this.core.store.state.currentPath?.zIndex.toString(),position:"absolute",transform:this.core.store.state.currentPath?.transformationMatrix,transformOrigin:"top left",overflow:"visible"},viewBox:this.core.store.state.currentPath?.viewBox},e("path",{key:"2070b03bfd123024e7075da1a969960cf8b37628",d:this.core.store.state.currentPath?.d,fill:this.core.store.state.currentPath?.fill,stroke:this.core.store.state.currentPath?.stroke}))),this.core.store.state.isContextMenuVisible&&e("kritzel-context-menu",{key:"3fc8fc5b1a75bd119effcf5b8f454e18b9c97fc6",class:"context-menu",ref:t=>this.contextMenuElement=t,items:this.core.store.state.contextMenuItems,objects:this.core.store.state.selectionGroup?.objects||[],style:{position:"fixed",left:`${this.core.store.state.contextMenuX}px`,top:`${this.core.store.state.contextMenuY}px`,zIndex:"10000"},onActionSelected:t=>{t.detail.action({x:(-this.core.store.state.translateX+this.core.store.state.contextMenuX)/this.core.store.state.scale,y:(-this.core.store.state.translateY+this.core.store.state.contextMenuY)/this.core.store.state.scale},this.core.store.state.selectionGroup?.objects);this.hideContextMenu()},onClose:()=>this.hideContextMenu()}),this.core.store.state?.activeTool instanceof h&&!this.core.store.state.isScaling&&e("kritzel-cursor-trail",{key:"11612f7439e34cf20843f5ab63b19d5ef07847d7",core:this.core}))}static get watchers(){return{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"]}}};dt.style=ht;const ut=":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}";const ft=class{constructor(e){t(this,e)}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return e(i,{key:"0d0f0f75b64f579ca236950334fafde7f0ef2a38"},e("div",{key:"e71524879ded9727891bdd43f1a41ae5eef49175",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}};ft.style=ut;const pt=":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: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}";const bt=class{constructor(e){t(this,e);this.fontFamilyChange=s(this,"fontFamilyChange")}fontOptions=[{value:"arial",label:"Arial"},{value:"verdana",label:"Verdana"},{value:"helvetica",label:"Helvetica"},{value:"tahoma",label:"Tahoma"},{value:"trebuchet ms",label:"Trebuchet MS"},{value:"times new roman",label:"Times New Roman"},{value:"georgia",label:"Georgia"},{value:"garamond",label:"Garamond"},{value:"courier new",label:"Courier New"},{value:"brush script mt",label:"Brush Script MT"}];selectedFontFamily;fontFamilyChange;componentWillLoad(){if(this.fontOptions&&this.fontOptions.length>0){const t=this.fontOptions.some((t=>t.value===this.selectedFontFamily));if(!this.selectedFontFamily||!t){this.selectedFontFamily=this.fontOptions[0].value}}}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};render(){const t=this.fontOptions.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.value}})));return e(i,{key:"d05a099adf8623b8c67d68f3861c1cd401e86e2c"},e("kritzel-dropdown",{key:"b95af194feaaf5748bb0d584617d217e4b3b8180",options:t,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:this.selectedFontFamily}},e("button",{key:"04a0a72f9297dc6c34a2a2019cae111d8725bcf4",class:"font-style-button",slot:"suffix"},"B"),e("button",{key:"f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31",class:"font-style-button italic-text",slot:"suffix"},"I")))}};bt.style=pt;const gt=":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, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";const kt=class{constructor(e){t(this,e);this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(t){this.selectedSize=t;this.sizeChange.emit(t)}render(){return e(i,{key:"583659340d8f3bfb2ff6f64f2cd692ac07cb32d6"},this.sizes.map((t=>e("div",{class:{"size-container":true,selected:this.selectedSize===t},onClick:()=>this.handleSizeClick(t)},e("kritzel-font",{fontFamily:this.fontFamily,size:t})))))}};kt.style=gt;const yt=":host{display:inline-flex;justify-content:center;align-items:center;color:var(--kritzel-icon-color, inherited)}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";const vt=class{constructor(e){t(this,e)}name;label;size=24;render(){const t=K.get(this.name);if(!t){console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);return e("span",{class:"error-icon","aria-label":`Error: Icon ${this.name} not found`},"?")}const s={width:`${this.size}px`,height:`${this.size}px`};return e(i,{style:s},e("span",{"aria-hidden":!this.label,role:this.label?"img":undefined,"aria-label":this.label,innerHTML:t}))}};vt.style=yt;const wt=":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}:host(:focus-visible){outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";const xt=class{constructor(e){t(this,e);this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu");this.close=s(this,"close")}get host(){return o(this)}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(t){this.host.scrollTop=t;this.host.scrollTo({top:t,behavior:"auto"})}async setFocus(){const t=this.host.shadowRoot.querySelector("kritzel-menu-item");if(t){t.focus()}}get openChildMenuItem(){return this.items.find((t=>t.isChildMenuOpen))}get editingMenuItem(){return this.items.find((t=>t.isEditing))}onOverlayClick=t=>{t.stopPropagation();this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=t=>{t.stopPropagation();this.itemSelect.emit(t.detail)};handleSave=t=>{t.stopPropagation();this.itemSave.emit(t.detail)};handleCancel=t=>{t.stopPropagation();this.itemCancel.emit(t.detail)};handleToggleChildMenu=t=>{t.stopPropagation();this.itemToggleChildMenu.emit(t.detail)};handleCloseChildMenu=t=>{t.stopPropagation();this.itemCloseChildMenu.emit(t.detail)};render(){return e(i,{key:"211bd579000294d9edf6f85f2d7244aebe331191",tabIndex:0,onClick:t=>t.stopPropagation()},this.openChildMenuItem&&e("div",{key:"b1c397118b1fbac934867677073661a69be1cab1",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((t=>e("kritzel-menu-item",{key:t.id,item:t,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!t.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}};xt.style=wt;const mt=":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";const zt=class{constructor(e){t(this,e);this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu")}get host(){return o(this)}item;onItemChange(t,e){if(t!==e){this.isDirty=false}}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=false;inputRef;focusInput(){if(this.item.isEditing&&this.inputRef&&!this.isDirty){this.inputRef.focus();if(V.isIOS()){const t=this.inputRef.value.length;this.inputRef.setSelectionRange(t,t)}else{this.inputRef.select()}}}componentDidLoad(){this.setDeviceSpecificStyles();this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{const t=V.isTouchDevice();if(t){this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent");this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent")}};handleItemSelect=t=>{t.stopPropagation();this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=t=>{t.stopPropagation();const e=t.target;this.item.label=e.value;this.isDirty=true};handleSave=t=>{t.stopPropagation();this.host.focus();this.itemSave.emit(this.item)};handleCancel=t=>{t.stopPropagation();this.host.focus();this.itemCancel.emit(this.item)};handleMenuToggle=t=>{t.stopPropagation();this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:t.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[e("div",{class:"menu-item-content left"},e("div",null,this.item.label)),e("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[e("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},e("kritzel-icon",{name:"ellipsis-vertical",size:16})),e("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},e("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:t=>this.itemSelect.emit(t.detail),onItemSave:t=>this.itemSave.emit(t.detail),onItemCancel:t=>this.itemCancel.emit(t.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[e("div",{class:"menu-item-content left"},e("input",{ref:t=>this.inputRef=t,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),e("div",{class:"menu-item-content right"},e("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},e("kritzel-icon",{name:"x",size:16})),e("div",{tabIndex:!this.isDirty&&!this.item.isNewItem?-1:0,class:{"action-button":true,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},e("kritzel-icon",{name:"check",size:16})))]}render(){return e(i,{key:"a35e1e3427568f436a36b43ba87af3710a4e83c5",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},e("div",{key:"42eef5a16b9b164839c1fe133e38ecb505c07632",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:["onItemChange"]}}};zt.style=mt;class Ct{static getNumericValueFromStyle(t,e){const i=window.getComputedStyle(t).getPropertyValue(e);return parseFloat(i)||0}static getScrollableParent(t){if(!t){return window}const e=t.parentNode?.host??t.parentElement;if(!e||e.tagName==="BODY"){return window}const i=window.getComputedStyle(e);if(i.overflow==="auto"||i.overflowY==="auto"||i.overflow==="scroll"||i.overflowY==="scroll"){return e}return this.getScrollableParent(e)}static isElementInViewport(t){if(!t){return false}const e=this.getScrollableParent(t);const i=t.getBoundingClientRect();if(e===window){const t=window.innerHeight||document.documentElement.clientHeight;const e=window.innerWidth||document.documentElement.clientWidth;return i.top>=0&&i.left>=0&&i.bottom<=t&&i.right<=e}const s=e.getBoundingClientRect();return i.top>=s.top&&i.left>=s.left&&i.bottom<=s.bottom&&i.right<=s.right}static getFocusableElements(t){if(!t)return[];const e=[];const i='a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';const s=t=>t.offsetParent!==null;const o=t=>{if(t instanceof HTMLElement&&t.matches(i)&&!t.hasAttribute("disabled")&&s(t)){e.push(t)}if(t.shadowRoot){Array.from(t.shadowRoot.children).forEach(o)}if(t.tagName==="SLOT"){t.assignedElements({flatten:true}).forEach(o)}if(!t.shadowRoot){Array.from(t.children).forEach(o)}};o(t);return e}}const It=class{constructor(e){t(this,e);this.close=s(this,"close")}get host(){return o(this)}anchor;anchorChanged(t){if(t){this.openPortal();this.calculatePosition();if(this.autoFocus){this.focusFirstElement()}}else{this.closePortal()}}offsetX;offsetY;autoFocus=true;close;handleOutsideClick(t){t.stopPropagation();const e=this.lastAddedPortal===this.portal;if(!e)return;const i=t.target;if(!this.host.contains(i)){this.close.emit();this.closePortal()}}handleKeyDown(t){t.stopPropagation();const e=this.lastAddedPortal===this.portal;if(!e)return;if(t.key==="Escape"){this.anchor.focus();this.close.emit();this.closePortal()}if(t.key==="Tab"){this.trapFocus(t)}if(t.key==="Enter"){const e=this.getDeepActiveElement();if(e?.click){t.preventDefault();e.click()}}}handleResize(){this.calculatePosition()}handleWindowScroll(){const t=Ct.isElementInViewport(this.anchor);if(!t){this.anchor?.blur();this.closePortal();return}this.calculatePosition()}portal;id=`portal-${C.generateUUID()}`;defaultOffset=0;minLeft=0;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;while(t?.shadowRoot?.activeElement){t=t.shadowRoot.activeElement}return t}trapFocus(t){const e=Ct.getFocusableElements(this.host);if(e.length===0)return;const i=e[0];const s=e[e.length-1];const o=this.getDeepActiveElement();if(t.shiftKey){if(o===i){s.focus();t.preventDefault()}}else{if(o===s){i.focus();t.preventDefault()}}}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot");const e=t?.assignedElements({flatten:true})[0];if(!e)return null;const i=Ct.getFocusableElements(e);return i[0]??e}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect();const e=this.portal.getBoundingClientRect();const i=this.offsetX??this.defaultOffset;let s=t.left+i;const o=window.innerWidth-e.width-this.minLeft;if(s<this.minLeft)s=this.minLeft;if(s>o)s=o;return Math.round(s+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect();const e=this.portal.getBoundingClientRect();const i=this.offsetY??this.defaultOffset;let s=t.bottom+i;if(s+e.height>window.innerHeight){s=t.top-e.height-i}return Math.round(s+window.scrollY)}openPortal(){this.portal=document.createElement("div");this.portal.setAttribute("id",this.id);this.portal.style.zIndex="1";this.portal.style.position="absolute";this.portal.style.top="0px";this.portal.style.left="0px";this.portal.appendChild(this.host);document.body.append(this.portal)}closePortal(){const t=document.getElementById(this.id);if(!t)return;document.body.removeChild(t);this.host.remove()}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop();const e=this.calculateLeft();this.portal.style.top=`${t}px`;this.portal.style.left=`${e}px`}render(){return e(i,{key:"a906e21c1257dfc6ed21257cce150db17048f04e",style:{display:this.anchor?"block":"none"}},e("slot",{key:"972544f2258f8b6dc8c691f3762d5ba806a57c41"}))}static get watchers(){return{anchor:["anchorChanged"]}}};const Mt=":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";const St=class{constructor(e){t(this,e);this.mainButtonClick=s(this,"mainButtonClick");this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu");this.menuOpen=s(this,"menuOpen");this.menuClose=s(this,"menuClose")}get host(){return o(this)}buttonIcon="plus";dropdownIcon="chevron-down";items=[];mainButtonDisabled=false;menuButtonDisabled=false;mainButtonClick;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;menuOpen;menuClose;isMenuOpen=false;isTouchDevice=V.isTouchDevice();anchorElement;menuScrollTop=0;splitMenuButtonRef;menuRef;async open(){if(this.isMenuOpen)return;this.isMenuOpen=true;this.anchorElement=this.host;this.menuOpen.emit()}async focusMenu(){if(this.menuRef){await this.menuRef.setFocus()}}handleButtonClick=t=>{t.stopPropagation();this.mainButtonClick.emit()};toggleMenu=t=>{t.stopPropagation();if(this.isMenuOpen){this.closeMenu()}else{this.openMenu(t)}};openMenu=t=>{t.stopPropagation();this.isMenuOpen=true;this.anchorElement=this.host;this.menuOpen.emit();requestAnimationFrame((()=>{this.menuRef?.setScrollTop(this.menuScrollTop)}))};closeMenu=()=>{this.isMenuOpen=false;this.anchorElement=null;this.splitMenuButtonRef?.blur();this.menuClose.emit()};handleItemSelect=t=>{this.itemSelect.emit(t.detail)};handleItemSave=t=>{this.itemSave.emit(t.detail)};handleItemCancel=t=>{this.itemCancel.emit(t.detail)};handleItemToggleChildMenu=t=>{this.itemToggleChildMenu.emit(t.detail)};handleItemCloseChildMenu=t=>{this.itemCloseChildMenu.emit(t.detail)};handleScroll=t=>{this.menuScrollTop=t.target.scrollTop};render(){return e(i,{key:"d18a70b94e3d6860dfac952b26f66e5b96cc6fa0",class:{mobile:this.isTouchDevice}},e("button",{key:"ee65221543fd8984f94d0a0b43beb7e1d28411f2",class:"split-main-button",tabIndex:0,onClick:this.handleButtonClick,disabled:this.mainButtonDisabled},this.buttonIcon&&e("kritzel-icon",{key:"1dbdd1e4db4087564464e9586e91b48f80b88aae",name:this.buttonIcon})),e("div",{key:"78b5e0589e7a3dd0592fb2c1cdaae8732f57b129",class:"split-divider"}),e("button",{key:"cfc5d53f06485a927608a99ea491e36b0e993fcc",ref:t=>this.splitMenuButtonRef=t,class:"split-menu-button",tabIndex:0,onClick:this.toggleMenu,disabled:this.menuButtonDisabled},e("kritzel-icon",{key:"0e141b614cbfc758f01d21908d846d16bdce586d",name:this.dropdownIcon})),e("kritzel-portal",{key:"b5def34dcfe5cbbf9641b1218af803937d7a77b6",anchor:this.anchorElement,offsetY:4,onClose:this.closeMenu},e("kritzel-menu",{key:"695f6c85a8ecd44f74ecf7752bf77d0caac69e6a",ref:t=>this.menuRef=t,items:this.items,onItemSelect:this.handleItemSelect,onItemSave:this.handleItemSave,onItemCancel:this.handleItemCancel,onItemToggleChildMenu:this.handleItemToggleChildMenu,onItemCloseChildMenu:this.handleItemCloseChildMenu,onClose:this.closeMenu,onScroll:this.handleScroll})))}};St.style=Mt;const jt=":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:focus-visible{outline:var(--kritzel-stroke-size-focus-outline, 2px auto #e3e3e3)}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";const Dt=class{constructor(e){t(this,e);this.sizeChange=s(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(t){this.selectedSize=t;this.sizeChange.emit(t)}render(){return e(i,{key:"001a0ef8408d19532b57a521929c0cba54e99c52"},this.sizes.map((t=>e("div",{tabIndex:0,class:{"size-container":true,selected:this.selectedSize===t},onClick:()=>this.handleSizeClick(t)},e("kritzel-color",{value:"#000000",size:t})))))}};Dt.style=jt;const Bt=":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";const Et=768;const Tt=class{constructor(e){t(this,e);this.tooltipClosed=s(this,"tooltipClosed")}get host(){return o(this)}isVisible=false;anchorElement;arrowSize=8;offsetY=24;tooltipClosed;positionX=0;arrowOffset="0px";isMobileView=window.innerWidth<Et;handleOutsideClick(t){if(!this.isVisible)return;const e=t.target;if(!this.host.contains(e)){this.tooltipClosed.emit()}}handleWindowResize(){this.isMobileView=window.innerWidth<Et;this.calculateAdjustedPosition()}async focusContent(){const t=Ct.getFocusableElements(this.host);if(t.length>0){t[0].focus()}}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.isMobileView=window.innerWidth<Et;this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot");const e=t?.assignedElements()||[];if(e.length>0){const t=e[0];t.focus()}}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect();const e=this.host.shadowRoot?.querySelector(".tooltip-content");if(!this.isMobileView){this.positionX=t.left+t.width/2;this.arrowOffset=`calc(${50}% - ${this.arrowSize}px)`}else{const i=e.getBoundingClientRect();this.positionX=t.left+t.width/2-i.width/2;this.arrowOffset=`${t.left+t.width/2-i.left-this.arrowSize}px`}}}render(){return e(i,{key:"8c3aeff60625f43f129afa70367cdb7a68a4b271",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:!this.isMobileView?`${this.positionX}px`:"50%",marginBottom:`${this.offsetY+this.arrowSize}px`}},e("div",{key:"b22b606c2a836c2c9bbe21c6b470754753ccb309",class:"tooltip-content",onClick:t=>t.stopPropagation()},e("slot",{key:"783403f4b5560012c9f6bd184a8c5eb26428e148"}),e("div",{key:"bb98400edc5c6e05fd4ed2a476a5821f93964b8e",class:"tooltip-arrow-wrapper",style:{position:"fixed",left:this.arrowOffset,bottom:`-${this.arrowSize*2}px`}},e("div",{key:"850a058d635113a7870f25fa288a6447394c53ed",class:"tooltip-arrow",style:{borderLeft:`${this.arrowSize}px solid transparent`,borderRight:`${this.arrowSize}px solid transparent`,borderTop:`${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,filter:"drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))"}}),e("div",{key:"bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06",class:"tooltip-arrow-rect",style:{position:"relative",width:`${this.arrowSize*2}px`,height:`${this.arrowSize}px`,backgroundColor:"var(--kritzel-controls-tooltip-background-color, #ffffff)",bottom:`${this.arrowSize*2}px`}}))))}};Tt.style=Bt;const Ot=":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";const At=class{constructor(e){t(this,e);this.undo=s(this,"undo");this.redo=s(this,"redo");this.delete=s(this,"delete")}undo;redo;delete;handleUndo(t){if(t.cancelable){t.preventDefault();t.stopPropagation();this.undo.emit()}}handleRedo(t){t.preventDefault();t.stopPropagation();this.redo.emit()}render(){return e(i,{key:"8109ccff01374c046d057021dfbcabdc632d829f"},e("button",{key:"0d51cfb401974edf1a2a8810d2244f8a977c347f",class:"utility-button",onClick:t=>this.handleUndo(t)},e("kritzel-icon",{key:"1d13ee6bbf060402e0b1349d41b728875314e2e5",name:"undo"})),e("button",{key:"f2fe59e7c99cb1550052088b507313cfaed72f29",class:"utility-button",onClick:t=>this.handleRedo(t)},e("kritzel-icon",{key:"74bf8c20f61144ab4abc5804dcd8f39917d2c966",name:"redo"})),e("div",{key:"0c9a942e786425b32e984fefdc97b1abb5077997",class:"utility-separator"}),e("button",{key:"44ca9340c2f73212332e9b3ed93ed93b8f7c6944",class:"utility-button"},e("kritzel-icon",{key:"7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03",name:"delete",onClick:()=>this.delete.emit()})))}};At.style=Ot;const Wt=":host{display:flex;flex-direction:column;z-index:1}";const $t=class{constructor(e){t(this,e);this.isWorkspaceManagerReady=s(this,"isWorkspaceManagerReady");this.workspaceChange=s(this,"workspaceChange")}get host(){return o(this)}activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(t){if(t.ctrlKey){t.preventDefault()}}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((t=>t!=null)).sort(((t,e)=>e.createdAt.getTime()-t.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine();this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");this.kritzelEngineRef=this.host.parentElement.querySelector("kritzel-engine");if(!this.kritzelEngineRef){throw new Error("kritzel-engine not found in parent element.")}}async select(t,e){if(this.editingItemId){return}if(t.action){t.action(t,e);return}this.workspaceChange.emit(t.value)}async add(){await this.splitButtonRef.open();this.newWorkspace=new f(C.generateUUID(),"New Workspace");this.editingItemId=this.newWorkspace.id}edit(t){this.openChildMenuItem=null;this.childMenuAnchor=null;requestAnimationFrame((()=>{this.editingItemId=t.id}))}async save(t){if(this.newWorkspace){this.newWorkspace.name=t.label;await this.kritzelEngineRef.createWorkspace(this.newWorkspace);this.workspaceChange.emit(this.newWorkspace)}else{const e=t.value;e.name=t.label;await this.kritzelEngineRef.updateWorkspace(e)}this.editingItemId=null;this.newWorkspace=null}cancel(){this.newWorkspace=null;this.editingItemId=null}async delete(t){this.openChildMenuItem=null;this.childMenuAnchor=null;await this.kritzelEngineRef.deleteWorkspace(t.value);if(t.value.id===this.activeWorkspace?.id){this.activeWorkspace=this.sortedWorkspaces.find((e=>e.id!==t.value.id))||null;this.workspaceChange.emit(this.activeWorkspace)}await this.splitButtonRef.focusMenu()}toggleChildMenu(t,e){this.openChildMenuItem=t;this.childMenuAnchor=e}closeChildMenu(){this.openChildMenuItem=null;this.childMenuAnchor=null}handleMenuOpen(){this.kritzelEngineRef.disable()}handleMenuClose(){this.cancel();this.closeChildMenu();this.kritzelEngineRef.enable()}render(){const t=this.sortedWorkspaces.sort(((t,e)=>e.createdAt.getTime()-t.createdAt.getTime())).filter((t=>t!==null)).map((t=>({id:t.id,label:t.name,value:t,isEditing:this.editingItemId===t.id,isSelected:this.activeWorkspace?.id===t.id,isNewItem:this.newWorkspace?.id===t.id,isChildMenuOpen:this.openChildMenuItem?.id===t.id,childMenuAnchor:this.openChildMenuItem?.id===t.id?this.childMenuAnchor:null,children:[{id:`${t.id}-rename`,label:"Rename",value:"rename",action:(t,e)=>this.edit(e)},{id:`${t.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(t,e)=>this.delete(e)}]})));return e(i,null,e("kritzel-split-button",{ref:t=>this.splitButtonRef=t,items:t,mainButtonDisabled:this.editingItemId!=null,onMainButtonClick:()=>this.add(),onItemSelect:t=>this.select(t.detail.item,t.detail.parent),onItemToggleChildMenu:t=>this.toggleChildMenu(t.detail.item,t.detail.childMenuAnchor),onItemSave:t=>this.save(t.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()}))}};$t.style=Wt;export{E as kritzel_color,O as kritzel_color_palette,W as kritzel_context_menu,R as kritzel_control_brush_config,P as kritzel_control_text_config,Y as kritzel_controls,L as kritzel_cursor_trail,H as kritzel_dropdown,Z as kritzel_editor,dt as kritzel_engine,ft as kritzel_font,bt as kritzel_font_family,kt as kritzel_font_size,vt as kritzel_icon,xt as kritzel_menu,zt as kritzel_menu_item,It as kritzel_portal,St as kritzel_split_button,Dt as kritzel_stroke_size,Tt as kritzel_tooltip,At as kritzel_utility_panel,$t as kritzel_workspace_manager};
2
- //# sourceMappingURL=p-7e666d4b.entry.js.map
1
+ import{r as t,h as e,H as i,c as s,g as o}from"./p-oCOlsFCN.js";import{K as n,a as r,b as a,c as l,D as c,d as h,e as d,f as u,g as f,h as p,i as b,j as g,k,l as y,B as v,R as w,A as x,m,n as z,O as C,o as I,p as M,q as S,U as j,r as D}from"./p-IhpPa9g4.js";const B=":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";const E=class{constructor(e){t(this,e)}value;size=24;isLightColor(t){if(!t)return false;let e=0,i=0,s=0;let o=t.startsWith("#")?t.slice(1):t;if(o.length===3){e=parseInt(o[0]+o[0],16);i=parseInt(o[1]+o[1],16);s=parseInt(o[2]+o[2],16)}else if(o.length===6){e=parseInt(o.substring(0,2),16);i=parseInt(o.substring(2,4),16);s=parseInt(o.substring(4,6),16)}else{return false}if(isNaN(e)||isNaN(i)||isNaN(s)){return false}const n=.299*e+.587*i+.114*s;return n>220}render(){const t=this.isLightColor(this.value);return e(i,{key:"198dba41e1600d76faace18de78191d2b7a551ec"},e("div",{key:"ee690cffb7925e09cb2c51022eec607247a4849f",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},e("div",{key:"66cc8df8fabd008db8c00942994875e3e8d722ce",class:{"color-circle":true,white:t},style:{backgroundColor:this.value,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}};E.style=B;const T=":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-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}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";const O=class{constructor(e){t(this,e);this.colorChange=s(this,"colorChange")}colors=[];selectedColor=null;isExpanded=false;isOpaque=false;colorChange;handleColorClick(t){this.selectedColor=t;this.colorChange.emit(t)}calculateHeight(){const t=6;const e=32;const i=8;const s=Math.ceil(this.colors.length/t);return`${s*e+(s-1)*i}px`}render(){const t=this.isExpanded?this.colors:this.colors.slice(0,6);const s=this.isExpanded?this.calculateHeight():"32px";return e(i,{key:"2ead7cd530ce181856e5f582f086a22a1fe69390"},e("div",{key:"fcc75b267f36e271d50615bfde42a29c28aa2536",class:{"color-grid":true,expanded:this.isExpanded},style:{height:s}},t.map((t=>e("div",{tabIndex:0,class:{"color-container":true,selected:this.selectedColor===t},onClick:()=>this.handleColorClick(t)},e("kritzel-color",{value:t}))))))}};O.style=T;const A=":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: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);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";const W=class{constructor(e){t(this,e);this.actionSelected=s(this,"actionSelected");this.close=s(this,"close")}get host(){return o(this)}items;onItemsChanged(){this.updateMenuItems()}objects;actionSelected;close;processedItems=[];handleOutsideClick(t){const e=t.composedPath();if(!e.includes(this.host)){this.close.emit()}}componentWillLoad(){this.updateMenuItems()}handleItemClick(t,e){if(!e){this.actionSelected.emit(t)}}async updateMenuItems(){const t=[];for(const e of this.items){const i=await this.evaluateProperty(e.visible,true);if(i){const i=await this.evaluateProperty(e.disabled,false);t.push({item:e,isDisabled:i})}}this.processedItems=t}async evaluateProperty(t,e){if(typeof t==="boolean"){return t}if(typeof t==="function"){return await Promise.resolve(t(null,this.objects))}return e}render(){return e(i,{key:"908711e45cb4ea41f25c4f66a9d3b03c847f886e"},e("div",{key:"7dcb6e5654ecafebc1fc1a2efb9fa1b8678236c4",class:"menu-container"},this.processedItems.map((({item:t,isDisabled:i},s)=>e("button",{key:`${t.label}-${s}`,class:{"menu-item":true,disabled:i},onClick:()=>this.handleItemClick(t,i),disabled:i},t.icon&&e("kritzel-icon",{name:t.icon,size:16}),e("span",{class:"label"},t.label))))))}static get watchers(){return{items:["onItemsChanged"]}}};W.style=A;const $=":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";const R=class{constructor(e){t(this,e);this.toolChange=s(this,"toolChange")}tool;handleToolChange(t){this.palette=t.palettes[t.type]}isExpanded=false;toolChange;palette=[];componentWillLoad(){this.palette=this.tool.palettes[this.tool.type]}handleToggleExpand(){this.isExpanded=!this.isExpanded}handleTypeChange(t){this.palette=this.tool.palettes[t.detail];this.tool.type=t.detail;this.tool.color=this.palette[0];this.toolChange.emit(this.tool)}handleColorChange(t){this.tool.color=t.detail;this.toolChange.emit(this.tool)}handleSizeChange(t){this.tool.size=t.detail;this.toolChange.emit(this.tool)}render(){return e(i,{key:"8fe8c0564f491121c0c44c6ff4083034f92dbb67"},e("div",{key:"3e8a69b827785976768bfc1e809126bee7c48c62",style:{display:"flex",flexDirection:"row",alignItems:this.isExpanded?"flex-start":"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},e("kritzel-color-palette",{key:"c9056f81cf47d81fef0a0f5743000dcd6633258a",colors:this.palette,selectedColor:this.tool.color,isExpanded:this.isExpanded,isOpaque:true,onColorChange:t=>this.handleColorChange(t)}),e("button",{key:"2f307264b80a732d976edeb025d509bc1164606b",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand",style:this.palette.length>6?{visibillity:"visible"}:{visibility:"hidden"}},e("kritzel-icon",{key:"08133ba0a23353b2bb3f87c685a7a0798b8dd16c",name:this.isExpanded?"chevron-up":"chevron-down"}))),e("kritzel-stroke-size",{key:"3de25cc80029ffdfdc173c4c79e937a7dc329743",selectedSize:this.tool.size,onSizeChange:t=>this.handleSizeChange(t)}))}static get watchers(){return{tool:["handleToolChange"]}}};R.style=$;const F=":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, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";const P=class{constructor(e){t(this,e);this.toolChange=s(this,"toolChange")}tool;isExpanded=false;toolChange;handleToggleExpand(){this.isExpanded=!this.isExpanded}handleFamilyChange(t){this.tool.fontFamily=t.detail;this.toolChange.emit(this.tool)}handleColorChange(t){this.tool.fontColor=t.detail;this.toolChange.emit(this.tool)}handleSizeChange(t){this.tool.fontSize=t.detail;this.toolChange.emit(this.tool)}render(){return e(i,{key:"3695b187943af25566885d63257ae3de9f405ea5"},e("div",{key:"7bb146ae3c188478ba17f18f70fd170ce3536308",style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},e("kritzel-font-family",{key:"87f4c5ac2e2a4cfea216b1b828faad231438b9ec",selectedFontFamily:this.tool.fontFamily,onFontFamilyChange:t=>this.handleFamilyChange(t)}),e("button",{key:"2e73aaf7da659b9e069c247cc762f68394212293",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand"},e("kritzel-icon",{key:"785b664697ba266432c535ea26e0665f8d8d657f",name:this.isExpanded?"chevron-up":"chevron-down"}))),e("kritzel-color-palette",{key:"ed2517a39d254b77f45154914b3ce6a934f66c33",colors:this.tool.palette,selectedColor:this.tool.fontColor,isExpanded:this.isExpanded,onColorChange:t=>this.handleColorChange(t)}),e("kritzel-font-size",{key:"9b25c9607fa69c991e769852e3e3e378e48387bd",selectedSize:this.tool.fontSize,fontFamily:this.tool.fontFamily,onSizeChange:t=>this.handleSizeChange(t)}))}};P.style=F;class V{static isTouchDevice(){return window.matchMedia("(any-pointer: coarse)").matches}static isAndroid(){return/android/i.test(navigator.userAgent)}static isIOS(){return/iPad|iPhone|iPod/.test(navigator.userAgent)}static detectOS(){if(this.isIOS()){return"iOS"}else if(this.isAndroid()){return"Android"}else{return"Other"}}static isFirefox(){return/firefox/i.test(navigator.userAgent)}}const _=":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;outline:none;background:none;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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.color-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;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: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{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";const Y=class{constructor(e){t(this,e);this.isControlsReady=s(this,"isControlsReady")}get host(){return o(this)}controls=[];activeControl=null;isUtilityPanelVisible=true;isControlsReady;firstConfig=null;isTooltipVisible=false;isTouchDevice=V.isTouchDevice();handleDocumentClick(t){const e=t.target;if(!this.kritzelEngine||e.closest(".kritzel-tooltip")){return}this.isTooltipVisible=false}handleKeyDown(t){if(t.key==="Escape"){t.preventDefault();this.closeTooltip();this.kritzelEngine?.enable()}}async handleActiveToolChange(t){this.activeControl=this.controls.find((e=>e.tool===t.detail))||null}async closeTooltip(){this.isTooltipVisible=false}kritzelEngine=null;tooltipRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}async componentWillLoad(){await this.initializeEngine();await this.initializeTools();this.isControlsReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine");if(!this.kritzelEngine){throw new Error("kritzel-engine not found in parent element.")}}async initializeTools(){for(const t of this.controls){if(t.type==="tool"&&t.tool){t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)}if(t.type==="tool"&&t.isDefault&&t.tool){await this.kritzelEngine.changeActiveTool(t.tool);this.activeControl=t}if(t.type==="config"){if(this.firstConfig===null){this.firstConfig=t}else{console.warn("Only one config control is allowed. The first one will be used.")}}}}async handleControlClick(t){this.activeControl=t;if(this.activeControl.type==="tool"){await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}}handleConfigClick(t){t.stopPropagation();this.isTooltipVisible=!this.isTooltipVisible;if(this.isTooltipVisible){this.kritzelEngine?.disable()}else{this.kritzelEngine?.enable()}setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail};await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=false;this.kritzelEngine?.enable()}render(){const t=this.activeControl?.config===undefined||this.activeControl?.config===null;return e(i,{key:"a463310d88265b71097f838bf775abdcabc99225",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&e("kritzel-utility-panel",{key:"267e9c26b41a52c655209dbaa8c85cbd72323577",style:{position:"absolute",bottom:"56px",left:"12px"},onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),e("div",{key:"c55773245c925e1b972f3e83cb4d8f1c93ebe995",class:"kritzel-controls"},this.controls.map((i=>{if(i.type==="tool"){return e("button",{class:{"kritzel-control":true,selected:this.activeControl?.name===i?.name},key:i.name,onClick:t=>this.handleControlClick?.(i)},e("kritzel-icon",{name:i.icon}))}if(i.type==="divider"){return e("div",{class:"kritzel-divider",key:i.name})}if(i.type==="config"&&i.name===this.firstConfig?.name&&this.activeControl){return e("div",{class:"kritzel-config-container",key:i.name},e("kritzel-tooltip",{ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},e("div",{style:{width:"294px",height:"100%"}},this.activeControl.name==="brush"&&e("kritzel-control-brush-config",{tool:this.activeToolAsBrushTool,onToolChange:t=>this.handleToolChange?.(t)}),this.activeControl.name==="text"&&e("kritzel-control-text-config",{tool:this.activeToolAsTextTool,onToolChange:t=>this.handleToolChange?.(t)}))),e("div",{tabIndex:0,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{if(t.key==="Enter"){this.handleConfigClick?.(t)}},style:{cursor:this.activeControl.config?"pointer":"default",pointerEvents:t?"none":"auto"}},this.activeControl.tool instanceof n&&e("div",{class:"color-container"},e("kritzel-color",{value:this.activeToolAsBrushTool?.color,size:this.activeToolAsBrushTool?.size,style:{borderRadius:"50%",border:"none"}})),this.activeControl.tool instanceof r&&e("div",{class:"font-container"},e("kritzel-font",{fontFamily:this.activeToolAsTextTool?.fontFamily,size:this.activeToolAsTextTool?.fontSize,color:this.activeToolAsTextTool?.fontColor})),t&&e("div",{class:"no-config"})))}}))))}static get assetsDirs(){return["../assets"]}};Y.style=_;const X=":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}";const L=class{constructor(e){t(this,e)}core;cursorTrailPoints=[];isLeftButtonDown=false;handleMouseDown(t){if(t.pointerType==="mouse"){if(t.button===a.Left){this.isLeftButtonDown=true;this.cursorTrailPoints=[]}}if(t.pointerType==="touch"){if(this.core.store.state.pointers.size===1){this.isLeftButtonDown=true;this.cursorTrailPoints=[]}}}handlePointerMove(t){if(!this.isLeftButtonDown){return}const e={x:t.clientX,y:t.clientY,timestamp:Date.now()};const i=[e,...this.cursorTrailPoints];if(i.length>this.MAX_TRAIL_POINTS){this.cursorTrailPoints=i.slice(0,this.MAX_TRAIL_POINTS)}else{this.cursorTrailPoints=i}}handlePointerUp(t){if(t.pointerType==="mouse"){if(t.button===a.Left){this.isLeftButtonDown=false;this.cursorTrailPoints=[]}}if(t.pointerType==="touch"){if(this.core.store.state.pointers.size===0){this.isLeftButtonDown=false;this.cursorTrailPoints=[]}}}trailCleanupIntervalId;TRAIL_DURATION_MS=100;MAX_TRAIL_POINTS=50;componentDidLoad(){this.trailCleanupIntervalId=window.setInterval((()=>{const t=Date.now();const e=this.cursorTrailPoints.filter((e=>t-e.timestamp<this.TRAIL_DURATION_MS));if(e.length!==this.cursorTrailPoints.length){this.cursorTrailPoints=e}}),50)}disconnectedCallback(){if(this.trailCleanupIntervalId){window.clearInterval(this.trailCleanupIntervalId)}}render(){return e(i,{key:"87003b14680b3cbca302e7b31ff57e74cc774e25"},this.cursorTrailPoints.length>1&&e("svg",{key:"aa6460089c9f3157d2dea9396405b14ab8cc1710",class:"cursor-trail-svg",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:"0",top:"0",width:"100%",height:"100%",pointerEvents:"none",opacity:"var(--kritzel-cursor-trail-opacity, 0.6)",zIndex:"9000"}},this.cursorTrailPoints.slice(1).map(((t,i)=>{const s=this.cursorTrailPoints[i];const o=Date.now();const n=o-t.timestamp;const r=Math.max(0,Math.min(1,n/this.TRAIL_DURATION_MS));if(r>=1)return null;const a=Math.max(2,15*(1-r));return e("line",{key:`trail-segment-${t.timestamp}`,x1:s.x.toString(),y1:s.y.toString(),x2:t.x.toString(),y2:t.y.toString(),stroke:"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))","stroke-width":a.toString(),"stroke-linecap":"round"})}))))}};L.style=X;const N=':host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:pointer;outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>\');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}';const H=class{constructor(e){t(this,e);this.valueChanged=s(this,"valueChanged")}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,true)}value;externalValueChanged(t){if(t!==this.internalValue){this.updateInternalValue(t,false)}}width;selectStyles={};internalValue;hasSuffixContent=false;hasPrefixContent=false;valueChanged;suffixSlotElement;prefixSlotElement;componentWillLoad(){this.updateInternalValue(this.value,false);this.evaluateSuffixContent();this.evaluatePrefixContent()}updateInternalValue(t,e){let i=t;if(this.options&&this.options.length>0){const t=this.options.some((t=>t.value===i));if(!i||!t){i=this.options[0].value}}else{i=undefined}if(this.internalValue!==i){this.internalValue=i;if(e||t!==i&&t!==undefined){this.valueChanged.emit(this.internalValue)}}}handleSelectChange=t=>{const e=t.target.value;if(this.internalValue!==e){this.internalValue=e;this.valueChanged.emit(this.internalValue)}};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const t=this.suffixSlotElement.assignedNodes({flatten:true}).length>0;if(this.hasSuffixContent!==t){this.hasSuffixContent=t}}else{if(this.hasSuffixContent!==false){this.hasSuffixContent=false}}};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const t=this.prefixSlotElement.assignedNodes({flatten:true}).length>0;if(this.hasPrefixContent!==t){this.hasPrefixContent=t}}else{if(this.hasPrefixContent!==false){this.hasPrefixContent=false}}};render(){const t={"custom-select":true,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent};return e(i,{key:"f24911715685ced571843ba7be6631248c8519b7"},e("div",{key:"520fdb74afdef8bd5228f76074e51981f44b910d",class:"dropdown-wrapper"},e("slot",{key:"cf6628437946b57ad0b27c066639e0b64b5a28f8",name:"prefix",ref:t=>this.prefixSlotElement=t,onSlotchange:this.evaluatePrefixContent}),e("select",{key:"3203ccd5b9c8b84e8f41bddfcb07786e879f0035",class:t,style:{...this.selectStyles,width:this.width},onInput:this.handleSelectChange},this.options.map((t=>e("option",{value:t.value,style:t.style,selected:t.value===this.internalValue},t.label)))),e("slot",{key:"d0abb52e082db81860c09d2c48b7c065adb406f3",name:"suffix",ref:t=>this.suffixSlotElement=t,onSlotchange:this.evaluateSuffixContent})))}static get watchers(){return{options:["optionsChanged"],value:["externalValueChanged"]}}};H.style=N;class K{static registry=new Map;static register(t,e){if(this.registry.has(t)){console.warn(`[IconRegistry] Icon "${t}" is already registered. It will be overwritten.`)}this.registry.set(t,e)}static get(t){return this.registry.get(t)}static registerIcons(t){for(const e in t){if(Object.prototype.hasOwnProperty.call(t,e)){this.register(e,t[e])}}}static has(t){return this.registry.has(t)}}K.registerIcons({cursor:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',pen:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',highlighter:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',eraser:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',type:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',image:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',"chevron-down":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',"chevron-up":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',copy:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',paste:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',cut:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',delete:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',"bring-to-front":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',"send-to-back":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',"select-all":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',download:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',undo:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',redo:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',plus:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',"ellipsis-vertical":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',x:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',check:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'});const U=1e3;const q=1e-4;const G="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;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";const Z=class{constructor(e){t(this,e);this.isReady=s(this,"isReady")}get host(){return o(this)}scaleMax=U;scaleMin=q;controls=[{name:"selection",type:"tool",isDefault:true,tool:l,icon:"cursor"},{name:"brush",type:"tool",tool:n,icon:"pen",config:c},{name:"eraser",type:"tool",tool:h,icon:"eraser"},{name:"text",type:"tool",tool:r,icon:"type",config:d},{name:"image",type:"tool",tool:u,icon:"image"},{name:"divider",type:"divider"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>(await this.engineRef.getCopiedObjects()).length===0,action:t=>this.engineRef.paste(t.x,t.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Edit",icon:"pen",visible:(t,e)=>e.length===1&&e[0].isEditable,action:(t,e)=>{if(e.length===1){const t=e[0];if(t.isEditable){t.edit()}}}},{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>(await this.engineRef.getCopiedObjects()).length===0,action:(t,e)=>this.engineRef.paste(t.x,t.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()}];customSvgIcons={};isControlsVisible=true;isUtilityPanelVisible=true;isReady;isEngineReady=false;isControlsReady=false;isWorkspaceManagerReady=false;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=false;onIsEngineReady(t){if(t&&this.isControlsReady){this.checkIsReady()}}onIsControlsReady(t){if(t&&this.isEngineReady){this.checkIsReady()}}handleTouchStart(t){if(t.cancelable){t.preventDefault()}}async getObjectById(t){return this.engineRef.getObjectById(t)}async addObject(t){return this.engineRef.addObject(t)}async updateObject(t,e){return this.engineRef.updateObject(t,e)}async removeObject(t){return this.engineRef.removeObject(t)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(t){return this.engineRef.selectObjects(t)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(t){return this.engineRef.centerObjectInViewport(t)}async createWorkspace(t,e){const i=new f(`workspace-${Date.now()}`,t,e);return this.engineRef.createWorkspace(i)}async updateWorkspace(t){return this.engineRef.updateWorkspace(t)}async deleteWorkspace(t){return this.engineRef.deleteWorkspace(t)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons();this.listenForMobileKeyboard();this.setOsSpecificCssVariables()}async checkIsReady(){await customElements.whenDefined("kritzel-editor");await customElements.whenDefined("kritzel-workspace-manager");await customElements.whenDefined("kritzel-controls");await customElements.whenDefined("kritzel-engine");if(!this.isEngineReady||!this.isControlsReady||!this.isWorkspaceManagerReady){return}this.isReady.emit(this.host)}onEngineReady(t){this.isEngineReady=true;this.activeWorkspace=t.detail.activeWorkspace;this.workspaces=t.detail.workspaces}registerCustomSvgIcons(){for(const[t,e]of Object.entries(this.customSvgIcons)){K.register(t,e)}}listenForMobileKeyboard(){p.onKeyboardVisibleChanged((t=>{this.isVirtualKeyboardOpen=t}))}setOsSpecificCssVariables(){const t=V.detectOS();switch(t){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","14px");this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)");this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)");this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px");this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px");this.host.style.setProperty("--kritzel-editor-controls-bottom","14px");break}}render(){return e(i,{key:"17c4e1ce489a5cd359972e67105019ad64703b19"},e("kritzel-workspace-manager",{key:"963f62afe326d33eccdabda804bc3e260aafc306",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:t=>this.activeWorkspace=t.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=true}),e("kritzel-engine",{key:"f60f67d06ce73f5f86716fc0ec68408c71100d82",ref:t=>this.engineRef=t,workspace:this.activeWorkspace,scaleMax:this.scaleMax,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:t=>this.onEngineReady(t),onWorkspacesChange:t=>this.workspaces=t.detail}),e("kritzel-controls",{key:"1dc25c1bbb50978cfac3cdaa2d3ae0a32ca7c4f7",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:t=>this.controlsRef=t,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,onIsControlsReady:()=>this.isControlsReady=true}))}static get watchers(){return{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"]}}};Z.style=G;class J{_core;initialTouchDistance=0;startX=0;startY=0;constructor(t,e){this._core=t;this._core.store.setState("host",e);this._core.store.setState("viewportWidth",e.clientWidth);this._core.store.setState("viewportHeight",e.clientHeight);this._core.store.setState("startX",0);this._core.store.setState("startY",0);this._core.store.setState("translateX",0);this._core.store.setState("translateY",0)}handleResize(){this._core.store.setState("viewportWidth",this._core.store.state.host.clientWidth);this._core.store.setState("viewportHeight",this._core.store.state.host.clientHeight);this._core.store.setState("hasViewportChanged",true);this._core.rerender()}handlePointerDown(t){if(t.pointerType==="mouse"){const e=t.clientX-this._core.store.offsetX;const i=t.clientY-this._core.store.offsetY;if(t.button===a.Right){this._core.store.setState("isPanning",true);this._core.store.setState("startX",e);this._core.store.setState("startY",i)}}if(t.pointerType==="touch"){const t=Array.from(this._core.store.state.pointers.values());if(t.length===2){this._core.store.setState("currentPath",null);this._core.store.setState("isScaling",true);const e=t[0].clientX-this._core.store.offsetX;const i=t[0].clientY-this._core.store.offsetY;const s=t[1].clientX-this._core.store.offsetX;const o=t[1].clientY-this._core.store.offsetY;this.initialTouchDistance=Math.sqrt(Math.pow(e-s,2)+Math.pow(i-o,2));this.startX=(e+s)/2;this.startY=(i+o)/2;this._core.rerender()}}}handlePointerMove(t){if(t.pointerType==="mouse"){const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);if(this._core.store.state.isPanning){const t=i-this._core.store.state.startX;const e=s-this._core.store.state.startY;this._core.store.setState("translateX",this._core.store.state.translateX+t);this._core.store.setState("translateY",this._core.store.state.translateY+e);this._core.store.setState("startX",i);this._core.store.setState("startY",s);this._core.store.setState("hasViewportChanged",true);this._core.store.setState("skipContextMenu",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}if(t.pointerType==="touch"){const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);const o=Array.from(this._core.store.state.pointers.values());if(o.length===2){const t=o[0].clientX-this._core.store.offsetX;const e=o[0].clientY-this._core.store.offsetY;const i=o[1].clientX-this._core.store.offsetX;const s=o[1].clientY-this._core.store.offsetY;const n=Math.sqrt(Math.pow(t-i,2)+Math.pow(e-s,2));const r=(t+i)/2;const a=(e+s)/2;const l=n/this.initialTouchDistance;const c=this._core.store.state.scale*l;if(c>this._core.store.state.scaleMax||c<this._core.store.state.scaleMin){this._core.store.setState("translateX",this._core.store.state.translateX+r-this.startX);this._core.store.setState("translateY",this._core.store.state.translateY+a-this.startY)}else{const t=(r-this._core.store.state.translateX)*(l-1);const e=(a-this._core.store.state.translateY)*(l-1);this._core.store.setState("translateX",this._core.store.state.translateX+r-this.startX-t);this._core.store.setState("translateY",this._core.store.state.translateY+a-this.startY-e);this._core.store.setState("scale",c);this.initialTouchDistance=n}this.startX=r;this.startY=a;this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}}handlePointerUp(t){if(t.pointerType==="mouse"){if(this._core.store.state.isPanning){this._core.store.setState("isPanning",false);this._core.rerender()}}if(t.pointerType==="touch"){this._core.store.setState("isScaling",false);this._core.rerender()}}handleWheel(t){t.preventDefault();if(t.ctrlKey===true&&b.isMainMouseWheel(t)){this.handleZoom(t)}if(!t.ctrlKey){this.handlePan(t)}}handleZoom(t){this._core.store.setState("isScaling",true);const e=this._core.store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;this._core.store.setState("pointerX",(i-this._core.store.state.translateX)/this._core.store.state.scale);this._core.store.setState("pointerY",(s-this._core.store.state.translateY)/this._core.store.state.scale);const o=t.deltaY>0?-this._core.store.state.scaleStep*this._core.store.state.scale:this._core.store.state.scaleStep*this._core.store.state.scale;const n=Math.min(this._core.store.state.scaleMax,Math.max(this._core.store.state.scaleMin,this._core.store.state.scale+o));const r=n/this._core.store.state.scale;const a=(i-this._core.store.state.translateX)*(r-1);const l=(s-this._core.store.state.translateY)*(r-1);this._core.store.setState("scale",n);this._core.store.setState("translateX",this._core.store.state.translateX-a);this._core.store.setState("translateY",this._core.store.state.translateY-l);this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale);setTimeout((()=>{this._core.store.setState("isScaling",false)}),300)}handlePan(t){const e=.8;this._core.store.setState("translateX",this._core.store.state.translateX-t.deltaX*e);this._core.store.setState("translateY",this._core.store.state.translateY-t.deltaY*e);this._core.store.setState("hasViewportChanged",true);this._core.rerender();this._core.updateWorkspaceViewport(this._core.store.state.translateX,this._core.store.state.translateY,this._core.store.state.scale)}}class Q extends g{shortcuts=[{key:"Escape",condition:t=>!!t.store.state.selectionGroup,action:t=>t.clearSelection()},{key:"Delete",condition:t=>!!t.store.state.selectionGroup,action:t=>t.delete()},{key:"z",ctrl:true,action:t=>t.history.undo()},{key:"y",ctrl:true,action:t=>t.history.redo()},{key:"s",ctrl:true,action:()=>this.switchTool("selection")},{key:"b",ctrl:true,action:()=>this.switchTool("brush")},{key:"e",ctrl:true,action:()=>this.switchTool("eraser")},{key:"i",ctrl:true,action:()=>this.switchTool("image")},{key:"x",ctrl:true,action:()=>this.switchTool("text")},{key:"c",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>{t.copy();t.rerender()}},{key:"v",ctrl:true,condition:t=>!!t.store.state.copiedObjects&&!t.store.state.activeText,action:t=>t.paste()},{key:"a",ctrl:true,condition:t=>!!t.store.state.activeText,action:t=>t.store.state.activeText.selectAll()},{key:"v",ctrl:true,condition:t=>!!t.store.state.activeText,action:t=>t.store.state.activeText.insertFromClipboard()},{key:"+",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.bringForward()},{key:"-",ctrl:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.sendBackward()},{key:"*",shift:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.bringToFront()},{key:"_",shift:true,condition:t=>!!t.store.state.selectionGroup,action:t=>t.sendToBack()}];constructor(t){super(t)}switchTool(t){const e=k.getTool(t);this._core.store.setState("activeTool",e);this._core.deselectAllObjects();e.onActivate()}handleKeyDown(t){this._core.store.setState("isCtrlKeyPressed",t.ctrlKey);const e=this.shortcuts.find((e=>e.key===t.key&&!!e.ctrl===t.ctrlKey&&!!e.shift===t.shiftKey&&(!e.condition||e.condition(this._core))));if(e){t.preventDefault();e.action(this._core)}}handleKeyUp(t){this._core.store.setState("isCtrlKeyPressed",t.ctrlKey)}}class tt extends g{globalContextMenuItems=[];objectContextMenuItems=[];constructor(t,e,i){super(t);this.globalContextMenuItems=e;this.objectContextMenuItems=i}handleContextMenu(t){if(!(this._core.store.state.activeTool instanceof l)){return}if(this._core.store.state.skipContextMenu){this._core.store.setState("skipContextMenu",false);return}const e=this._core.getObjectFromPointerEvent(t,".object");if(e&&!(e instanceof y)){const t=y.create(this._core);t.addOrRemove(e);t.isSelected=true;t.rotation=e.rotation;this._core.store.setState("isSelecting",false);const i=new v(this._core,this,[new w(this._core,this._core.store.state.selectionGroup),new x(this._core,this,t)]);this._core.history.executeCommand(i)}this._core.store.setState("contextMenuItems",this._core.store.state.selectionGroup?this.objectContextMenuItems:this.globalContextMenuItems);let i=t.clientX-this._core.store.offsetX;let s=t.clientY-this._core.store.offsetY;const o=150;const n=200;const r=10;if(i+o>window.innerWidth-r){i=window.innerWidth-o-r}if(s+n>window.innerHeight-r){s=window.innerHeight-n-r}i=Math.max(r,i);s=Math.max(r,s);this._core.store.setState("contextMenuX",i);this._core.store.setState("contextMenuY",s);this._core.store.setState("isContextMenuVisible",true);this._core.store.setState("isEnabled",false);this._core.rerender()}}class et{static isInstanceOf(t,e){return!!t&&t.__class__===e}}const it={activeWorkspace:null,activeTool:null,activeText:null,currentPath:null,copiedObjects:null,objectsMap:null,selectionBox:null,selectionGroup:null,resizeHandleType:null,hasViewportChanged:false,isReady:false,isEnabled:true,isScaling:false,isPanning:false,isSelecting:false,isResizing:false,isResizeHandleSelected:false,isRotating:false,isRotationHandleSelected:false,isDragging:false,isDrawing:false,isErasing:false,isWriting:false,isCtrlKeyPressed:false,isContextMenuVisible:false,contextMenuItems:[],contextMenuX:0,contextMenuY:0,skipContextMenu:false,debugInfo:{showObjectInfo:false,showViewportInfo:false,logCommands:false,logDatabase:false},host:null,pointerX:0,pointerY:0,scale:1,scaleMax:1,scaleMin:1,scaleStep:.075,startX:0,startY:0,translateX:0,translateXMax:400,translateXMin:0,translateY:0,translateYMax:400,translateYMin:0,viewportWidth:0,viewportHeight:0,historyBufferSize:1e3,longTouchTimeout:null,longTouchDelay:300,pointers:new Map,workspaces:[]};class st{db=null;dbName;dbVersion;isLoggingEnabled;constructor(t,e,i=false){this.dbName=t;this.dbVersion=e;this.isLoggingEnabled=i}async open(t){return new Promise(((e,i)=>{if(this.db){e();return}if(this.isLoggingEnabled){console.info(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`)}const s=indexedDB.open(this.dbName,this.dbVersion);s.onerror=()=>{console.error("IndexedDB error:",s.error);i(s.error)};s.onsuccess=()=>{this.db=s.result;if(this.isLoggingEnabled){console.info(`[IndexedDB] Database opened successfully.`)}e()};s.onupgradeneeded=e=>{if(this.isLoggingEnabled){console.info(`[IndexedDB] Upgrade needed for database: ${this.dbName}`)}const i=e.target.result;t.forEach((t=>{if(!i.objectStoreNames.contains(t.name)){if(this.isLoggingEnabled){console.info(`[IndexedDB] Creating store: ${t.name}`)}const e=i.createObjectStore(t.name,t.options);if(t.indices){t.indices.forEach((i=>{if(this.isLoggingEnabled){console.info(`[IndexedDB] Creating index: ${i.name} on store: ${t.name}`)}e.createIndex(i.name,i.keyPath,i.options)}))}}}))}}))}close(){if(this.db){if(this.isLoggingEnabled){console.info(`[IndexedDB] Closing database: ${this.dbName}`)}this.db.close();this.db=null}}async add(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Add:",{storeName:t,item:e})}if(e.serialize===undefined){throw new Error("Item does not implement KritzelSerializable interface.")}const i=e.serialize();return this.executeTransaction(t,"readwrite",(t=>t.add(i)))}async get(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Get:",{storeName:t,key:e})}return this.executeTransaction(t,"readonly",(t=>t.get(e)))}async getAll(t){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAll:",{storeName:t})}return this.executeTransaction(t,"readonly",(t=>t.getAll()))}async update(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Update:",{storeName:t,item:e})}if(e.serialize===undefined){throw new Error("Item does not implement KritzelSerializable interface.")}const i=e.serialize();return this.executeTransaction(t,"readwrite",(t=>t.put(i)))}async delete(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] Delete:",{storeName:t,key:e})}return this.executeTransaction(t,"readwrite",(t=>t.delete(e)))}async deleteByRange(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] DeleteByRange:",{storeName:t,range:e})}return this.executeTransaction(t,"readwrite",(t=>t.delete(e)))}async getAllByRange(t,e){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAllByRange:",{storeName:t,range:e})}return this.executeTransaction(t,"readonly",(t=>t.getAll(e)))}async getAllByIndex(t,e,i){if(this.isLoggingEnabled){console.info("[IndexedDB] GetAllByIndex:",{storeName:t,indexName:e,query:i})}return this.executeTransaction(t,"readonly",(t=>{const s=t.index(e);return s.getAll(i)}))}async executeTransaction(t,e,i){if(!this.db){throw new Error("Database is not open.")}return new Promise(((s,o)=>{const n=this.db.transaction(t,e);const r=n.objectStore(t);const a=i(r);let l;n.oncomplete=()=>{s(l)};n.onabort=()=>{o(n.error??new Error("Transaction aborted"))};n.onerror=()=>{o(n.error)};a.onsuccess=()=>{l=a.result}}))}async batch(t){if(!this.db){throw new Error("Database is not open.")}const e=await this.extractStoreNamesFromActions(t);if(this.isLoggingEnabled){console.info("[IndexedDB] Starting batch transaction:",{storeNames:e})}return new Promise(((i,s)=>{const o=this.db.transaction(e,"readwrite");const n=[];const r=[];const a={add:(t,e)=>this.add(t,e),get:(t,e)=>this.get(t,e),getAll:t=>this.getAll(t),update:(t,e)=>this.update(t,e),delete:(t,e)=>this.delete(t,e),deleteByRange:(t,e)=>this.deleteByRange(t,e),getAllByRange:(t,e)=>this.getAllByRange(t,e),getAllByIndex:(t,e,i)=>this.getAllByIndex(t,e,i),executeTransaction:(t,e,i)=>new Promise(((s,n)=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Executing batch action:",{storeName:t,mode:e})}const r=o.objectStore(t);const a=i(r);a.onsuccess=()=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Batch action request successful:",{result:a.result})}s(a.result)};a.onerror=()=>{console.error("[IndexedDB] Batch action request error:",a.error);n(a.error)}}))};o.oncomplete=()=>{if(this.isLoggingEnabled){console.info("[IndexedDB] Batch transaction complete.")}Promise.all(r).then((()=>i(n)))};o.onabort=()=>{console.error("[IndexedDB] Batch transaction aborted:",o.error);s(o.error??new Error("Transaction aborted"))};o.onerror=()=>{console.error("[IndexedDB] Batch transaction error:",o.error);s(o.error)};t.forEach(((t,e)=>{const i=t(a).then((t=>{n[e]=t})).catch((t=>{if(!o.error){o.abort()}s(t)}));r.push(i)}))}))}async extractStoreNamesFromActions(t){const e=new Set;const i=new Proxy(this,{get:(t,i)=>{if(["add","get","getAll","update","delete","deleteByRange","getAllByRange","getAllByIndex"].includes(i)){return t=>{e.add(t);return Promise.resolve()}}return t[i]}});await Promise.all(t.map((t=>t(i))));return Array.from(e)}}class ot extends m{currentViewport;previousViewport;constructor(t,e,i,s=false){super(t,e,s);this.previousViewport=i;this.currentViewport={scale:this._core.store.state.scale,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}execute(){this._core.store.setState("scale",this.currentViewport.scale);this._core.store.setState("translateX",this.currentViewport.translateX);this._core.store.setState("translateY",this.currentViewport.translateY)}undo(){this._core.store.setState("scale",this.previousViewport.scale);this._core.store.setState("translateX",this.previousViewport.translateX);this._core.store.setState("translateY",this.previousViewport.translateY)}}class nt{buffer;capacity;head=0;tail=0;size=0;constructor(t){this.capacity=t;this.buffer=new Array(t).fill(null)}add(t){this.buffer[this.head]=t;this.head=(this.head+1)%this.capacity;if(this.size<this.capacity){this.size++}else{this.tail=(this.tail+1)%this.capacity}}pop(){if(this.size===0){return null}this.head=(this.head-1+this.capacity)%this.capacity;const t=this.buffer[this.head];this.buffer[this.head]=null;this.size--;return t}peek(){if(this.size===0){return null}const t=(this.head-1+this.capacity)%this.capacity;return this.buffer[t]}isEmpty(){return this.size===0}clear(){this.buffer.fill(null);this.head=0;this.tail=0;this.size=0}}class rt{_core;undoStack;redoStack;previousViewport;constructor(t){this._core=t;this.undoStack=new nt(this._core.store.state.historyBufferSize);this.redoStack=new nt(this._core.store.state.historyBufferSize);this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}reset(){this.undoStack.clear();this.redoStack.clear();this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}executeCommand(t){if(this._core.store.state.hasViewportChanged){this.addUpdateViewportCommand()}t.execute();if(t.skipHistory===false){if(this._core.store.state.debugInfo.logCommands){console.info("add",t)}this.undoStack.add(t);if(this.redoStack.isEmpty()===false){this.redoStack.clear()}}this._core.rerender()}undo(){if(this._core.store.state.hasViewportChanged){const t=new ot(this._core,this,this.previousViewport);t.undo();this._core.store.setState("hasViewportChanged",false);this._core.rerender();return}const t=this.undoStack.pop();if(t){t.undo();if(this._core.store.state.debugInfo.logCommands)console.info("undo",t);this.redoStack.add(t)}this._core.store.setState("copiedObjects",null);this._core.rerender()}redo(){const t=this.redoStack.pop();if(t){t.execute();if(this._core.store.state.debugInfo.logCommands)console.info("redo",t);this.undoStack.add(t)}this._core.rerender()}addUpdateViewportCommand(){const t=new ot(this._core,this,this.previousViewport);t.execute();this.undoStack.add(t);if(this.redoStack.isEmpty()===false){this.redoStack.clear()}this._core.store.setState("hasViewportChanged",false);this.previousViewport={scale:this._core.store.state.scale,scaleStep:this._core.store.state.scaleStep,translateX:this._core.store.state.translateX,translateY:this._core.store.state.translateY}}}class at{map;constructor(){this.map=new Map}reset(){this.map.clear()}insert(t){if(!t.id){return false}this.map.set(t.id,t);return true}update(t){if(!t.id||!this.map.has(t.id)){return false}this.map.set(t.id,t);return true}remove(t){for(const[e,i]of this.map){if(t(i)){this.map.delete(e)}}}filter(t){const e=[];for(const i of this.map.values()){if(t(i)){e.push(i)}}return e}allObjects(){return Array.from(this.map.values())}}class lt{_state;_listeners=new Map;get state(){return this._state}get currentZIndex(){return this._state.objectsMap.filter((t=>!(t instanceof y)&&!(t instanceof z))).length}get allObjects(){return this._state.objectsMap.allObjects()}get selectedObjects(){return this.allObjects.filter((t=>!(t instanceof y))).filter((t=>t.isSelected))}get offsetX(){return this._state.host.getBoundingClientRect().left}get offsetY(){return this._state.host.getBoundingClientRect().top}get isDisabled(){return this._state.isEnabled===false||this._state.isReady===false||this._state.activeWorkspace===null}constructor(t){this._state=t;this._state.objectsMap=new at}onStateChange(t,e){if(!this._listeners.has(t)){this._listeners.set(t,new Set)}this._listeners.get(t).add(e)}getState(t){return this._state[t]}setState(t,e){const i=this._state[t];if(i!==e){this._state[t]=e;if(this._listeners.has(t)){this._listeners.get(t).forEach((s=>s(e,i,String(t))))}}}}class ct{_kritzelEngine;_store;_history;_database;get engine(){return this._kritzelEngine}get history(){return this._history}get database(){return this._database}get store(){return this._store}constructor(t){this._kritzelEngine=t;this._store=new lt(it);this._history=new rt(this);this._database=new st("kritzelDB",1,this._store.state.debugInfo.logDatabase)}async initializeDatabase(){await this._database.open([{name:"objects",options:{keyPath:["workspaceId","id"]}},{name:"workspaces",options:{keyPath:"id"}}]);this.rerender()}async initializeWorkspace(t){const e=await this.getWorkspaces();const i=[...e].sort(((t,e)=>e.updatedAt.getTime()-t.updatedAt.getTime()))[0];const s=new f(C.generateUUID(),"New Workspace");this._store.setState("activeWorkspace",t??i??s);const o=await this.getWorkspace(this._store.state.activeWorkspace.id);if(o){await this.updateWorkspace(this._store.state.activeWorkspace)}else{await this.createWorkspace(this._store.state.activeWorkspace)}this._store.setState("workspaces",await this.getWorkspaces());this._store.setState("translateX",this._store.state.activeWorkspace.viewport.translateX);this._store.setState("translateY",this._store.state.activeWorkspace.viewport.translateY);this._store.setState("scale",this._store.state.activeWorkspace.viewport.scale);await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id)}async initializeWorkspaceObjects(t){this._store.state.objectsMap.reset();this._history.reset();const e=await this._database.getAllByRange("objects",IDBKeyRange.bound([t],[t,"￿"]));const i=new I(this);e.forEach((t=>{const e=i.revive(t);this._store.state.objectsMap.insert(e)}));this.rerender()}async updateWorkspaceViewport(t,e,i){const s=this._store.state.activeWorkspace;if(!s){throw new Error("Workspace not initialized")}s.viewport={translateX:t,translateY:e,scale:i};s.updatedAt=new Date;await this._database.update("workspaces",s)}async addObjectToDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([e=>e.add("objects",t),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error adding object to database:",t)}))}async updateObjectInDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([e=>e.update("objects",t),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error updating object in database:",t)}))}async deleteObjectFromDatabase(t){if(!this._database){throw new Error("Database not initialized")}const e=this._store.state.activeWorkspace;if(!e){throw new Error("Workspace not initialized")}e.updatedAt=new Date;await this._database.batch([i=>i.delete("objects",[e.id,t]),t=>t.update("workspaces",e)]).catch((t=>{console.error("Error deleting object from database:",t)}))}async getWorkspace(t){if(!this._database){throw new Error("Database not initialized")}const e=new I(this);return this._database.get("workspaces",t).then((t=>t?e.revive(t):null))}async getWorkspaces(){if(!this._database){throw new Error("Database not initialized")}const t=new I(this);return this._database.getAll("workspaces").then((e=>e.map((e=>t.revive(e)))))}async createWorkspace(t){if(!this._database){throw new Error("Database not initialized")}t.createdAt=new Date;t.updatedAt=new Date;await this._database.add("workspaces",t);this._store.state.workspaces.push(t)}async updateWorkspace(t){if(!this._database){throw new Error("Database not initialized")}t.updatedAt=new Date;await this._database.update("workspaces",t);const e=this._store.state.workspaces;const i=e.findIndex((e=>e.id===t.id));if(i!==-1){e[i]=t;this._store.setState("workspaces",e)}}async deleteWorkspace(t){if(!this._database){throw new Error("Database not initialized")}const e=IDBKeyRange.bound([t.id],[t.id,"￿"]);await this._database.deleteByRange("objects",e);await this._database.delete("workspaces",t.id);this._store.setState("workspaces",this._store.state.workspaces.filter((e=>e.id!==t.id)))}rerender(){if(this._kritzelEngine){this._kritzelEngine.forceUpdate++}}findObjectById(t){for(const e of this._store.allObjects){if(e.id===t){return e}}return null}deselectAllObjects(){if(this._store.state.selectionGroup){this._history.executeCommand(new w(this,this))}}delete(){if(!this._store.state.selectionGroup){return}const t=this._store.state.selectionGroup.objects.map((t=>new M(this,this._store.state.selectionGroup,t)));const e=new w(this,this._store.state.selectionGroup);const i=[...t,e];this.history.executeCommand(new v(this,this._store.state.selectionGroup,i))}deleteObject(t,e=false){const i=this.findObjectById(t);if(i){const t=new M(this,this,i,e);this.history.executeCommand(t)}}copy(){this._store.setState("copiedObjects",this._store.state.selectionGroup.copy())}paste(t,e){const i=this._store.state.copiedObjects;i.isSelected=true;this._store.setState("copiedObjects",i);const s=t!==undefined?t:this._store.state.copiedObjects.translateX+25/this._store.state.scale;const o=e!==undefined?e:this._store.state.copiedObjects.translateY+25/this._store.state.scale;this._store.state.copiedObjects.updatePosition(s,o);const n=this._store.state.activeWorkspace;this.store.state.copiedObjects.updateWorkspaceId(n.id);this.store.state.copiedObjects.updateZIndices(this.store.currentZIndex);const r=[];let a=null;if(this._store.state.selectionGroup!==null){a=this._store.state.selectionGroup;r.push(new w(this,this._store.state.selectionGroup))}const l=this._store.state.copiedObjects.objects.map((t=>new S(this,this,t)));const c=new x(this,this,this._store.state.copiedObjects,a);r.push(...l,c);this.history.executeCommand(new v(this,this,r));this._store.setState("isSelecting",false);this._store.setState("copiedObjects",this._store.state.selectionGroup.copy());this._store.setState("activeTool",k.getTool("selection"))}bringForward(t){const e=this._store.allObjects.length+1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>{if(t.zIndex===e){return}return new j(this,this,t,{zIndex:t.zIndex+1})}));this.history.executeCommand(new v(this,this,s))}sendBackward(t){const e=0;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>{if(t.zIndex===e){return}return new j(this,this,t,{zIndex:t.zIndex-1})}));this.history.executeCommand(new v(this,this,s))}bringToFront(t){const e=Math.max(...this._store.allObjects.map((t=>t.zIndex)))+1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>new j(this,this,t,{zIndex:e})));this.history.executeCommand(new v(this,this,s))}sendToBack(t){const e=Math.min(...this._store.allObjects.map((t=>t.zIndex)))-1;const i=t?[t]:this._store.state.selectionGroup.objects;const s=i.map((t=>new j(this,this,t,{zIndex:e})));this.history.executeCommand(new v(this,this,s))}selectObjects(t){if(t.length===0){return}const e=y.create(this);t.forEach((t=>{t.isSelected=false;e.addOrRemove(t)}));e.isSelected=true;this._store.setState("selectionGroup",e);if(t.length===1){e.rotation=e.objects[0].rotation}this.history.executeCommand(new x(this,this,e))}selectAllObjectsInViewport(){const t=this._store.state.objectsMap.filter((t=>t.isInViewport())).filter((t=>!(t instanceof y)&&!(t instanceof z)&&!(t instanceof W)));if(t.length>0){const e=y.create(this);t.forEach((t=>{t.isSelected=false;e.addOrRemove(t)}));e.isSelected=true;this._store.setState("isSelecting",false);if(t.length===1){e.rotation=e.objects[0].rotation}this.history.executeCommand(new x(this,this,e));this._store.setState("activeTool",k.getTool("selection"))}}clearSelection(){const t=new w(this,this._store.state.selectionGroup);this.history.executeCommand(t);this._store.setState("selectionGroup",null);this._store.setState("selectionBox",null);this._store.setState("isSelecting",false);this._store.setState("isResizeHandleSelected",false);this._store.setState("isRotationHandleSelected",false);this.rerender()}resetActiveText(){if(this._store.state.activeText&&this._store.state.activeText.value===" "){this.deleteObject(this._store.state.activeText.id,true)}this._store.setState("activeText",null)}getObjectFromPointerEvent(t,e=".object"){const i=this._store.state.host?.shadowRoot;if(!i)return null;const s=t.clientX;const o=t.clientY;const n=i.elementFromPoint(s,o);if(!n)return null;const r=n.closest(e);if(r){const t=this._store.allObjects.find((t=>r.id===t.id));const e=t?.hitTest(s,o);return e?t:null}return null}getObjectsFromPointerEvent(t,e=".object"){const i=this._store.state.host?.shadowRoot;if(!i)return[];const s=t.clientX;const o=t.clientY;const n=i.elementsFromPoint(s,o);if(!n||n.length===0)return[];const r=new Set;n.forEach((t=>{const i=t.closest(e);if(i&&i.id){r.add(i.id)}}));if(r.size>0){return this._store.allObjects.filter((t=>r.has(t.id))).sort(((t,e)=>e.zIndex-t.zIndex))}return[]}getCanvasPoint(t){if(!this._store.state.host){return{x:0,y:0}}const e=this._store.state.host.getBoundingClientRect();const i=t.clientX-e.left;const s=t.clientY-e.top;const o=i-this._store.state.translateX;const n=s-this._store.state.translateY;const r=o/this._store.state.scale;const a=n/this._store.state.scale;return{x:r,y:a}}}const ht=":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";const dt=class{get host(){return o(this)}workspace;onWorkspaceChange(t){if(this.core.store.state.activeWorkspace!==t){this.core.initializeWorkspace(t)}}activeTool;globalContextMenuItems;objectContextMenuItems;scaleMax=U;validateScaleMax(t){if(t>U){console.warn(`scaleMax cannot be greater than ${U}.`);this.scaleMax=U;this.core.store.setState("scaleMax",this.scaleMax)}else{this.core.store.setState("scaleMax",t)}}scaleMin=q;validateScaleMin(t){if(t<q){console.warn(`scaleMin cannot be less than ${q}.`);this.scaleMin=q;this.core.store.setState("scaleMin",this.scaleMin)}else{this.core.store.setState("scaleMin",t)}}isEngineReady;activeToolChange;workspacesChange;longpress;forceUpdate=0;handleWheel(t){if(this.core.store.isDisabled){return}if(this.core.store.state.isContextMenuVisible){this.hideContextMenu()}this.viewport.handleWheel(t);this.core.store.state?.activeTool?.handleWheel(t)}handlePointerDown(t){if(this.core.store.isDisabled){return}if(V.isTouchDevice()){b.onLongPress(t,(t=>this.longpress.emit(t)))}this.host.setPointerCapture(t.pointerId);this.core.store.state.pointers.set(t.pointerId,t);this.viewport.handlePointerDown(t);this.core.store.state?.activeTool?.handlePointerDown(t)}handlePointerMove(t){if(this.core.store.isDisabled){return}this.core.store.state.pointers.set(t.pointerId,t);this.viewport.handlePointerMove(t);this.core.store.state?.activeTool?.handlePointerMove(t)}handlePointerUp(t){if(this.core.store.isDisabled){return}this.core.store.state.pointers.delete(t.pointerId);this.host.releasePointerCapture(t.pointerId);this.viewport.handlePointerUp(t);this.core.store.state?.activeTool?.handlePointerUp(t)}handlePointerCancel(t){if(this.core.store.isDisabled){return}this.host.releasePointerCapture(t.pointerId);this.core.store.state.pointers.delete(t.pointerId);this.viewport.handlePointerUp(t);this.core.store.state?.activeTool?.handlePointerUp(t)}handleLongPress(t){this.contextMenuHandler.handleContextMenu(t.detail)}handleContextMenu(t){t.preventDefault();if(this.core.store.isDisabled){return}if(t.pointerType==="touch"){return}this.contextMenuHandler.handleContextMenu(t)}handleResize(){this.viewport.handleResize()}handleKeyDown(t){if(this.core.store.isDisabled){return}this.keyHandler.handleKeyDown(t)}handleKeyUp(t){if(this.core.store.isDisabled){return}this.keyHandler.handleKeyUp(t)}async registerTool(t,e,i){if(typeof e!=="function"||!(e.prototype instanceof D)){console.error(`Failed to register tool "${t}": Tool class must be a constructor function`);return null}const s=k.registerTool(t,e,this.core);if(i){Object.entries(i).forEach((([t,e])=>{s[t]=e}))}return Promise.resolve(s)}async changeActiveTool(t){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",t);this.core.deselectAllObjects();t?.onActivate()}async disable(){this.core.store.setState("isEnabled",false);this.core.rerender()}async enable(){this.core.store.setState("isEnabled",true);this.core.rerender()}async delete(){this.core.delete()}async copy(){this.core.copy()}async paste(t,e){this.core.paste(t,e)}async bringForward(t){this.core.bringForward(t)}async sendBackward(t){this.core.sendBackward(t)}async bringToFront(t){this.core.bringToFront(t)}async sendToBack(t){this.core.sendToBack(t)}async undo(){this.core.history.undo()}async redo(){this.core.history.redo()}async hideContextMenu(){this.core.store.state.pointers.clear();this.core.store.setState("isContextMenuVisible",false);this.core.store.setState("selectionBox",null);this.core.store.setState("isSelecting",false);this.core.store.setState("isEnabled",true);this.core.rerender()}async getObjectById(t){const e=this.core.store.allObjects.find((e=>e.id===t));return e||null}async addObject(t){this.core.deselectAllObjects();t.id=t.generateId();t._core=this.core;t.scale=t.scale?t.scale:this.core.store.state.scale;t.zIndex=this.core.store.currentZIndex;const e=new S(this.core,this,t);this.core.history.executeCommand(e);return t}async updateObject(t,e){this.core.deselectAllObjects();const i=new j(this.core,this,t,e);this.core.history.executeCommand(i);return t}async removeObject(t){this.core.deselectAllObjects();const e=new M(this.core,this,t);this.core.history.executeCommand(e);return t}async getSelectedObjects(){return this.core.store.state.selectionGroup?this.core.store.state.selectionGroup.objects:[]}async selectObjects(t){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",k.getTool("selection"));this.core.deselectAllObjects();this.core.selectObjects(t)}async selectAllObjectsInViewport(){this.core.store.state.activeTool?.onDeactivate();this.core.store.setState("activeTool",k.getTool("selection"));this.core.deselectAllObjects();this.core.selectAllObjectsInViewport()}async clearSelection(){this.core.clearSelection()}async centerObjectInViewport(t){t.centerInViewport();const e=new j(this.core,this,t,t);this.core.history.executeCommand(e);return t}async getCopiedObjects(){return this.core.store.state.copiedObjects?.objects||[]}async createWorkspace(t){t._core=this.core;await this.core.createWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces);return t}async updateWorkspace(t){await this.core.updateWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces)}async deleteWorkspace(t){await this.core.deleteWorkspace(t);this.workspacesChange.emit(this.core.store.state.workspaces)}async getWorkspaces(){return this.core.getWorkspaces()}async getActiveWorkspace(){return this.core.store.state.activeWorkspace}core;viewport;contextMenuHandler;keyHandler;contextMenuElement=null;get isSelecting(){return this.core.store.state.activeTool instanceof l&&this.core.store.state.isSelecting}get isSelectionActive(){return this.core.store.state.activeTool instanceof l&&this.core.store.state.selectionGroup!==null}constructor(e){t(this,e);this.isEngineReady=s(this,"isEngineReady");this.activeToolChange=s(this,"activeToolChange");this.workspacesChange=s(this,"workspacesChange");this.longpress=s(this,"longpress");this.core=new ct(this)}componentWillLoad(){this.validateScaleMax(this.scaleMax);this.validateScaleMin(this.scaleMin)}async componentDidLoad(){this.contextMenuHandler=new tt(this.core,this.globalContextMenuItems,this.objectContextMenuItems);this.keyHandler=new Q(this.core);this.viewport=new J(this.core,this.host);await this.core.initializeDatabase();await this.core.initializeWorkspace(this.workspace);this._registerStateChangeListeners();if(this.core.store.state.isReady===false){this.core.store.setState("isReady",true);this.isEngineReady.emit(this.core.store.state)}}_registerStateChangeListeners(){this.core.store.onStateChange("activeTool",this._handleActiveToolChange.bind(this))}_handleActiveToolChange(t){if(!(t instanceof l)){this.core.clearSelection()}this.core.store.setState("skipContextMenu",false);this.core.store.setState("copiedObjects",null);this.activeToolChange.emit(t);p.forceHideKeyboard()}render(){const t=window.getComputedStyle(this.host);const s=t.getPropertyValue("--kritzel-selection-handle-size").trim()||"6px";const o=parseFloat(s);const n=o*2<14?14:o;return e(i,{key:"54dce5fe3011a15e4cf77b1daecf578dd0402c67"},e("div",{key:"569c4253054b6c6e84059175716f180a76fd8a04",class:"debug-panel",style:{display:this.core.store.state.debugInfo.showViewportInfo?"block":"none"}},e("div",{key:"ff87fd8f171e46d211d92709d3141ad884ce0253"},"ActiveWorkspaceId: ",this.core.store.state?.activeWorkspace?.id),e("div",{key:"f43f53b4fc28ae9a7fe7e240635a3f410daaa72c"},"ActiveWorkspaceName: ",this.core.store.state?.activeWorkspace?.name),e("div",{key:"e2c45f541e0626a6ea1d5a36047fb2144eabf612"},"TranslateX: ",this.core.store.state?.translateX),e("div",{key:"f7897dde7e2a0b3be1c73342523db9f0c361bdb9"},"TranslateY: ",this.core.store.state?.translateY),e("div",{key:"8f6be6752c49f033eabfd63f1533666e4a4d3c15"},"ViewportWidth: ",this.core.store.state?.viewportWidth),e("div",{key:"26b96ecc0d184d9d224cfb14426503415a00a9ef"},"ViewportHeight: ",this.core.store.state?.viewportHeight),e("div",{key:"7275251e13cb83b670b944d6ce22015525247b83"},"Scale: ",this.core.store.state?.scale),e("div",{key:"f1f071ce637abd91639c0e6d0809d0493ff649e9"},"ActiveTool: ",this.core.store.state?.activeTool?.name),e("div",{key:"fbc6e5cc3fad57cbd54b821f9aa1b68b213447a0"},"HasViewportChanged: ",this.core.store.state?.hasViewportChanged?"true":"false"),e("div",{key:"ced900e880436a03d5490d818b10f079df3e2ed6"},"IsEnabled: ",this.core.store.state?.isEnabled?"true":"false"),e("div",{key:"ffb1c5e0310d246f04e747df85dcfde58c81d83f"},"IsScaling: ",this.core.store.state?.isScaling?"true":"false"),e("div",{key:"5ad7bc9e7957f071400cc997613ec080b6484b8e"},"IsPanning: ",this.core.store.state?.isPanning?"true":"false"),e("div",{key:"42d93051cb0ea2e24ef549abbffcc720dd62efa8"},"IsSelecting: ",this.isSelecting?"true":"false"),e("div",{key:"78a54f7df911c0721fed70be15ccbefae5d99b33"},"IsSelectionActive: ",this.isSelectionActive?"true":"false"),e("div",{key:"e4c4ca2b3f5429a5f9378122a5bfc380eea82cc6"},"IsResizeHandleSelected: ",this.core.store.state.isResizeHandleSelected?"true":"false"),e("div",{key:"1947034670be8512d3654e104c7ea62bf70f207f"},"IsRotationHandleSelected: ",this.core.store.state.isRotationHandleSelected?"true":"false"),e("div",{key:"ecca8afceda81c4817db3e91f5bc4837056c4de0"},"IsDrawing: ",this.core.store.state.isDrawing?"true":"false"),e("div",{key:"1ca1d5cac7421442851f35574bd7765d850399f9"},"IsWriting: ",this.core.store.state.isWriting?"true":"false"),e("div",{key:"1e388d4dd59026dff761a598838b5bd10843d177"},"PointerX: ",this.core.store.state?.pointerX),e("div",{key:"2c2b28eb4a9d293dd8d5d98a072f4bbeb7d0349c"},"PointerY: ",this.core.store.state?.pointerY),e("div",{key:"e41abf270f34643902a0a8d049dad405ead68321"},"SelectedObjects: ",this.core.store.state.selectionGroup?.objects.length||0)),e("div",{key:"e2ed793fac7f3f289daa962042e05e4fd8f44d3b",id:"origin",class:"origin",style:{transform:`matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`}},this.core.store.state.objectsMap.allObjects()?.map((t=>e("div",{key:t.id,style:{display:t.isInViewport()?"block":"none",transform:t?.transformationMatrix,transformOrigin:"top left",zIndex:t.zIndex.toString(),position:"absolute"}},e("svg",{xmlns:"http://www.w3.org/2000/svg",id:t.id,class:"object",style:{height:t?.totalHeight.toString(),width:t?.totalWidth.toString(),left:"0",top:"0",position:"absolute",transform:`rotate(${t.rotationDegrees}deg)`,transformOrigin:"center",opacity:t.markedForRemoval?"0.5":t.opacity.toString(),pointerEvents:t.markedForRemoval?"none":"auto"}},e("foreignObject",{x:"0",y:"0",width:t.totalWidth.toString(),height:t.totalHeight.toString(),style:{minHeight:"0",minWidth:"0",backgroundColor:t.backgroundColor,borderColor:t.borderColor,borderWidth:t.borderWidth+"px",borderStyle:"solid",padding:t.padding+"px",overflow:"visible"}},et.isInstanceOf(t,"KritzelPath")&&e("svg",{ref:e=>e?t.mount(e):t.unmount(),xmlns:"http://www.w3.org/2000/svg",style:{height:t?.height.toString(),width:t?.width.toString(),position:"absolute",overflow:"visible"},viewBox:t?.viewBox},e("path",{d:t?.d,fill:t.fill,stroke:t?.stroke})),et.isInstanceOf(t,"KritzelImage")&&e("img",{ref:e=>e?t.mount(e):t.unmount(),src:t.src,style:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none"},draggable:false,onDragStart:t=>t.preventDefault()}),et.isInstanceOf(t,"KritzelText")&&e("textarea",{ref:e=>e?t.mount(e):t.unmount(),value:t.value,onKeyDown:e=>t.handleKeyDown(e),onInput:e=>t.handleInput(e),rows:t.rows,style:{width:"100%",height:"100%",color:t.fontColor,fontSize:t.fontSize?.toString()+"px",fontFamily:t.fontFamily,border:"none",outline:"none",resize:"none",overflow:"hidden",display:"block",padding:"1px",whiteSpace:"nowrap",pointerEvents:t.isReadonly?"none":"auto",cursor:t.isReadonly?"default":"text",caretColor:t.isReadonly?"transparent":"auto"}}),et.isInstanceOf(t,"KritzelCustomElement")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%",pointerEvents:"auto",overflow:"hidden",display:"block"}}),et.isInstanceOf(t,"KritzelSelectionGroup")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%"}}),et.isInstanceOf(t,"KrtizelSelectionBox")&&e("div",{ref:e=>e?t.mount(e):t.unmount(),style:{width:"100%",height:"100%",backgroundColor:V.isFirefox()?t.backgroundColor:"transparent",borderWidth:V.isFirefox()?t.borderWidth+"px":"0",borderStyle:V.isFirefox()?"solid":"none",borderColor:V.isFirefox()?t.borderColor:"transparent"}})),e("line",{x1:"0",y1:"0",x2:t.totalWidth,y2:"0",style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:"0",y1:"0",x2:"0",y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:"0",y1:t.totalHeight,x2:t.totalWidth,y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("line",{x1:t.totalWidth,y1:"0",x2:t.totalWidth,y2:t.totalHeight,style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`,strokeLinecap:"square"},visibility:t.isSelected?"visible":"hidden"}),e("circle",{class:"resize-handle top-left",cx:"0",cy:"0",r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay top-left",cx:"0",cy:"0",r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle top-right",cx:t.totalWidth,cy:"0",r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay top-right",cx:t.totalWidth,cy:"0",r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle bottom-left",cx:"0",cy:t.totalHeight,r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay bottom-left",cx:"0",cy:t.totalHeight,r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle bottom-right",cx:t.totalWidth,cy:t.totalHeight,r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"resize-handle-overlay bottom-right",cx:t.totalWidth,cy:t.totalHeight,r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("line",{x1:t.totalWidth/2,y1:"0",x2:t.totalWidth/2,y2:-(15*t.scale/this.core.store.state?.scale),style:{stroke:"var(--kritzel-selection-border-color, #007AFF)",strokeWidth:`calc(var(--kritzel-selection-border-width, 2px) * ${t.scale} / ${this.core.store.state?.scale})`},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"rotation-handle",cx:t.totalWidth/2,cy:-(15*t.scale/this.core.store.state?.scale),r:`${o*t.scale/this.core.store.state?.scale}`,style:{fill:"var(--kritzel-selection-handle-color, #000000)"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("circle",{class:"rotation-handle-overlay",cx:t.totalWidth/2,cy:-(15*t.scale/this.core.store.state?.scale),r:`${n*t.scale/this.core.store.state?.scale}`,style:{fill:"transparent",cursor:"grab"},visibility:t.isSelected&&!this.isSelecting?"visible":"hidden"}),e("g",{style:{display:this.core.store.state.debugInfo.showObjectInfo?"block":"none",pointerEvents:"none"}},e("foreignObject",{x:t.totalWidth.toString(),y:"0",width:"400px",height:"160px",style:{minHeight:"0",minWidth:"0",display:t.isDebugInfoVisible?"block":"none"}},e("div",{style:{width:"100%",height:"100%"}},e("div",{style:{whiteSpace:"nowrap"}},"zIndex: ",t.zIndex),e("div",{style:{whiteSpace:"nowrap"}},"translateX: ",t.translateX),e("div",{style:{whiteSpace:"nowrap"}},"translateY: ",t.translateY),e("div",{style:{whiteSpace:"nowrap"}},"width: ",t.width),e("div",{style:{whiteSpace:"nowrap"}},"height: ",t.height),e("div",{style:{whiteSpace:"nowrap"}},"scale: ",t.scale),e("div",{style:{whiteSpace:"nowrap"}},"rotation: ",t.rotation),e("div",{style:{whiteSpace:"nowrap"}},"x: ",t.x),e("div",{style:{whiteSpace:"nowrap"}},"y: ",t.y)))))))),e("svg",{key:"current-path",class:"object",xmlns:"http://www.w3.org/2000/svg",width:this.core.store.state.currentPath?.width,height:this.core.store.state.currentPath?.height,style:{left:"0",top:"0",zIndex:this.core.store.state.currentPath?.zIndex.toString(),position:"absolute",transform:this.core.store.state.currentPath?.transformationMatrix,transformOrigin:"top left",overflow:"visible"},viewBox:this.core.store.state.currentPath?.viewBox},e("path",{key:"2070b03bfd123024e7075da1a969960cf8b37628",d:this.core.store.state.currentPath?.d,fill:this.core.store.state.currentPath?.fill,stroke:this.core.store.state.currentPath?.stroke}))),this.core.store.state.isContextMenuVisible&&e("kritzel-context-menu",{key:"3fc8fc5b1a75bd119effcf5b8f454e18b9c97fc6",class:"context-menu",ref:t=>this.contextMenuElement=t,items:this.core.store.state.contextMenuItems,objects:this.core.store.state.selectionGroup?.objects||[],style:{position:"fixed",left:`${this.core.store.state.contextMenuX}px`,top:`${this.core.store.state.contextMenuY}px`,zIndex:"10000"},onActionSelected:t=>{t.detail.action({x:(-this.core.store.state.translateX+this.core.store.state.contextMenuX)/this.core.store.state.scale,y:(-this.core.store.state.translateY+this.core.store.state.contextMenuY)/this.core.store.state.scale},this.core.store.state.selectionGroup?.objects);this.hideContextMenu()},onClose:()=>this.hideContextMenu()}),this.core.store.state?.activeTool instanceof h&&!this.core.store.state.isScaling&&e("kritzel-cursor-trail",{key:"11612f7439e34cf20843f5ab63b19d5ef07847d7",core:this.core}))}static get watchers(){return{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"]}}};dt.style=ht;const ut=":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}";const ft=class{constructor(e){t(this,e)}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return e(i,{key:"0d0f0f75b64f579ca236950334fafde7f0ef2a38"},e("div",{key:"e71524879ded9727891bdd43f1a41ae5eef49175",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}};ft.style=ut;const pt=":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: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}";const bt=class{constructor(e){t(this,e);this.fontFamilyChange=s(this,"fontFamilyChange")}fontOptions=[{value:"arial",label:"Arial"},{value:"verdana",label:"Verdana"},{value:"helvetica",label:"Helvetica"},{value:"tahoma",label:"Tahoma"},{value:"trebuchet ms",label:"Trebuchet MS"},{value:"times new roman",label:"Times New Roman"},{value:"georgia",label:"Georgia"},{value:"garamond",label:"Garamond"},{value:"courier new",label:"Courier New"},{value:"brush script mt",label:"Brush Script MT"}];selectedFontFamily;fontFamilyChange;componentWillLoad(){if(this.fontOptions&&this.fontOptions.length>0){const t=this.fontOptions.some((t=>t.value===this.selectedFontFamily));if(!this.selectedFontFamily||!t){this.selectedFontFamily=this.fontOptions[0].value}}}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};render(){const t=this.fontOptions.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.value}})));return e(i,{key:"d05a099adf8623b8c67d68f3861c1cd401e86e2c"},e("kritzel-dropdown",{key:"b95af194feaaf5748bb0d584617d217e4b3b8180",options:t,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:this.selectedFontFamily}},e("button",{key:"04a0a72f9297dc6c34a2a2019cae111d8725bcf4",class:"font-style-button",slot:"suffix"},"B"),e("button",{key:"f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31",class:"font-style-button italic-text",slot:"suffix"},"I")))}};bt.style=pt;const gt=":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, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";const kt=class{constructor(e){t(this,e);this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(t){this.selectedSize=t;this.sizeChange.emit(t)}render(){return e(i,{key:"583659340d8f3bfb2ff6f64f2cd692ac07cb32d6"},this.sizes.map((t=>e("div",{class:{"size-container":true,selected:this.selectedSize===t},onClick:()=>this.handleSizeClick(t)},e("kritzel-font",{fontFamily:this.fontFamily,size:t})))))}};kt.style=gt;const yt=":host{display:inline-flex;justify-content:center;align-items:center;color:var(--kritzel-icon-color, inherited)}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";const vt=class{constructor(e){t(this,e)}name;label;size=24;render(){const t=K.get(this.name);if(!t){console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);return e("span",{class:"error-icon","aria-label":`Error: Icon ${this.name} not found`},"?")}const s={width:`${this.size}px`,height:`${this.size}px`};return e(i,{style:s},e("span",{"aria-hidden":!this.label,role:this.label?"img":undefined,"aria-label":this.label,innerHTML:t}))}};vt.style=yt;const wt=":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}:host(:focus-visible){outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";const xt=class{constructor(e){t(this,e);this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu");this.close=s(this,"close")}get host(){return o(this)}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(t){this.host.scrollTop=t;this.host.scrollTo({top:t,behavior:"auto"})}async setFocus(){const t=this.host.shadowRoot.querySelector("kritzel-menu-item");if(t){t.focus()}}get openChildMenuItem(){return this.items.find((t=>t.isChildMenuOpen))}get editingMenuItem(){return this.items.find((t=>t.isEditing))}onOverlayClick=t=>{t.stopPropagation();this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=t=>{t.stopPropagation();this.itemSelect.emit(t.detail)};handleSave=t=>{t.stopPropagation();this.itemSave.emit(t.detail)};handleCancel=t=>{t.stopPropagation();this.itemCancel.emit(t.detail)};handleToggleChildMenu=t=>{t.stopPropagation();this.itemToggleChildMenu.emit(t.detail)};handleCloseChildMenu=t=>{t.stopPropagation();this.itemCloseChildMenu.emit(t.detail)};render(){return e(i,{key:"211bd579000294d9edf6f85f2d7244aebe331191",tabIndex:0,onClick:t=>t.stopPropagation()},this.openChildMenuItem&&e("div",{key:"b1c397118b1fbac934867677073661a69be1cab1",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((t=>e("kritzel-menu-item",{key:t.id,item:t,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!t.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}};xt.style=wt;const mt=":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";const zt=class{constructor(e){t(this,e);this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu")}get host(){return o(this)}item;onItemChange(t,e){if(t!==e){this.isDirty=false}}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=false;inputRef;focusInput(){if(this.item.isEditing&&this.inputRef&&!this.isDirty){this.inputRef.focus();if(V.isIOS()){const t=this.inputRef.value.length;this.inputRef.setSelectionRange(t,t)}else{this.inputRef.select()}}}componentDidLoad(){this.setDeviceSpecificStyles();this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{const t=V.isTouchDevice();if(t){this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent");this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent")}};handleItemSelect=t=>{t.stopPropagation();this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=t=>{t.stopPropagation();const e=t.target;this.item.label=e.value;this.isDirty=true};handleSave=t=>{t.stopPropagation();this.host.focus();this.itemSave.emit(this.item)};handleCancel=t=>{t.stopPropagation();this.host.focus();this.itemCancel.emit(this.item)};handleMenuToggle=t=>{t.stopPropagation();this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:t.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[e("div",{class:"menu-item-content left"},e("div",null,this.item.label)),e("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[e("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},e("kritzel-icon",{name:"ellipsis-vertical",size:16})),e("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},e("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:t=>this.itemSelect.emit(t.detail),onItemSave:t=>this.itemSave.emit(t.detail),onItemCancel:t=>this.itemCancel.emit(t.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[e("div",{class:"menu-item-content left"},e("input",{ref:t=>this.inputRef=t,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),e("div",{class:"menu-item-content right"},e("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},e("kritzel-icon",{name:"x",size:16})),e("div",{tabIndex:!this.isDirty&&!this.item.isNewItem?-1:0,class:{"action-button":true,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},e("kritzel-icon",{name:"check",size:16})))]}render(){return e(i,{key:"a35e1e3427568f436a36b43ba87af3710a4e83c5",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},e("div",{key:"42eef5a16b9b164839c1fe133e38ecb505c07632",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:["onItemChange"]}}};zt.style=mt;class Ct{static getNumericValueFromStyle(t,e){const i=window.getComputedStyle(t).getPropertyValue(e);return parseFloat(i)||0}static getScrollableParent(t){if(!t){return window}const e=t.parentNode?.host??t.parentElement;if(!e||e.tagName==="BODY"){return window}const i=window.getComputedStyle(e);if(i.overflow==="auto"||i.overflowY==="auto"||i.overflow==="scroll"||i.overflowY==="scroll"){return e}return this.getScrollableParent(e)}static isElementInViewport(t){if(!t){return false}const e=this.getScrollableParent(t);const i=t.getBoundingClientRect();if(e===window){const t=window.innerHeight||document.documentElement.clientHeight;const e=window.innerWidth||document.documentElement.clientWidth;return i.top>=0&&i.left>=0&&i.bottom<=t&&i.right<=e}const s=e.getBoundingClientRect();return i.top>=s.top&&i.left>=s.left&&i.bottom<=s.bottom&&i.right<=s.right}static getFocusableElements(t){if(!t)return[];const e=[];const i='a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';const s=t=>t.offsetParent!==null;const o=t=>{if(t instanceof HTMLElement&&t.matches(i)&&!t.hasAttribute("disabled")&&s(t)){e.push(t)}if(t.shadowRoot){Array.from(t.shadowRoot.children).forEach(o)}if(t.tagName==="SLOT"){t.assignedElements({flatten:true}).forEach(o)}if(!t.shadowRoot){Array.from(t.children).forEach(o)}};o(t);return e}}const It=class{constructor(e){t(this,e);this.close=s(this,"close")}get host(){return o(this)}anchor;anchorChanged(t){if(t){this.openPortal();this.calculatePosition();if(this.autoFocus){this.focusFirstElement()}}else{this.closePortal()}}offsetX;offsetY;autoFocus=true;close;handleOutsideClick(t){t.stopPropagation();const e=this.lastAddedPortal===this.portal;if(!e)return;const i=t.target;if(!this.host.contains(i)){this.close.emit();this.closePortal()}}handleKeyDown(t){t.stopPropagation();const e=this.lastAddedPortal===this.portal;if(!e)return;if(t.key==="Escape"){this.anchor.focus();this.close.emit();this.closePortal()}if(t.key==="Tab"){this.trapFocus(t)}if(t.key==="Enter"){const e=this.getDeepActiveElement();if(e?.click){t.preventDefault();e.click()}}}handleResize(){this.calculatePosition()}handleWindowScroll(){const t=Ct.isElementInViewport(this.anchor);if(!t){this.anchor?.blur();this.closePortal();return}this.calculatePosition()}portal;id=`portal-${C.generateUUID()}`;defaultOffset=0;minLeft=0;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;while(t?.shadowRoot?.activeElement){t=t.shadowRoot.activeElement}return t}trapFocus(t){const e=Ct.getFocusableElements(this.host);if(e.length===0)return;const i=e[0];const s=e[e.length-1];const o=this.getDeepActiveElement();if(t.shiftKey){if(o===i){s.focus();t.preventDefault()}}else{if(o===s){i.focus();t.preventDefault()}}}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot");const e=t?.assignedElements({flatten:true})[0];if(!e)return null;const i=Ct.getFocusableElements(e);return i[0]??e}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect();const e=this.portal.getBoundingClientRect();const i=this.offsetX??this.defaultOffset;let s=t.left+i;const o=window.innerWidth-e.width-this.minLeft;if(s<this.minLeft)s=this.minLeft;if(s>o)s=o;return Math.round(s+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect();const e=this.portal.getBoundingClientRect();const i=this.offsetY??this.defaultOffset;let s=t.bottom+i;if(s+e.height>window.innerHeight){s=t.top-e.height-i}return Math.round(s+window.scrollY)}openPortal(){this.portal=document.createElement("div");this.portal.setAttribute("id",this.id);this.portal.style.zIndex="1";this.portal.style.position="absolute";this.portal.style.top="0px";this.portal.style.left="0px";this.portal.appendChild(this.host);document.body.append(this.portal)}closePortal(){const t=document.getElementById(this.id);if(!t)return;document.body.removeChild(t);this.host.remove()}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop();const e=this.calculateLeft();this.portal.style.top=`${t}px`;this.portal.style.left=`${e}px`}render(){return e(i,{key:"a906e21c1257dfc6ed21257cce150db17048f04e",style:{display:this.anchor?"block":"none"}},e("slot",{key:"972544f2258f8b6dc8c691f3762d5ba806a57c41"}))}static get watchers(){return{anchor:["anchorChanged"]}}};const Mt=":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";const St=class{constructor(e){t(this,e);this.mainButtonClick=s(this,"mainButtonClick");this.itemSelect=s(this,"itemSelect");this.itemSave=s(this,"itemSave");this.itemCancel=s(this,"itemCancel");this.itemToggleChildMenu=s(this,"itemToggleChildMenu");this.itemCloseChildMenu=s(this,"itemCloseChildMenu");this.menuOpen=s(this,"menuOpen");this.menuClose=s(this,"menuClose")}get host(){return o(this)}buttonIcon="plus";dropdownIcon="chevron-down";items=[];mainButtonDisabled=false;menuButtonDisabled=false;mainButtonClick;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;menuOpen;menuClose;isMenuOpen=false;isTouchDevice=V.isTouchDevice();anchorElement;menuScrollTop=0;splitMenuButtonRef;menuRef;async open(){if(this.isMenuOpen)return;this.isMenuOpen=true;this.anchorElement=this.host;this.menuOpen.emit()}async focusMenu(){if(this.menuRef){await this.menuRef.setFocus()}}handleButtonClick=t=>{t.stopPropagation();this.mainButtonClick.emit()};toggleMenu=t=>{t.stopPropagation();if(this.isMenuOpen){this.closeMenu()}else{this.openMenu(t)}};openMenu=t=>{t.stopPropagation();this.isMenuOpen=true;this.anchorElement=this.host;this.menuOpen.emit();requestAnimationFrame((()=>{this.menuRef?.setScrollTop(this.menuScrollTop)}))};closeMenu=()=>{this.isMenuOpen=false;this.anchorElement=null;this.splitMenuButtonRef?.blur();this.menuClose.emit()};handleItemSelect=t=>{this.itemSelect.emit(t.detail)};handleItemSave=t=>{this.itemSave.emit(t.detail)};handleItemCancel=t=>{this.itemCancel.emit(t.detail)};handleItemToggleChildMenu=t=>{this.itemToggleChildMenu.emit(t.detail)};handleItemCloseChildMenu=t=>{this.itemCloseChildMenu.emit(t.detail)};handleScroll=t=>{this.menuScrollTop=t.target.scrollTop};render(){return e(i,{key:"d18a70b94e3d6860dfac952b26f66e5b96cc6fa0",class:{mobile:this.isTouchDevice}},e("button",{key:"ee65221543fd8984f94d0a0b43beb7e1d28411f2",class:"split-main-button",tabIndex:0,onClick:this.handleButtonClick,disabled:this.mainButtonDisabled},this.buttonIcon&&e("kritzel-icon",{key:"1dbdd1e4db4087564464e9586e91b48f80b88aae",name:this.buttonIcon})),e("div",{key:"78b5e0589e7a3dd0592fb2c1cdaae8732f57b129",class:"split-divider"}),e("button",{key:"cfc5d53f06485a927608a99ea491e36b0e993fcc",ref:t=>this.splitMenuButtonRef=t,class:"split-menu-button",tabIndex:0,onClick:this.toggleMenu,disabled:this.menuButtonDisabled},e("kritzel-icon",{key:"0e141b614cbfc758f01d21908d846d16bdce586d",name:this.dropdownIcon})),e("kritzel-portal",{key:"b5def34dcfe5cbbf9641b1218af803937d7a77b6",anchor:this.anchorElement,offsetY:4,onClose:this.closeMenu},e("kritzel-menu",{key:"695f6c85a8ecd44f74ecf7752bf77d0caac69e6a",ref:t=>this.menuRef=t,items:this.items,onItemSelect:this.handleItemSelect,onItemSave:this.handleItemSave,onItemCancel:this.handleItemCancel,onItemToggleChildMenu:this.handleItemToggleChildMenu,onItemCloseChildMenu:this.handleItemCloseChildMenu,onClose:this.closeMenu,onScroll:this.handleScroll})))}};St.style=Mt;const jt=":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:focus-visible{outline:var(--kritzel-stroke-size-focus-outline, 2px auto #e3e3e3)}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";const Dt=class{constructor(e){t(this,e);this.sizeChange=s(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(t){this.selectedSize=t;this.sizeChange.emit(t)}render(){return e(i,{key:"001a0ef8408d19532b57a521929c0cba54e99c52"},this.sizes.map((t=>e("div",{tabIndex:0,class:{"size-container":true,selected:this.selectedSize===t},onClick:()=>this.handleSizeClick(t)},e("kritzel-color",{value:"#000000",size:t})))))}};Dt.style=jt;const Bt=":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";const Et=768;const Tt=class{constructor(e){t(this,e);this.tooltipClosed=s(this,"tooltipClosed")}get host(){return o(this)}isVisible=false;anchorElement;arrowSize=8;offsetY=24;tooltipClosed;positionX=0;arrowOffset="0px";isMobileView=window.innerWidth<Et;handleOutsideClick(t){if(!this.isVisible)return;const e=t.target;if(!this.host.contains(e)){this.tooltipClosed.emit()}}handleWindowResize(){this.isMobileView=window.innerWidth<Et;this.calculateAdjustedPosition()}async focusContent(){const t=Ct.getFocusableElements(this.host);if(t.length>0){t[0].focus()}}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.isMobileView=window.innerWidth<Et;this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot");const e=t?.assignedElements()||[];if(e.length>0){const t=e[0];t.focus()}}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect();const e=this.host.shadowRoot?.querySelector(".tooltip-content");if(!this.isMobileView){this.positionX=t.left+t.width/2;this.arrowOffset=`calc(${50}% - ${this.arrowSize}px)`}else{const i=e.getBoundingClientRect();this.positionX=t.left+t.width/2-i.width/2;this.arrowOffset=`${t.left+t.width/2-i.left-this.arrowSize}px`}}}render(){return e(i,{key:"8c3aeff60625f43f129afa70367cdb7a68a4b271",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:!this.isMobileView?`${this.positionX}px`:"50%",marginBottom:`${this.offsetY+this.arrowSize}px`}},e("div",{key:"b22b606c2a836c2c9bbe21c6b470754753ccb309",class:"tooltip-content",onClick:t=>t.stopPropagation()},e("slot",{key:"783403f4b5560012c9f6bd184a8c5eb26428e148"}),e("div",{key:"bb98400edc5c6e05fd4ed2a476a5821f93964b8e",class:"tooltip-arrow-wrapper",style:{position:"fixed",left:this.arrowOffset,bottom:`-${this.arrowSize*2}px`}},e("div",{key:"850a058d635113a7870f25fa288a6447394c53ed",class:"tooltip-arrow",style:{borderLeft:`${this.arrowSize}px solid transparent`,borderRight:`${this.arrowSize}px solid transparent`,borderTop:`${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,filter:"drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))"}}),e("div",{key:"bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06",class:"tooltip-arrow-rect",style:{position:"relative",width:`${this.arrowSize*2}px`,height:`${this.arrowSize}px`,backgroundColor:"var(--kritzel-controls-tooltip-background-color, #ffffff)",bottom:`${this.arrowSize*2}px`}}))))}};Tt.style=Bt;const Ot=":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";const At=class{constructor(e){t(this,e);this.undo=s(this,"undo");this.redo=s(this,"redo");this.delete=s(this,"delete")}undo;redo;delete;handleUndo(t){if(t.cancelable){t.preventDefault();t.stopPropagation();this.undo.emit()}}handleRedo(t){t.preventDefault();t.stopPropagation();this.redo.emit()}render(){return e(i,{key:"8109ccff01374c046d057021dfbcabdc632d829f"},e("button",{key:"0d51cfb401974edf1a2a8810d2244f8a977c347f",class:"utility-button",onClick:t=>this.handleUndo(t)},e("kritzel-icon",{key:"1d13ee6bbf060402e0b1349d41b728875314e2e5",name:"undo"})),e("button",{key:"f2fe59e7c99cb1550052088b507313cfaed72f29",class:"utility-button",onClick:t=>this.handleRedo(t)},e("kritzel-icon",{key:"74bf8c20f61144ab4abc5804dcd8f39917d2c966",name:"redo"})),e("div",{key:"0c9a942e786425b32e984fefdc97b1abb5077997",class:"utility-separator"}),e("button",{key:"44ca9340c2f73212332e9b3ed93ed93b8f7c6944",class:"utility-button"},e("kritzel-icon",{key:"7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03",name:"delete",onClick:()=>this.delete.emit()})))}};At.style=Ot;const Wt=":host{display:flex;flex-direction:column;z-index:1}";const $t=class{constructor(e){t(this,e);this.isWorkspaceManagerReady=s(this,"isWorkspaceManagerReady");this.workspaceChange=s(this,"workspaceChange")}get host(){return o(this)}activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(t){if(t.ctrlKey){t.preventDefault()}}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((t=>t!=null)).sort(((t,e)=>e.createdAt.getTime()-t.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine();this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");this.kritzelEngineRef=this.host.parentElement.querySelector("kritzel-engine");if(!this.kritzelEngineRef){throw new Error("kritzel-engine not found in parent element.")}}async select(t,e){if(this.editingItemId){return}if(t.action){t.action(t,e);return}this.workspaceChange.emit(t.value)}async add(){await this.splitButtonRef.open();this.newWorkspace=new f(C.generateUUID(),"New Workspace");this.editingItemId=this.newWorkspace.id}edit(t){this.openChildMenuItem=null;this.childMenuAnchor=null;requestAnimationFrame((()=>{this.editingItemId=t.id}))}async save(t){if(this.newWorkspace){this.newWorkspace.name=t.label;await this.kritzelEngineRef.createWorkspace(this.newWorkspace);this.workspaceChange.emit(this.newWorkspace)}else{const e=t.value;e.name=t.label;await this.kritzelEngineRef.updateWorkspace(e)}this.editingItemId=null;this.newWorkspace=null}cancel(){this.newWorkspace=null;this.editingItemId=null}async delete(t){this.openChildMenuItem=null;this.childMenuAnchor=null;await this.kritzelEngineRef.deleteWorkspace(t.value);if(t.value.id===this.activeWorkspace?.id){this.activeWorkspace=this.sortedWorkspaces.find((e=>e.id!==t.value.id))||null;this.workspaceChange.emit(this.activeWorkspace)}await this.splitButtonRef.focusMenu()}toggleChildMenu(t,e){this.openChildMenuItem=t;this.childMenuAnchor=e}closeChildMenu(){this.openChildMenuItem=null;this.childMenuAnchor=null}handleMenuOpen(){this.kritzelEngineRef.disable()}handleMenuClose(){this.cancel();this.closeChildMenu();this.kritzelEngineRef.enable()}render(){const t=this.sortedWorkspaces.sort(((t,e)=>e.createdAt.getTime()-t.createdAt.getTime())).filter((t=>t!==null)).map((t=>({id:t.id,label:t.name,value:t,isEditing:this.editingItemId===t.id,isSelected:this.activeWorkspace?.id===t.id,isNewItem:this.newWorkspace?.id===t.id,isChildMenuOpen:this.openChildMenuItem?.id===t.id,childMenuAnchor:this.openChildMenuItem?.id===t.id?this.childMenuAnchor:null,children:[{id:`${t.id}-rename`,label:"Rename",value:"rename",action:(t,e)=>this.edit(e)},{id:`${t.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(t,e)=>this.delete(e)}]})));return e(i,null,e("kritzel-split-button",{ref:t=>this.splitButtonRef=t,items:t,mainButtonDisabled:this.editingItemId!=null,onMainButtonClick:()=>this.add(),onItemSelect:t=>this.select(t.detail.item,t.detail.parent),onItemToggleChildMenu:t=>this.toggleChildMenu(t.detail.item,t.detail.childMenuAnchor),onItemSave:t=>this.save(t.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()}))}};$t.style=Wt;export{E as kritzel_color,O as kritzel_color_palette,W as kritzel_context_menu,R as kritzel_control_brush_config,P as kritzel_control_text_config,Y as kritzel_controls,L as kritzel_cursor_trail,H as kritzel_dropdown,Z as kritzel_editor,dt as kritzel_engine,ft as kritzel_font,bt as kritzel_font_family,kt as kritzel_font_size,vt as kritzel_icon,xt as kritzel_menu,zt as kritzel_menu_item,It as kritzel_portal,St as kritzel_split_button,Dt as kritzel_stroke_size,Tt as kritzel_tooltip,At as kritzel_utility_panel,$t as kritzel_workspace_manager};
2
+ //# sourceMappingURL=p-32ac435d.entry.js.map