kritzel-stencil 0.0.169 → 0.0.170

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 : {};
 
@@ -1319,6 +1319,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 +1485,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 +18935,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 +19182,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 +20020,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 +20165,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 +20298,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 +20753,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 +20941,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,7 +21190,7 @@ 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`,
@@ -21087,7 +21201,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 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"],

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],"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);
 };
 
 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],"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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/classes/core/core.class.js

@@ -3,6 +3,7 @@ import { DEFAULT_ENGINE_CONFIG } from "../../configs/default-engine-config";
 import { ObjectHelper } from "../../helpers/object.helper";
 import { KritzelSelectionBox } from "../objects/selection-box.class";
 import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { KritzelGroup } from "../objects/group.class";
 import { KritzelLine } from "../objects/line.class";
 import { KritzelToolRegistry } from "../registries/tool.registry";
 import { KritzelStore } from "./store.class";
@@ -183,7 +184,15 @@ export 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 KritzelGroup && !preserveChildren) {
+            // Get children before removing the group
+            const children = [...object.children];
+            children.forEach(child => {
+                this.removeObject(child);
+            });
+        }
         // Handle anchor cleanup
         if (object instanceof KritzelLine) {
             // If removing a line, clean up its anchor index entries
@@ -320,6 +329,28 @@ export 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 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
@@ -431,6 +462,63 @@ export 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 = 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 = 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 KritzelGroup);
+        if (groups.length === 0) {
+            return;
+        }
+        // Collect all children from all groups
+        const allChildren = [];
+        const nonGroupObjects = selectionGroup.objects.filter(obj => !(obj instanceof 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 = 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;