kritzel-stencil 0.1.73 → 0.1.75

package/dist/cjs/{workspace.migrations-DcwqsqPC.js → workspace.migrations-DkmVO6dE.js}

@@ -266,6 +266,7 @@ class KritzelBaseObject {
     rotation = 0;
     markedForRemoval = false;
     zIndex = 0;
+    userId;
     /** Whether the object is currently visible on the canvas */
     isVisible = true;
     isSelected = false;
@@ -446,6 +447,7 @@ class KritzelBaseObject {
         object._core = core;
         object.zIndex = core.store.currentZIndex;
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**
@@ -15296,6 +15298,7 @@ class KritzelText extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.fontSize = fontSize;
         object.fontFamily = fontFamily;
         object.translateX = 0;
@@ -15685,6 +15688,7 @@ class KritzelPath extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.options = options;
         object.points = options?.points ?? [];
         object.translateX = options?.translateX ?? 0;
@@ -16186,6 +16190,7 @@ class KritzelImage extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.x = 0;
         object.y = 0;
         object.translateX = 0;
@@ -16336,6 +16341,7 @@ class KritzelLine extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.options = options;
         object.startX = options?.startX ?? 0;
         object.startY = options?.startY ?? 0;
@@ -17095,6 +17101,7 @@ class KritzelGroup extends KritzelBaseObject {
         group._core = core;
         group.id = group.generateId();
         group.workspaceId = core.store.state.activeWorkspace.id;
+        group.userId = core.user?.id;
         group.scale = core.store.state.scale;
         group.zIndex = core.store.currentZIndex;
         return group;
@@ -17646,6 +17653,7 @@ class KritzelShape extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.x = config?.x ?? 0;
         object.y = config?.y ?? 0;
         object.translateX = config?.translateX ?? 0;
@@ -18326,6 +18334,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 path.isCompleted = false;
                 this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
+                this._core.store.state.objects?.setActiveDrawingObject(path.id);
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
@@ -18349,6 +18358,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 path.isCompleted = false;
                 this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
+                this._core.store.state.objects?.setActiveDrawingObject(path.id);
             }
         }
     }
@@ -18439,6 +18449,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentPath]);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentPathId = null;
                 }
             }
@@ -18454,6 +18465,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentPath]);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentPathId = null;
                 }
             }
@@ -18484,6 +18496,10 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     maxX;
     minY;
     maxY;
+    // Selection styling properties
+    handleColor;
+    handleStrokeColor;
+    handleSize = 6;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -18538,6 +18554,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Factory method to create a new KritzelSelectionGroup instance.
      * Initializes the selection group with default properties and associates it with the core instance.
+     * Default styling uses values from the theme system (selection section).
      * @param core - The KritzelCore instance to associate with this selection group
      * @returns A new KritzelSelectionGroup instance configured with default settings
      */
@@ -18546,8 +18563,15 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
+        // Initialize styling with theme-aware defaults
+        object.borderColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.borderWidth = 2;
+        object.handleColor = { light: '#ffffff', dark: '#1a1a1a' };
+        object.handleStrokeColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.handleSize = 6;
         return object;
     }
     /**
@@ -18713,7 +18737,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
      * @returns A serializable object representation of the selection group
      */
     serialize() {
-        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedObjectSnapshots, _cachedObjects, _cachedObjectIdsHash, snapshotWidth, snapshotHeight, snapshotTranslateX, snapshotTranslateY, ...remainingProps } = this;
+        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedObjectSnapshots, _cachedObjects, _cachedObjectIdsHash, snapshotWidth, snapshotHeight, snapshotTranslateX, snapshotTranslateY, snapshotRotation, ...remainingProps } = this;
         const clonedProps = structuredClone(remainingProps);
         // Ensure objectIds is serialized with the correct key name (getter returns _objectIds)
         clonedProps.objectIds = this.objectIds;
@@ -19103,6 +19127,7 @@ class KritzelLineTool extends KritzelBaseTool {
                 line.isCompleted = false;
                 this._currentLineId = line.id;
                 this._core.store.state.objects.insert(line);
+                this._core.store.state.objects?.setActiveDrawingObject(line.id);
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
@@ -19132,6 +19157,7 @@ class KritzelLineTool extends KritzelBaseTool {
                 line.isCompleted = false;
                 this._currentLineId = line.id;
                 this._core.store.state.objects.insert(line);
+                this._core.store.state.objects?.setActiveDrawingObject(line.id);
             }
         }
     }
@@ -19230,6 +19256,7 @@ class KritzelLineTool extends KritzelBaseTool {
                         // Switch to selection tool and select the drawn line
                         this.selectLineAndSwitchTool(currentLine);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentLineId = null;
                 }
             }
@@ -19247,6 +19274,7 @@ class KritzelLineTool extends KritzelBaseTool {
                         // Switch to selection tool and select the drawn line
                         this.selectLineAndSwitchTool(currentLine);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentLineId = null;
                 }
             }
@@ -19828,6 +19856,7 @@ class KritzelShapeTool extends KritzelBaseTool {
             scale: lockScale ? 1 : viewportScale,
         });
         this._core.store.state.objects.insert(this.currentShape);
+        this._core.store.state.objects?.setActiveDrawingObject(this.currentShape.id);
         this._core.rerender();
     }
     /**
@@ -19888,6 +19917,7 @@ class KritzelShapeTool extends KritzelBaseTool {
             this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
         this.isDrawing = false;
+        this._core.store.state.objects?.setActiveDrawingObject(null);
         this.currentShape = null;
         this._core.rerender();
     }
@@ -20838,6 +20868,7 @@ class KritzelSelectionBox extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         object.backgroundColor = { light: 'rgba(0, 122, 255, 0.2)', dark: 'rgba(0, 122, 255, 0.2)' };
@@ -21002,6 +21033,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this._core.store.state.isSelecting = false;
         this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
         this._core.store.setSelectionBox(null);
+        this._core.store.state.objects.clearLocalSelectionBox();
     }
     /**
      * Initiates a mouse-based selection by creating a selection box at the click position.
@@ -21020,7 +21052,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup));
+        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
         this._core.store.setSelectionBox(null);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
@@ -21052,7 +21084,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup));
+        this._core.store.state.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
         this._core.store.setSelectionBox(null);
         if (!isAdditive) {
             this._core.store.setSelectionGroup(null);
@@ -21080,6 +21112,12 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
+            this._core.store.state.objects.setLocalSelectionBox({
+                x: selectionBox.translateX,
+                y: selectionBox.translateY,
+                width: width / selectionBox.scale,
+                height: height / selectionBox.scale,
+            });
             if (width > 0 || height > 0) {
                 this.updateSelectedObjects();
             }
@@ -21113,6 +21151,12 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
+            this._core.store.state.objects.setLocalSelectionBox({
+                x: selectionBox.translateX,
+                y: selectionBox.translateY,
+                width: width / selectionBox.scale,
+                height: height / selectionBox.scale,
+            });
             if (width > 0 || height > 0) {
                 this.updateSelectedObjects();
             }
@@ -22342,6 +22386,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
  * IndexedDB sync provider for local persistence
  */
 class IndexedDBSyncProvider {
+    type = 'local';
     provider;
     isConnected = false;
     constructor(docName, doc, options) {
@@ -22363,6 +22408,10 @@ class IndexedDBSyncProvider {
         // IndexedDB doesn't need explicit disconnect
         this.isConnected = false;
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         if (this.provider) {
             this.provider.destroy();
@@ -25558,16 +25607,22 @@ class KritzelAnchorManager {
         if (!KritzelClassHelper.isInstanceOf(selectedObject, 'KritzelLine'))
             return null;
         const line = selectedObject;
-        const startAnchorViz = this.computeAnchorVisualization(line, 'start');
-        const endAnchorViz = this.computeAnchorVisualization(line, 'end');
+        const startAnchorVizRaw = this.computeAnchorVisualization(line, 'start');
+        const endAnchorVizRaw = this.computeAnchorVisualization(line, 'end');
+        const startAnchorViz = this.isFiniteAnchorVisualization(startAnchorVizRaw) ? startAnchorVizRaw : null;
+        const endAnchorViz = this.isFiniteAnchorVisualization(endAnchorVizRaw) ? endAnchorVizRaw : null;
         if (!startAnchorViz && !endAnchorViz)
             return null;
-        const scale = this._core.store.state.scale;
-        const lineStrokeWidth = line.strokeWidth / line.scale;
+        const scale = this.getSafeScale(this._core.store.state.scale);
+        const lineScale = this.getSafeScale(line.scale);
+        const lineStrokeWidth = line.strokeWidth / lineScale;
         const indicatorStrokeWidth = `${2 / scale}`;
         const dashLength = Math.max(lineStrokeWidth * 2, 4 / scale);
         const dashArray = `${dashLength} ${dashLength}`;
         const indicatorRadius = 8 / scale;
+        if (!this.areFiniteNumbers(lineStrokeWidth, dashLength, indicatorRadius)) {
+            return null;
+        }
         return {
             lineStrokeWidth,
             indicatorStrokeWidth,
@@ -25589,31 +25644,39 @@ class KritzelAnchorManager {
         const snapCandidate = this.getSnapCandidate();
         if (!snapCandidate)
             return null;
-        const scale = this._core.store.state.scale;
+        if (!this.areFiniteNumbers(snapCandidate.centerX, snapCandidate.centerY, snapCandidate.lineEndpointX, snapCandidate.lineEndpointY)) {
+            return null;
+        }
+        const scale = this.getSafeScale(this._core.store.state.scale);
         const indicatorRadius = 8 / scale;
         const indicatorStrokeWidth = `${2 / scale}`;
-        const lineStrokeWidth = snapCandidate.lineStrokeWidth
-            ? `${snapCandidate.lineStrokeWidth}`
-            : `${4 / scale}`;
-        const lineStrokeWidthNum = snapCandidate.lineStrokeWidth || (4 / scale);
+        const lineStrokeWidthNum = this.areFiniteNumbers(snapCandidate.lineStrokeWidth) && snapCandidate.lineStrokeWidth > 0
+            ? snapCandidate.lineStrokeWidth
+            : (4 / scale);
+        const lineStrokeWidth = `${lineStrokeWidthNum}`;
         const dashLength = Math.max(lineStrokeWidthNum * 2, 4 / scale);
         const dashArray = `${dashLength} ${dashLength}`;
         const lineStroke = snapCandidate.lineStroke || '#000000';
-        let solidLineEndX = snapCandidate.edgeX;
-        let solidLineEndY = snapCandidate.edgeY;
+        let edgeX = this.areFiniteNumbers(snapCandidate.edgeX) ? snapCandidate.edgeX : undefined;
+        let edgeY = this.areFiniteNumbers(snapCandidate.edgeY) ? snapCandidate.edgeY : undefined;
+        let solidLineEndX = edgeX;
+        let solidLineEndY = edgeY;
         let arrowPoints;
-        if (snapCandidate.arrowOffset && snapCandidate.edgeX !== undefined && snapCandidate.edgeY !== undefined) {
-            const dx = snapCandidate.lineEndpointX - snapCandidate.edgeX;
-            const dy = snapCandidate.lineEndpointY - snapCandidate.edgeY;
+        const arrowOffset = this.areFiniteNumbers(snapCandidate.arrowOffset) && snapCandidate.arrowOffset > 0
+            ? snapCandidate.arrowOffset
+            : undefined;
+        if (arrowOffset !== undefined && edgeX !== undefined && edgeY !== undefined) {
+            const dx = snapCandidate.lineEndpointX - edgeX;
+            const dy = snapCandidate.lineEndpointY - edgeY;
             const length = Math.sqrt(dx * dx + dy * dy);
-            if (length > snapCandidate.arrowOffset) {
-                solidLineEndX = snapCandidate.edgeX + (dx / length) * snapCandidate.arrowOffset;
-                solidLineEndY = snapCandidate.edgeY + (dy / length) * snapCandidate.arrowOffset;
+            if (length > arrowOffset) {
+                solidLineEndX = edgeX + (dx / length) * arrowOffset;
+                solidLineEndY = edgeY + (dy / length) * arrowOffset;
             }
             // Calculate arrow head points
             // Direction from line endpoint to edge (arrow direction)
-            const arrowDx = snapCandidate.edgeX - snapCandidate.lineEndpointX;
-            const arrowDy = snapCandidate.edgeY - snapCandidate.lineEndpointY;
+            const arrowDx = edgeX - snapCandidate.lineEndpointX;
+            const arrowDy = edgeY - snapCandidate.lineEndpointY;
             const arrowLengthTotal = Math.sqrt(arrowDx * arrowDx + arrowDy * arrowDy);
             if (arrowLengthTotal > 0) {
                 const ux = arrowDx / arrowLengthTotal;
@@ -25622,11 +25685,11 @@ class KritzelAnchorManager {
                 const px = -uy;
                 const py = ux;
                 // Arrow dimensions
-                const arrowLength = snapCandidate.arrowOffset;
+                const arrowLength = arrowOffset;
                 const arrowWidth = arrowLength; // 1:1 ratio
                 // Arrow tip at edge
-                const tipX = snapCandidate.edgeX;
-                const tipY = snapCandidate.edgeY;
+                const tipX = edgeX;
+                const tipY = edgeY;
                 // Arrow base
                 const baseX = tipX - ux * arrowLength;
                 const baseY = tipY - uy * arrowLength;
@@ -25635,9 +25698,31 @@ class KritzelAnchorManager {
                 const leftY = baseY + py * arrowWidth / 2;
                 const rightX = baseX - px * arrowWidth / 2;
                 const rightY = baseY - py * arrowWidth / 2;
-                arrowPoints = `${tipX},${tipY} ${leftX},${leftY} ${rightX},${rightY}`;
+                if (this.areFiniteNumbers(tipX, tipY, leftX, leftY, rightX, rightY)) {
+                    arrowPoints = `${tipX},${tipY} ${leftX},${leftY} ${rightX},${rightY}`;
+                }
             }
         }
+        if (!this.areFiniteNumbers(indicatorRadius, lineStrokeWidthNum, dashLength)) {
+            return null;
+        }
+        const snapLinePath = (() => {
+            if (snapCandidate.controlX !== undefined &&
+                snapCandidate.controlY !== undefined &&
+                snapCandidate.t !== undefined &&
+                this.areFiniteNumbers(snapCandidate.controlX, snapCandidate.controlY, snapCandidate.t)) {
+                const startT = snapCandidate.endpoint === 'start' ? 1 - snapCandidate.t : snapCandidate.t;
+                // Ensure meaningful range
+                if (startT >= 1)
+                    return undefined;
+                const segment = this.extractQuadraticSegment({ x: snapCandidate.lineEndpointX, y: snapCandidate.lineEndpointY }, { x: snapCandidate.controlX, y: snapCandidate.controlY }, { x: snapCandidate.centerX, y: snapCandidate.centerY }, startT, 1);
+                if (!this.areFiniteNumbers(segment.start.x, segment.start.y, segment.control.x, segment.control.y, segment.end.x, segment.end.y)) {
+                    return undefined;
+                }
+                return `M ${segment.start.x} ${segment.start.y} Q ${segment.control.x} ${segment.control.y} ${segment.end.x} ${segment.end.y}`;
+            }
+            return undefined;
+        })();
         return {
             indicatorRadius,
             indicatorStrokeWidth,
@@ -25648,27 +25733,15 @@ class KritzelAnchorManager {
             centerY: snapCandidate.centerY,
             lineEndpointX: snapCandidate.lineEndpointX,
             lineEndpointY: snapCandidate.lineEndpointY,
-            edgeX: snapCandidate.edgeX,
-            edgeY: snapCandidate.edgeY,
-            arrowOffset: snapCandidate.arrowOffset,
+            edgeX,
+            edgeY,
+            arrowOffset,
             arrowStyle: snapCandidate.arrowStyle,
             arrowFill: snapCandidate.arrowFill,
             solidLineEndX,
             solidLineEndY,
             arrowPoints,
-            snapLinePath: (() => {
-                if (snapCandidate.controlX !== undefined &&
-                    snapCandidate.controlY !== undefined &&
-                    snapCandidate.t !== undefined) {
-                    const startT = snapCandidate.endpoint === 'start' ? 1 - snapCandidate.t : snapCandidate.t;
-                    // Ensure meaningful range
-                    if (startT >= 1)
-                        return undefined;
-                    const segment = this.extractQuadraticSegment({ x: snapCandidate.lineEndpointX, y: snapCandidate.lineEndpointY }, { x: snapCandidate.controlX, y: snapCandidate.controlY }, { x: snapCandidate.centerX, y: snapCandidate.centerY }, startT, 1);
-                    return `M ${segment.start.x} ${segment.start.y} Q ${segment.control.x} ${segment.control.y} ${segment.end.x} ${segment.end.y}`;
-                }
-                return undefined;
-            })(),
+            snapLinePath,
         };
     }
     // ============================================
@@ -25846,12 +25919,19 @@ class KritzelAnchorManager {
             return null;
         const centerX = targetObject.centerX;
         const centerY = targetObject.centerY;
+        if (!this.areFiniteNumbers(clipInfo.worldX, clipInfo.worldY, centerX, centerY)) {
+            return null;
+        }
+        const pathD = this.buildAnchorPath(line, endpoint, clipInfo, targetObject) ?? undefined;
+        if (pathD && !this.isFinitePathData(pathD)) {
+            return null;
+        }
         return {
             edgeX: clipInfo.worldX,
             edgeY: clipInfo.worldY,
             centerX,
             centerY,
-            pathD: this.buildAnchorPath(line, endpoint, clipInfo, targetObject) ?? undefined,
+            pathD,
         };
     }
     /**
@@ -26564,9 +26644,10 @@ class KritzelAnchorManager {
         const sin = Math.sin(line.rotation);
         const rotatedX = (px - cx) * cos - (py - cy) * sin + cx;
         const rotatedY = (px - cx) * sin + (py - cy) * cos + cy;
+        const safeLineScale = this.getSafeScale(line.scale);
         return {
-            x: rotatedX / line.scale + line.translateX,
-            y: rotatedY / line.scale + line.translateY,
+            x: rotatedX / safeLineScale + line.translateX,
+            y: rotatedY / safeLineScale + line.translateY,
         };
     }
     /**
@@ -26580,8 +26661,9 @@ class KritzelAnchorManager {
      * @returns Object with x and y coordinates in the line's local SVG space.
      */
     lineWorldToLocal(line, worldX, worldY) {
-        const dx = (worldX - line.translateX) * line.scale;
-        const dy = (worldY - line.translateY) * line.scale;
+        const safeLineScale = this.getSafeScale(line.scale);
+        const dx = (worldX - line.translateX) * safeLineScale;
+        const dy = (worldY - line.translateY) * safeLineScale;
         const cx = line.totalWidth / 2;
         const cy = line.totalHeight / 2;
         const cos = Math.cos(-line.rotation);
@@ -26593,6 +26675,30 @@ class KritzelAnchorManager {
             y: rotatedY + line.y,
         };
     }
+    getSafeScale(scale) {
+        if (Number.isFinite(scale) && Math.abs(scale) > 1e-6) {
+            return scale;
+        }
+        return 1;
+    }
+    areFiniteNumbers(...values) {
+        return values.every(value => value !== undefined && Number.isFinite(value));
+    }
+    isFiniteAnchorVisualization(visualization) {
+        if (!visualization) {
+            return false;
+        }
+        if (!this.areFiniteNumbers(visualization.edgeX, visualization.edgeY, visualization.centerX, visualization.centerY)) {
+            return false;
+        }
+        if (visualization.pathD && !this.isFinitePathData(visualization.pathD)) {
+            return false;
+        }
+        return true;
+    }
+    isFinitePathData(pathD) {
+        return !pathD.includes('Infinity') && !pathD.includes('NaN');
+    }
     /**
      * Checks if an object can be used as an anchor target.
      * Excludes selection-related objects (SelectionBox, SelectionGroup) and
@@ -26653,7 +26759,7 @@ exports.KritzelAlignment = void 0;
 /** Current schema version for the app-state Y.Doc (workspace list & settings). */
 const CURRENT_APP_STATE_SCHEMA_VERSION = 2;
 /** Current schema version for workspace Y.Docs (drawable objects). */
-const CURRENT_WORKSPACE_SCHEMA_VERSION = 1;
+const CURRENT_WORKSPACE_SCHEMA_VERSION = 2;
 
 /**
  * Runs pending schema migrations on a Y.Doc.
@@ -26758,7 +26864,16 @@ const APP_STATE_MIGRATIONS = [
  * 2. Append a new entry with fromVersion = old version, toVersion = new version
  * 3. Implement the migrate() function — it must be idempotent
  */
-const WORKSPACE_MIGRATIONS = [];
+const WORKSPACE_MIGRATIONS = [
+    {
+        fromVersion: 1,
+        toVersion: 2,
+        migrate(_ydoc, _maps) {
+            // No-op: adds optional userId property to objects.
+            // Existing objects without userId are valid (field is optional).
+        },
+    },
+];
 
 exports.APP_STATE_MIGRATIONS = APP_STATE_MIGRATIONS;
 exports.CURRENT_APP_STATE_SCHEMA_VERSION = CURRENT_APP_STATE_SCHEMA_VERSION;

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

@@ -109,6 +109,7 @@ export class KritzelCore {
      */
     setUser(user) {
         this._user = user;
+        this._store.setLocalUserId(user?.id ?? null);
         this._store.state.objects?.setLocalUser(user);
     }
     /**
@@ -508,6 +509,7 @@ export class KritzelCore {
         if (selectionBox) {
             this._store.state.objects.remove(object => object.id === selectionBox.id);
             this._store.setSelectionBox(null);
+            this._store.state.objects.clearLocalSelectionBox();
         }
     }
     /**
@@ -980,7 +982,9 @@ export class KritzelCore {
      */
     clearSelection() {
         this.removeSelectionGroup();
-        this._store.state.objects.remove(o => o instanceof KritzelSelectionBox || o instanceof KritzelSelectionGroup);
+        const localUserId = this._user?.id;
+        this._store.state.objects.remove(o => o instanceof KritzelSelectionBox ||
+            (o instanceof KritzelSelectionGroup && (localUserId == null || o.userId === localUserId || o.userId == null)));
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
         this._store.state.isSelecting = false;
@@ -1134,6 +1138,10 @@ export class KritzelCore {
         if (!object.isSelected) {
             return false;
         }
+        // Remote selection groups always show group UI (border only, no handles)
+        if (object instanceof KritzelSelectionGroup && this._user?.id != null && object.userId != null && object.userId !== this._user.id) {
+            return true;
+        }
         const selectionGroup = this._store.selectionGroup;
         if (!selectionGroup) {
             // During selection phase (no group yet), hide UI for KritzelLine objects

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

@@ -20,6 +20,7 @@ export class KritzelStore {
     _cachedSelectionGroup = null;
     _selectionBoxCacheValid = false;
     _selectionGroupCacheValid = false;
+    _localUserId = null;
     /**
      * Gets the current engine state.
      * @returns The mutable engine state object
@@ -97,9 +98,7 @@ export class KritzelStore {
             height: this._state.viewportHeight / this._state.scale,
             depth: 100,
         };
-        return this._state.objects
-            .query(viewportBounds)
-            .sort((a, b) => a.zIndex - b.zIndex);
+        return this._state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
     }
     /**
      * Gets all objects excluding selection-related objects (selection group and selection box).
@@ -130,16 +129,22 @@ export class KritzelStore {
         return this._cachedSelectionBox;
     }
     /**
-     * Gets the current selection group if one exists.
+     * Gets the current local user's selection group if one exists.
+     * When a local user ID is set, returns only the selection group belonging to that user.
      * Uses caching for O(1) access after initial lookup.
-     * @returns The selection group or null if none exists
+     * @returns The local user's selection group or null if none exists
      */
     get selectionGroup() {
         if (this._selectionGroupCacheValid) {
             return this._cachedSelectionGroup;
         }
         const selectionGroups = this._state.objects.filter(o => o instanceof KritzelSelectionGroup);
-        this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
+        if (this._localUserId) {
+            this._cachedSelectionGroup = selectionGroups.find(sg => sg.userId === this._localUserId) ?? null;
+        }
+        else {
+            this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
+        }
         this._selectionGroupCacheValid = true;
         return this._cachedSelectionGroup;
     }
@@ -168,6 +173,15 @@ export class KritzelStore {
         this._cachedSelectionGroup = group;
         this._selectionGroupCacheValid = true;
     }
+    /**
+     * Sets the local user ID for scoping selection group lookups.
+     * When set, the selectionGroup getter returns only the group owned by this user.
+     * @param userId - The local user's ID, or null for non-collaborative mode
+     */
+    setLocalUserId(userId) {
+        this._localUserId = userId;
+        this.invalidateSelectionCache();
+    }
     /**
      * Gets the currently active text object being edited.
      * @returns The text object in editing mode, or null if none

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

@@ -149,6 +149,7 @@ export class KritzelViewport {
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
+                this._core.store.state.objects?.clearCursorPosition();
                 const currentPath = this._core.store.currentPath;
                 if (currentPath) {
                     this._core.store.state.objects.remove(obj => obj.id === currentPath.id);
@@ -209,10 +210,15 @@ export class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
-            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
-            this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
             const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.isScaling || activePointers.length > 1) {
+                this._core.store.state.objects?.clearCursorPosition();
+            }
+            else {
+                this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+                this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
+                this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
+            }
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
                 const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;