kritzel-stencil 0.2.0 → 0.2.2

package/dist/cjs/{workspace.migrations-CPncKohl.js → workspace.migrations-BPwtowiJ.js}

@@ -14512,6 +14512,11 @@ 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',
@@ -14776,6 +14781,11 @@ 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',
@@ -15568,6 +15578,29 @@ 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.
@@ -18245,6 +18278,23 @@ 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.
@@ -18288,8 +18338,19 @@ 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();
     }
@@ -18446,11 +18507,23 @@ 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;
@@ -18463,9 +18536,20 @@ 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;
@@ -18482,13 +18566,13 @@ 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;
@@ -18498,7 +18582,13 @@ 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);
         });
     }
@@ -18997,6 +19087,30 @@ 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
@@ -20770,14 +20884,38 @@ class KritzelImageTool extends KritzelBaseTool {
  * Supports configurable font family, size, color, and opacity.
  */
 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];
     /**
@@ -20787,6 +20925,18 @@ 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.
@@ -20802,7 +20952,7 @@ 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);
@@ -20839,7 +20989,7 @@ 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);
@@ -22514,6 +22664,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
+            this.removeDescendantsOfSelectedGroups(existingGroup);
             if (existingGroup.objects.length === 0) {
                 this._core.removeSelectionGroup();
             }
@@ -22559,15 +22710,17 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             obj.isSelected = false;
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
+        const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
-            existingGroup.addObjects(unrolledObjects);
+            existingGroup.addObjects(filteredObjects);
+            this.removeDescendantsOfSelectedGroups(existingGroup);
             this._core.rerender();
         }
         else {
             // Create selection group and set all IDs at once (no per-item refresh)
             const selectionGroup = KritzelSelectionGroup.create(this._core);
-            selectionGroup.objectIds = Array.from(resolvedObjects.keys());
+            selectionGroup.objectIds = filteredObjects.map(o => o.id);
             // Only refresh dimensions and capture snapshots ONCE at the end - O(n) instead of O(n²)
             if (selectionGroup.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -22579,6 +22732,37 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             this._core.rerender();
         }
     }
+    /**
+     * Removes objects that are descendants of any KritzelGroup also present in the list.
+     * Prevents an ancestor group and one of its descendants from coexisting in a selection,
+     * which would otherwise cause the descendant to be transformed twice (once via the
+     * ancestor group, and once directly).
+     * @param objects - The candidate objects for the selection.
+     * @returns A new array with descendants of selected groups removed.
+     */
+    filterDescendantsOfSelectedGroups(objects) {
+        const descendantIds = new Set();
+        for (const obj of objects) {
+            if (obj instanceof KritzelGroup) {
+                KritzelGroup.collectDescendantIds(obj, descendantIds);
+            }
+        }
+        if (descendantIds.size === 0) {
+            return objects;
+        }
+        return objects.filter(o => !descendantIds.has(o.id));
+    }
+    /**
+     * Mutates an existing selection group to remove any descendants of groups
+     * already present in it. See {@link filterDescendantsOfSelectedGroups}.
+     * @param selectionGroup - The selection group to clean up in place.
+     */
+    removeDescendantsOfSelectedGroups(selectionGroup) {
+        const filtered = this.filterDescendantsOfSelectedGroups(selectionGroup.objects);
+        if (filtered.length !== selectionGroup.objects.length) {
+            selectionGroup.objectIds = filtered.map(o => o.id);
+        }
+    }
 }
 
 /**

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

@@ -710,6 +710,31 @@ export class KritzelCore {
         // Batch all inserts and updates in a single Y.js transaction to avoid
         // N separate observer callbacks and N rerenders (fires only once at commit)
         this._store.objects.transaction(() => {
+            // Recursively flush a group's pending children (and any nested groups'
+            // pending children) into the store. Without recursion, nested groups
+            // would have their grandchildren stranded in `_pendingChildren` and they
+            // would never appear on the canvas, even though the parent group's
+            // bounding box looks correct.
+            const flushPendingChildren = (group, parentZIndex) => {
+                if (group._pendingChildren.length === 0) {
+                    return;
+                }
+                const pendingChildren = group._pendingChildren;
+                group._pendingChildren = [];
+                pendingChildren.forEach((child, childIndex) => {
+                    if (child.workspaceId !== activeWorkspace.id) {
+                        child.workspaceId = activeWorkspace.id;
+                    }
+                    child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
+                    child.zIndex = parentZIndex + childIndex + 1;
+                    // Recurse before adding so grandchildren are inserted as well
+                    if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                        flushPendingChildren(child, child.zIndex);
+                    }
+                    this.addObject(child);
+                });
+                group.finalize();
+            };
             // First add all copied objects to the objectsMap with updated positions
             copiedObjects.forEach((obj, i) => {
                 // Update workspace if pasting to a different workspace
@@ -720,26 +745,9 @@ export class KritzelCore {
                 obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
                 // Update z-index
                 obj.zIndex = baseZIndex + i;
-                // Handle KritzelGroup: also add pending children with offset
+                // Handle KritzelGroup: also add pending children (and grandchildren) with offset
                 if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
-                    if (obj._pendingChildren.length > 0) {
-                        obj._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 = baseZIndex + i + childIndex;
-                            // Add child to store
-                            this.addObject(child);
-                        });
-                        // Clear pending children
-                        obj._pendingChildren = [];
-                        // Finalize the group's bounding box and snapshots
-                        obj.finalize();
-                    }
+                    flushPendingChildren(obj, obj.zIndex);
                 }
                 // Add to objectsMap
                 this.addObject(obj);

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

@@ -505,6 +505,7 @@ export class KritzelViewport {
         const startTranslateY = this._core.store.state.translateY;
         const startScale = this._core.store.state.scale;
         const startTime = performance.now();
+        this._core.store.state.isScaling = true;
         const animate = (currentTime) => {
             const elapsed = currentTime - startTime;
             const progress = Math.min(elapsed / duration, 1);
@@ -523,6 +524,8 @@ export class KritzelViewport {
             }
             else {
                 this._animationFrameId = null;
+                this._core.store.state.isScaling = false;
+                this._core.rerender();
                 this._debounceUpdate();
             }
         };

package/dist/collection/classes/handlers/key.handler.js

@@ -14,7 +14,23 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
      */
     shortcuts = [
         // General
-        { key: 'Escape', label: 'Clear Selection', category: 'General', condition: c => !!c.store.selectionGroup, action: c => c.clearSelection() },
+        {
+            key: 'Escape',
+            label: 'Clear Selection',
+            category: 'General',
+            condition: c => !!c.store.activeText || !!c.store.activeShape || !!c.store.selectionGroup,
+            action: c => {
+                if (c.store.activeText) {
+                    c.store.activeText.handleEscape();
+                    return;
+                }
+                if (c.store.activeShape) {
+                    c.store.activeShape.handleEscape();
+                    return;
+                }
+                c.clearSelection();
+            },
+        },
         { key: 'Delete', label: 'Delete Selected', category: 'General', condition: c => !!c.store.selectionGroup, action: c => c.delete() },
         { key: 'a', ctrl: true, label: 'Select All in Viewport', category: 'General', action: c => c.selectAllObjectsInViewport() },
         { key: 'A', ctrl: true, shift: true, label: 'Select All Objects', category: 'General', action: c => c.selectAllObjects() },
@@ -44,7 +60,14 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
             },
         },
         { key: 'x', ctrl: true, label: 'Cut', category: 'Clipboard', condition: c => !!c.store.selectionGroup, action: c => c.cut() },
-        { key: 'v', ctrl: true, label: 'Paste', category: 'Clipboard', condition: c => !!c.store.state.copiedObjects && !c.store.activeText, action: c => c.paste() },
+        {
+            key: 'v',
+            ctrl: true,
+            label: 'Paste',
+            category: 'Clipboard',
+            condition: c => !!c.store.state.copiedObjects && !c.store.activeText && !c.store.activeShape,
+            action: c => c.paste(),
+        },
         // Object layering
         { key: '+', ctrl: true, label: 'Bring Forward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, label: 'Send Backward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
@@ -54,10 +77,46 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
         { key: 'g', ctrl: true, label: 'Group', category: 'Grouping', condition: c => !!c.store.selectionGroup && c.store.selectionGroup.objects.length >= 2, action: c => c.group() },
         { key: 'G', ctrl: true, shift: true, label: 'Ungroup', category: 'Grouping', condition: c => !!c.store.selectionGroup, action: c => c.ungroup() },
         // Movement
-        { key: 'ArrowUp', label: 'Move Object Up', category: 'Movement', condition: c => !!c.store.selectionGroup, action: c => { c.store.selectionGroup.move(0, 0, 0, NUDGE_AMOUNT); c.rerender(); } },
-        { key: 'ArrowDown', label: 'Move Object Down', category: 'Movement', condition: c => !!c.store.selectionGroup, action: c => { c.store.selectionGroup.move(0, NUDGE_AMOUNT, 0, 0); c.rerender(); } },
-        { key: 'ArrowLeft', label: 'Move Object Left', category: 'Movement', condition: c => !!c.store.selectionGroup, action: c => { c.store.selectionGroup.move(0, 0, NUDGE_AMOUNT, 0); c.rerender(); } },
-        { key: 'ArrowRight', label: 'Move Object Right', category: 'Movement', condition: c => !!c.store.selectionGroup, action: c => { c.store.selectionGroup.move(NUDGE_AMOUNT, 0, 0, 0); c.rerender(); } },
+        {
+            key: 'ArrowUp',
+            label: 'Move Object Up',
+            category: 'Movement',
+            condition: c => !!c.store.selectionGroup,
+            action: c => {
+                c.store.selectionGroup.move(0, 0, 0, NUDGE_AMOUNT);
+                c.rerender();
+            },
+        },
+        {
+            key: 'ArrowDown',
+            label: 'Move Object Down',
+            category: 'Movement',
+            condition: c => !!c.store.selectionGroup,
+            action: c => {
+                c.store.selectionGroup.move(0, NUDGE_AMOUNT, 0, 0);
+                c.rerender();
+            },
+        },
+        {
+            key: 'ArrowLeft',
+            label: 'Move Object Left',
+            category: 'Movement',
+            condition: c => !!c.store.selectionGroup,
+            action: c => {
+                c.store.selectionGroup.move(0, 0, NUDGE_AMOUNT, 0);
+                c.rerender();
+            },
+        },
+        {
+            key: 'ArrowRight',
+            label: 'Move Object Right',
+            category: 'Movement',
+            condition: c => !!c.store.selectionGroup,
+            action: c => {
+                c.store.selectionGroup.move(NUDGE_AMOUNT, 0, 0, 0);
+                c.rerender();
+            },
+        },
     ];
     /**
      * Creates a new instance of the key handler.
@@ -87,6 +146,14 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
      */
     handleKeyDown(event) {
         this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
+        // While a text or shape's text editor is being edited, let ProseMirror /
+        // the browser handle keys natively (Ctrl+A, Ctrl+C, arrows, etc.) instead
+        // of running global canvas shortcuts. Escape is the one exception — it
+        // still runs through the shortcut system so it can collapse the text
+        // selection (handled inside the shortcut's action).
+        if ((this._core.store.activeText || this._core.store.activeShape) && event.key !== 'Escape') {
+            return;
+        }
         const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
         if (shortcut) {
             event.preventDefault();

package/dist/collection/classes/handlers/selection.handler.js

@@ -407,6 +407,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
+            this.removeDescendantsOfSelectedGroups(existingGroup);
             if (existingGroup.objects.length === 0) {
                 this._core.removeSelectionGroup();
             }
@@ -452,15 +453,17 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             obj.isSelected = false;
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
+        const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
-            existingGroup.addObjects(unrolledObjects);
+            existingGroup.addObjects(filteredObjects);
+            this.removeDescendantsOfSelectedGroups(existingGroup);
             this._core.rerender();
         }
         else {
             // Create selection group and set all IDs at once (no per-item refresh)
             const selectionGroup = KritzelSelectionGroup.create(this._core);
-            selectionGroup.objectIds = Array.from(resolvedObjects.keys());
+            selectionGroup.objectIds = filteredObjects.map(o => o.id);
             // Only refresh dimensions and capture snapshots ONCE at the end - O(n) instead of O(n²)
             if (selectionGroup.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -472,4 +475,35 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
             this._core.rerender();
         }
     }
+    /**
+     * Removes objects that are descendants of any KritzelGroup also present in the list.
+     * Prevents an ancestor group and one of its descendants from coexisting in a selection,
+     * which would otherwise cause the descendant to be transformed twice (once via the
+     * ancestor group, and once directly).
+     * @param objects - The candidate objects for the selection.
+     * @returns A new array with descendants of selected groups removed.
+     */
+    filterDescendantsOfSelectedGroups(objects) {
+        const descendantIds = new Set();
+        for (const obj of objects) {
+            if (obj instanceof KritzelGroup) {
+                KritzelGroup.collectDescendantIds(obj, descendantIds);
+            }
+        }
+        if (descendantIds.size === 0) {
+            return objects;
+        }
+        return objects.filter(o => !descendantIds.has(o.id));
+    }
+    /**
+     * Mutates an existing selection group to remove any descendants of groups
+     * already present in it. See {@link filterDescendantsOfSelectedGroups}.
+     * @param selectionGroup - The selection group to clean up in place.
+     */
+    removeDescendantsOfSelectedGroups(selectionGroup) {
+        const filtered = this.filterDescendantsOfSelectedGroups(selectionGroup.objects);
+        if (filtered.length !== selectionGroup.objects.length) {
+            selectionGroup.objectIds = filtered.map(o => o.id);
+        }
+    }
 }