kritzel-stencil 0.4.21 → 0.4.22

package/dist/collection/classes/structures/object-map.structure.js

@@ -37,6 +37,10 @@ export class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
+    _remoteChangesCallbacks = [];
+    _docUpdateHandler = null;
+    _remoteOrigins = new Set();
+    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -60,12 +64,44 @@ export class KritzelObjectMap {
         return this._isReady;
     }
     /**
-     * Promise that settles when network providers finish connecting.
-     * Resolves immediately if no network providers. Awaited by the loading overlay.
+     * Promise that settles when network providers finish connecting and complete
+     * their Yjs sync handshake. Resolves immediately if no network providers.
      */
     whenNetworkSynced() {
         return this._networkSyncPromise ?? Promise.resolve();
     }
+    /**
+     * Whether any configured provider synchronizes over the network.
+     */
+    get hasNetworkSyncProvider() {
+        return this._providers.some(provider => provider.type === 'network');
+    }
+    /**
+     * Whether remote-originated changes can be told apart from local writes.
+     * Requires every network provider to expose its Yjs update origin.
+     */
+    get supportsRemoteChangeDetection() {
+        const networkProviders = this._providers.filter(provider => provider.type === 'network');
+        return networkProviders.length > 0 && networkProviders.every(provider => provider.updateOrigin !== undefined);
+    }
+    /**
+     * Whether at least one update originating from a network provider has been
+     * applied to this document. Stays `false` when the remote held no data the
+     * local document was missing, because Yjs suppresses empty updates.
+     */
+    get hasAppliedRemoteChanges() {
+        return this._appliedRemoteChanges;
+    }
+    /**
+     * Registers a callback invoked whenever a network provider applies changes to this document.
+     * @returns A function that unregisters the callback.
+     */
+    onRemoteChangesApplied(callback) {
+        this._remoteChangesCallbacks.push(callback);
+        return () => {
+            this._remoteChangesCallbacks = this._remoteChangesCallbacks.filter(registered => registered !== callback);
+        };
+    }
     /**
      * Returns the Yjs Awareness instance, if a network provider is available.
      */
@@ -308,6 +344,22 @@ export class KritzelObjectMap {
             const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
             console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
         }
+        // Registered before any provider connects so no remote update can be missed.
+        for (const provider of this._providers) {
+            if (provider.type === 'network' && provider.updateOrigin !== undefined) {
+                this._remoteOrigins.add(provider.updateOrigin);
+            }
+        }
+        this._docUpdateHandler = (_update, origin) => {
+            if (!this._remoteOrigins.has(origin)) {
+                return;
+            }
+            this._appliedRemoteChanges = true;
+            for (const callback of [...this._remoteChangesCallbacks]) {
+                callback();
+            }
+        };
+        this._ydoc.on('update', this._docUpdateHandler);
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -361,12 +413,15 @@ export class KritzelObjectMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider
+            .connect()
+            .then(() => provider.whenSynced?.())
+            .catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
         }));
-        // Network sync awaited by loading overlay to show remote workspace hydration
+        // Settles once remote data has been reconciled, not merely once the transport connected
         this._networkSyncPromise = networkConnectPromises.length > 0 ? Promise.allSettled(networkConnectPromises).then(() => undefined) : null;
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
@@ -1031,6 +1086,13 @@ export 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) {

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

@@ -266,6 +266,9 @@ 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;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -1084,40 +1087,40 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'd9d87b5ca40972d7ab2c5986f340278347f78c6e' }, h("div", { key: 'd8da2ed24d19c550420689c6720dc491fe0d3a22', class: "editor-content", style: {
+        return (h(Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '82a5d216e7c95307b1bdbd1f06fdfe881c1c50d4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'de13673384b44bb6bd309a927a2866a9b78b519e', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f68610d7d91713f7a0ec5f0135d208769f7fab9c', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '9d1f972fb67050b1f996e3088710713fa1219b9a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '295eff0a02f7cc79ad8e80cda23baa3c576ce156', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '1d1bf140ddfb7b927d30fb1d77e7b887240d7deb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '1062bc9554e5834ef2002fbfe953f7938866fb84', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, 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: {
                 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: '0094a026828473988f857d82cfccb811f36f049c', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '680096e20b6175104a866b9a92ca4c1d0087c93a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '0698a44fcbf2d6ea786d53502350ac0c9ffb9d66', ref: el => {
+            }, 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 => {
                 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: '765a670807111ad68e9f8d14bdca2651a33704d4', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '9a708f21ab92ecc6953a35f5db8001b2403f330e', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e7c5ebab4a40b7ab4fa5d19d203129326c0009ed', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '0aa3891b553d2abcd06e635227fd6bb6656ed739', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '824244bbd78784c1d78ab89cc12e206ca61d84cc', class: "top-right-buttons" }, h("kritzel-settings", { key: 'baf4830b6b9ccb6241b1a1baa5cc6ff9d0295fb9', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), 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 => {
                 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: '57e2682450c71803cd49bfe65f16e02d9d3358bc', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '4e18d9b42c9e7fef9433577b983c508559461da2', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '955d2a61b98d937f8eec39ab19f1b73e702c9fd7', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'c0885e0c8cab1a4cb50c8f6d4b17e03f32cc2b87', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'fc70555061d2aeaebdbe981bdbe8cf501bd8120e', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), 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 => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '9666163a2a36a64ecb641659dca515ae30409d0f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '167ac17ea93897597e83d4fe8b3b561fac848bb6', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '10cfb0b794d613ec39299f06ac1a3402d1ad3084', ref: 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 => {
                 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: '99dcb9051382982ec5a8975bdd991bae57745bb9', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -2290,6 +2293,36 @@ 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",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -258,7 +258,7 @@ export class KritzelEngine {
     contextMenuStateChange;
     /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
     loadingChange;
-    /** Emitted when remote workspace synchronization is in progress. */
+    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
     syncingChange;
     forceUpdate = 0;
     isSyncing = false;
@@ -1845,6 +1845,7 @@ export class KritzelEngine {
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
+    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -1862,9 +1863,16 @@ export class KritzelEngine {
         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;
     }
@@ -1957,6 +1965,7 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
+        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -2211,21 +2220,7 @@ export class KritzelEngine {
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            // Track remote sync in the background without blocking the loading overlay.
-            const initializedObjects = this.core.store.objects;
-            const networkSyncPromise = initializedObjects?.whenNetworkSynced();
-            if (networkSyncPromise && this.isNetworkAvailable()) {
-                this.syncSyncingState(true);
-                void networkSyncPromise.finally(() => {
-                    // Only clear syncing for the currently active object map.
-                    if (this.core.store.objects === initializedObjects) {
-                        this.syncSyncingState(false);
-                    }
-                });
-            }
-            else {
-                this.syncSyncingState(false);
-            }
+            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -2237,6 +2232,38 @@ 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);
+            });
+        }
+        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) {
@@ -3860,7 +3887,7 @@ export class KritzelEngine {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when remote workspace synchronization is in progress."
+                    "text": "Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new."
                 },
                 "complexType": {
                     "original": "boolean",

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.21';
+export const KRITZEL_VERSION = '0.4.22';

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-C_f_QElb.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-BNeE3SiZ.js';
 import * as Y from 'yjs';
 import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';
@@ -603,9 +603,15 @@ class WebSocketSyncProvider {
     provider;
     isConnected = false;
     _quiet = false;
+    _isSynced = false;
+    _syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
+    /** y-websocket applies remote updates with the underlying provider as the Yjs transaction origin. */
+    get updateOrigin() {
+        return this.provider;
+    }
     constructor(docName, doc, options) {
         const url = options?.url || 'ws://localhost:1234';
         const roomName = options?.roomName || docName;
@@ -652,11 +658,29 @@ class WebSocketSyncProvider {
             }
         });
         this.provider.on('sync', (synced) => {
-            if (synced && !this._quiet) {
+            if (!synced) {
+                return;
+            }
+            this._isSynced = true;
+            this.releaseSyncedWaiters();
+            if (!this._quiet) {
                 console.info('WebSocket synced');
             }
         });
     }
+    releaseSyncedWaiters() {
+        const resolvers = this._syncedResolvers;
+        this._syncedResolvers = [];
+        resolvers.forEach(resolve => resolve());
+    }
+    async whenSynced() {
+        if (this._isSynced || this.provider.synced) {
+            return;
+        }
+        return new Promise(resolve => {
+            this._syncedResolvers.push(resolve);
+        });
+    }
     async connect() {
         if (this.isConnected) {
             return;
@@ -688,6 +712,8 @@ class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -698,6 +724,8 @@ class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
+        this._isSynced = false;
+        this.releaseSyncedWaiters();
     }
 }
 
@@ -719,9 +747,14 @@ class HocuspocusSyncProvider {
     _connectionStatus = 'disconnected';
     visibilityHandler = null;
     onlineHandler = null;
+    syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
+    /** HocuspocusProvider applies remote updates with itself as the Yjs transaction origin. */
+    get updateOrigin() {
+        return this.provider;
+    }
     get connectionStatus() {
         return this._connectionStatus;
     }
@@ -778,6 +811,7 @@ class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
+            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -988,6 +1022,19 @@ class HocuspocusSyncProvider {
         this.disconnect();
         return this.connect();
     }
+    releaseSyncedWaiters() {
+        const resolvers = this.syncedResolvers;
+        this.syncedResolvers = [];
+        resolvers.forEach(resolve => resolve());
+    }
+    async whenSynced() {
+        if (this.isSynced || this.isDestroyed || this.provider.isSynced) {
+            return;
+        }
+        return new Promise(resolve => {
+            this.syncedResolvers.push(resolve);
+        });
+    }
     disconnect() {
         // Cancel any pending connection attempt
         if (this.connectTimeout) {
@@ -1009,6 +1056,7 @@ class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
+        this.releaseSyncedWaiters();
     }
     destroy() {
         // Mark as destroyed first to prevent any callbacks from doing work
@@ -1028,6 +1076,7 @@ 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-C_f_QElb.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-BNeE3SiZ.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-BdCrcQ0_.js';
+import { d as defineCustomElement$e } from './p-Dx5NfJ0U.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,6 +2957,8 @@ 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");
     }
     get host() { return this; }
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -3196,6 +3198,9 @@ 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;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -4014,40 +4019,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: 'd9d87b5ca40972d7ab2c5986f340278347f78c6e' }, h("div", { key: 'd8da2ed24d19c550420689c6720dc491fe0d3a22', class: "editor-content", style: {
+        return (h(Host, { key: 'ff7d505697bd4c4bd840dadcb04a934b7e243a01' }, h("div", { key: 'b40076c3c79ad3f879e80c58b412b79266de2ea8', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '82a5d216e7c95307b1bdbd1f06fdfe881c1c50d4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'de13673384b44bb6bd309a927a2866a9b78b519e', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f68610d7d91713f7a0ec5f0135d208769f7fab9c', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '9d1f972fb67050b1f996e3088710713fa1219b9a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '295eff0a02f7cc79ad8e80cda23baa3c576ce156', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '1d1bf140ddfb7b927d30fb1d77e7b887240d7deb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '1062bc9554e5834ef2002fbfe953f7938866fb84', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, 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: {
                 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: '0094a026828473988f857d82cfccb811f36f049c', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '680096e20b6175104a866b9a92ca4c1d0087c93a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '0698a44fcbf2d6ea786d53502350ac0c9ffb9d66', ref: el => {
+            }, 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 => {
                 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: '765a670807111ad68e9f8d14bdca2651a33704d4', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '9a708f21ab92ecc6953a35f5db8001b2403f330e', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e7c5ebab4a40b7ab4fa5d19d203129326c0009ed', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '0aa3891b553d2abcd06e635227fd6bb6656ed739', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '824244bbd78784c1d78ab89cc12e206ca61d84cc', class: "top-right-buttons" }, h("kritzel-settings", { key: 'baf4830b6b9ccb6241b1a1baa5cc6ff9d0295fb9', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), 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 => {
                 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: '57e2682450c71803cd49bfe65f16e02d9d3358bc', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '4e18d9b42c9e7fef9433577b983c508559461da2', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '955d2a61b98d937f8eec39ab19f1b73e702c9fd7', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'c0885e0c8cab1a4cb50c8f6d4b17e03f32cc2b87', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'fc70555061d2aeaebdbe981bdbe8cf501bd8120e', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), 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 => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '9666163a2a36a64ecb641659dca515ae30409d0f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '167ac17ea93897597e83d4fe8b3b561fac848bb6', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '10cfb0b794d613ec39299f06ac1a3402d1ad3084', ref: 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 => {
                 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: '99dcb9051382982ec5a8975bdd991bae57745bb9', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'a7d52bad9e752ad546adf80d257c6a46de031e76', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-C_f_QElb.js';
+import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-BNeE3SiZ.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-BdCrcQ0_.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-Dx5NfJ0U.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;