kritzel-stencil 0.0.169 → 0.0.171

package/dist/cjs/kritzel-color_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Cj__YTlG.js');
-var defaultLineTool_config = require('./default-line-tool.config-Bs88k0jE.js');
+var defaultLineTool_config = require('./default-line-tool.config-JuTDR6PF.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -103,6 +103,7 @@ KritzelColorPalette.style = kritzelColorPaletteCss;
 
 const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
 
+const VIEWPORT_PADDING = 8;
 const KritzelContextMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -127,6 +128,42 @@ const KritzelContextMenu = class {
     componentWillLoad() {
         this.updateMenuItems();
     }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+    }
+    adjustPositionToViewport() {
+        const rect = this.host.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const currentLeft = parseFloat(this.host.style.left) || 0;
+        const currentTop = parseFloat(this.host.style.top) || 0;
+        let newLeft = currentLeft;
+        let newTop = currentTop;
+        // Check if menu extends beyond right edge
+        if (rect.right > viewportWidth - VIEWPORT_PADDING) {
+            newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;
+        }
+        // Check if menu extends beyond bottom edge
+        if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {
+            newTop = viewportHeight - rect.height - VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond left edge
+        if (newLeft < VIEWPORT_PADDING) {
+            newLeft = VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond top edge
+        if (newTop < VIEWPORT_PADDING) {
+            newTop = VIEWPORT_PADDING;
+        }
+        // Only update if position changed to avoid infinite loops
+        if (newLeft !== currentLeft || newTop !== currentTop) {
+            this.host.style.left = `${newLeft}px`;
+            this.host.style.top = `${newTop}px`;
+        }
+    }
     handleItemClick(item, isDisabled) {
         if (!isDisabled) {
             this.actionSelected.emit(item);
@@ -153,7 +190,7 @@ const KritzelContextMenu = class {
         return defaultValue;
     }
     render() {
-        return (index.h(index.Host, { key: '102f1fd72d991e6d5c0fa6025ed75d860e8e9852' }, index.h("div", { key: '510ea27fdcddc78a51220f68a8d8ba82fd2bd108', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
+        return (index.h(index.Host, { key: '96a3530caa4567d30410f49311389818bbd45f64' }, index.h("div", { key: '79e4229815a152720ae21069233ff344f297349b', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
     static get watchers() { return {
         "items": ["onItemsChanged"]
@@ -196,14 +233,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '3111b2870e4a02da26bac5450424cadeef8c8d39' }, index.h("div", { key: '4bbf6bede0822c35e206566dd176e6b150b54098', style: {
+        return (index.h(index.Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, index.h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-color-palette", { key: 'eb9c5690f823ca278d60629b9ac0595411771d05', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("button", { key: 'd5b0d12188babdd26bbf97344cec60760b7c4f87', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: 'e1beea772a60dda335a56815fa39609c37849769', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-stroke-size", { key: '8b31bac4e67752f55d2c2281b37a38e6fd801a57', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -237,14 +274,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '172bfe742f7fcb7db080729ac9b07cfd7a2f3f86' }, index.h("div", { key: 'de4000668ebc8a0fb27d9ae9b817b68a5d3e69b0', style: {
+        return (index.h(index.Host, { key: '3695b187943af25566885d63257ae3de9f405ea5' }, index.h("div", { key: '7bb146ae3c188478ba17f18f70fd170ce3536308', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '4940703e315d0991d4eb2000f4e1a1da6e113cb2', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '5a32fe373c1ce5cd312fa67e2b345fcc9eda81e5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '2dc5d0ed3d4bfe02e560e0d9b7fc487e343f56d9', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'c3cba9ef7408aa726954b649d76bd1ae40f0aec6', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: 'b9f879d5f2bcc4b92519235e6fc0a22195a30a8f', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: '87f4c5ac2e2a4cfea216b1b828faad231438b9ec', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '2e73aaf7da659b9e069c247cc762f68394212293', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '785b664697ba266432c535ea26e0665f8d8d657f', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ed2517a39d254b77f45154914b3ce6a934f66c33', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '9b25c9607fa69c991e769852e3e3e378e48387bd', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -395,13 +432,13 @@ const KritzelControls = class {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof defaultLineTool_config.KritzelBrushTool ||
             this.activeControl?.tool instanceof defaultLineTool_config.KritzelTextTool;
-        return (index.h(index.Host, { key: '542415492107a5aa516602f53cbb830ee58ae320', class: {
+        return (index.h(index.Host, { key: '92696a0ac908d498211edcbe9b2b90c81aa28a4f', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '38ea0136db9c81b38753a88915b98433f75dc9d4', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'a75649503fa82aa173fd19c0558b4b54503ff4d6', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '30843843f99eeb50cdbe2dd22472c112bfe952f4', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: 'e45118f06606306309114470546c34a8b5afd8f7', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -417,7 +454,7 @@ const KritzelControls = class {
                         } }, index.h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, index.h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), index.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 }, index.h("kritzel-icon", { name: "chevron-down", size: 12 })), index.h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, showArrow: false, onTooltipClosed: () => { this.openSubMenuControl = null; } }, index.h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (index.h("button", { class: {
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, index.h("kritzel-icon", { name: "chevron-down", size: 12 })), index.h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, index.h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (index.h("button", { class: {
                             'kritzel-submenu-item': true,
                             'active': option.id === selectedSubOption?.id,
                         }, key: option.id, onClick: () => this.selectSubOption(control, option) }, index.h("kritzel-icon", { name: option.icon, size: 20 }), index.h("span", null, option.label))))))));
@@ -1319,6 +1356,21 @@ const KritzelEditor = class {
         { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
         { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
         { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+        {
+            label: 'Group',
+            icon: 'group',
+            disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
+            action: () => this.engineRef.group(),
+        },
+        {
+            label: 'Ungroup',
+            icon: 'ungroup',
+            disabled: async () => {
+                const selectedObjects = await this.engineRef.getSelectedObjects();
+                return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');
+            },
+            action: () => this.engineRef.ungroup(),
+        },
     ];
     customSvgIcons = {};
     isControlsVisible = true;
@@ -1470,7 +1522,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a39268fb2722bc9e1627a46a3430a574322dfdfb' }, index.h("kritzel-workspace-manager", { key: 'b0c08f2cab64347c0ee14a87ed0ab769a2e95733', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: 'c0efb9b0cdfdf3a9ba945e71e37c60ebfc45e981', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), index.h("kritzel-controls", { key: '5a275fb94e2f55a1f79d6d5b5f518305cd739f24', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (index.h(index.Host, { key: '497c7c69759c966dd2132007d80c5c772258a6c9' }, index.h("kritzel-workspace-manager", { key: '169e10c9b338283e1be32868aa0e354e7a149749', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: 'c8cf58aa8bfc9a5d4a2e4a4499c60938b0d55758', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), index.h("kritzel-controls", { key: '68f2bce210dab937080618a2a4f069bf8103449f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
@@ -18920,6 +18972,9 @@ class KritzelKeyHandler extends defaultLineTool_config.KritzelBaseHandler {
         { key: '-', ctrl: true, condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
         { key: '*', shift: true, condition: c => !!c.store.selectionGroup, action: c => c.bringToFront() },
         { key: '_', shift: true, condition: c => !!c.store.selectionGroup, action: c => c.sendToBack() },
+        // Grouping
+        { key: 'g', ctrl: true, condition: c => !!c.store.selectionGroup && c.store.selectionGroup.objects.length >= 2, action: c => c.group() },
+        { key: 'G', ctrl: true, shift: true, condition: c => !!c.store.selectionGroup, action: c => c.ungroup() },
     ];
     constructor(core) {
         super(core);
@@ -19164,6 +19219,9 @@ class KritzelReviver {
                     case 'KritzelSelectionGroup':
                         revivedObj = defaultLineTool_config.KritzelSelectionGroup.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelGroup':
+                        revivedObj = defaultLineTool_config.KritzelGroup.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelWorkspace':
                         revivedObj = defaultLineTool_config.KritzelWorkspace.create(this._core, obj).deserialize(obj);
                         break;
@@ -19999,7 +20057,15 @@ class KritzelCore {
     addObject(object) {
         this._store.state.objects.insert(object);
     }
-    removeObject(object) {
+    removeObject(object, preserveChildren = false) {
+        // Handle KritzelGroup: recursively delete all children first (unless preserveChildren is true)
+        if (object instanceof defaultLineTool_config.KritzelGroup && !preserveChildren) {
+            // Get children before removing the group
+            const children = [...object.children];
+            children.forEach(child => {
+                this.removeObject(child);
+            });
+        }
         // Handle anchor cleanup
         if (object instanceof defaultLineTool_config.KritzelLine) {
             // If removing a line, clean up its anchor index entries
@@ -20136,6 +20202,28 @@ class KritzelCore {
             obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
             // Update z-index
             obj.zIndex = this._store.currentZIndex + i;
+            // Handle KritzelGroup: also add pending children with offset
+            if (obj instanceof defaultLineTool_config.KritzelGroup) {
+                const pendingChildren = obj._pendingChildren;
+                if (pendingChildren) {
+                    pendingChildren.forEach((child, childIndex) => {
+                        // Update workspace
+                        if (child.workspaceId !== activeWorkspace.id) {
+                            child.workspaceId = activeWorkspace.id;
+                        }
+                        // Update position with offset
+                        child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
+                        // Update z-index
+                        child.zIndex = this._store.currentZIndex + i + childIndex;
+                        // Add child to store
+                        this.addObject(child);
+                    });
+                    // Clear pending children
+                    delete obj._pendingChildren;
+                    // Finalize the group's bounding box and snapshots
+                    obj.finalize();
+                }
+            }
             // Add to objectsMap
             this.addObject(obj);
             // Add to selection group
@@ -20247,6 +20335,63 @@ class KritzelCore {
         });
         this.rerender();
     }
+    /**
+     * Groups the currently selected objects into a KritzelGroup.
+     * Requires at least 2 objects to be selected.
+     */
+    group() {
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup || selectionGroup.objects.length < 2) {
+            return;
+        }
+        // Create a group from the selected objects
+        const group = defaultLineTool_config.KritzelGroup.createFromObjects(this, selectionGroup.objects);
+        // Add the group to the object store
+        this.addObject(group);
+        // Remove the selection group and create a new one with just the group
+        this.removeSelectionGroup();
+        const newSelectionGroup = defaultLineTool_config.KritzelSelectionGroup.create(this);
+        newSelectionGroup.addOrRemove(group);
+        newSelectionGroup.isSelected = true;
+        newSelectionGroup.rotation = group.rotation;
+        this.addSelectionGroup(newSelectionGroup);
+        this.engine.emitObjectsChange();
+        this.rerender();
+    }
+    /**
+     * Ungroups any KritzelGroup objects in the current selection.
+     * Children are extracted and become top-level objects.
+     */
+    ungroup() {
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        const groups = selectionGroup.objects.filter(obj => obj instanceof defaultLineTool_config.KritzelGroup);
+        if (groups.length === 0) {
+            return;
+        }
+        // Collect all children from all groups
+        const allChildren = [];
+        const nonGroupObjects = selectionGroup.objects.filter(obj => !(obj instanceof defaultLineTool_config.KritzelGroup));
+        groups.forEach(group => {
+            // Get children before removing the group
+            const children = group.ungroup();
+            allChildren.push(...children);
+            // Remove the group from the store (but keep children)
+            this.removeObject(group, true);
+        });
+        // Create a new selection group with all the ungrouped children and non-group objects
+        this.removeSelectionGroup();
+        const newSelectionGroup = defaultLineTool_config.KritzelSelectionGroup.create(this);
+        [...allChildren, ...nonGroupObjects].forEach(child => {
+            newSelectionGroup.addOrRemove(child);
+        });
+        newSelectionGroup.isSelected = true;
+        this.addSelectionGroup(newSelectionGroup);
+        this.engine.emitObjectsChange();
+        this.rerender();
+    }
     selectObjects(objects) {
         if (objects.length === 0) {
             return;
@@ -20645,6 +20790,12 @@ const KritzelEngine = class {
     async sendToBack(object) {
         this.core.sendToBack(object);
     }
+    async group() {
+        this.core.group();
+    }
+    async ungroup() {
+        this.core.ungroup();
+    }
     async undo() {
         this.core.undo();
     }
@@ -20827,7 +20978,7 @@ const KritzelEngine = class {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (index.h(index.Host, { key: '209ccf8414c635c9e04ca4807c95a29c629071ec' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: 'df6a03d1341887960bb91cbaa0a5dca6880a9293', class: "debug-panel" }, index.h("div", { key: '65157757ec6549ad2af311085a9618ab661f5ac0' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '20137b6c651a9aa8df15bce66d5bfe870a7af139' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '49dd30286641236ae428c731bb181cb06269852e' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'd8ee431a10335e99aec40a596817765d7ee3f67b' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '34b1f31146080780433d6c1718d13bbfe397cb9b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '4c279a106101cf808c91a2be4987569b21ae52b3' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '6ebd7ad3c803ef45d58a74180c52e8be8af8bca3' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '345970c8b2b54f3a0d8fe1d9bb1b7b33023db386' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'fc265ae0e71cf22311cab3006dfc29b9d24397d2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '9f921032a58b55e60f82d11a76f269051357d3e1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '6d197e06cc362a9ecb8bfe00d272aecfec2b49e1' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '5313589ba2a509c95a5730dcf29c4003d9884cbf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '8af9f9d6e33a2897c20962048bbf2a058f9d4a45' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '81aec0050d3e2122643b61fd725e71b25d97bc27' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'c9956f05c01b74ee1666d9395a2715c3463fe401' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'ae0a01c8f8aafc08326b136720c6a75b6aec6299' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7816d40d73248a55120440e6d721325e1894178e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'c22383bacca0ada584f2e8a8577523c905d74ae2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: '8185a7318c6cdfde558cc372b79582d58b706f9e' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '2d56b05377693ef032ab2316fa753ecedf264b9c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '2e2bf9fd321ef04dc0ac6dc21539eb0117c9fb23' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: '3118ab970d5d37e01405c42308fc051d675d4bfa' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'd8a31065843f89552f2d9c03dcbca960a716fa6c' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: 'cb8d28b6ea63cbb6572f761011fccb847b748227' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: 'd112a7e833c265085246817423557bfdc5b30b74' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: 'df4f302192a8fc9644b7f883618b0a0f8a600dc8', id: "origin", class: "origin", style: {
+        return (index.h(index.Host, { key: 'd0f13eb1d34a6edcba439a501edbaab1875112f1' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: 'f722474cfd43ab13e306cea908871af77015d015', class: "debug-panel" }, index.h("div", { key: 'efd483bc92223d78f6a0f661a1911820de83682a' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '37c213c1e3d57cb79ccb99ff65404fa3e03f07e0' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '68bcdc9e10d89a6a4284dbdc11d679f6c8bed6df' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'c653966e412a801d536bfdcf8ab79176376693a5' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'db83b7d58514296daa1465926867d099df6988f9' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '1f15e3edec3165920207ba8f1b2886aa72049d08' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: 'c4e468e3c602f1fd62d4b13de1ec39dd1302768f' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '8eae67aac27495a611ba125e029473119665bb7e' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '8b22934652db52d915cb21f48f8340ceb2fe1327' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'd4d1872b8e1c33f0925a2f3cfcf4bc652cc5637e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '76fc159e2f38324248db21cab17fe76dd7add144' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: 'aa5a5a7c5faac899492f9c87cb9bf5cf960329cb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '21d4d43e7fc91a187055906c9f38529407f4ec6f' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: 'b43ba7bafd3ac52f5622e7d980456e7cbf5ff0fb' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'ecf9749bf4eece2970a62230d323fc205ce62fed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '6f9c7b7fa357f86c05aa76c02428ab0584856f3d' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7b61ed971fd7b4a029204861b19677421c049a33' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '875ed8cdf18b46c362b6b0c331a8f9fcba6bc1e2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: 'f56f27eff2c7e715528a32b4fe874da5220bc1ef' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '7831c3571031b029766b0fa16fe2b0e29e8c19b5' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'd4167e465da2f690b9d1f6d3cb8778f4a618843f' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: '00dfeba01da344a0e3c40f2f92ca539ef59d5da5' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '30948e66636501df9863caa67da468d45517a44f' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '9ee2c0bb69e9a150b7ab7c0ca9881897b5ec2a72' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '9d470ca319b0c32de7565c46b28c6483d4b9c1cb' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '4eaaf1e928e62c872b354523e55f33f01c25c5e7', 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 (index.h("div", { key: object.id, style: {
@@ -21076,18 +21227,18 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '70aefa0f3cf33036edb455dbe75448d2521e6dc9', 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 && (index.h("kritzel-context-menu", { key: 'f726cabc77f66c24618dc0b54cca8bd681608dde', 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`,
-                zIndex: '10000',
+                zIndex: '10002',
             }, onActionSelected: event => {
                 event.detail.action({
                     x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '68106a187ca81a38a819f1d52895b2858a8a28cb', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'bf42f27e52c03f9d00a5459883ac45ed39bb1dcd', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -21779,13 +21930,10 @@ const KritzelTooltip = class {
     get host() { return index.getElement(this); }
     isVisible = false;
     anchorElement;
-    arrowSize = 8;
     offsetY = 24;
-    showArrow = true;
     tooltipClosed;
     positionX = 0;
     positionY = 0;
-    arrowOffset = '0px';
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
@@ -21837,36 +21985,17 @@ const KritzelTooltip = class {
             this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
             // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
             this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
-            // Step 4: Calculate arrow offset to point to the center of the anchor element
-            // Arrow should point to anchorCenterX, relative to where tooltip is positioned
-            const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;
-            this.arrowOffset = `${arrowPositionInTooltip}px`;
         }
     }
     render() {
-        return (index.h(index.Host, { key: '468ba81a0a9265f04725e23b19dd879c1287e473', style: {
+        return (index.h(index.Host, { key: 'b6e220084f7ce3eead25bf60cef965322f59f3e0', 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`,
-            } }, index.h("div", { key: 'c6867197197f4e80e93bc63f0e7dd5dfbb19a523', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'a4df46360e349cbf68af08c0cc3297dd8d141b3c' }), this.showArrow && (index.h("div", { key: '9a7c9011b3286179f592c36afb2cdaf927838930', class: "tooltip-arrow-wrapper", style: {
-                position: 'fixed',
-                left: this.arrowOffset,
-                bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: 'd215175c6cb66c72b1fcb30eafc6af073946ad87', class: "tooltip-arrow", style: {
-                borderLeft: `${this.arrowSize}px solid transparent`,
-                borderRight: `${this.arrowSize}px solid transparent`,
-                borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
-                filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '65cd5bf2f0de3897794e7ba4e77d0866aa5724e5', class: "tooltip-arrow-rect", style: {
-                position: 'relative',
-                width: `${this.arrowSize * 2}px`,
-                height: `${this.arrowSize}px`,
-                backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
-                bottom: `${this.arrowSize * 2}px`,
-            } }))))));
+            } }, index.h("div", { key: '0ab91fedc3301b0c42fa773607ce6aa335b73c2e', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'bde0c798a393d006737c1d2c54660b6bbdace9e5' }))));
     }
 };
 KritzelTooltip.style = kritzelTooltipCss;
@@ -21897,7 +22026,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '6e33687f7c71ec342d47f1ae4a507de1f08fad6f' }, index.h("button", { key: 'd0cf45d78743a954764d03abdb49a725c0979cf8', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '6303892952ef0426023dde47b909fe90abfbd4c6', name: "undo" })), index.h("button", { key: '0542b66850c61e001d7461ddcbceb7999f98dc6a', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'faf61b34c8d5abe3ba0bdb1787a08418874532a4', name: "redo" })), index.h("div", { key: 'a8482d17b7e9b68204d81097ced692daa1fb11cc', class: "utility-separator" }), index.h("button", { key: 'd733f273095a96c914285908088d9c1536dddaf0', class: "utility-button" }, index.h("kritzel-icon", { key: 'd5322357c8ffc646c77acb02c5c5ce9131ba66cd', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: '05ec19a2b644f00680139513c97650e6e7c612f2' }, index.h("button", { key: 'a62b621b7a1abe33fbf3fc0aa1f8e1d6c7ed8be3', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'ca8d0f9c9e5cebaf20ffc239602c4b4ce37b7e6b', name: "undo" })), index.h("button", { key: '7f1ba8b6ae3b8edf0ac0127fee30f3c070d47b44', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '4680f7f9523fe6c17924662e025f5e6dfc3e9d78', name: "redo" })), index.h("div", { key: '77148d676ed708e4029b32e25a3daac628302478', class: "utility-separator" }), index.h("button", { key: 'b740674dc96d41c0b7b4d2cfb365d45c0f453a27', class: "utility-button" }, index.h("kritzel-icon", { key: '73d2ed9b6b400106521b0f53915e93516f9d3aad', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"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],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[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],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"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]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"showArrow":[4,"show-arrow"],"positionX":[32],"positionY":[32],"arrowOffset":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[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"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"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],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"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],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"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]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[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"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/stencil.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"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],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[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],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"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]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"showArrow":[4,"show-arrow"],"positionX":[32],"positionY":[32],"arrowOffset":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[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"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"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],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"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],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"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]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[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"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;