kritzel-stencil 0.1.76 → 0.1.77

package/dist/components/{p-2OYw6GJ7.js → p-_LbtY-TA.js}

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-pebXO4LU.js";import{h as a,d as l,e as n,g as h,f as p}from"./p-CJ2eHeoV.js";import{a as c}from"./p-CjazGGq3.js";import{d}from"./p-C1uR_ZNW.js";import{d as m}from"./p-BEJQ2kP7.js";import{d as f}from"./p-GYI7sDxr.js";import{d as y}from"./p-HLbqRJGs.js";import{d as u}from"./p-TyR-YTXm.js";import{d as g}from"./p-CZhyKp-f.js";import{d as k}from"./p-CHmi1QWx.js";import{d as z}from"./p-CFhp1W9F.js";import{d as C}from"./p-C7SBI_0T.js";import{d as x}from"./p-JdNoaqqb.js";import{d as b}from"./p-BiouZo1q.js";class v{static getToolConfig(e){return e instanceof a?e.getToolConfig():e instanceof l?{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"}]}:e instanceof n?{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]}:e instanceof h?{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]}:e instanceof p?{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]}:null}}const E=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=v.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=v.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;onThemeChange(){this.emitDisplayValues()}toolChange;displayValuesChange;config;palette=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof a&&(this.config=v.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}componentWillLoad(){this.config=v.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues())}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:c.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof p&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],config:[32],palette:[32],currentOpacity:[32],updateTrigger:[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}]);function P(){"undefined"!=typeof customElements&&["kritzel-tool-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),E);break;case"kritzel-color":customElements.get(r(e))||d();break;case"kritzel-color-palette":customElements.get(r(e))||m();break;case"kritzel-dropdown":customElements.get(r(e))||f();break;case"kritzel-font":customElements.get(r(e))||y();break;case"kritzel-font-family":customElements.get(r(e))||u();break;case"kritzel-font-size":customElements.get(r(e))||g();break;case"kritzel-icon":customElements.get(r(e))||k();break;case"kritzel-line-endings":customElements.get(r(e))||z();break;case"kritzel-opacity-slider":customElements.get(r(e))||C();break;case"kritzel-shape-fill":customElements.get(r(e))||x();break;case"kritzel-stroke-size":customElements.get(r(e))||b()}}))}export{v as K,E as a,P as d}
+import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-pebXO4LU.js";import{h as a,d as l,e as n,g as h,f as p}from"./p-_CqLIbO6.js";import{a as c}from"./p-CjazGGq3.js";import{d}from"./p-C1uR_ZNW.js";import{d as m}from"./p-BEJQ2kP7.js";import{d as f}from"./p-GYI7sDxr.js";import{d as y}from"./p-HLbqRJGs.js";import{d as u}from"./p-TyR-YTXm.js";import{d as g}from"./p-CZhyKp-f.js";import{d as k}from"./p-CHmi1QWx.js";import{d as z}from"./p-CFhp1W9F.js";import{d as C}from"./p-C7SBI_0T.js";import{d as x}from"./p-JdNoaqqb.js";import{d as b}from"./p-BiouZo1q.js";class v{static getToolConfig(e){return e instanceof a?e.getToolConfig():e instanceof l?{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"}]}:e instanceof n?{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]}:e instanceof h?{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]}:e instanceof p?{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]}:null}}const E=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=v.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=v.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;onThemeChange(){this.emitDisplayValues()}toolChange;displayValuesChange;config;palette=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof a&&(this.config=v.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}componentWillLoad(){this.config=v.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues())}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:c.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof p&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],config:[32],palette:[32],currentOpacity:[32],updateTrigger:[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}]);function P(){"undefined"!=typeof customElements&&["kritzel-tool-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),E);break;case"kritzel-color":customElements.get(r(e))||d();break;case"kritzel-color-palette":customElements.get(r(e))||m();break;case"kritzel-dropdown":customElements.get(r(e))||f();break;case"kritzel-font":customElements.get(r(e))||y();break;case"kritzel-font-family":customElements.get(r(e))||u();break;case"kritzel-font-size":customElements.get(r(e))||g();break;case"kritzel-icon":customElements.get(r(e))||k();break;case"kritzel-line-endings":customElements.get(r(e))||z();break;case"kritzel-opacity-slider":customElements.get(r(e))||C();break;case"kritzel-shape-fill":customElements.get(r(e))||x();break;case"kritzel-stroke-size":customElements.get(r(e))||b()}}))}export{v as K,E as a,P as d}

package/dist/esm/index.js

@@ -1,5 +1,4 @@
-import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './workspace.migrations-D48_Bqvh.js';
-export { A as APP_STATE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, w as CURRENT_WORKSPACE_SCHEMA_VERSION, D as DEFAULT_BRUSH_CONFIG, s as DEFAULT_LINE_TOOL_CONFIG, r as DEFAULT_TEXT_CONFIG, I as IndexedDBSyncProvider, v as KritzelAlignment, p as KritzelAnchorManager, g as KritzelBrushTool, m as KritzelCursorHelper, i as KritzelEraserTool, e as KritzelGroup, c as KritzelImage, j as KritzelImageTool, d as KritzelLine, h as KritzelLineTool, b as KritzelPath, n as KritzelSelectionTool, f as KritzelShape, l as KritzelShapeTool, K as KritzelText, k as KritzelTextTool, q as KritzelThemeManager, o as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, y as WORKSPACE_MIGRATIONS, u as darkTheme, t as lightTheme, x as runMigrations } from './workspace.migrations-D48_Bqvh.js';
+export { A as APP_STATE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, v as CURRENT_WORKSPACE_SCHEMA_VERSION, D as DEFAULT_BRUSH_CONFIG, r as DEFAULT_LINE_TOOL_CONFIG, q as DEFAULT_TEXT_CONFIG, H as HocuspocusSyncProvider, I as IndexedDBSyncProvider, u as KritzelAlignment, o as KritzelAnchorManager, f as KritzelBrushTool, l as KritzelCursorHelper, h as KritzelEraserTool, d as KritzelGroup, b as KritzelImage, i as KritzelImageTool, c as KritzelLine, g as KritzelLineTool, a as KritzelPath, m as KritzelSelectionTool, e as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, p as KritzelThemeManager, n as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, x as WORKSPACE_MIGRATIONS, t as darkTheme, s as lightTheme, w as runMigrations } from './workspace.migrations-D6whgl7G.js';
 import * as Y from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
 import 'y-indexeddb';
@@ -536,332 +535,4 @@ 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 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';
-    }
-}
-
-export { BroadcastSyncProvider, HocuspocusSyncProvider, WebSocketSyncProvider };
+export { BroadcastSyncProvider, WebSocketSyncProvider };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-MV-81ybv.js';
-import { b as KritzelPath, d as KritzelLine, z as KritzelColorHelper, n as KritzelSelectionTool, g as KritzelBrushTool, h as KritzelLineTool, l as KritzelShapeTool, k as KritzelTextTool, B as KritzelDevicesHelper, E as KritzelMouseButton, F as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, i as KritzelEraserTool, s as DEFAULT_LINE_TOOL_CONFIG, r as DEFAULT_TEXT_CONFIG, j as KritzelImageTool, v as KritzelAlignment, I as IndexedDBSyncProvider, G as KritzelSelectionGroup, J as KritzelSelectionBox, L as KritzelIconRegistry, M as KritzelKeyboardHelper, N as KritzelBaseHandler, O as KritzelToolRegistry, P as KritzelBaseObject, o as KritzelWorkspace, e as KritzelGroup, c as KritzelImage, f as KritzelShape, K as KritzelText, x as runMigrations, w as CURRENT_WORKSPACE_SCHEMA_VERSION, y as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, A as APP_STATE_MIGRATIONS, Q as ObjectHelper, m as KritzelCursorHelper, p as KritzelAnchorManager, q as KritzelThemeManager, R as KritzelClassHelper, T as KritzelEventHelper, U as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-D48_Bqvh.js';
+import { a as KritzelPath, c as KritzelLine, y as KritzelColorHelper, m as KritzelSelectionTool, f as KritzelBrushTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, z as KritzelDevicesHelper, B as KritzelMouseButton, E as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, h as KritzelEraserTool, r as DEFAULT_LINE_TOOL_CONFIG, q as DEFAULT_TEXT_CONFIG, i as KritzelImageTool, u as KritzelAlignment, H as HocuspocusSyncProvider, I as IndexedDBSyncProvider, F as KritzelSelectionGroup, G as KritzelSelectionBox, J as KritzelIconRegistry, L as KritzelKeyboardHelper, M as KritzelBaseHandler, N as KritzelToolRegistry, O as KritzelBaseObject, n as KritzelWorkspace, d as KritzelGroup, b as KritzelImage, e as KritzelShape, K as KritzelText, w as runMigrations, v as CURRENT_WORKSPACE_SCHEMA_VERSION, x as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, A as APP_STATE_MIGRATIONS, P as ObjectHelper, l as KritzelCursorHelper, o as KritzelAnchorManager, p as KritzelThemeManager, Q as KritzelClassHelper, R as KritzelEventHelper, T as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-D6whgl7G.js';
 import * as Y from 'yjs';
 import 'y-websocket';
 import 'y-indexeddb';
@@ -154,7 +154,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;
@@ -236,6 +236,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;
@@ -331,7 +334,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         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
@@ -407,7 +410,7 @@ const KritzelAwarenessCursors = class {
         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)));
@@ -1832,7 +1835,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) {
@@ -1866,7 +1869,11 @@ const KritzelEditor = class {
         showSyncProviderInfo: true,
         showMigrationInfo: true,
     };
-    user;
+    user = {
+        id: `guest-1`,
+        displayName: 'Guest',
+        isGuest: false,
+    };
     activeUsers;
     controls = [
         {
@@ -2011,7 +2018,8 @@ const KritzelEditor = class {
     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;
@@ -2528,7 +2536,7 @@ const KritzelEditor = class {
         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: '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 })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -26999,18 +27007,28 @@ const KritzelEngine = class {
                     zIndex: (object.zIndex + 2).toString(),
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
-                    const isRemoteSelection = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
-                        object.userId != null &&
-                        this.core.user?.id != null &&
-                        object.userId !== this.core.user.id;
+                    const isSelectionGroup = 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;
+                                    }
                                 }
                             }
                         }
@@ -28499,7 +28517,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)}`;
 
@@ -29344,7 +29362,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) {