kritzel-stencil 0.1.83 → 0.1.86

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CFnj_FXt.js');
-var workspace_migrations = require('./workspace.migrations-K5oVASsb.js');
+var workspace_migrations = require('./workspace.migrations-Dj-FiYEO.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -154,16 +154,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (index.h(index.Host, { key: '67c0c1f944b9c835d1685d2b743114a1b5a1f061', style: containerStyles, class: {
+        return (index.h(index.Host, { key: '2067605684a743be45059efd562697ff21fefbcb', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: 'd71ccd7449a27133bcf8cc01f3cd654cc9b00142', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: '1ed322318335deb011087494a2c437849b5a23a0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: '818ad4a24d6489565dffc8c64b3d4e76b701444c', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '87af93fd968f3bf5b1f86295de6bd4b71c94120c', class: "avatar-default" }, index.h("svg", { key: '3267317fe99fb8d90432e207516bb48f603c08ed', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '9e4e225f9a058a24f63b508f36969c8c429fccd6', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: 'ff99dded4cb17d6c25880b54e3875c262dfc0440', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '5a217c6a1366dea3ceee8bfa03a38917cad7a9f9', class: "avatar-default" }, index.h("svg", { key: 'f4537e21772e6e6f1bb60835ad7a56123a200dd7', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '29649695038a506e1caeba3a8b6c066860fb5a1d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get watchers() { return {
         "user": [{
@@ -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: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 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;
@@ -356,7 +356,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: '1743084eadda932b5aaf89552f500b90e194a79f' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '7147977660886684c8030075206790de5597c342' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -463,7 +463,7 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '890501d05ecfadaedbf298590d43b5efd67f1d5f' }, index.h("button", { key: 'fae3acd5aed5d0a5322fe9e0da2186577d873c5c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick }, index.h("kritzel-icon", { key: 'eaa718ab29fad870464c6b67d5ad27c4300dfd54', name: "chevrons-left" }))));
+        return (index.h(index.Host, { key: '46a42ca9f3dce4c75d9dc203e113557851caeb78' }, index.h("button", { key: '6a86672d941f996aaf2c591bb44c7c001a5a05d5', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick }, index.h("kritzel-icon", { key: 'defd63c8e0001fb9d01f74e885748cd2fa0bccdb', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
@@ -490,16 +490,16 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '3a285bfdc1b336fb450304856aa81c1bd9c4e5e3' }, index.h("button", { key: 'f3119bfe9cf8ca1b6e031cdcc8bee9549c18e620', type: this.type, class: {
+        return (index.h(index.Host, { key: 'aa82a9e0c6c39b0b2bce597ac2e864049543d474' }, index.h("button", { key: '5bda14f9fef89abacb9cd04e5aaa8ae7ae25048a', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '5a26eee0781c5fafc7a41260364b2a2c11f192a6' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '8585675eec39345ddfbf3f6dbb705035f7a5d099' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
 
-const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(        var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,        var(--kritzel-checkerboard-color-light, #fff) 0% 50%      )      50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
+const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(       var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,       var(--kritzel-checkerboard-color-light, #fff) 0% 50%     )     50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
 
 const KritzelColorComponent = class {
     constructor(hostRef) {
@@ -542,13 +542,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (index.h(index.Host, { key: '7e36e97c383cff73b3146279e971526dd5c7f0f7' }, index.h("div", { key: 'e8ad3ca5e9771c51a96a846627ea20c75212ceeb', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: 'a740b94f2baacb978b26deae1ea1057c7faf9036' }, index.h("div", { key: 'e82f83a23e44a2ff23b5efbfac28e4c47cd5b749', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '9269087c7694604d70d50d846cedb6ce022373cd', class: {
+            } }, index.h("div", { key: 'd83e2be171f89ee4cd53e8cf83ab6591f585129f', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -604,7 +604,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '22b6f0362933848cd40ad44c73a48fd4d8330884' }, index.h("div", { key: '38adb9abc39d78ae9528341212acf2de425b4eb8', class: {
+        return (index.h(index.Host, { key: 'a2c996d16a44f66471f6f76e08129142fc9f5ddb' }, index.h("div", { key: '245f4b9ff50412b84ede221d22b0894a104a6895', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -802,7 +802,7 @@ const KritzelContextMenu = class {
         })));
     }
     render() {
-        return (index.h(index.Host, { key: '11f279a1ef329569988b1c1ce6311a1f81695ebe' }, index.h("div", { key: 'e0aa8ab22df018ae0a2b1c22513575d67099d35d', class: "menu-container" }, this.processedItems.map(({ item, isDisabled, processedChildren }, index$1) => {
+        return (index.h(index.Host, { key: '100ec82feefbc285f8e50fca3f23f853c33aa215' }, index.h("div", { key: '9305a0190bdcf7a9e4b5ae7473651a0261dbfd7c', class: "menu-container" }, this.processedItems.map(({ item, isDisabled, processedChildren }, index$1) => {
             const prevItem = index$1 > 0 ? this.processedItems[index$1 - 1].item : null;
             const showDivider = prevItem && prevItem.group !== item.group;
             const hasChildren = processedChildren && processedChildren.length > 0;
@@ -1082,13 +1082,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.controls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: 'fa03f9eae6ebc0a043d6ac3cb774ae32491ae943', class: {
+        return (index.h(index.Host, { key: 'ea5e17d6995c228862b6d3375213b8f4ff05f04b', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '2e789118656dc3366f131b520f2be4386e5889c8', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '3296551d078f9d358efff1438fdcf723349fa5e1', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '29b4d14746f81f7def022ec5769c9d1bf21a6dab', class: "kritzel-controls" }, index.h("div", { key: 'eb5a4ddd2c0ee9d77c008ddae1223e4ce4449116', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '5c41c8fc6770ef5eae7e5b03752f0fe65bcf30e1', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '9cbea189d5875cda4f09dc7228345e0cb268d47d', class: "kritzel-controls" }, index.h("div", { key: '0df655a7ac5bd6bc164b82703bc212b480058ba2', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: 'bc16b645b6c6a12ec6bd8420a8d84aee83d2b6d2', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1118,10 +1118,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: 'a924ed9102961f992b27afe6945732c8541c13a0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: '2e0824a991997d52168a3d922c2214ed66f5bf57', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: '9709b046ceb6ba0982ca45b93212b2d449c2b2fe', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'b2a2521c810f176f54ef8accff5b98a4a1acf42d', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'cdfc29f2b8a3cd800789f68879216e73700d546e', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '09d77705945e3e52eff40107c3bcbccbb636586d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: 'd2cb554f56ce0f3bfe72e85fcbb506199387c15f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '39412859a99c71b536e0b2ed0045b671a975af7e', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '1977ceddd337df53e8636e2bddd1d928aca3a1ff', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '06bd3bf3558931a0c2317e149d8990f42e77adae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1165,7 +1165,7 @@ const KritzelCurrentUser = class {
         this.dialogRef?.open();
     };
     render() {
-        return (index.h(index.Host, { key: '603389630e3c1fb02c94663bebdc374bbbfaa79e' }, index.h("kritzel-avatar", { key: 'b346db9aaa7681c484725a42c05ab94f468a19f0', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: '647b32cff0ffbfa08ce8d00f1a2f42a6d17027a3', ref: el => (this.dialogRef = el), user: this.user })));
+        return (index.h(index.Host, { key: 'a735cb9f16f4898fde0b52573affa2d270a8f1de' }, index.h("kritzel-avatar", { key: 'd449a515182718ab4ef3b26b2277696bbc7ab46f', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: '3542f6df43c9924218e344f70bdc398c74a8eae6', ref: el => (this.dialogRef = el), user: this.user })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1197,7 +1197,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (index.h(index.Host, { key: 'f2b3c74f360bc81671e405d05e9a250878722911' }, index.h("kritzel-dialog", { key: 'c042f0574d72ed8705d27730aea8106e089cbcf6', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '3d02828a3444eebb92bdb317923315873e791831', class: "user-info" }, index.h("kritzel-avatar", { key: '172f2a529de8f397e327cbe6395272e12f7a51d0', user: this.user, size: 80 }), displayName && index.h("div", { key: '8537c57e8eaa2172caebcc5d53700f4835b4d1bf', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '446e60e1d422455518f38049eda813d7c52c8c0d', class: "user-email" }, this.user.email)))));
+        return (index.h(index.Host, { key: '40c1a1bed0ddf02f9835199b5f7d2363e4d1902b' }, index.h("kritzel-dialog", { key: '8d10cd2dbdec06c0519f5a8f6f0f113d30b978aa', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '24d8267d37fde77ce1a26efb84a9eaa3320dd6b7', class: "user-info" }, index.h("kritzel-avatar", { key: '282153dea220d8aa4a509764e2dcbcf20a6f2682', user: this.user, size: 80 }), displayName && index.h("div", { key: '3a908e583a8eb0aca4020eb78d76821b82b1c643', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '2aadf821b6f91c6bd76f10ff234d94ab8b79dd9c', class: "user-email" }, this.user.email)))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -1270,7 +1270,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b0f5c795c4803e27a49d7f76f3fedea818967049' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '6ff883be1aecfb302bc9ecb3b7562617d753d5ba', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: '2e40e68375f4b8b4531181d249c1638a01d9dac5' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: 'c015f003cc5f4c5c532803846fa5201edf4c211a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -1358,7 +1358,7 @@ class KritzelHTMLHelper {
     }
 }
 
-const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,      opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease,      color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
+const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,     opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease,     color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
 
 const KritzelDialog = class {
     constructor(hostRef) {
@@ -1583,7 +1583,7 @@ const KritzelDialog = class {
 };
 KritzelDialog.style = kritzelDialogCss();
 
-const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,      transform 0.15s ease,      visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
 
 const KritzelDropdown = class {
     constructor(hostRef) {
@@ -1821,7 +1821,7 @@ const KritzelDropdown = class {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (index.h(index.Host, { key: 'b753a3cf28a0f21625c213c9ec5337b922023206' }, index.h("div", { key: 'dffe30b1d6968ad612c94718eea72f118c43f378', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: '0a08fa5aa5a2040e85ac80643d11ec778ed89b31', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: '8a8b4519787863d53fa7c72928e7632de6daa848', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: '803fe1e4ef138a58cde8941771875dd5eadfe944', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: '05d9dfe94e62134c91316f33cf64f2a9efb57fbb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: '332d5206a67ae8ef4ce0982d62c108210bca6252', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: 'f73539b0decf59fd59d075618dc5028ac82d11b5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '7b45a14ab898233a68845a40363ee37c9922098c', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: '8936739a53b5dca8debdce27c4bead487a5bf803', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: 'f20417649f8988e46db5992100d93fd7bd827b96', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
+        return (index.h(index.Host, { key: 'ac4dc8a445f79fa68555756a4ac26ba174a13eaa' }, index.h("div", { key: '1c73835be42e6a289657920ef33c2a53c183913d', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: 'ac73d76b5e24e2f2740113523524bc00d1c98d02', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: 'e1e71c68a8abb2cf0dc2b9314e05d1170c0bb5b3', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: '74588e1ff661f8f86318a2ed9bb53192ad96bacd', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: '432f694526e20e1e6abb6721f12aa246471d830d', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: '81f7d98f78201910f4427a7c442172d0283de45b', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: '18db309dc145718fbb3d51e44058e3bfa96b0d27', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '32af6ce9a1f045c2ce3b205b1b1dc1fe1a80e227', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: 'b37cd43daa06424ea7b7951929352154f7d1ea0f', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: '0e673d4e09e007a4c93ed6a992dddeb8eba33e91', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index$1 === this.focusedIndex;
             const optionClasses = {
@@ -2571,27 +2571,27 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '1e3c220506d14f276ca246365c2bda79110c6c35' }, index.h("div", { key: '154b45141b995f749adb52a11dc3363ab2989475', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '22519269ea7227a1a7a05d2f282bbcd2466edf5d', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'e89f0609dfd031cb040fd80a1f60ecb56d56734c', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '0b3acdf827d48c9589fb8170b49a602beb273684', ref: el => {
+        return (index.h(index.Host, { key: 'd8a67f8c972b419312aa79fa94309a4c3c28e559' }, index.h("div", { key: '8d6014bb9f6782112ede03b004ec7f2e1e30cc61', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '3aeb146fa84ff212d48eef81f9699d9050d95955', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '341a7383c54d378e3a7ed484852751d08df73f3e', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'b081b6e393f7523f9c41f17bed67ab2f0ba307e0', ref: el => {
                 if (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, isLoading: this.isLoading, 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: '324ba00f982938abc7a3f4dc47368f3b9bad665e', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: 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, isLoading: this.isLoading, 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: 'e27061ec3d8b9b612cb6da6d4a7467361058f2ba', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '0c4662e92cbe90a958f8704e6db0375915d9c634', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'e0422c1a02bc895bafd4b777d4d593afcfdf335b', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '620b5c46a8a9bc33be69d91cb8e147358b7be117', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'ef39941ab724501ffdb8b5425b7882494e8b35ba', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '72f59ec2eab76d753bb64475f199f0fa33e935d4', ref: el => {
+            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '643c6d287068705a523e602e207a2bc562c58cd2', ref: el => {
                 if (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: 'c60411370947fc408b5e9d7adade3e28210b8d47', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '4783940d3d4f9c2a7e8156c0713f29cb8b043125', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: 'bdb727d5641f8cda3711856086e1b9aa8533a5a6', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: '3afa57ea46636c92cc7232dfe22a27cace85766e', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: '852f9980fa3b89ceb5b6d8bde1bdd5598d3dc6e4', ref: 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: '6cfdae4fe8f4c902a3b37d1d27c1d80d2780d8fd', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '145ff28fe73069f3e47f5bde42741ccb0d33d635', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: 'f30dc2bd31b8862cba7124090eb7e5a9a0621371', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'd23ed0f6b4cc993e37d1838f277a95fc3ae0fe36', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: '9b9eacdf41a5546abcaba336e0dca1185465ecb4', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'cdccbb7ef0b9932c0747545a18071f22e5683d8c', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'dd97a5b6e94433f550b016713d77d98e89bc23c3', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -24396,8 +24396,8 @@ class KritzelSvgExportHelper {
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
         const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
-        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
-  ${elements}
+        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
+  ${elements}
 </svg>`;
     }
     /**
@@ -24453,8 +24453,8 @@ class KritzelSvgExportHelper {
         const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
         const refX = 0;
         const refY = size / 2;
-        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
-      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
+        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
+      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
     </marker>`;
     }
     /**
@@ -24496,10 +24496,10 @@ class KritzelSvgExportHelper {
         const stroke = workspace_migrations.KritzelColorHelper.resolveThemeColor(path.stroke, theme);
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / path.scale}" height="${path.totalHeight / path.scale}" overflow="visible">
-      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / path.scale}" height="${path.totalHeight / path.scale}" overflow="visible">
+      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
+    </svg>
   </g>`;
     }
     /**
@@ -24514,10 +24514,10 @@ class KritzelSvgExportHelper {
         const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / line.scale}" height="${line.totalHeight / line.scale}" overflow="visible">
-      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / line.scale}" height="${line.totalHeight / line.scale}" overflow="visible">
+      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
+    </svg>
   </g>`;
     }
     /**
@@ -24540,18 +24540,18 @@ class KritzelSvgExportHelper {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
                 const fontColor = workspace_migrations.KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
-                textContent = `
-    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
-        ${textHtml}
-      </div>
+                textContent = `
+    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
+        ${textHtml}
+      </div>
     </foreignObject>`;
             }
         }
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / shape.scale}" height="${shape.totalHeight / shape.scale}" overflow="visible" preserveAspectRatio="none">
-      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / shape.scale}" height="${shape.totalHeight / shape.scale}" overflow="visible" preserveAspectRatio="none">
+      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
+    </svg>
   </g>`;
     }
     /**
@@ -24570,12 +24570,12 @@ class KritzelSvgExportHelper {
         // Calculate dimensions accounting for scale
         const width = text.totalWidth / text.scale;
         const height = text.totalHeight / text.scale;
-        return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${text.fontSize}pt; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; transform: scale(${text.scaleFactor}); transform-origin: top left; white-space: pre-wrap; word-wrap: break-word;">
-        ${htmlContent}
-      </div>
-    </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+    <foreignObject x="0" y="0" width="${width}" height="${height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${text.fontSize}pt; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; transform: scale(${text.scaleFactor}); transform-origin: top left; white-space: pre-wrap; word-wrap: break-word;">
+        ${htmlContent}
+      </div>
+    </foreignObject>
   </g>`;
     }
     /**
@@ -24589,8 +24589,8 @@ class KritzelSvgExportHelper {
         // Calculate dimensions
         const width = image.totalWidth / image.scale;
         const height = image.totalHeight / image.scale;
-        return `<g transform="${transform}"${opacity}>
-    <image href="${image.src}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
+        return `<g transform="${transform}"${opacity}>
+    <image href="${image.src}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
     }
     /**
@@ -24609,8 +24609,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -27585,7 +27585,7 @@ const KritzelExport = class {
         return (index.h("div", { class: "export-tab-content" }, index.h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (index.h(index.Host, { key: '89824b452ccc845f4dfd1e13c01a24a72e5d9488' }, index.h("kritzel-dialog", { key: 'a9190d093e84b5850146db39e1016abce9de0d83', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, index.h("div", { key: '3068dbb979a029bf580e2d00a721768bc08d12b3', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '6241491cc549f576b822bc9fda37c9edffd9143f', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'a9fe2a7ccb5b97095271a6e00fe9585f39b137fc', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (index.h(index.Host, { key: 'efeea781325e672e3f4c1579a50da1c928dc88b5' }, index.h("kritzel-dialog", { key: 'c5e60559a3022eec7d13a73b5ec858edb8e7ce1d', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, index.h("div", { key: '1508001914a22cbb944502be7d33a04128548842', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '9b0a21140fef986344d98b688729017cb66da493', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: '70021cadab8b2840bbcf66afcd38c28c419facfe', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -27600,7 +27600,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: '3d5fd9aecf7abc96c438b890f5831281d6194922' }, index.h("div", { key: '2b3df82e475177e803f172f440ffcee97dbe5aa5', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'bcff1827a61df6896e49fe1df4819bf27b3610ef' }, index.h("div", { key: '53a03532afde5fca6e8ec1cc78e6cd41ab1444cd', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -27647,7 +27647,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: '914739658f9d11eab9ff5f9bf674395cc7395804' }, index.h("kritzel-dropdown", { key: '8f8ec602c96f97680a614e21c088dd650e840919', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
+        return (index.h(index.Host, { key: '3d942116fc1019f1b2982395a08b14a9b0081040' }, index.h("kritzel-dropdown", { key: 'a042505de2d9b27c6f77ed929496a3921c3170cd', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss();
@@ -27675,7 +27675,7 @@ const KritzelFontSize = class {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (index.h(index.Host, { key: '32615ac4756efd047219b93642f7b5cc7d80669b' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'c409d73ff06966fd3861a16c7de32d41db85c12a' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -27742,7 +27742,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (index.h(index.Host, { key: '5cfc93853afd27dd24ff9709dcd277571ae4d0a1' }, index.h("div", { key: 'fa0a43610b98ffbc30bf9485a4f8730b80f74ab7', class: "input-container" }, this.label && index.h("label", { key: '151346732ef4a00a1ea78bbc19ac56a94488dfc4', class: "input-label" }, this.label), index.h("div", { key: '79b28f6f45cdacf7d122988bb4c844c929544cce', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: 'e22abd0e10ee231b2e66f50085693769584a1254', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '5c96287d24dc28f4ac321f108a356527194f4e81', class: "input-suffix" }, this.suffix)))));
+        return (index.h(index.Host, { key: 'e482edcbaf7cee8c35effbce0428c2b4dea84bd4' }, index.h("div", { key: 'a71f5e3eeba5e34470227ea3be4dd6731a94a52e', class: "input-container" }, this.label && index.h("label", { key: '757a32997f09558412952fe948fa234d1baecb3f', class: "input-label" }, this.label), index.h("div", { key: 'cfb13fe0041efdd9fe4a7bf2a098ff321b545b79', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: 'b8bf209f14f15f4ad8eb0cf1be1afb1bfc958f79', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: 'b5d4444609ad93c10d86978a488252b673979c94', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -27824,10 +27824,10 @@ const KritzelLineEndings = class {
     render() {
         const startEnding = this.getStartEnding();
         const endEnding = this.getEndEnding();
-        return (index.h(index.Host, { key: 'fd254becee71940867504c80b47d56a69ae2ab12' }, index.h("div", { key: 'be03727ba2f5802a8adadc90b28dd7488d1bfe1c', class: "endings-section" }, index.h("div", { key: '0ba2fcefeb3690f7eee01c7b1c3f6db58ed8e918', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
+        return (index.h(index.Host, { key: '38bcd0b0e56c0d0fc7fd57346b718054faa0ba06' }, index.h("div", { key: '5ae52039756334299a86d7301b15f6874d5689ff', class: "endings-section" }, index.h("div", { key: '8a0dd7792498248203f2db8c346828fe7f57534d', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
                 'ending-option': true,
                 'selected': startEnding === type,
-            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), index.h("div", { key: '058ce9870084adc6f1b061aba50e830c0e8b4a01', class: "endings-section" }, index.h("div", { key: '69c4ced0ddb8a47ea1fdd290431eee7bae95e192', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
+            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), index.h("div", { key: '001c6cc50af45e1461ef15e2c43df4efdd83b48f', class: "endings-section" }, index.h("div", { key: '96cc57da4bed38aa42207d40a6a21cd39fa18cad', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
                 'ending-option': true,
                 'selected': endEnding === type,
             }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
@@ -27882,7 +27882,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '21b548c3d1391203a02a33e66afa5d3dae603071' }, index.h("kritzel-dialog", { key: '1254e8bdc8e84e71e606109e20f938ecb42b05e3', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '99d23d7c0d52da043c3d59ee9d527d02e68d3b2b', class: "login-content" }, this.subtitle && (index.h("p", { key: '7ce2131761e0127a190dbc1f7b4cd32884e4657b', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: 'bc32c6e61856c963cf9c0d22bfe5935c6c55568d', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
+        return (index.h(index.Host, { key: '8cac83db48fef2531f1669c3f601526b1e5cdefa' }, index.h("kritzel-dialog", { key: '72e0f2eb8e19f3c1081bfd5e1183aa9ed1bc678a', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: 'bb17bcf6f3486000c9056b3983810e016b0f05a3', class: "login-content" }, this.subtitle && (index.h("p", { key: 'cef17bc6f5078769b8deed6ec1c615a71fe0c611', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '8462ef9a62201cb15f8911432ca188cf49bc8a8d', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -27988,15 +27988,15 @@ const KritzelMasterDetail = class {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (index.h(index.Host, { key: '25913464ef131f1332146a5372c0caf9f7050f24' }, index.h("div", { key: '206346f9bee671f1b283ebfaca4c4401706a074f', class: {
+        return (index.h(index.Host, { key: '7f1fd360f657fddcdb6ce2eea17e4e2daf426eb2' }, index.h("div", { key: '02f7f6dd141d057dbf395dd836f7841a649fa16d', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: 'f4cf41f060d1d25887d2b11a264de040e878d25c', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
+            } }, index.h("nav", { key: '397758627252c5e9573a61c457d4481df6d9b4f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index$1 === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: 'efb20b2c1c6dfcf03bee2c1ef06c2c7a6de27e7a', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '13b97670c0c0b7f8fe493438d26179cd5039cd9c', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '6a52e00dd7fc61bcacce71127bf78637bbff7e30', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '99bd31682d0e8accc6c2eacfcbaf6778f3b92d05' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '65cc4601a39cb7780c52cc86075efd0b4a24646a', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '6b6ae9ac689c757d71e2a42ecaf8aaceb3785154', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '28d9b2f68030587d44505f691e8fed57d968e631', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '2a35ca82717713808ca12227ecca671b848d1f02' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -28069,7 +28069,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '9a14983012bb0c286a17811d3e3c41743799c560', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: '0540a587c117a09857e9d87b65e019c8fa85c694', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (index.h(index.Host, { key: 'a81ea8a1fe2dc6cb8d9f395cafbcadec3eb4aa45', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'bb27d7a923431d79567e79283e505ea4ae02ef36', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -28174,12 +28174,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: '5a0d685c83cb3f82e64e74feef124ae0c9bca162', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '6fd639ff533e0b2c39febd369b4ba034661ec708', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, index.h("div", { key: '02415ff1e0abf326ae284ed5b31b2a0241d4c7e2', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: 'd7486e9f1614be1801268fa97947aaab4c12460d', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -28246,7 +28246,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '951577ab19a6bb10e7c578546a386e6159d16aff', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '2b5112a4458544945c91536cb974e230401c6cd2', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: 'e37122c20fa642ad4e53ae039ab43539f3b5b195', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '5b4fd597eb4ec299ca672194f0dd69d3d50c270b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'a3a48b1ebb064293ecb6bb06f1783cba849d2ade', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
+        return (index.h(index.Host, { key: 'a41ae459f61a115232efb30d60d3f1ec0452f2bc', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '6bc1f0000690723868626dec580f9c92761c3ad0', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: '603f069ecb0b8a9a57dc090d92d1bb26cf29e033', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '754259a7a7d265de462ac05468326396867ae3f3', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'e95f63b8038468a67c159f6ba687279c79c10699', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -28344,7 +28344,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (index.h(index.Host, { key: '9f5b165e9c4db1cc6724020e12d18beb0a70ad11' }, index.h("div", { key: 'e5e3d790f9d9bd7bb2d25367bb7d7d86c731091f', class: "input-container" }, this.label && index.h("label", { key: '0ee62b45cbfe34405a888d0d61af472936b0a453', class: "input-label" }, this.label), index.h("div", { key: '49bbdca156346c1e0dd7b08d6790ae5829fa6d1f', class: "input-wrapper" }, index.h("input", { key: '986e05275c90bee119ff3c803d90ba16a0005f8d', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: '4c468fdca0018390bdc57f1b2fd7fa2e68b09f98', class: "spinner-buttons" }, index.h("button", { key: '7b433424c6817049b6229e249d715ebd43dfe350', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '666b0c184d00d000a1fa97d4bdda3a9a6b0d299d', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '223f829a0b808e9fdde656294729121e2c8ae0d3', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '40f72b01e59b98c7bca4952c94eeb631fe3d17a1', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '5f304877010fc9fa1c7559270b5105659b2f4863', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'e31b6f1edb583eebbf608fc5360c53d49d4d2d5c', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (index.h(index.Host, { key: 'b27f16d562bc6c61b0a6a289e622e7e35159a782' }, index.h("div", { key: '7f5f2295a60b46dc05c003b10ff74e9da6822406', class: "input-container" }, this.label && index.h("label", { key: 'a5a10af06139312ef0b038ed8c3bb533afa6235c', class: "input-label" }, this.label), index.h("div", { key: 'b15b4a2d84ad1185a67cd748176c7585a0789f09', class: "input-wrapper" }, index.h("input", { key: '8da76a405713461ef4eb2f316af6b737493371dd', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: '9813f61998a8902d9a1bc4100dbab744e91e98f8', class: "spinner-buttons" }, index.h("button", { key: 'ad688c3332b0dbdd6327c66aed778d3e0d036aab', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: 'a21ec61f331a7b672d2ce56cd2d1b30e7f0b22c6', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'f36b4f68ea3733851bebce1e9f45a1f36e62acdc', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '484373581f26b6cf71194bf545d67997ef7db79f', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '5b9199c270ad270729b9f5c1c9246824e1d49cb8', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'd96e78c311bbc941edfafcb02017da7c367aaf2e', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -28354,7 +28354,7 @@ const KritzelNumericInput = class {
 };
 KritzelNumericInput.style = kritzelNumericInputCss();
 
-const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(      to right,      var(--kritzel-opacity-slider-active-color, #007AFF) 0%,      var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%    );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
 
 const KritzelOpacitySlider = class {
     constructor(hostRef) {
@@ -28383,7 +28383,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (index.h(index.Host, { key: 'a0307b2fc97221881f0e2a21035427fcf0c5fdb3' }, index.h("div", { key: 'a77c6e973f92671daa3a8299b51d70b2d2fd98db', class: "opacity-container" }, index.h("div", { key: 'c5df7c6fe6db3aa9a8430ea7580d6cc7a23666b8', class: "slider-wrapper" }, index.h("input", { key: '6d3cae027e5a9b391f36ede911dedb201630d525', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (index.h(index.Host, { key: 'f6460d2d37ca76c69c62597b32f7567c8a2e1b77' }, index.h("div", { key: '09cb87f8e7e09639b4b794f9c9b30da024a4023f', class: "opacity-container" }, index.h("div", { key: '783cd792f0511945f685483a181b621f3c2551f8', class: "slider-wrapper" }, index.h("input", { key: 'd05be4ab1a2a2b19411b12358b7846bebac83a83', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
             } })))));
     }
@@ -28447,7 +28447,7 @@ const KritzelPillTabs = class {
         buttons?.[newIndex]?.focus();
     }
     render() {
-        return (index.h(index.Host, { key: 'd2f8c83b3dbb77ca7e4d9c4e3cd047eff29fe521' }, index.h("div", { key: '713d0a7a616fb9ba4bc3dd7bf0beb951a889c4c6', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.id, class: {
+        return (index.h(index.Host, { key: 'cd6993107010e578b91af23101da27bd2ef943cd' }, index.h("div", { key: '509c023b5bf91de1f463c8e080b83216a94d7d64', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.id, class: {
                 'pill-tab': true,
                 'selected': this.value === tab.id,
             }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index$1) }, tab.icon && index.h("kritzel-icon", { name: tab.icon, size: 16 }), index.h("span", { class: "pill-tab-label" }, tab.label)))))));
@@ -28719,7 +28719,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (index.h(index.Host, { key: '70a29385ee7f1bef37f903e1e6821b46fc9a147f', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '8f50bce48c3aa82abbfc34331f8e80f205a45f03' })));
+        return (index.h(index.Host, { key: '6acf9d402aa0ee151d93b912fc2b9d46cfe88d07', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: 'dbeff1735d422e818179346f5880555fbadddba9' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -28733,7 +28733,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.83';
+const KRITZEL_VERSION = '0.1.86';
 
 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)}`;
 
@@ -28928,7 +28928,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0d4cd5ad565a1ff1140f308765ff887ba68ba6c8' }, index.h("kritzel-dialog", { key: '170a15a41d18f56981a99aae266026625d7fe644', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '6569f351fdef57dd189af63f7d6c4d98ce815c1b', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: 'b041beb9f4e65e527e7a1f951727dbbe253d4855' }, index.h("kritzel-dialog", { key: '48b6dedb4b3e37ea0f45b12290b4e8fe1beb2031', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'ea86b78f00e1fd36e4f7ac0718b32c94cbfa47b0', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
 };
 KritzelSettings.style = kritzelSettingsCss();
@@ -28956,10 +28956,10 @@ const KritzelShapeFill = class {
         return (index.h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, index.h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
     }
     render() {
-        return (index.h(index.Host, { key: 'e527cb6ffb7fafcfd750e63c9c90760636a065f7' }, index.h("div", { key: 'b958cbece86e5fd39200e521ce6ef05b2b4554cf', class: "fill-row" }, index.h("button", { key: '17066b97e95d5841c06bc1922ae3749640b4bb5e', class: {
+        return (index.h(index.Host, { key: '5f915acf7a98ac585f5aba494981cbbb38252c93' }, index.h("div", { key: 'e8a7fd9a1611d5cace9fbf73c1421b211a8b7d89', class: "fill-row" }, index.h("button", { key: 'cbd388e362c94e36220e93f55fd0140a774e0bd7', class: {
                 'fill-option': true,
                 'selected': this.value === 'transparent',
-            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), index.h("button", { key: '8163cb3a5847d11165d2fead19113e56d3687487', class: {
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), index.h("button", { key: '532eec1936f973eb2fb44c15839400e53ac4f4f7', class: {
                 'fill-option': true,
                 'selected': this.value === 'filled',
             }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
@@ -29054,9 +29054,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'f1d9bac1ed73b3c028d77bec2eb0882b08ec12c8' }, index.h("kritzel-dialog", { key: '952e6c6c8ed5b2260c7b540524044a8704796cd9', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '1834e98b32be60eebf499ff7d021b16f2d9ad018', class: "share-content" }, index.h("div", { key: 'bc19e19e35de1513a1b337ad96a5e58b1c987751', class: "share-section" }, index.h("div", { key: '0310309b3389827d94be755d926eeda87d434148', class: "share-row" }, index.h("div", { key: 'ed3171611a010df28ead03955f413083e615f908', class: "share-label-group" }, index.h("label", { key: '90cc0d814c973bd02e4fb8b871b20561804e08dc', class: "share-label" }, "Link sharing"), index.h("p", { key: '02ae9eb9aeaf7e1153873da7f6501bdf0fc27096', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: 'd09081f674376da4fe84aa15bff4a9c51731b57b' }, index.h("kritzel-dialog", { key: 'cf95c6522b6310d32b36f73977f122f9316b025c', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '15304f3a2052274035c383ea88abfc28a86367fe', class: "share-content" }, index.h("div", { key: 'd3c23df40305bb61b7e9c1b1ab848bfb36c9ee84', class: "share-section" }, index.h("div", { key: 'f06deba24e98a53e288c568da1cefb712c3f9a70', class: "share-row" }, index.h("div", { key: '4b98833cc31cbfce71260bf04f474b0a3ea3fbfd', class: "share-label-group" }, index.h("label", { key: '21ba5d7dba7e7ec00061e0e0966bdbb2bc8e7154', class: "share-label" }, "Link sharing"), index.h("p", { key: '3b6a8f016f81bc1bc8fc31becc5f8d01df42f6c6', class: "share-description" }, this.internalIsPublic
             ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '656ff6bff6dff3956b73072766b73642c13cf968', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: 'dfc591b157b9ae5c268d77b7a7aab4168c80690d', class: "share-section" }, index.h("div", { key: '54f71d05705ddca92ccf1637e0ad7318127b6e72', class: "share-url-container" }, index.h("input", { key: 'fa1a9fad703a30e87daa8c3f83c782349103809a', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'd879775f7df013855e748c48dda63470ee0f66c4', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: '985ee904561df3bd182697f7b95bc0e64c7f70d5', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '0ee1dfb2202e84f258348101339e3f55b88b1459', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: '2e94a57507478182785f5e25453cba9f7b495dc1', class: "share-section" }, index.h("div", { key: '27815163b0027bd56770a14015e59a893edb6151', class: "share-url-container" }, index.h("input", { key: '59b6caeef1542a3fbbb857e1aded8313ee6817a7', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'ce8c7bcaa362638e507c04ca6f08c17f9a691994', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: 'afd0b6213a2fd53859461f950eb5e0aec0f4de64', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -29094,7 +29094,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'fa4a31e3978f5a7187c8e011d58278829f60f912', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '1ae5a58c6cedf19626cba1e04abe566669582081', class: "toggle-track" }, index.h("div", { key: 'e11d42017fd624837f9e44f2671b74d38e4d015f', class: "toggle-thumb" }))));
+        return (index.h(index.Host, { key: '376beaa4424858c3aaf1466797663024889c0f73', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '2108fe8de84e0b9a619667b5ab4f57215c185375', class: "toggle-track" }, index.h("div", { key: 'ff8253ce660ca62313dea3034ac4980135eaac88', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -29194,7 +29194,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: 'dbb1a5f61cae17d47d3d31959172189d842a1e0c', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '081650f6ee9f8f4c6c7d8d0d72b72d116162034b', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '870353d092212556316e5881cd817208f138dfff', name: this.buttonIcon })), index.h("div", { key: '2254a771e8b73a5e0037e48f45cbf3819f6d83a6', class: "split-divider" }), index.h("button", { key: '0c42a970441e6f3530f686b8825f7de9b8395a07', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: 'a958954d14c3f8f0e86d7d927f116c9a28a1fb43', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '98b72e3da54dadb51a51f591dbae47dab439ac8e', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '9f505415219b5741f483c659a00c1655c6652ca7', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: '1ec4c6806f5ff020d675b34f32efeecf6ddf40ab', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'ff149370b08338579206820fb5b1da982b45ff92', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '73aed4cc46319b6dd3d79bbdacb56f91441a0be5', name: this.buttonIcon })), index.h("div", { key: '3cd4d664db9b851427d41cb69aa023cc837f4f63', class: "split-divider" }), index.h("button", { key: '4669e0732cad379d08c2d73c66037ae6176a4365', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '6df7339f7ec3df14fa228f651249584e925ab3d8', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '4f8698379fe3a44fcd9f414dd499e2dbe12ed494', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '8a7bc82c1dc34a70f55f5aca613aecb225b164ad', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -29214,7 +29214,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: 'd7b77c754e247879f94b05f9c7b282d2aec22035' }, index.h("div", { key: '1f1c95ccb4b8f5500d73e4eafa775aa1dd93d83c', class: "size-grid" }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'f964d37a6cbfa48898ac066859165df1492535a9' }, index.h("div", { key: 'fed8ec5ddbe07d64beb151b22211fecdc0a278d1', class: "size-grid" }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -29558,14 +29558,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0f67bc5736d65b2dcb277bfea3a052e165213c01', style: {
+        return (index.h(index.Host, { key: '647f4d837fc06a3b5dca8896383c1a92ef7c5a3d', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, index.h("div", { key: 'd193b1b6dd28022da87bcce832ae72d630fcd7e0', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'a06478f4a9c995bad3558287341003effa6fc834' }))));
+            } }, index.h("div", { key: '41b32207d1e9f84c85c054a8aae4727b7df05d62', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'c164d76762957e60d904458d7a34936944d02eae' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -29604,7 +29604,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '0277e775741c91fe53daea8b14f9fdec550bef45' }, index.h("button", { key: '7eff5491f732dc6871b382612cf64a4d661fa39b', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '4eff979e1b6158df5a1b17c702765432bd18f642', name: "undo" })), index.h("button", { key: '73d75b36bfbd9d4299aea16be54ed6e1687a47d1', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'd1556e8b7aa32b102aad9ea572d040e8863197c3', name: "redo" })), index.h("div", { key: 'eefbdb33bb73d5a48db79fe9621a91da77ddd46d', class: "utility-separator" }), index.h("button", { key: '15630243403ff4475123e209d0c3e7919718bc00', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '7a423865d246a4752fc8fa3411133d0bd4f1c75d', name: "delete" }))));
+        return (index.h(index.Host, { key: '5b03e990a92cbf09a71c067c4c07547da6dcd669' }, index.h("button", { key: '9a5915187e2684c292b9d5d058a5b6dc3279088d', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '33e3f3cdc5ee4c4fc79c5f732355523460d096ab', name: "undo" })), index.h("button", { key: '03bb54a25b70811a3c90624caf1f29c1534bfdcb', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '042140dd6a6251d04d26fee326df30eec46d6825', name: "redo" })), index.h("div", { key: '16111e0e11d93d928fc6b71fc993e9ca59205a4a', class: "utility-separator" }), index.h("button", { key: '003edf23960221447cbeb735b04ab6642ef72f4c', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '2b3cbdbd65efe0b7923b7ecb1b4ff112a08dcc72', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();