kritzel-stencil 0.4.21 → 0.4.22

package/dist/cjs/index.cjs.js

@@ -570,9 +570,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;
@@ -619,11 +625,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;
@@ -655,6 +679,8 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -665,6 +691,8 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
 }
 
@@ -686,9 +714,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;
     }
@@ -745,6 +778,7 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
+            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -955,6 +989,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) {
@@ -976,6 +1023,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
@@ -995,6 +1043,7 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
+        this.releaseSyncedWaiters();
     }
 }
 

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

@@ -2168,6 +2168,8 @@ const KritzelEditor = class {
         this.login = index.createEvent(this, "login");
         this.isPublicChange = index.createEvent(this, "isPublicChange");
         this.awarenessChange = index.createEvent(this, "awarenessChange");
+        this.syncingChange = index.createEvent(this, "syncingChange");
+        this.loadingChange = index.createEvent(this, "loadingChange");
     }
     get host() { return index.getElement(this); }
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -2407,6 +2409,9 @@ const KritzelEditor = class {
     login;
     isPublicChange;
     awarenessChange;
+    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
+    syncingChange;
+    loadingChange;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -3225,40 +3230,40 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'd9d87b5ca40972d7ab2c5986f340278347f78c6e' }, index.h("div", { key: 'd8da2ed24d19c550420689c6720dc491fe0d3a22', class: "editor-content", style: {
+        return (index.h(index.Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, index.h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: '82a5d216e7c95307b1bdbd1f06fdfe881c1c50d4', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'de13673384b44bb6bd309a927a2866a9b78b519e', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'f68610d7d91713f7a0ec5f0135d208769f7fab9c', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '9d1f972fb67050b1f996e3088710713fa1219b9a', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '295eff0a02f7cc79ad8e80cda23baa3c576ce156', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: '1d1bf140ddfb7b927d30fb1d77e7b887240d7deb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (index.h("kritzel-context-menu", { key: '1062bc9554e5834ef2002fbfe953f7938866fb84', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, index.h("div", { key: '1b1171eea60a36ad06da55a3da564bc356526266', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '48b59f3f57ace57debc19a295d4fb642e8c3b23d', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'c66a6faae8bf7115dcce47630ad820af9ba76eb0', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '834baedc5f20328deb4ee586f693313306895a71', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: 'f800508a2e076ee3e89820ffff4df81842b175b3', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: '2835ea84e8fa92c41637adaa29d9005f209b2da9', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (index.h("kritzel-context-menu", { key: '6c49e899b7f933d3f06cd1f8696a590d542214a7', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
                 position: 'absolute',
                 left: `${this.contextMenuState.position.x}px`,
                 top: `${this.contextMenuState.position.y}px`,
                 zIndex: '10002',
-            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), index.h("kritzel-sync-indicator", { key: '0094a026828473988f857d82cfccb811f36f049c', visible: this.isSyncing, text: "Syncing..." }), index.h("kritzel-loading-overlay", { key: '680096e20b6175104a866b9a92ca4c1d0087c93a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), index.h("kritzel-engine", { key: '0698a44fcbf2d6ea786d53502350ac0c9ffb9d66', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), index.h("kritzel-sync-indicator", { key: '9622af1634a939d6689d5a133496d536f5d7865f', visible: this.isSyncing, text: "Syncing..." }), index.h("kritzel-loading-overlay", { key: '00f142a3eb8b23fbd0bdb6ec53ae95855434516c', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), index.h("kritzel-engine", { key: '39b1d7bfce0a5347fec60cd135d6db8fb4250bfa', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), index.h("kritzel-controls", { key: '765a670807111ad68e9f8d14bdca2651a33704d4', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), index.h("kritzel-controls", { key: '9a708f21ab92ecc6953a35f5db8001b2403f330e', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e7c5ebab4a40b7ab4fa5d19d203129326c0009ed', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '0aa3891b553d2abcd06e635227fd6bb6656ed739', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '824244bbd78784c1d78ab89cc12e206ca61d84cc', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'baf4830b6b9ccb6241b1a1baa5cc6ff9d0295fb9', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '6a2b1cd72099db86952ac31aad9655693d0a6a0d', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: 'b3756514bf8de6de8ac7586c626f9759da7f231d', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: 'd5e118bc4d60b867006bac287c5516baf3aa890e', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'e4065d36beb9283cdbbf3ae9800f4f8011c0b4f0', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '57e2682450c71803cd49bfe65f16e02d9d3358bc', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '4e18d9b42c9e7fef9433577b983c508559461da2', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '955d2a61b98d937f8eec39ab19f1b73e702c9fd7', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'c0885e0c8cab1a4cb50c8f6d4b17e03f32cc2b87', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: 'fc70555061d2aeaebdbe981bdbe8cf501bd8120e', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '56e6b29c9c3dcd7b68af4a1ef7d34224d592ce34', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '3b90bcc7e583fcf3c6845d222ad181ccf234a423', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: 'f87702c5a708b6afdb2bc3760895e3e3650a4cb5', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && index.h("kritzel-button", { key: '9666163a2a36a64ecb641659dca515ae30409d0f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), index.h("kritzel-more-menu", { key: '167ac17ea93897597e83d4fe8b3b561fac848bb6', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '10cfb0b794d613ec39299f06ac1a3402d1ad3084', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && index.h("kritzel-button", { key: '015bc0f4c66352136de66d35d28c20070366933f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), index.h("kritzel-more-menu", { key: 'b3fdf9fdb2a34508002e82dfdef9e9bdbbe57ecc', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: 'bac4fbbfa04c261e2b128e766cc43c1062aec2ff', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '99dcb9051382982ec5a8975bdd991bae57745bb9', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -22301,6 +22306,10 @@ class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
+    _remoteChangesCallbacks = [];
+    _docUpdateHandler = null;
+    _remoteOrigins = new Set();
+    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -22324,12 +22333,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.
      */
@@ -22572,6 +22613,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
@@ -22625,12 +22682,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)
@@ -23288,6 +23348,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) {
@@ -23783,7 +23850,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);
             }
@@ -27887,7 +27957,7 @@ const KritzelEngine = class {
     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;
@@ -29474,6 +29544,7 @@ const KritzelEngine = class {
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
+    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -29491,9 +29562,16 @@ const KritzelEngine = class {
         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;
     }
@@ -29605,6 +29683,7 @@ const KritzelEngine = class {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
+        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -29859,21 +29938,7 @@ const KritzelEngine = class {
         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
@@ -29885,6 +29950,38 @@ const KritzelEngine = class {
             }
         }
     }
+    /**
+     * 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) {
@@ -32029,7 +32126,7 @@ const KritzelPortal = class {
  * 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/collection/classes/providers/sync/hocuspocus-sync-provider.class.js

@@ -17,9 +17,14 @@ export 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;
     }
@@ -76,6 +81,7 @@ export class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
+            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -286,6 +292,19 @@ export 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) {
@@ -307,6 +326,7 @@ export 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
@@ -326,5 +346,6 @@ export class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
+        this.releaseSyncedWaiters();
     }
 }

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

@@ -8,9 +8,15 @@ export 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;
@@ -57,11 +63,29 @@ export 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;
@@ -93,6 +117,8 @@ export class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -103,5 +129,7 @@ export class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
 }

package/dist/collection/classes/structures/app-state-map.structure.js

@@ -120,7 +120,10 @@ export 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);
             }