kritzel-stencil 0.0.169 → 0.0.171

package/dist/components/{p-f_ut_1_F.js → p-D0UgEnEL.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { e as KritzelBaseObject, f as KritzelGeometryHelper, g as KritzelBaseTool, h as KritzelEventHelper, i as KritzelToolRegistry, S as Schema, s as schema, j as addListNodes, E as EditorView, k as EditorState, l as keymap, T as TextSelection, d as KritzelKeyboardHelper, m as baseKeymap, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath } from './p-Bwv1dxAB.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-D1YAsWrL.js';
+import { e as KritzelBaseObject, f as KritzelGeometryHelper, g as KritzelBaseTool, h as KritzelEventHelper, i as KritzelToolRegistry, S as Schema, s as schema, j as addListNodes, E as EditorView, k as EditorState, l as keymap, T as TextSelection, d as KritzelKeyboardHelper, m as baseKeymap, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath } from './p-BUsg2vtg.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-nIBAWFcK.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { K as KritzelIconRegistry, d as defineCustomElement$1 } from './p-Cv4BGNPb.js';
+import { K as KritzelIconRegistry, d as defineCustomElement$1 } from './p-CIts5Uma.js';
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { d as defineCustomElement$2 } from './p-B_3OZeom.js';
 
@@ -195,7 +195,8 @@ class KritzelLine extends KritzelBaseObject {
         this._core.store.state.objects.update(this);
     }
     hitTest(x, y) {
-        const strokeWidth = Math.max(this.strokeWidth, 10);
+        const minHitThreshold = 20;
+        const strokeWidth = Math.max(this.strokeWidth, minHitThreshold);
         const halfStroke = strokeWidth / this.scale / 2;
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
@@ -628,6 +629,399 @@ class KritzelLine extends KritzelBaseObject {
     }
 }
 
+/**
+ * KritzelGroup represents a permanent grouping of objects that act as a single unit.
+ *
+ * Unlike KritzelSelectionGroup (which is ephemeral and used for temporary multi-selection),
+ * KritzelGroup is persisted and saved with the workspace. Grouped objects move, resize,
+ * rotate, copy, and delete together as one unit.
+ *
+ * Key features:
+ * - Supports nested groups (groups can contain other groups)
+ * - Clicking any child selects the entire group
+ * - Can be ungrouped to restore children to top-level objects
+ */
+class KritzelGroup extends KritzelBaseObject {
+    __class__ = 'KritzelGroup';
+    /**
+     * IDs of child objects within this group.
+     * Children can be any KritzelBaseObject, including other KritzelGroups for nesting.
+     */
+    childIds = [];
+    /**
+     * Snapshots of child states for transformation operations (resize, rotate).
+     * Similar pattern to KritzelSelectionGroup.
+     */
+    unchangedChildSnapshots = new Map();
+    snapshotRotation = 0;
+    snapshotTranslateX = 0;
+    snapshotTranslateY = 0;
+    snapshotTotalWidth = 0;
+    snapshotTotalHeight = 0;
+    snapshotScale = 1;
+    /**
+     * Retrieves the actual child objects from the store by their IDs.
+     */
+    get children() {
+        return this.childIds
+            .map(id => {
+            const found = this._core.store.state.objects.filter(obj => obj.id === id);
+            return found.length > 0 ? found[0] : null;
+        })
+            .filter((obj) => obj !== null);
+    }
+    /**
+     * Returns the number of children in this group.
+     */
+    get length() {
+        return this.childIds.length;
+    }
+    /**
+     * Creates a new empty KritzelGroup.
+     */
+    static create(core) {
+        const group = new KritzelGroup();
+        group._core = core;
+        group.id = group.generateId();
+        group.workspaceId = core.store.state.activeWorkspace.id;
+        group.scale = core.store.state.scale;
+        group.zIndex = core.store.currentZIndex;
+        return group;
+    }
+    /**
+     * Creates a KritzelGroup from an array of objects.
+     * The objects are added as children and their bounding box is calculated.
+     */
+    static createFromObjects(core, objects) {
+        const group = KritzelGroup.create(core);
+        // Add all objects as children
+        objects.forEach(obj => {
+            group.childIds.push(obj.id);
+        });
+        // Calculate bounding box from children
+        group.refreshBoundingBox();
+        group.captureChildSnapshots();
+        return group;
+    }
+    /**
+     * Finds the parent KritzelGroup that contains the given object as a child.
+     * Returns null if the object is not a child of any group.
+     */
+    static findParentGroup(core, objectId) {
+        const allGroups = core.store.state.objects
+            .filter(obj => obj.__class__ === 'KritzelGroup');
+        for (const group of allGroups) {
+            if (group.childIds.includes(objectId)) {
+                return group;
+            }
+        }
+        return null;
+    }
+    /**
+     * Adds a child object to this group.
+     */
+    addChild(object) {
+        if (!this.childIds.includes(object.id)) {
+            this.childIds.push(object.id);
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+        }
+    }
+    /**
+     * Removes a child object from this group.
+     */
+    removeChild(objectId) {
+        const index = this.childIds.indexOf(objectId);
+        if (index !== -1) {
+            this.childIds.splice(index, 1);
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+        }
+    }
+    /**
+     * Ungroups this group, returning all children to top-level objects.
+     * The group itself should be removed after calling this.
+     */
+    ungroup() {
+        return this.children;
+    }
+    /**
+     * Finalizes the group after children have been positioned (e.g., after paste).
+     * Refreshes the bounding box and captures child snapshots.
+     */
+    finalize() {
+        this.refreshBoundingBox();
+        this.captureChildSnapshots();
+    }
+    /**
+     * Recalculates the group's bounding box based on its children.
+     */
+    refreshBoundingBox() {
+        if (this.children.length === 0) {
+            this.width = 0;
+            this.height = 0;
+            this.translateX = 0;
+            this.translateY = 0;
+            return;
+        }
+        if (this.children.length === 1) {
+            // Single child: inherit its bounding box
+            const child = this.children[0];
+            this.translateX = child.boundingBox.x;
+            this.translateY = child.boundingBox.y;
+            this.width = child.boundingBox.width * this.scale;
+            this.height = child.boundingBox.height * this.scale;
+            return;
+        }
+        // Multiple children: calculate encompassing bounding box
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let minY = Infinity;
+        let maxY = -Infinity;
+        this.children.forEach(child => {
+            const polygon = child.rotatedPolygon;
+            const corners = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+            corners.forEach(corner => {
+                // Rotate corner into local space (aligned with group rotation)
+                const rx = corner.x * cos - corner.y * sin;
+                const ry = corner.x * sin + corner.y * cos;
+                if (rx < minX)
+                    minX = rx;
+                if (rx > maxX)
+                    maxX = rx;
+                if (ry < minY)
+                    minY = ry;
+                if (ry > maxY)
+                    maxY = ry;
+            });
+        });
+        // Dimensions in world units (unrotated)
+        const worldWidth = maxX - minX;
+        const worldHeight = maxY - minY;
+        this.width = (worldWidth - this.padding) * this.scale;
+        this.height = (worldHeight - this.padding) * this.scale;
+        // Center of the box in rotated space
+        const cRx = (minX + maxX) / 2;
+        const cRy = (minY + maxY) / 2;
+        // Rotate center back to world space
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
+        const cx = cRx * cosR - cRy * sinR;
+        const cy = cRx * sinR + cRy * cosR;
+        this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
+        this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
+    }
+    /**
+     * Captures snapshots of child states for transformation operations.
+     */
+    captureChildSnapshots() {
+        this.unchangedChildSnapshots.clear();
+        this.snapshotRotation = this.rotation;
+        this.snapshotTranslateX = this.translateX;
+        this.snapshotTranslateY = this.translateY;
+        this.snapshotTotalWidth = this.totalWidth;
+        this.snapshotTotalHeight = this.totalHeight;
+        this.snapshotScale = this.scale || 1;
+        this.children.forEach(child => {
+            this.unchangedChildSnapshots.set(child.id, {
+                id: child.id,
+                translateX: child.translateX,
+                translateY: child.translateY,
+                rotation: child.rotation,
+                width: child.width,
+                height: child.height,
+                totalWidth: child.totalWidth,
+                totalHeight: child.totalHeight,
+                scale: child.scale,
+            });
+        });
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // TRANSFORMATION METHODS
+    // ─────────────────────────────────────────────────────────────────────────────
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        this._core.store.state.objects.transaction(() => {
+            this._core.store.state.objects.update(this);
+            this.children.forEach(child => {
+                child.move(startX, startY, endX, endY);
+                // Update any lines anchored to this child
+                this._core.anchorManager.updateAnchorsForObject(child.id);
+            });
+        });
+        // Update snapshots
+        this.unchangedChildSnapshots.forEach(snapshot => {
+            snapshot.translateX += deltaX;
+            snapshot.translateY += deltaY;
+        });
+    }
+    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;
+        // Calculate new center
+        const newTotalWidth = width + this.padding * 2;
+        const newTotalHeight = height + this.padding * 2;
+        const newCenterX = x + newTotalWidth / 2 / this.scale;
+        const newCenterY = y + newTotalHeight / 2 / this.scale;
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
+        this._core.store.state.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;
+                // Vector from old group center to child center
+                const dx = childCenterX - oldCenterX;
+                const dy = childCenterY - oldCenterY;
+                // Rotate to local space
+                const localX = dx * cos - dy * sin;
+                const localY = dx * sin + dy * cos;
+                // Scale in local space
+                const scaledLocalX = localX * widthScaleFactor;
+                const scaledLocalY = localY * heightScaleFactor;
+                // Rotate back to world space
+                const rotatedX = scaledLocalX * cosR - scaledLocalY * sinR;
+                const rotatedY = scaledLocalX * sinR + scaledLocalY * cosR;
+                // New child center
+                const newChildCenterX = newCenterX + rotatedX;
+                const newChildCenterY = newCenterY + rotatedY;
+                // Calculate relative rotation for scaling
+                const relativeRotation = child.rotation - 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 updatedTotalWidth = updatedWidth + child.padding * 2;
+                const updatedTotalHeight = updatedHeight + child.padding * 2;
+                const updatedX = newChildCenterX - updatedTotalWidth / 2 / child.scale;
+                const updatedY = newChildCenterY - updatedTotalHeight / 2 / child.scale;
+                child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
+                // Update anchored lines
+                this._core.anchorManager.updateAnchorsForObject(child.id);
+            });
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+            this._core.store.state.objects.update(this);
+        });
+    }
+    rotate(value) {
+        this.rotation = value;
+        const centerX = this.translateX + this.totalWidth / 2 / this.scale;
+        const centerY = this.translateY + this.totalHeight / 2 / this.scale;
+        const angle = value - this.snapshotRotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        this._core.store.state.objects.transaction(() => {
+            this._core.store.state.objects.update(this);
+            this.children.forEach(child => {
+                const unchangedSnapshot = this.unchangedChildSnapshots.get(child.id);
+                if (!unchangedSnapshot)
+                    return;
+                const offsetX = this.getOffsetXToCenterFromSnapshot(unchangedSnapshot);
+                const offsetY = this.getOffsetYToCenterFromSnapshot(unchangedSnapshot);
+                const rotatedX = cos * offsetX - sin * offsetY;
+                const rotatedY = sin * offsetX + cos * offsetY;
+                child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
+                child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
+                child.rotate(this.children.length === 1 ? value : unchangedSnapshot.rotation + angle);
+            });
+        });
+    }
+    getOffsetXToCenterFromSnapshot(snapshot) {
+        const childCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;
+        const groupScale = this.snapshotScale || this.scale || 1;
+        const groupCenterX = this.snapshotTranslateX + this.snapshotTotalWidth / groupScale / 2;
+        return childCenterX - groupCenterX;
+    }
+    getOffsetYToCenterFromSnapshot(snapshot) {
+        const childCenterY = snapshot.translateY + snapshot.totalHeight / snapshot.scale / 2;
+        const groupScale = this.snapshotScale || this.scale || 1;
+        const groupCenterY = this.snapshotTranslateY + this.snapshotTotalHeight / groupScale / 2;
+        return childCenterY - groupCenterY;
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // HIT TESTING
+    // ─────────────────────────────────────────────────────────────────────────────
+    hitTest(x, y) {
+        // Check if point is inside any child
+        return this.children.some(child => child.hitTest(x, y));
+    }
+    hitTestPolygon(polygon) {
+        // Check if polygon intersects with any child
+        return this.children.some(child => child.hitTestPolygon(polygon));
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // COPY & SERIALIZATION
+    // ─────────────────────────────────────────────────────────────────────────────
+    copy() {
+        const copiedGroup = KritzelGroup.create(this._core);
+        // Deep copy all children but DON'T add to store yet
+        // Store the copied children temporarily for paste() to handle
+        const copiedChildren = [];
+        this.children
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .forEach(child => {
+            const copiedChild = child.copy();
+            copiedChildren.push(copiedChild);
+            copiedGroup.childIds.push(copiedChild.id);
+        });
+        // Store copied children on the group for paste() to access
+        copiedGroup._pendingChildren = copiedChildren;
+        // Copy group properties
+        copiedGroup.rotation = this.rotation;
+        copiedGroup.translateX = this.translateX;
+        copiedGroup.translateY = this.translateY;
+        copiedGroup.width = this.width;
+        copiedGroup.height = this.height;
+        return copiedGroup;
+    }
+    serialize() {
+        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedChildSnapshots, ...remainingProps } = this;
+        const clonedProps = structuredClone(remainingProps);
+        // Convert Map to plain object for serialization
+        clonedProps.unchangedChildSnapshots = Object.fromEntries(this.unchangedChildSnapshots);
+        return clonedProps;
+    }
+    deserialize(object) {
+        super.deserialize(object);
+        // Restore the Map from serialized object
+        if (object.unchangedChildSnapshots) {
+            this.unchangedChildSnapshots = new Map(Object.entries(object.unchangedChildSnapshots));
+        }
+        return this;
+    }
+    update() {
+        this._core.store.state.objects.update(this);
+    }
+    /**
+     * Updates the workspace ID for this group and all its children.
+     */
+    updateWorkspaceId(workspaceId) {
+        this.workspaceId = workspaceId;
+        this.children.forEach(child => {
+            child.workspaceId = workspaceId;
+            // Recursively update nested groups
+            if (child instanceof KritzelGroup) {
+                child.updateWorkspaceId(workspaceId);
+            }
+        });
+    }
+}
+
 class KritzelSelectionGroup extends KritzelBaseObject {
     __class__ = 'KritzelSelectionGroup';
     // Store only object IDs instead of full objects
@@ -671,6 +1065,21 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.captureUnchangedSnapshots();
         this.refreshObjectDimensions();
     }
+    /**
+     * Prepares the selection group and its children for a transform interaction (rotate/resize).
+     * Ensures snapshot state is aligned with the current visual state.
+     */
+    beginTransform() {
+        // Keep the selection group's bounding box current before snapshotting.
+        this.refreshObjectDimensions();
+        this.captureUnchangedSnapshots();
+        // Groups need their own child snapshots aligned with the current transform.
+        this.objects.forEach(obj => {
+            if (obj instanceof KritzelGroup) {
+                obj.finalize();
+            }
+        });
+    }
     deselectAllChildren() {
         this.objects.forEach(obj => (obj.isSelected = false));
     }
@@ -931,9 +1340,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         return objCenterY - groupCenterY;
     }
     hitTest(x, y) {
-        const containsOnlyLines = this.objects.every(obj => obj.__class__ === 'KritzelLine');
-        if (containsOnlyLines) {
-            return this.objects.some(obj => obj.hitTest(x, y));
+        const isSingleLine = this.objects.length === 1 && this.objects[0].__class__ === 'KritzelLine';
+        if (isSingleLine) {
+            return this.objects[0].hitTest(x, y);
         }
         const polygon = this.rotatedPolygon;
         const polyPoints = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
@@ -1346,6 +1755,8 @@ class KritzelBaseHandler {
     }
 }
 
+/** Threshold in screen pixels for disconnecting anchored lines during drag */
+const ANCHOR_DISCONNECT_THRESHOLD = 30;
 class KritzelMoveHandler extends KritzelBaseHandler {
     dragStartX;
     dragStartY;
@@ -1353,6 +1764,11 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     startY;
     endX;
     endY;
+    /** Initial position when drag started (for calculating total accumulated distance) */
+    initialDragX = 0;
+    initialDragY = 0;
+    /** Set of line IDs that have been disconnected from anchors during this drag */
+    disconnectedLineIds = new Set();
     hasMoved = false;
     trackedPointerId = null;
     constructor(core) {
@@ -1365,6 +1781,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         this.startY = 0;
         this.endX = 0;
         this.endY = 0;
+        this.initialDragX = 0;
+        this.initialDragY = 0;
+        this.disconnectedLineIds.clear();
         this.hasMoved = false;
         this.trackedPointerId = null;
     }
@@ -1384,6 +1803,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
                     this.startY = this.dragStartY;
+                    this.initialDragX = clientX;
+                    this.initialDragY = clientY;
+                    this.disconnectedLineIds.clear();
                     this.trackedPointerId = event.pointerId;
                 }
                 else {
@@ -1409,6 +1831,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = y;
                     this.startX = x;
                     this.startY = y;
+                    this.initialDragX = x;
+                    this.initialDragY = y;
+                    this.disconnectedLineIds.clear();
                     this.trackedPointerId = event.pointerId;
                 }
                 else {
@@ -1432,6 +1857,8 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveDeltaY = Math.abs(clientY - this.startY);
                 const moveThreshold = 5;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(clientX, clientY);
                     selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
@@ -1457,6 +1884,8 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveThreshold = 5;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
                     clearTimeout(this._core.store.state.longTouchTimeout);
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(x, y);
                     selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
                     this.dragStartX = x;
                     this.dragStartY = y;
@@ -1491,6 +1920,48 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         }
         this.reset();
     }
+    /**
+     * Checks if the total accumulated drag distance exceeds the anchor disconnect threshold.
+     * If so, disconnects all anchors from any KritzelLine objects in the selection group.
+     * This allows anchored lines to be freely moved after dragging beyond the threshold.
+     */
+    checkAndDisconnectAnchors(currentX, currentY) {
+        const totalDeltaX = currentX - this.initialDragX;
+        const totalDeltaY = currentY - this.initialDragY;
+        const totalDistance = Math.sqrt(totalDeltaX * totalDeltaX + totalDeltaY * totalDeltaY);
+        if (totalDistance < ANCHOR_DISCONNECT_THRESHOLD) {
+            return;
+        }
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        // Find and disconnect anchors from all anchored lines in the selection
+        for (const obj of selectionGroup.objects) {
+            // Skip if already disconnected in this drag session
+            if (this.disconnectedLineIds.has(obj.id)) {
+                continue;
+            }
+            // Check if this is a line with anchors
+            if (obj instanceof KritzelLine) {
+                const line = obj;
+                const hasAnchors = line.startAnchor || line.endAnchor;
+                if (hasAnchors) {
+                    // Disconnect both anchors
+                    if (line.startAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'start');
+                    }
+                    if (line.endAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'end');
+                    }
+                    // Mark as disconnected so we don't try again
+                    this.disconnectedLineIds.add(line.id);
+                    // Update the line to persist the change
+                    this._core.store.state.objects.update(line);
+                }
+            }
+        }
+    }
 }
 
 var KritzelHandleType;
@@ -1722,6 +2193,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (KritzelEventHelper.isLeftClick(event)) {
                 const selectionGroup = this._core.store.selectionGroup;
                 if (selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    selectionGroup.beginTransform();
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
                     this._core.store.state.isRotating = true;
@@ -1745,6 +2217,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (activePointers.length === 1) {
                 const selectionGroup = this._core.store.selectionGroup;
                 if (selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    selectionGroup.beginTransform();
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
                     this._core.store.state.isRotating = true;
@@ -2055,11 +2528,14 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (!object) {
             return;
         }
-        object.isSelected = false;
+        // Resolve child objects to their parent groups
+        const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
+        const objectToSelect = parentGroup || object;
+        objectToSelect.isSelected = false;
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        selectionGroup.addOrRemove(object);
+        selectionGroup.addOrRemove(objectToSelect);
         selectionGroup.isSelected = true;
-        selectionGroup.rotation = object.rotation;
+        selectionGroup.rotation = objectToSelect.rotation;
         this._core.addSelectionGroup(selectionGroup);
         this._core.rerender();
     }
@@ -2068,10 +2544,24 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
+        // Resolve child objects to their parent groups to avoid double-move
+        const resolvedObjects = new Map();
+        selectedObjects.forEach(obj => {
+            // Check if this object is a child of a KritzelGroup
+            const parentGroup = KritzelGroup.findParentGroup(this._core, obj.id);
+            if (parentGroup) {
+                // Add the parent group instead of the child
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                // Not a child of any group, add the object itself
+                resolvedObjects.set(obj.id, obj);
+            }
+            obj.isSelected = false;
+        });
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        selectedObjects.forEach(o => {
+        resolvedObjects.forEach(o => {
             selectionGroup.addOrRemove(o);
-            o.isSelected = false;
         });
         selectionGroup.isSelected = true;
         if (selectionGroup.length === 1) {
@@ -36735,6 +37225,9 @@ class KritzelKeyHandler extends 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);
@@ -36979,6 +37472,9 @@ class KritzelReviver {
                     case 'KritzelSelectionGroup':
                         revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelGroup':
+                        revivedObj = KritzelGroup.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelWorkspace':
                         revivedObj = KritzelWorkspace.create(this._core, obj).deserialize(obj);
                         break;
@@ -37814,7 +38310,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 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
@@ -37951,6 +38455,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 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
@@ -38062,6 +38588,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 = 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;
@@ -38460,6 +39043,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     async sendToBack(object) {
         this.core.sendToBack(object);
     }
+    async group() {
+        this.core.group();
+    }
+    async ungroup() {
+        this.core.ungroup();
+    }
     async undo() {
         this.core.undo();
     }
@@ -38646,7 +39235,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: '209ccf8414c635c9e04ca4807c95a29c629071ec' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'df6a03d1341887960bb91cbaa0a5dca6880a9293', class: "debug-panel" }, h("div", { key: '65157757ec6549ad2af311085a9618ab661f5ac0' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '20137b6c651a9aa8df15bce66d5bfe870a7af139' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '49dd30286641236ae428c731bb181cb06269852e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'd8ee431a10335e99aec40a596817765d7ee3f67b' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '34b1f31146080780433d6c1718d13bbfe397cb9b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '4c279a106101cf808c91a2be4987569b21ae52b3' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '6ebd7ad3c803ef45d58a74180c52e8be8af8bca3' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '345970c8b2b54f3a0d8fe1d9bb1b7b33023db386' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'fc265ae0e71cf22311cab3006dfc29b9d24397d2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '9f921032a58b55e60f82d11a76f269051357d3e1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '6d197e06cc362a9ecb8bfe00d272aecfec2b49e1' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '5313589ba2a509c95a5730dcf29c4003d9884cbf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '8af9f9d6e33a2897c20962048bbf2a058f9d4a45' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '81aec0050d3e2122643b61fd725e71b25d97bc27' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'c9956f05c01b74ee1666d9395a2715c3463fe401' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'ae0a01c8f8aafc08326b136720c6a75b6aec6299' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7816d40d73248a55120440e6d721325e1894178e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c22383bacca0ada584f2e8a8577523c905d74ae2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '8185a7318c6cdfde558cc372b79582d58b706f9e' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d56b05377693ef032ab2316fa753ecedf264b9c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '2e2bf9fd321ef04dc0ac6dc21539eb0117c9fb23' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '3118ab970d5d37e01405c42308fc051d675d4bfa' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'd8a31065843f89552f2d9c03dcbca960a716fa6c' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'cb8d28b6ea63cbb6572f761011fccb847b748227' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'd112a7e833c265085246817423557bfdc5b30b74' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'df4f302192a8fc9644b7f883618b0a0f8a600dc8', id: "origin", class: "origin", style: {
+        return (h(Host, { key: 'd0f13eb1d34a6edcba439a501edbaab1875112f1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'f722474cfd43ab13e306cea908871af77015d015', class: "debug-panel" }, h("div", { key: 'efd483bc92223d78f6a0f661a1911820de83682a' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '37c213c1e3d57cb79ccb99ff65404fa3e03f07e0' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '68bcdc9e10d89a6a4284dbdc11d679f6c8bed6df' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'c653966e412a801d536bfdcf8ab79176376693a5' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'db83b7d58514296daa1465926867d099df6988f9' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '1f15e3edec3165920207ba8f1b2886aa72049d08' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'c4e468e3c602f1fd62d4b13de1ec39dd1302768f' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '8eae67aac27495a611ba125e029473119665bb7e' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '8b22934652db52d915cb21f48f8340ceb2fe1327' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'd4d1872b8e1c33f0925a2f3cfcf4bc652cc5637e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '76fc159e2f38324248db21cab17fe76dd7add144' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'aa5a5a7c5faac899492f9c87cb9bf5cf960329cb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '21d4d43e7fc91a187055906c9f38529407f4ec6f' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'b43ba7bafd3ac52f5622e7d980456e7cbf5ff0fb' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'ecf9749bf4eece2970a62230d323fc205ce62fed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '6f9c7b7fa357f86c05aa76c02428ab0584856f3d' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7b61ed971fd7b4a029204861b19677421c049a33' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '875ed8cdf18b46c362b6b0c331a8f9fcba6bc1e2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'f56f27eff2c7e715528a32b4fe874da5220bc1ef' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '7831c3571031b029766b0fa16fe2b0e29e8c19b5' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd4167e465da2f690b9d1f6d3cb8778f4a618843f' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '00dfeba01da344a0e3c40f2f92ca539ef59d5da5' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '30948e66636501df9863caa67da468d45517a44f' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '9ee2c0bb69e9a150b7ab7c0ca9881897b5ec2a72' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '9d470ca319b0c32de7565c46b28c6483d4b9c1cb' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), 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 (h("div", { key: object.id, style: {
@@ -38895,18 +39484,18 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (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 && (h("kritzel-context-menu", { key: 'f726cabc77f66c24618dc0b54cca8bd681608dde', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
-                zIndex: '10000',
+                zIndex: '10002',
             }, onActionSelected: event => {
                 event.detail.action({
                     x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '68106a187ca81a38a819f1d52895b2858a8a28cb', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bf42f27e52c03f9d00a5459883ac45ed39bb1dcd', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -38936,6 +39525,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "sendBackward": [64],
         "bringToFront": [64],
         "sendToBack": [64],
+        "group": [64],
+        "ungroup": [64],
         "undo": [64],
         "redo": [64],
         "hideContextMenu": [64],
@@ -38989,7 +39580,7 @@ function defineCustomElement() {
     } });
 }
 
-export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelLine as E, KritzelLineTool as F, KritzelEraserTool as G, HocuspocusProvider as H, KritzelImageTool as I, KritzelCursorHelper as J, KritzelImage as K, KritzelSelectionTool as L, IndexedDBSyncProvider as M, KritzelAppStateMap as N, Observable$1 as O, KritzelAnchorManager as P, ABSOLUTE_SCALE_MAX as Q, ABSOLUTE_SCALE_MIN as R, ShapeType as S, KritzelShapeTool as T, defineCustomElement as U, KritzelEngine as V, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=p-f_ut_1_F.js.map
+export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelLine as E, KritzelGroup as F, KritzelLineTool as G, HocuspocusProvider as H, KritzelEraserTool as I, KritzelImageTool as J, KritzelImage as K, KritzelCursorHelper as L, KritzelSelectionTool as M, IndexedDBSyncProvider as N, Observable$1 as O, KritzelAppStateMap as P, KritzelAnchorManager as Q, ABSOLUTE_SCALE_MAX as R, ShapeType as S, ABSOLUTE_SCALE_MIN as T, KritzelShapeTool as U, defineCustomElement as V, KritzelEngine as W, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
+//# sourceMappingURL=p-D0UgEnEL.js.map
 
-//# sourceMappingURL=p-f_ut_1_F.js.map
+//# sourceMappingURL=p-D0UgEnEL.js.map