kritzel-stencil 0.1.76 → 0.1.78

package/dist/cjs/{workspace.migrations-DkmVO6dE.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;
         }
@@ -18492,6 +18528,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     snapshotHeight = 0;
     snapshotTranslateX = 0;
     snapshotTranslateY = 0;
+    clientId;
     minX;
     maxX;
     minY;
@@ -18564,6 +18601,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
+        object.clientId = core.store.state.objects?.localClientId ?? undefined;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         // Initialize styling with theme-aware defaults
@@ -25224,6 +25262,334 @@ class HocuspocusProvider extends EventEmitter {
     }
 }
 
+/**
+ * Hocuspocus sync provider for real-time collaboration
+ * Supports multiplexing - multiple documents can share the same WebSocket connection
+ */
+class HocuspocusSyncProvider {
+    type = 'network';
+    provider;
+    isConnected = false;
+    isSynced = false;
+    usesSharedSocket = false;
+    isDestroyed = false;
+    connectTimeout = null;
+    pendingConnectReject = null;
+    connectionTimeoutMs;
+    _connectionStatus = 'disconnected';
+    visibilityHandler = null;
+    onlineHandler = null;
+    get awareness() {
+        return this.provider.awareness;
+    }
+    get connectionStatus() {
+        return this._connectionStatus;
+    }
+    // Static shared WebSocket instance for multiplexing
+    static sharedWebSocketProvider = null;
+    constructor(docName, doc, options) {
+        const name = options?.name || docName;
+        const url = options?.url || 'ws://localhost:1234';
+        this.connectionTimeoutMs = options?.connectionTimeout ?? 10000;
+        // Use provided websocketProvider or the static shared one
+        const websocketProvider = options?.websocketProvider || HocuspocusSyncProvider.sharedWebSocketProvider;
+        // Build reconnect config from options
+        const reconnectConfig = {};
+        if (options?.delay !== undefined)
+            reconnectConfig.delay = options.delay;
+        if (options?.factor !== undefined)
+            reconnectConfig.factor = options.factor;
+        if (options?.maxAttempts !== undefined)
+            reconnectConfig.maxAttempts = options.maxAttempts;
+        if (options?.minDelay !== undefined)
+            reconnectConfig.minDelay = options.minDelay;
+        if (options?.maxDelay !== undefined)
+            reconnectConfig.maxDelay = options.maxDelay;
+        const onConnect = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isConnected = true;
+            this._connectionStatus = 'connected';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus connected: ${name}`);
+            }
+            if (options?.onConnect) {
+                options.onConnect();
+            }
+        };
+        const onDisconnect = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isConnected = false;
+            this.isSynced = false;
+            this._connectionStatus = 'disconnected';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus disconnected: ${name}`);
+            }
+            if (options?.onDisconnect) {
+                options.onDisconnect();
+            }
+        };
+        const onSynced = () => {
+            if (this.isDestroyed) {
+                return;
+            }
+            this.isSynced = true;
+            this._connectionStatus = 'synced';
+            if (!options?.quiet) {
+                console.info(`Hocuspocus synced: ${name}`);
+            }
+            if (options?.onSynced) {
+                options.onSynced();
+            }
+        };
+        const onStatus = (data) => {
+            if (this.isDestroyed) {
+                return;
+            }
+            if (data.status === 'connecting') {
+                this._connectionStatus = 'connecting';
+            }
+            if (options?.onStatus) {
+                options.onStatus(data);
+            }
+        };
+        if (websocketProvider) {
+            // Multiplexing mode - use shared WebSocket connection
+            this.usesSharedSocket = true;
+            const config = {
+                websocketProvider,
+                name,
+                document: doc,
+                token: options?.token || null,
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
+            };
+            // Add optional settings
+            if (options?.forceSyncInterval !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options?.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            this.provider = new HocuspocusProvider(config);
+            // Must call attach() explicitly when using shared socket
+            this.provider.attach();
+            if (!options?.quiet) {
+                console.info(`Hocuspocus Provider initialized (multiplexed): ${name}`);
+            }
+        }
+        else {
+            // Standalone mode - create own WebSocket connection
+            this.usesSharedSocket = false;
+            const config = {
+                url,
+                name,
+                document: doc,
+                token: options?.token || null,
+                autoConnect: false,
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
+            };
+            // Add optional settings
+            if (options?.forceSyncInterval !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options?.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            if (options?.WebSocketPolyfill) {
+                config.WebSocketPolyfill = options.WebSocketPolyfill;
+            }
+            this.provider = new HocuspocusProvider(config);
+            if (!options?.quiet) {
+                console.info(`Hocuspocus Provider initialized: ${url}/${name}`);
+            }
+        }
+        this.setupBrowserEventListeners();
+    }
+    setupBrowserEventListeners() {
+        if (typeof document !== 'undefined') {
+            this.visibilityHandler = () => {
+                if (document.visibilityState === 'visible' && !this.isConnected && !this.isDestroyed) {
+                    this.provider.connect();
+                }
+            };
+            document.addEventListener('visibilitychange', this.visibilityHandler);
+        }
+        if (typeof window !== 'undefined') {
+            this.onlineHandler = () => {
+                if (!this.isConnected && !this.isDestroyed) {
+                    this.provider.connect();
+                }
+            };
+            window.addEventListener('online', this.onlineHandler);
+        }
+    }
+    removeBrowserEventListeners() {
+        if (this.visibilityHandler && typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this.visibilityHandler);
+            this.visibilityHandler = null;
+        }
+        if (this.onlineHandler && typeof window !== 'undefined') {
+            window.removeEventListener('online', this.onlineHandler);
+            this.onlineHandler = null;
+        }
+    }
+    /**
+     * Create a shared WebSocket connection for multiplexing
+     * Call this once to create a shared connection that multiple providers can use
+     */
+    static createSharedWebSocket(options) {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            console.warn('Shared WebSocket already exists. Returning existing instance.');
+            return HocuspocusSyncProvider.sharedWebSocketProvider;
+        }
+        const config = {
+            url: options.url,
+        };
+        if (options.WebSocketPolyfill) {
+            config.WebSocketPolyfill = options.WebSocketPolyfill;
+        }
+        if (options.onConnect) {
+            config.onConnect = options.onConnect;
+        }
+        if (options.onDisconnect) {
+            config.onDisconnect = options.onDisconnect;
+        }
+        if (options.onStatus) {
+            config.onStatus = options.onStatus;
+        }
+        HocuspocusSyncProvider.sharedWebSocketProvider = new HocuspocusProviderWebsocket(config);
+        console.info(`Shared Hocuspocus WebSocket created: ${options.url}`);
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Destroy the shared WebSocket connection
+     * Call this when you're done with all multiplexed providers
+     */
+    static destroySharedWebSocket() {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            HocuspocusSyncProvider.sharedWebSocketProvider.destroy();
+            HocuspocusSyncProvider.sharedWebSocketProvider = null;
+            console.info('Shared Hocuspocus WebSocket destroyed');
+        }
+    }
+    /**
+     * Get the shared WebSocket provider instance (if it exists)
+     */
+    static getSharedWebSocket() {
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Static factory method for creating HocuspocusSyncProvider with configuration options
+     * Returns a ProviderFactory that can be used in sync configuration
+     */
+    static with(options) {
+        return {
+            create: (docName, doc, runtimeOptions) => {
+                const mergedOptions = runtimeOptions ? { ...options, ...runtimeOptions } : options;
+                return new HocuspocusSyncProvider(docName, doc, mergedOptions);
+            },
+        };
+    }
+    async connect() {
+        if (this.isSynced || this.isDestroyed) {
+            return;
+        }
+        this._connectionStatus = 'connecting';
+        return new Promise((resolve, reject) => {
+            // Store reject function so we can cancel the connection if destroyed
+            this.pendingConnectReject = reject;
+            this.connectTimeout = setTimeout(() => {
+                this.pendingConnectReject = null;
+                this.connectTimeout = null;
+                reject(new Error('Hocuspocus connection timeout'));
+            }, this.connectionTimeoutMs);
+            const syncHandler = () => {
+                if (this.connectTimeout) {
+                    clearTimeout(this.connectTimeout);
+                    this.connectTimeout = null;
+                }
+                this.pendingConnectReject = null;
+                this.provider.off('synced', syncHandler);
+                if (!this.isDestroyed) {
+                    resolve();
+                }
+            };
+            this.provider.on('synced', syncHandler);
+            // If already synced, resolve immediately
+            if (this.provider.isSynced) {
+                if (this.connectTimeout) {
+                    clearTimeout(this.connectTimeout);
+                    this.connectTimeout = null;
+                }
+                this.pendingConnectReject = null;
+                this.provider.off('synced', syncHandler);
+                resolve();
+                return;
+            }
+            // Connect if not already connected (standalone mode only)
+            if (!this.isConnected && !this.usesSharedSocket) {
+                this.provider.connect();
+            }
+        });
+    }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
+    disconnect() {
+        // Cancel any pending connection attempt
+        if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+        }
+        if (this.pendingConnectReject) {
+            this.pendingConnectReject = null; // Don't reject, just abandon the promise
+        }
+        if (this.provider) {
+            if (this.usesSharedSocket) {
+                // Detach from shared socket instead of disconnecting
+                this.provider.detach();
+            }
+            else {
+                this.provider.disconnect();
+            }
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+        this._connectionStatus = 'disconnected';
+    }
+    destroy() {
+        // Mark as destroyed first to prevent any callbacks from doing work
+        this.isDestroyed = true;
+        // Cancel any pending connection attempt
+        if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+        }
+        if (this.pendingConnectReject) {
+            this.pendingConnectReject = null; // Don't reject, just abandon the promise
+        }
+        this.removeBrowserEventListeners();
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+        this._connectionStatus = 'disconnected';
+    }
+}
+
 /** Current version of the workspace export format */
 const WORKSPACE_EXPORT_VERSION = '1.2.0';
 /**
@@ -26882,8 +27248,7 @@ exports.DEFAULT_BRUSH_CONFIG = DEFAULT_BRUSH_CONFIG;
 exports.DEFAULT_COLOR_PALETTE = DEFAULT_COLOR_PALETTE;
 exports.DEFAULT_LINE_TOOL_CONFIG = DEFAULT_LINE_TOOL_CONFIG;
 exports.DEFAULT_TEXT_CONFIG = DEFAULT_TEXT_CONFIG;
-exports.HocuspocusProvider = HocuspocusProvider;
-exports.HocuspocusProviderWebsocket = HocuspocusProviderWebsocket;
+exports.HocuspocusSyncProvider = HocuspocusSyncProvider;
 exports.IndexedDBSyncProvider = IndexedDBSyncProvider;
 exports.KritzelAnchorManager = KritzelAnchorManager;
 exports.KritzelBaseHandler = KritzelBaseHandler;

package/dist/collection/classes/objects/selection-group.class.js

@@ -20,6 +20,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     snapshotHeight = 0;
     snapshotTranslateX = 0;
     snapshotTranslateY = 0;
+    clientId;
     minX;
     maxX;
     minY;
@@ -92,6 +93,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
+        object.clientId = core.store.state.objects?.localClientId ?? undefined;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         // Initialize styling with theme-aware defaults

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-awareness-cursors/kritzel-awareness-cursors.css

@@ -6,7 +6,7 @@
   width: 100vw;
   height: 100vh;
   pointer-events: none;
-  z-index: 9500;
+  z-index: 1;
 }
 
 .awareness-cursor {
@@ -74,6 +74,11 @@
 .edge-arrow {
   position: absolute;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+  transition: opacity 300ms ease;
+}
+
+.edge-arrow.stale {
+  opacity: 0;
 }
 
 .edge-label {

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js

@@ -78,6 +78,9 @@ export class KritzelAwarenessCursors {
                 updated.delete(clientId);
                 changed = true;
             }
+            else if (!changed && now - cursor.lastCursorMove > STALE_THRESHOLD_MS) {
+                changed = true;
+            }
         }
         if (changed) {
             this.remoteCursors = updated;
@@ -182,7 +185,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: '4dd962322c7e955b9038c55cb10f8ffda1e0b246' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '5a28def6e024249c4309c087502cde9f219f5421' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -258,7 +261,7 @@ export class KritzelAwarenessCursors {
         const displayName = this.getUserDisplayName(cursor.user);
         return (h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
                 transform: `translate(${clamped.x}px, ${clamped.y}px)`,
-            } }, h("svg", { class: "edge-arrow", width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "edge-label", style: {
+            } }, h("svg", { class: { 'edge-arrow': true, stale }, width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "edge-label", style: {
                 backgroundColor: color,
                 transform: `translate(${labelX}px, ${labelY}px)`,
             } }, displayName)));

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

@@ -34,6 +34,7 @@ kritzel-controls.keyboard-open {
   display: flex;
   align-items: flex-start;
   gap: 8px;
+  z-index: 10000;
 }
 
 .top-right-buttons {
@@ -43,6 +44,7 @@ kritzel-controls.keyboard-open {
   display: flex;
   align-items: center;
   gap: 8px;
+  z-index: 10000;
 }
 
 .top-right-button {

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

@@ -16,7 +16,7 @@ import { DEFAULT_SHAPE_CONFIG } from "../../../configs/default-shape-tool.config
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
-import { IndexedDBSyncProvider } from "../../..";
+import { HocuspocusSyncProvider, IndexedDBSyncProvider } from "../../..";
 import { KritzelSelectionGroup } from "../../../classes/objects/selection-group.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 export class KritzelEditor {
@@ -180,10 +180,19 @@ export class KritzelEditor {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [IndexedDBSyncProvider]
+        appStateId: 'kritzel-app-test',
+        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. */
@@ -697,7 +706,7 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'd1944655652eb2939e3696ed70050baaca0871e2' }, h("div", { key: 'ce5dfd9b8f8d9927e9a6ace4056f9053163c7e0a', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'e127a667c6e4e853bb4f0c9ffd0edaa6d80d9dfa', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'a9abb378f3c79f356d2164cbddf6badba10188a8', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'c5f764580f3623eeb9381e54769a891a48c04620', 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: '2479b6979d5b2b6c55a873bd1d8468b5fd967f72', 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: 'ec6ac72ba154abe0738259464f20cae9e7dbdd9e', class: "top-right-buttons" }, h("kritzel-settings", { key: 'f68f791d673b30331e55f358b9c71b3e2a9a8388', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'dfe5a051caccee504df4f347705303fa1f812556', 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: '48983a14d3902cd238cf0d9ed302ed561a655a9a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '589bdc895741a2d17f60c4b549d14fe8fff74c17', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '50414a9d7ade623678c767ce63c49f5e99336bed', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'db3069ee0b093acd238750df81c6f426139c9b87', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'e16057838f00b2c3f239e794b4310bd2690d16e2', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'a6d1fc06c983542c6af95e7bb4b2b2d522a03605', 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() {
@@ -1106,7 +1115,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    providers: [IndexedDBSyncProvider]\r\n  }"
+                "defaultValue": "{\r\n    appStateId: 'kritzel-app-test',\r\n    providers: [HocuspocusSyncProvider, IndexedDBSyncProvider]\r\n  }"
             },
             "loginConfig": {
                 "type": "unknown",
@@ -1130,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",