kritzel-stencil 0.4.23 → 0.4.25

package/dist/cjs/index.cjs.js

@@ -570,13 +570,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) {
@@ -625,29 +622,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;
@@ -679,8 +658,6 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -691,8 +668,6 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
 }
 
@@ -714,12 +689,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() {
@@ -778,7 +751,6 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
-            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -989,19 +961,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) {
@@ -1023,7 +982,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
@@ -1043,7 +1001,6 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
-        this.releaseSyncedWaiters();
     }
 }
 

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

@@ -2168,8 +2168,7 @@ 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");
+        this.isSyncing = index.createEvent(this, "isSyncing");
     }
     get host() { return index.getElement(this); }
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -2409,9 +2408,7 @@ 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;
+    isSyncing;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -2433,8 +2430,8 @@ const KritzelEditor = class {
     contextMenuState;
     normalizedControls = [];
     resolvedMoreMenuItems = [];
-    isSyncing = false;
     isLoadingOverlayVisible = false;
+    isSyncingIndicatorVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -2917,6 +2914,11 @@ const KritzelEditor = class {
         event.stopPropagation();
         this.awarenessChange.emit(event.detail);
     }
+    handleIsSyncingChange(event) {
+        event.stopPropagation();
+        this.isSyncingIndicatorVisible = event.detail;
+        this.isSyncing.emit(event.detail);
+    }
     handleNotificationsChange(event) {
         event.stopPropagation();
         this.clearNotificationDismissAnimationTimer();
@@ -3230,40 +3232,40 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, index.h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
+        return (index.h(index.Host, { key: 'a24350a0c12d99ccb0d0ec3ab5975d0f1bf7f861' }, index.h("div", { key: 'bd7029567aeef8cba5290c2bf9937db1af113475', 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: '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: {
+            } }, index.h("div", { key: 'f628dbd94d88c9bdb313a59d73ce86302c90e375', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '5a82d054da31e47d3f8b5c6c403949a5fb97b9dd', 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: 'a5bccef36c8a49ef2cb7ec029def1c7ba71d1c31', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: 'c5c359b199528dd7b1b64a6a32ef349037357c5a', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: 'a41cd6c67c56626c2b6f0eb12193af1f80d6a254', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'fb49769368ddf0fc74998a96dd26dc446ff2b386', 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: '56f38790f477d08761d7542ed3794c52f1f73815', 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: '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 => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), index.h("kritzel-sync-indicator", { key: '4957b8bae0d7087d586c9d0c6da82cae905d7d08', visible: this.isSyncingIndicatorVisible, text: "Syncing..." }), index.h("kritzel-loading-overlay", { key: 'e2e99dc452245a2edf7a575ea5fb60aa91be20df', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), index.h("kritzel-engine", { key: 'fcebe1cc1237c8649461f03679f9c76c05dde9c4', 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: '9a708f21ab92ecc6953a35f5db8001b2403f330e', 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), onIsSyncing: event => this.handleIsSyncingChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), index.h("kritzel-controls", { key: '72b1a3f80bfedb3843d0d54159ad47793db69977', 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: '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 => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '1684a320f1806ae9fdfcfcff115d01f5788737e7', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '8e85652ded70df043d79c9cd73b226aaefa5d6d4', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: 'a836056bdae11324f4ce79da4b991281c1985358', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'e68f4e79bc053e03dc37c18ee153758d284b0d34', 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: '4e18d9b42c9e7fef9433577b983c508559461da2', 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: 'f1e9ea467d11b55dbe75d8b0252fd7f5ed37a1a2', 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: '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 => {
+            }, 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: '01bb56bd37bc22e82be5a1175f597cdf724c4834', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '5470ef356a4d6332b380e8c75f02f0fccbe861cc', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: '229551b18f0443944a96f7b8e833ff1aefb001f4', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = 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 => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && index.h("kritzel-button", { key: '3d9a8ebbe62084e94348265f1f883bc80e625d9c', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), index.h("kritzel-more-menu", { key: '9f7f763c330b27068bc371d98eb22a80adbf359e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: 'c60b860e22394a44270285dea45f02305a05c545', 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: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '84d0fab11722a7be1d5824b3284f000502277dfc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -22306,13 +22308,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
@@ -22333,44 +22339,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.
      */
@@ -22520,6 +22494,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
@@ -22613,22 +22603,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
@@ -22682,15 +22686,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)
@@ -23348,13 +23349,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) {
@@ -23387,11 +23381,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;
         }
@@ -23401,6 +23404,8 @@ class KritzelObjectMap {
         this._workspaceId = null;
         this._isReady = false;
         this._temporaryItemsCount = 0;
+        this._isSyncing = false;
+        this._syncingChangeCallbacks = [];
     }
 }
 
@@ -23850,10 +23855,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);
             }
@@ -25254,6 +25256,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();
@@ -27951,16 +27957,15 @@ const KritzelEngine = class {
     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();
@@ -29544,7 +29549,6 @@ const KritzelEngine = class {
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
-    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -29561,17 +29565,6 @@ const KritzelEngine = class {
         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;
     }
@@ -29674,16 +29667,15 @@ const KritzelEngine = class {
         this.objectsInViewportChange = index.createEvent(this, "objectsInViewportChange");
         this.viewportChange = index.createEvent(this, "viewportChange");
         this.awarenessChange = index.createEvent(this, "awarenessChange");
+        this.isSyncing = index.createEvent(this, "isSyncing");
         this.notificationsChange = index.createEvent(this, "notificationsChange");
         this.contextMenuStateChange = index.createEvent(this, "contextMenuStateChange");
         this.loadingChange = index.createEvent(this, "loadingChange");
-        this.syncingChange = index.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;
@@ -29938,7 +29930,6 @@ const KritzelEngine = class {
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -29950,45 +29941,6 @@ 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);
-            });
-            // 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) {
@@ -30022,6 +29974,9 @@ const KritzelEngine = class {
     emitAwarenessChange(states) {
         this.awarenessChange.emit(states);
     }
+    emitIsSyncing(isSyncing) {
+        this.isSyncing.emit(isSyncing);
+    }
     emitObjectsInViewportChange() {
         const visibleObjects = this.core.store.objectsInViewport;
         this.objectsInViewportChange.emit(visibleObjects);
@@ -32133,7 +32088,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.23';
+const KRITZEL_VERSION = '0.4.25';
 
 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)}`;