kritzel-stencil 0.1.74 → 0.1.76

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-Dyt35LBC.js');
+var workspace_migrations = require('./workspace.migrations-DkmVO6dE.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');
@@ -360,6 +360,7 @@ const readVarUint = decoder => {
  * This is a lightweight alternative to y-webrtc for browser-tab-only sync
  */
 class BroadcastSyncProvider {
+    type = 'local';
     doc;
     channel;
     _synced = false;
@@ -441,6 +442,10 @@ class BroadcastSyncProvider {
     disconnect() {
         // BroadcastChannel doesn't have explicit disconnect
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         this.doc.off('update', this.handleDocUpdate);
         this.channel.close();
@@ -451,6 +456,7 @@ class BroadcastSyncProvider {
  * WebSocket sync provider for real-time collaboration
  */
 class WebSocketSyncProvider {
+    type = 'network';
     provider;
     isConnected = false;
     _quiet = false;
@@ -539,6 +545,10 @@ class WebSocketSyncProvider {
         }
         this.isConnected = false;
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         if (this.provider) {
             this.provider.destroy();
@@ -552,6 +562,7 @@ class WebSocketSyncProvider {
  * Supports multiplexing - multiple documents can share the same WebSocket connection
  */
 class HocuspocusSyncProvider {
+    type = 'network';
     provider;
     isConnected = false;
     isSynced = false;
@@ -559,16 +570,87 @@ class HocuspocusSyncProvider {
     isDestroyed = false;
     connectTimeout = null;
     pendingConnectReject = null;
+    connectionTimeoutMs;
+    _connectionStatus = 'disconnected';
+    visibilityHandler = null;
+    onlineHandler = null;
     get awareness() {
         return this.provider.awareness;
     }
+    get connectionStatus() {
+        return this._connectionStatus;
+    }
     // Static shared WebSocket instance for multiplexing
     static sharedWebSocketProvider = null;
     constructor(docName, doc, options) {
         const name = options?.name || docName;
         const url = options?.url || 'ws://localhost:1234';
+        this.connectionTimeoutMs = options?.connectionTimeout ?? 10000;
         // Use provided websocketProvider or the static shared one
         const websocketProvider = options?.websocketProvider || HocuspocusSyncProvider.sharedWebSocketProvider;
+        // Build reconnect config from options
+        const reconnectConfig = {};
+        if (options?.delay !== undefined)
+            reconnectConfig.delay = options.delay;
+        if (options?.factor !== undefined)
+            reconnectConfig.factor = options.factor;
+        if (options?.maxAttempts !== undefined)
+            reconnectConfig.maxAttempts = options.maxAttempts;
+        if (options?.minDelay !== undefined)
+            reconnectConfig.minDelay = options.minDelay;
+        if (options?.maxDelay !== undefined)
+            reconnectConfig.maxDelay = options.maxDelay;
+        const onConnect = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isConnected = true;
+            this._connectionStatus = 'connected';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus connected: ${name}`);
+            }
+            if (options?.onConnect) {
+                options.onConnect();
+            }
+        };
+        const onDisconnect = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isConnected = false;
+            this.isSynced = false;
+            this._connectionStatus = 'disconnected';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus disconnected: ${name}`);
+            }
+            if (options?.onDisconnect) {
+                options.onDisconnect();
+            }
+        };
+        const onSynced = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isSynced = true;
+            this._connectionStatus = 'synced';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus synced: ${name}`);
+            }
+            if (options?.onSynced) {
+                options.onSynced();
+            }
+        };
+        const onStatus = (data) => {
+            if (this.isDestroyed) {
+                return;
+            }
+            if (data.status === 'connecting') {
+                this._connectionStatus = 'connecting';
+            }
+            if (options?.onStatus) {
+                options.onStatus(data);
+            }
+        };
         if (websocketProvider) {
             // Multiplexing mode - use shared WebSocket connection
             this.usesSharedSocket = true;
@@ -577,48 +659,11 @@ class HocuspocusSyncProvider {
                 name,
                 document: doc,
                 token: options?.token || null,
-                onStatus: (data) => {
-                    if (options?.onStatus) {
-                        options.onStatus(data);
-                    }
-                },
-                onConnect: () => {
-                    if (this.isConnected || this.isDestroyed) {
-                        return;
-                    }
-                    this.isConnected = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus connected: ${name}`);
-                    }
-                    if (options?.onConnect) {
-                        options.onConnect();
-                    }
-                },
-                onDisconnect: () => {
-                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
-                        return;
-                    }
-                    this.isConnected = false;
-                    this.isSynced = false;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus disconnected: ${name}`);
-                    }
-                    if (options?.onDisconnect) {
-                        options.onDisconnect();
-                    }
-                },
-                onSynced: () => {
-                    if (this.isSynced || this.isDestroyed) {
-                        return;
-                    }
-                    this.isSynced = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus synced: ${name}`);
-                    }
-                    if (options?.onSynced) {
-                        options.onSynced();
-                    }
-                },
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
             };
             // Add optional settings
             if (options?.forceSyncInterval !== undefined) {
@@ -643,48 +688,11 @@ class HocuspocusSyncProvider {
                 document: doc,
                 token: options?.token || null,
                 autoConnect: false,
-                onStatus: (data) => {
-                    if (options?.onStatus) {
-                        options.onStatus(data);
-                    }
-                },
-                onConnect: () => {
-                    if (this.isConnected || this.isDestroyed) {
-                        return;
-                    }
-                    this.isConnected = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus connected: ${name}`);
-                    }
-                    if (options?.onConnect) {
-                        options.onConnect();
-                    }
-                },
-                onDisconnect: () => {
-                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
-                        return;
-                    }
-                    this.isConnected = false;
-                    this.isSynced = false;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus disconnected: ${name}`);
-                    }
-                    if (options?.onDisconnect) {
-                        options.onDisconnect();
-                    }
-                },
-                onSynced: () => {
-                    if (this.isSynced || this.isDestroyed) {
-                        return;
-                    }
-                    this.isSynced = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus synced: ${name}`);
-                    }
-                    if (options?.onSynced) {
-                        options.onSynced();
-                    }
-                },
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
             };
             // Add optional settings
             if (options?.forceSyncInterval !== undefined) {
@@ -701,6 +709,35 @@ class HocuspocusSyncProvider {
                 console.info(`Hocuspocus Provider initialized: ${url}/${name}`);
             }
         }
+        this.setupBrowserEventListeners();
+    }
+    setupBrowserEventListeners() {
+        if (typeof document !== 'undefined') {
+            this.visibilityHandler = () => {
+                if (document.visibilityState === 'visible' && !this.isConnected && !this.isDestroyed) {
+                    this.provider.connect();
+                }
+            };
+            document.addEventListener('visibilitychange', this.visibilityHandler);
+        }
+        if (typeof window !== 'undefined') {
+            this.onlineHandler = () => {
+                if (!this.isConnected && !this.isDestroyed) {
+                    this.provider.connect();
+                }
+            };
+            window.addEventListener('online', this.onlineHandler);
+        }
+    }
+    removeBrowserEventListeners() {
+        if (this.visibilityHandler && typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this.visibilityHandler);
+            this.visibilityHandler = null;
+        }
+        if (this.onlineHandler && typeof window !== 'undefined') {
+            window.removeEventListener('online', this.onlineHandler);
+            this.onlineHandler = null;
+        }
     }
     /**
      * Create a shared WebSocket connection for multiplexing
@@ -763,6 +800,7 @@ class HocuspocusSyncProvider {
         if (this.isSynced || this.isDestroyed) {
             return;
         }
+        this._connectionStatus = 'connecting';
         return new Promise((resolve, reject) => {
             // Store reject function so we can cancel the connection if destroyed
             this.pendingConnectReject = reject;
@@ -770,7 +808,7 @@ class HocuspocusSyncProvider {
                 this.pendingConnectReject = null;
                 this.connectTimeout = null;
                 reject(new Error('Hocuspocus connection timeout'));
-            }, 10000); // 10 second timeout
+            }, this.connectionTimeoutMs);
             const syncHandler = () => {
                 if (this.connectTimeout) {
                     clearTimeout(this.connectTimeout);
@@ -800,6 +838,10 @@ class HocuspocusSyncProvider {
             }
         });
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     disconnect() {
         // Cancel any pending connection attempt
         if (this.connectTimeout) {
@@ -820,6 +862,7 @@ class HocuspocusSyncProvider {
         }
         this.isConnected = false;
         this.isSynced = false;
+        this._connectionStatus = 'disconnected';
     }
     destroy() {
         // Mark as destroyed first to prevent any callbacks from doing work
@@ -832,11 +875,13 @@ class HocuspocusSyncProvider {
         if (this.pendingConnectReject) {
             this.pendingConnectReject = null; // Don't reject, just abandon the promise
         }
+        this.removeBrowserEventListeners();
         if (this.provider) {
             this.provider.destroy();
         }
         this.isConnected = false;
         this.isSynced = false;
+        this._connectionStatus = 'disconnected';
     }
 }
 

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Dc7LOVhs.js');
-var workspace_migrations = require('./workspace.migrations-Dyt35LBC.js');
+var workspace_migrations = require('./workspace.migrations-DkmVO6dE.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -176,7 +176,7 @@ const KritzelAvatar = class {
 };
 KritzelAvatar.style = kritzelAvatarCss();
 
-const kritzelAwarenessCursorsCss = () => `: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}`;
+const kritzelAwarenessCursorsCss = () => `: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}.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}.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}`;
 
 const STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -227,6 +227,10 @@ const KritzelAwarenessCursors = class {
             const cursor = state.cursor;
             const activeObjectId = state.activeObjectId || null;
             const selectionBox = state.selectionBox || null;
+            const existing = updated.get(clientId);
+            const cursorMoved = !existing ||
+                !existing.cursor !== !cursor ||
+                (cursor && existing.cursor && (cursor.x !== existing.cursor.x || cursor.y !== existing.cursor.y));
             updated.set(clientId, {
                 clientId,
                 user,
@@ -234,6 +238,7 @@ const KritzelAwarenessCursors = class {
                 activeObjectId,
                 selectionBox,
                 lastUpdated: now,
+                lastCursorMove: cursorMoved ? now : (existing?.lastCursorMove ?? now),
             });
         });
         // Remove cursors for disconnected clients
@@ -259,7 +264,7 @@ const KritzelAwarenessCursors = class {
         }
     }
     isStale(cursor) {
-        return Date.now() - cursor.lastUpdated > STALE_THRESHOLD_MS;
+        return Date.now() - cursor.lastCursorMove > STALE_THRESHOLD_MS;
     }
     hasActiveDrawingCursors() {
         for (const cursor of this.remoteCursors.values()) {
@@ -348,7 +353,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: 'b8676d9a7a3d4a79ea8ad9763355ecf4c2f90e17' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '4dd962322c7e955b9038c55cb10f8ffda1e0b246' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -19840,6 +19845,14 @@ class KritzelViewport {
     startX = 0;
     /** Starting Y position for pan/zoom gestures */
     startY = 0;
+    /** Minimum movement distance (in screen pixels) before broadcasting touch cursor position */
+    static TOUCH_CURSOR_BROADCAST_THRESHOLD = 5;
+    /** Screen X position where the current touch interaction started */
+    _touchStartScreenX = 0;
+    /** Screen Y position where the current touch interaction started */
+    _touchStartScreenY = 0;
+    /** Whether the touch movement threshold has been exceeded for cursor broadcasting */
+    _touchCursorBroadcastActive = false;
     /**
      * Creates a new KritzelViewport instance and initializes viewport state.
      * Sets up debounced handlers for viewport updates and scaling end events.
@@ -19967,7 +19980,13 @@ class KritzelViewport {
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                this._touchStartScreenX = event.clientX;
+                this._touchStartScreenY = event.clientY;
+                this._touchCursorBroadcastActive = false;
+            }
             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);
@@ -20028,10 +20047,24 @@ 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;
+                if (!this._touchCursorBroadcastActive) {
+                    const dx = event.clientX - this._touchStartScreenX;
+                    const dy = event.clientY - this._touchStartScreenY;
+                    if (Math.sqrt(dx * dx + dy * dy) >= KritzelViewport.TOUCH_CURSOR_BROADCAST_THRESHOLD) {
+                        this._touchCursorBroadcastActive = true;
+                    }
+                }
+                if (this._touchCursorBroadcastActive) {
+                    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;
@@ -20083,6 +20116,7 @@ class KritzelViewport {
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            this._touchCursorBroadcastActive = false;
             if (this._core.store.state.pointers.size === 0) {
                 this._debounceEndScaling();
             }
@@ -21362,6 +21396,42 @@ class KritzelObjectMap {
         }
         this._awareness.setLocalStateField('selectionBox', null);
     }
+    /**
+     * Removes selection groups whose owner is no longer present in awareness.
+     * Called when remote clients disconnect to prevent orphaned selection groups
+     * from persisting in the workspace state.
+     */
+    removeOrphanedSelectionGroups() {
+        if (!this._awareness) {
+            return;
+        }
+        const states = this._awareness.getStates();
+        const activeUserIds = new Set();
+        states.forEach(state => {
+            const userId = state.user?.id;
+            if (userId) {
+                activeUserIds.add(userId);
+            }
+        });
+        const localUserId = this._core?.user?.id;
+        const orphanedGroups = this.quadtree.filter(o => o instanceof workspace_migrations.KritzelSelectionGroup
+            && o.userId != null
+            && o.userId !== localUserId
+            && !activeUserIds.has(o.userId));
+        for (const group of orphanedGroups) {
+            this.quadtree.remove(o => o.id === group.id);
+            this._idMap.delete(group.id);
+            if (this._objectsMap) {
+                this._ydoc.transact(() => {
+                    this._objectsMap.delete(group.id);
+                }, 'local');
+            }
+        }
+        if (orphanedGroups.length > 0) {
+            this._core?.store.invalidateSelectionCache();
+            this._core?.rerender();
+        }
+    }
     /**
      * Registers a callback to be invoked when the awareness state changes.
      * The callback receives the full awareness states map.
@@ -21495,16 +21565,28 @@ class KritzelObjectMap {
             this.handleObjectsChange(event);
         };
         this._objectsMap.observe(this._objectsObserver);
-        // Connect all providers in parallel (settle individually so one failure doesn't block the rest)
-        const results = await Promise.allSettled(this._providers.map(p => p.connect()));
-        results.forEach((result, i) => {
+        // Separate local providers (IndexedDB, BroadcastChannel) from network providers (Hocuspocus, WebSocket)
+        // Local providers are awaited so data is available immediately; network providers sync in the background
+        // via Yjs observers that are already registered above.
+        const localProviders = this._providers.filter(p => p.type === 'local');
+        const networkProviders = this._providers.filter(p => p.type === 'network');
+        // Await local providers for immediate data availability
+        const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        localResults.forEach((result, i) => {
             if (result.status === 'rejected') {
-                console.error(`[Kritzel] Sync provider "${this._providers[i]?.constructor.name}" failed to connect:`, result.reason);
+                console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
+        // Connect network providers in the background (remote data arrives via Yjs observers)
+        for (const provider of networkProviders) {
+            provider.connect().catch(err => {
+                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+            });
+        }
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
-        for (const provider of this._providers) {
+        // Awareness is available immediately after provider construction, before connect() resolves
+        for (const provider of networkProviders) {
             if (provider.awareness) {
                 this._awareness = provider.awareness;
                 break;
@@ -21512,7 +21594,11 @@ class KritzelObjectMap {
         }
         // Subscribe to awareness changes
         if (this._awareness) {
-            this._awarenessChangeHandler = () => {
+            this._awarenessChangeHandler = (change) => {
+                // Clean up selection groups belonging to disconnected users
+                if (change.removed.length > 0) {
+                    this.removeOrphanedSelectionGroups();
+                }
                 const now = Date.now();
                 const timeSinceLastEmit = now - this._lastAwarenessEmitTime;
                 // Clear any pending timeout since we have a new event
@@ -21775,11 +21861,27 @@ class KritzelObjectMap {
         }
         this.quadtree.reset();
         this._idMap.clear();
-        this._objectsMap.forEach(serialized => {
+        const localUserId = this._core?.user?.id;
+        const staleSelectionGroupIds = [];
+        this._objectsMap.forEach((serialized, key) => {
             const object = this._reviver.revive(serialized);
+            // Remove remote selection groups on startup — they are transient UI state
+            // that should not survive an app restart. The owning user's session is gone.
+            if (object instanceof workspace_migrations.KritzelSelectionGroup && object.userId != null && object.userId !== localUserId) {
+                staleSelectionGroupIds.push(key);
+                return;
+            }
             this.quadtree.insert(object);
             this._idMap.set(object.id, object);
         });
+        // Clean up stale remote selection groups from Yjs
+        if (staleSelectionGroupIds.length > 0) {
+            this._ydoc.transact(() => {
+                for (const id of staleSelectionGroupIds) {
+                    this._objectsMap.delete(id);
+                }
+            }, 'local');
+        }
     }
     /**
      * Resets the object map by clearing both the local quadtree and the Yjs objects map.
@@ -22451,13 +22553,24 @@ class KritzelAppStateMap {
             this.handleWorkspacesChange(event);
         };
         this._workspacesMap.observe(this._workspacesObserver);
-        // Connect all providers in parallel (settle individually so one failure doesn't block the rest)
-        const results = await Promise.allSettled(this._providers.map(p => p.connect()));
-        results.forEach((result, i) => {
+        // Separate local providers (IndexedDB, BroadcastChannel) from network providers (Hocuspocus, WebSocket)
+        // Local providers are awaited so data is available immediately; network providers sync in the background
+        // via Yjs observers that are already registered above.
+        const localProviders = this._providers.filter(p => p.type === 'local');
+        const networkProviders = this._providers.filter(p => p.type === 'network');
+        // Await local providers for immediate data availability
+        const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        localResults.forEach((result, i) => {
             if (result.status === 'rejected') {
-                console.error(`[Kritzel] Sync provider "${this._providers[i]?.constructor.name}" failed to connect:`, result.reason);
+                console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
+        // Connect network providers in the background (remote data arrives via Yjs observers)
+        for (const provider of networkProviders) {
+            provider.connect().catch(err => {
+                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+            });
+        }
         this._isReady = true;
         // Run any pending schema migrations before loading data
         const quietMigrations = !core.store.state.debugInfo.showMigrationInfo;
@@ -28408,7 +28521,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.74';
+const KRITZEL_VERSION = '0.1.76';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;