kritzel-stencil 0.4.22 → 0.4.24

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Xav9JFHg.js');
+var index = require('./index-Dn19mGl-.js');
 
 const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
 
@@ -23,7 +23,7 @@ const KritzelBrushStyle = class {
             value: option.value,
             label: option.label,
         }));
-        return (index.h(index.Host, { key: '7b05e93ce8d28c23503e4ca358a487165169f1ad' }, index.h("kritzel-dropdown", { key: 'a8f2f30762b339411cd3995482c3bc658855f749', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: 'ac06462897a0fbd5011533095fafb7491a75508a', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: 'caee4c657c7fee478b1038ebd2ef3b502cf73e5e', name: this.type, size: 16 })))));
+        return (index.h(index.Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, index.h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
     }
 };
 KritzelBrushStyle.style = kritzelBrushStyleCss();

package/dist/cjs/loader.cjs.js

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

package/dist/cjs/{schema.constants-CjN-B633.js → schema.constants-CY0WWJYd.js}

@@ -5754,10 +5754,11 @@ class Fitter {
     }
     openMore() {
         let { content, openStart, openEnd } = this.unplaced;
-        let inner = contentAt(content, openStart);
-        if (!inner.childCount || inner.firstChild.isLeaf)
+        if (maxOpen(content, -1) <= openStart)
             return false;
-        this.unplaced = new Slice(content, openStart + 1, Math.max(openEnd, inner.size + openStart >= content.size - openEnd ? openStart + 1 : 0));
+        if (this.unplaced.size > 1 && maxOpen(content, 1) > openEnd)
+            openEnd++;
+        this.unplaced = new Slice(content, openStart + 1, openEnd);
         return true;
     }
     dropNode() {
@@ -5927,6 +5928,14 @@ function invalidMarks(type, fragment, start) {
 function definesContent(type) {
     return type.spec.defining || type.spec.definingForContent;
 }
+function maxOpen(frag, side) {
+    for (let count = 0;; count++) {
+        let ch = side < 0 ? frag.firstChild : frag.lastChild;
+        if (!ch || ch.isAtom)
+            return count;
+        frag = ch.content;
+    }
+}
 function replaceRange(tr, from, to, slice) {
     if (!slice.size)
         return tr.deleteRange(from, to);
@@ -8631,7 +8640,8 @@ class WidgetViewDesc extends ViewDesc {
                 wrap.appendChild(dom);
                 dom = wrap;
             }
-            dom.contentEditable = "false";
+            if (!dom.hasAttribute("contenteditable"))
+                dom.contentEditable = "false";
             dom.classList.add("ProseMirror-widget");
         }
         super(parent, [], dom, null);
@@ -10479,8 +10489,14 @@ function maybeWrapTrusted(html) {
     // With the require-trusted-types-for CSP, Chrome will block
     // innerHTML, even on a detached document. This wraps the string in
     // a way that makes the browser allow us to use its parser again.
-    if (!_policy)
-        _policy = trustedTypes.defaultPolicy || trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+    if (!_policy) {
+        if (_policy = trustedTypes.defaultPolicy)
+            try {
+                return _policy.createHTML(html);
+            }
+            catch (_a) { }
+        _policy = trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+    }
     return _policy.createHTML(html);
 }
 function readHTML(html) {
@@ -10537,6 +10553,12 @@ function addContext(slice, context) {
         let type = schema.nodes[array[i]];
         if (!type || type.hasRequiredAttrs())
             break;
+        try {
+            type.checkAttrs(array[i + 1]);
+        }
+        catch (e) {
+            break;
+        }
         content = Fragment.from(type.create(array[i + 1], content));
         openStart++;
         openEnd++;
@@ -14195,16 +14217,20 @@ a custom function to determine the type of the newly split off block.
 */
 function splitBlockAs(splitNode) {
     return (state, dispatch) => {
-        let { $from} = state.selection;
         if (state.selection instanceof NodeSelection && state.selection.node.isBlock) {
+            let { $from } = state.selection;
             if (!$from.parentOffset || !canSplit(state.doc, $from.pos))
                 return false;
             if (dispatch)
                 dispatch(state.tr.split($from.pos).scrollIntoView());
             return true;
         }
-        if (!$from.depth)
+        if (!state.selection.$from.depth)
             return false;
+        let tr = state.tr;
+        if (!state.selection.empty && (state.selection instanceof TextSelection || state.selection instanceof AllSelection))
+            tr.deleteSelection();
+        let { $from } = tr.selection, mapFrom = tr.steps.length;
         let types = [];
         let splitDepth, deflt, atEnd = false, atStart = false;
         for (let d = $from.depth;; d--) {
@@ -14223,10 +14249,7 @@ function splitBlockAs(splitNode) {
                 types.unshift(null);
             }
         }
-        let tr = state.tr;
-        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection)
-            tr.deleteSelection();
-        let splitPos = tr.mapping.map($from.pos);
+        let splitPos = $from.pos;
         let can = canSplit(tr.doc, splitPos, types.length, types);
         if (!can) {
             types[0] = deflt ? { type: deflt } : null;
@@ -14236,9 +14259,10 @@ function splitBlockAs(splitNode) {
             return false;
         tr.split(splitPos, types.length, types);
         if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
-            let first = tr.mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
+            let mapping = tr.mapping.slice(mapFrom);
+            let first = mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
             if (deflt && $from.node(splitDepth - 1).canReplaceWith($first.index(), $first.index() + 1, deflt))
-                tr.setNodeMarkup(tr.mapping.map($from.before(splitDepth)), deflt);
+                tr.setNodeMarkup(mapping.map($from.before(splitDepth)), deflt);
         }
         if (dispatch)
             dispatch(tr.scrollIntoView());
@@ -22879,12 +22903,12 @@ class KritzelCursorHelper {
         // We rotate around the center of the SVG canvas
         const center = size / 2;
         // We use a group to apply the rotation
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <g transform="rotate(${rotation} ${center} ${center})">
-          ${content}
-        </g>
-      </svg>
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
     `;
         // Encode the SVG for use in a data URI
         // We need to be careful with encoding to ensure it works across browsers

package/dist/cjs/stencil.cjs.js

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

package/dist/collection/classes/providers/sync/hocuspocus-sync-provider.class.js

@@ -17,14 +17,9 @@ export class HocuspocusSyncProvider {
     _connectionStatus = 'disconnected';
     visibilityHandler = null;
     onlineHandler = null;
-    syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
-    /** HocuspocusProvider applies remote updates with itself as the Yjs transaction origin. */
-    get updateOrigin() {
-        return this.provider;
-    }
     get connectionStatus() {
         return this._connectionStatus;
     }
@@ -81,7 +76,6 @@ export class HocuspocusSyncProvider {
             }
             this.isSynced = true;
             this._connectionStatus = 'synced';
-            this.releaseSyncedWaiters();
             if (!options?.quiet) {
                 console.info(`Hocuspocus synced: ${name}`);
             }
@@ -292,19 +286,6 @@ export class HocuspocusSyncProvider {
         this.disconnect();
         return this.connect();
     }
-    releaseSyncedWaiters() {
-        const resolvers = this.syncedResolvers;
-        this.syncedResolvers = [];
-        resolvers.forEach(resolve => resolve());
-    }
-    async whenSynced() {
-        if (this.isSynced || this.isDestroyed || this.provider.isSynced) {
-            return;
-        }
-        return new Promise(resolve => {
-            this.syncedResolvers.push(resolve);
-        });
-    }
     disconnect() {
         // Cancel any pending connection attempt
         if (this.connectTimeout) {
@@ -326,7 +307,6 @@ export class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
-        this.releaseSyncedWaiters();
     }
     destroy() {
         // Mark as destroyed first to prevent any callbacks from doing work
@@ -346,6 +326,5 @@ export class HocuspocusSyncProvider {
         this.isConnected = false;
         this.isSynced = false;
         this._connectionStatus = 'disconnected';
-        this.releaseSyncedWaiters();
     }
 }

package/dist/collection/classes/providers/sync/websocket-sync-provider.class.js

@@ -8,15 +8,9 @@ export class WebSocketSyncProvider {
     provider;
     isConnected = false;
     _quiet = false;
-    _isSynced = false;
-    _syncedResolvers = [];
     get awareness() {
         return this.provider.awareness;
     }
-    /** y-websocket applies remote updates with the underlying provider as the Yjs transaction origin. */
-    get updateOrigin() {
-        return this.provider;
-    }
     constructor(docName, doc, options) {
         const url = options?.url || 'ws://localhost:1234';
         const roomName = options?.roomName || docName;
@@ -63,29 +57,11 @@ export class WebSocketSyncProvider {
             }
         });
         this.provider.on('sync', (synced) => {
-            if (!synced) {
-                return;
-            }
-            this._isSynced = true;
-            this.releaseSyncedWaiters();
-            if (!this._quiet) {
+            if (synced && !this._quiet) {
                 console.info('WebSocket synced');
             }
         });
     }
-    releaseSyncedWaiters() {
-        const resolvers = this._syncedResolvers;
-        this._syncedResolvers = [];
-        resolvers.forEach(resolve => resolve());
-    }
-    async whenSynced() {
-        if (this._isSynced || this.provider.synced) {
-            return;
-        }
-        return new Promise(resolve => {
-            this._syncedResolvers.push(resolve);
-        });
-    }
     async connect() {
         if (this.isConnected) {
             return;
@@ -117,8 +93,6 @@ export class WebSocketSyncProvider {
             this.provider.disconnect();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
     async reconnect() {
         this.disconnect();
@@ -129,7 +103,5 @@ export class WebSocketSyncProvider {
             this.provider.destroy();
         }
         this.isConnected = false;
-        this._isSynced = false;
-        this.releaseSyncedWaiters();
     }
 }

package/dist/collection/classes/structures/app-state-map.structure.js

@@ -120,10 +120,7 @@ export class KritzelAppStateMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] App-state network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider
-            .connect()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }

package/dist/collection/classes/structures/object-map.structure.js

@@ -37,10 +37,6 @@ export class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
-    _remoteChangesCallbacks = [];
-    _docUpdateHandler = null;
-    _remoteOrigins = new Set();
-    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -64,44 +60,12 @@ export class KritzelObjectMap {
         return this._isReady;
     }
     /**
-     * Promise that settles when network providers finish connecting and complete
-     * their Yjs sync handshake. Resolves immediately if no network providers.
+     * Promise that settles when network providers finish connecting.
+     * Resolves immediately if no network providers. Awaited by the loading overlay.
      */
     whenNetworkSynced() {
         return this._networkSyncPromise ?? Promise.resolve();
     }
-    /**
-     * Whether any configured provider synchronizes over the network.
-     */
-    get hasNetworkSyncProvider() {
-        return this._providers.some(provider => provider.type === 'network');
-    }
-    /**
-     * Whether remote-originated changes can be told apart from local writes.
-     * Requires every network provider to expose its Yjs update origin.
-     */
-    get supportsRemoteChangeDetection() {
-        const networkProviders = this._providers.filter(provider => provider.type === 'network');
-        return networkProviders.length > 0 && networkProviders.every(provider => provider.updateOrigin !== undefined);
-    }
-    /**
-     * Whether at least one update originating from a network provider has been
-     * applied to this document. Stays `false` when the remote held no data the
-     * local document was missing, because Yjs suppresses empty updates.
-     */
-    get hasAppliedRemoteChanges() {
-        return this._appliedRemoteChanges;
-    }
-    /**
-     * Registers a callback invoked whenever a network provider applies changes to this document.
-     * @returns A function that unregisters the callback.
-     */
-    onRemoteChangesApplied(callback) {
-        this._remoteChangesCallbacks.push(callback);
-        return () => {
-            this._remoteChangesCallbacks = this._remoteChangesCallbacks.filter(registered => registered !== callback);
-        };
-    }
     /**
      * Returns the Yjs Awareness instance, if a network provider is available.
      */
@@ -344,22 +308,6 @@ export class KritzelObjectMap {
             const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
             console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
         }
-        // Registered before any provider connects so no remote update can be missed.
-        for (const provider of this._providers) {
-            if (provider.type === 'network' && provider.updateOrigin !== undefined) {
-                this._remoteOrigins.add(provider.updateOrigin);
-            }
-        }
-        this._docUpdateHandler = (_update, origin) => {
-            if (!this._remoteOrigins.has(origin)) {
-                return;
-            }
-            this._appliedRemoteChanges = true;
-            for (const callback of [...this._remoteChangesCallbacks]) {
-                callback();
-            }
-        };
-        this._ydoc.on('update', this._docUpdateHandler);
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -413,15 +361,12 @@ export class KritzelObjectMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider
-            .connect()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
         }));
-        // Settles once remote data has been reconciled, not merely once the transport connected
+        // Network sync awaited by loading overlay to show remote workspace hydration
         this._networkSyncPromise = networkConnectPromises.length > 0 ? Promise.allSettled(networkConnectPromises).then(() => undefined) : null;
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
@@ -1086,13 +1031,6 @@ export class KritzelObjectMap {
             this._objectsMap.unobserve(this._objectsObserver);
             this._objectsObserver = null;
         }
-        if (this._ydoc && this._docUpdateHandler) {
-            this._ydoc.off('update', this._docUpdateHandler);
-        }
-        this._docUpdateHandler = null;
-        this._remoteOrigins.clear();
-        this._remoteChangesCallbacks = [];
-        this._appliedRemoteChanges = false;
         // Remove undo manager event listeners
         if (this._undoManager) {
             if (this._stackItemAddedHandler) {

package/dist/collection/collection-manifest.json

@@ -52,7 +52,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.5",
+    "version": "4.44.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -1,115 +1,115 @@
-: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;
-}
+: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;
+}

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

@@ -210,7 +210,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: 'b157f337127f7e5852acc0d6a246fa42e944a501' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from