kritzel-stencil 0.2.0 → 0.2.2

package/dist/collection/classes/objects/group.class.js

@@ -111,6 +111,23 @@ export class KritzelGroup extends KritzelBaseObject {
         }
         return null;
     }
+    /**
+     * Recursively collects the IDs of all descendants of the given group (children,
+     * grandchildren, etc.). Useful for detecting when a selection contains both an
+     * ancestor group and one of its descendants — a configuration that would otherwise
+     * cause the descendant to be transformed twice (once via the ancestor, once directly).
+     * @param group - The group whose descendants should be collected.
+     * @param out - A set that will be populated with all descendant object IDs.
+     */
+    static collectDescendantIds(group, out = new Set()) {
+        for (const child of group.children) {
+            out.add(child.id);
+            if (child instanceof KritzelGroup) {
+                KritzelGroup.collectDescendantIds(child, out);
+            }
+        }
+        return out;
+    }
     /**
      * Adds a child object to this group.
      * If the object is already a child, no action is taken.
@@ -154,8 +171,19 @@ export class KritzelGroup extends KritzelBaseObject {
      * Finalizes the group after children have been positioned (e.g., after paste).
      * Refreshes the bounding box to encompass all children and captures
      * child snapshots for subsequent transformation operations.
+     *
+     * Recursively finalizes nested child groups first, so that when a transform
+     * (rotate/resize) cascades through nested groups, every group's snapshots are
+     * aligned with the current visual state. Without this, a nested group's
+     * `snapshotRotation` could be stale, causing the inner group to be offset
+     * relative to its parent during rotation.
      */
     finalize() {
+        for (const child of this.children) {
+            if (child instanceof KritzelGroup) {
+                child.finalize();
+            }
+        }
         this.refreshBoundingBox();
         this.captureChildSnapshots();
     }
@@ -312,11 +340,23 @@ export class KritzelGroup extends KritzelBaseObject {
      * @param height - The new height of the group's content area.
      */
     resize(x, y, width, height) {
-        const widthScaleFactor = width / this.width;
-        const heightScaleFactor = height / this.height;
-        // Calculate old center
-        const oldCenterX = this.translateX + this.totalWidth / 2 / this.scale;
-        const oldCenterY = this.translateY + this.totalHeight / 2 / this.scale;
+        // Use snapshot dimensions (stable across the gesture) instead of `this.*`,
+        // which mutates each frame and gets distorted by descendants like KritzelText
+        // that clamp to a uniform scale, causing the cascade factor to drift.
+        const baseWidth = this.snapshotTotalWidth > 0
+            ? this.snapshotTotalWidth - this.padding * 2
+            : this.width;
+        const baseHeight = this.snapshotTotalHeight > 0
+            ? this.snapshotTotalHeight - this.padding * 2
+            : this.height;
+        const baseScale = this.snapshotScale || this.scale || 1;
+        const widthScaleFactor = baseWidth !== 0 ? width / baseWidth : 1;
+        const heightScaleFactor = baseHeight !== 0 ? height / baseHeight : 1;
+        // Calculate old center from snapshot (stable across the gesture)
+        const snapshotTotalWidth = this.snapshotTotalWidth || (this.width + this.padding * 2);
+        const snapshotTotalHeight = this.snapshotTotalHeight || (this.height + this.padding * 2);
+        const oldCenterX = this.snapshotTranslateX + snapshotTotalWidth / 2 / baseScale;
+        const oldCenterY = this.snapshotTranslateY + snapshotTotalHeight / 2 / baseScale;
         // Calculate new center
         const newTotalWidth = width + this.padding * 2;
         const newTotalHeight = height + this.padding * 2;
@@ -329,9 +369,20 @@ export class KritzelGroup extends KritzelBaseObject {
         const sinR = Math.sin(rotation);
         this._core.store.objects.transaction(() => {
             this.children.forEach(child => {
-                // Calculate child center
-                const childCenterX = child.translateX + child.totalWidth / 2 / child.scale;
-                const childCenterY = child.translateY + child.totalHeight / 2 / child.scale;
+                // Use snapshot values for the child to avoid compounding distortions caused
+                // by descendants like text that cannot honour requested aspect ratios.
+                const snapshot = this.unchangedChildSnapshots.get(child.id);
+                const childTranslateX = snapshot ? snapshot.translateX : child.translateX;
+                const childTranslateY = snapshot ? snapshot.translateY : child.translateY;
+                const childTotalWidth = snapshot ? snapshot.totalWidth : child.totalWidth;
+                const childTotalHeight = snapshot ? snapshot.totalHeight : child.totalHeight;
+                const childWidth = snapshot ? snapshot.width : child.width;
+                const childHeight = snapshot ? snapshot.height : child.height;
+                const childRotation = snapshot ? snapshot.rotation : child.rotation;
+                const childScale = (snapshot ? snapshot.scale : child.scale) || 1;
+                // Calculate child center from snapshot
+                const childCenterX = childTranslateX + childTotalWidth / 2 / childScale;
+                const childCenterY = childTranslateY + childTotalHeight / 2 / childScale;
                 // Vector from old group center to child center
                 const dx = childCenterX - oldCenterX;
                 const dy = childCenterY - oldCenterY;
@@ -348,13 +399,13 @@ export class KritzelGroup extends KritzelBaseObject {
                 const newChildCenterX = newCenterX + rotatedX;
                 const newChildCenterY = newCenterY + rotatedY;
                 // Calculate relative rotation for scaling
-                const relativeRotation = child.rotation - rotation;
+                const relativeRotation = childRotation - rotation;
                 const cosRel = Math.cos(relativeRotation);
                 const sinRel = Math.sin(relativeRotation);
                 const newChildWidthScale = Math.sqrt(Math.pow(widthScaleFactor * cosRel, 2) + Math.pow(heightScaleFactor * sinRel, 2));
                 const newChildHeightScale = Math.sqrt(Math.pow(widthScaleFactor * sinRel, 2) + Math.pow(heightScaleFactor * cosRel, 2));
-                const updatedWidth = child.width * newChildWidthScale;
-                const updatedHeight = child.height * newChildHeightScale;
+                const updatedWidth = childWidth * newChildWidthScale;
+                const updatedHeight = childHeight * newChildHeightScale;
                 const updatedTotalWidth = updatedWidth + child.padding * 2;
                 const updatedTotalHeight = updatedHeight + child.padding * 2;
                 const updatedX = newChildCenterX - updatedTotalWidth / 2 / child.scale;
@@ -364,7 +415,13 @@ export class KritzelGroup extends KritzelBaseObject {
                 this._core.anchorManager.updateAnchorsForObject(child.id);
             });
             this.refreshBoundingBox();
-            this.captureChildSnapshots();
+            // Don't recapture snapshots while an interactive resize is in progress —
+            // recapturing each frame would defeat the purpose of using stable snapshots
+            // and re-introduce the compounding distortion described above. Snapshots are
+            // refreshed at the start of the next gesture via beginTransform/finalize.
+            if (!this._core.store.state.isResizing) {
+                this.captureChildSnapshots();
+            }
             this._core.store.objects.update(this);
         });
     }

package/dist/collection/classes/objects/shape.class.js

@@ -341,6 +341,30 @@ export class KritzelShape extends KritzelBaseObject {
         this._core.store.objects.update(this);
         this._core.engine.emitObjectsChange();
     }
+    /**
+     * Handles the Escape key while the shape's text editor is in edit mode.
+     * Implements a two-stage behavior: if the editor currently has a non-empty
+     * text selection, the selection is collapsed to a caret without exiting
+     * edit mode. If the selection is already collapsed, edit mode is exited
+     * (saving the current content), the canvas selection is cleared and the
+     * active tool is switched back to the selection tool so subsequent
+     * interactions start fresh.
+     */
+    handleEscape() {
+        if (!this.editor || !this.isEditing) {
+            return;
+        }
+        const { state } = this.editor;
+        if (!state.selection.empty) {
+            const pos = state.selection.head;
+            this.editor.dispatch(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+            this.editor.focus();
+            return;
+        }
+        this._core.resetActiveShape();
+        this._core.clearSelection();
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+    }
     /**
      * Handles pointer down events when the shape is in edit mode.
      * This method stops event propagation for untracked pointers to prevent

package/dist/collection/classes/objects/text.class.js

@@ -332,6 +332,29 @@ export class KritzelText extends KritzelBaseObject {
         this._core.store.objects.update(this);
         this._core.engine.emitObjectsChange();
     }
+    /**
+     * Handles the Escape key while the text object is in edit mode.
+     * Implements a two-stage behavior: if the editor currently has a non-empty
+     * text selection, the selection is collapsed to a caret without exiting
+     * edit mode. If the selection is already collapsed, edit mode is exited
+     * (saving the current content or deleting the object if it is empty) and
+     * the canvas selection is cleared so subsequent tool actions start fresh.
+     */
+    handleEscape() {
+        if (!this.editor || !this.isEditing) {
+            return;
+        }
+        const { state } = this.editor;
+        if (!state.selection.empty) {
+            const pos = state.selection.head;
+            this.editor.dispatch(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+            this.editor.focus();
+            return;
+        }
+        this._core.resetActiveText();
+        this._core.clearSelection();
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+    }
     /**
      * Handles pointer down events during text editing.
      * Stops event propagation to prevent canvas interaction while editing.

package/dist/collection/classes/tools/text-tool.class.js

@@ -10,14 +10,38 @@ import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
  * Supports configurable font family, size, color, and opacity.
  */
 export class KritzelTextTool extends KritzelBaseTool {
-    /** The font family for new text objects */
-    fontFamily = 'Arial';
-    /** The font size for new text objects in pixels */
-    fontSize = 16;
-    /** The font color for new text objects (supports theme-aware light/dark colors) */
-    fontColor = DEFAULT_COLOR_PALETTE[0];
-    /** The opacity of new text objects (0-1) */
-    opacity = 1;
+    /** Backing field for {@link fontFamily}. */
+    _fontFamily = 'Arial';
+    /** Backing field for {@link fontSize}. */
+    _fontSize = 16;
+    /** Backing field for {@link fontColor}. */
+    _fontColor = DEFAULT_COLOR_PALETTE[0];
+    /** Backing field for {@link opacity}. */
+    _opacity = 1;
+    /** The font family for new text objects. */
+    get fontFamily() { return this._fontFamily; }
+    set fontFamily(value) {
+        this._fontFamily = value;
+        this.applyToActiveText({ fontFamily: value });
+    }
+    /** The font size for new text objects in pixels. */
+    get fontSize() { return this._fontSize; }
+    set fontSize(value) {
+        this._fontSize = value;
+        this.applyToActiveText({ fontSize: value });
+    }
+    /** The font color for new text objects (supports theme-aware light/dark colors). */
+    get fontColor() { return this._fontColor; }
+    set fontColor(value) {
+        this._fontColor = value;
+        this.applyToActiveText({ fontColor: value });
+    }
+    /** The opacity of new text objects (0-1). */
+    get opacity() { return this._opacity; }
+    set opacity(value) {
+        this._opacity = value;
+        this.applyToActiveText({ opacity: value });
+    }
     /** Available color palette for the text tool */
     palette = [...DEFAULT_COLOR_PALETTE];
     /**
@@ -27,6 +51,18 @@ export class KritzelTextTool extends KritzelBaseTool {
     constructor(core) {
         super(core);
     }
+    /**
+     * Propagates a property change to the text object that is currently being edited, if any.
+     * Mirrors the selection tool pattern of pushing tool-config changes down to live objects,
+     * but scoped to the single text in edit mode rather than the current selection.
+     */
+    applyToActiveText(updatedProperties) {
+        const activeText = this._core?.store?.activeText;
+        if (!activeText)
+            return;
+        this._core.updateObject(activeText, updatedProperties);
+        this._core.rerender();
+    }
     /**
      * Handles pointer down events for text creation and editing.
      * If clicking on an existing text object, enters edit mode for that object.
@@ -42,7 +78,7 @@ export class KritzelTextTool extends KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement?.id);
+            const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
             const activeText = this._core.store.activeText;
             if (activeText === null && object instanceof KritzelText) {
                 object.edit(event);
@@ -79,7 +115,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement?.id);
+            const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
             const activeText = this._core.store.activeText;
             if (activeText === null && object instanceof KritzelText) {
                 object.edit(event);

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -112,6 +112,7 @@ export class KritzelEditor {
     ];
     objectContextMenuItems = [
         { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },
+        { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },
         {
             label: 'Paste',
             icon: 'paste',
@@ -372,6 +373,9 @@ export class KritzelEditor {
     async copy() {
         return this.engineRef.copy();
     }
+    async cut() {
+        return this.engineRef.cut();
+    }
     async paste(x, y) {
         return this.engineRef.paste(x, y);
     }
@@ -719,27 +723,27 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '7c1d6a43480a2daf9574500c7dec54477c5cb844' }, h("div", { key: '6d8f9b10e670f91da433eee2f579c21e0d249892', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '3c3a26dae94af3ad404bf81149f0f2311f605563', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'afb425b2c6a4680686de61b9ee17e94d588191bf', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '8258cbb85421ef0cebd34e7c314c1e1f97a76536', ref: el => {
+        return (h(Host, { key: '6e832b0036dbc0d36aa70b297cf73cceafbaa846' }, h("div", { key: '48e99e354326781792798fdcc2b07a1b5bbc8cca', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '980bf87558891a8b20030be4b6d0c32ee568ca4d', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '59636e148d71c54e51f17095dfec2754d63f1692', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '11f17eef609d3d3ece1ead3cf51524e690f4a2eb', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '2633c66a89e89ecaa975d28ba6852841be876520', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'b9852a78ed062ca7026b8d0da44263fb0a64d8cc', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'd8accf9bdefe7ea3a4a4661380d6dda1c2ecb3ef', class: "top-right-buttons" }, h("kritzel-settings", { key: '00394a7386304c6f7524f38094e8d111f028f56e', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'f3e33d794033eb5fdbde8c4553c744da61eefc51', class: "top-right-buttons" }, h("kritzel-settings", { key: '466ac8a5d110feb46472c3207f4a73e9ce37e148', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '9951b8daff183cd9ce7766f2ab6dfcda927dcd62', ref: el => {
+            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'c6e0eca3baca940f9160ca02989d5c27410ccc59', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '7be535beebde53ecb736d06ce2ca54891000ce43', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '54112b7dcfa5fdaaf86c4eb80cef41898d06e316', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '9e9873d348e540a2e104cc061a195f3af7e8ef95', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '9112cf42034a5ee1a059b139bef34f32342ef6dd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '5abcbceb7223960b7cec3e9ca4d848b87c1dec88', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'b66a7736b9ac0942873e5bdc1677228cd53d57d6', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4ab0b49bd43f428fb1ade5d5d9836d846355d92f', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '04d6d43b60ad1bd3272dfb1e09aa3efb9602c42e', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '7ca482736a2253d95dffc369de1db1d14d207c35', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'c5ae3f2e981d980fd35380424036acdc29b0fe53', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'ee296f1c00215566c26057e8ffb226a9fadc6592', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f72b412715d0ffd9a8038ade192d894623fc98fc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1064,7 +1068,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    {\n      label: 'Paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'Align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'Group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'Group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'Ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'Export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
+                "defaultValue": "[\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'Paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'Align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'Group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'Group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'Ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'Export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
             "customSvgIcons": {
                 "type": "unknown",
@@ -2382,6 +2386,23 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "cut": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "paste": {
                 "complexType": {
                     "signature": "(x: number, y: number) => Promise<void>",

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { KritzelViewport } from "../../../classes/core/viewport.class";
 import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
+import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 import { KritzelKeyHandler } from "../../../classes/handlers/key.handler";
 import { KritzelBaseTool } from "../../../classes/tools/base-tool.class";
@@ -396,6 +398,10 @@ export class KritzelEngine {
     async copy() {
         this.core.copy();
     }
+    /** Cuts the currently selected objects to the internal clipboard (deletes them from the canvas). */
+    async cut() {
+        this.core.cut();
+    }
     /**
      * Pastes previously copied objects at the specified world coordinates.
      * @param x - X position in world coordinates.
@@ -525,23 +531,39 @@ export class KritzelEngine {
                 object.setContent(pendingContent);
             }
         }
-        // Handle KritzelGroup: flush pending children into the store
+        // Handle KritzelGroup: flush pending children (recursively for nested groups) into the store
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
-            object.childIds = [];
-            // Build a map of old ID → new ID so we can remap anchor references
+            // Build a map of old ID → new ID across all nesting levels so we can
+            // remap anchor references regardless of how deeply nested the line is.
             const idRemapping = new Map();
-            object._pendingChildren.forEach(child => {
-                const oldId = child.id;
-                child.id = child.generateId();
-                child._core = this.core;
-                child.scale = this.core.store.state.scale;
-                child.zIndex = this.core.store.currentZIndex;
-                child.workspaceId = this.core.store.state.activeWorkspace.id;
-                idRemapping.set(oldId, child.id);
-                object.childIds.push(child.id);
-            });
-            // Remap anchor references in lines before inserting into the store
-            object._pendingChildren.forEach(child => {
+            const allFlushedChildren = [];
+            const flushGroup = (group) => {
+                if (group._pendingChildren.length === 0) {
+                    return;
+                }
+                const pending = group._pendingChildren;
+                group._pendingChildren = [];
+                group.childIds = [];
+                pending.forEach(child => {
+                    const oldId = child.id;
+                    child.id = child.generateId();
+                    child._core = this.core;
+                    child.scale = this.core.store.state.scale;
+                    child.zIndex = this.core.store.currentZIndex;
+                    child.workspaceId = this.core.store.state.activeWorkspace.id;
+                    idRemapping.set(oldId, child.id);
+                    group.childIds.push(child.id);
+                    allFlushedChildren.push(child);
+                    // Recurse into nested groups before inserting so grandchildren get
+                    // proper IDs and `childIds` references before the parent is added.
+                    if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                        flushGroup(child);
+                    }
+                });
+            };
+            flushGroup(object);
+            // Remap anchor references in lines across all flushed descendants
+            allFlushedChildren.forEach(child => {
                 if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
                     if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
                         child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
@@ -551,10 +573,11 @@ export class KritzelEngine {
                     }
                 }
             });
-            object._pendingChildren.forEach(child => {
+            // Insert all flushed descendants into the store
+            allFlushedChildren.forEach(child => {
                 this.core.addObject(child);
             });
-            object._pendingChildren = [];
+            // finalize() recurses into nested groups so all bounding boxes/snapshots align
             object.finalize();
             // Rebuild anchor index so anchored lines are tracked
             this.core.anchorManager.rebuildIndex();
@@ -1494,6 +1517,12 @@ export class KritzelEngine {
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
         }
+        if (!(activeTool instanceof KritzelTextTool)) {
+            this.core.resetActiveText();
+        }
+        if (!(activeTool instanceof KritzelShapeTool)) {
+            this.core.resetActiveShape();
+        }
         this.core.store.state.skipContextMenu = false;
         this.core.store.state.copiedObjects = undefined;
         if (activeTool) {
@@ -1570,7 +1599,7 @@ export class KritzelEngine {
                     overflow: 'visible',
                     userSelect: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState !== 'ready' && (h("div", { ref: () => object.ensureLoaded(), style: {
+                }, draggable: false, decoding: "async", loading: "eager", onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState !== 'ready' && (h("div", { ref: () => object.ensureLoaded(), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -2897,6 +2926,23 @@ export class KritzelEngine {
                     "tags": []
                 }
             },
+            "cut": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cuts the currently selected objects to the internal clipboard (deletes them from the canvas).",
+                    "tags": []
+                }
+            },
             "paste": {
                 "complexType": {
                     "signature": "(x: number, y: number) => Promise<void>",

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -40,6 +40,22 @@ export class KritzelPortal {
             this.closePortal();
         }
     }
+    handleOutsidePointerDown(event) {
+        if (!this.portal)
+            return;
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const path = event.composedPath();
+        const isInsidePortal = path.some(el => el === this.host);
+        const isOnAnchor = this.anchor && path.some(el => el === this.anchor);
+        if (!isInsidePortal && !isOnAnchor) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.close.emit();
+            this.closePortal();
+        }
+    }
     handleKeyDown(event) {
         const isLastPortal = this.lastAddedPortal === this.portal;
         if (!isLastPortal)
@@ -261,7 +277,7 @@ export class KritzelPortal {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: '6acf9d402aa0ee151d93b912fc2b9d46cfe88d07', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'dbeff1735d422e818179346f5880555fbadddba9' })));
+        return (h(Host, { key: 'dcd8e6f3787c713012aeb6436bf63f2f4930c39e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '830f51521a77f0a28471026494323e14ab4f9f9a' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }
@@ -387,6 +403,12 @@ export class KritzelPortal {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleOutsidePointerDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.2.0';
+export const KRITZEL_VERSION = '0.2.2';

package/dist/collection/themes/dark-theme.js

@@ -117,6 +117,11 @@ export const darkTheme = {
     engine: {
         backgroundColor: '#1a1a1a',
     },
+    snap: {
+        indicatorFill: 'rgba(10, 132, 255, 0.35)',
+        indicatorStroke: '#0A84FF',
+        lineStroke: 'rgba(255, 255, 255, 0.35)',
+    },
     fontSize: {
         hoverBackgroundColor: '#3a3a3a',
         selectedBackgroundColor: '#3a3a3a',

package/dist/collection/themes/light-theme.js

@@ -118,6 +118,11 @@ export const lightTheme = {
     engine: {
         backgroundColor: '#ffffff',
     },
+    snap: {
+        indicatorFill: 'rgba(59, 130, 246, 0.3)',
+        indicatorStroke: '#007bff',
+        lineStroke: 'rgba(0, 0, 0, 0.2)',
+    },
     fontSize: {
         hoverBackgroundColor: '#ebebeb',
         selectedBackgroundColor: '#ebebeb',