kritzel-stencil 0.1.76 → 0.1.78

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
-var workspace_migrations = require('./workspace.migrations-DkmVO6dE.js');
+var index = require('./index-BRZ6e6oa.js');
+var workspace_migrations = require('./workspace.migrations-sUPrO23c.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -176,7 +176,7 @@ const KritzelAvatar = class {
 };
 KritzelAvatar.style = kritzelAvatarCss();
 
-const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9500}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3))}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
 
 const STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -258,6 +258,9 @@ const KritzelAwarenessCursors = class {
                 updated.delete(clientId);
                 changed = true;
             }
+            else if (!changed && now - cursor.lastCursorMove > STALE_THRESHOLD_MS) {
+                changed = true;
+            }
         }
         if (changed) {
             this.remoteCursors = updated;
@@ -353,7 +356,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: '4dd962322c7e955b9038c55cb10f8ffda1e0b246' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '5a28def6e024249c4309c087502cde9f219f5421' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -429,7 +432,7 @@ const KritzelAwarenessCursors = class {
         const displayName = this.getUserDisplayName(cursor.user);
         return (index.h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
                 transform: `translate(${clamped.x}px, ${clamped.y}px)`,
-            } }, index.h("svg", { class: "edge-arrow", width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, index.h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "edge-label", style: {
+            } }, index.h("svg", { class: { 'edge-arrow': true, stale }, width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, index.h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "edge-label", style: {
                 backgroundColor: color,
                 transform: `translate(${labelX}px, ${labelY}px)`,
             } }, displayName)));
@@ -1854,7 +1857,7 @@ const DEFAULT_SHAPE_CONFIG = {
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
-const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px;z-index:10000}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px;z-index:10000}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -2033,10 +2036,19 @@ const KritzelEditor = class {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [workspace_migrations.IndexedDBSyncProvider]
+        appStateId: 'kritzel-app-test',
+        providers: [workspace_migrations.HocuspocusSyncProvider, workspace_migrations.IndexedDBSyncProvider]
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
-    loginConfig;
+    loginConfig = {
+        providers: [
+            {
+                label: 'Sign in with Google',
+                icon: 'google',
+                name: 'Google',
+            }
+        ]
+    };
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
     /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
@@ -2550,7 +2562,7 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'd1944655652eb2939e3696ed70050baaca0871e2' }, index.h("div", { key: 'ce5dfd9b8f8d9927e9a6ace4056f9053163c7e0a', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'e127a667c6e4e853bb4f0c9ffd0edaa6d80d9dfa', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'a9abb378f3c79f356d2164cbddf6badba10188a8', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'c5f764580f3623eeb9381e54769a891a48c04620', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: '2479b6979d5b2b6c55a873bd1d8468b5fd967f72', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'ec6ac72ba154abe0738259464f20cae9e7dbdd9e', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'f68f791d673b30331e55f358b9c71b3e2a9a8388', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'dfe5a051caccee504df4f347705303fa1f812556', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '48983a14d3902cd238cf0d9ed302ed561a655a9a', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '589bdc895741a2d17f60c4b549d14fe8fff74c17', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: '50414a9d7ade623678c767ce63c49f5e99336bed', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'db3069ee0b093acd238750df81c6f426139c9b87', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'e16057838f00b2c3f239e794b4310bd2690d16e2', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'a6d1fc06c983542c6af95e7bb4b2b2d522a03605', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (index.h(index.Host, { key: '6dbc3a8c64dd097ba82e46341b3fb97cbd0194db' }, index.h("div", { key: '26ceb62f59ad830fd651a1712f57e5d711e7c6f4', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'afb4f5b87c5dc0a673444fb27930e43994df4e02', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'f3c0f31841cb819917c3277852bc9b5ce291c09a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '8a9e57132e6b74ec812ee516dc7f0d5fc6c8a2e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: '6caadf512a0208fecdb18b6d68b17daa522161a3', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e27e5f3965be2fd15c83b91470ef87c4031dd7a2', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '57f8e75287402aecbb7740d46dfa15839de2169f', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '5ccf176d4fe1221c5d7597bd1c8537cf3324d3ee', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '44a334b808706e11163e89b91074ca4ea8ab4b18', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'bcb3c966e630b1a8fc4ccd438fc8fbb11cd2b167', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: 'f1957e56257b7c565311e41b770579f7e2bb910d', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'd8c1d1b51cf87725d68aaf4457b88828986a40dc', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'f5840e7f56cf6897ec28b0f28d9b204037bf3348', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'cfdcc3d5e7a5e29b0a352f0d4423ae79195dbf69', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -2599,7 +2611,7 @@ function requireLodash () {
 		  var undefined$1;
 
 		  /** Used as the semantic version number. */
-		  var VERSION = '4.17.23';
+		  var VERSION = '4.18.1';
 
 		  /** Used as the size to enable large array optimizations. */
 		  var LARGE_ARRAY_SIZE = 200;
@@ -2607,7 +2619,8 @@ function requireLodash () {
 		  /** Error message constants. */
 		  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
 		      FUNC_ERROR_TEXT = 'Expected a function',
-		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
+		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`',
+		      INVALID_TEMPL_IMPORTS_ERROR_TEXT = 'Invalid `imports` option passed into `_.template`';
 
 		  /** Used to stand-in for `undefined` hash values. */
 		  var HASH_UNDEFINED = '__lodash_hash_undefined__';
@@ -4339,6 +4352,10 @@ function requireLodash () {
 		     * embedded Ruby (ERB) as well as ES2015 template strings. Change the
 		     * following template settings to use alternative delimiters.
 		     *
+		     * **Security:** See
+		     * [threat model](https://github.com/lodash/lodash/blob/main/threat-model.md)
+		     * — `_.template` is insecure and will be removed in v5.
+		     *
 		     * @static
 		     * @memberOf _
 		     * @type {Object}
@@ -4887,7 +4904,7 @@ function requireLodash () {
 		     * @name has
 		     * @memberOf SetCache
 		     * @param {*} value The value to search for.
-		     * @returns {number} Returns `true` if `value` is found, else `false`.
+		     * @returns {boolean} Returns `true` if `value` is found, else `false`.
 		     */
 		    function setCacheHas(value) {
 		      return this.__data__.has(value);
@@ -6958,7 +6975,9 @@ function requireLodash () {
 		    function baseUnset(object, path) {
 		      path = castPath(path, object);
 
-		      // Prevent prototype pollution, see: https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+		      // Prevent prototype pollution:
+		      // https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+		      // https://github.com/lodash/lodash/security/advisories/GHSA-f23m-r3pf-42rh
 		      var index = -1,
 		          length = path.length;
 
@@ -6966,32 +6985,17 @@ function requireLodash () {
 		        return true;
 		      }
 
-		      var isRootPrimitive = object == null || (typeof object !== 'object' && typeof object !== 'function');
-
 		      while (++index < length) {
-		        var key = path[index];
-
-		        // skip non-string keys (e.g., Symbols, numbers)
-		        if (typeof key !== 'string') {
-		          continue;
-		        }
+		        var key = toKey(path[index]);
 
 		        // Always block "__proto__" anywhere in the path if it's not expected
 		        if (key === '__proto__' && !hasOwnProperty.call(object, '__proto__')) {
 		          return false;
 		        }
 
-		        // Block "constructor.prototype" chains
-		        if (key === 'constructor' &&
-		            (index + 1) < length &&
-		            typeof path[index + 1] === 'string' &&
-		            path[index + 1] === 'prototype') {
-
-		          // Allow ONLY when the path starts at a primitive root, e.g., _.unset(0, 'constructor.prototype.a')
-		          if (isRootPrimitive && index === 0) {
-		            continue;
-		          }
-
+		        // Block constructor/prototype as non-terminal traversal keys to prevent
+		        // escaping the object graph into built-in constructors and prototypes.
+		        if ((key === 'constructor' || key === 'prototype') && index < length - 1) {
 		          return false;
 		        }
 		      }
@@ -9548,7 +9552,7 @@ function requireLodash () {
 
 		    /**
 		     * Creates an array with all falsey values removed. The values `false`, `null`,
-		     * `0`, `""`, `undefined`, and `NaN` are falsey.
+		     * `0`, `-0`, `0n`, `""`, `undefined`, and `NaN` are falsy.
 		     *
 		     * @static
 		     * @memberOf _
@@ -10087,7 +10091,7 @@ function requireLodash () {
 
 		      while (++index < length) {
 		        var pair = pairs[index];
-		        result[pair[0]] = pair[1];
+		        baseAssignValue(result, pair[0], pair[1]);
 		      }
 		      return result;
 		    }
@@ -16747,6 +16751,8 @@ function requireLodash () {
 		     * **Note:** JavaScript follows the IEEE-754 standard for resolving
 		     * floating-point values which can produce unexpected results.
 		     *
+		     * **Note:** If `lower` is greater than `upper`, the values are swapped.
+		     *
 		     * @static
 		     * @memberOf _
 		     * @since 0.7.0
@@ -16760,9 +16766,16 @@ function requireLodash () {
 		     * _.random(0, 5);
 		     * // => an integer between 0 and 5
 		     *
+		     * // when lower is greater than upper the values are swapped
+		     * _.random(5, 0);
+		     * // => an integer between 0 and 5
+		     *
 		     * _.random(5);
 		     * // => also an integer between 0 and 5
 		     *
+		     * _.random(-5);
+		     * // => an integer between -5 and 0
+		     *
 		     * _.random(5, true);
 		     * // => a floating-point number between 0 and 5
 		     *
@@ -17364,6 +17377,10 @@ function requireLodash () {
 		     * properties may be accessed as free variables in the template. If a setting
 		     * object is given, it takes precedence over `_.templateSettings` values.
 		     *
+		     * **Security:** `_.template` is insecure and should not be used. It will be
+		     * removed in Lodash v5. Avoid untrusted input. See
+		     * [threat model](https://github.com/lodash/lodash/blob/main/threat-model.md).
+		     *
 		     * **Note:** In the development build `_.template` utilizes
 		     * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)
 		     * for easier debugging.
@@ -17471,12 +17488,18 @@ function requireLodash () {
 		        options = undefined$1;
 		      }
 		      string = toString(string);
-		      options = assignInWith({}, options, settings, customDefaultsAssignIn);
+		      options = assignWith({}, options, settings, customDefaultsAssignIn);
 
-		      var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn),
+		      var imports = assignWith({}, options.imports, settings.imports, customDefaultsAssignIn),
 		          importsKeys = keys(imports),
 		          importsValues = baseValues(imports, importsKeys);
 
+		      arrayEach(importsKeys, function(key) {
+		        if (reForbiddenIdentifierChars.test(key)) {
+		          throw new Error(INVALID_TEMPL_IMPORTS_ERROR_TEXT);
+		        }
+		      });
+
 		      var isEscaping,
 		          isEvaluating,
 		          index = 0,
@@ -20903,6 +20926,7 @@ const DEFAULT_ENGINE_CONFIG = {
     isDrawing: false,
     isErasing: false,
     isWriting: false,
+    isWorkspaceLoading: false,
     isCtrlKeyPressed: false,
     isContextMenuVisible: false,
     contextMenuItems: [],
@@ -25482,7 +25506,7 @@ async function toPng(node, options = {}) {
     return canvas.toDataURL();
 }
 
-const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in var(--kritzel-loading-overlay-delay, 300ms) ease-out forwards;opacity:0}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return index.getElement(this); }
@@ -26794,6 +26818,7 @@ const KritzelEngine = class {
             await this._workspaceInitializationPromise;
             return;
         }
+        this.core.store.state.isWorkspaceLoading = true;
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
@@ -26805,6 +26830,7 @@ const KritzelEngine = class {
                 this._workspaceInitializationPromise = null;
                 this._workspaceInitializationTargetKey = null;
             }
+            this.core.store.state.isWorkspaceLoading = false;
         }
     }
     emitObjectsChange() {
@@ -26872,7 +26898,7 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (index.h(index.Host, null, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
+        return (index.h(index.Host, null, this.core.store.state.isWorkspaceLoading && (index.h("div", { class: "workspace-loading-overlay" }, "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (index.h("div", { key: object.id, id: object.id, class: "object", style: {
@@ -27021,18 +27047,30 @@ const KritzelEngine = class {
                     zIndex: (object.zIndex + 2).toString(),
                 } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
-                    const isRemoteSelection = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
-                        object.userId != null &&
-                        this.core.user?.id != null &&
-                        object.userId !== this.core.user.id;
+                    const isSelectionGroup = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
+                    const localClientId = this.core.store.state.objects?.localClientId;
+                    const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
+                    const isRemoteSelection = isSelectionGroup && (
+                    // Different user
+                    (object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
+                        // Same user but different client that is still actively connected (e.g. same account on another device)
+                        (object.userId != null && this.core.user?.id != null && object.userId === this.core.user.id &&
+                            object.clientId != null && localClientId != null && object.clientId !== localClientId &&
+                            awarenessStates?.has(object.clientId) === true));
                     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;
+                                    }
                                 }
                             }
                         }
@@ -27623,7 +27661,7 @@ const KritzelLineEndings = class {
 };
 KritzelLineEndings.style = kritzelLineEndingsCss();
 
-const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
+const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
 
 const KritzelLoginDialog = class {
     constructor(hostRef) {
@@ -28521,7 +28559,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.78';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 
@@ -29366,7 +29404,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) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dc7LOVhs.js');
+var index = require('./index-BRZ6e6oa.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)}`;
 

package/dist/cjs/loader.cjs.js

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

package/dist/cjs/stencil.cjs.js

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