kritzel-stencil 0.1.74 → 0.1.75

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');
@@ -19968,6 +19968,7 @@ 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);
@@ -20028,10 +20029,15 @@ 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;
@@ -21495,16 +21501,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;
@@ -22451,13 +22469,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 +28437,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.75';
 
 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)}`;