kritzel-stencil 0.1.21 → 0.1.23

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-DDIFE6oX.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-BW07ZETV.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -517,37 +517,16 @@ const KritzelControls = class {
     theme;
     isControlsReady;
     firstConfig = null;
-    isTooltipVisible = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     selectedSubOptions = new Map();
-    openSubMenuControl = null;
     canScrollLeft = false;
     canScrollRight = false;
     needsScrolling = false;
     displayValues = null;
-    handleDocumentClick(event) {
-        if (!this.kritzelEngine) {
-            return;
-        }
-        // Use composedPath to check if click is inside tooltip (works across shadow DOM boundaries)
-        const path = event.composedPath();
-        const isInsideTooltip = path.some(el => {
-            const element = el;
-            if (element.tagName) {
-                return element.tagName.toLowerCase() === 'kritzel-tooltip' || element.classList?.contains('kritzel-tooltip');
-            }
-            return false;
-        });
-        if (isInsideTooltip) {
-            return;
-        }
-        this.isTooltipVisible = false;
-    }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
             this.closeTooltip();
-            this.openSubMenuControl = null;
             this.kritzelEngine?.enable();
         }
     }
@@ -556,8 +535,7 @@ const KritzelControls = class {
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
         }
-        this.isTooltipVisible = false;
-        this.openSubMenuControl = null;
+        this.closeTooltip();
     }
     handleSelectionChange() {
         if (this.activeControl?.tool instanceof KritzelSelectionTool) {
@@ -570,11 +548,11 @@ const KritzelControls = class {
         }
     }
     async closeTooltip() {
-        this.isTooltipVisible = false;
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll'));
     }
     kritzelEngine = null;
-    tooltipRef = null;
     toolsScrollRef = null;
+    configTriggerRef = null;
     get activeToolAsTextTool() {
         return this.activeControl?.tool;
     }
@@ -630,14 +608,23 @@ const KritzelControls = class {
     componentDidLoad() {
         this.updateScrollIndicators();
     }
+    componentDidRender() {
+        this.updateScrollIndicators();
+    }
     updateScrollIndicators() {
         if (!this.toolsScrollRef)
             return;
         const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
         const threshold = 2; // Small threshold to account for rounding
-        this.canScrollLeft = scrollLeft > threshold;
-        this.canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
-        this.needsScrolling = scrollWidth > clientWidth;
+        const canScrollLeft = scrollLeft > threshold;
+        const canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+        const needsScrolling = scrollWidth > clientWidth;
+        if (this.canScrollLeft !== canScrollLeft)
+            this.canScrollLeft = canScrollLeft;
+        if (this.canScrollRight !== canScrollRight)
+            this.canScrollRight = canScrollRight;
+        if (this.needsScrolling !== needsScrolling)
+            this.needsScrolling = needsScrolling;
     }
     handleToolsScroll = () => {
         this.updateScrollIndicators();
@@ -676,20 +663,10 @@ const KritzelControls = class {
             await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
         }
     }
-    handleConfigClick(event) {
-        event.stopPropagation();
-        this.isTooltipVisible = !this.isTooltipVisible;
-        setTimeout(() => {
-            this.tooltipRef?.focusContent();
-        }, 100);
-    }
     async handleToolChange(event) {
         this.activeControl = { ...this.activeControl, tool: event.detail };
         await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
-    handleTooltipClosed() {
-        this.isTooltipVisible = false;
-    }
     /**
      * Get the currently selected sub-option for a control.
      * Returns the first sub-option as default if none is selected.
@@ -699,18 +676,6 @@ const KritzelControls = class {
             return undefined;
         return this.selectedSubOptions.get(control.name) || control.subOptions[0];
     }
-    /**
-     * Toggle the submenu for a split-button control
-     */
-    toggleSubMenu(event, control) {
-        event.stopPropagation();
-        if (this.openSubMenuControl?.name === control.name) {
-            this.openSubMenuControl = null;
-        }
-        else {
-            this.openSubMenuControl = control;
-        }
-    }
     /**
      * Select a sub-option and update the tool property
      */
@@ -724,7 +689,7 @@ const KritzelControls = class {
             control.tool[option.toolProperty] = option.value;
         }
         // Close the submenu
-        this.openSubMenuControl = null;
+        this.closeTooltip();
         // Activate this control
         await this.handleControlClick(control);
     }
@@ -737,23 +702,17 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.controls.filter(c => c.type === 'tool');
         const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: 'cb713bc59241300837519145031c1d15109e28c3', class: {
+        return (h(Host, { key: '0cb024600ea4730de6f70731ba481f4a1b397335', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '62cb00da2676739aa472d69e8e453501bd78e408', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'e1e3f51d18f8431b55ad03fc4ee571006a8b99a3', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '0376615eb976d961cb17ba02aab36f4127343899', class: "kritzel-controls" }, h("div", { key: 'c72373afc1eb04fb39868d107cb0a35c846097fe', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '1aa1ece36dda200a4c62529c08f1787d8bd4b534', class: "kritzel-tools-scroll", ref: el => {
-                this.toolsScrollRef = el;
-                // Update indicators when ref is set
-                if (el)
-                    this.updateScrollIndicators();
-            }, onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '3b3dc23abaf8aa0087ad9df10c2fdc150c7f9aa1', class: "kritzel-controls" }, h("div", { key: 'cf8cbd5042ec9f261eb76af29cceb375fbfcc658', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '1ebb0c83e09df88e6c53fee7ecf151688d847f2a', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
                 const isActive = this.activeControl?.name === control.name;
-                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
                 return (h("div", { class: {
                         'kritzel-control-split': true,
                         'selected': isActive,
@@ -763,7 +722,10 @@ const KritzelControls = class {
                     } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
                         'kritzel-control-dropdown': true,
                         'visible': isActive,
-                    }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                    }, ref: el => {
+                        if (el)
+                            control._triggerRef = el;
+                    }, "aria-label": "Select shape type", tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                         'kritzel-submenu-item': true,
                         'active': option.id === selectedSubOption?.id,
                     }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
@@ -773,12 +735,15 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: 'a3129881a9c992b6fbd94b66a6325d46072dba60', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '725c36b2e36168e5a9a97a3fceded3f110c499d6', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: '57de6641291894b0e507e90987ea94a9103c25ca', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '182317753d162abe9c804a4757ed19505bb3b487', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '13ecc34147d44b2bb12eb0008eec179db55f5840', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'bc4053cf9feb69c2962fe5a86cd7cf811b03e971', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+            }, key: configControl.name }, h("div", { key: '2bfdb194ee2044529427b5806dd2d1b2bf6a32b5', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'bc64cf1a330b9620536f1b044559c3f45756ab23', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'd991a450027ec60fa8a46c2f877dc92e5bf1e73a', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '09883ce02e94993849e89bd284c65ea7af59261f', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", ref: el => {
+                if (el)
+                    this.configTriggerRef = el;
+            }, onKeyDown: event => {
                 if (event.key === 'Enter') {
-                    this.handleConfigClick?.(event);
+                    event.target.click();
                 }
             }, style: {
                 cursor: 'pointer',
@@ -22031,7 +21996,9 @@ const KritzelEngine = class {
             return;
         }
         this.core.store.state.pointers.delete(ev.pointerId);
-        this.host.releasePointerCapture(ev.pointerId);
+        if (this.host.hasPointerCapture(ev.pointerId)) {
+            this.host.releasePointerCapture(ev.pointerId);
+        }
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
             this.core.cursorManager.resetToDefault();
@@ -22043,7 +22010,9 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
-        this.host.releasePointerCapture(ev.pointerId);
+        if (this.host.hasPointerCapture(ev.pointerId)) {
+            this.host.releasePointerCapture(ev.pointerId);
+        }
         this.core.store.state.pointers.delete(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
@@ -22421,7 +22390,7 @@ const KritzelEngine = class {
         if (this.core.store.totalObjectCount > 0) {
             this.objectsInViewportChange.emit(visibleObjects);
         }
-        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: {
+        return (h(Host, { key: '6cc974d4e3fdcfe1b185a014fa9eb6b1243dde91' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '8f8ac08f2d643b664e2b39fbaf50e0c474c5255d', class: "debug-panel" }, h("div", { key: '79ad4f3db958d8b17b2efdb3a1a6ab24d81bb436' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '0cdaa6abeebc865eec1c3026d5fd38e00bd388a7' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '125ca4bb69ca2fcc647bd55e9cb8c4072fbaa600' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '02aee9b8359b9cdefa2f54afc26d328dab984ea3' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '8398e28a5c70318dace386182633088e5e3267d5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '0e17a7fbf96acbe1cbf2769b0fa853eaf7fb6f3b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'd214e66618d2c38ca94154e7b06f681d815ffadc' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '35695f7f82605bf6ba0fd512f814a7da723f623c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '6935c9e5cedb8f7bd6d81a5d02b383fbb0e4d3a2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '6a7490a07ca3019157d6a4b10b9164d3a504c4c0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'ba70d5d01cad9e0fb6e80a4955e3361723af3531' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'be3a408762c8bada64224c4da92baf987ae62f6d' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9cf44848dbcb7e8b1a40618db1ee6cf019e01720' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'b53633b5c099b338089294c897cfbc32973d360d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '0cab012a88532c69ba0aeb1daa7646e91c4f029d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1c47bfd56352b70a8eafb771470d9912240e9885' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '1147a866a58f3d50c8751fc02f6614e899b13bc0' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a308df3601fd5ba49741f2efbc3d262059daed2d' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'af5ceafa9bb39c2e2085815c691198f7a0b48017' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '8abffd4f1e3e7b174ee5e5e9070fc0ca0703d1aa' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e127318f52e25d65b323d3325b02a0125864c3be' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'b8f21b1a1bd674f7403e3096e7cb52e629b2df89' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '892abdc68df061495f88ceea2037766b537f82ab' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '04f08e11cb67cedf31900d01803960caaa0a5a0b' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '6a6efb9f05cb70eaff83cea1a22e1151a08e2ec9' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'c9e2392f43cf54b57f0fb49a361d47a2c4156ca3', 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, id: object.id, class: "object", style: {
@@ -22430,7 +22399,7 @@ const KritzelEngine = class {
                     position: 'absolute',
                     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: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22440,7 +22409,8 @@ 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", 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", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22450,7 +22420,8 @@ 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", { 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("img", { ref: el => object.mount(el), src: object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22466,13 +22437,9 @@ const KritzelEngine = class {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, h("img", { ref: el => object.mount(el), src: object.src, style: {
-                    width: '100%',
-                    height: '100%',
                     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", { style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22487,14 +22454,9 @@ const KritzelEngine = class {
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
-                    overflow: 'visible',
-                } }, h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                    pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22504,10 +22466,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("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22521,10 +22480,7 @@ const KritzelEngine = class {
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
-                } }, h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22544,8 +22500,7 @@ const KritzelEngine = class {
                     transform: `scale(${object.scaleFactor})`,
                     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", { style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22555,10 +22510,6 @@ 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("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
-                    width: '100%',
-                    height: '100%',
-                    position: 'relative',
                     overflow: 'visible',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     position: 'absolute',
@@ -22580,7 +22531,7 @@ const KritzelEngine = class {
                     textAlign: 'center',
                     overflow: 'hidden',
                     pointerEvents: object.isEditing ? 'auto' : 'none',
-                } })))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
+                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
                     pointerEvents: 'none',
                     position: 'absolute',
                     left: `${object.totalWidth}px`,
@@ -22767,7 +22718,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), 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: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '307012661cd1021e7e3c3db48f1671700f5de91b', 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`,
@@ -22778,7 +22729,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: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bd48d2a8e7c83e2c5d80c92548b00720650391ab', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23789,7 +23740,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.21';
+const KRITZEL_VERSION = '0.1.23';
 
 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}`;
 
@@ -24287,22 +24238,25 @@ const KritzelTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tooltipClosed = createEvent(this, "tooltipClosed");
+        this.tooltipOpened = createEvent(this, "tooltipOpened");
     }
     get host() { return getElement(this); }
     isVisible = false;
     anchorElement;
+    triggerElement;
     offsetY = 24;
     tooltipClosed;
+    tooltipOpened;
     positionX = 0;
     positionY = 0;
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
-        // Check if click is inside the tooltip host or any of its shadow DOM content
         const path = event.composedPath();
         const isInsideTooltip = path.some(el => el === this.host);
-        if (!isInsideTooltip) {
-            this.tooltipClosed.emit();
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            this.close();
         }
     }
     handleOutsidePointerDown(event) {
@@ -24310,23 +24264,73 @@ const KritzelTooltip = class {
             return;
         const path = event.composedPath();
         const isInsideTooltip = path.some(el => el === this.host);
-        if (!isInsideTooltip) {
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
             event.stopPropagation();
             event.preventDefault();
-            this.tooltipClosed.emit();
+            this.close();
+        }
+    }
+    handleCloseAll(event) {
+        if (event.detail !== this.host) {
+            this.close();
         }
     }
     handleWindowResize() {
         this.calculateAdjustedPosition();
     }
+    handleTriggerElementChange(newTrigger, oldTrigger) {
+        if (oldTrigger) {
+            oldTrigger.removeEventListener('click', this.handleTriggerClick);
+        }
+        if (newTrigger) {
+            newTrigger.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleVisibilityChange(newValue) {
+        if (newValue) {
+            this.calculateAdjustedPosition();
+            requestAnimationFrame(() => {
+                this.focusContent();
+            });
+        }
+    }
+    async open() {
+        if (this.isVisible)
+            return;
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll', { detail: this.host }));
+        this.isVisible = true;
+        this.tooltipOpened.emit();
+    }
+    async close() {
+        if (!this.isVisible)
+            return;
+        this.isVisible = false;
+        this.tooltipClosed.emit();
+    }
+    async toggle() {
+        if (this.isVisible) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
     async focusContent() {
         const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length > 0) {
             focusableElements[0].focus();
         }
     }
+    connectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
     componentDidLoad() {
-        this.focusSlottedContent();
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
     }
     componentWillLoad() {
         this.calculateAdjustedPosition();
@@ -24334,14 +24338,15 @@ const KritzelTooltip = class {
     componentWillUpdate() {
         this.calculateAdjustedPosition();
     }
-    focusSlottedContent() {
-        const slot = this.host.shadowRoot?.querySelector('slot');
-        const assignedElements = slot?.assignedElements() || [];
-        if (assignedElements.length > 0) {
-            const firstElement = assignedElements[0];
-            firstElement.focus();
+    disconnectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
         }
     }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
     calculateAdjustedPosition() {
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
@@ -24362,15 +24367,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd23199ba12acd84fe7fb7a3e133a6605b175bcec', style: {
+        return (h(Host, { key: '4145c722bdd124506bf988e5c2d4886bb10c5516', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '030ca8a36358b78ba726f7406e76cea16a4e75e9', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '148ed867ee7962487d38f82e6d37b8599a7158af' }))));
+            } }, h("div", { key: '7b8b74d2a9027b23bd6ebb0cb1f628820320dfe2', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '52b93a5847696ddd740fce6d69ac48f20a215bd3' }))));
     }
+    static get watchers() { return {
+        "triggerElement": [{
+                "handleTriggerElementChange": 0
+            }],
+        "isVisible": [{
+                "handleVisibilityChange": 0
+            }]
+    }; }
 };
 KritzelTooltip.style = kritzelTooltipCss();
 

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["kritzel-back-to-content_32",[[512,"kritzel-editor",{"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"lockDrawingScale":[1028,"lock-drawing-scale"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"isBackToContentButtonVisible":[32],"currentTheme":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}],"currentTheme":[{"onCurrentThemeChange":0}]}],[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}]}],[513,"kritzel-settings",{"isDialogOpen":[32],"selectedCategoryId":[32],"scaleMin":[32],"scaleMax":[32],"lockDrawingScale":[32],"currentTheme":[32],"open":[64]}],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-more-menu",{"items":[16],"icon":[1],"iconSize":[2,"icon-size"],"offsetY":[2,"offset-y"],"menuAnchor":[32]}],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"getCopiedObjects":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[1,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[1,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-export",{"isDialogOpen":[32],"previewUrl":[32],"isLoading":[32],"open":[64]}],[513,"kritzel-back-to-content",{"visible":[4],"text":[1]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"theme":[1],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[769,"kritzel-master-detail",{"items":[16],"selectedItemId":[1,"selected-item-id"],"focusedIndex":[32],"showMobileDetail":[32]},null,{"selectedItemId":[{"watchSelectedItemId":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-numeric-input",{"value":[1026],"min":[2],"max":[2],"step":[2],"label":[1],"inputValue":[32]},null,{"value":[{"onValueChange":0}]}],[513,"kritzel-slide-toggle",{"checked":[1028],"disabled":[4],"label":[1]}],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[9,"resize","handleWindowResize"]]],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1040],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2],"theme":[1]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-dialog",{"isOpen":[516,"is-open"],"dialogTitle":[1,"dialog-title"],"closable":[4],"closeOnBackdrop":[4,"close-on-backdrop"],"closeOnEscape":[4,"close-on-escape"],"autoFocus":[4,"auto-focus"],"trapFocus":[4,"trap-focus"],"size":[1],"fullscreenOnMobile":[4,"fullscreen-on-mobile"],"isAnimating":[32],"open":[64],"close":[64],"focusFirstElement":[64]},[[8,"keydown","handleKeyDown"]],{"isOpen":[{"handleIsOpenChange":0}]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-color",{"value":[1],"theme":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return bootstrapLazy([["kritzel-back-to-content_32",[[512,"kritzel-editor",{"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"lockDrawingScale":[1028,"lock-drawing-scale"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"isBackToContentButtonVisible":[32],"currentTheme":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}],"currentTheme":[{"onCurrentThemeChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"theme":[1],"firstConfig":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"canScrollLeft":[32],"canScrollRight":[32],"needsScrolling":[32],"displayValues":[32],"closeTooltip":[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{"theme":[{"onThemeChange":0}]}],[513,"kritzel-settings",{"isDialogOpen":[32],"selectedCategoryId":[32],"scaleMin":[32],"scaleMax":[32],"lockDrawingScale":[32],"currentTheme":[32],"open":[64]}],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-more-menu",{"items":[16],"icon":[1],"iconSize":[2,"icon-size"],"offsetY":[2,"offset-y"],"menuAnchor":[32]}],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"getCopiedObjects":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[1,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[1,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-export",{"isDialogOpen":[32],"previewUrl":[32],"isLoading":[32],"open":[64]}],[513,"kritzel-back-to-content",{"visible":[4],"text":[1]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"theme":[1],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[769,"kritzel-master-detail",{"items":[16],"selectedItemId":[1,"selected-item-id"],"focusedIndex":[32],"showMobileDetail":[32]},null,{"selectedItemId":[{"watchSelectedItemId":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-numeric-input",{"value":[1026],"min":[2],"max":[2],"step":[2],"label":[1],"inputValue":[32]},null,{"value":[{"onValueChange":0}]}],[513,"kritzel-slide-toggle",{"checked":[1028],"disabled":[4],"label":[1]}],[769,"kritzel-tooltip",{"isVisible":[1028,"is-visible"],"anchorElement":[16],"triggerElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"open":[64],"close":[64],"toggle":[64],"focusContent":[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{"triggerElement":[{"handleTriggerElementChange":0}],"isVisible":[{"handleVisibilityChange":0}]}],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1040],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2],"theme":[1]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-dialog",{"isOpen":[516,"is-open"],"dialogTitle":[1,"dialog-title"],"closable":[4],"closeOnBackdrop":[4,"close-on-backdrop"],"closeOnEscape":[4,"close-on-escape"],"autoFocus":[4,"auto-focus"],"trapFocus":[4,"trap-focus"],"size":[1],"fullscreenOnMobile":[4,"fullscreen-on-mobile"],"isAnimating":[32],"open":[64],"close":[64],"focusFirstElement":[64]},[[8,"keydown","handleKeyDown"]],{"isOpen":[{"handleIsOpenChange":0}]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-color",{"value":[1],"theme":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 };
 
 export { defineCustomElements };