kritzel-stencil 0.1.20 → 0.1.21

package/dist/components/{p-BvhyHrHr.js → p-DqtvAhfs.js}

@@ -1 +1 @@
-import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-Fa2zws3M.js";import{K as h}from"./p-l10It7Nm.js";import{K as p,d as k}from"./p-DGpuS101.js";import{a as u}from"./p-BX4JyoOd.js";import{d as b}from"./p-BxK5ew4S.js";import{d as f}from"./p-WnxGQWr6.js";import{d as z}from"./p-DKDoQ9nc.js";import{d as g}from"./p-BNYfuHT_.js";import{d as m}from"./p-CwP7yBQP.js";import{d as v}from"./p-6USF_L1F.js";import{d as y}from"./p-Cpb-fnoO.js";import{d as x}from"./p-DnB4Srvo.js";import{d as w}from"./p-8uzm1dKV.js";import{d as C}from"./p-CJTKpwmi.js";import{d as T}from"./p-D_gY5jie.js";import{d as j}from"./p-BNT9uvII.js";import{d as S}from"./p-GeVIjnFi.js";const E=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleDocumentClick(t){this.kritzelEngine&&(t.composedPath().some((t=>{const o=t;return!!o.tagName&&("kritzel-tooltip"===o.tagName.toLowerCase()||o.classList?.contains("kritzel-tooltip"))}))||(this.isTooltipVisible=!1))}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.isTooltipVisible=!1,this.openSubMenuControl=null}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;toolsScrollRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:u.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef;this.canScrollLeft=t>2,this.canScrollRight=t+e<o-2,this.needsScrolling=o>e}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,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=!1}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"cb713bc59241300837519145031c1d15109e28c3",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"62cb00da2676739aa472d69e8e453501bd78e408",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"0376615eb976d961cb17ba02aab36f4127343899",class:"kritzel-controls"},r("div",{key:"c72373afc1eb04fb39868d107cb0a35c846097fe",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"1aa1ece36dda200a4c62529c08f1787d8bd4b534",class:"kritzel-tools-scroll",ref:t=>{this.toolsScrollRef=t,t&&this.updateScrollIndicators()},onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name,i=this.openSubMenuControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:o=>this.toggleSubMenu(o,t),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:t._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"a3129881a9c992b6fbd94b66a6325d46072dba60",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"57de6641291894b0e507e90987ea94a9103c25ca",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"182317753d162abe9c804a4757ed19505bb3b487",ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("kritzel-tool-config",{key:"13ecc34147d44b2bb12eb0008eec179db55f5840",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"bc4053cf9feb69c2962fe5a86cd7cf811b03e971",tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}: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;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),E);break;case"kritzel-color":customElements.get(l(t))||b();break;case"kritzel-color-palette":customElements.get(l(t))||f();break;case"kritzel-dropdown":customElements.get(l(t))||z();break;case"kritzel-font":customElements.get(l(t))||g();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||T();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||j();break;case"kritzel-utility-panel":customElements.get(l(t))||S()}}))}export{E as K,D as d}
+import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-Dmy0R-7y.js";import{K as h}from"./p-l10It7Nm.js";import{K as p,d as k}from"./p-CYX7RMRZ.js";import{a as u}from"./p-BX4JyoOd.js";import{d as b}from"./p-BxK5ew4S.js";import{d as f}from"./p-WnxGQWr6.js";import{d as z}from"./p-DKDoQ9nc.js";import{d as g}from"./p-BNYfuHT_.js";import{d as m}from"./p-CwP7yBQP.js";import{d as v}from"./p-6USF_L1F.js";import{d as y}from"./p-Cpb-fnoO.js";import{d as x}from"./p-DnB4Srvo.js";import{d as w}from"./p-8uzm1dKV.js";import{d as C}from"./p-CJTKpwmi.js";import{d as T}from"./p-D_gY5jie.js";import{d as j}from"./p-BNT9uvII.js";import{d as S}from"./p-GeVIjnFi.js";const E=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleDocumentClick(t){this.kritzelEngine&&(t.composedPath().some((t=>{const o=t;return!!o.tagName&&("kritzel-tooltip"===o.tagName.toLowerCase()||o.classList?.contains("kritzel-tooltip"))}))||(this.isTooltipVisible=!1))}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.isTooltipVisible=!1,this.openSubMenuControl=null}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;toolsScrollRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:u.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef;this.canScrollLeft=t>2,this.canScrollRight=t+e<o-2,this.needsScrolling=o>e}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,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=!1}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"cb713bc59241300837519145031c1d15109e28c3",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"62cb00da2676739aa472d69e8e453501bd78e408",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"0376615eb976d961cb17ba02aab36f4127343899",class:"kritzel-controls"},r("div",{key:"c72373afc1eb04fb39868d107cb0a35c846097fe",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"1aa1ece36dda200a4c62529c08f1787d8bd4b534",class:"kritzel-tools-scroll",ref:t=>{this.toolsScrollRef=t,t&&this.updateScrollIndicators()},onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name,i=this.openSubMenuControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:o=>this.toggleSubMenu(o,t),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:t._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"a3129881a9c992b6fbd94b66a6325d46072dba60",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"57de6641291894b0e507e90987ea94a9103c25ca",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"182317753d162abe9c804a4757ed19505bb3b487",ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("kritzel-tool-config",{key:"13ecc34147d44b2bb12eb0008eec179db55f5840",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"bc4053cf9feb69c2962fe5a86cd7cf811b03e971",tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}: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;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),E);break;case"kritzel-color":customElements.get(l(t))||b();break;case"kritzel-color-palette":customElements.get(l(t))||f();break;case"kritzel-dropdown":customElements.get(l(t))||z();break;case"kritzel-font":customElements.get(l(t))||g();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||T();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||j();break;case"kritzel-utility-panel":customElements.get(l(t))||S()}}))}export{E as K,D as d}

package/dist/esm/{default-line-tool.config-DvqpJZmQ.js → default-line-tool.config-DDIFE6oX.js}

@@ -14881,7 +14881,9 @@ class KritzelText extends KritzelBaseObject {
         element.style.fontSize = `${this.fontSize}pt`;
         element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
-            requestAnimationFrame(() => this.adjustSizeOnInput());
+            if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
+                requestAnimationFrame(() => this.adjustSizeOnInput());
+            }
             return;
         }
         this.elementRef = element;
@@ -18471,6 +18473,8 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         const pointerY = this._core.store.state.pointerY;
         const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
         for (const object of overlappingObjects) {
+            if (object instanceof KritzelSelectionBox)
+                continue;
             if (object.hitTest(pointerX, pointerY)) {
                 return object;
             }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './default-line-tool.config-DvqpJZmQ.js';
-export { W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, X as DEFAULT_TEXT_CONFIG, S as IndexedDBSyncProvider, V as KritzelAnchorManager, T as KritzelAppStateMap, J as KritzelBrushTool, Q as KritzelCursorHelper, M as KritzelEraserTool, I as KritzelGroup, F as KritzelImage, N as KritzelImageTool, G as KritzelLine, L as KritzelLineTool, E as KritzelPath, R as KritzelSelectionTool, K as KritzelText, P as KritzelTextTool, $ as KritzelThemeManager, U as KritzelWorkspace, _ as darkTheme, Z as lightTheme } from './default-line-tool.config-DvqpJZmQ.js';
+import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './default-line-tool.config-DDIFE6oX.js';
+export { W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, X as DEFAULT_TEXT_CONFIG, S as IndexedDBSyncProvider, V as KritzelAnchorManager, T as KritzelAppStateMap, J as KritzelBrushTool, Q as KritzelCursorHelper, M as KritzelEraserTool, I as KritzelGroup, F as KritzelImage, N as KritzelImageTool, G as KritzelLine, L as KritzelLineTool, E as KritzelPath, R as KritzelSelectionTool, K as KritzelText, P as KritzelTextTool, $ as KritzelThemeManager, U as KritzelWorkspace, _ as darkTheme, Z as lightTheme } from './default-line-tool.config-DDIFE6oX.js';
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/esm/kritzel-back-to-content_32.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-k35gVcuU.js';
-import { a0 as KritzelColorHelper, a1 as KritzelBaseTool, a2 as ShapeType, a3 as DEFAULT_COLOR_PALETTE, a4 as KritzelShape, a5 as KritzelToolRegistry, a6 as KritzelEventHelper, R as KritzelSelectionTool, J as KritzelBrushTool, L as KritzelLineTool, P as KritzelTextTool, a7 as KritzelDevicesHelper, a8 as KritzelMouseButton, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, a9 as KritzelIconRegistry, aa as KritzelKeyboardHelper, ab as KritzelSelectionBox, ac as KritzelBaseHandler, ad as KritzelSelectionGroup, ae as KritzelBaseObject, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, af as Doc, ag as DEFAULT_SYNC_CONFIG, ah as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, $ as KritzelThemeManager, ai as ObjectHelper, aj as KritzelClassHelper } from './default-line-tool.config-DvqpJZmQ.js';
+import { a0 as KritzelColorHelper, a1 as KritzelBaseTool, a2 as ShapeType, a3 as DEFAULT_COLOR_PALETTE, a4 as KritzelShape, a5 as KritzelToolRegistry, a6 as KritzelEventHelper, R as KritzelSelectionTool, J as KritzelBrushTool, L as KritzelLineTool, P as KritzelTextTool, a7 as KritzelDevicesHelper, a8 as KritzelMouseButton, W as DEFAULT_BRUSH_CONFIG, Y as DEFAULT_LINE_TOOL_CONFIG, M as KritzelEraserTool, X as DEFAULT_TEXT_CONFIG, N as KritzelImageTool, U as KritzelWorkspace, a9 as KritzelIconRegistry, aa as KritzelKeyboardHelper, ab as KritzelSelectionBox, ac as KritzelBaseHandler, ad as KritzelSelectionGroup, ae as KritzelBaseObject, I as KritzelGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, af as Doc, ag as DEFAULT_SYNC_CONFIG, ah as UndoManager, Q as KritzelCursorHelper, T as KritzelAppStateMap, V as KritzelAnchorManager, $ as KritzelThemeManager, ai as ObjectHelper, aj as KritzelClassHelper } from './default-line-tool.config-DDIFE6oX.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19170,10 +19170,10 @@ class KritzelViewport {
     handleWheel(event) {
         // Cancel any ongoing viewport animation when user scrolls
         this.cancelViewportAnimation();
-        if (event.ctrlKey === true && Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0) {
+        if (event.ctrlKey) {
             this.handleZoom(event);
         }
-        if (!event.ctrlKey) {
+        else {
             this.handlePan(event);
         }
     }
@@ -19212,6 +19212,10 @@ class KritzelViewport {
         this._core.store.state.scale = newScale;
         this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
         this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        // Apply horizontal pan from trackpad pinch+drag gestures
+        if (event.deltaX !== 0) {
+            this._core.store.state.translateX -= event.deltaX * 0.8;
+        }
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
@@ -22420,13 +22424,13 @@ const KritzelEngine = class {
         return (h(Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', 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})`,
             } }, visibleObjects?.map(object => {
-            return (h("div", { key: object.id, style: {
+            return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     zIndex: object.zIndex.toString(),
+                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22436,8 +22440,7 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                    zIndex: object.zIndex.toString(),
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22447,7 +22450,7 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", { id: object.id, class: "object", style: {
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22455,7 +22458,6 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22470,7 +22472,7 @@ const KritzelEngine = class {
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { id: object.id, class: "object", style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22478,7 +22480,6 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22493,7 +22494,7 @@ const KritzelEngine = class {
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22501,13 +22502,12 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22515,7 +22515,6 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22525,7 +22524,7 @@ const KritzelEngine = class {
                 } }, h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22533,7 +22532,6 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
@@ -22547,7 +22545,7 @@ const KritzelEngine = class {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22555,7 +22553,6 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
@@ -22770,7 +22767,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81e182d8edd6bcfcbaf649a3c0d42e0f8e070037', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'b9171dfffeb4a88bc4ad9a7b0196a18f5427183f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -22781,7 +22778,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a799d3665a67b5530a4ab1e49b155c7e737a72e3', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23792,7 +23789,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.20';
+const KRITZEL_VERSION = '0.1.21';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 

package/dist/stencil/index.esm.js

@@ -1 +1 @@
-import{w as t,a as s,t as e,r as i,b as n,e as o,c,d as h,f as a,g as r,s as l,h as d,i as u,v as p,j as m,o as y,k as f,l as w,m as v,O as k,n as b,p as g,q as z,u as C,x,y as B,z as H,A,B as D,C as O,H as j,D as q}from"./p-DvqpJZmQ.js";export{W as DEFAULT_BRUSH_CONFIG,Y as DEFAULT_LINE_TOOL_CONFIG,X as DEFAULT_TEXT_CONFIG,S as IndexedDBSyncProvider,V as KritzelAnchorManager,T as KritzelAppStateMap,J as KritzelBrushTool,Q as KritzelCursorHelper,M as KritzelEraserTool,I as KritzelGroup,F as KritzelImage,N as KritzelImageTool,G as KritzelLine,L as KritzelLineTool,E as KritzelPath,R as KritzelSelectionTool,K as KritzelText,P as KritzelTextTool,$ as KritzelThemeManager,U as KritzelWorkspace,_ as darkTheme,Z as lightTheme}from"./p-DvqpJZmQ.js";class tt{doc;channel;_synced=!1;constructor(t,s,e){this.doc=s,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info(`BroadcastChannel Provider initialized: ${t}`)}handleDocUpdate=(i,n)=>{if(n!==this){const n=a();t(n,0),s(n,i),this.channel.postMessage(e(n))}};handleMessage(h){const l=r(new Uint8Array(h));switch(i(l)){case 0:const i=n(l);c(this.doc,i,this);break;case 1:this.broadcastSync();break;case 2:const h=n(l),r=o(this.doc,h);if(r.length>0){const i=a();t(i,0),s(i,r),this.channel.postMessage(e(i))}}}broadcastSync(){const i=a();t(i,2),s(i,h(this.doc)),this.channel.postMessage(e(i))}async connect(){if(!this._synced)return new Promise((t=>{const s=()=>{this._synced?t():setTimeout(s,50)};s()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const st=new Map,et="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=s=>s.key===t&&null!==this.onmessage&&this.onmessage({data:u(s.newValue||"")}),y(this._onChange)}postMessage(t){p.setItem(this.room,m(f(t)))}close(){w(this._onChange)}}:BroadcastChannel,it=t=>l(st,t,(()=>{const s=d(),e=new et(t);return e.onmessage=t=>s.forEach((s=>s(t.data,"broadcastchannel"))),{bc:e,subs:s}})),nt=(t,s,e=null)=>{const i=it(t);i.bc.postMessage(s),i.subs.forEach((t=>t(s,e)))},ot=(e,i)=>{t(e,0);const n=h(i);s(e,n)},ct=(e,i,n)=>{t(e,1),s(e,o(i,n))},ht=(t,s,e,i)=>{try{c(s,n(t),e)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},at=ht;class rt extends k{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=g();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const s=[];this.meta.forEach(((e,i)=>{i!==this.clientID&&3e4<=t-e.lastUpdated&&this.states.has(i)&&s.push(i)})),s.length>0&&lt(this,s,"timeout")}),b(3e3)),t.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(t){const s=this.clientID,e=this.meta.get(s),i=void 0===e?0:e.clock+1,n=this.states.get(s);null===t?this.states.delete(s):this.states.set(s,t),this.meta.set(s,{clock:i,lastUpdated:g()});const o=[],c=[],h=[],a=[];null===t?a.push(s):null==n?null!=t&&o.push(s):(c.push(s),z(n,t)||h.push(s)),(o.length>0||h.length>0||a.length>0)&&this.emit("change",[{added:o,updated:h,removed:a},"local"]),this.emit("update",[{added:o,updated:c,removed:a},"local"])}setLocalStateField(t,s){const e=this.getLocalState();null!==e&&this.setLocalState({...e,[t]:s})}getStates(){return this.states}}const lt=(t,s,e)=>{const i=[];for(let e=0;e<s.length;e++){const n=s[e];if(t.states.has(n)){if(t.states.delete(n),n===t.clientID){const s=t.meta.get(n);t.meta.set(n,{clock:s.clock+1,lastUpdated:g()})}i.push(n)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},e]),t.emit("update",[{added:[],updated:[],removed:i},e]))},dt=(s,i,n=s.states)=>{const o=i.length,c=a();t(c,o);for(let e=0;e<o;e++){const o=i[e],h=n.get(o)||null,a=s.meta.get(o).clock;t(c,o),t(c,a),C(c,JSON.stringify(h))}return e(c)},ut=[];ut[0]=(s,e,o,c)=>{t(s,0);const h=((t,s,e,o,c)=>{const h=i(t);switch(h){case 0:((t,s,e)=>{ct(s,e,n(t))})(t,s,e);break;case 1:ht(t,e,o,c);break;case 2:at(t,e,o,c);break;default:throw new Error("Unknown message type")}return h})(e,s,o.doc,o);c&&1===h&&!o.synced&&(o.synced=!0)},ut[3]=(e,i,n)=>{t(e,1),s(e,dt(n.awareness,Array.from(n.awareness.getStates().keys())))},ut[1]=(t,s,e)=>{((t,s,e)=>{const n=r(s),o=g(),c=[],h=[],a=[],l=[],d=i(n);for(let s=0;s<d;s++){const s=i(n);let e=i(n);const r=JSON.parse(v(n)),d=t.meta.get(s),u=t.states.get(s),p=void 0===d?0:d.clock;(p<e||p===e&&null===r&&t.states.has(s))&&(null===r?s===t.clientID&&null!=t.getLocalState()?e++:t.states.delete(s):t.states.set(s,r),t.meta.set(s,{clock:e,lastUpdated:o}),void 0===d&&null!==r?c.push(s):void 0!==d&&null===r?l.push(s):null!==r&&(z(r,u)||a.push(s),h.push(s)))}(c.length>0||a.length>0||l.length>0)&&t.emit("change",[{added:c,updated:a,removed:l},e]),(c.length>0||h.length>0||l.length>0)&&t.emit("update",[{added:c,updated:h,removed:l},e])})(e.awareness,n(s),e)},ut[2]=(t,s,e)=>{((t,s,e)=>{0===i(t)&&e(0,v(t))})(s,0,((t,s)=>pt(e,s)))};const pt=(t,s)=>console.warn(`Permission denied to access ${t.url}.\n${s}`),mt=(t,s,e)=>{const n=r(s),o=a(),c=i(n),h=t.messageHandlers[c];return h?h(o,n,t,e,c):console.error("Unable to compute message"),o},yt=(t,s,e)=>{s===t.ws&&(t.emit("connection-close",[e,t]),t.ws=null,s.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,lt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((s=>s!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(St,D(100*O(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},St=i=>{if(i.shouldConnect&&null===i.ws){const n=new i._WS(i.url,i.protocols);n.binaryType="arraybuffer",i.ws=n,i.wsconnecting=!0,i.wsconnected=!1,i.synced=!1,n.onmessage=t=>{i.wsLastMessageReceived=g();const s=mt(i,new Uint8Array(t.data),!0);H(s)>1&&n.send(e(s))},n.onerror=t=>{i.emit("connection-error",[t,i])},n.onclose=t=>{yt(i,n,t)},n.onopen=()=>{i.wsLastMessageReceived=g(),i.wsconnecting=!1,i.wsconnected=!0,i.wsUnsuccessfulReconnects=0,i.emit("status",[{status:"connected"}]);const o=a();if(t(o,0),ot(o,i.doc),n.send(e(o)),null!==i.awareness.getLocalState()){const o=a();t(o,1),s(o,dt(i.awareness,[i.doc.clientID])),n.send(e(o))}},i.emit("status",[{status:"connecting"}])}},ft=(t,s)=>{const e=t.ws;t.wsconnected&&e&&e.readyState===e.OPEN&&e.send(s),t.bcconnected&&nt(t.bcChannel,s,t)};class wt extends B{constructor(i,n,o,{connect:c=!0,awareness:h=new rt(o),params:r={},protocols:l=[],WebSocketPolyfill:d=WebSocket,resyncInterval:u=-1,maxBackoffTime:p=2500,disableBc:m=!1}={}){for(super();"/"===i[i.length-1];)i=i.slice(0,i.length-1);this.serverUrl=i,this.bcChannel=i+"/"+n,this.maxBackoffTime=p,this.params=r,this.protocols=l,this.roomname=n,this.doc=o,this._WS=d,this.awareness=h,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ut.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=c,this._resyncInterval=0,u>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const s=a();t(s,0),ot(s,o),this.ws.send(e(s))}}),u)),this._bcSubscriber=(t,s)=>{if(s!==this){const s=mt(this,new Uint8Array(t),!1);H(s)>1&&nt(this.bcChannel,e(s),this)}},this._updateHandler=(i,n)=>{if(n!==this){const n=a();t(n,0),((e,i)=>{t(e,2),s(e,i)})(n,i),ft(this,e(n))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:i,updated:n,removed:o})=>{const c=i.concat(n).concat(o),r=a();t(r,1),s(r,dt(h,c)),ft(this,e(r))},this._exitHandler=()=>{lt(this.awareness,[o.clientID],"app closed")},A&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),h.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<g()-this.wsLastMessageReceived&&yt(this,this.ws,null)}),3e3),c&&this.connect()}get url(){const t=x(this.params,((t,s)=>`${encodeURIComponent(s)}=${encodeURIComponent(t)}`)).join("&");return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),A&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;var i;this.bcconnected||(i=this._bcSubscriber,it(this.bcChannel).subs.add(i),this.bcconnected=!0);const n=a();t(n,0),ot(n,this.doc),nt(this.bcChannel,e(n),this);const o=a();t(o,0),ct(o,this.doc),nt(this.bcChannel,e(o),this);const c=a();t(c,3),nt(this.bcChannel,e(c),this);const h=a();t(h,1),s(h,dt(this.awareness,[this.doc.clientID])),nt(this.bcChannel,e(h),this)}disconnectBc(){const i=a();t(i,1),s(i,dt(this.awareness,[this.doc.clientID],new Map)),ft(this,e(i)),this.bcconnected&&(((t,s)=>{const e=it(t);e.subs.delete(s)&&0===e.subs.size&&(e.bc.close(),st.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&yt(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(St(this),this.connectBc())}}class vt{provider;isConnected=!1;constructor(t,s,e){const i=e?.url||"ws://localhost:1234",n=e?.roomName||t;this.provider=new wt(i,n,s,{params:e?.params,protocols:e?.protocols,WebSocketPolyfill:e?.WebSocketPolyfill,awareness:e?.awareness,maxBackoffTime:e?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${n}`)}static with(t){return{create:(s,e)=>new vt(s,e,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,s)=>{const e=setTimeout((()=>{s(new Error("WebSocket connection timeout"))}),1e4),i=({status:s})=>{"connected"===s&&(clearTimeout(e),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(e),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class kt{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,s,e){const i=e?.name||t,n=e?.url||"ws://localhost:1234",o=e?.websocketProvider||kt.sharedWebSocketProvider;if(o){this.usesSharedSocket=!0;const t={websocketProvider:o,name:i,document:s,token:e?.token||null,onConnect:()=>{this.isConnected=!0,e?.quiet||console.info(`Hocuspocus connected: ${i}`),e?.onConnect&&e.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,e?.quiet||console.info(`Hocuspocus disconnected: ${i}`),e?.onDisconnect&&e.onDisconnect()},onSynced:()=>{this.isSynced=!0,e?.quiet||console.info(`Hocuspocus synced: ${i}`),e?.onSynced&&e.onSynced()}};void 0!==e?.forceSyncInterval&&(t.forceSyncInterval=e.forceSyncInterval),e?.onAuthenticationFailed&&(t.onAuthenticationFailed=e.onAuthenticationFailed),e?.onStatus&&(t.onStatus=e.onStatus),this.provider=new j(t),this.provider.attach(),e?.quiet||console.info(`Hocuspocus Provider initialized (multiplexed): ${i}`)}else{this.usesSharedSocket=!1;const t={url:n,name:i,document:s,token:e?.token||null,onConnect:()=>{this.isConnected=!0,e?.quiet||console.info(`Hocuspocus connected: ${i}`),e?.onConnect&&e.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,e?.quiet||console.info(`Hocuspocus disconnected: ${i}`),e?.onDisconnect&&e.onDisconnect()},onSynced:()=>{this.isSynced=!0,e?.quiet||console.info(`Hocuspocus synced: ${i}`),e?.onSynced&&e.onSynced()}};void 0!==e?.forceSyncInterval&&(t.forceSyncInterval=e.forceSyncInterval),e?.onAuthenticationFailed&&(t.onAuthenticationFailed=e.onAuthenticationFailed),e?.onStatus&&(t.onStatus=e.onStatus),e?.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),this.provider=new j(t),e?.quiet||console.info(`Hocuspocus Provider initialized: ${n}/${i}`)}}static createSharedWebSocket(t){if(kt.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),kt.sharedWebSocketProvider;const s={url:t.url};return t.WebSocketPolyfill&&(s.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(s.onConnect=t.onConnect),t.onDisconnect&&(s.onDisconnect=t.onDisconnect),t.onStatus&&(s.onStatus=t.onStatus),kt.sharedWebSocketProvider=new q(s),console.info(`Shared Hocuspocus WebSocket created: ${t.url}`),kt.sharedWebSocketProvider}static destroySharedWebSocket(){kt.sharedWebSocketProvider&&(kt.sharedWebSocketProvider.destroy(),kt.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return kt.sharedWebSocketProvider}static with(t){return{create:(s,e)=>new kt(s,e,t)}}async connect(){if(!this.isSynced)return new Promise(((t,s)=>{const e=setTimeout((()=>{s(new Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(e),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(e),this.provider.off("synced",i),void t();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{tt as BroadcastSyncProvider,kt as HocuspocusSyncProvider,vt as WebSocketSyncProvider}
+import{w as t,a as s,t as e,r as i,b as n,e as o,c,d as h,f as a,g as r,s as l,h as d,i as u,v as p,j as m,o as y,k as f,l as w,m as k,O as v,n as b,p as g,q as z,u as C,x,y as B,z as H,A as D,B as A,C as O,H as j,D as q}from"./p-DDIFE6oX.js";export{W as DEFAULT_BRUSH_CONFIG,Y as DEFAULT_LINE_TOOL_CONFIG,X as DEFAULT_TEXT_CONFIG,S as IndexedDBSyncProvider,V as KritzelAnchorManager,T as KritzelAppStateMap,J as KritzelBrushTool,Q as KritzelCursorHelper,M as KritzelEraserTool,I as KritzelGroup,F as KritzelImage,N as KritzelImageTool,G as KritzelLine,L as KritzelLineTool,E as KritzelPath,R as KritzelSelectionTool,K as KritzelText,P as KritzelTextTool,$ as KritzelThemeManager,U as KritzelWorkspace,_ as darkTheme,Z as lightTheme}from"./p-DDIFE6oX.js";class tt{doc;channel;_synced=!1;constructor(t,s,e){this.doc=s,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info(`BroadcastChannel Provider initialized: ${t}`)}handleDocUpdate=(i,n)=>{if(n!==this){const n=a();t(n,0),s(n,i),this.channel.postMessage(e(n))}};handleMessage(h){const l=r(new Uint8Array(h));switch(i(l)){case 0:const i=n(l);c(this.doc,i,this);break;case 1:this.broadcastSync();break;case 2:const h=n(l),r=o(this.doc,h);if(r.length>0){const i=a();t(i,0),s(i,r),this.channel.postMessage(e(i))}}}broadcastSync(){const i=a();t(i,2),s(i,h(this.doc)),this.channel.postMessage(e(i))}async connect(){if(!this._synced)return new Promise((t=>{const s=()=>{this._synced?t():setTimeout(s,50)};s()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const st=new Map,et="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=s=>s.key===t&&null!==this.onmessage&&this.onmessage({data:u(s.newValue||"")}),y(this._onChange)}postMessage(t){p.setItem(this.room,m(f(t)))}close(){w(this._onChange)}}:BroadcastChannel,it=t=>l(st,t,(()=>{const s=d(),e=new et(t);return e.onmessage=t=>s.forEach((s=>s(t.data,"broadcastchannel"))),{bc:e,subs:s}})),nt=(t,s,e=null)=>{const i=it(t);i.bc.postMessage(s),i.subs.forEach((t=>t(s,e)))},ot=(e,i)=>{t(e,0);const n=h(i);s(e,n)},ct=(e,i,n)=>{t(e,1),s(e,o(i,n))},ht=(t,s,e,i)=>{try{c(s,n(t),e)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},at=ht;class rt extends v{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=g();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const s=[];this.meta.forEach(((e,i)=>{i!==this.clientID&&3e4<=t-e.lastUpdated&&this.states.has(i)&&s.push(i)})),s.length>0&&lt(this,s,"timeout")}),b(3e3)),t.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(t){const s=this.clientID,e=this.meta.get(s),i=void 0===e?0:e.clock+1,n=this.states.get(s);null===t?this.states.delete(s):this.states.set(s,t),this.meta.set(s,{clock:i,lastUpdated:g()});const o=[],c=[],h=[],a=[];null===t?a.push(s):null==n?null!=t&&o.push(s):(c.push(s),z(n,t)||h.push(s)),(o.length>0||h.length>0||a.length>0)&&this.emit("change",[{added:o,updated:h,removed:a},"local"]),this.emit("update",[{added:o,updated:c,removed:a},"local"])}setLocalStateField(t,s){const e=this.getLocalState();null!==e&&this.setLocalState({...e,[t]:s})}getStates(){return this.states}}const lt=(t,s,e)=>{const i=[];for(let e=0;e<s.length;e++){const n=s[e];if(t.states.has(n)){if(t.states.delete(n),n===t.clientID){const s=t.meta.get(n);t.meta.set(n,{clock:s.clock+1,lastUpdated:g()})}i.push(n)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},e]),t.emit("update",[{added:[],updated:[],removed:i},e]))},dt=(s,i,n=s.states)=>{const o=i.length,c=a();t(c,o);for(let e=0;e<o;e++){const o=i[e],h=n.get(o)||null,a=s.meta.get(o).clock;t(c,o),t(c,a),C(c,JSON.stringify(h))}return e(c)},ut=[];ut[0]=(s,e,o,c)=>{t(s,0);const h=((t,s,e,o,c)=>{const h=i(t);switch(h){case 0:((t,s,e)=>{ct(s,e,n(t))})(t,s,e);break;case 1:ht(t,e,o,c);break;case 2:at(t,e,o,c);break;default:throw new Error("Unknown message type")}return h})(e,s,o.doc,o);c&&1===h&&!o.synced&&(o.synced=!0)},ut[3]=(e,i,n)=>{t(e,1),s(e,dt(n.awareness,Array.from(n.awareness.getStates().keys())))},ut[1]=(t,s,e)=>{((t,s,e)=>{const n=r(s),o=g(),c=[],h=[],a=[],l=[],d=i(n);for(let s=0;s<d;s++){const s=i(n);let e=i(n);const r=JSON.parse(k(n)),d=t.meta.get(s),u=t.states.get(s),p=void 0===d?0:d.clock;(p<e||p===e&&null===r&&t.states.has(s))&&(null===r?s===t.clientID&&null!=t.getLocalState()?e++:t.states.delete(s):t.states.set(s,r),t.meta.set(s,{clock:e,lastUpdated:o}),void 0===d&&null!==r?c.push(s):void 0!==d&&null===r?l.push(s):null!==r&&(z(r,u)||a.push(s),h.push(s)))}(c.length>0||a.length>0||l.length>0)&&t.emit("change",[{added:c,updated:a,removed:l},e]),(c.length>0||h.length>0||l.length>0)&&t.emit("update",[{added:c,updated:h,removed:l},e])})(e.awareness,n(s),e)},ut[2]=(t,s,e)=>{((t,s,e)=>{0===i(t)&&e(0,k(t))})(s,0,((t,s)=>pt(e,s)))};const pt=(t,s)=>console.warn(`Permission denied to access ${t.url}.\n${s}`),mt=(t,s,e)=>{const n=r(s),o=a(),c=i(n),h=t.messageHandlers[c];return h?h(o,n,t,e,c):console.error("Unable to compute message"),o},yt=(t,s,e)=>{s===t.ws&&(t.emit("connection-close",[e,t]),t.ws=null,s.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,lt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((s=>s!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(St,A(100*O(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},St=i=>{if(i.shouldConnect&&null===i.ws){const n=new i._WS(i.url,i.protocols);n.binaryType="arraybuffer",i.ws=n,i.wsconnecting=!0,i.wsconnected=!1,i.synced=!1,n.onmessage=t=>{i.wsLastMessageReceived=g();const s=mt(i,new Uint8Array(t.data),!0);H(s)>1&&n.send(e(s))},n.onerror=t=>{i.emit("connection-error",[t,i])},n.onclose=t=>{yt(i,n,t)},n.onopen=()=>{i.wsLastMessageReceived=g(),i.wsconnecting=!1,i.wsconnected=!0,i.wsUnsuccessfulReconnects=0,i.emit("status",[{status:"connected"}]);const o=a();if(t(o,0),ot(o,i.doc),n.send(e(o)),null!==i.awareness.getLocalState()){const o=a();t(o,1),s(o,dt(i.awareness,[i.doc.clientID])),n.send(e(o))}},i.emit("status",[{status:"connecting"}])}},ft=(t,s)=>{const e=t.ws;t.wsconnected&&e&&e.readyState===e.OPEN&&e.send(s),t.bcconnected&&nt(t.bcChannel,s,t)};class wt extends B{constructor(i,n,o,{connect:c=!0,awareness:h=new rt(o),params:r={},protocols:l=[],WebSocketPolyfill:d=WebSocket,resyncInterval:u=-1,maxBackoffTime:p=2500,disableBc:m=!1}={}){for(super();"/"===i[i.length-1];)i=i.slice(0,i.length-1);this.serverUrl=i,this.bcChannel=i+"/"+n,this.maxBackoffTime=p,this.params=r,this.protocols=l,this.roomname=n,this.doc=o,this._WS=d,this.awareness=h,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ut.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=c,this._resyncInterval=0,u>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const s=a();t(s,0),ot(s,o),this.ws.send(e(s))}}),u)),this._bcSubscriber=(t,s)=>{if(s!==this){const s=mt(this,new Uint8Array(t),!1);H(s)>1&&nt(this.bcChannel,e(s),this)}},this._updateHandler=(i,n)=>{if(n!==this){const n=a();t(n,0),((e,i)=>{t(e,2),s(e,i)})(n,i),ft(this,e(n))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:i,updated:n,removed:o})=>{const c=i.concat(n).concat(o),r=a();t(r,1),s(r,dt(h,c)),ft(this,e(r))},this._exitHandler=()=>{lt(this.awareness,[o.clientID],"app closed")},D&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),h.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<g()-this.wsLastMessageReceived&&yt(this,this.ws,null)}),3e3),c&&this.connect()}get url(){const t=x(this.params,((t,s)=>`${encodeURIComponent(s)}=${encodeURIComponent(t)}`)).join("&");return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),D&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;var i;this.bcconnected||(i=this._bcSubscriber,it(this.bcChannel).subs.add(i),this.bcconnected=!0);const n=a();t(n,0),ot(n,this.doc),nt(this.bcChannel,e(n),this);const o=a();t(o,0),ct(o,this.doc),nt(this.bcChannel,e(o),this);const c=a();t(c,3),nt(this.bcChannel,e(c),this);const h=a();t(h,1),s(h,dt(this.awareness,[this.doc.clientID])),nt(this.bcChannel,e(h),this)}disconnectBc(){const i=a();t(i,1),s(i,dt(this.awareness,[this.doc.clientID],new Map)),ft(this,e(i)),this.bcconnected&&(((t,s)=>{const e=it(t);e.subs.delete(s)&&0===e.subs.size&&(e.bc.close(),st.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&yt(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(St(this),this.connectBc())}}class kt{provider;isConnected=!1;constructor(t,s,e){const i=e?.url||"ws://localhost:1234",n=e?.roomName||t;this.provider=new wt(i,n,s,{params:e?.params,protocols:e?.protocols,WebSocketPolyfill:e?.WebSocketPolyfill,awareness:e?.awareness,maxBackoffTime:e?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${n}`)}static with(t){return{create:(s,e)=>new kt(s,e,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,s)=>{const e=setTimeout((()=>{s(new Error("WebSocket connection timeout"))}),1e4),i=({status:s})=>{"connected"===s&&(clearTimeout(e),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(e),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class vt{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,s,e){const i=e?.name||t,n=e?.url||"ws://localhost:1234",o=e?.websocketProvider||vt.sharedWebSocketProvider;if(o){this.usesSharedSocket=!0;const t={websocketProvider:o,name:i,document:s,token:e?.token||null,onConnect:()=>{this.isConnected=!0,e?.quiet||console.info(`Hocuspocus connected: ${i}`),e?.onConnect&&e.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,e?.quiet||console.info(`Hocuspocus disconnected: ${i}`),e?.onDisconnect&&e.onDisconnect()},onSynced:()=>{this.isSynced=!0,e?.quiet||console.info(`Hocuspocus synced: ${i}`),e?.onSynced&&e.onSynced()}};void 0!==e?.forceSyncInterval&&(t.forceSyncInterval=e.forceSyncInterval),e?.onAuthenticationFailed&&(t.onAuthenticationFailed=e.onAuthenticationFailed),e?.onStatus&&(t.onStatus=e.onStatus),this.provider=new j(t),this.provider.attach(),e?.quiet||console.info(`Hocuspocus Provider initialized (multiplexed): ${i}`)}else{this.usesSharedSocket=!1;const t={url:n,name:i,document:s,token:e?.token||null,onConnect:()=>{this.isConnected=!0,e?.quiet||console.info(`Hocuspocus connected: ${i}`),e?.onConnect&&e.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,e?.quiet||console.info(`Hocuspocus disconnected: ${i}`),e?.onDisconnect&&e.onDisconnect()},onSynced:()=>{this.isSynced=!0,e?.quiet||console.info(`Hocuspocus synced: ${i}`),e?.onSynced&&e.onSynced()}};void 0!==e?.forceSyncInterval&&(t.forceSyncInterval=e.forceSyncInterval),e?.onAuthenticationFailed&&(t.onAuthenticationFailed=e.onAuthenticationFailed),e?.onStatus&&(t.onStatus=e.onStatus),e?.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),this.provider=new j(t),e?.quiet||console.info(`Hocuspocus Provider initialized: ${n}/${i}`)}}static createSharedWebSocket(t){if(vt.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),vt.sharedWebSocketProvider;const s={url:t.url};return t.WebSocketPolyfill&&(s.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(s.onConnect=t.onConnect),t.onDisconnect&&(s.onDisconnect=t.onDisconnect),t.onStatus&&(s.onStatus=t.onStatus),vt.sharedWebSocketProvider=new q(s),console.info(`Shared Hocuspocus WebSocket created: ${t.url}`),vt.sharedWebSocketProvider}static destroySharedWebSocket(){vt.sharedWebSocketProvider&&(vt.sharedWebSocketProvider.destroy(),vt.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return vt.sharedWebSocketProvider}static with(t){return{create:(s,e)=>new vt(s,e,t)}}async connect(){if(!this.isSynced)return new Promise(((t,s)=>{const e=setTimeout((()=>{s(new Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(e),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(e),this.provider.off("synced",i),void t();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{tt as BroadcastSyncProvider,vt as HocuspocusSyncProvider,kt as WebSocketSyncProvider}