kritzel-stencil 0.4.23 → 0.4.25

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -266,9 +266,7 @@ export class KritzelEditor {
     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;
@@ -290,8 +288,8 @@ export class KritzelEditor {
     contextMenuState;
     normalizedControls = [];
     resolvedMoreMenuItems = [];
-    isSyncing = false;
     isLoadingOverlayVisible = false;
+    isSyncingIndicatorVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -774,6 +772,11 @@ export class KritzelEditor {
         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();
@@ -1087,40 +1090,40 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
+        return (h(Host, { key: 'a24350a0c12d99ccb0d0ec3ab5975d0f1bf7f861' }, 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',
-            } }, h("div", { key: '1b1171eea60a36ad06da55a3da564bc356526266', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'c66a6faae8bf7115dcce47630ad820af9ba76eb0', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '834baedc5f20328deb4ee586f693313306895a71', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'f800508a2e076ee3e89820ffff4df81842b175b3', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, 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 && (h("kritzel-context-menu", { key: '6c49e899b7f933d3f06cd1f8696a590d542214a7', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, h("div", { key: 'f628dbd94d88c9bdb313a59d73ce86302c90e375', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'a5bccef36c8a49ef2cb7ec029def1c7ba71d1c31', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'c5c359b199528dd7b1b64a6a32ef349037357c5a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'a41cd6c67c56626c2b6f0eb12193af1f80d6a254', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, 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 && (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() })), h("kritzel-sync-indicator", { key: '9622af1634a939d6689d5a133496d536f5d7865f', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '00f142a3eb8b23fbd0bdb6ec53ae95855434516c', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '39b1d7bfce0a5347fec60cd135d6db8fb4250bfa', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-sync-indicator", { key: '4957b8bae0d7087d586c9d0c6da82cae905d7d08', visible: this.isSyncingIndicatorVisible, text: "Syncing..." }), h("kritzel-loading-overlay", { key: 'e2e99dc452245a2edf7a575ea5fb60aa91be20df', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), 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) }), 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) }), 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) }), h("div", { key: '6a2b1cd72099db86952ac31aad9655693d0a6a0d', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'b3756514bf8de6de8ac7586c626f9759da7f231d', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'd5e118bc4d60b867006bac287c5516baf3aa890e', class: "top-right-buttons" }, 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) }), h("div", { key: '1684a320f1806ae9fdfcfcff115d01f5788737e7', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '8e85652ded70df043d79c9cd73b226aaefa5d6d4', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a836056bdae11324f4ce79da4b991281c1985358', class: "top-right-buttons" }, 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) }), 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) }), 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) }), h("kritzel-active-users", { key: '56e6b29c9c3dcd7b68af4a1ef7d34224d592ce34', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '3b90bcc7e583fcf3c6845d222ad181ccf234a423', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (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) }), h("kritzel-active-users", { key: '01bb56bd37bc22e82be5a1175f597cdf724c4834', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '5470ef356a4d6332b380e8c75f02f0fccbe861cc', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '229551b18f0443944a96f7b8e833ff1aefb001f4', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '015bc0f4c66352136de66d35d28c20070366933f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: 'b3fdf9fdb2a34508002e82dfdef9e9bdbbe57ecc', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'bac4fbbfa04c261e2b128e766cc43c1062aec2ff', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '3d9a8ebbe62084e94348265f1f883bc80e625d9c', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '9f7f763c330b27068bc371d98eb22a80adbf359e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), 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 && (h("kritzel-login-dialog", { key: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '84d0fab11722a7be1d5824b3284f000502277dfc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1985,8 +1988,8 @@ export class KritzelEditor {
             "contextMenuState": {},
             "normalizedControls": {},
             "resolvedMoreMenuItems": {},
-            "isSyncing": {},
-            "isLoadingOverlayVisible": {}
+            "isLoadingOverlayVisible": {},
+            "isSyncingIndicatorVisible": {}
         };
     }
     static get events() {
@@ -2294,23 +2297,8 @@ export class KritzelEditor {
                     }
                 }
             }, {
-                "method": "syncingChange",
-                "name": "syncingChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "loadingChange",
-                "name": "loadingChange",
+                "method": "isSyncing",
+                "name": "isSyncing",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -252,16 +252,15 @@ export class KritzelEngine {
     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();
@@ -1845,7 +1844,6 @@ export class KritzelEngine {
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
-    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -1862,17 +1860,6 @@ export class KritzelEngine {
         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;
     }
@@ -1965,7 +1952,6 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
-        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -2220,7 +2206,6 @@ export class KritzelEngine {
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -2232,45 +2217,6 @@ export class KritzelEngine {
             }
         }
     }
-    /**
-     * 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) {
@@ -2304,6 +2250,9 @@ export class KritzelEngine {
     emitAwarenessChange(states) {
         this.awarenessChange.emit(states);
     }
+    emitIsSyncing(isSyncing) {
+        this.isSyncing.emit(isSyncing);
+    }
     emitObjectsInViewportChange() {
         const visibleObjects = this.core.store.objectsInViewport;
         this.objectsInViewportChange.emit(visibleObjects);
@@ -3521,8 +3470,7 @@ export class KritzelEngine {
     }
     static get states() {
         return {
-            "forceUpdate": {},
-            "isSyncing": {}
+            "forceUpdate": {}
         };
     }
     static get events() {
@@ -3827,6 +3775,21 @@ export class KritzelEngine {
                         }
                     }
                 }
+            }, {
+                "method": "isSyncing",
+                "name": "isSyncing",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a remote sync starts (`true`, data differs from the local copy) or finishes (`false`)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }, {
                 "method": "notificationsChange",
                 "name": "notificationsChange",
@@ -3886,21 +3849,6 @@ export class KritzelEngine {
                     "resolved": "boolean",
                     "references": {}
                 }
-            }, {
-                "method": "syncingChange",
-                "name": "syncingChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
             }];
     }
     static get methods() {

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.4.23';
+export const KRITZEL_VERSION = '0.4.25';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-B43upypT.js';
 export { K as KritzelBaseObject, b as KritzelLine, a as KritzelPath } from './p-bAacqNHq.js';
-export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-EijwLEZx.js';
+export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-gJcH-huF.js';
 import * as Y from 'yjs';
 import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';
@@ -603,13 +603,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) {
@@ -658,29 +655,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;
@@ -712,8 +691,6 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -724,8 +701,6 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
 }
 
@@ -747,12 +722,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() {
@@ -811,7 +784,6 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
-            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -1022,19 +994,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) {
@@ -1056,7 +1015,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
@@ -1076,7 +1034,6 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
-        this.releaseSyncedWaiters();
     }
 }
 

package/dist/components/kritzel-editor.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$s } from './p-CSuU8frA.js';
-import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-EijwLEZx.js';
+import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-gJcH-huF.js';
 import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-7I4Uzjrw.js';
 import { D as DEFAULT_TEXT_TOOL_AVAILABLE_FONTS, r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
 import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$4 } from './p-DtnMdWWB.js';
@@ -39,7 +39,7 @@ import { d as defineCustomElement$i } from './p-DKGg-76-.js';
 import { d as defineCustomElement$h } from './p-CrHvaLRV.js';
 import { d as defineCustomElement$g } from './p-jIKskj3S.js';
 import { d as defineCustomElement$f } from './p-BPsKYMH6.js';
-import { d as defineCustomElement$e } from './p-Cb-xlpsJ.js';
+import { d as defineCustomElement$e } from './p-0fhjWRmT.js';
 import { d as defineCustomElement$d } from './p-BFYtCsZu.js';
 import { d as defineCustomElement$c } from './p-CwZ3KKFq.js';
 import { d as defineCustomElement$b } from './p-BozrueXV.js';
@@ -2957,8 +2957,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         this.login = createEvent(this, "login");
         this.isPublicChange = createEvent(this, "isPublicChange");
         this.awarenessChange = createEvent(this, "awarenessChange");
-        this.syncingChange = createEvent(this, "syncingChange");
-        this.loadingChange = createEvent(this, "loadingChange");
+        this.isSyncing = createEvent(this, "isSyncing");
     }
     get host() { return this; }
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -3198,9 +3197,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     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;
@@ -3222,8 +3219,8 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     contextMenuState;
     normalizedControls = [];
     resolvedMoreMenuItems = [];
-    isSyncing = false;
     isLoadingOverlayVisible = false;
+    isSyncingIndicatorVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -3706,6 +3703,11 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         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();
@@ -4019,40 +4021,40 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
+        return (h(Host, { key: 'a24350a0c12d99ccb0d0ec3ab5975d0f1bf7f861' }, 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',
-            } }, h("div", { key: '1b1171eea60a36ad06da55a3da564bc356526266', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'c66a6faae8bf7115dcce47630ad820af9ba76eb0', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '834baedc5f20328deb4ee586f693313306895a71', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'f800508a2e076ee3e89820ffff4df81842b175b3', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, 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 && (h("kritzel-context-menu", { key: '6c49e899b7f933d3f06cd1f8696a590d542214a7', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, h("div", { key: 'f628dbd94d88c9bdb313a59d73ce86302c90e375', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'a5bccef36c8a49ef2cb7ec029def1c7ba71d1c31', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'c5c359b199528dd7b1b64a6a32ef349037357c5a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'a41cd6c67c56626c2b6f0eb12193af1f80d6a254', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, 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 && (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() })), h("kritzel-sync-indicator", { key: '9622af1634a939d6689d5a133496d536f5d7865f', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '00f142a3eb8b23fbd0bdb6ec53ae95855434516c', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '39b1d7bfce0a5347fec60cd135d6db8fb4250bfa', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-sync-indicator", { key: '4957b8bae0d7087d586c9d0c6da82cae905d7d08', visible: this.isSyncingIndicatorVisible, text: "Syncing..." }), h("kritzel-loading-overlay", { key: 'e2e99dc452245a2edf7a575ea5fb60aa91be20df', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), 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) }), 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) }), 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) }), h("div", { key: '6a2b1cd72099db86952ac31aad9655693d0a6a0d', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'b3756514bf8de6de8ac7586c626f9759da7f231d', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'd5e118bc4d60b867006bac287c5516baf3aa890e', class: "top-right-buttons" }, 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) }), h("div", { key: '1684a320f1806ae9fdfcfcff115d01f5788737e7', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '8e85652ded70df043d79c9cd73b226aaefa5d6d4', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a836056bdae11324f4ce79da4b991281c1985358', class: "top-right-buttons" }, 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) }), 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) }), 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) }), h("kritzel-active-users", { key: '56e6b29c9c3dcd7b68af4a1ef7d34224d592ce34', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '3b90bcc7e583fcf3c6845d222ad181ccf234a423', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (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) }), h("kritzel-active-users", { key: '01bb56bd37bc22e82be5a1175f597cdf724c4834', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '5470ef356a4d6332b380e8c75f02f0fccbe861cc', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '229551b18f0443944a96f7b8e833ff1aefb001f4', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '015bc0f4c66352136de66d35d28c20070366933f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: 'b3fdf9fdb2a34508002e82dfdef9e9bdbbe57ecc', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'bac4fbbfa04c261e2b128e766cc43c1062aec2ff', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '3d9a8ebbe62084e94348265f1f883bc80e625d9c', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '9f7f763c330b27068bc371d98eb22a80adbf359e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), 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 && (h("kritzel-login-dialog", { key: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '84d0fab11722a7be1d5824b3284f000502277dfc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -4160,8 +4162,8 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "contextMenuState": [32],
         "normalizedControls": [32],
         "resolvedMoreMenuItems": [32],
-        "isSyncing": [32],
         "isLoadingOverlayVisible": [32],
+        "isSyncingIndicatorVisible": [32],
         "getObjectById": [64],
         "addObject": [64],
         "addObjects": [64],

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-EijwLEZx.js';
+import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-gJcH-huF.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-settings.js

@@ -1,4 +1,4 @@
-import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-Cb-xlpsJ.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-0fhjWRmT.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-Cb-xlpsJ.js → p-0fhjWRmT.js}

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