kritzel-stencil 0.1.72 → 0.1.74

package/dist/collection/classes/objects/base-object.class.js

@@ -28,6 +28,7 @@ export class KritzelBaseObject {
     rotation = 0;
     markedForRemoval = false;
     zIndex = 0;
+    userId;
     /** Whether the object is currently visible on the canvas */
     isVisible = true;
     isSelected = false;
@@ -208,6 +209,7 @@ export class KritzelBaseObject {
         object._core = core;
         object.zIndex = core.store.currentZIndex;
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**

package/dist/collection/classes/objects/custom-element.class.js

@@ -49,6 +49,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**

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

@@ -70,6 +70,7 @@ export 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;

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

@@ -40,6 +40,7 @@ export 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;

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

@@ -80,6 +80,7 @@ export 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;

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

@@ -62,6 +62,7 @@ export 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;

package/dist/collection/classes/objects/selection-box.class.js

@@ -19,6 +19,7 @@ export 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)' };

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

@@ -24,6 +24,10 @@ export 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
@@ -78,6 +82,7 @@ export 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
      */
@@ -86,8 +91,15 @@ export 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;
     }
     /**
@@ -253,7 +265,7 @@ export 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;

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

@@ -100,6 +100,7 @@ export 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;

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

@@ -116,6 +116,7 @@ export 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;

package/dist/collection/classes/providers/hocuspocus-sync-provider.class.js

@@ -8,6 +8,9 @@ export class HocuspocusSyncProvider {
     isConnected = false;
     isSynced = false;
     usesSharedSocket = false;
+    isDestroyed = false;
+    connectTimeout = null;
+    pendingConnectReject = null;
     get awareness() {
         return this.provider.awareness;
     }
@@ -26,8 +29,13 @@ export class HocuspocusSyncProvider {
                 name,
                 document: doc,
                 token: options?.token || null,
+                onStatus: (data) => {
+                    if (options?.onStatus) {
+                        options.onStatus(data);
+                    }
+                },
                 onConnect: () => {
-                    if (this.isConnected) {
+                    if (this.isConnected || this.isDestroyed) {
                         return;
                     }
                     this.isConnected = true;
@@ -39,7 +47,7 @@ export class HocuspocusSyncProvider {
                     }
                 },
                 onDisconnect: () => {
-                    if (!this.isConnected && !this.isSynced) {
+                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
                         return;
                     }
                     this.isConnected = false;
@@ -52,7 +60,7 @@ export class HocuspocusSyncProvider {
                     }
                 },
                 onSynced: () => {
-                    if (this.isSynced) {
+                    if (this.isSynced || this.isDestroyed) {
                         return;
                     }
                     this.isSynced = true;
@@ -71,9 +79,6 @@ export class HocuspocusSyncProvider {
             if (options?.onAuthenticationFailed) {
                 config.onAuthenticationFailed = options.onAuthenticationFailed;
             }
-            if (options?.onStatus) {
-                config.onStatus = options.onStatus;
-            }
             this.provider = new HocuspocusProvider(config);
             // Must call attach() explicitly when using shared socket
             this.provider.attach();
@@ -89,8 +94,14 @@ export class HocuspocusSyncProvider {
                 name,
                 document: doc,
                 token: options?.token || null,
+                autoConnect: false,
+                onStatus: (data) => {
+                    if (options?.onStatus) {
+                        options.onStatus(data);
+                    }
+                },
                 onConnect: () => {
-                    if (this.isConnected) {
+                    if (this.isConnected || this.isDestroyed) {
                         return;
                     }
                     this.isConnected = true;
@@ -102,7 +113,7 @@ export class HocuspocusSyncProvider {
                     }
                 },
                 onDisconnect: () => {
-                    if (!this.isConnected && !this.isSynced) {
+                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
                         return;
                     }
                     this.isConnected = false;
@@ -115,7 +126,7 @@ export class HocuspocusSyncProvider {
                     }
                 },
                 onSynced: () => {
-                    if (this.isSynced) {
+                    if (this.isSynced || this.isDestroyed) {
                         return;
                     }
                     this.isSynced = true;
@@ -134,9 +145,6 @@ export class HocuspocusSyncProvider {
             if (options?.onAuthenticationFailed) {
                 config.onAuthenticationFailed = options.onAuthenticationFailed;
             }
-            if (options?.onStatus) {
-                config.onStatus = options.onStatus;
-            }
             if (options?.WebSocketPolyfill) {
                 config.WebSocketPolyfill = options.WebSocketPolyfill;
             }
@@ -204,22 +212,36 @@ export class HocuspocusSyncProvider {
         };
     }
     async connect() {
-        if (this.isSynced) {
+        if (this.isSynced || this.isDestroyed) {
             return;
         }
         return new Promise((resolve, reject) => {
-            const timeout = setTimeout(() => {
+            // Store reject function so we can cancel the connection if destroyed
+            this.pendingConnectReject = reject;
+            this.connectTimeout = setTimeout(() => {
+                this.pendingConnectReject = null;
+                this.connectTimeout = null;
                 reject(new Error('Hocuspocus connection timeout'));
             }, 10000); // 10 second timeout
             const syncHandler = () => {
-                clearTimeout(timeout);
+                if (this.connectTimeout) {
+                    clearTimeout(this.connectTimeout);
+                    this.connectTimeout = null;
+                }
+                this.pendingConnectReject = null;
                 this.provider.off('synced', syncHandler);
-                resolve();
+                if (!this.isDestroyed) {
+                    resolve();
+                }
             };
             this.provider.on('synced', syncHandler);
             // If already synced, resolve immediately
             if (this.provider.isSynced) {
-                clearTimeout(timeout);
+                if (this.connectTimeout) {
+                    clearTimeout(this.connectTimeout);
+                    this.connectTimeout = null;
+                }
+                this.pendingConnectReject = null;
                 this.provider.off('synced', syncHandler);
                 resolve();
                 return;
@@ -231,6 +253,14 @@ export class HocuspocusSyncProvider {
         });
     }
     disconnect() {
+        // Cancel any pending connection attempt
+        if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+        }
+        if (this.pendingConnectReject) {
+            this.pendingConnectReject = null; // Don't reject, just abandon the promise
+        }
         if (this.provider) {
             if (this.usesSharedSocket) {
                 // Detach from shared socket instead of disconnecting
@@ -244,6 +274,16 @@ export class HocuspocusSyncProvider {
         this.isSynced = false;
     }
     destroy() {
+        // Mark as destroyed first to prevent any callbacks from doing work
+        this.isDestroyed = true;
+        // Cancel any pending connection attempt
+        if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+        }
+        if (this.pendingConnectReject) {
+            this.pendingConnectReject = null; // Don't reject, just abandon the promise
+        }
         if (this.provider) {
             this.provider.destroy();
         }

package/dist/collection/classes/structures/object-map.structure.js

@@ -34,6 +34,10 @@ export class KritzelObjectMap {
     _stackItemPoppedHandler = null;
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
+    _objectsChangeCallbacks = [];
+    _lastAwarenessEmitTime = 0;
+    _awarenessEmitTimeout = null;
+    AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
     /**
      * Indicates whether the object map has been initialized and is ready for use.
      * @returns `true` if providers are connected and the map is operational
@@ -47,6 +51,19 @@ export class KritzelObjectMap {
     get awareness() {
         return this._awareness;
     }
+    /**
+     * Whether a network awareness instance is available.
+     */
+    get hasAwareness() {
+        return !!this._awareness;
+    }
+    /**
+     * Returns the local client ID from the awareness instance.
+     * Used to filter out the local user when rendering remote cursors.
+     */
+    get localClientId() {
+        return this._awareness?.clientID ?? null;
+    }
     /**
      * Sets the local user identity in the awareness state.
      * This broadcasts the user's identity to all connected peers.
@@ -55,12 +72,21 @@ export class KritzelObjectMap {
         if (!this._awareness || !user) {
             return;
         }
+        const displayName = user.displayName || user.firstName || 'Anonymous';
         this._awareness.setLocalStateField('user', {
             id: user.id,
-            name: user.displayName || user.firstName || 'Anonymous',
-            color: user.color,
+            displayName,
+            color: user.color || this.generateColorFromName(displayName),
         });
     }
+    generateColorFromName(name) {
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 45%, 55%)`;
+    }
     /**
      * Updates the local cursor position in the awareness state.
      * This broadcasts the cursor position to all connected peers.
@@ -80,6 +106,37 @@ export class KritzelObjectMap {
         }
         this._awareness.setLocalStateField('cursor', null);
     }
+    /**
+     * Sets the ID of the object currently being drawn by the local user.
+     * Remote clients use this to derive cursor position from the object's latest
+     * coordinates instead of the throttled awareness cursor, reducing desync.
+     * Pass `null` when drawing ends.
+     */
+    setActiveDrawingObject(objectId) {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('activeObjectId', objectId);
+    }
+    /**
+     * Broadcasts the local user's selection box bounds via awareness.
+     * Remote clients use this to render the selection rectangle in the user's color.
+     */
+    setLocalSelectionBox(box) {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('selectionBox', box);
+    }
+    /**
+     * Clears the local selection box from awareness (e.g., when selection completes or is cancelled).
+     */
+    clearLocalSelectionBox() {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('selectionBox', null);
+    }
     /**
      * Registers a callback to be invoked when the awareness state changes.
      * The callback receives the full awareness states map.
@@ -87,6 +144,14 @@ export class KritzelObjectMap {
     onAwarenessChange(callback) {
         this._awarenessChangeCallbacks.push(callback);
     }
+    /**
+     * Registers a callback to be invoked when remote object changes are received.
+     * Used by the awareness cursors component to re-derive cursor positions
+     * from the latest object data when a remote user is actively drawing.
+     */
+    onObjectsChange(callback) {
+        this._objectsChangeCallbacks.push(callback);
+    }
     /**
      * Returns the Yjs UndoManager instance for managing undo/redo operations.
      * @returns The UndoManager instance, or `null` if not initialized
@@ -223,9 +288,32 @@ export class KritzelObjectMap {
         // Subscribe to awareness changes
         if (this._awareness) {
             this._awarenessChangeHandler = () => {
-                const states = this._awareness.getStates();
-                for (const callback of this._awarenessChangeCallbacks) {
-                    callback(states);
+                const now = Date.now();
+                const timeSinceLastEmit = now - this._lastAwarenessEmitTime;
+                // Clear any pending timeout since we have a new event
+                if (this._awarenessEmitTimeout !== null) {
+                    clearTimeout(this._awarenessEmitTimeout);
+                    this._awarenessEmitTimeout = null;
+                }
+                if (timeSinceLastEmit >= this.AWARENESS_THROTTLE_INTERVAL) {
+                    // Enough time has passed, emit immediately
+                    this._lastAwarenessEmitTime = now;
+                    const states = this._awareness.getStates();
+                    for (const callback of this._awarenessChangeCallbacks) {
+                        callback(states);
+                    }
+                }
+                else {
+                    // Schedule emission for the remaining time
+                    const delayMs = this.AWARENESS_THROTTLE_INTERVAL - timeSinceLastEmit;
+                    this._awarenessEmitTimeout = setTimeout(() => {
+                        this._lastAwarenessEmitTime = Date.now();
+                        this._awarenessEmitTimeout = null;
+                        const states = this._awareness.getStates();
+                        for (const callback of this._awarenessChangeCallbacks) {
+                            callback(states);
+                        }
+                    }, delayMs);
                 }
             };
             this._awareness.on('change', this._awarenessChangeHandler);
@@ -362,6 +450,10 @@ export class KritzelObjectMap {
         if (updatedObjects.length > 0) {
             this._core?.engine.emitObjectsUpdated(updatedObjects.map(obj => ({ object: obj, changedProperties: [] })));
         }
+        // Notify subscribers of remote object changes (e.g., awareness cursors)
+        for (const callback of this._objectsChangeCallbacks) {
+            callback();
+        }
     }
     /**
      * Initializes document metadata if not already set.
@@ -752,11 +844,14 @@ export class KritzelObjectMap {
             this._awareness.off('change', this._awarenessChangeHandler);
             this._awarenessChangeHandler = null;
         }
+        if (this._awarenessEmitTimeout !== null) {
+            clearTimeout(this._awarenessEmitTimeout);
+            this._awarenessEmitTimeout = null;
+        }
         this._awareness = null;
         this._awarenessChangeCallbacks = [];
-        // Disconnect and destroy providers
+        // Destroy providers (destroy handles disconnection internally)
         this._providers.forEach(p => {
-            p.disconnect();
             p.destroy();
         });
         this._providers = [];

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

@@ -55,6 +55,7 @@ export 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') {
@@ -78,6 +79,7 @@ export 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);
             }
         }
     }
@@ -168,6 +170,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentPath]);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentPathId = null;
                 }
             }
@@ -183,6 +186,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentPath]);
                     }
+                    this._core.store.state.objects?.setActiveDrawingObject(null);
                     this._currentPathId = null;
                 }
             }

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

@@ -70,6 +70,7 @@ export 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') {
@@ -99,6 +100,7 @@ export 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);
             }
         }
     }
@@ -197,6 +199,7 @@ export 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;
                 }
             }
@@ -214,6 +217,7 @@ export 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;
                 }
             }

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

@@ -179,6 +179,7 @@ export 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();
     }
     /**
@@ -239,6 +240,7 @@ export 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();
     }

package/dist/collection/collection-manifest.json

@@ -1,13 +1,14 @@
 {
   "entries": [
-    "components/shared/kritzel-dropdown/kritzel-dropdown.js",
-    "components/shared/kritzel-brush-style/kritzel-brush-style.js",
     "components/core/kritzel-engine/kritzel-engine.js",
     "components/ui/kritzel-context-menu/kritzel-context-menu.js",
+    "components/shared/kritzel-dropdown/kritzel-dropdown.js",
+    "components/shared/kritzel-brush-style/kritzel-brush-style.js",
     "components/shared/kritzel-font-family/kritzel-font-family.js",
     "components/shared/kritzel-line-endings/kritzel-line-endings.js",
     "components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js",
     "components/shared/kritzel-shape-fill/kritzel-shape-fill.js",
+    "components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js",
     "components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
     "components/core/kritzel-editor/kritzel-editor.js",
     "components/shared/kritzel-avatar/kritzel-avatar.js",

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9500;
+}
+
+.awareness-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+}
+
+.awareness-cursor.stale {
+  opacity: 0.3;
+}
+
+.awareness-cursor.tracking-object {
+  transition-duration: 0ms;
+}
+
+.cursor-arrow {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+.cursor-label {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+.edge-indicator {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+  pointer-events: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.edge-indicator.stale {
+  opacity: 0.3;
+}
+
+.edge-indicator.tracking-object {
+  transition-duration: 0ms;
+}
+
+.edge-arrow {
+  position: absolute;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+}
+
+.edge-label {
+  position: absolute;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 150ms ease;
+}
+
+.edge-indicator:hover .edge-label {
+  opacity: 1;
+}
+
+.remote-selection-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 2px;
+  border-style: solid;
+  pointer-events: none;
+  will-change: transform, width, height;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
+}