kritzel-stencil 0.1.29 → 0.1.31

package/dist/cjs/{default-line-tool.config-B2cKxcY4.js → default-line-tool.config-qD8Chdg7.js}

@@ -14164,8 +14164,8 @@ const lightTheme = {
     global: {
         borderColor: '#ebebeb',
         dividerColor: '#e0e0e0',
-        focusColor: '#007acc',
-        focusRingColor: 'rgba(0, 122, 255, 0.3)',
+        focusColor: '#333333',
+        focusRingColor: '#333333',
         hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#ebebeb',
@@ -14251,7 +14251,7 @@ const lightTheme = {
         backButtonColor: '#333333',
         backgroundColor: '#ffffff',
         detailBackgroundColor: '#ffffff',
-        detailFocusOutline: '2px solid #007AFF',
+        detailFocusOutline: '2px solid #333333',
         menuBackgroundColor: '#ffffff',
         menuBorderRight: '1px solid #ebebeb',
         menuItemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
@@ -14259,7 +14259,7 @@ const lightTheme = {
         menuItemChevronColor: '#aaaaaa',
         menuItemColor: '#333333',
         menuItemDisabledColor: '#aaaaaa',
-        menuItemFocusOutline: '2px solid #007AFF',
+        menuItemFocusOutline: '2px solid #333333',
         menuItemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
         menuItemSelectedBackgroundColor: '#007AFF',
         menuItemSelectedColor: '#ffffff',
@@ -14273,9 +14273,14 @@ const lightTheme = {
         itemChildOpenBackgroundColor: 'hsl(0, 0%, 0%, 3%)',
         itemColor: '#333333',
         itemEditingBackgroundColor: '#f0f0f0',
-        itemInputBorder: '1px solid #ccc',
-        itemInputSelectionColor: 'rgba(255, 255, 255, 0.16)',
-        itemInputSelectionTextColor: '#000000',
+        itemInputBorder: '1px solid #333333',
+        itemInputBorderColorOnSelected: '#ffffff',
+        itemInputCaretColor: '#333333',
+        itemInputCaretColorOnSelected: '#ffffff',
+        itemInputSelectionColor: '#007aff',
+        itemInputSelectionColorOnSelected: 'rgba(255, 255, 255, 0.55)',
+        itemInputSelectionTextColor: '#ffffff',
+        itemInputSelectionTextColorOnSelected: '#ffffff',
         itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
         itemSelectedBackgroundColor: '#007aff',
         itemSelectedColor: '#ffffff',
@@ -14292,7 +14297,7 @@ const lightTheme = {
     },
     numericInput: {
         borderColor: '#ebebeb',
-        focusBorderColor: '#007AFF',
+        focusBorderColor: '#333333',
         hoverBorderColor: '#ccc',
         inputBackground: '#ffffff',
         labelColor: '#666666',
@@ -14359,8 +14364,8 @@ const darkTheme = {
     global: {
         borderColor: '#3a3a3a',
         dividerColor: '#3a3a3a',
-        focusColor: '#4da3ff',
-        focusRingColor: 'rgba(0, 122, 255, 0.4)',
+        focusColor: '#ffffff',
+        focusRingColor: '#ffffff',
         hoverBackground: 'hsl(0, 0%, 100%, 8%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#555555',
@@ -14445,7 +14450,7 @@ const darkTheme = {
         backButtonColor: '#e0e0e0',
         backgroundColor: '#2a2a2a',
         detailBackgroundColor: '#2a2a2a',
-        detailFocusOutline: '2px solid #0A84FF',
+        detailFocusOutline: '2px solid #ffffff',
         menuBackgroundColor: '#2a2a2a',
         menuBorderRight: '1px solid #3a3a3a',
         menuItemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
@@ -14453,7 +14458,7 @@ const darkTheme = {
         menuItemChevronColor: '#666666',
         menuItemColor: '#e0e0e0',
         menuItemDisabledColor: '#666666',
-        menuItemFocusOutline: '2px solid #0A84FF',
+        menuItemFocusOutline: '2px solid #ffffff',
         menuItemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
         menuItemSelectedBackgroundColor: '#0A84FF',
         menuItemSelectedColor: '#ffffff',
@@ -14467,9 +14472,14 @@ const darkTheme = {
         itemChildOpenBackgroundColor: 'hsl(0, 0%, 100%, 6%)',
         itemColor: '#e0e0e0',
         itemEditingBackgroundColor: '#3a3a3a',
-        itemInputBorder: '1px solid #4a4a4a',
-        itemInputSelectionColor: 'rgba(255, 255, 255, 0.2)',
+        itemInputBorder: '1px solid #ffffff',
+        itemInputBorderColorOnSelected: '#ffffff',
+        itemInputCaretColor: '#e0e0e0',
+        itemInputCaretColorOnSelected: '#ffffff',
+        itemInputSelectionColor: '#b0b0b0',
+        itemInputSelectionColorOnSelected: 'rgba(255, 255, 255, 0.35)',
         itemInputSelectionTextColor: '#ffffff',
+        itemInputSelectionTextColorOnSelected: '#ffffff',
         itemOverlayBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
         itemSelectedBackgroundColor: '#0A84FF',
         itemSelectedColor: '#ffffff',
@@ -14486,7 +14496,7 @@ const darkTheme = {
     },
     numericInput: {
         borderColor: '#3a3a3a',
-        focusBorderColor: '#0A84FF',
+        focusBorderColor: '#ffffff',
         hoverBorderColor: '#4a4a4a',
         inputBackground: '#1a1a1a',
         labelColor: '#999999',
@@ -17139,8 +17149,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Refreshes the selection group's bounding box dimensions based on contained objects.
      * @param cachedObjects Optional pre-fetched objects array to avoid redundant getter calls
+     * @param skipPersist If true, only updates local state without persisting to Yjs (used during undo/redo)
      */
-    refreshObjectDimensions(cachedObjects) {
+    refreshObjectDimensions(cachedObjects, skipPersist = false) {
         const children = cachedObjects ?? this.objects;
         if (children.length === 1) {
             const obj = children[0];
@@ -17194,7 +17205,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
             this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
-        this._core.store.state.objects.update(this);
+        if (!skipPersist) {
+            this._core.store.state.objects.update(this);
+        }
     }
     getOffsetXToCenterFromSnapshot(snapshot) {
         const objCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-B2cKxcY4.js');
+var defaultLineTool_config = require('./default-line-tool.config-qD8Chdg7.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-NMqsANCI.js');
-var defaultLineTool_config = require('./default-line-tool.config-B2cKxcY4.js');
+var defaultLineTool_config = require('./default-line-tool.config-qD8Chdg7.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1707,6 +1707,9 @@ const KritzelEditor = class {
                 this.host.style.setProperty('--kritzel-editor-top-left-buttons-top', '14px');
                 this.host.style.setProperty('--kritzel-editor-top-left-buttons-left', '14px');
                 this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
+                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
+                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
+                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
                 break;
             default:
                 // Default for Windows/Linux
@@ -1717,7 +1720,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1dc0bfe139e0383b8f073b2cf7acf2b5b50e5773' }, index.h("div", { key: '53b2a94966dd55d2e68aaca65c4db4adac0438af', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '10b7fac0f0c14ff601e5fe2246a26bc27d696c9b', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '8229824f2c2e5d6cb40b2bcdf9f177e355ce9efe', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '88e3ca9cf93126253001c46a624dc984e0377398', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, theme: this.currentTheme, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), index.h("kritzel-controls", { key: 'e1f2764bd681081e09006bffb883ea0a0e62e0e5', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'ae98cca57bd7a585d0745309be70783abfddcd05', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'e531ad0d3c8fc1e07fe371eaf92f698df8f0a5bb', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '9ea067a702c3bd9c793b0815e7323010e99ced58', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), index.h("kritzel-more-menu", { key: 'a2cc1378bfe075614cb1aebf82c584ea710dba00', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
+        return (index.h(index.Host, { key: '504b454589f58230a4b600c92c1b3d25dbf60d03' }, index.h("div", { key: '3aa0402736696e08a98cf2d432fb8c8a3c7e1733', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'de39b646dad1038691b915d7e108366f30402d32', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '0481fc6b9da1b1b99f8f743cbe297cbc9a466fcb', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '32479175979f27df2bea0869f72c31e51a6a4ace', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, theme: this.currentTheme, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), index.h("kritzel-controls", { key: 'b385ec06dc2fc8a7322c2a2dcdbfeb1d6b55ba3f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'd946d1a4bbec0ee40ca06d3ebde286b0ee6aedd8', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '8dd98b1d9e69a94c2a6fd3d3aa44e37ff14ac195', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '6e9bac15a07625fc4222aebe8f46ea06e92fd444', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), index.h("kritzel-more-menu", { key: '3daeece622c5c6a65790159c438ed11649442666', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -19940,9 +19943,12 @@ class KritzelObjectMap {
             // 1. The serialized state contains the old bounding box
             // 2. The child objects have been reverted to their previous positions
             // We need to invalidate the cache and recalculate dimensions
+            // skipPersist=true prevents creating new undo entries
             object.invalidateObjectsCache();
-            object.refreshObjectDimensions();
+            object.refreshObjectDimensions(undefined, true);
             object.captureUnchangedSnapshots();
+            // Update quadtree again with corrected dimensions
+            this.quadtree.update(object);
         });
         // If regular objects were changed but their SelectionGroup wasn't explicitly updated,
         // we still need to refresh that SelectionGroup's dimensions
@@ -19957,8 +19963,10 @@ class KritzelObjectMap {
                 const hasChangedChildren = selectionGroup.objectIds.some(id => changedObjectIds.has(id));
                 if (hasChangedChildren) {
                     selectionGroup.invalidateObjectsCache();
-                    selectionGroup.refreshObjectDimensions();
+                    selectionGroup.refreshObjectDimensions(undefined, true);
                     selectionGroup.captureUnchangedSnapshots();
+                    // Update quadtree with corrected dimensions
+                    this.quadtree.update(selectionGroup);
                 }
             }
         }
@@ -23076,7 +23084,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss();
 
-const kritzelLineEndingsCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.endings-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:12px;font-weight:500;color:var(--kritzel-line-endings-label-color, #666666);padding-left:4px}.endings-row{display:flex;align-items:center;gap:4px}.ending-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-line-endings-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.ending-option:hover{background-color:var(--kritzel-line-endings-hover-background-color, #ebebeb)}.ending-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-line-endings-selected-background-color, #ebebeb)}.ending-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.ending-icon{width:100%;height:100%}`;
+const kritzelLineEndingsCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.endings-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:12px;font-weight:500;color:var(--kritzel-line-endings-label-color, #666666);padding-left:4px}.endings-row{display:flex;align-items:center;gap:4px}.ending-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-line-endings-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.ending-option:hover{background-color:var(--kritzel-line-endings-hover-background-color, #ebebeb)}.ending-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-line-endings-selected-background-color, #ebebeb)}.ending-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.ending-icon{width:100%;height:100%}`;
 
 const KritzelLineEndings = class {
     constructor(hostRef) {
@@ -23274,7 +23282,7 @@ const KritzelMasterDetail = class {
 };
 KritzelMasterDetail.style = kritzelMasterDetailCss();
 
-const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
+const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
 
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -23342,7 +23350,7 @@ const KritzelMenu = class {
 };
 KritzelMenu.style = kritzelMenuCss();
 
-const kritzelMenuItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}`;
+const kritzelMenuItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}`;
 
 const KritzelMenuItem = class {
     constructor(hostRef) {
@@ -23369,15 +23377,19 @@ const KritzelMenuItem = class {
     isDirty = false;
     inputRef;
     focusInput() {
-        if (this.item.isEditing && this.inputRef && !this.isDirty) {
-            this.inputRef.focus();
-            if (defaultLineTool_config.KritzelDevicesHelper.isIOS()) {
-                const length = this.inputRef.value.length;
-                this.inputRef.setSelectionRange(length, length);
-            }
-            else {
-                this.inputRef.select();
-            }
+        if (this.item.isEditing && !this.isDirty) {
+            requestAnimationFrame(() => {
+                if (this.inputRef) {
+                    this.inputRef.focus();
+                    if (defaultLineTool_config.KritzelDevicesHelper.isIOS()) {
+                        const length = this.inputRef.value.length;
+                        this.inputRef.setSelectionRange(length, length);
+                    }
+                    else {
+                        this.inputRef.select();
+                    }
+                }
+            });
         }
     }
     componentDidLoad() {
@@ -23438,12 +23450,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'bea20089a9eeb66c9573187b2cccdfe220460f70', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '5b28ce1fb159d55269af71327bf6b6dfa9110359', 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: 'd877be4a4f51d6e342b3602769990e4592355686', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: 'd8f46ef40ec54898b3f611eac1af94cbc6015e98', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -23603,7 +23615,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 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 3px var(--kritzel-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) {
@@ -23911,7 +23923,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.29';
+const KRITZEL_VERSION = '0.1.31';
 
 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:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 
@@ -24014,7 +24026,7 @@ const KritzelSettings = class {
 };
 KritzelSettings.style = kritzelSettingsCss();
 
-const kritzelShapeFillCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}`;
+const kritzelShapeFillCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}`;
 
 const KritzelShapeFill = class {
     constructor(hostRef) {
@@ -24048,7 +24060,7 @@ const KritzelShapeFill = class {
 };
 KritzelShapeFill.style = kritzelShapeFillCss();
 
-const kritzelSlideToggleCss = () => `:host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}`;
+const kritzelSlideToggleCss = () => `:host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}`;
 
 const KritzelSlideToggle = class {
     constructor(hostRef) {

package/dist/collection/classes/objects/selection-group.class.js

@@ -308,8 +308,9 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Refreshes the selection group's bounding box dimensions based on contained objects.
      * @param cachedObjects Optional pre-fetched objects array to avoid redundant getter calls
+     * @param skipPersist If true, only updates local state without persisting to Yjs (used during undo/redo)
      */
-    refreshObjectDimensions(cachedObjects) {
+    refreshObjectDimensions(cachedObjects, skipPersist = false) {
         const children = cachedObjects ?? this.objects;
         if (children.length === 1) {
             const obj = children[0];
@@ -363,7 +364,9 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
             this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
             this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
-        this._core.store.state.objects.update(this);
+        if (!skipPersist) {
+            this._core.store.state.objects.update(this);
+        }
     }
     getOffsetXToCenterFromSnapshot(snapshot) {
         const objCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;

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

@@ -166,9 +166,12 @@ export class KritzelObjectMap {
             // 1. The serialized state contains the old bounding box
             // 2. The child objects have been reverted to their previous positions
             // We need to invalidate the cache and recalculate dimensions
+            // skipPersist=true prevents creating new undo entries
             object.invalidateObjectsCache();
-            object.refreshObjectDimensions();
+            object.refreshObjectDimensions(undefined, true);
             object.captureUnchangedSnapshots();
+            // Update quadtree again with corrected dimensions
+            this.quadtree.update(object);
         });
         // If regular objects were changed but their SelectionGroup wasn't explicitly updated,
         // we still need to refresh that SelectionGroup's dimensions
@@ -183,8 +186,10 @@ export class KritzelObjectMap {
                 const hasChangedChildren = selectionGroup.objectIds.some(id => changedObjectIds.has(id));
                 if (hasChangedChildren) {
                     selectionGroup.invalidateObjectsCache();
-                    selectionGroup.refreshObjectDimensions();
+                    selectionGroup.refreshObjectDimensions(undefined, true);
                     selectionGroup.captureUnchangedSnapshots();
+                    // Update quadtree with corrected dimensions
+                    this.quadtree.update(selectionGroup);
                 }
             }
         }

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

@@ -316,6 +316,9 @@ export class KritzelEditor {
                 this.host.style.setProperty('--kritzel-editor-top-left-buttons-top', '14px');
                 this.host.style.setProperty('--kritzel-editor-top-left-buttons-left', '14px');
                 this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
+                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
+                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
+                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
                 break;
             default:
                 // Default for Windows/Linux
@@ -326,7 +329,7 @@ export class KritzelEditor {
         }
     }
     render() {
-        return (h(Host, { key: '1dc0bfe139e0383b8f073b2cf7acf2b5b50e5773' }, h("div", { key: '53b2a94966dd55d2e68aaca65c4db4adac0438af', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '10b7fac0f0c14ff601e5fe2246a26bc27d696c9b', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '8229824f2c2e5d6cb40b2bcdf9f177e355ce9efe', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '88e3ca9cf93126253001c46a624dc984e0377398', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, theme: this.currentTheme, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), h("kritzel-controls", { key: 'e1f2764bd681081e09006bffb883ea0a0e62e0e5', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'ae98cca57bd7a585d0745309be70783abfddcd05', class: "top-right-buttons" }, h("kritzel-settings", { key: 'e531ad0d3c8fc1e07fe371eaf92f698df8f0a5bb', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '9ea067a702c3bd9c793b0815e7323010e99ced58', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), h("kritzel-more-menu", { key: 'a2cc1378bfe075614cb1aebf82c584ea710dba00', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
+        return (h(Host, { key: '504b454589f58230a4b600c92c1b3d25dbf60d03' }, h("div", { key: '3aa0402736696e08a98cf2d432fb8c8a3c7e1733', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'de39b646dad1038691b915d7e108366f30402d32', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '0481fc6b9da1b1b99f8f743cbe297cbc9a466fcb', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '32479175979f27df2bea0869f72c31e51a6a4ace', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, theme: this.currentTheme, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), h("kritzel-controls", { key: 'b385ec06dc2fc8a7322c2a2dcdbfeb1d6b55ba3f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'd946d1a4bbec0ee40ca06d3ebde286b0ee6aedd8', class: "top-right-buttons" }, h("kritzel-settings", { key: '8dd98b1d9e69a94c2a6fd3d3aa44e37ff14ac195', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '6e9bac15a07625fc4222aebe8f46ea06e92fd444', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), h("kritzel-more-menu", { key: '3daeece622c5c6a65790159c438ed11649442666', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css

@@ -51,7 +51,7 @@
 
 .ending-option:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
 }
 
 .ending-icon {

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

@@ -17,6 +17,7 @@
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   outline: none;
+  clip-path: inset(0 round var(--kritzel-menu-border-radius, 12px));
 }
 
 :host:focus-visible {

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css

@@ -40,6 +40,8 @@
 
 :host(.selected) .edit-input {
   color: var(--kritzel-menu-item-selected-color, #ffffff);
+  caret-color: var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);
+  border-color: var(--kritzel-menu-item-input-border-color-on-selected, #ffffff);
 }
 
 :host(.selected) .action-button kritzel-icon {
@@ -51,7 +53,8 @@ kritzel-icon {
 }
 
 :host(.selected) .edit-input::selection {
-  background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));
+  background-color: var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));
+  color: var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff);
 }
 
 :host(.editing) {
@@ -121,6 +124,10 @@ kritzel-icon {
   color: inherit;
 }
 
+.edit-input {
+  caret-color: var(--kritzel-menu-item-input-caret-color, currentColor);
+}
+
 .edit-input::selection {
   background-color: var(--kritzel-menu-item-input-selection-color, #007bff);
   color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -17,15 +17,19 @@ export class KritzelMenuItem {
     isDirty = false;
     inputRef;
     focusInput() {
-        if (this.item.isEditing && this.inputRef && !this.isDirty) {
-            this.inputRef.focus();
-            if (KritzelDevicesHelper.isIOS()) {
-                const length = this.inputRef.value.length;
-                this.inputRef.setSelectionRange(length, length);
-            }
-            else {
-                this.inputRef.select();
-            }
+        if (this.item.isEditing && !this.isDirty) {
+            requestAnimationFrame(() => {
+                if (this.inputRef) {
+                    this.inputRef.focus();
+                    if (KritzelDevicesHelper.isIOS()) {
+                        const length = this.inputRef.value.length;
+                        this.inputRef.setSelectionRange(length, length);
+                    }
+                    else {
+                        this.inputRef.select();
+                    }
+                }
+            });
         }
     }
     componentDidLoad() {
@@ -86,12 +90,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: 'bea20089a9eeb66c9573187b2cccdfe220460f70', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '5b28ce1fb159d55269af71327bf6b6dfa9110359', 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 }, h("div", { key: 'd877be4a4f51d6e342b3602769990e4592355686', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'd8f46ef40ec54898b3f611eac1af94cbc6015e98', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.css

@@ -77,9 +77,9 @@
 }
 
 .opacity-slider:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+  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 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
 }

package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css

@@ -38,7 +38,7 @@
 
 .fill-option:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
 }
 
 .fill-icon {

package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css

@@ -8,7 +8,7 @@
 }
 
 :host(:focus-visible) .toggle-track {
-  box-shadow: 0 0 0 3px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
 }
 
 :host(.disabled) {

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.1.29';
+export const KRITZEL_VERSION = '0.1.31';