kritzel-stencil 0.0.144 → 0.0.146

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-Cw77zP6g.js';
-import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelWorkspace, h as KritzelKeyboardHelper, i as KritzelBaseHandler, j as KritzelToolRegistry, k as KrtizelSelectionBox, l as KritzelSelectionGroup, B as BatchCommand, R as RemoveSelectionGroupCommand, A as AddSelectionGroupCommand, m as KritzelBaseCommand, O as ObjectHelper, n as KritzelReviver, o as RemoveObjectCommand, p as AddObjectCommand, U as UpdateObjectCommand, q as KritzelEventHelper, r as KritzelBaseTool } from './index-YVlgItFD.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
+import { U as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, V as KritzelMouseButton, M as KritzelSelectionTool, S as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, T as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, R as KritzelWorkspace, W as KritzelKeyboardHelper, X as KritzelBaseHandler, Y as KritzelToolRegistry, Z as KritzelSelectionBox, _ as KritzelSelectionGroup, $ as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, a0 as Doc, a1 as DEFAULT_SYNC_CONFIG, a2 as UndoManager, Q as KritzelAppStateMap, a3 as ObjectHelper, a4 as KritzelEventHelper, a5 as KritzelBaseTool } from './default-text-tool.config-nXXHSTK9.js';
 
 const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";
 
@@ -35,13 +35,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: '000e54c604c8ceca2c44365e95ec1f5bfb1b729a' }, h("div", { key: '77b2abeae70e4a80714e1364eb4e11e67f16d066', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '198dba41e1600d76faace18de78191d2b7a551ec' }, h("div", { key: 'ee690cffb7925e09cb2c51022eec607247a4849f', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: 'df71720cf51d845a36598499adb900a30770c503', class: {
+            } }, h("div", { key: '66cc8df8fabd008db8c00942994875e3e8d722ce', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -84,7 +84,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'd533725a8ab2019ae963959727283fbbf833c56a' }, h("div", { key: '7fb50c16d79e9b7330100b0f4e116f8f07b20827', class: {
+        return (h(Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -149,7 +149,7 @@ const KritzelContextMenu = class {
         return defaultValue;
     }
     render() {
-        return (h(Host, { key: '45b9652285f9c3fe7568cbe222667d23c151622f' }, h("div", { key: '9aecc01027f297fa4d991780efaaf51b8d4542dc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: '908711e45cb4ea41f25c4f66a9d3b03c847f886e' }, h("div", { key: '7dcb6e5654ecafebc1fc1a2efb9fa1b8678236c4', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     static get watchers() { return {
         "items": ["onItemsChanged"]
@@ -192,14 +192,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '4b060826312e6d5a2117f5ba9522553af9b02d6f' }, h("div", { key: '0975a250184d5bb2d38cc60263bd718157230d8c', style: {
+        return (h(Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'df84a6fdda01bc7bf3aff42e3b88c4bd9dca500f', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: 'e43c19612807fc4f9cd1bf04f4fb79a048cfd62b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '915cce6c4744ad175f3836c946330882de840880', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: 'c07eebae3ba1785e2644c6b5a22d23f76be950fb', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -233,44 +233,18 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '82e611092700f057bd36823e7f7503fe7a0423ed' }, h("div", { key: '37ed39adeeeb58981a917918cd185e96d589e973', style: {
+        return (h(Host, { key: '3695b187943af25566885d63257ae3de9f405ea5' }, h("div", { key: '7bb146ae3c188478ba17f18f70fd170ce3536308', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: 'cd8afc5c4a1eee087610cd3d5a6c05210cfda6b3', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '085f1bba060bde27a7b64dc5477bb51305b76235', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '3ff8fec207120e67f43315c6dace72fc2f6bd0f1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '2e29d01a6b5c0e4a8ec347e63b6a2698c282db40', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: 'c972068f1251d66e756b8de72fbdd1b6002d1daa', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '87f4c5ac2e2a4cfea216b1b828faad231438b9ec', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '2e73aaf7da659b9e069c247cc762f68394212293', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '785b664697ba266432c535ea26e0665f8d8d657f', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ed2517a39d254b77f45154914b3ce6a934f66c33', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '9b25c9607fa69c991e769852e3e3e378e48387bd', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
 
-class KritzelDevicesHelper {
-    static isTouchDevice() {
-        return window.matchMedia('(any-pointer: coarse)').matches;
-    }
-    static isAndroid() {
-        return /android/i.test(navigator.userAgent);
-    }
-    static isIOS() {
-        return /iPad|iPhone|iPod/.test(navigator.userAgent);
-    }
-    static detectOS() {
-        if (this.isIOS()) {
-            return 'iOS';
-        }
-        else if (this.isAndroid()) {
-            return 'Android';
-        }
-        else {
-            return 'Other';
-        }
-    }
-    static isFirefox() {
-        return /firefox/i.test(navigator.userAgent);
-    }
-}
-
 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 KritzelControls = class {
@@ -374,13 +348,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: 'a463310d88265b71097f838bf775abdcabc99225', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '290ceb6f2c46eb7e869a4741dd6600bc7c47bbb4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', 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 => {
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
@@ -477,7 +451,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (h(Host, { key: '10ef620f19d72a8a5c3a12d0d98686bc69308a30' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'd03403051e53422aaa28d6360aaa9c0391e3ef6a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '87003b14680b3cbca302e7b31ff57e74cc774e25' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'aa6460089c9f3157d2dea9396405b14ab8cc1710', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -723,6 +697,7 @@ const KritzelEditor = class {
     customSvgIcons = {};
     isControlsVisible = true;
     isUtilityPanelVisible = true;
+    syncConfig;
     isReady;
     isEngineReady = false;
     isControlsReady = false;
@@ -740,6 +715,14 @@ const KritzelEditor = class {
             this.checkIsReady();
         }
     }
+    onWorkspacesChange(newWorkspaces) {
+        if (this.activeWorkspace) {
+            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);
+            if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {
+                this.activeWorkspace = updatedActiveWorkspace;
+            }
+        }
+    }
     handleTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -848,11 +831,12 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '8dc4fa4d4c3512d3a0ac40d5ab67566720b8a3e4' }, h("kritzel-workspace-manager", { key: 'b7a032b8bb01b27af192719b46a3891037770a28', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '163c4aea9d07290c89e63931ed4a4cf0184757be', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, 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: '4c9307c3831f2b179a446265f3226b0ae1541afc', 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: '5e91eb780eed57131e0389969c359b9ec9a4faaf' }, h("kritzel-workspace-manager", { key: 'c212455bc5042d35963e774d918ef15f5e4fd7e1', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '214b6c42b21893172401a6918b2797c0758b3d48', 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: '32c6b6408e2fd2c4eaa30efc50bb75b55252a265', 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) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
-        "isControlsReady": ["onIsControlsReady"]
+        "isControlsReady": ["onIsControlsReady"],
+        "workspaces": ["onWorkspacesChange"]
     }; }
 };
 KritzelEditor.style = kritzelEditorCss;
@@ -902,7 +886,10 @@ class KritzelViewport {
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                this._core.store.state.currentPath = null;
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    this._core.store.state.objectsMap.remove(obj => obj.id === currentPath.id);
+                }
                 this._core.store.state.isScaling = true;
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
                 const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
@@ -1049,11 +1036,11 @@ class KritzelViewport {
 class KritzelKeyHandler extends KritzelBaseHandler {
     shortcuts = [
         // General
-        { key: 'Escape', condition: c => !!c.store.state.selectionGroup, action: c => c.clearSelection() },
-        { key: 'Delete', condition: c => !!c.store.state.selectionGroup, action: c => c.delete() },
-        // History
-        { key: 'z', ctrl: true, action: c => c.history.undo() },
-        { key: 'y', ctrl: true, action: c => c.history.redo() },
+        { key: 'Escape', condition: c => !!c.store.selectionGroup, action: c => c.clearSelection() },
+        { key: 'Delete', condition: c => !!c.store.selectionGroup, action: c => c.delete() },
+        // Undo/Redo
+        { key: 'z', ctrl: true, action: c => c.undo() },
+        { key: 'y', ctrl: true, action: c => c.redo() },
         // Tool selection
         { key: 's', ctrl: true, action: () => this.switchTool('selection') },
         { key: 'b', ctrl: true, action: () => this.switchTool('brush') },
@@ -1064,21 +1051,21 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         {
             key: 'c',
             ctrl: true,
-            condition: c => !!c.store.state.selectionGroup,
+            condition: c => !!c.store.selectionGroup,
             action: c => {
                 c.copy();
                 c.rerender();
             },
         },
-        { key: 'v', ctrl: true, condition: c => !!c.store.state.copiedObjects && !c.store.state.activeText, action: c => c.paste() },
+        { key: 'v', ctrl: true, condition: c => !!c.store.state.copiedObjects && !c.store.activeText, action: c => c.paste() },
         // Text editing
-        // { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
-        // { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
+        // { key: 'a', ctrl: true, condition: c => !!c.store.activeText, action: c => c.store.activeText.selectAll() },
+        // { key: 'v', ctrl: true, condition: c => !!c.store.activeText, action: c => c.store.activeText.insertFromClipboard() },
         // Object layering
-        { key: '+', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.bringForward() },
-        { key: '-', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.sendBackward() },
-        { key: '*', shift: true, condition: c => !!c.store.state.selectionGroup, action: c => c.bringToFront() },
-        { key: '_', shift: true, condition: c => !!c.store.state.selectionGroup, action: c => c.sendToBack() },
+        { key: '+', ctrl: true, condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
+        { key: '-', ctrl: true, condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
+        { key: '*', shift: true, condition: c => !!c.store.selectionGroup, action: c => c.bringToFront() },
+        { key: '_', shift: true, condition: c => !!c.store.selectionGroup, action: c => c.sendToBack() },
     ];
     constructor(core) {
         super(core);
@@ -1120,25 +1107,25 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         }
         const selectionTool = this._core.store.state.activeTool;
         selectionTool?.moveHandler?.cancelPendingDrag();
-        if (this._core.store.state.selectionBox) {
-            this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
-            this._core.store.state.selectionBox = null;
+        if (this._core.store.selectionBox) {
+            this._core.store.state.objectsMap.remove(object => object instanceof KritzelSelectionBox);
             this._core.store.state.isSelecting = false;
         }
         const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup) && !(selectedObject instanceof KrtizelSelectionBox)) {
+        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup) && !(selectedObject instanceof KritzelSelectionBox)) {
             const selectionGroup = KritzelSelectionGroup.create(this._core);
             selectionGroup.addOrRemove(selectedObject);
             selectionGroup.isSelected = true;
             selectionGroup.rotation = selectedObject.rotation;
             this._core.store.state.isSelecting = false;
-            const batch = new BatchCommand(this._core, this, [
-                new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
-                new AddSelectionGroupCommand(this._core, this, selectionGroup),
-            ]);
-            this._core.commandManager.executeCommand(batch);
+            const currentSelectionGroup = this._core.store.selectionGroup;
+            if (currentSelectionGroup) {
+                this._core.removeSelectionGroup();
+            }
+            this._core.addSelectionGroup(selectionGroup);
+            this._core.rerender();
         }
-        this._core.store.state.contextMenuItems = this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
+        this._core.store.state.contextMenuItems = this._core.store.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
         let x = event.clientX - this._core.store.offsetX;
         let y = event.clientY - this._core.store.offsetY;
         const menuWidthEstimate = 150;
@@ -1166,15 +1153,11 @@ class KritzelClassHelper {
     }
 }
 
-const DEFAULT_ENGINE_STATE = {
+const DEFAULT_ENGINE_CONFIG = {
     activeWorkspace: null,
     activeTool: null,
-    activeText: null,
-    currentPath: null,
     copiedObjects: null,
     objectsMap: null,
-    selectionBox: null,
-    selectionGroup: null,
     resizeHandleType: null,
     hasViewportChanged: false,
     hasObjectsChanged: false,
@@ -1201,7 +1184,6 @@ const DEFAULT_ENGINE_STATE = {
         showObjectInfo: false,
         showViewportInfo: false,
         logCommands: false,
-        logDatabase: false,
     },
     host: null,
     pointerX: 0,
@@ -1220,396 +1202,314 @@ const DEFAULT_ENGINE_STATE = {
     translateYMin: 0,
     viewportWidth: 0,
     viewportHeight: 0,
-    historyBufferSize: 1000,
     longTouchTimeout: null,
     longTouchDelay: 300,
     pointers: new Map(),
     workspaces: [],
 };
 
-class KritzelDatabase {
-    db = null;
-    dbName;
-    dbVersion;
-    isLoggingEnabled;
-    constructor(dbName, dbVersion, isLoggingEnabled = false) {
-        this.dbName = dbName;
-        this.dbVersion = dbVersion;
-        this.isLoggingEnabled = isLoggingEnabled;
-    }
-    async open(stores) {
-        return new Promise((resolve, reject) => {
-            if (this.db) {
-                resolve();
-                return;
-            }
-            if (this.isLoggingEnabled) {
-                console.info(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
-            }
-            const request = indexedDB.open(this.dbName, this.dbVersion);
-            request.onerror = () => {
-                console.error('IndexedDB error:', request.error);
-                reject(request.error);
-            };
-            request.onsuccess = () => {
-                this.db = request.result;
-                if (this.isLoggingEnabled) {
-                    console.info(`[IndexedDB] Database opened successfully.`);
-                }
-                resolve();
-            };
-            request.onupgradeneeded = event => {
-                if (this.isLoggingEnabled) {
-                    console.info(`[IndexedDB] Upgrade needed for database: ${this.dbName}`);
-                }
-                const db = event.target.result;
-                stores.forEach(storeConfig => {
-                    if (!db.objectStoreNames.contains(storeConfig.name)) {
-                        if (this.isLoggingEnabled) {
-                            console.info(`[IndexedDB] Creating store: ${storeConfig.name}`);
-                        }
-                        const store = db.createObjectStore(storeConfig.name, storeConfig.options);
-                        if (storeConfig.indices) {
-                            storeConfig.indices.forEach(index => {
-                                if (this.isLoggingEnabled) {
-                                    console.info(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
-                                }
-                                store.createIndex(index.name, index.keyPath, index.options);
-                            });
-                        }
-                    }
-                });
-            };
-        });
-    }
-    close() {
-        if (this.db) {
-            if (this.isLoggingEnabled) {
-                console.info(`[IndexedDB] Closing database: ${this.dbName}`);
-            }
-            this.db.close();
-            this.db = null;
-        }
+class KritzelCustomElement extends KritzelBaseObject {
+    __class__ = 'KritzelCustomElement';
+    element;
+    isInteractive = true;
+    constructor(config) {
+        super();
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.scale = config.scale || 1;
+            this.element = config.element;
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+        }
+    }
+    static create(core, config) {
+        const object = new KritzelCustomElement(config);
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        return object;
     }
-    async add(storeName, item) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] Add:', { storeName, item });
+    mount(element) {
+        if (element === null) {
+            return;
         }
-        if (item.serialize === undefined) {
-            throw new Error('Item does not implement KritzelSerializable interface.');
+        // If already mounted to the same element and content is still attached, skip
+        if (this.isMounted && this.elementRef === element && this.element.parentElement === element) {
+            return;
         }
-        const serializedItem = item.serialize();
-        return this.executeTransaction(storeName, 'readwrite', store => store.add(serializedItem));
+        this.elementRef = element;
+        this.isMounted = true;
+        // Clear existing content and append the element
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.element);
     }
-    async get(storeName, key) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] Get:', { storeName, key });
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
         }
-        return this.executeTransaction(storeName, 'readonly', store => store.get(key));
-    }
-    async getAll(storeName) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] GetAll:', { storeName });
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        if (this.element) {
+            this.element.style.width = `${width}px`;
+            this.element.style.height = `${height}px`;
         }
-        return this.executeTransaction(storeName, 'readonly', store => store.getAll());
+        // Update to sync changes to y.js and propagate to other tabs
+        this._core.store.state.objectsMap.update(this);
     }
-    async update(storeName, item) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] Update:', { storeName, item });
-        }
-        if (item.serialize === undefined) {
-            throw new Error('Item does not implement KritzelSerializable interface.');
-        }
-        const serializedItem = item.serialize();
-        return this.executeTransaction(storeName, 'readwrite', store => store.put(serializedItem));
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
     }
-    async delete(storeName, key) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] Delete:', { storeName, key });
-        }
-        return this.executeTransaction(storeName, 'readwrite', store => store.delete(key));
+}
+
+class KritzelReviver {
+    _core;
+    constructor(core) {
+        this._core = core;
     }
-    async deleteByRange(storeName, range) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] DeleteByRange:', { storeName, range });
+    revive(obj) {
+        if (obj && typeof obj === 'object') {
+            if (obj.__class__) {
+                let revivedObj;
+                switch (obj.__class__) {
+                    case 'KritzelPath':
+                        revivedObj = KritzelPath.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelText':
+                        revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
+                        break;
+                    case 'KritzelImage':
+                        revivedObj = KritzelImage.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelCustomElement':
+                        revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelSelectionGroup':
+                        revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelWorkspace':
+                        revivedObj = KritzelWorkspace.create(this._core, obj).deserialize(obj);
+                        break;
+                    case 'KritzelBrushTool':
+                        revivedObj = new KritzelBrushTool(this._core);
+                        break;
+                    case 'KritzelEraserTool':
+                        revivedObj = new KritzelEraserTool(this._core);
+                        break;
+                    case 'KritzelImageTool':
+                        revivedObj = new KritzelImageTool(this._core);
+                        break;
+                    case 'KritzelSelectionTool':
+                        revivedObj = new KritzelSelectionTool(this._core);
+                        break;
+                    case 'KritzelTextTool':
+                        revivedObj = new KritzelTextTool(this._core);
+                        break;
+                    default:
+                        revivedObj = obj;
+                }
+                return revivedObj;
+            }
+            const newObj = Array.isArray(obj) ? [] : {};
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    newObj[key] = this.revive(obj[key]);
+                }
+            }
+            return newObj;
         }
-        return this.executeTransaction(storeName, 'readwrite', store => store.delete(range));
+        return obj;
     }
-    async getAllByRange(storeName, range) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] GetAllByRange:', { storeName, range });
-        }
-        return this.executeTransaction(storeName, 'readonly', store => {
-            return store.getAll(range);
-        });
+}
+
+class KritzelObjectMap {
+    map;
+    _ydoc = null;
+    _objectsMap = null;
+    _providers = [];
+    _undoManager = null;
+    _reviver = null;
+    _core = null;
+    _workspaceId = null;
+    _isReady = false;
+    _temporaryItemsCount = 0;
+    get isReady() {
+        return this._isReady;
+    }
+    get undoManager() {
+        return this._undoManager;
+    }
+    get workspaceId() {
+        return this._workspaceId;
     }
-    async getAllByIndex(storeName, indexName, query) {
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
-        }
-        return this.executeTransaction(storeName, 'readonly', store => {
-            const index = store.index(indexName);
-            return index.getAll(query);
-        });
+    constructor() {
+        this.map = new Map();
     }
-    async executeTransaction(storeName, mode, action) {
-        if (!this.db) {
-            throw new Error('Database is not open.');
-        }
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction(storeName, mode);
-            const store = transaction.objectStore(storeName);
-            const request = action(store);
-            let requestResult;
-            transaction.oncomplete = () => {
-                resolve(requestResult);
-            };
-            transaction.onabort = () => {
-                reject(transaction.error ?? new Error('Transaction aborted'));
-            };
-            transaction.onerror = () => {
-                reject(transaction.error);
-            };
-            request.onsuccess = () => {
-                requestResult = request.result;
-            };
+    async initialize(core, workspaceId, config) {
+        this._core = core;
+        this._workspaceId = workspaceId;
+        this._reviver = new KritzelReviver(core);
+        // Create a dedicated Y.Doc for this workspace
+        this._ydoc = new Doc();
+        this._objectsMap = this._ydoc.getMap('objects');
+        const docName = `kritzel-workspace-${workspaceId}`;
+        const finalConfig = config ?? DEFAULT_SYNC_CONFIG;
+        // Instantiate providers from configuration
+        for (const providerConfig of finalConfig.providers) {
+            let provider;
+            // Check if it's a class constructor or a factory
+            if (typeof providerConfig === 'function') {
+                // It's a class constructor
+                provider = new providerConfig(docName, this._ydoc);
+            }
+            else {
+                // It's a factory with a create method
+                provider = providerConfig.create(docName, this._ydoc);
+            }
+            this._providers.push(provider);
+        }
+        // Set up undo/redo manager for this workspace
+        this._undoManager = new UndoManager([this._objectsMap], {
+            captureTimeout: 200,
+            trackedOrigins: new Set(['local', 'temporary']),
+            ignoreRemoteMapChanges: true,
         });
-    }
-    async batch(actions) {
-        if (!this.db) {
-            throw new Error('Database is not open.');
-        }
-        const storeNames = await this.extractStoreNamesFromActions(actions);
-        if (this.isLoggingEnabled) {
-            console.info('[IndexedDB] Starting batch transaction:', { storeNames });
-        }
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction(storeNames, 'readwrite');
-            const results = [];
-            const promises = [];
-            const tempDbInstance = {
-                add: (storeName, item) => this.add(storeName, item),
-                get: (storeName, key) => this.get(storeName, key),
-                getAll: (storeName) => this.getAll(storeName),
-                update: (storeName, item) => this.update(storeName, item),
-                delete: (storeName, key) => this.delete(storeName, key),
-                deleteByRange: (storeName, range) => this.deleteByRange(storeName, range),
-                getAllByRange: (storeName, range) => this.getAllByRange(storeName, range),
-                getAllByIndex: (storeName, indexName, query) => this.getAllByIndex(storeName, indexName, query),
-                executeTransaction: (storeName, mode, action) => {
-                    return new Promise((resolveRequest, rejectRequest) => {
-                        if (this.isLoggingEnabled) {
-                            console.info('[IndexedDB] Executing batch action:', { storeName, mode });
-                        }
-                        const store = transaction.objectStore(storeName);
-                        const request = action(store);
-                        request.onsuccess = () => {
-                            if (this.isLoggingEnabled) {
-                                console.info('[IndexedDB] Batch action request successful:', { result: request.result });
-                            }
-                            resolveRequest(request.result);
-                        };
-                        request.onerror = () => {
-                            console.error('[IndexedDB] Batch action request error:', request.error);
-                            rejectRequest(request.error);
-                        };
-                    });
-                },
-            };
-            transaction.oncomplete = () => {
-                if (this.isLoggingEnabled) {
-                    console.info('[IndexedDB] Batch transaction complete.');
+        this._undoManager.on('stack-item-added', event => {
+            if (event.type === 'undo') {
+                // Track if this was a temporary item
+                if (event.origin === 'temporary') {
+                    this._temporaryItemsCount++;
                 }
-                Promise.all(promises).then(() => resolve(results));
-            };
-            transaction.onabort = () => {
-                console.error('[IndexedDB] Batch transaction aborted:', transaction.error);
-                reject(transaction.error ?? new Error('Transaction aborted'));
-            };
-            transaction.onerror = () => {
-                console.error('[IndexedDB] Batch transaction error:', transaction.error);
-                reject(transaction.error);
-            };
-            actions.forEach((action, index) => {
-                const promise = action(tempDbInstance)
-                    .then(result => {
-                    results[index] = result;
-                })
-                    .catch(err => {
-                    if (!transaction.error) {
-                        transaction.abort();
-                    }
-                    reject(err);
-                });
-                promises.push(promise);
-            });
+                console.log('Undo performed for workspace', workspaceId, this._undoManager.undoStack.length, this._undoManager.redoStack.length);
+            }
         });
-    }
-    async extractStoreNamesFromActions(actions) {
-        const storeNamesSet = new Set();
-        const storeNameCollector = new Proxy(this, {
-            get: (target, prop) => {
-                if (['add', 'get', 'getAll', 'update', 'delete', 'deleteByRange', 'getAllByRange', 'getAllByIndex'].includes(prop)) {
-                    return (storeName) => {
-                        storeNamesSet.add(storeName);
-                        return Promise.resolve();
-                    };
+        this._undoManager.on('stack-item-popped', event => {
+            if (event.type === 'undo') {
+                // Reduce temporary count when items are undone
+                if (event.origin === 'temporary' && this._temporaryItemsCount > 0) {
+                    this._temporaryItemsCount--;
                 }
-                return target[prop];
-            },
+                console.log('Redo performed for workspace', workspaceId, this._undoManager.undoStack.length, this._undoManager.redoStack.length);
+            }
         });
-        await Promise.all(actions.map(action => action(storeNameCollector)));
-        return Array.from(storeNamesSet);
-    }
-}
-
-class UpdateViewportCommand extends KritzelBaseCommand {
-    currentViewport;
-    previousViewport;
-    constructor(core, initiator, previousViewport, skipHistory = false) {
-        super(core, initiator, skipHistory);
-        this.previousViewport = previousViewport;
-        this.currentViewport = {
-            scale: this._core.store.state.scale,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY,
-        };
-    }
-    execute() {
-        this._core.store.state.scale = this.currentViewport.scale;
-        this._core.store.state.translateX = this.currentViewport.translateX;
-        this._core.store.state.translateY = this.currentViewport.translateY;
-    }
-    undo() {
-        this._core.store.state.scale = this.previousViewport.scale;
-        this._core.store.state.translateX = this.previousViewport.translateX;
-        this._core.store.state.translateY = this.previousViewport.translateY;
-    }
-}
-
-class KritzelCircularBuffer {
-    buffer;
-    capacity;
-    head = 0;
-    tail = 0;
-    size = 0;
-    constructor(capacity) {
-        this.capacity = capacity;
-        this.buffer = new Array(capacity).fill(null);
-    }
-    add(item) {
-        this.buffer[this.head] = item;
-        this.head = (this.head + 1) % this.capacity;
-        if (this.size < this.capacity) {
-            this.size++;
-        }
-        else {
-            this.tail = (this.tail + 1) % this.capacity;
-        }
-    }
-    pop() {
-        if (this.size === 0) {
-            return null;
+        // Observe changes to objects and sync with application state
+        this._objectsMap.observe(event => {
+            this.handleObjectsChange(event);
+        });
+        // Connect all providers in parallel
+        await Promise.all(this._providers.map(p => p.connect()));
+        this._isReady = true;
+        // Load objects from Yjs
+        this.loadFromYjs();
+    }
+    handleObjectsChange(event) {
+        // Skip Map updates for local changes (already done), but still trigger re-render
+        // 'temporary' is also a local change that shouldn't be re-deserialized
+        if (event.transaction.origin === 'local' || event.transaction.origin === 'temporary') {
+            this._core?.rerender();
+            return;
         }
-        this.head = (this.head - 1 + this.capacity) % this.capacity;
-        const item = this.buffer[this.head];
-        this.buffer[this.head] = null;
-        this.size--;
-        return item;
+        const changedKeys = Array.from(event.keysChanged);
+        const objectsToUpdate = [];
+        const selectionGroupsToUpdate = [];
+        const objectsToDelete = [];
+        changedKeys.forEach(key => {
+            const change = event.changes.keys.get(key);
+            if (change && change.action === 'delete') {
+                objectsToDelete.push(key);
+            }
+            else {
+                const serialized = this._objectsMap.get(key);
+                if (serialized) {
+                    const object = this._reviver.revive(serialized);
+                    // Separate SelectionGroups to process them after regular objects
+                    if (object instanceof KritzelSelectionGroup) {
+                        selectionGroupsToUpdate.push(object);
+                    }
+                    else {
+                        objectsToUpdate.push(object);
+                    }
+                }
+            }
+        });
+        // Delete objects from local map
+        objectsToDelete.forEach(objectId => {
+            this.map.delete(objectId);
+        });
+        // First, update or insert regular objects
+        objectsToUpdate.forEach(object => {
+            this.map.set(object.id, object);
+        });
+        // Then, update or insert SelectionGroups
+        selectionGroupsToUpdate.forEach(object => {
+            this.map.set(object.id, object);
+        });
+        this._core?.rerender();
     }
-    peek() {
-        if (this.size === 0) {
-            return null;
+    transaction(callback) {
+        if (this._ydoc) {
+            this._ydoc.transact(callback, 'local');
         }
-        const lastIndex = (this.head - 1 + this.capacity) % this.capacity;
-        return this.buffer[lastIndex];
-    }
-    isEmpty() {
-        return this.size === 0;
-    }
-    clear() {
-        this.buffer.fill(null);
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
-    }
-}
-
-class KritzelHistory {
-    _core;
-    undoStack;
-    redoStack;
-    constructor(core) {
-        this._core = core;
-        this.undoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
-        this.redoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
     }
-    reset() {
-        this.undoStack.clear();
-        this.redoStack.clear();
-        this._core.commandManager.previousViewport = {
-            scale: this._core.store.state.scale,
-            scaleStep: this._core.store.state.scaleStep,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY
-        };
-    }
-    undo() {
-        if (this._core.store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._core, this, this._core.commandManager.previousViewport);
-            command.undo();
-            this._core.store.state.hasViewportChanged = false;
-            this._core.rerender();
+    loadFromYjs() {
+        if (!this._objectsMap || !this._reviver) {
             return;
         }
-        const command = this.undoStack.pop();
-        if (command) {
-            command.undo();
-            if (this._core.store.state.debugInfo.logCommands)
-                console.info('undo', command);
-            this.redoStack.add(command);
-        }
-        this._core.store.state.copiedObjects = null;
-        this._core.rerender();
-    }
-    redo() {
-        const command = this.redoStack.pop();
-        if (command) {
-            command.execute();
-            if (this._core.store.state.debugInfo.logCommands)
-                console.info('redo', command);
-            this.undoStack.add(command);
-        }
-        this._core.rerender();
-    }
-}
-
-class KritzelObjectMap {
-    map;
-    constructor() {
-        this.map = new Map();
+        this.map.clear();
+        this._objectsMap.forEach((serialized, key) => {
+            const object = this._reviver.revive(serialized);
+            this.map.set(key, object);
+        });
     }
     reset() {
         this.map.clear();
+        this._ydoc.transact(() => {
+            this._objectsMap.clear();
+        }, 'local');
     }
     insert(object) {
         if (!object.id) {
             return false;
         }
         this.map.set(object.id, object);
+        if (this._objectsMap && this.isPersistable(object)) {
+            const serialized = object.serialize();
+            this._ydoc.transact(() => {
+                this._objectsMap.set(object.id, serialized);
+            }, 'local');
+        }
         return true;
     }
-    update(object) {
+    update(object, options = {}) {
         if (!object.id || !this.map.has(object.id)) {
             return false;
         }
         this.map.set(object.id, object);
+        if (this._objectsMap && this.isPersistable(object)) {
+            const serialized = object.serialize();
+            const origin = options.temporary ? 'temporary' : 'local';
+            this._ydoc.transact(() => {
+                this._objectsMap.set(object.id, serialized);
+            }, origin);
+        }
         return true;
     }
     remove(predicate) {
         for (const [id, object] of this.map) {
             if (predicate(object)) {
                 this.map.delete(id);
+                if (this._objectsMap && this.isPersistable(object)) {
+                    this._ydoc.transact(() => {
+                        this._objectsMap.delete(id);
+                    }, 'local');
+                }
             }
         }
     }
@@ -1625,6 +1525,98 @@ class KritzelObjectMap {
     allObjects() {
         return Array.from(this.map.values());
     }
+    isPersistable(object) {
+        if (object instanceof KritzelSelectionBox) {
+            return false;
+        }
+        return true;
+    }
+    undo() {
+        if (this._undoManager && this._undoManager.canUndo()) {
+            this._undoManager.undo();
+        }
+    }
+    redo() {
+        if (this._undoManager && this._undoManager.canRedo()) {
+            this._undoManager.redo();
+        }
+    }
+    canUndo() {
+        return this._undoManager ? this._undoManager.canUndo() : false;
+    }
+    canRedo() {
+        return this._undoManager ? this._undoManager.canRedo() : false;
+    }
+    clearHistory() {
+        if (this._undoManager) {
+            this._undoManager.clear();
+            this._temporaryItemsCount = 0;
+        }
+    }
+    /**
+     * Consolidates all temporary items in the undo stack into a single undo item.
+     * Call this when you want to merge multiple temporary changes (e.g., keystrokes) into one.
+     */
+    consolidateTemporaryItems() {
+        if (!this._undoManager || this._temporaryItemsCount === 0) {
+            return;
+        }
+        // Get current stack length
+        const stackLength = this._undoManager.undoStack.length;
+        if (stackLength === 0) {
+            this._temporaryItemsCount = 0;
+            return;
+        }
+        // Stop tracking temporarily
+        this._undoManager.stopCapturing();
+        // The temporary items should be at the end of the stack
+        // We'll need to undo them all, then redo as a single transaction
+        const itemsToConsolidate = Math.min(this._temporaryItemsCount, stackLength);
+        if (itemsToConsolidate > 1) {
+            // Undo all temporary items
+            for (let i = 0; i < itemsToConsolidate; i++) {
+                if (this._undoManager.canUndo()) {
+                    this._undoManager.undo();
+                }
+            }
+            // Now redo them all as a single 'local' transaction
+            // This will consolidate them into one undo item
+            this._ydoc.transact(() => {
+                for (let i = itemsToConsolidate - 1; i >= 0; i--) {
+                    if (this._undoManager.canRedo()) {
+                        this._undoManager.redo();
+                    }
+                }
+            }, 'local');
+        }
+        this._temporaryItemsCount = 0;
+    }
+    /**
+     * Removes all temporary items from the undo stack without consolidating them.
+     * Use this to discard temporary changes completely.
+     */
+    clearTemporaryItems() {
+        if (!this._undoManager || this._temporaryItemsCount === 0) {
+            return;
+        }
+        const stackLength = this._undoManager.undoStack.length;
+        const itemsToRemove = Math.min(this._temporaryItemsCount, stackLength);
+        // Remove items from the end of the stack
+        for (let i = 0; i < itemsToRemove; i++) {
+            if (this._undoManager.undoStack.length > 0) {
+                this._undoManager.undoStack.pop();
+            }
+        }
+        this._temporaryItemsCount = 0;
+    }
+    destroy() {
+        this._providers.forEach(p => p.destroy());
+        this._providers = [];
+        if (this._ydoc) {
+            this._ydoc.destroy();
+        }
+        this.map.clear();
+    }
 }
 
 class KritzelStore {
@@ -1634,17 +1626,33 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return Math.max(0, ...this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).map(o => o.zIndex)) + 1;
+        return Math.max(0, ...this._state.objectsMap.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     get allObjects() {
         return this._state.objectsMap.allObjects();
     }
     get allNonSelectionObjects() {
-        return this._state.objectsMap.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox));
+        return this._state.objectsMap.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);
+        return selectionBoxes.length > 0 ? selectionBoxes[0] : null;
+    }
+    get selectionGroup() {
+        const selectionGroups = this._state.objectsMap.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);
+        return activeTexts.length > 0 ? activeTexts[0] : null;
+    }
+    get currentPath() {
+        const drawingPaths = this._state.objectsMap.filter(o => o instanceof KritzelPath && o.isCompleted === false);
+        return drawingPaths.length > 0 ? drawingPaths[0] : null;
+    }
     get offsetX() {
         return this._state.host.getBoundingClientRect().left;
     }
@@ -1678,203 +1686,124 @@ class KritzelStore {
     }
 }
 
-class KritzelCommandManager {
-    _core;
-    _history;
-    previousViewport;
-    constructor(core) {
-        this._core = core;
-        this._history = this._core.history;
-        this.previousViewport = {
-            scale: this._core.store.state.scale,
-            scaleStep: this._core.store.state.scaleStep,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY,
-        };
-    }
-    executeCommand(command) {
-        if (this._core.store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (this.isSkipped(command) === false) {
-            if (this._core.store.state.debugInfo.logCommands) {
-                console.log('execute', command);
-            }
-            this._history.undoStack.add(command);
-            if (this._history.redoStack.isEmpty() === false) {
-                this._history.redoStack.clear();
-            }
-        }
-        this._core.rerender();
-    }
-    isSkipped(command) {
-        return command.skipHistory === true;
-    }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
-        command.execute();
-        this._history.undoStack.add(command);
-        if (this._history.redoStack.isEmpty() === false) {
-            this._history.redoStack.clear();
-        }
-        this._core.store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._core.store.state.scale,
-            scaleStep: this._core.store.state.scaleStep,
-            translateX: this._core.store.state.translateX,
-            translateY: this._core.store.state.translateY,
-        };
-    }
-}
-
 class KritzelCore {
     _kritzelEngine;
     _store;
-    _history;
-    _commandManager;
-    _database;
+    _syncConfig;
+    _appStateMap;
     get engine() {
         return this._kritzelEngine;
     }
-    get history() {
-        return this._history;
-    }
-    get commandManager() {
-        return this._commandManager;
-    }
-    get database() {
-        return this._database;
-    }
     get store() {
         return this._store;
     }
+    get appStateMap() {
+        return this._appStateMap;
+    }
     constructor(kritzelEngine) {
         this._kritzelEngine = kritzelEngine;
-        this._store = new KritzelStore(DEFAULT_ENGINE_STATE);
-        this._history = new KritzelHistory(this);
-        this._commandManager = new KritzelCommandManager(this);
-        this._database = new KritzelDatabase('kritzelDB', 1, this._store.state.debugInfo.logDatabase);
-    }
-    async initializeDatabase() {
-        await this._database.open([
-            {
-                name: 'objects',
-                options: { keyPath: ['workspaceId', 'id'] },
-            },
-            { name: 'workspaces', options: { keyPath: 'id' } },
-        ]);
-        this.rerender();
+        this._store = new KritzelStore(DEFAULT_ENGINE_CONFIG);
+        this._appStateMap = new KritzelAppStateMap();
     }
-    async initializeWorkspace(workspace) {
-        const workspaces = await this.getWorkspaces();
-        const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
-        const fallbackWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
-        const candidateWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
-        const existingWorkspace = await this.getWorkspace(candidateWorkspace.id);
-        if (existingWorkspace) {
-            this._store.state.activeWorkspace = existingWorkspace;
-            await this.updateWorkspace(this._store.state.activeWorkspace);
-        }
-        else {
-            this._store.state.activeWorkspace = candidateWorkspace;
-            await this.createWorkspace(this._store.state.activeWorkspace);
-        }
-        this._store.state.workspaces = await this.getWorkspaces();
-        const viewport = this._store.state.activeWorkspace.viewport ?? { translateX: 0, translateY: 0, scale: 1 };
-        this._store.state.translateX = viewport.translateX ?? 0;
-        this._store.state.translateY = viewport.translateY ?? 0;
-        this._store.state.scale = viewport.scale ?? 1;
-        await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id);
-    }
-    async initializeWorkspaceObjects(workspaceId) {
-        this._store.state.objectsMap.reset();
-        this._history.reset();
-        const objectsFromDb = await this._database.getAllByRange('objects', IDBKeyRange.bound([workspaceId], [workspaceId, '\uffff']));
-        const reviver = new KritzelReviver(this);
-        objectsFromDb.forEach(element => {
-            const revivedObject = reviver.revive(element);
-            this._store.state.objectsMap.insert(revivedObject);
-        });
-        this.rerender();
+    setSyncConfig(config) {
+        this._syncConfig = config;
     }
-    async updateWorkspaceViewport(translateX, translateY, scale) {
-        const activeWorkspace = this._store.state.activeWorkspace;
-        if (!activeWorkspace) {
-            throw new Error('Workspace not initialized');
-        }
-        activeWorkspace.viewport = { translateX, translateY, scale };
-        activeWorkspace.updatedAt = new Date();
-        await this._database.update('workspaces', activeWorkspace);
+    async initializeYjs() {
+        await this._appStateMap.initialize(this, this._syncConfig);
     }
-    async addObjectToDatabase(object) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
-        }
-        const activeWorkspace = this._store.state.activeWorkspace;
-        if (!activeWorkspace) {
-            throw new Error('Workspace not initialized');
-        }
-        activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.add('objects', object), db => db.update('workspaces', activeWorkspace)]).catch(err => {
-            console.error('Error adding object to database:', err);
-        });
+    /**
+     * Load all workspaces from app state map
+     */
+    loadWorkspacesFromAppState() {
+        return this._appStateMap.allWorkspaces();
     }
-    async updateObjectInDatabase(object) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
+    /**
+     * Save a workspace to app state map
+     */
+    saveWorkspaceToAppState(workspace) {
+        if (this._appStateMap.has(workspace.id)) {
+            this._appStateMap.update(workspace);
         }
-        const activeWorkspace = this._store.state.activeWorkspace;
-        if (!activeWorkspace) {
-            throw new Error('Workspace not initialized');
+        else {
+            this._appStateMap.insert(workspace);
         }
-        activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.update('objects', object), db => db.update('workspaces', activeWorkspace)]).catch(err => {
-            console.error('Error updating object in database:', err);
-        });
     }
-    async deleteObjectFromDatabase(objectId) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
+    /**
+     * Delete a workspace from app state map
+     */
+    deleteWorkspaceFromAppState(workspaceId) {
+        this._appStateMap.remove(w => w.id === workspaceId);
+    }
+    async initializeWorkspace(workspace) {
+        // Load all workspaces from app state map
+        const workspaces = this.loadWorkspacesFromAppState();
+        // Find most recently updated workspace or use provided/fallback
+        const mostRecentWorkspace = workspaces.length > 0 ? [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0] : null;
+        let activeWorkspace;
+        if (workspace) {
+            // Use provided workspace
+            activeWorkspace = workspace;
+            const existing = workspaces.find(w => w.id === workspace.id);
+            if (!existing) {
+                // New workspace, save it
+                activeWorkspace._core = this;
+                this.saveWorkspaceToAppState(activeWorkspace);
+            }
         }
-        const activeWorkspace = this._store.state.activeWorkspace;
-        if (!activeWorkspace) {
-            throw new Error('Workspace not initialized');
+        else if (mostRecentWorkspace) {
+            // Use most recent workspace
+            activeWorkspace = mostRecentWorkspace;
         }
-        activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.delete('objects', [activeWorkspace.id, objectId]), db => db.update('workspaces', activeWorkspace)]).catch(err => {
-            console.error('Error deleting object from database:', err);
-        });
+        else {
+            // Create fallback workspace
+            activeWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+            activeWorkspace._core = this;
+            this.saveWorkspaceToAppState(activeWorkspace);
+        }
+        // Destroy old ObjectMap if switching workspaces
+        if (this._store.state.objectsMap && this._store.state.objectsMap.isReady) {
+            this._store.state.objectsMap.destroy();
+        }
+        // Set active workspace
+        this._store.state.activeWorkspace = activeWorkspace;
+        this._store.state.workspaces = this.loadWorkspacesFromAppState();
+        // Set viewport from workspace
+        const viewport = activeWorkspace.viewport ?? { translateX: 0, translateY: 0, scale: 1 };
+        this._store.state.translateX = viewport.translateX ?? 0;
+        this._store.state.translateY = viewport.translateY ?? 0;
+        this._store.state.scale = viewport.scale ?? 1;
+        // 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.rerender();
     }
-    async getWorkspace(id) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
+    rerender() {
+        if (this._kritzelEngine) {
+            this._kritzelEngine.forceUpdate++;
         }
-        const reviver = new KritzelReviver(this);
-        return this._database.get('workspaces', id).then(rawWorkspace => (rawWorkspace ? reviver.revive(rawWorkspace) : null));
     }
-    async getWorkspaces() {
-        if (!this._database) {
-            throw new Error('Database not initialized');
+    findObjectById(id) {
+        for (const object of this._store.allObjects) {
+            if (object.id === id) {
+                return object;
+            }
         }
-        const reviver = new KritzelReviver(this);
-        return this._database.getAll('workspaces').then(rawWorkspaces => rawWorkspaces.map(ws => reviver.revive(ws)));
+        return null;
     }
-    async createWorkspace(workspace) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
-        }
+    getWorkspaces() {
+        return this.loadWorkspacesFromAppState();
+    }
+    createWorkspace(workspace) {
+        workspace._core = this;
         workspace.createdAt = new Date();
         workspace.updatedAt = new Date();
-        await this._database.add('workspaces', workspace);
-        this._store.state.workspaces.push(workspace);
+        this.saveWorkspaceToAppState(workspace);
+        this._store.state.workspaces = this.loadWorkspacesFromAppState();
     }
-    async updateWorkspace(workspace) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
-        }
+    updateWorkspace(workspace) {
         workspace.updatedAt = new Date();
-        await this._database.update('workspaces', workspace);
+        this.saveWorkspaceToAppState(workspace);
         const workspaces = this._store.state.workspaces;
         const index = workspaces.findIndex(w => w.id === workspace.id);
         if (index !== -1) {
@@ -1882,126 +1811,216 @@ class KritzelCore {
             this._store.state.workspaces = workspaces;
         }
     }
-    async deleteWorkspace(workspace) {
-        if (!this._database) {
-            throw new Error('Database not initialized');
+    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();
         }
-        const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
-        await this._database.deleteByRange('objects', objectRange);
-        await this._database.delete('workspaces', workspace.id);
-        this._store.state.workspaces = this._store.state.workspaces.filter(ws => ws.id !== workspace.id);
+        this.deleteWorkspaceFromAppState(workspace.id);
+        this._store.state.workspaces = this.loadWorkspacesFromAppState();
+        // Also delete the workspace's IndexedDB database
+        const dbName = `kritzel-workspace-${workspace.id}`;
+        window.indexedDB.deleteDatabase(dbName);
     }
-    rerender() {
-        if (this._kritzelEngine) {
-            this._kritzelEngine.forceUpdate++;
+    updateWorkspaceViewport(translateX, translateY, scale) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
+            return;
         }
+        activeWorkspace.viewport = { translateX, translateY, scale };
+        activeWorkspace.updatedAt = new Date();
+        this.saveWorkspaceToAppState(activeWorkspace);
     }
-    findObjectById(id) {
-        for (const object of this._store.allObjects) {
-            if (object.id === id) {
-                return object;
+    addObject(object) {
+        this._store.state.objectsMap.insert(object);
+    }
+    removeObject(object) {
+        object.isMounted = false;
+        this._store.state.objectsMap.remove(o => o.id === object.id);
+    }
+    updateObject(object, updatedProperties) {
+        for (const key in updatedProperties) {
+            if (updatedProperties.hasOwnProperty(key)) {
+                object[key] = updatedProperties[key];
             }
         }
-        return null;
+        this._store.state.objectsMap.update(object);
     }
-    deselectAllObjects() {
-        if (this._store.state.selectionGroup) {
-            this.commandManager.executeCommand(new RemoveSelectionGroupCommand(this, this, true));
+    addSelectionGroup(selectionGroup) {
+        this.removeSelectionGroup();
+        this.removeSelectionBox();
+        this._store.state.objectsMap.insert(selectionGroup);
+    }
+    removeSelectionGroup() {
+        const selectionGroup = this._store.selectionGroup;
+        if (selectionGroup) {
+            this._store.state.objectsMap.remove(object => object.id === selectionGroup.id);
+        }
+    }
+    removeSelectionBox() {
+        const selectionBox = this._store.selectionBox;
+        if (selectionBox) {
+            this._store.state.objectsMap.remove(object => object.id === selectionBox.id);
         }
     }
+    deselectAllObjects() {
+        this.removeSelectionGroup();
+        this.rerender();
+    }
     delete() {
-        if (!this._store.state.selectionGroup) {
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
             return;
         }
-        const deleteSelectedObjectsCommand = this._store.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this._store.state.selectionGroup, obj));
-        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
-        const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.commandManager.executeCommand(new BatchCommand(this, this._store.state.selectionGroup, commands));
+        selectionGroup.objects.forEach(obj => this.removeObject(obj));
+        this.removeSelectionGroup();
+        this.rerender();
+    }
+    undo() {
+        this._store.state.objectsMap?.undo();
     }
-    deleteObject(id, skipHistory = false) {
+    redo() {
+        this._store.state.objectsMap?.redo();
+    }
+    deleteObject(id) {
         const object = this.findObjectById(id);
         if (object) {
-            const removeObjectCommand = new RemoveObjectCommand(this, this, object, skipHistory);
-            this.commandManager.executeCommand(removeObjectCommand);
+            this.removeObject(object);
+            this.rerender();
         }
     }
     copy() {
-        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
+        const selectionGroup = this._store.selectionGroup;
+        if (selectionGroup) {
+            // Copy each object and store them in an array
+            this._store.state.copiedObjects = selectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
+        }
     }
     paste(x, y) {
         const copiedObjects = this._store.state.copiedObjects;
-        copiedObjects.isSelected = true;
-        this._store.state.copiedObjects = copiedObjects;
-        const adjustedX = x !== undefined ? x : this._store.state.copiedObjects.translateX + 25 / this._store.state.scale;
-        const adjustedY = y !== undefined ? y : this._store.state.copiedObjects.translateY + 25 / this._store.state.scale;
-        this._store.state.copiedObjects.updatePosition(adjustedX, adjustedY);
-        this._store.state.copiedObjects.updateZIndices(this._store.currentZIndex);
+        if (!copiedObjects || copiedObjects.length === 0) {
+            return;
+        }
         const activeWorkspace = this._store.state.activeWorkspace;
-        if (this.store.state.copiedObjects.workspaceId !== activeWorkspace.id) {
-            this.store.state.copiedObjects.updateWorkspaceId(activeWorkspace.id);
+        // Check if we're pasting from a different workspace
+        const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
+        // Calculate the bounding box of all copied objects
+        const minX = Math.min(...copiedObjects.map(obj => obj.translateX));
+        const minY = Math.min(...copiedObjects.map(obj => obj.translateY));
+        // Determine the paste position
+        let pasteX;
+        let pasteY;
+        if (x !== undefined && y !== undefined) {
+            // Explicit position provided (e.g., right-click paste)
+            pasteX = x;
+            pasteY = y;
+        }
+        else if (isDifferentWorkspace) {
+            // Pasting to different workspace without explicit position
+            // Keep original position; will be centered by centerInViewport() later
+            pasteX = minX;
+            pasteY = minY;
+        }
+        else {
+            // Same workspace paste: offset by 25 pixels from original position
+            pasteX = minX + 25 / this._store.state.scale;
+            pasteY = minY + 25 / this._store.state.scale;
+        }
+        // Calculate the offset to apply to all objects
+        const offsetX = pasteX - minX;
+        const offsetY = pasteY - minY;
+        this.removeSelectionGroup();
+        this.removeSelectionBox();
+        // Create a new selection group for the pasted objects
+        const selectionGroup = KritzelSelectionGroup.create(this);
+        // First add all copied objects to the objectsMap with updated positions
+        copiedObjects.forEach((obj, i) => {
+            // Update workspace if pasting to a different workspace
+            if (obj.workspaceId !== activeWorkspace.id) {
+                obj.workspaceId = activeWorkspace.id;
+            }
+            // Update position
+            obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
+            // Update z-index
+            obj.zIndex = this._store.currentZIndex + i;
+            // Add to objectsMap
+            this.addObject(obj);
+            // Add to selection group
+            selectionGroup.addOrRemove(obj);
+        });
+        // Mark selection group as selected
+        selectionGroup.isSelected = true;
+        // Set rotation for single object
+        if (copiedObjects.length === 1) {
+            selectionGroup.rotation = copiedObjects[0].rotation;
+        }
+        // Add the selection group
+        this.addSelectionGroup(selectionGroup);
+        // Handle cross-workspace paste: center objects in viewport
+        if (isDifferentWorkspace) {
             if (x !== undefined && y !== undefined) {
-                this._store.state.copiedObjects.updatePosition(x, y);
+                // Position was explicitly provided, use it
+                selectionGroup.updatePosition(x, y);
             }
             else {
-                this.store.state.copiedObjects.centerInViewport();
+                // Center the selection group in the viewport
+                selectionGroup.centerInViewport();
             }
-            this.engine.viewport.centerFitInViewport(copiedObjects);
+            // Fit the viewport to show the pasted objects
+            this.engine.viewport.centerFitInViewport(selectionGroup);
         }
-        const commands = [];
-        let previousSelectionGroup = null;
-        if (this._store.state.selectionGroup !== null) {
-            previousSelectionGroup = this._store.state.selectionGroup;
-            commands.push(new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup));
-        }
-        const addCopiedObjectsCommands = this._store.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
-        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this._store.state.copiedObjects, previousSelectionGroup);
-        commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
-        this.commandManager.executeCommand(new BatchCommand(this, this, commands));
         this._store.state.isSelecting = false;
-        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
+        // Update copiedObjects to the newly created objects for potential future pastes
+        const newSelectionGroup = this._store.selectionGroup;
+        if (newSelectionGroup) {
+            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.rerender();
     }
     bringForward(object) {
-        const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const selectionGroup = this._store.selectionGroup;
+        const objects = object ? [object] : selectionGroup?.objects || [];
         const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
         const max = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1 : 0;
-        const increaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === max) {
-                return;
+        objects.forEach(obj => {
+            if (obj.zIndex !== max) {
+                this.updateObject(obj, { zIndex: obj.zIndex + 1 });
             }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
         });
-        this.commandManager.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
+        this.rerender();
     }
     sendBackward(object) {
-        const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const selectionGroup = this._store.selectionGroup;
+        const objects = object ? [object] : selectionGroup?.objects || [];
         const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
         const min = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1 : 0;
-        const decreaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === min) {
-                return;
+        objects.forEach(obj => {
+            if (obj.zIndex !== min) {
+                this.updateObject(obj, { zIndex: obj.zIndex - 1 });
             }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
         });
-        this.commandManager.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
+        this.rerender();
     }
     bringToFront(object) {
-        const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const selectionGroup = this._store.selectionGroup;
+        const objects = object ? [object] : selectionGroup?.objects || [];
         const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
         const max = Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1;
-        const increaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: max });
+        objects.forEach(obj => {
+            this.updateObject(obj, { zIndex: max });
         });
-        this.commandManager.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
+        this.rerender();
     }
     sendToBack(object) {
-        const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const selectionGroup = this._store.selectionGroup;
+        const objects = object ? [object] : selectionGroup?.objects || [];
         const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
         const min = Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1;
-        const decreaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: min });
+        objects.forEach(obj => {
+            this.updateObject(obj, { zIndex: min });
         });
-        this.commandManager.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
+        this.rerender();
     }
     selectObjects(objects) {
         if (objects.length === 0) {
@@ -2013,16 +2032,16 @@ class KritzelCore {
             selectionGroup.addOrRemove(obj);
         });
         selectionGroup.isSelected = true;
-        this._store.state.selectionBox = selectionGroup;
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this.commandManager.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+        this.addSelectionGroup(selectionGroup);
+        this.rerender();
     }
     selectAllObjectsInViewport() {
         const objectsInViewport = this._store.state.objectsMap
             .filter(o => o.isInViewport())
-            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
+            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
             const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
@@ -2034,30 +2053,29 @@ class KritzelCore {
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
-            this.commandManager.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+            this.addSelectionGroup(selectionGroup);
             this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            this.rerender();
         }
     }
     clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this);
-        this.commandManager.executeCommand(command);
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = null;
+        this.removeSelectionGroup();
+        this._store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox || o instanceof KritzelSelectionGroup);
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
         this.rerender();
     }
     resetActiveText() {
-        if (this._store.state.activeText) {
-            if (this._store.state.activeText.isEmpty) {
-                this.deleteObject(this._store.state.activeText.id, true);
+        const activeText = this._store.activeText;
+        if (activeText) {
+            if (activeText.isEmpty) {
+                this.deleteObject(activeText.id);
             }
             else {
-                this._store.state.activeText.save();
+                activeText.save();
             }
         }
-        this._store.state.activeText = null;
     }
     getObjectFromPointerEvent(event, selector = '.object') {
         const shadowRoot = this._store.state.host?.shadowRoot;
@@ -2122,8 +2140,11 @@ const kritzelEngineCss = ":host{display:block;position:relative;height:100%;widt
 const KritzelEngine = class {
     get host() { return getElement(this); }
     workspace;
+    syncConfig;
     onWorkspaceChange(newWorkspace) {
-        if (this.core.store.state.activeWorkspace !== newWorkspace) {
+        const currentWorkspaceId = this.core.store.state.activeWorkspace?.id;
+        const newWorkspaceId = newWorkspace?.id;
+        if (currentWorkspaceId !== newWorkspaceId) {
             this.core.beforeWorkspaceChange();
             this.core.initializeWorkspace(newWorkspace);
         }
@@ -2286,15 +2307,15 @@ const KritzelEngine = class {
         this.core.sendToBack(object);
     }
     async undo() {
-        this.core.history.undo();
+        this.core.undo();
     }
     async redo() {
-        this.core.history.redo();
+        this.core.redo();
     }
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
         this.core.store.state.isContextMenuVisible = false;
-        this.core.store.state.selectionBox = null;
+        this.core.store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox);
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
         this.core.rerender();
@@ -2309,24 +2330,25 @@ const KritzelEngine = class {
         object._core = this.core;
         object.scale = object.scale ? object.scale : this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
-        const command = new AddObjectCommand(this.core, this, object);
-        this.core.commandManager.executeCommand(command);
+        this.core.addObject(object);
+        this.core.rerender();
         return object;
     }
     async updateObject(object, updatedProperties) {
         this.core.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.core, this, object, updatedProperties);
-        this.core.commandManager.executeCommand(command);
+        this.core.updateObject(object, updatedProperties);
+        this.core.rerender();
         return object;
     }
     async removeObject(object) {
         this.core.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.core, this, object);
-        this.core.commandManager.executeCommand(command);
+        this.core.removeObject(object);
+        this.core.rerender();
         return object;
     }
     async getSelectedObjects() {
-        return this.core.store.state.selectionGroup ? this.core.store.state.selectionGroup.objects : [];
+        const selectionGroup = this.core.store.selectionGroup;
+        return selectionGroup ? selectionGroup.objects : [];
     }
     async selectObjects(objects) {
         this.core.store.state.activeTool?.onDeactivate();
@@ -2345,15 +2367,14 @@ const KritzelEngine = class {
     }
     async centerObjectInViewport(object) {
         object.centerInViewport();
-        const command = new UpdateObjectCommand(this.core, this, object, object);
-        this.core.commandManager.executeCommand(command);
+        this.core.updateObject(object, object);
+        this.core.rerender();
         return object;
     }
     async getCopiedObjects() {
-        return this.core.store.state.copiedObjects?.objects || [];
+        return this.core.store.state.copiedObjects || [];
     }
     async createWorkspace(workspace) {
-        workspace._core = this.core;
         await this.core.createWorkspace(workspace);
         this.workspacesChange.emit(this.core.store.state.workspaces);
         return workspace;
@@ -2367,7 +2388,7 @@ const KritzelEngine = class {
         this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async getWorkspaces() {
-        return this.core.getWorkspaces();
+        return await this.core.getWorkspaces();
     }
     async getActiveWorkspace() {
         return this.core.store.state.activeWorkspace;
@@ -2381,7 +2402,7 @@ const KritzelEngine = class {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
     get isSelectionActive() {
-        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.selectionGroup !== null;
+        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.selectionGroup !== null;
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -2399,8 +2420,18 @@ const KritzelEngine = class {
         this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
         this.keyHandler = new KritzelKeyHandler(this.core);
         this.viewport = new KritzelViewport(this.core, this.host);
-        await this.core.initializeDatabase();
+        // Set sync configuration if provided
+        if (this.syncConfig) {
+            this.core.setSyncConfig(this.syncConfig);
+        }
+        // Initialize Yjs document and persistence layer
+        await this.core.initializeYjs();
+        // Initialize workspace (will load from Yjs if available)
         await this.core.initializeWorkspace(this.workspace);
+        // Register callback for remote workspace changes
+        this.core.appStateMap.onRemoteChange(() => {
+            this.workspacesChange.emit(this.core.store.state.workspaces);
+        });
         this._registerStateChangeListeners();
         if (this.core.store.state.isReady === false) {
             this.core.store.state.isReady = true;
@@ -2413,7 +2444,7 @@ const KritzelEngine = class {
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
-            this.core.store.state.selectionBox = null;
+            this.core.store.state.objectsMap.remove(o => o instanceof KritzelSelectionBox);
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
@@ -2431,7 +2462,7 @@ 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: 'f7fc3c4c6a91ccdabb83832671e36ebf49ce56c0' }, h("div", { key: 'f6a2ce9e78a1d0e9ea0590035f5b8811f62c8633', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '5752045746f275223bd42c16dd7e848adaaae9f2' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd99595b135243a7b69a583be33f7b195908ec716' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '7cecdccad47d3957370ea923f3dfbcd618b5d28e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '3a5ed989f2343eda92c7c81855c785dbf58fa770' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'b78074a29463276300ce498b2ddb328cef9026cd' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'd4c8dcfddfa1984eedf695d74f9401fc3284c60b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '566b6dc9afd904ee49e59587ed664e5f46decead' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'd3feb7a11727c4337ca75a26b3275a0b5d639961' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '3991c34df53c7d6fd97c83b0d4b8c9fb438c88fc' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '5a4244b43871f96d08144483352064804f04e538' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '197655c09e24d624ea4dcd312169aeb449ed57ce' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'a3e4a75a9853c8cee1485cbf8621377466babf90' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '171e0df3e1856e9fe8cd18be5c258c7472317453' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '66f5a56333dbac1da34e01f5ee1f577e1a964701' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'b869e07b76c2fa21ab5383788e81a40ffdad1b2c' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd936326f8ea675e170d418f4e97a5d46057bc385' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '8594489402204ae4a9cd1bc7795169dbfa2d633d' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'f7a254dc35bfe6d42c32d25d0f277b211d86b03f' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '053ebd21504bfa3622e4b3e965e39f707c19794d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'f330c65821326062874441355352134927760d61' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'f6c6902562f3e74afa3a0426e72b0c803977250b' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), h("div", { key: '99a2d4280d5e79d7dd9a7a27d809e70f90eac38b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: 'dac21fa0ac9487b74c89ac7408e80d9fb89b4558', id: "origin", class: "origin", style: {
+        return (h(Host, { key: 'b67ab4cce757661cb7b1bdc10035a3aea61cb24d' }, h("div", { key: '54160ed099438a59043ff4f5a774ee8c89a02153', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '66e3a55bc530877256782073c4378b77d95ccfee' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '841ea8bf317c3ef5ea35950f6bb2be9e6a8116cf' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'ec3a7797f01606308b54cf9b13bf7a3722c54287' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '485dbc3021940fad42bae53a825206f27c76e604' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '20fed3eb07d6599a175e43cd7e1708aa2a61cf31' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '06522e742ac0d3d7c36b4b64307d695459b792e4' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'e745be888b5e1b36331359ca9fa1afc166333d13' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'f9074a0e3434aa0fb60d8d1fc1201815cb94fb7c' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '3f96d5f90187cb0e042c4529351681b4799d9b38' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '6ca3d01c4aa817b0ccfd8bd1c5b65588006ecb5b' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'c2941fdce608c0a0396996aa3667f3fa18cc29a3' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '0a99cd2e9767e4a9cb74af735a5eff5a86a9b6c4' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '0e749d3d2e131ab5984acbc7d9d91023b166ed45' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '0f102c2e704a18271e5b322814403c1cd0938356' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'd0c7eaa357268d4df97e50e85634e4be36e678ac' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'eb7b0d98fd3d4a13f152ded89a6649f408852575' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'bd9a16ff4537a9b6e73bff8d67222c4281a60fa0' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'fdeb2b546e421e9ce9d61e1527fcc79bd1cb217e' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9e7e93bcb5ce9c92ea9686140fc30851f6a4c66d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'aaad9771c7286e352f99e2613616e8f023044926' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'fca0584ae7d2481b2ccdb71a24ad123a5efc6668' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'a3f870ca59feb6698f2a9d4a106a694ac9b8cb3f' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '4616f1af54642b448806e7271b421f3d7e980dd1', 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 => {
             return (h("div", { key: object.id, style: {
@@ -2488,7 +2519,7 @@ const KritzelEngine = class {
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
@@ -2536,15 +2567,7 @@ const KritzelEngine = class {
                     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)))))));
-        }), h("svg", { key: "current-path", class: "object", xmlns: "http://www.w3.org/2000/svg", width: this.core.store.state.currentPath?.width, height: this.core.store.state.currentPath?.height, style: {
-                left: '0',
-                top: '0',
-                zIndex: this.core.store.state.currentPath?.zIndex.toString(),
-                position: 'absolute',
-                transform: this.core.store.state.currentPath?.transformationMatrix,
-                transformOrigin: 'top left',
-                overflow: 'visible',
-            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: 'eab427509417e6b80726436f726e6e1189b7c4fb', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '335cb455cfdb3e02dbc2ead1bf182d801b58e7bc', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
+        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '7907e01ea585125e8377d473d8d7d764b5e35609', 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`,
@@ -2553,9 +2576,9 @@ const KritzelEngine = class {
                 event.detail.action({
                     x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
-                }, this.core.store.state.selectionGroup?.objects);
+                }, 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: '8538b07072dd07a09d6256e28a98603ef5663089', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '4cb3d1ce212b078514524e9edc7c22f6117e5160', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -2575,7 +2598,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '0a6f1d1326e9dde84a4122d79f75dc1c75ffe0fb' }, h("div", { key: '88a342d01c4150cd4fc5dacca23f7b9904edca52', class: "font-preview", style: {
+        return (h(Host, { key: '0d0f0f75b64f579ca236950334fafde7f0ef2a38' }, h("div", { key: 'e71524879ded9727891bdd43f1a41ae5eef49175', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -2622,7 +2645,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: 'd05a099adf8623b8c67d68f3861c1cd401e86e2c' }, h("kritzel-dropdown", { key: 'b95af194feaaf5748bb0d584617d217e4b3b8180', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: '04a0a72f9297dc6c34a2a2019cae111d8725bcf4', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: 'f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -2643,7 +2666,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '9f3d851d443352f7437116cf91eff8d8de41e322' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '583659340d8f3bfb2ff6f64f2cd692ac07cb32d6' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -2738,7 +2761,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'be122cb0ecff3227d9e69997de76a73940a61860', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'ae10bec61e5c5e1a29b444cb7378f15c6692f3b6', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '211bd579000294d9edf6f85f2d7244aebe331191', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b1c397118b1fbac934867677073661a69be1cab1', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss;
@@ -2839,12 +2862,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (h(Host, { key: '9df3acdaff753e3ed910f848c98e8ad73e2b5f5c', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: 'a35e1e3427568f436a36b43ba87af3710a4e83c5', 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: 'bb73e5c0c3dd87efabcaa0b53d20c7c477b34aa1', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '42eef5a16b9b164839c1fe133e38ecb505c07632', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": ["onItemChange"]
@@ -3085,7 +3108,7 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '9c5cdf7126ff1148dd2364cce9d2524862e27d13', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '209a77246fedcea0c24882605487452ff5cc62ce' })));
+        return (h(Host, { key: 'a906e21c1257dfc6ed21257cce150db17048f04e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '972544f2258f8b6dc8c691f3762d5ba806a57c41' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -3185,7 +3208,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '4ff7809dd62c1dd60600fda592aeac43cd9bc74c', class: { mobile: this.isTouchDevice } }, h("button", { key: 'db6485fabcffdd75a25d178aca7b653af499a90c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '4001a4e23ef53bec2a578310de8c8b593d7b266c', name: this.buttonIcon })), h("div", { key: '8ff86d3c01a48b06afca77dd066518efa3589cb1', class: "split-divider" }), h("button", { key: 'f1c40edbec3756a7f3681de4e8d0f1981dd312a4', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '0ddb89976632ae7454e66504f8bab3fd5072c252', name: this.dropdownIcon })), h("kritzel-portal", { key: '64531ffd6ac847fd1a99e32aceefea9f18088992', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'f3b86cb71e5ba39e8f98e26b3669416e2cdb4802', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'd18a70b94e3d6860dfac952b26f66e5b96cc6fa0', class: { mobile: this.isTouchDevice } }, h("button", { key: 'ee65221543fd8984f94d0a0b43beb7e1d28411f2', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '1dbdd1e4db4087564464e9586e91b48f80b88aae', name: this.buttonIcon })), h("div", { key: '78b5e0589e7a3dd0592fb2c1cdaae8732f57b129', class: "split-divider" }), h("button", { key: 'cfc5d53f06485a927608a99ea491e36b0e993fcc', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '0e141b614cbfc758f01d21908d846d16bdce586d', name: this.dropdownIcon })), h("kritzel-portal", { key: 'b5def34dcfe5cbbf9641b1218af803937d7a77b6', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '695f6c85a8ecd44f74ecf7752bf77d0caac69e6a', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss;
@@ -3205,7 +3228,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '74579e34c23725e22927afe371c1f7925903720a' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '001a0ef8408d19532b57a521929c0cba54e99c52' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
@@ -3282,23 +3305,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '72a6356a43a15a7abc9a46b0d22c3c62217791e8', style: {
+        return (h(Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: '75f5350f23ada0eee009279eddd7d25273ad3740', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'ad999154289e933cac1fdc13392de2aec78811a8' }), h("div", { key: '6be3f5c24d42898920c339be2cd2f3dd8a82fa80', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '37397c6245dd6b0def23e2611d118e0c4f5860ef', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: 'dbf009c371d46ef0a36e27771758c66e817d9b22', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -3334,7 +3357,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: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;