kritzel-stencil 0.1.74 → 0.1.76

package/dist/components/p-xNwOWoiT.js

@@ -0,0 +1 @@
+import{p as t,H as e,h as s,d as r,t as o}from"./p-pebXO4LU.js";import{K as n,a as i}from"./p-DXpYcAnT.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;componentDidLoad(){this.core.store.state.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.core.store.state.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3)}disconnectedCallback(){this.cleanupIntervalId&&clearInterval(this.cleanupIntervalId),null!==this.objectChangeRafId&&cancelAnimationFrame(this.objectChangeRafId)}handleAwarenessChange(t){const e=this.core.store.state.objects?.localClientId,s=Date.now(),r=new Map(this.remoteCursors),o=new Set;t.forEach(((t,n)=>{if(n===e)return;if(!t.user)return;o.add(n);const i=t.user,a=t.cursor,l=t.activeObjectId||null,c=t.selectionBox||null,d=r.get(n);r.set(n,{clientId:n,user:i,cursor:a,activeObjectId:l,selectionBox:c,lastUpdated:s,lastCursorMove:!d||!d.cursor!=!a||a&&d.cursor&&(a.x!==d.cursor.x||a.y!==d.cursor.y)?s:d?.lastCursorMove??s})}));for(const t of r.keys())o.has(t)||r.delete(t);this.remoteCursors=r}cleanupStaleCursors(){const t=Date.now();let e=!1;const s=new Map(this.remoteCursors);for(const[r,o]of s)t-o.lastUpdated>3e4&&(s.delete(r),e=!0);e&&(this.remoteCursors=s)}isStale(t){return Date.now()-t.lastCursorMove>1e4}hasActiveDrawingCursors(){for(const t of this.remoteCursors.values())if(t.activeObjectId)return!0;return!1}handleRemoteObjectChange(){this.hasActiveDrawingCursors()&&null===this.objectChangeRafId&&(this.objectChangeRafId=requestAnimationFrame((()=>{this.objectChangeRafId=null,this.objectVersion++})))}getActiveObjectTip(t){const e=this.core.store.state.objects?.findById(t);if(!e)return null;if(e instanceof n&&!e.isCompleted){const t=e.points[e.points.length-1];return t?{x:(t[0]-e.x)/e.scale+e.translateX,y:(t[1]-e.y)/e.scale+e.translateY}:null}return e instanceof i&&!e.isCompleted?{x:(e.endX-e.x)/e.scale+e.translateX,y:(e.endY-e.y)/e.scale+e.translateY}:null}worldToScreen(t,e){const{scale:s,translateX:r,translateY:o}=this.core.store.state;return{x:t*s+r,y:e*s+o}}isInViewport(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state;return t>=0&&t<=s&&e>=0&&e<=r}clampToEdge(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state,o=this.edgeIndicatorPadding,n=Math.max(o,Math.min(s-o,t)),i=Math.max(o,Math.min(r-o,e)),a=n-o,l=s-o-n,c=i-o;let d="top";const h=Math.min(a,l,c,r-o-i);return d=h===a?"left":h===l?"right":h===c?"top":"bottom",{x:n,y:i,angle:Math.atan2(e-i,t-n),edge:d}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}render(){const t=Array.from(this.remoteCursors.values());return s(r,{key:"4dd962322c7e955b9038c55cb10f8ffda1e0b246"},t.map((t=>{if(!t.cursor)return null;let e,s=!1;if(t.activeObjectId){const r=this.getActiveObjectTip(t.activeObjectId);r?(s=!0,e=this.worldToScreen(r.x,r.y)):e=this.worldToScreen(t.cursor.x,t.cursor.y)}else e=this.worldToScreen(t.cursor.x,t.cursor.y);const r=this.isInViewport(e.x,e.y),o=this.isStale(t),n=t.user.color||"#6B7280";return r?this.renderCursor(t,e.x,e.y,n,o,s):this.showEdgeIndicators?this.renderEdgeIndicator(t,e.x,e.y,n,o,s):null})),t.map((t=>{if(!t.selectionBox)return null;const e=t.user.color||"#6B7280",r=t.selectionBox,o=this.worldToScreen(r.x,r.y),{scale:n}=this.core.store.state;return s("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${o.x}px, ${o.y}px)`,width:r.width*n+"px",height:r.height*n+"px",backgroundColor:`color-mix(in srgb, ${e} 20%, transparent)`,borderColor:`color-mix(in srgb, ${e} 50%, transparent)`}})})))}renderCursor(t,e,r,o,n,i){return s("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":i},style:{transform:`translate(${e}px, ${r}px)`}},s("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"cursor-label",style:{backgroundColor:o}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,e,r,o,n,i){const a=this.clampToEdge(e,r),l=180*a.angle/Math.PI+90;let c=0,d=0;"left"===a.edge?c=20:"right"===a.edge?c=-20:"top"===a.edge?d=20:"bottom"===a.edge&&(d=-20);const h=this.getUserDisplayName(t.user);return s("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":i},style:{transform:`translate(${a.x}px, ${a.y}px)`}},s("svg",{class:"edge-arrow",width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${l}deg)`}},s("path",{d:"M8 1L14 13H2L8 1Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"edge-label",style:{backgroundColor:o,transform:`translate(${c}px, ${d}px)`}},h))}static get style(){return":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}"}},[513,"kritzel-awareness-cursors",{core:[16],showEdgeIndicators:[4,"show-edge-indicators"],edgeIndicatorPadding:[2,"edge-indicator-padding"],remoteCursors:[32],objectVersion:[32]}]);function l(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(o(t))||customElements.define(o(t),a))}))}export{a as K,l as d}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './workspace.migrations-B99F1MdT.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-B99F1MdT.js';
+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';
 import * as Y from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
 import 'y-indexeddb';
@@ -339,6 +339,7 @@ const readVarUint = decoder => {
  * This is a lightweight alternative to y-webrtc for browser-tab-only sync
  */
 class BroadcastSyncProvider {
+    type = 'local';
     doc;
     channel;
     _synced = false;
@@ -420,6 +421,10 @@ class BroadcastSyncProvider {
     disconnect() {
         // BroadcastChannel doesn't have explicit disconnect
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         this.doc.off('update', this.handleDocUpdate);
         this.channel.close();
@@ -430,6 +435,7 @@ class BroadcastSyncProvider {
  * WebSocket sync provider for real-time collaboration
  */
 class WebSocketSyncProvider {
+    type = 'network';
     provider;
     isConnected = false;
     _quiet = false;
@@ -518,6 +524,10 @@ class WebSocketSyncProvider {
         }
         this.isConnected = false;
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     destroy() {
         if (this.provider) {
             this.provider.destroy();
@@ -531,6 +541,7 @@ class WebSocketSyncProvider {
  * Supports multiplexing - multiple documents can share the same WebSocket connection
  */
 class HocuspocusSyncProvider {
+    type = 'network';
     provider;
     isConnected = false;
     isSynced = false;
@@ -538,16 +549,87 @@ class HocuspocusSyncProvider {
     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;
@@ -556,48 +638,11 @@ class HocuspocusSyncProvider {
                 name,
                 document: doc,
                 token: options?.token || null,
-                onStatus: (data) => {
-                    if (options?.onStatus) {
-                        options.onStatus(data);
-                    }
-                },
-                onConnect: () => {
-                    if (this.isConnected || this.isDestroyed) {
-                        return;
-                    }
-                    this.isConnected = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus connected: ${name}`);
-                    }
-                    if (options?.onConnect) {
-                        options.onConnect();
-                    }
-                },
-                onDisconnect: () => {
-                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
-                        return;
-                    }
-                    this.isConnected = false;
-                    this.isSynced = false;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus disconnected: ${name}`);
-                    }
-                    if (options?.onDisconnect) {
-                        options.onDisconnect();
-                    }
-                },
-                onSynced: () => {
-                    if (this.isSynced || this.isDestroyed) {
-                        return;
-                    }
-                    this.isSynced = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus synced: ${name}`);
-                    }
-                    if (options?.onSynced) {
-                        options.onSynced();
-                    }
-                },
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
             };
             // Add optional settings
             if (options?.forceSyncInterval !== undefined) {
@@ -622,48 +667,11 @@ class HocuspocusSyncProvider {
                 document: doc,
                 token: options?.token || null,
                 autoConnect: false,
-                onStatus: (data) => {
-                    if (options?.onStatus) {
-                        options.onStatus(data);
-                    }
-                },
-                onConnect: () => {
-                    if (this.isConnected || this.isDestroyed) {
-                        return;
-                    }
-                    this.isConnected = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus connected: ${name}`);
-                    }
-                    if (options?.onConnect) {
-                        options.onConnect();
-                    }
-                },
-                onDisconnect: () => {
-                    if (this.isDestroyed || (!this.isConnected && !this.isSynced)) {
-                        return;
-                    }
-                    this.isConnected = false;
-                    this.isSynced = false;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus disconnected: ${name}`);
-                    }
-                    if (options?.onDisconnect) {
-                        options.onDisconnect();
-                    }
-                },
-                onSynced: () => {
-                    if (this.isSynced || this.isDestroyed) {
-                        return;
-                    }
-                    this.isSynced = true;
-                    if (!options?.quiet) {
-                        console.info(`Hocuspocus synced: ${name}`);
-                    }
-                    if (options?.onSynced) {
-                        options.onSynced();
-                    }
-                },
+                onStatus,
+                onConnect,
+                onDisconnect,
+                onSynced,
+                ...reconnectConfig,
             };
             // Add optional settings
             if (options?.forceSyncInterval !== undefined) {
@@ -680,6 +688,35 @@ class HocuspocusSyncProvider {
                 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
@@ -742,6 +779,7 @@ class HocuspocusSyncProvider {
         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;
@@ -749,7 +787,7 @@ class HocuspocusSyncProvider {
                 this.pendingConnectReject = null;
                 this.connectTimeout = null;
                 reject(new Error('Hocuspocus connection timeout'));
-            }, 10000); // 10 second timeout
+            }, this.connectionTimeoutMs);
             const syncHandler = () => {
                 if (this.connectTimeout) {
                     clearTimeout(this.connectTimeout);
@@ -779,6 +817,10 @@ class HocuspocusSyncProvider {
             }
         });
     }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
     disconnect() {
         // Cancel any pending connection attempt
         if (this.connectTimeout) {
@@ -799,6 +841,7 @@ class HocuspocusSyncProvider {
         }
         this.isConnected = false;
         this.isSynced = false;
+        this._connectionStatus = 'disconnected';
     }
     destroy() {
         // Mark as destroyed first to prevent any callbacks from doing work
@@ -811,11 +854,13 @@ class HocuspocusSyncProvider {
         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';
     }
 }
 

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-B99F1MdT.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 * 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.3}.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.3}.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: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 STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -205,6 +205,10 @@ const KritzelAwarenessCursors = class {
             const cursor = state.cursor;
             const activeObjectId = state.activeObjectId || null;
             const selectionBox = state.selectionBox || null;
+            const existing = updated.get(clientId);
+            const cursorMoved = !existing ||
+                !existing.cursor !== !cursor ||
+                (cursor && existing.cursor && (cursor.x !== existing.cursor.x || cursor.y !== existing.cursor.y));
             updated.set(clientId, {
                 clientId,
                 user,
@@ -212,6 +216,7 @@ const KritzelAwarenessCursors = class {
                 activeObjectId,
                 selectionBox,
                 lastUpdated: now,
+                lastCursorMove: cursorMoved ? now : (existing?.lastCursorMove ?? now),
             });
         });
         // Remove cursors for disconnected clients
@@ -237,7 +242,7 @@ const KritzelAwarenessCursors = class {
         }
     }
     isStale(cursor) {
-        return Date.now() - cursor.lastUpdated > STALE_THRESHOLD_MS;
+        return Date.now() - cursor.lastCursorMove > STALE_THRESHOLD_MS;
     }
     hasActiveDrawingCursors() {
         for (const cursor of this.remoteCursors.values()) {
@@ -326,7 +331,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: 'b8676d9a7a3d4a79ea8ad9763355ecf4c2f90e17' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '4dd962322c7e955b9038c55cb10f8ffda1e0b246' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -19818,6 +19823,14 @@ class KritzelViewport {
     startX = 0;
     /** Starting Y position for pan/zoom gestures */
     startY = 0;
+    /** Minimum movement distance (in screen pixels) before broadcasting touch cursor position */
+    static TOUCH_CURSOR_BROADCAST_THRESHOLD = 5;
+    /** Screen X position where the current touch interaction started */
+    _touchStartScreenX = 0;
+    /** Screen Y position where the current touch interaction started */
+    _touchStartScreenY = 0;
+    /** Whether the touch movement threshold has been exceeded for cursor broadcasting */
+    _touchCursorBroadcastActive = false;
     /**
      * Creates a new KritzelViewport instance and initializes viewport state.
      * Sets up debounced handlers for viewport updates and scaling end events.
@@ -19945,7 +19958,13 @@ class KritzelViewport {
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                this._touchStartScreenX = event.clientX;
+                this._touchStartScreenY = event.clientY;
+                this._touchCursorBroadcastActive = false;
+            }
             if (activePointers.length === 2) {
+                this._core.store.state.objects?.clearCursorPosition();
                 const currentPath = this._core.store.currentPath;
                 if (currentPath) {
                     this._core.store.state.objects.remove(obj => obj.id === currentPath.id);
@@ -20006,10 +20025,24 @@ class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
-            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
-            this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
             const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.isScaling || activePointers.length > 1) {
+                this._core.store.state.objects?.clearCursorPosition();
+            }
+            else {
+                this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+                this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
+                if (!this._touchCursorBroadcastActive) {
+                    const dx = event.clientX - this._touchStartScreenX;
+                    const dy = event.clientY - this._touchStartScreenY;
+                    if (Math.sqrt(dx * dx + dy * dy) >= KritzelViewport.TOUCH_CURSOR_BROADCAST_THRESHOLD) {
+                        this._touchCursorBroadcastActive = true;
+                    }
+                }
+                if (this._touchCursorBroadcastActive) {
+                    this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
+                }
+            }
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
                 const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
@@ -20061,6 +20094,7 @@ class KritzelViewport {
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            this._touchCursorBroadcastActive = false;
             if (this._core.store.state.pointers.size === 0) {
                 this._debounceEndScaling();
             }
@@ -21340,6 +21374,42 @@ class KritzelObjectMap {
         }
         this._awareness.setLocalStateField('selectionBox', null);
     }
+    /**
+     * Removes selection groups whose owner is no longer present in awareness.
+     * Called when remote clients disconnect to prevent orphaned selection groups
+     * from persisting in the workspace state.
+     */
+    removeOrphanedSelectionGroups() {
+        if (!this._awareness) {
+            return;
+        }
+        const states = this._awareness.getStates();
+        const activeUserIds = new Set();
+        states.forEach(state => {
+            const userId = state.user?.id;
+            if (userId) {
+                activeUserIds.add(userId);
+            }
+        });
+        const localUserId = this._core?.user?.id;
+        const orphanedGroups = this.quadtree.filter(o => o instanceof KritzelSelectionGroup
+            && o.userId != null
+            && o.userId !== localUserId
+            && !activeUserIds.has(o.userId));
+        for (const group of orphanedGroups) {
+            this.quadtree.remove(o => o.id === group.id);
+            this._idMap.delete(group.id);
+            if (this._objectsMap) {
+                this._ydoc.transact(() => {
+                    this._objectsMap.delete(group.id);
+                }, 'local');
+            }
+        }
+        if (orphanedGroups.length > 0) {
+            this._core?.store.invalidateSelectionCache();
+            this._core?.rerender();
+        }
+    }
     /**
      * Registers a callback to be invoked when the awareness state changes.
      * The callback receives the full awareness states map.
@@ -21473,16 +21543,28 @@ class KritzelObjectMap {
             this.handleObjectsChange(event);
         };
         this._objectsMap.observe(this._objectsObserver);
-        // Connect all providers in parallel (settle individually so one failure doesn't block the rest)
-        const results = await Promise.allSettled(this._providers.map(p => p.connect()));
-        results.forEach((result, i) => {
+        // Separate local providers (IndexedDB, BroadcastChannel) from network providers (Hocuspocus, WebSocket)
+        // Local providers are awaited so data is available immediately; network providers sync in the background
+        // via Yjs observers that are already registered above.
+        const localProviders = this._providers.filter(p => p.type === 'local');
+        const networkProviders = this._providers.filter(p => p.type === 'network');
+        // Await local providers for immediate data availability
+        const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        localResults.forEach((result, i) => {
             if (result.status === 'rejected') {
-                console.error(`[Kritzel] Sync provider "${this._providers[i]?.constructor.name}" failed to connect:`, result.reason);
+                console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
+        // Connect network providers in the background (remote data arrives via Yjs observers)
+        for (const provider of networkProviders) {
+            provider.connect().catch(err => {
+                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+            });
+        }
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
-        for (const provider of this._providers) {
+        // Awareness is available immediately after provider construction, before connect() resolves
+        for (const provider of networkProviders) {
             if (provider.awareness) {
                 this._awareness = provider.awareness;
                 break;
@@ -21490,7 +21572,11 @@ class KritzelObjectMap {
         }
         // Subscribe to awareness changes
         if (this._awareness) {
-            this._awarenessChangeHandler = () => {
+            this._awarenessChangeHandler = (change) => {
+                // Clean up selection groups belonging to disconnected users
+                if (change.removed.length > 0) {
+                    this.removeOrphanedSelectionGroups();
+                }
                 const now = Date.now();
                 const timeSinceLastEmit = now - this._lastAwarenessEmitTime;
                 // Clear any pending timeout since we have a new event
@@ -21753,11 +21839,27 @@ class KritzelObjectMap {
         }
         this.quadtree.reset();
         this._idMap.clear();
-        this._objectsMap.forEach(serialized => {
+        const localUserId = this._core?.user?.id;
+        const staleSelectionGroupIds = [];
+        this._objectsMap.forEach((serialized, key) => {
             const object = this._reviver.revive(serialized);
+            // Remove remote selection groups on startup — they are transient UI state
+            // that should not survive an app restart. The owning user's session is gone.
+            if (object instanceof KritzelSelectionGroup && object.userId != null && object.userId !== localUserId) {
+                staleSelectionGroupIds.push(key);
+                return;
+            }
             this.quadtree.insert(object);
             this._idMap.set(object.id, object);
         });
+        // Clean up stale remote selection groups from Yjs
+        if (staleSelectionGroupIds.length > 0) {
+            this._ydoc.transact(() => {
+                for (const id of staleSelectionGroupIds) {
+                    this._objectsMap.delete(id);
+                }
+            }, 'local');
+        }
     }
     /**
      * Resets the object map by clearing both the local quadtree and the Yjs objects map.
@@ -22429,13 +22531,24 @@ class KritzelAppStateMap {
             this.handleWorkspacesChange(event);
         };
         this._workspacesMap.observe(this._workspacesObserver);
-        // Connect all providers in parallel (settle individually so one failure doesn't block the rest)
-        const results = await Promise.allSettled(this._providers.map(p => p.connect()));
-        results.forEach((result, i) => {
+        // Separate local providers (IndexedDB, BroadcastChannel) from network providers (Hocuspocus, WebSocket)
+        // Local providers are awaited so data is available immediately; network providers sync in the background
+        // via Yjs observers that are already registered above.
+        const localProviders = this._providers.filter(p => p.type === 'local');
+        const networkProviders = this._providers.filter(p => p.type === 'network');
+        // Await local providers for immediate data availability
+        const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        localResults.forEach((result, i) => {
             if (result.status === 'rejected') {
-                console.error(`[Kritzel] Sync provider "${this._providers[i]?.constructor.name}" failed to connect:`, result.reason);
+                console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
+        // Connect network providers in the background (remote data arrives via Yjs observers)
+        for (const provider of networkProviders) {
+            provider.connect().catch(err => {
+                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+            });
+        }
         this._isReady = true;
         // Run any pending schema migrations before loading data
         const quietMigrations = !core.store.state.debugInfo.showMigrationInfo;
@@ -28386,7 +28499,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.74';
+const KRITZEL_VERSION = '0.1.76';
 
 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)}`;