kritzel-stencil 0.2.2 → 0.2.3

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-BPwtowiJ.js');
+var workspace_migrations = require('./workspace.migrations-CYeB_XRB.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');

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-BPwtowiJ.js');
+var workspace_migrations = require('./workspace.migrations-CYeB_XRB.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -957,10 +957,7 @@ const KritzelControls = class {
     }
     handleDisplayValuesChange = (event) => {
         const newVal = event.detail;
-        if (this.displayValues &&
-            this.displayValues.color === newVal.color &&
-            this.displayValues.size === newVal.size &&
-            this.displayValues.fontFamily === newVal.fontFamily) {
+        if (this.displayValues && this.displayValues.color === newVal.color && this.displayValues.size === newVal.size && this.displayValues.fontFamily === newVal.fontFamily) {
             return;
         }
         this.displayValues = newVal;
@@ -1092,13 +1089,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: 'ea5e17d6995c228862b6d3375213b8f4ff05f04b', class: {
+        return (index.h(index.Host, { key: '93d08a3268edb67fc4cccb291b6e0aff6cf5a4bd', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '3296551d078f9d358efff1438fdcf723349fa5e1', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '8862ea7e524b3e23d87ffea2929e04df7231bb0c', 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: '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 => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '2ea2a41ba4cda77f5abde9231d293da181a2a568', class: "kritzel-controls" }, index.h("div", { key: '6bd4f6d930a0a51d5549b6dbae1e7be14cbe7822', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: 'c712ca502a4ebd244394158b39391a49839bc386', 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);
@@ -1128,10 +1125,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: '2e0824a991997d52168a3d922c2214ed66f5bf57', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: '6ca260915b2880443a324855a1de96d10affd256', 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: '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 => {
+            }, key: configControl.name }, index.h("div", { key: '984d30bd7f508d2fc56a9e81692fdf05dfb852c9', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '90c59995d229c606b9bf3b625f6eefc0632371c6', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'cdb56f983e1f6840b11d06d166f982a93c07331b', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: 'c79db07dd02995d3ee105e8d7a773f89cd7072a5', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1140,7 +1137,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.activeControl.tool instanceof workspace_migrations.KritzelTextTool && this.displayValues ? (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: this.displayValues.color, theme: this.theme, size: this.displayValues.size, style: {
+            } }, this.displayValues && (index.h("div", { key: '0573a22c3105076729eb986c98b7e8644392f767', class: "color-container" }, index.h("kritzel-color", { key: '1e9711c219a5c520873b3206072957f2d406c56c', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -1175,7 +1172,7 @@ const KritzelCurrentUser = class {
         this.dialogRef?.open();
     };
     render() {
-        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 })));
+        return (index.h(index.Host, { key: 'c392caf731f8352fd8e2a95918fe48a2f00dd9e5' }, index.h("kritzel-avatar", { key: 'b3bdce0efa0c0610aa028303386c643d53bc8300', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: '5e7af1aea468028e091ad8f461e4352cb9f9636b', ref: el => (this.dialogRef = el), user: this.user })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1207,7 +1204,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        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)))));
+        return (index.h(index.Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, index.h("kritzel-dialog", { key: '49dd037cca0741cc949f20d9d44cfd028492dc60', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: 'ddcdfb82cc0c896025559888d475ab5c9ad59b4c', class: "user-info" }, index.h("kritzel-avatar", { key: '4d164b784cde6787d26ac164c7450c0352e6a7cb', user: this.user, size: 80 }), displayName && index.h("div", { key: '13ad719d8bd90cd608c78438fccbb38ed1d5e5ba', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: 'df360afd434293d9c9d5fcf114713e0a6925a78e', class: "user-email" }, this.user.email)))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -1368,7 +1365,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), (max-height: 576px) and (orientation: landscape){.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) {
@@ -1470,8 +1467,9 @@ const KritzelDialog = class {
         document.body.style.overflow = 'hidden';
     }
     lockMobileViewportHeight() {
-        // Only lock height on mobile when fullscreenOnMobile is enabled
-        if (!this.fullscreenOnMobile || window.innerWidth > 576) {
+        // Only lock height on mobile when fullscreenOnMobile is enabled.
+        // Use the smaller dimension so landscape phones (wide but short) are also detected.
+        if (!this.fullscreenOnMobile || Math.min(window.innerWidth, window.innerHeight) > 576) {
             this.mobileLockedHeight = null;
             return;
         }
@@ -25778,7 +25776,7 @@ async function toPng(node, options = {}) {
     return canvas.toDataURL();
 }
 
-const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards;opacity:0}.workspace-loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:workspace-loading-spin 0.6s linear infinite}@keyframes workspace-loading-spin{to{transform:rotate(360deg)}}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-engine-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-engine-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in 200ms ease-out var(--kritzel-engine-loading-overlay-delay, 300ms) forwards;opacity:0}.workspace-loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-engine-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-engine-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:workspace-loading-spin 0.6s linear infinite}@keyframes workspace-loading-spin{to{transform:rotate(360deg)}}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return index.getElement(this); }
@@ -26009,6 +26007,7 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
+        const wasTracked = this.core.store.state.pointers.has(ev.pointerId);
         this.core.store.state.pointers.delete(ev.pointerId);
         if (this.host.hasPointerCapture(ev.pointerId)) {
             this.host.releasePointerCapture(ev.pointerId);
@@ -26017,6 +26016,12 @@ const KritzelEngine = class {
         if (this.core.store.state.pointers.size === 0) {
             this.core.cursorManager.resetToDefault();
         }
+        // If the corresponding pointerdown was never processed (e.g. consumed by a capture-phase
+        // listener like a tooltip close handler), skip tool logic to avoid spurious interactions
+        // such as a selected text object entering edit mode when clicking to dismiss a popup.
+        if (!wasTracked) {
+            return;
+        }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
@@ -27868,7 +27873,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: '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")))));
+        return (index.h(index.Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, index.h("kritzel-dialog", { key: '01aae6955be6828945b20e8a8a4d7c49eb92b2e2', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, index.h("div", { key: '57c6f6de2917fb51201d737c4d0e1877f5671466', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '800b8c058078ba1bba06b5edbaf370c4fa3c6806', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: '99fb3b3d8dc42fdb47a3110e8403dde4e508e6cd', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -28165,7 +28170,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        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: {
+        return (index.h(index.Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, index.h("kritzel-dialog", { key: '09ece6fb5949fc8b204f29cd931c583e525590e1', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '57218d7762734929691b82700c31922f5a4991c8', class: "login-content" }, this.subtitle && (index.h("p", { key: '9ee071786f393857cd6a666e395526a139359d60', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: 'a487687345aabcfb55976437ddc85feb464f0cae', 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,
@@ -28533,7 +28538,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '1bf8b30bc9c958911e544121db01d74948fb2695', class: { mobile: this.isTouchDevice } }, index.h("div", { key: '3aab8140694f15db066f7c46f243ebc29fb698c1', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: '55799f62f7bf72af751362315d38dc8b226c0950', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: 'ee627acfcad95a1a978fb3c46d428181bbcb98c1', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: 'e4116b6583e34dd915ffb46ee3b7377ea2ff10e8', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'a9f50ddf822b14bad8723c67a202dcaa257b817a', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (index.h(index.Host, { key: '0e12ffc8c72566ec92080e6a19bd1d929795bef9', class: { mobile: this.isTouchDevice } }, index.h("div", { key: 'cc73b51c5aa39522a7ab7ec23d5c0a2732ed7acc', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: 'c35b8c7aa56e5e0e2773fed9fbbbead0b6b01a71', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: '8b3261da5a10371a17b2562b71fde48dd0ba8ccd', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: 'be4a42061f27bbca3d435dec8e4dd25fc78febb0', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '763043f4d02819097396ce1baa85f398695e38b5', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -29036,7 +29041,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.2.2';
+const KRITZEL_VERSION = '0.2.3';
 
 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)}`;
 
@@ -29231,7 +29236,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '33618317a3d4a60cda4369cde1e694cd13116d0a' }, index.h("kritzel-dialog", { key: '274de12d633d430628c1ac2f1ac9779596d0d249', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'd771531248ec5db38b2d711334c74dde28985f91', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '78a4eb80f2a4d9e7ef67d06bb39137dbde3a3301' }, index.h("kritzel-dialog", { key: '1adf437125186758f75dc085db9a4e0c572fccd9', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '68ed27f5c9c03589d0444c02ff0524dfcaa053a3', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
 };
 KritzelSettings.style = kritzelSettingsCss();
@@ -29357,9 +29362,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'a104c14b2492d97f3ada98c9eaaa845d63074063' }, index.h("kritzel-dialog", { key: 'ae2155436f9dc7530dadfed5da92b2ae8781c3f5', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: 'd419303e63e8183fec99ad2743d5d377c6b2b642', class: "share-content" }, index.h("div", { key: '913ee65831ff47e6d4d4ba2e26426892bc583827', class: "share-section" }, index.h("div", { key: 'c32d489e5f7891d23d133c1677c6022e9fc365ab', class: "share-row" }, index.h("div", { key: '1aa00b5578c657c20910bd1af44d166806d2fe3d', class: "share-label-group" }, index.h("label", { key: '2d00004314e0d1141397ee7af4e7f923e3182ebf', class: "share-label" }, "Link sharing"), index.h("p", { key: 'c698ba01de2b252cf6453e0d339044d78c0a701e', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, index.h("kritzel-dialog", { key: 'c152f4ec5739a18b265f9a8b161ec8501c1a053b', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '2810061b1c99e4f4644342453de693e1cddf9a27', class: "share-content" }, index.h("div", { key: 'bc56de53fd6136c6867018af24019383094cab0d', class: "share-section" }, index.h("div", { key: '43464ffd61e5a19653cc081e823f01c0eb17e454', class: "share-row" }, index.h("div", { key: 'ed83ea6684695d09dc6af82b3367fbbff6e4c7e2', class: "share-label-group" }, index.h("label", { key: 'fe2eaf501dd80ad0b8d83f93a2dcdd18bc093d3b', class: "share-label" }, "Link sharing"), index.h("p", { key: '738f1a6afc0421380164b9d270920631cefdfd78', 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: 'dcc56bf4644c2c56438115b0e9efae7e74ac77d7', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: '73c72ec32b5fdd74e333594d37aa9601ce274121', class: "share-section" }, index.h("div", { key: 'f7cf9d1f4c1680ed35c0751df8abf46fbaec2f52', class: "share-url-container" }, index.h("input", { key: '971c49e294ecf0d95854f54a42b1d45c6bd2c3ae', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'ff40fb3e0cc45b5b9d99b0b7f0ff7c3939f7ecb6', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: 'b299bb0c2a03f5522134f5b3cee5de6cc1d4df5d', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '60f0200ea8f9c207cd5ee76f5a86f82707bb724b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: '83212a2a996b85996eee119d5535203f77d3c8dd', class: "share-section" }, index.h("div", { key: '297031b5aef2018f7aa33c32fd0f8c82f1ddb4cb', class: "share-url-container" }, index.h("input", { key: '467cca4a8c31b75daa82670f64b562730c241f52', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'fdc0f490339cb7050fb020cb1e83e51f6374b183', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: '5ff1a76d7977c75ea7bc8c339bdf515ba102e511', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -29907,7 +29912,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'b49f6db6c0e574dc8a5a733c749ecda6f24f9d25' }, index.h("button", { key: 'f65be4fff352b55087f9cb880b9139802b4969e6', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'd58906a4f105923237a98fe2e6b16a53dcccc3f6', name: "undo" })), index.h("button", { key: '2b7cf2235902920d6b18fe76d0ba2d1d70e4b2c8', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '9588ded274449358024e16e8783d30ef451a3a7c', name: "redo" })), index.h("div", { key: '6ab6db05e2ec35aa59524c41ccb7b339819c9d14', class: "utility-separator" }), index.h("button", { key: '0eb06eebbda95cebc4ea932b9ec45b2c06324f80', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '10b51caad06e0a7489c6ef7155073891edad4b63', name: "delete" }))));
+        return (index.h(index.Host, { key: 'f800ea5843cf73ae132b56396ad05d664043f789' }, index.h("button", { key: 'd5dd4dc6e91c106eced7551c02d5f12a915b1d22', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '64ac3c8f118c991b50dc99e70d4b952fc759c958', name: "undo" })), index.h("button", { key: '97a8d694fd999eb505fdcdb532d4476ce369e60d', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'ba22d5c6b246967b00112dc2efeb26920187d88f', name: "redo" })), index.h("div", { key: 'a4aa6a3202640742826d2217f2bbae9ebd2b84da', class: "utility-separator" }), index.h("button", { key: '1de2a896a6a70c22f9fa16a21af10f07f4b0303a', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '202612645c1a3e8ee7e4cc01a0305d4e673874e4', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();

package/dist/cjs/{workspace.migrations-BPwtowiJ.js → workspace.migrations-CYeB_XRB.js}

@@ -14511,6 +14511,10 @@ const lightTheme = {
     },
     engine: {
         backgroundColor: '#ffffff',
+        loadingOverlayBackground: 'rgba(255, 255, 255, 0.85)',
+        loadingOverlayColor: '#333333',
+        loadingOverlaySpinnerActiveColor: '#333333',
+        loadingOverlaySpinnerColor: '#cccccc',
     },
     snap: {
         indicatorFill: 'rgba(59, 130, 246, 0.3)',
@@ -14780,6 +14784,10 @@ const darkTheme = {
     },
     engine: {
         backgroundColor: '#1a1a1a',
+        loadingOverlayBackground: 'rgba(26, 26, 26, 0.85)',
+        loadingOverlayColor: '#e0e0e0',
+        loadingOverlaySpinnerActiveColor: '#e0e0e0',
+        loadingOverlaySpinnerColor: '#555555',
     },
     snap: {
         indicatorFill: 'rgba(10, 132, 255, 0.35)',

package/dist/collection/components/core/kritzel-engine/kritzel-engine.css

@@ -30,12 +30,12 @@ p, h1, h2, h3, h4, h5, h6, blockquote, pre {
   align-items: center;
   justify-content: center;
   gap: 10px;
-  background-color: var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));
-  color: var(--kritzel-loading-overlay-color, #333);
+  background-color: var(--kritzel-engine-loading-overlay-background, rgba(255, 255, 255, 0.6));
+  color: var(--kritzel-engine-loading-overlay-color, #333);
   font-family: var(--kritzel-font-family, sans-serif);
   font-size: 1.25rem;
   pointer-events: all;
-  animation: workspace-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards;
+  animation: workspace-loading-fade-in 200ms ease-out var(--kritzel-engine-loading-overlay-delay, 300ms) forwards;
   opacity: 0;
 }
 
@@ -45,8 +45,8 @@ p, h1, h2, h3, h4, h5, h6, blockquote, pre {
   box-sizing: border-box;
   display: block;
   flex-shrink: 0;
-  border: 2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);
-  border-top-color: var(--kritzel-loading-overlay-spinner-active-color, #333333);
+  border: 2px solid var(--kritzel-engine-loading-overlay-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-engine-loading-overlay-spinner-active-color, #333333);
   border-radius: 50%;
   animation: workspace-loading-spin 0.6s linear infinite;
 }

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -251,6 +251,7 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
+        const wasTracked = this.core.store.state.pointers.has(ev.pointerId);
         this.core.store.state.pointers.delete(ev.pointerId);
         if (this.host.hasPointerCapture(ev.pointerId)) {
             this.host.releasePointerCapture(ev.pointerId);
@@ -259,6 +260,12 @@ export class KritzelEngine {
         if (this.core.store.state.pointers.size === 0) {
             this.core.cursorManager.resetToDefault();
         }
+        // If the corresponding pointerdown was never processed (e.g. consumed by a capture-phase
+        // listener like a tooltip close handler), skip tool logic to avoid spurious interactions
+        // such as a selected text object entering edit mode when clicking to dismiss a popup.
+        if (!wasTracked) {
+            return;
+        }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css

@@ -71,8 +71,9 @@
   border-radius: 0;
 }
 
-/* Responsive: auto fullscreen on mobile when enabled */
-@media (max-width: 576px) {
+/* Responsive: auto fullscreen on mobile when enabled (portrait) */
+@media (max-width: 576px),
+  (max-height: 576px) and (orientation: landscape) {
   .backdrop:has(.fullscreen-on-mobile) {
     background-color: transparent;
   }

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.js

@@ -95,8 +95,9 @@ export class KritzelDialog {
         document.body.style.overflow = 'hidden';
     }
     lockMobileViewportHeight() {
-        // Only lock height on mobile when fullscreenOnMobile is enabled
-        if (!this.fullscreenOnMobile || window.innerWidth > 576) {
+        // Only lock height on mobile when fullscreenOnMobile is enabled.
+        // Use the smaller dimension so landscape phones (wide but short) are also detected.
+        if (!this.fullscreenOnMobile || Math.min(window.innerWidth, window.innerHeight) > 576) {
             this.mobileLockedHeight = null;
             return;
         }

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -66,10 +66,7 @@ export class KritzelControls {
     }
     handleDisplayValuesChange = (event) => {
         const newVal = event.detail;
-        if (this.displayValues &&
-            this.displayValues.color === newVal.color &&
-            this.displayValues.size === newVal.size &&
-            this.displayValues.fontFamily === newVal.fontFamily) {
+        if (this.displayValues && this.displayValues.color === newVal.color && this.displayValues.size === newVal.size && this.displayValues.fontFamily === newVal.fontFamily) {
             return;
         }
         this.displayValues = newVal;
@@ -201,13 +198,13 @@ export class KritzelControls {
         // 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 (h(Host, { key: 'ea5e17d6995c228862b6d3375213b8f4ff05f04b', class: {
+        return (h(Host, { key: '93d08a3268edb67fc4cccb291b6e0aff6cf5a4bd', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '3296551d078f9d358efff1438fdcf723349fa5e1', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8862ea7e524b3e23d87ffea2929e04df7231bb0c', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '9cbea189d5875cda4f09dc7228345e0cb268d47d', class: "kritzel-controls" }, h("div", { key: '0df655a7ac5bd6bc164b82703bc212b480058ba2', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'bc16b645b6c6a12ec6bd8420a8d84aee83d2b6d2', 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() })), h("div", { key: '2ea2a41ba4cda77f5abde9231d293da181a2a568', class: "kritzel-controls" }, h("div", { key: '6bd4f6d930a0a51d5549b6dbae1e7be14cbe7822', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'c712ca502a4ebd244394158b39391a49839bc386', 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);
@@ -237,10 +234,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '2e0824a991997d52168a3d922c2214ed66f5bf57', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '6ca260915b2880443a324855a1de96d10affd256', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'd2cb554f56ce0f3bfe72e85fcbb506199387c15f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '39412859a99c71b536e0b2ed0045b671a975af7e', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, 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%' } })), h("div", { key: '06bd3bf3558931a0c2317e149d8990f42e77adae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '984d30bd7f508d2fc56a9e81692fdf05dfb852c9', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '90c59995d229c606b9bf3b625f6eefc0632371c6', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'cdb56f983e1f6840b11d06d166f982a93c07331b', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'c79db07dd02995d3ee105e8d7a773f89cd7072a5', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -249,7 +246,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.activeControl.tool instanceof KritzelTextTool && this.displayValues ? (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.displayValues.color, theme: this.theme, size: this.displayValues.size, style: {
+            } }, this.displayValues && (h("div", { key: '0573a22c3105076729eb986c98b7e8644392f767', class: "color-container" }, h("kritzel-color", { key: '1e9711c219a5c520873b3206072957f2d406c56c', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));

package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js

@@ -15,7 +15,7 @@ export class KritzelCurrentUser {
         this.dialogRef?.open();
     };
     render() {
-        return (h(Host, { key: 'a735cb9f16f4898fde0b52573affa2d270a8f1de' }, h("kritzel-avatar", { key: 'd449a515182718ab4ef3b26b2277696bbc7ab46f', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '3542f6df43c9924218e344f70bdc398c74a8eae6', ref: el => (this.dialogRef = el), user: this.user })));
+        return (h(Host, { key: 'c392caf731f8352fd8e2a95918fe48a2f00dd9e5' }, h("kritzel-avatar", { key: 'b3bdce0efa0c0610aa028303386c643d53bc8300', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '5e7af1aea468028e091ad8f461e4352cb9f9636b', ref: el => (this.dialogRef = el), user: this.user })));
     }
     static get is() { return "kritzel-current-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -21,7 +21,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: '40c1a1bed0ddf02f9835199b5f7d2363e4d1902b' }, h("kritzel-dialog", { key: '8d10cd2dbdec06c0519f5a8f6f0f113d30b978aa', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '24d8267d37fde77ce1a26efb84a9eaa3320dd6b7', class: "user-info" }, h("kritzel-avatar", { key: '282153dea220d8aa4a509764e2dcbcf20a6f2682', user: this.user, size: 80 }), displayName && h("div", { key: '3a908e583a8eb0aca4020eb78d76821b82b1c643', class: "user-name" }, displayName), this.user?.email && h("div", { key: '2aadf821b6f91c6bd76f10ff234d94ab8b79dd9c', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: '49dd037cca0741cc949f20d9d44cfd028492dc60', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: 'ddcdfb82cc0c896025559888d475ab5c9ad59b4c', class: "user-info" }, h("kritzel-avatar", { key: '4d164b784cde6787d26ac164c7450c0352e6a7cb', user: this.user, size: 80 }), displayName && h("div", { key: '13ad719d8bd90cd608c78438fccbb38ed1d5e5ba', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'df360afd434293d9c9d5fcf114713e0a6925a78e', class: "user-email" }, this.user.email)))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-export/kritzel-export.js

@@ -65,7 +65,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: 'efeea781325e672e3f4c1579a50da1c928dc88b5' }, h("kritzel-dialog", { key: 'c5e60559a3022eec7d13a73b5ec858edb8e7ce1d', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, h("div", { key: '1508001914a22cbb944502be7d33a04128548842', class: "export-content" }, 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(), h("button", { key: '70021cadab8b2840bbcf66afcd38c28c419facfe', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: '01aae6955be6828945b20e8a8a4d7c49eb92b2e2', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, h("div", { key: '57c6f6de2917fb51201d737c4d0e1877f5671466', class: "export-content" }, h("kritzel-pill-tabs", { key: '800b8c058078ba1bba06b5edbaf370c4fa3c6806', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '99fb3b3d8dc42fdb47a3110e8403dde4e508e6cd', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '8cac83db48fef2531f1669c3f601526b1e5cdefa' }, h("kritzel-dialog", { key: '72e0f2eb8e19f3c1081bfd5e1183aa9ed1bc678a', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: 'bb17bcf6f3486000c9056b3983810e016b0f05a3', class: "login-content" }, this.subtitle && (h("p", { key: 'cef17bc6f5078769b8deed6ec1c615a71fe0c611', class: "login-subtitle" }, this.subtitle)), h("div", { key: '8462ef9a62201cb15f8911432ca188cf49bc8a8d', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '09ece6fb5949fc8b204f29cd931c583e525590e1', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '57218d7762734929691b82700c31922f5a4991c8', class: "login-content" }, this.subtitle && (h("p", { key: '9ee071786f393857cd6a666e395526a139359d60', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'a487687345aabcfb55976437ddc85feb464f0cae', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js

@@ -55,7 +55,7 @@ export class KritzelMoreMenu {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '1bf8b30bc9c958911e544121db01d74948fb2695', class: { mobile: this.isTouchDevice } }, h("div", { key: '3aab8140694f15db066f7c46f243ebc29fb698c1', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '55799f62f7bf72af751362315d38dc8b226c0950', class: "more-menu-button", onClick: this.toggleMenu }, h("kritzel-icon", { key: 'ee627acfcad95a1a978fb3c46d428181bbcb98c1', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'e4116b6583e34dd915ffb46ee3b7377ea2ff10e8', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'a9f50ddf822b14bad8723c67a202dcaa257b817a', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: '0e12ffc8c72566ec92080e6a19bd1d929795bef9', class: { mobile: this.isTouchDevice } }, h("div", { key: 'cc73b51c5aa39522a7ab7ec23d5c0a2732ed7acc', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'c35b8c7aa56e5e0e2773fed9fbbbead0b6b01a71', class: "more-menu-button", onClick: this.toggleMenu }, h("kritzel-icon", { key: '8b3261da5a10371a17b2562b71fde48dd0ba8ccd', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'be4a42061f27bbca3d435dec8e4dd25fc78febb0', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '763043f4d02819097396ce1baa85f398695e38b5', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
     static get is() { return "kritzel-more-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js

@@ -188,7 +188,7 @@ export class KritzelSettings {
         }
     }
     render() {
-        return (h(Host, { key: '33618317a3d4a60cda4369cde1e694cd13116d0a' }, h("kritzel-dialog", { key: '274de12d633d430628c1ac2f1ac9779596d0d249', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'd771531248ec5db38b2d711334c74dde28985f91', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '78a4eb80f2a4d9e7ef67d06bb39137dbde3a3301' }, h("kritzel-dialog", { key: '1adf437125186758f75dc085db9a4e0c572fccd9', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '68ed27f5c9c03589d0444c02ff0524dfcaa053a3', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js

@@ -84,9 +84,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'a104c14b2492d97f3ada98c9eaaa845d63074063' }, h("kritzel-dialog", { key: 'ae2155436f9dc7530dadfed5da92b2ae8781c3f5', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: 'd419303e63e8183fec99ad2743d5d377c6b2b642', class: "share-content" }, h("div", { key: '913ee65831ff47e6d4d4ba2e26426892bc583827', class: "share-section" }, h("div", { key: 'c32d489e5f7891d23d133c1677c6022e9fc365ab', class: "share-row" }, h("div", { key: '1aa00b5578c657c20910bd1af44d166806d2fe3d', class: "share-label-group" }, h("label", { key: '2d00004314e0d1141397ee7af4e7f923e3182ebf', class: "share-label" }, "Link sharing"), h("p", { key: 'c698ba01de2b252cf6453e0d339044d78c0a701e', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: 'c152f4ec5739a18b265f9a8b161ec8501c1a053b', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '2810061b1c99e4f4644342453de693e1cddf9a27', class: "share-content" }, h("div", { key: 'bc56de53fd6136c6867018af24019383094cab0d', class: "share-section" }, h("div", { key: '43464ffd61e5a19653cc081e823f01c0eb17e454', class: "share-row" }, h("div", { key: 'ed83ea6684695d09dc6af82b3367fbbff6e4c7e2', class: "share-label-group" }, h("label", { key: 'fe2eaf501dd80ad0b8d83f93a2dcdd18bc093d3b', class: "share-label" }, "Link sharing"), h("p", { key: '738f1a6afc0421380164b9d270920631cefdfd78', class: "share-description" }, this.internalIsPublic
             ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: 'dcc56bf4644c2c56438115b0e9efae7e74ac77d7', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '73c72ec32b5fdd74e333594d37aa9601ce274121', class: "share-section" }, h("div", { key: 'f7cf9d1f4c1680ed35c0751df8abf46fbaec2f52', class: "share-url-container" }, h("input", { key: '971c49e294ecf0d95854f54a42b1d45c6bd2c3ae', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'ff40fb3e0cc45b5b9d99b0b7f0ff7c3939f7ecb6', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: 'b299bb0c2a03f5522134f5b3cee5de6cc1d4df5d', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: '60f0200ea8f9c207cd5ee76f5a86f82707bb724b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '83212a2a996b85996eee119d5535203f77d3c8dd', class: "share-section" }, h("div", { key: '297031b5aef2018f7aa33c32fd0f8c82f1ddb4cb', class: "share-url-container" }, h("input", { key: '467cca4a8c31b75daa82670f64b562730c241f52', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'fdc0f490339cb7050fb020cb1e83e51f6374b183', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: '5ff1a76d7977c75ea7bc8c339bdf515ba102e511', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get is() { return "kritzel-share-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -17,7 +17,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'b49f6db6c0e574dc8a5a733c749ecda6f24f9d25' }, h("button", { key: 'f65be4fff352b55087f9cb880b9139802b4969e6', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'd58906a4f105923237a98fe2e6b16a53dcccc3f6', name: "undo" })), h("button", { key: '2b7cf2235902920d6b18fe76d0ba2d1d70e4b2c8', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '9588ded274449358024e16e8783d30ef451a3a7c', name: "redo" })), h("div", { key: '6ab6db05e2ec35aa59524c41ccb7b339819c9d14', class: "utility-separator" }), h("button", { key: '0eb06eebbda95cebc4ea932b9ec45b2c06324f80', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, h("kritzel-icon", { key: '10b51caad06e0a7489c6ef7155073891edad4b63', name: "delete" }))));
+        return (h(Host, { key: 'f800ea5843cf73ae132b56396ad05d664043f789' }, h("button", { key: 'd5dd4dc6e91c106eced7551c02d5f12a915b1d22', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '64ac3c8f118c991b50dc99e70d4b952fc759c958', name: "undo" })), h("button", { key: '97a8d694fd999eb505fdcdb532d4476ce369e60d', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'ba22d5c6b246967b00112dc2efeb26920187d88f', name: "redo" })), h("div", { key: 'a4aa6a3202640742826d2217f2bbae9ebd2b84da', class: "utility-separator" }), h("button", { key: '1de2a896a6a70c22f9fa16a21af10f07f4b0303a', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, h("kritzel-icon", { key: '202612645c1a3e8ee7e4cc01a0305d4e673874e4', name: "delete" }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.2.2';
+export const KRITZEL_VERSION = '0.2.3';

package/dist/collection/themes/dark-theme.js

@@ -116,6 +116,10 @@ export const darkTheme = {
     },
     engine: {
         backgroundColor: '#1a1a1a',
+        loadingOverlayBackground: 'rgba(26, 26, 26, 0.85)',
+        loadingOverlayColor: '#e0e0e0',
+        loadingOverlaySpinnerActiveColor: '#e0e0e0',
+        loadingOverlaySpinnerColor: '#555555',
     },
     snap: {
         indicatorFill: 'rgba(10, 132, 255, 0.35)',

package/dist/collection/themes/light-theme.js

@@ -117,6 +117,10 @@ export const lightTheme = {
     },
     engine: {
         backgroundColor: '#ffffff',
+        loadingOverlayBackground: 'rgba(255, 255, 255, 0.85)',
+        loadingOverlayColor: '#333333',
+        loadingOverlaySpinnerActiveColor: '#333333',
+        loadingOverlaySpinnerColor: '#cccccc',
     },
     snap: {
         indicatorFill: 'rgba(59, 130, 246, 0.3)',