kritzel-stencil 0.1.77 → 0.1.78

package/dist/cjs/{index-Dc7LOVhs.js → index-BRZ6e6oa.js}

@@ -22,7 +22,7 @@ const NAMESPACE = 'stencil';
 const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.43.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
  */
 
 

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-OULs44dI.js');
+var workspace_migrations = require('./workspace.migrations-sUPrO23c.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
-var workspace_migrations = require('./workspace.migrations-OULs44dI.js');
+var index = require('./index-BRZ6e6oa.js');
+var workspace_migrations = require('./workspace.migrations-sUPrO23c.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -1891,11 +1891,7 @@ const KritzelEditor = class {
         showSyncProviderInfo: true,
         showMigrationInfo: true,
     };
-    user = {
-        id: `guest-1`,
-        displayName: 'Guest',
-        isGuest: false,
-    };
+    user;
     activeUsers;
     controls = [
         {
@@ -2044,7 +2040,15 @@ const KritzelEditor = class {
         providers: [workspace_migrations.HocuspocusSyncProvider, workspace_migrations.IndexedDBSyncProvider]
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
-    loginConfig;
+    loginConfig = {
+        providers: [
+            {
+                label: 'Sign in with Google',
+                icon: 'google',
+                name: 'Google',
+            }
+        ]
+    };
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
     /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
@@ -2558,7 +2562,7 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'b52c23bf28392a0061034c0909aadb7abf4d86a7' }, index.h("div", { key: '7bf75101bef73a2c8481258060e3236a8ca939b4', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '69adc1756e00ed56c9980e78929543ad4ecc7b0e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'd802fe454738919d9108a807eb379b2f31e94ab6', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '2d3ce8937285956d978f3947ffa86872e156b04d', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), index.h("kritzel-controls", { key: '6d9b0640b205143c7dc21572616624ef707cfe06', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'c65f16c40d78d8e3eb585e870e414f496e816e82', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'a84d5de344011a32be1b4178acc3a5fff246d702', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '67748d0376f4e7ac39edfc61c1c2cd639664ad78', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '1155b8784de2353ae208a2910844bad1e945a891', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'fb8951eed7f7f5c9117bb0027e9af1aae95088ed', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: 'd4288b1577082c207696331de4d9fcb1e749fa2a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: '66f0990868bf034a172e6e8db3162a1af0637cf8', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'ce3ab2b6db71bf0a4998c16f04521ee39c1715b7', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'd3ec7461c2e6a8fcdac4ce13a51f80835888cb44', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (index.h(index.Host, { key: '6dbc3a8c64dd097ba82e46341b3fb97cbd0194db' }, index.h("div", { key: '26ceb62f59ad830fd651a1712f57e5d711e7c6f4', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'afb4f5b87c5dc0a673444fb27930e43994df4e02', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'f3c0f31841cb819917c3277852bc9b5ce291c09a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '8a9e57132e6b74ec812ee516dc7f0d5fc6c8a2e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), index.h("kritzel-controls", { key: '6caadf512a0208fecdb18b6d68b17daa522161a3', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e27e5f3965be2fd15c83b91470ef87c4031dd7a2', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '57f8e75287402aecbb7740d46dfa15839de2169f', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '5ccf176d4fe1221c5d7597bd1c8537cf3324d3ee', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '44a334b808706e11163e89b91074ca4ea8ab4b18', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'bcb3c966e630b1a8fc4ccd438fc8fbb11cd2b167', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: 'f1957e56257b7c565311e41b770579f7e2bb910d', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'd8c1d1b51cf87725d68aaf4457b88828986a40dc', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'f5840e7f56cf6897ec28b0f28d9b204037bf3348', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'cfdcc3d5e7a5e29b0a352f0d4423ae79195dbf69', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -2607,7 +2611,7 @@ function requireLodash () {
 		  var undefined$1;
 
 		  /** Used as the semantic version number. */
-		  var VERSION = '4.17.23';
+		  var VERSION = '4.18.1';
 
 		  /** Used as the size to enable large array optimizations. */
 		  var LARGE_ARRAY_SIZE = 200;
@@ -2615,7 +2619,8 @@ function requireLodash () {
 		  /** Error message constants. */
 		  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
 		      FUNC_ERROR_TEXT = 'Expected a function',
-		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
+		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`',
+		      INVALID_TEMPL_IMPORTS_ERROR_TEXT = 'Invalid `imports` option passed into `_.template`';
 
 		  /** Used to stand-in for `undefined` hash values. */
 		  var HASH_UNDEFINED = '__lodash_hash_undefined__';
@@ -4347,6 +4352,10 @@ function requireLodash () {
 		     * embedded Ruby (ERB) as well as ES2015 template strings. Change the
 		     * following template settings to use alternative delimiters.
 		     *
+		     * **Security:** See
+		     * [threat model](https://github.com/lodash/lodash/blob/main/threat-model.md)
+		     * — `_.template` is insecure and will be removed in v5.
+		     *
 		     * @static
 		     * @memberOf _
 		     * @type {Object}
@@ -4895,7 +4904,7 @@ function requireLodash () {
 		     * @name has
 		     * @memberOf SetCache
 		     * @param {*} value The value to search for.
-		     * @returns {number} Returns `true` if `value` is found, else `false`.
+		     * @returns {boolean} Returns `true` if `value` is found, else `false`.
 		     */
 		    function setCacheHas(value) {
 		      return this.__data__.has(value);
@@ -6966,7 +6975,9 @@ function requireLodash () {
 		    function baseUnset(object, path) {
 		      path = castPath(path, object);
 
-		      // Prevent prototype pollution, see: https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+		      // Prevent prototype pollution:
+		      // https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+		      // https://github.com/lodash/lodash/security/advisories/GHSA-f23m-r3pf-42rh
 		      var index = -1,
 		          length = path.length;
 
@@ -6974,32 +6985,17 @@ function requireLodash () {
 		        return true;
 		      }
 
-		      var isRootPrimitive = object == null || (typeof object !== 'object' && typeof object !== 'function');
-
 		      while (++index < length) {
-		        var key = path[index];
-
-		        // skip non-string keys (e.g., Symbols, numbers)
-		        if (typeof key !== 'string') {
-		          continue;
-		        }
+		        var key = toKey(path[index]);
 
 		        // Always block "__proto__" anywhere in the path if it's not expected
 		        if (key === '__proto__' && !hasOwnProperty.call(object, '__proto__')) {
 		          return false;
 		        }
 
-		        // Block "constructor.prototype" chains
-		        if (key === 'constructor' &&
-		            (index + 1) < length &&
-		            typeof path[index + 1] === 'string' &&
-		            path[index + 1] === 'prototype') {
-
-		          // Allow ONLY when the path starts at a primitive root, e.g., _.unset(0, 'constructor.prototype.a')
-		          if (isRootPrimitive && index === 0) {
-		            continue;
-		          }
-
+		        // Block constructor/prototype as non-terminal traversal keys to prevent
+		        // escaping the object graph into built-in constructors and prototypes.
+		        if ((key === 'constructor' || key === 'prototype') && index < length - 1) {
 		          return false;
 		        }
 		      }
@@ -9556,7 +9552,7 @@ function requireLodash () {
 
 		    /**
 		     * Creates an array with all falsey values removed. The values `false`, `null`,
-		     * `0`, `""`, `undefined`, and `NaN` are falsey.
+		     * `0`, `-0`, `0n`, `""`, `undefined`, and `NaN` are falsy.
 		     *
 		     * @static
 		     * @memberOf _
@@ -10095,7 +10091,7 @@ function requireLodash () {
 
 		      while (++index < length) {
 		        var pair = pairs[index];
-		        result[pair[0]] = pair[1];
+		        baseAssignValue(result, pair[0], pair[1]);
 		      }
 		      return result;
 		    }
@@ -16755,6 +16751,8 @@ function requireLodash () {
 		     * **Note:** JavaScript follows the IEEE-754 standard for resolving
 		     * floating-point values which can produce unexpected results.
 		     *
+		     * **Note:** If `lower` is greater than `upper`, the values are swapped.
+		     *
 		     * @static
 		     * @memberOf _
 		     * @since 0.7.0
@@ -16768,9 +16766,16 @@ function requireLodash () {
 		     * _.random(0, 5);
 		     * // => an integer between 0 and 5
 		     *
+		     * // when lower is greater than upper the values are swapped
+		     * _.random(5, 0);
+		     * // => an integer between 0 and 5
+		     *
 		     * _.random(5);
 		     * // => also an integer between 0 and 5
 		     *
+		     * _.random(-5);
+		     * // => an integer between -5 and 0
+		     *
 		     * _.random(5, true);
 		     * // => a floating-point number between 0 and 5
 		     *
@@ -17372,6 +17377,10 @@ function requireLodash () {
 		     * properties may be accessed as free variables in the template. If a setting
 		     * object is given, it takes precedence over `_.templateSettings` values.
 		     *
+		     * **Security:** `_.template` is insecure and should not be used. It will be
+		     * removed in Lodash v5. Avoid untrusted input. See
+		     * [threat model](https://github.com/lodash/lodash/blob/main/threat-model.md).
+		     *
 		     * **Note:** In the development build `_.template` utilizes
 		     * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)
 		     * for easier debugging.
@@ -17479,12 +17488,18 @@ function requireLodash () {
 		        options = undefined$1;
 		      }
 		      string = toString(string);
-		      options = assignInWith({}, options, settings, customDefaultsAssignIn);
+		      options = assignWith({}, options, settings, customDefaultsAssignIn);
 
-		      var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn),
+		      var imports = assignWith({}, options.imports, settings.imports, customDefaultsAssignIn),
 		          importsKeys = keys(imports),
 		          importsValues = baseValues(imports, importsKeys);
 
+		      arrayEach(importsKeys, function(key) {
+		        if (reForbiddenIdentifierChars.test(key)) {
+		          throw new Error(INVALID_TEMPL_IMPORTS_ERROR_TEXT);
+		        }
+		      });
+
 		      var isEscaping,
 		          isEvaluating,
 		          index = 0,
@@ -20911,6 +20926,7 @@ const DEFAULT_ENGINE_CONFIG = {
     isDrawing: false,
     isErasing: false,
     isWriting: false,
+    isWorkspaceLoading: false,
     isCtrlKeyPressed: false,
     isContextMenuVisible: false,
     contextMenuItems: [],
@@ -25490,7 +25506,7 @@ async function toPng(node, options = {}) {
     return canvas.toDataURL();
 }
 
-const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in var(--kritzel-loading-overlay-delay, 300ms) ease-out forwards;opacity:0}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return index.getElement(this); }
@@ -26802,6 +26818,7 @@ const KritzelEngine = class {
             await this._workspaceInitializationPromise;
             return;
         }
+        this.core.store.state.isWorkspaceLoading = true;
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
@@ -26813,6 +26830,7 @@ const KritzelEngine = class {
                 this._workspaceInitializationPromise = null;
                 this._workspaceInitializationTargetKey = null;
             }
+            this.core.store.state.isWorkspaceLoading = false;
         }
     }
     emitObjectsChange() {
@@ -26880,7 +26898,7 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (index.h(index.Host, null, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
+        return (index.h(index.Host, null, this.core.store.state.isWorkspaceLoading && (index.h("div", { class: "workspace-loading-overlay" }, "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (index.h("div", { key: object.id, id: object.id, class: "object", style: {
@@ -27031,14 +27049,16 @@ const KritzelEngine = class {
                 (() => {
                     const isSelectionGroup = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.state.objects?.localClientId;
+                    const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
                     const isRemoteSelection = isSelectionGroup && (
                     // Different user
                     (object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
-                        // Same user but different client (e.g. same account in two browser tabs)
-                        (object.clientId != null && localClientId != null && object.clientId !== localClientId));
+                        // Same user but different client that is still actively connected (e.g. same account on another device)
+                        (object.userId != null && this.core.user?.id != null && object.userId === this.core.user.id &&
+                            object.clientId != null && localClientId != null && object.clientId !== localClientId &&
+                            awarenessStates?.has(object.clientId) === true));
                     let remoteUserColor;
                     if (isRemoteSelection) {
-                        const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
                         if (awarenessStates) {
                             // Try direct lookup by clientId first (most precise)
                             if (isSelectionGroup && object.clientId != null) {
@@ -27641,7 +27661,7 @@ const KritzelLineEndings = class {
 };
 KritzelLineEndings.style = kritzelLineEndingsCss();
 
-const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
+const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
 
 const KritzelLoginDialog = class {
     constructor(hostRef) {
@@ -28539,7 +28559,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.77';
+const KRITZEL_VERSION = '0.1.78';
 
 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-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 

package/dist/cjs/kritzel-brush-style.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
+var index = require('./index-BRZ6e6oa.js');
 
 const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
 

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
+var index = require('./index-BRZ6e6oa.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/stencil.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
+var index = require('./index-BRZ6e6oa.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/{workspace.migrations-OULs44dI.js → workspace.migrations-sUPrO23c.js}

@@ -5054,7 +5054,8 @@ class ReplaceStep extends Step {
         return new ReplaceStep(this.from, this.from + this.slice.size, doc.slice(this.from, this.to));
     }
     map(mapping) {
-        let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
+        let to = mapping.mapResult(this.to, -1);
+        let from = this.from == this.to && ReplaceStep.MAP_BIAS < 0 ? to : mapping.mapResult(this.from, 1);
         if (from.deletedAcross && to.deletedAcross)
             return null;
         return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
@@ -5093,6 +5094,15 @@ class ReplaceStep extends Step {
         return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
     }
 }
+/**
+By default, for backwards compatibility, an inserting step
+mapped over an insertion at that same position fill move after
+the inserted content. In a collaborative editing situation, that
+can make redone insertions appear in unexpected places. You can
+set this to -1 to make such mapping keep the step before the
+insertion instead.
+*/
+ReplaceStep.MAP_BIAS = 1;
 Step.jsonID("replace", ReplaceStep);
 /**
 Replace a part of the document with a slice of content, but
@@ -6010,6 +6020,26 @@ function replaceRangeWith(tr, from, to, node) {
 }
 function deleteRange(tr, from, to) {
     let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
+    // When the deleted range spans from the start of one textblock to
+    // the start of another one, move out of the start of both blocks.
+    if ($from.parent.isTextblock && $to.parent.isTextblock && $from.start() != $to.start() &&
+        $from.parentOffset == 0 && $to.parentOffset == 0) {
+        let shared = $from.sharedDepth(to), isolated = false;
+        for (let d = $from.depth; d > shared; d--)
+            if ($from.node(d).type.spec.isolating)
+                isolated = true;
+        for (let d = $to.depth; d > shared; d--)
+            if ($to.node(d).type.spec.isolating)
+                isolated = true;
+        if (!isolated) {
+            for (let d = $from.depth; d > 0 && from == $from.start(d); d--)
+                from = $from.before(d);
+            for (let d = $to.depth; d > 0 && to == $to.start(d); d--)
+                to = $to.before(d);
+            $from = tr.doc.resolve(from);
+            $to = tr.doc.resolve(to);
+        }
+    }
     let covered = coveredDepths($from, $to);
     for (let i = 0; i < covered.length; i++) {
         let depth = covered[i], last = i == covered.length - 1;
@@ -10778,8 +10808,8 @@ class MouseDown {
         this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM : null;
         let { selection } = view.state;
         if (event.button == 0 &&
-            targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
-            selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos)
+            (targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
+                selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos))
             this.mightDrag = {
                 node: targetNode,
                 pos: targetPos,
@@ -11128,8 +11158,9 @@ class Dragging {
 }
 const dragCopyModifier = mac$3 ? "altKey" : "ctrlKey";
 function dragMoves(view, event) {
-    let moves = view.someProp("dragCopies", test => !test(event));
-    return moves != null ? moves : !event[dragCopyModifier];
+    let copy;
+    view.someProp("dragCopies", test => { copy = copy || test(event); });
+    return copy != null ? !copy : !event[dragCopyModifier];
 }
 handlers.dragstart = (view, _event) => {
     let event = _event;
@@ -11156,7 +11187,7 @@ handlers.dragstart = (view, _event) => {
     if (!event.dataTransfer.files.length || !chrome || chrome_version > 120)
         event.dataTransfer.clearData();
     event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
-    // See https://github.com/ProseMirror/prosemirror/issues/1156
+    // See https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1156
     event.dataTransfer.effectAllowed = "copyMove";
     if (!brokenClipboardAPI)
         event.dataTransfer.setData("text/plain", text);
@@ -12155,8 +12186,13 @@ class DOMObserver {
             for (let node of added)
                 if (node.nodeName == "BR" && node.parentNode) {
                     let after = node.nextSibling;
-                    if (after && after.nodeType == 1 && after.contentEditable == "false")
-                        node.parentNode.removeChild(node);
+                    while (after && after.nodeType == 1) {
+                        if (after.contentEditable == "false") {
+                            node.parentNode.removeChild(node);
+                            break;
+                        }
+                        after = after.firstChild;
+                    }
                 }
         }
         else if (gecko && added.length) {
@@ -12776,7 +12812,7 @@ class EditorView {
         this.pluginViews = [];
         /**
         Holds `true` when a hack node is needed in Firefox to prevent the
-        [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
+        [space is eaten issue](https://code.haverbeke.berlin/prosemirror/prosemirror/issues/651)
         @internal
         */
         this.requiresGeckoHackNode = false;
@@ -12994,12 +13030,12 @@ class EditorView {
     }
     updateDraggedNode(dragging, prev) {
         let sel = dragging.node, found = -1;
-        if (this.state.doc.nodeAt(sel.from) == sel.node) {
+        if (sel.from < this.state.doc.content.size && this.state.doc.nodeAt(sel.from) == sel.node) {
             found = sel.from;
         }
         else {
             let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
-            let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
+            let moved = movedPos > 0 && movedPos < this.state.doc.content.size && this.state.doc.nodeAt(movedPos);
             if (moved == sel.node)
                 found = movedPos;
         }

package/dist/collection/collection-manifest.json

@@ -47,7 +47,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.2",
+    "version": "4.43.3",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -35,11 +35,7 @@ export class KritzelEditor {
         showSyncProviderInfo: true,
         showMigrationInfo: true,
     };
-    user = {
-        id: `guest-1`,
-        displayName: 'Guest',
-        isGuest: false,
-    };
+    user;
     activeUsers;
     controls = [
         {
@@ -188,7 +184,15 @@ export class KritzelEditor {
         providers: [HocuspocusSyncProvider, IndexedDBSyncProvider]
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
-    loginConfig;
+    loginConfig = {
+        providers: [
+            {
+                label: 'Sign in with Google',
+                icon: 'google',
+                name: 'Google',
+            }
+        ]
+    };
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
     /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
@@ -702,7 +706,7 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'b52c23bf28392a0061034c0909aadb7abf4d86a7' }, h("div", { key: '7bf75101bef73a2c8481258060e3236a8ca939b4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '69adc1756e00ed56c9980e78929543ad4ecc7b0e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'd802fe454738919d9108a807eb379b2f31e94ab6', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '2d3ce8937285956d978f3947ffa86872e156b04d', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), h("kritzel-controls", { key: '6d9b0640b205143c7dc21572616624ef707cfe06', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c65f16c40d78d8e3eb585e870e414f496e816e82', class: "top-right-buttons" }, h("kritzel-settings", { key: 'a84d5de344011a32be1b4178acc3a5fff246d702', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '67748d0376f4e7ac39edfc61c1c2cd639664ad78', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1155b8784de2353ae208a2910844bad1e945a891', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'fb8951eed7f7f5c9117bb0027e9af1aae95088ed', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'd4288b1577082c207696331de4d9fcb1e749fa2a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '66f0990868bf034a172e6e8db3162a1af0637cf8', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'ce3ab2b6db71bf0a4998c16f04521ee39c1715b7', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'd3ec7461c2e6a8fcdac4ce13a51f80835888cb44', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (h(Host, { key: '6dbc3a8c64dd097ba82e46341b3fb97cbd0194db' }, h("div", { key: '26ceb62f59ad830fd651a1712f57e5d711e7c6f4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'afb4f5b87c5dc0a673444fb27930e43994df4e02', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f3c0f31841cb819917c3277852bc9b5ce291c09a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '8a9e57132e6b74ec812ee516dc7f0d5fc6c8a2e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), h("kritzel-controls", { key: '6caadf512a0208fecdb18b6d68b17daa522161a3', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e27e5f3965be2fd15c83b91470ef87c4031dd7a2', class: "top-right-buttons" }, h("kritzel-settings", { key: '57f8e75287402aecbb7740d46dfa15839de2169f', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '5ccf176d4fe1221c5d7597bd1c8537cf3324d3ee', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '44a334b808706e11163e89b91074ca4ea8ab4b18', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bcb3c966e630b1a8fc4ccd438fc8fbb11cd2b167', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'f1957e56257b7c565311e41b770579f7e2bb910d', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'd8c1d1b51cf87725d68aaf4457b88828986a40dc', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'f5840e7f56cf6897ec28b0f28d9b204037bf3348', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cfdcc3d5e7a5e29b0a352f0d4423ae79195dbf69', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -924,8 +928,7 @@ export class KritzelEditor {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{\r\n    id: `guest-1`,\r\n    displayName: 'Guest',\r\n    isGuest: false,\r\n  }"
+                "setter": false
             },
             "activeUsers": {
                 "type": "unknown",
@@ -1136,7 +1139,8 @@ export class KritzelEditor {
                     "text": "Optional login configuration. When provided, a \"Sign in\" button is shown that opens a login dialog with the configured providers."
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "{\r\n    providers: [\r\n      {\r\n        label: 'Sign in with Google',\r\n        icon: 'google',\r\n        name: 'Google',\r\n      }\r\n    ]\r\n  }"
             },
             "editorId": {
                 "type": "string",

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

@@ -22,6 +22,27 @@ p, h1, h2, h3, h4, h5, h6, blockquote, pre {
   padding: 0;
 }
 
+.workspace-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));
+  color: var(--kritzel-loading-overlay-color, #333);
+  font-size: 1.25rem;
+  pointer-events: all;
+  animation: workspace-loading-fade-in var(--kritzel-loading-overlay-delay, 300ms) ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes workspace-loading-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
 .debug-panel {
   position: absolute;
   pointer-events: none;