kritzel-stencil 0.4.21 → 0.4.22

package/dist/components/{p-C_f_QElb.js → p-BNeE3SiZ.js}

@@ -43319,6 +43319,10 @@ class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
+    _remoteChangesCallbacks = [];
+    _docUpdateHandler = null;
+    _remoteOrigins = new Set();
+    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -43342,12 +43346,44 @@ class KritzelObjectMap {
         return this._isReady;
     }
     /**
-     * Promise that settles when network providers finish connecting.
-     * Resolves immediately if no network providers. Awaited by the loading overlay.
+     * Promise that settles when network providers finish connecting and complete
+     * their Yjs sync handshake. Resolves immediately if no network providers.
      */
     whenNetworkSynced() {
         return this._networkSyncPromise ?? Promise.resolve();
     }
+    /**
+     * Whether any configured provider synchronizes over the network.
+     */
+    get hasNetworkSyncProvider() {
+        return this._providers.some(provider => provider.type === 'network');
+    }
+    /**
+     * Whether remote-originated changes can be told apart from local writes.
+     * Requires every network provider to expose its Yjs update origin.
+     */
+    get supportsRemoteChangeDetection() {
+        const networkProviders = this._providers.filter(provider => provider.type === 'network');
+        return networkProviders.length > 0 && networkProviders.every(provider => provider.updateOrigin !== undefined);
+    }
+    /**
+     * Whether at least one update originating from a network provider has been
+     * applied to this document. Stays `false` when the remote held no data the
+     * local document was missing, because Yjs suppresses empty updates.
+     */
+    get hasAppliedRemoteChanges() {
+        return this._appliedRemoteChanges;
+    }
+    /**
+     * Registers a callback invoked whenever a network provider applies changes to this document.
+     * @returns A function that unregisters the callback.
+     */
+    onRemoteChangesApplied(callback) {
+        this._remoteChangesCallbacks.push(callback);
+        return () => {
+            this._remoteChangesCallbacks = this._remoteChangesCallbacks.filter(registered => registered !== callback);
+        };
+    }
     /**
      * Returns the Yjs Awareness instance, if a network provider is available.
      */
@@ -43590,6 +43626,22 @@ class KritzelObjectMap {
             const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
             console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
         }
+        // Registered before any provider connects so no remote update can be missed.
+        for (const provider of this._providers) {
+            if (provider.type === 'network' && provider.updateOrigin !== undefined) {
+                this._remoteOrigins.add(provider.updateOrigin);
+            }
+        }
+        this._docUpdateHandler = (_update, origin) => {
+            if (!this._remoteOrigins.has(origin)) {
+                return;
+            }
+            this._appliedRemoteChanges = true;
+            for (const callback of [...this._remoteChangesCallbacks]) {
+                callback();
+            }
+        };
+        this._ydoc.on('update', this._docUpdateHandler);
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -43643,12 +43695,15 @@ class KritzelObjectMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider
+            .connect()
+            .then(() => provider.whenSynced?.())
+            .catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
         }));
-        // Network sync awaited by loading overlay to show remote workspace hydration
+        // Settles once remote data has been reconciled, not merely once the transport connected
         this._networkSyncPromise = networkConnectPromises.length > 0 ? Promise.allSettled(networkConnectPromises).then(() => undefined) : null;
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
@@ -44306,6 +44361,13 @@ class KritzelObjectMap {
             this._objectsMap.unobserve(this._objectsObserver);
             this._objectsObserver = null;
         }
+        if (this._ydoc && this._docUpdateHandler) {
+            this._ydoc.off('update', this._docUpdateHandler);
+        }
+        this._docUpdateHandler = null;
+        this._remoteOrigins.clear();
+        this._remoteChangesCallbacks = [];
+        this._appliedRemoteChanges = false;
         // Remove undo manager event listeners
         if (this._undoManager) {
             if (this._stackItemAddedHandler) {
@@ -44801,7 +44863,10 @@ class KritzelAppStateMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] App-state network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider
+            .connect()
+            .then(() => provider.whenSynced?.())
+            .catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
@@ -48905,7 +48970,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     contextMenuStateChange;
     /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
     loadingChange;
-    /** Emitted when remote workspace synchronization is in progress. */
+    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
     syncingChange;
     forceUpdate = 0;
     isSyncing = false;
@@ -50492,6 +50557,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
+    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -50509,9 +50575,16 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.loadingChange.emit(this.core.store.state.isLoading);
     }
     syncSyncingState(isSyncing) {
+        if (this.isSyncing === isSyncing) {
+            return;
+        }
         this.isSyncing = isSyncing;
         this.syncingChange.emit(isSyncing);
     }
+    clearRemoteChangesSubscription() {
+        this._remoteChangesUnsubscribe?.();
+        this._remoteChangesUnsubscribe = null;
+    }
     isNetworkAvailable() {
         return typeof navigator !== 'undefined' && navigator.onLine;
     }
@@ -50627,6 +50700,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
+        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -50881,21 +50955,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            // Track remote sync in the background without blocking the loading overlay.
-            const initializedObjects = this.core.store.objects;
-            const networkSyncPromise = initializedObjects?.whenNetworkSynced();
-            if (networkSyncPromise && this.isNetworkAvailable()) {
-                this.syncSyncingState(true);
-                void networkSyncPromise.finally(() => {
-                    // Only clear syncing for the currently active object map.
-                    if (this.core.store.objects === initializedObjects) {
-                        this.syncSyncingState(false);
-                    }
-                });
-            }
-            else {
-                this.syncSyncingState(false);
-            }
+            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -50907,6 +50967,38 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             }
         }
     }
+    /**
+     * Reports syncing only while remote data is actually being reconciled into the
+     * active workspace. Yjs suppresses updates that carry nothing new, so a workspace
+     * that already matches the remote never reports syncing at all.
+     */
+    trackRemoteSynchronization() {
+        this.clearRemoteChangesSubscription();
+        this.syncSyncingState(false);
+        const initializedObjects = this.core.store.objects;
+        if (!initializedObjects?.hasNetworkSyncProvider || !this.isNetworkAvailable()) {
+            return;
+        }
+        if (initializedObjects.supportsRemoteChangeDetection) {
+            this._remoteChangesUnsubscribe = initializedObjects.onRemoteChangesApplied(() => {
+                if (this.core.store.objects !== initializedObjects) {
+                    return;
+                }
+                this.syncSyncingState(true);
+            });
+        }
+        else {
+            // Custom providers without an update origin cannot be diffed, so fall back to reporting the whole handshake.
+            this.syncSyncingState(true);
+        }
+        void initializedObjects.whenNetworkSynced().finally(() => {
+            if (this.core.store.objects !== initializedObjects) {
+                return;
+            }
+            this.clearRemoteChangesSubscription();
+            this.syncSyncingState(false);
+        });
+    }
     emitObjectsChange() {
         const objectsMap = this.core.store.objects;
         if (!objectsMap) {

package/dist/components/{p-BdCrcQ0_.js → p-Dx5NfJ0U.js}

@@ -12,7 +12,7 @@ import { d as defineCustomElement$1 } from './p-BozrueXV.js';
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.21';
+const KRITZEL_VERSION = '0.4.22';
 
 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-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.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)}`;
 

package/dist/esm/index.js

@@ -549,9 +549,15 @@ class WebSocketSyncProvider {
     provider;
     isConnected = false;
     _quiet = false;
+    _isSynced = false;
+    _syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
+    /** y-websocket applies remote updates with the underlying provider as the Yjs transaction origin. */
+    get updateOrigin() {
+        return this.provider;
+    }
     constructor(docName, doc, options) {
         const url = options?.url || 'ws://localhost:1234';
         const roomName = options?.roomName || docName;
@@ -598,11 +604,29 @@ class WebSocketSyncProvider {
             }
         });
         this.provider.on('sync', (synced) => {
-            if (synced && !this._quiet) {
+            if (!synced) {
+                return;
+            }
+            this._isSynced = true;
+            this.releaseSyncedWaiters();
+            if (!this._quiet) {
                 console.info('WebSocket synced');
             }
         });
     }
+    releaseSyncedWaiters() {
+        const resolvers = this._syncedResolvers;
+        this._syncedResolvers = [];
+        resolvers.forEach(resolve => resolve());
+    }
+    async whenSynced() {
+        if (this._isSynced || this.provider.synced) {
+            return;
+        }
+        return new Promise(resolve => {
+            this._syncedResolvers.push(resolve);
+        });
+    }
     async connect() {
         if (this.isConnected) {
             return;
@@ -634,6 +658,8 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -644,6 +670,8 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
 }
 
@@ -665,9 +693,14 @@ class HocuspocusSyncProvider {
     _connectionStatus = 'disconnected';
     visibilityHandler = null;
     onlineHandler = null;
+    syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
+    /** HocuspocusProvider applies remote updates with itself as the Yjs transaction origin. */
+    get updateOrigin() {
+        return this.provider;
+    }
     get connectionStatus() {
         return this._connectionStatus;
     }
@@ -724,6 +757,7 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
+            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -934,6 +968,19 @@ class HocuspocusSyncProvider {
         this.disconnect();
         return this.connect();
     }
+    releaseSyncedWaiters() {
+        const resolvers = this.syncedResolvers;
+        this.syncedResolvers = [];
+        resolvers.forEach(resolve => resolve());
+    }
+    async whenSynced() {
+        if (this.isSynced || this.isDestroyed || this.provider.isSynced) {
+            return;
+        }
+        return new Promise(resolve => {
+            this.syncedResolvers.push(resolve);
+        });
+    }
     disconnect() {
         // Cancel any pending connection attempt
         if (this.connectTimeout) {
@@ -955,6 +1002,7 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
+        this.releaseSyncedWaiters();
     }
     destroy() {
         // Mark as destroyed first to prevent any callbacks from doing work
@@ -974,6 +1022,7 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
+        this.releaseSyncedWaiters();
     }
 }