kritzel-stencil 0.4.23 → 0.4.25

package/dist/components/{p-EijwLEZx.js → p-gJcH-huF.js}

@@ -43319,13 +43319,17 @@ class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
-    _remoteChangesCallbacks = [];
-    _docUpdateHandler = null;
-    _remoteOrigins = new Set();
-    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
+    // Identities of the raw network-provider instances (e.g. WebsocketProvider, HocuspocusProvider)
+    // that Yjs tags as transaction origin for remote updates; local providers (IndexedDB,
+    // BroadcastChannel) never appear here, so their transactions never toggle isSyncing.
+    _networkTransactionOrigins = new Set();
+    _isSyncing = false;
+    _syncingChangeCallbacks = [];
+    _beforeTransactionHandler = null;
+    _afterAllTransactionsHandler = null;
     /**
      * When true, update() only modifies local state (quadtree + idMap)
      * without writing to Yjs. Used during drag operations to avoid
@@ -43346,44 +43350,12 @@ class KritzelObjectMap {
         return this._isReady;
     }
     /**
-     * Promise that settles when network providers finish connecting and complete
-     * their Yjs sync handshake. Resolves immediately if no network providers.
+     * Promise that settles when network providers finish connecting.
+     * Resolves immediately if no network providers. Awaited by the loading overlay.
      */
     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.
      */
@@ -43533,6 +43505,22 @@ class KritzelObjectMap {
             this._objectsChangeCallbacks = this._objectsChangeCallbacks.filter(existingCallback => existingCallback !== callback);
         };
     }
+    /**
+     * Whether the local copy currently differs from data a remote peer is in the process of merging in.
+     */
+    get isSyncing() {
+        return this._isSyncing;
+    }
+    /**
+     * Registers a callback invoked when a remote sync starts (`true`) or finishes (`false`).
+     * "Starts" fires from `beforeTransaction`, before the incoming remote update is merged.
+     */
+    onSyncingChange(callback) {
+        this._syncingChangeCallbacks.push(callback);
+        return () => {
+            this._syncingChangeCallbacks = this._syncingChangeCallbacks.filter(existingCallback => existingCallback !== callback);
+        };
+    }
     /**
      * Returns the Yjs UndoManager instance for managing undo/redo operations.
      * @returns The UndoManager instance, or `null` if not initialized
@@ -43626,22 +43614,36 @@ 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);
+        // Only network providers (WebSocket, Hocuspocus) represent a genuine remote peer;
+        // local providers (IndexedDB, BroadcastChannel) never appear as a transaction origin here,
+        // so loading from IndexedDB or a same-device tab never toggles isSyncing.
+        this._networkTransactionOrigins = new Set(this._providers
+            .filter(p => p.type === 'network')
+            .map(p => p.rawProvider)
+            .filter((origin) => origin != null));
+        // Fires before a remote-origin transaction integrates its update, so this always
+        // precedes any local/remote reconciliation for that update.
+        this._beforeTransactionHandler = transaction => {
+            if (this._isSyncing || !this._networkTransactionOrigins.has(transaction.origin)) {
+                return;
             }
-        }
-        this._docUpdateHandler = (_update, origin) => {
-            if (!this._remoteOrigins.has(origin)) {
+            this._isSyncing = true;
+            this._syncingChangeCallbacks.forEach(callback => callback(true));
+        };
+        // Fires once a batch of transactions (possibly several remote updates) has fully settled.
+        this._afterAllTransactionsHandler = (_doc, transactions) => {
+            if (!this._isSyncing) {
                 return;
             }
-            this._appliedRemoteChanges = true;
-            for (const callback of [...this._remoteChangesCallbacks]) {
-                callback();
+            const hadRemoteTransaction = transactions.some(transaction => this._networkTransactionOrigins.has(transaction.origin));
+            if (!hadRemoteTransaction) {
+                return;
             }
+            this._isSyncing = false;
+            this._syncingChangeCallbacks.forEach(callback => callback(false));
         };
-        this._ydoc.on('update', this._docUpdateHandler);
+        this._ydoc.on('beforeTransaction', this._beforeTransactionHandler);
+        this._ydoc.on('afterAllTransactions', this._afterAllTransactionsHandler);
         // 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
@@ -43695,15 +43697,12 @@ 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()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
         }));
-        // Settles once remote data has been reconciled, not merely once the transport connected
+        // Network sync awaited by loading overlay to show remote workspace hydration
         this._networkSyncPromise = networkConnectPromises.length > 0 ? Promise.allSettled(networkConnectPromises).then(() => undefined) : null;
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
@@ -44361,13 +44360,6 @@ 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) {
@@ -44400,11 +44392,20 @@ class KritzelObjectMap {
             p.destroy();
         });
         this._providers = [];
+        this._networkTransactionOrigins = new Set();
         // Clear object map references
         this._objectsMap = null;
         this._metadataMap = null;
         // Destroy Y.Doc
         if (this._ydoc) {
+            if (this._beforeTransactionHandler) {
+                this._ydoc.off('beforeTransaction', this._beforeTransactionHandler);
+                this._beforeTransactionHandler = null;
+            }
+            if (this._afterAllTransactionsHandler) {
+                this._ydoc.off('afterAllTransactions', this._afterAllTransactionsHandler);
+                this._afterAllTransactionsHandler = null;
+            }
             this._ydoc.destroy();
             this._ydoc = null;
         }
@@ -44414,6 +44415,8 @@ class KritzelObjectMap {
         this._workspaceId = null;
         this._isReady = false;
         this._temporaryItemsCount = 0;
+        this._isSyncing = false;
+        this._syncingChangeCallbacks = [];
     }
 }
 
@@ -44863,10 +44866,7 @@ 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()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
@@ -46267,6 +46267,10 @@ class KritzelCore {
         objectsMap.onAwarenessChange(states => {
             this.engine.emitAwarenessChange(states);
         });
+        // Forward remote sync start/finish to the engine as events
+        objectsMap.onSyncingChange(isSyncing => {
+            this.engine.emitIsSyncing(isSyncing);
+        });
         // Rebuild anchor index after loading objects
         this._anchorManager.rebuildIndex();
         this.engine.emitObjectsChange();
@@ -48964,16 +48968,15 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     viewportChange;
     /** Emitted when the awareness state changes (remote user cursors, presence). */
     awarenessChange;
+    /** Emitted when a remote sync starts (`true`, data differs from the local copy) or finishes (`false`). */
+    isSyncing;
     /** Emitted when notifications change. */
     notificationsChange;
     /** Emitted when context-menu visibility, items, or position changes. */
     contextMenuStateChange;
     /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
     loadingChange;
-    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
-    syncingChange;
     forceUpdate = 0;
-    isSyncing = false;
     /** Manually triggers the `objectsSelectionChange` event. */
     async triggerSelectionChange() {
         this.objectsSelectionChange.emit();
@@ -50557,7 +50560,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
-    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -50574,17 +50576,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
         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;
     }
@@ -50691,16 +50682,15 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.objectsInViewportChange = createEvent(this, "objectsInViewportChange");
         this.viewportChange = createEvent(this, "viewportChange");
         this.awarenessChange = createEvent(this, "awarenessChange");
+        this.isSyncing = createEvent(this, "isSyncing");
         this.notificationsChange = createEvent(this, "notificationsChange");
         this.contextMenuStateChange = createEvent(this, "contextMenuStateChange");
         this.loadingChange = createEvent(this, "loadingChange");
-        this.syncingChange = createEvent(this, "syncingChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
-        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -50955,7 +50945,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -50967,45 +50956,6 @@ 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);
-            });
-            // The network provider may have already applied remote changes between
-            // object-map initialization and this subscription (e.g. an already-connected
-            // shared socket resolves the sync handshake almost immediately). Without this
-            // check that update is missed entirely and the indicator never appears.
-            if (initializedObjects.hasAppliedRemoteChanges) {
-                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) {
@@ -51039,6 +50989,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     emitAwarenessChange(states) {
         this.awarenessChange.emit(states);
     }
+    emitIsSyncing(isSyncing) {
+        this.isSyncing.emit(isSyncing);
+    }
     emitObjectsInViewportChange() {
         const visibleObjects = this.core.store.objectsInViewport;
         this.objectsInViewportChange.emit(visibleObjects);
@@ -51746,7 +51699,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "isZoomingEnabled": [4, "is-zooming-enabled"],
         "isLoading": [4, "is-loading"],
         "forceUpdate": [32],
-        "isSyncing": [32],
         "triggerSelectionChange": [64],
         "beginSceneBootstrap": [64],
         "endSceneBootstrap": [64],

package/dist/esm/index.js

@@ -549,13 +549,10 @@ 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() {
+    get rawProvider() {
         return this.provider;
     }
     constructor(docName, doc, options) {
@@ -604,29 +601,11 @@ class WebSocketSyncProvider {
             }
         });
         this.provider.on('sync', (synced) => {
-            if (!synced) {
-                return;
-            }
-            this._isSynced = true;
-            this.releaseSyncedWaiters();
-            if (!this._quiet) {
+            if (synced && !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;
@@ -658,8 +637,6 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -670,8 +647,6 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
 }
 
@@ -693,12 +668,10 @@ 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() {
+    get rawProvider() {
         return this.provider;
     }
     get connectionStatus() {
@@ -757,7 +730,6 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
-            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -968,19 +940,6 @@ 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) {
@@ -1002,7 +961,6 @@ 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
@@ -1022,7 +980,6 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
-        this.releaseSyncedWaiters();
     }
 }