kritzel-stencil 0.0.152 → 0.0.154

package/dist/esm/kritzel-color_22.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
-import { T as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, U as KritzelMouseButton, M as KritzelSelectionTool, R as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, S as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, Q as KritzelWorkspace, V as KritzelKeyboardHelper, W as KritzelBaseHandler, X as KritzelToolRegistry, Y as KritzelSelectionBox, Z as KritzelSelectionGroup, _ as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, $ as Doc, a0 as DEFAULT_SYNC_CONFIG, a1 as UndoManager, P as KritzelAppStateMap, a2 as ObjectHelper, a3 as KritzelEventHelper, a4 as KritzelBaseTool } from './default-text-tool.config-Bcel-KfG.js';
+import { T as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, U as KritzelMouseButton, M as KritzelSelectionTool, R as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, S as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, Q as KritzelWorkspace, V as KritzelKeyboardHelper, W as KritzelBaseHandler, X as KritzelToolRegistry, Y as KritzelSelectionBox, Z as KritzelSelectionGroup, _ as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, $ as Doc, a0 as DEFAULT_SYNC_CONFIG, a1 as UndoManager, P as KritzelAppStateMap, a2 as ObjectHelper, a3 as KritzelEventHelper, a4 as KritzelBaseTool } from './default-text-tool.config-2YFQA3SF.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -60,7 +60,7 @@ const KritzelColor = class {
 };
 KritzelColor.style = kritzelColorCss;
 
-const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
 const KritzelColorPalette = class {
     constructor(hostRef) {
@@ -159,7 +159,7 @@ const KritzelContextMenu = class {
 };
 KritzelContextMenu.style = kritzelContextMenuCss;
 
-const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
+const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
 
 const KritzelControlBrushConfig = class {
     constructor(hostRef) {
@@ -247,7 +247,7 @@ const KritzelControlTextConfig = class {
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -258,6 +258,7 @@ const KritzelControls = class {
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
+    undoState = null;
     isControlsReady;
     firstConfig = null;
     isTooltipVisible = false;
@@ -350,13 +351,13 @@ const KritzelControls = class {
     }
     render() {
         const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: 'ab3e5f078d6d197c6e10c9dee180c04ef85281bf', class: {
+        return (h(Host, { key: '6ea9de8d541e3fc02c5ceeebf4c2c5fb4d8ad926', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '290ceb6f2c46eb7e869a4741dd6600bc7c47bbb4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7506b42f05c3f49aa5c936d267c5de44b3ebb9cd', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'd2590bc56b709e77910e7159296741c8859158d7', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1299fce4adea3f9a529bbaf73d35e2676b6850e4', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
@@ -628,6 +629,8 @@ const KritzelEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.isReady = createEvent(this, "isReady");
+        this.objectsChange = createEvent(this, "objectsChange");
+        this.undoStateChange = createEvent(this, "undoStateChange");
     }
     get host() { return getElement(this); }
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -701,12 +704,15 @@ const KritzelEditor = class {
     isUtilityPanelVisible = true;
     syncConfig;
     isReady;
+    objectsChange;
+    undoStateChange;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
     workspaces = [];
     activeWorkspace;
     isVirtualKeyboardOpen = false;
+    undoState = null;
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -725,7 +731,7 @@ const KritzelEditor = class {
             }
         }
     }
-    handleTouchStart(event) {
+    onTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
         }
@@ -796,6 +802,16 @@ const KritzelEditor = class {
         this.activeWorkspace = event.detail.activeWorkspace;
         this.workspaces = event.detail.workspaces;
     }
+    handleWorkspacesChange(event) {
+        this.workspaces = event.detail;
+    }
+    handleObjectsChange(event) {
+        this.objectsChange.emit(event.detail);
+    }
+    handleUndoStateChange(event) {
+        this.undoStateChange.emit(event.detail);
+        this.undoState = event.detail;
+    }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
             KritzelIconRegistry.register(name, svg);
@@ -833,7 +849,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '97ab11381c7ba448814b6b463a3bd9135e5d328f' }, h("kritzel-workspace-manager", { key: '2eb9bb27e0e613537a2ceea4144a7753313d1c78', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '4c3b68eec1c2e2ac879a6fb34edcefcefdf2cea7', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => (this.workspaces = event.detail) }), h("kritzel-controls", { key: 'beef7d08c44673a50184722a8201a12bf4635ce8', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: '87983fe2d4fcdbf226851190e7529f12e7b5fdbf' }, h("kritzel-workspace-manager", { key: 'a1e0f522a7075ef4e2b5eab47dab5dc77098b402', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '18e78080712e53ead39ff07e43b7035e43a096f2', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, 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) }), h("kritzel-controls", { key: '5ffaebbbeecbeebab050b3f990d027c6653a1940', 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, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
@@ -18057,6 +18073,7 @@ var lodashExports = requireLodash();
 class KritzelViewport {
     _core;
     _debounceUpdate;
+    _debounceEndScaling;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -18072,6 +18089,10 @@ class KritzelViewport {
         this._debounceUpdate = lodashExports.debounce(() => {
             this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
         }, 300);
+        this._debounceEndScaling = lodashExports.debounce(() => {
+            this._core.store.state.isScaling = false;
+            this._core.rerender();
+        }, 100);
     }
     handleResize() {
         this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
@@ -18094,7 +18115,7 @@ class KritzelViewport {
             if (activePointers.length === 2) {
                 const currentPath = this._core.store.currentPath;
                 if (currentPath) {
-                    this._core.store.state.objectsMap.remove(obj => obj.id === currentPath.id);
+                    this._core.store.state.objects.remove(obj => obj.id === currentPath.id);
                 }
                 this._core.store.state.isScaling = true;
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
@@ -18174,10 +18195,7 @@ class KritzelViewport {
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.pointers.size === 0) {
-                setTimeout(() => {
-                    this._core.store.state.isScaling = false;
-                    this._core.rerender();
-                }, 300);
+                this._debounceEndScaling();
             }
         }
     }
@@ -18216,8 +18234,9 @@ class KritzelViewport {
         const yRelativeToHost = event.clientY - rect.top;
         this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
         this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
-        const delta = event.deltaY > 0 ? -this._core.store.state.scaleStep * this._core.store.state.scale : this._core.store.state.scaleStep * this._core.store.state.scale;
-        const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale + delta));
+        const rawScaleFactor = 1 + (event.deltaY * -0.012);
+        const scaleFactor = Math.max(0.8, Math.min(1.2, rawScaleFactor));
+        const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale * scaleFactor));
         const scaleRatio = newScale / this._core.store.state.scale;
         const translateXAdjustment = (xRelativeToHost - this._core.store.state.translateX) * (scaleRatio - 1);
         const translateYAdjustment = (yRelativeToHost - this._core.store.state.translateY) * (scaleRatio - 1);
@@ -18227,9 +18246,7 @@ class KritzelViewport {
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
-        setTimeout(() => {
-            this._core.store.state.isScaling = false;
-        }, 300);
+        this._debounceEndScaling();
     }
     handlePan(event) {
         const panSpeed = 0.8;
@@ -18316,7 +18333,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         const selectionTool = this._core.store.state.activeTool;
         selectionTool?.moveHandler?.cancelPendingDrag();
         if (this._core.store.selectionBox) {
-            this._core.store.state.objectsMap.remove(object => object instanceof KritzelSelectionBox);
+            this._core.store.state.objects.remove(object => object instanceof KritzelSelectionBox);
             this._core.store.state.isSelecting = false;
         }
         const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
@@ -18365,7 +18382,7 @@ const DEFAULT_ENGINE_CONFIG = {
     activeWorkspace: null,
     activeTool: null,
     copiedObjects: null,
-    objectsMap: null,
+    objects: null,
     resizeHandleType: null,
     hasViewportChanged: false,
     hasObjectsChanged: false,
@@ -18398,7 +18415,6 @@ const DEFAULT_ENGINE_CONFIG = {
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
-    scaleStep: 0.075,
     startX: 0,
     startY: 0,
     translateX: 0,
@@ -18464,7 +18480,7 @@ class KritzelCustomElement extends KritzelBaseObject {
             this.element.style.height = `${height}px`;
         }
         // Update to sync changes to y.js and propagate to other tabs
-        this._core.store.state.objectsMap.update(this);
+        this._core.store.state.objects.update(this);
     }
     copy() {
         const copiedObject = Object.create(Object.getPrototypeOf(this));
@@ -18556,6 +18572,14 @@ class KritzelObjectMap {
     get workspaceId() {
         return this._workspaceId;
     }
+    get undoState() {
+        return {
+            canUndo: this._undoManager ? this._undoManager.canUndo() : false,
+            canRedo: this._undoManager ? this._undoManager.canRedo() : false,
+            undoStackSize: this._undoManager ? this._undoManager.undoStack.length : 0,
+            redoStackSize: this._undoManager ? this._undoManager.redoStack.length : 0,
+        };
+    }
     constructor() {
         this.map = new Map();
     }
@@ -18739,11 +18763,13 @@ class KritzelObjectMap {
     undo() {
         if (this._undoManager && this._undoManager.canUndo()) {
             this._undoManager.undo();
+            this._core.engine.emitObjectsChange();
         }
     }
     redo() {
         if (this._undoManager && this._undoManager.canRedo()) {
             this._undoManager.redo();
+            this._core.engine.emitObjectsChange();
         }
     }
     canUndo() {
@@ -18831,31 +18857,31 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return Math.max(0, ...this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
+        return Math.max(0, ...this._state.objects.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     get allObjects() {
-        return this._state.objectsMap.allObjects();
+        return this._state.objects.allObjects();
     }
     get allNonSelectionObjects() {
-        return this._state.objectsMap.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
+        return this._state.objects.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
     }
     get selectedObjects() {
         return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
     }
     get selectionBox() {
-        const selectionBoxes = this._state.objectsMap.filter(o => o instanceof KritzelSelectionBox);
+        const selectionBoxes = this._state.objects.filter(o => o instanceof KritzelSelectionBox);
         return selectionBoxes.length > 0 ? selectionBoxes[0] : null;
     }
     get selectionGroup() {
-        const selectionGroups = this._state.objectsMap.filter(o => o instanceof KritzelSelectionGroup);
+        const selectionGroups = this._state.objects.filter(o => o instanceof KritzelSelectionGroup);
         return selectionGroups.length > 0 ? selectionGroups[0] : null;
     }
     get activeText() {
-        const activeTexts = this._state.objectsMap.filter(o => o instanceof KritzelText && o.isEditing);
+        const activeTexts = this._state.objects.filter(o => o instanceof KritzelText && o.isEditing);
         return activeTexts.length > 0 ? activeTexts[0] : null;
     }
     get currentPath() {
-        const drawingPaths = this._state.objectsMap.filter(o => o instanceof KritzelPath && o.isCompleted === false);
+        const drawingPaths = this._state.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
         return drawingPaths.length > 0 ? drawingPaths[0] : null;
     }
     get offsetX() {
@@ -18869,7 +18895,7 @@ class KritzelStore {
     }
     constructor(state) {
         this._state = state;
-        this._state.objectsMap = new KritzelObjectMap();
+        this._state.objects = new KritzelObjectMap();
     }
     onStateChange(property, listener) {
         if (!this._listeners.has(property)) {
@@ -18966,8 +18992,8 @@ class KritzelCore {
             this.saveWorkspaceToAppState(activeWorkspace);
         }
         // Destroy old ObjectMap if switching workspaces
-        if (this._store.state.objectsMap && this._store.state.objectsMap.isReady) {
-            this._store.state.objectsMap.destroy();
+        if (this._store.state.objects && this._store.state.objects.isReady) {
+            this._store.state.objects.destroy();
         }
         // Set active workspace
         this._store.state.activeWorkspace = activeWorkspace;
@@ -18980,7 +19006,8 @@ class KritzelCore {
         // Create new ObjectMap with its own Y.Doc for this workspace
         const objectsMap = new KritzelObjectMap();
         await objectsMap.initialize(this, activeWorkspace.id, this._syncConfig);
-        this._store.state.objectsMap = objectsMap;
+        this._store.state.objects = objectsMap;
+        this.engine.emitObjectsChange();
         this.rerender();
     }
     rerender() {
@@ -19019,7 +19046,7 @@ class KritzelCore {
     deleteWorkspace(workspace) {
         // If deleting the active workspace, need to handle ObjectMap cleanup
         if (this._store.state.activeWorkspace?.id === workspace.id) {
-            this._store.state.objectsMap?.destroy();
+            this._store.state.objects?.destroy();
         }
         this.deleteWorkspaceFromAppState(workspace.id);
         this._store.state.workspaces = this.loadWorkspacesFromAppState();
@@ -19037,11 +19064,11 @@ class KritzelCore {
         this.saveWorkspaceToAppState(activeWorkspace);
     }
     addObject(object) {
-        this._store.state.objectsMap.insert(object);
+        this._store.state.objects.insert(object);
     }
     removeObject(object) {
         object.isMounted = false;
-        this._store.state.objectsMap.remove(o => o.id === object.id);
+        this._store.state.objects.remove(o => o.id === object.id);
     }
     updateObject(object, updatedProperties) {
         for (const key in updatedProperties) {
@@ -19049,23 +19076,23 @@ class KritzelCore {
                 object[key] = updatedProperties[key];
             }
         }
-        this._store.state.objectsMap.update(object);
+        this._store.state.objects.update(object);
     }
     addSelectionGroup(selectionGroup) {
         this.removeSelectionGroup();
         this.removeSelectionBox();
-        this._store.state.objectsMap.insert(selectionGroup);
+        this._store.state.objects.insert(selectionGroup);
     }
     removeSelectionGroup() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
-            this._store.state.objectsMap.remove(object => object.id === selectionGroup.id);
+            this._store.state.objects.remove(object => object.id === selectionGroup.id);
         }
     }
     removeSelectionBox() {
         const selectionBox = this._store.selectionBox;
         if (selectionBox) {
-            this._store.state.objectsMap.remove(object => object.id === selectionBox.id);
+            this._store.state.objects.remove(object => object.id === selectionBox.id);
         }
     }
     deselectAllObjects() {
@@ -19082,10 +19109,10 @@ class KritzelCore {
         this.rerender();
     }
     undo() {
-        this._store.state.objectsMap?.undo();
+        this._store.state.objects?.undo();
     }
     redo() {
-        this._store.state.objectsMap?.redo();
+        this._store.state.objects?.redo();
     }
     deleteObject(id) {
         const object = this.findObjectById(id);
@@ -19181,6 +19208,7 @@ class KritzelCore {
             this._store.state.copiedObjects = newSelectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
         }
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.engine.emitObjectsChange();
         this.rerender();
     }
     bringForward(object) {
@@ -19244,7 +19272,7 @@ class KritzelCore {
         this.rerender();
     }
     selectAllObjectsInViewport() {
-        const objectsInViewport = this._store.state.objectsMap
+        const objectsInViewport = this._store.state.objects
             .filter(o => o.isInViewport())
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
@@ -19265,7 +19293,7 @@ class KritzelCore {
     }
     clearSelection() {
         this.removeSelectionGroup();
-        this._store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._store.state.objects.remove(o => o instanceof KritzelSelectionBox || o instanceof KritzelSelectionGroup);
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
@@ -19383,7 +19411,13 @@ const KritzelEngine = class {
     activeToolChange;
     workspacesChange;
     longpress;
+    objectsChange;
+    undoStateChange;
     forceUpdate = 0;
+    throttledWheel = lodashExports.throttle((ev) => {
+        this.viewport.handleWheel(ev);
+        this.core.store.state?.activeTool?.handleWheel(ev);
+    }, 16);
     handleWheel(ev) {
         if (this.core.store.isDisabled) {
             return;
@@ -19391,8 +19425,7 @@ const KritzelEngine = class {
         if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
-        this.viewport.handleWheel(ev);
-        this.core.store.state?.activeTool?.handleWheel(ev);
+        this.throttledWheel(ev);
     }
     handlePointerDown(ev) {
         if (this.core.store.isDisabled) {
@@ -19527,7 +19560,7 @@ const KritzelEngine = class {
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
         this.core.store.state.isContextMenuVisible = false;
-        this.core.store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox);
+        this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
         this.core.rerender();
@@ -19554,7 +19587,7 @@ const KritzelEngine = class {
     }
     async removeObject(object) {
         this.core.deselectAllObjects();
-        this.core.removeObject(object);
+        this.core.store.state.objects.remove(o => o.id === object.id);
         this.core.rerender();
         return object;
     }
@@ -19622,9 +19655,12 @@ const KritzelEngine = class {
         this.activeToolChange = createEvent(this, "activeToolChange");
         this.workspacesChange = createEvent(this, "workspacesChange");
         this.longpress = createEvent(this, "longpress");
+        this.objectsChange = createEvent(this, "objectsChange");
+        this.undoStateChange = createEvent(this, "undoStateChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
+        this.throttledWheel.cancel();
         this.throttledPointerMoveMulti.cancel();
     }
     componentWillLoad() {
@@ -19653,13 +19689,19 @@ const KritzelEngine = class {
             this.isEngineReady.emit(this.core.store.state);
         }
     }
+    emitObjectsChange() {
+        const objects = this.core.store.allObjects;
+        const undoState = this.core.store.state.objects.undoState;
+        this.objectsChange.emit(objects);
+        this.undoStateChange.emit(undoState);
+    }
     _registerStateChangeListeners() {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
-            this.core.store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox);
+            this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
@@ -19677,11 +19719,12 @@ const KritzelEngine = class {
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
-        return (h(Host, { key: '3e05ce246b599985a06e54e0d81a63b4765ff506' }, h("div", { key: '6169eb0566bb2965c7d1569492a62a1ef1d4b7ef', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '598db5c39099553997248086e392c168c583aca9' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '6d5de3390f2e32dbaa7fe52521b8fd9c0e8706de' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '6006c27d020aeea24170a09140e3bc5c2ea459cf' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'edfa3cb59d47df747dc9f003ce08345348ba586d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '799f714d6e4b129f59be7cbc52f657e9b21f9879' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '4a8f545cf72fe496abf18a4907743ac6b46ef889' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '8e665e3c23424cb4e76b2d4354bb4472a5b3ddbe' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'c168b114e204b90dafaf8736a571171a748047c1' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'bee83601a571727a06235c674e7300cdc398dfac' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '0a2f5f36143c587ddc9b3ae487ce32196cd17232' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '515959ec3700ecdc9dd3ca9183bfacd854d173d2' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '5a9ca8f3ba91f10e9d6bec07c6005c1e43713d69' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'f5d1a5d59828be47be31e794b3b41c1e14c50780' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1db8cdad160c131542fd787d104b4b979415ec4c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'baae83187cfb4c21ea07c7834017df92a7340d5b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '6b248cb6fad7fb4dd5162fb2529dfec821a708fc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '0eae863f48c27867d0fa0f8c767b50c13be48271' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a4ca58af5858725d4f1d0e00547e6e42365cb8fe' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '8f978714060623d3daa9454e04ef929b1f02b143' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9b274d7785a9e4a36128c273bcee6b692d815a86' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0c248bc24c164c4c52fb06b17347f107e3f0995f' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '21f3664f0978f308d88a976c47b875dd5bb08b95' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'e1161aa45ea02de914e01a93ec159447b5e17e8b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '87249fcc3f23632739631b8fdbc64371694d6206', id: "origin", class: "origin", style: {
+        // Performance optimization: skip viewport filtering during scaling/panning
+        const visibleObjects = this.core.store.state.objects.allObjects().filter(obj => obj.isInViewport());
+        return (h(Host, { key: '27fe100b91431ac60e92bf760037cc447a63e38a' }, h("div", { key: '7e114372f5fa323a859157f3755d3fa5d4b08d47', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '1863b8445ddd28130a54e02bb89d9ed274f8260c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '1640063aec9f5afd6ac967d7f65d99b36795bc3a' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '199c6d4f705f5ae11b36e1d1331a580248ae0084' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '274033ad94cf606bc23200964ed9243f62150b86' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'cc8779f3a09206db0bbad9703a85c824439a7937' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '043c6e466232f30d352c059090a577555ed77408' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'ccc766354a394c94ae72152b56b3b3be127fb81f' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '02ad8120fb92b4f03b658c64370dedf263c1379c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '5ae8ad9b57519bb6a37878a9c2705e516f3938c8' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '2087eeeba5781392f25fc68b055c58304533a4ac' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'e144771bcf53633acc0f9c5dd67cd47a39e9fdc4' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'ca6ab6ec3fe102fef9439d345784a6d665f5830d' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '39771b31899d1d8a03866327b003f6a136465ef6' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'a018739b027928ea79199c87236f539031c75665' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9a726c78db50c847990a0da94d47944ab67a4032' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '4a071e003c6829fd77e24feff0505179e4ddb6e5' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '5de9101a5f8adc50d0205d1dc2c9c6ecfaee775b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b7cc40f141d38f1c44504537cb17d3715c463ef6' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'ec70a94cedaa20185c736619aeed903d47873a26' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '004ba71d21b338ea4ccea9c2bd7a7e910d5fad5f' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '8e0b4ce18754f469a1cb86fc411090333e12f59f' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'bb439deff145d1b362580945fedfa294c85e3a4d' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'ffdaa445890c5e86eb38a746d4ac6d35cd9e132a' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '7770448d56a980d9c68cf95cc3deb81c00c0eb6f', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
-            } }, this.core.store.state.objectsMap.allObjects()?.map(object => {
+            } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
-                    display: object.isInViewport() ? 'block' : 'none',
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     zIndex: object.zIndex.toString(),
@@ -19711,7 +19754,7 @@ const KritzelEngine = class {
                     width: object?.width.toString(),
                     position: 'absolute',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": "auto" }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
@@ -19744,48 +19787,55 @@ const KritzelEngine = class {
                     borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
                     borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
                     borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
-                } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                } })), object.isSelected && (h("svg", { style: {
+                    height: object?.height.toString(),
+                    width: object?.width.toString(),
+                    position: 'absolute',
+                    overflow: 'visible',
+                    top: '0',
+                    left: '0',
+                } }, h("g", { class: "selection-borders" }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                } }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                } }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                } }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }))))), object.isSelected && !this.isSelecting && (h("g", { class: "selection-handles" }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     cursor: 'grab',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whitespace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY)))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'cd93542307cce6de36db2937a96345bb1c3b4861', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY))))))));
+        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '282fac28f1351ef700ed01edd5e22644c53f2d0e', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -19796,7 +19846,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'c6f59b5b0999eeb4bac270a0c1085ed898cdad78', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '9adc32d16e9c1f28596a029edf8b0f759cfa9f05', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -19916,7 +19966,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss;
 
-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:#ebebeb transparent;scrollbar-width:thin;max-height:300px}:host(:focus-visible){outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.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:#ebebeb transparent;scrollbar-width:thin;max-height:300px}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
 
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -19984,7 +20034,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);outline:none;cursor:default}: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-bg, #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-bg, #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-bg, #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:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.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:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-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);cursor:default}: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-bg, #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-bg, #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-bg, #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:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.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: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) {
@@ -20333,7 +20383,7 @@ const KritzelPortal = class {
     }; }
 };
 
-const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
+const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
 
 const KritzelSplitButton = class {
     constructor(hostRef) {
@@ -20431,7 +20481,7 @@ const KritzelSplitButton = class {
 };
 KritzelSplitButton.style = kritzelSplitButtonCss;
 
-const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:focus-visible{outline:var(--kritzel-stroke-size-focus-outline, 2px auto #e3e3e3)}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
+const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
 
 const KritzelStrokeSize = class {
     constructor(hostRef) {
@@ -20550,7 +20600,7 @@ const KritzelTooltip = class {
 };
 KritzelTooltip.style = kritzelTooltipCss;
 
-const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
+const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 
 const KritzelUtilityPanel = class {
     constructor(hostRef) {
@@ -20559,6 +20609,7 @@ const KritzelUtilityPanel = class {
         this.redo = createEvent(this, "redo");
         this.delete = createEvent(this, "delete");
     }
+    undoState = null;
     undo;
     redo;
     delete;
@@ -20575,7 +20626,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '8e2eb13668d8787827b10cee7c9daf2abdecc2c6' }, h("button", { key: '0773e7ef81bc972ba589333f4ac7e85d98737770', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'fa69c1a2535d44bfb871a4d719079d0f900cc6c7', name: "undo" })), h("button", { key: 'edc28968f3ec92467d6b4aaa095a71770413d657', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'd4cf72e2bda411fe9942d473c5e1ceae62a76074', name: "redo" })), h("div", { key: '8927237c6099a147495564657cdef97e7d35d7c1', class: "utility-separator" }), h("button", { key: 'e089819f7dd870165130322c3c4a9d754d4ed023', class: "utility-button" }, h("kritzel-icon", { key: 'a143770d1b3f8fdbe5c5b36c5d7eaab511cd8a4b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '47e35a4c61d2807d220888eb90e325e24b9baf90' }, h("button", { key: '4e6ec69fc83242a9c1340a31351da1cccd90b1ba', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '57bf4920ff9f0b2de8b0c1625dd844bba0c7f66d', name: "undo" })), h("button", { key: '759b9d13a679455fccd00e3d8c84e51b184659df', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'f3650d9dcf0c09086ec707443deb6055f7a709ec', name: "redo" })), h("div", { key: 'f414bc1d4be24a1f48d77911db4b9064c898ed8d', class: "utility-separator" }), h("button", { key: 'f542539422b6040bc7b90ceccad075e8f7150a4e', class: "utility-button" }, h("kritzel-icon", { key: 'da8e3cfe848384c3bb984b34d7ad9a6c9c1feba8', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;