kritzel-stencil 0.1.76 → 0.1.77

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-DkmVO6dE.js');
+var workspace_migrations = require('./workspace.migrations-OULs44dI.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');
@@ -557,340 +557,13 @@ class WebSocketSyncProvider {
     }
 }
 
-/**
- * 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 workspace_migrations.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 workspace_migrations.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 workspace_migrations.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';
-    }
-}
-
 exports.APP_STATE_MIGRATIONS = workspace_migrations.APP_STATE_MIGRATIONS;
 exports.CURRENT_APP_STATE_SCHEMA_VERSION = workspace_migrations.CURRENT_APP_STATE_SCHEMA_VERSION;
 exports.CURRENT_WORKSPACE_SCHEMA_VERSION = workspace_migrations.CURRENT_WORKSPACE_SCHEMA_VERSION;
 exports.DEFAULT_BRUSH_CONFIG = workspace_migrations.DEFAULT_BRUSH_CONFIG;
 exports.DEFAULT_LINE_TOOL_CONFIG = workspace_migrations.DEFAULT_LINE_TOOL_CONFIG;
 exports.DEFAULT_TEXT_CONFIG = workspace_migrations.DEFAULT_TEXT_CONFIG;
+exports.HocuspocusSyncProvider = workspace_migrations.HocuspocusSyncProvider;
 exports.IndexedDBSyncProvider = workspace_migrations.IndexedDBSyncProvider;
 Object.defineProperty(exports, "KritzelAlignment", {
   enumerable: true,
@@ -923,5 +596,4 @@ exports.darkTheme = workspace_migrations.darkTheme;
 exports.lightTheme = workspace_migrations.lightTheme;
 exports.runMigrations = workspace_migrations.runMigrations;
 exports.BroadcastSyncProvider = BroadcastSyncProvider;
-exports.HocuspocusSyncProvider = HocuspocusSyncProvider;
 exports.WebSocketSyncProvider = WebSocketSyncProvider;

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-DkmVO6dE.js');
+var workspace_migrations = require('./workspace.migrations-OULs44dI.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -176,7 +176,7 @@ const KritzelAvatar = class {
 };
 KritzelAvatar.style = kritzelAvatarCss();
 
-const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9500}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3))}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.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{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
 
 const STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -258,6 +258,9 @@ const KritzelAwarenessCursors = class {
                 updated.delete(clientId);
                 changed = true;
             }
+            else if (!changed && now - cursor.lastCursorMove > STALE_THRESHOLD_MS) {
+                changed = true;
+            }
         }
         if (changed) {
             this.remoteCursors = updated;
@@ -353,7 +356,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: '4dd962322c7e955b9038c55cb10f8ffda1e0b246' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '5a28def6e024249c4309c087502cde9f219f5421' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -429,7 +432,7 @@ const KritzelAwarenessCursors = class {
         const displayName = this.getUserDisplayName(cursor.user);
         return (index.h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
                 transform: `translate(${clamped.x}px, ${clamped.y}px)`,
-            } }, index.h("svg", { class: "edge-arrow", width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, index.h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "edge-label", style: {
+            } }, index.h("svg", { class: { 'edge-arrow': true, stale }, width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, index.h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "edge-label", style: {
                 backgroundColor: color,
                 transform: `translate(${labelX}px, ${labelY}px)`,
             } }, displayName)));
@@ -1854,7 +1857,7 @@ const DEFAULT_SHAPE_CONFIG = {
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
-const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px;z-index:10000}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px;z-index:10000}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -1888,7 +1891,11 @@ const KritzelEditor = class {
         showSyncProviderInfo: true,
         showMigrationInfo: true,
     };
-    user;
+    user = {
+        id: `guest-1`,
+        displayName: 'Guest',
+        isGuest: false,
+    };
     activeUsers;
     controls = [
         {
@@ -2033,7 +2040,8 @@ const KritzelEditor = class {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [workspace_migrations.IndexedDBSyncProvider]
+        appStateId: 'kritzel-app-test',
+        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;
@@ -2550,7 +2558,7 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'd1944655652eb2939e3696ed70050baaca0871e2' }, index.h("div", { key: 'ce5dfd9b8f8d9927e9a6ace4056f9053163c7e0a', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'e127a667c6e4e853bb4f0c9ffd0edaa6d80d9dfa', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'a9abb378f3c79f356d2164cbddf6badba10188a8', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.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) }), index.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) }), index.h("div", { key: 'ec6ac72ba154abe0738259464f20cae9e7dbdd9e', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'f68f791d673b30331e55f358b9c71b3e2a9a8388', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.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) }), index.h("kritzel-active-users", { key: '48983a14d3902cd238cf0d9ed302ed561a655a9a', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '589bdc895741a2d17f60c4b549d14fe8fff74c17', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: '50414a9d7ade623678c767ce63c49f5e99336bed', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'db3069ee0b093acd238750df81c6f426139c9b87', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'e16057838f00b2c3f239e794b4310bd2690d16e2', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.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 (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 })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -27021,18 +27029,28 @@ const KritzelEngine = class {
                     zIndex: (object.zIndex + 2).toString(),
                 } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
-                    const isRemoteSelection = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
-                        object.userId != null &&
-                        this.core.user?.id != null &&
-                        object.userId !== this.core.user.id;
+                    const isSelectionGroup = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
+                    const localClientId = this.core.store.state.objects?.localClientId;
+                    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));
                     let remoteUserColor;
                     if (isRemoteSelection) {
                         const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
                         if (awarenessStates) {
-                            for (const state of awarenessStates.values()) {
-                                if (state.user?.id === object.userId) {
-                                    remoteUserColor = state.user.color;
-                                    break;
+                            // Try direct lookup by clientId first (most precise)
+                            if (isSelectionGroup && object.clientId != null) {
+                                remoteUserColor = awarenessStates.get(object.clientId)?.user?.color;
+                            }
+                            // Fall back to userId match (for selection groups without clientId)
+                            if (!remoteUserColor) {
+                                for (const state of awarenessStates.values()) {
+                                    if (state.user?.id === object.userId) {
+                                        remoteUserColor = state.user.color;
+                                        break;
+                                    }
                                 }
                             }
                         }
@@ -28521,7 +28539,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.76';
+const KRITZEL_VERSION = '0.1.77';
 
 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)}`;
 
@@ -29366,7 +29384,7 @@ const KritzelTooltip = class {
 };
 KritzelTooltip.style = kritzelTooltipCss();
 
-const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
+const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:10000}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
 
 const KritzelUtilityPanel = class {
     constructor(hostRef) {