kritzel-stencil 0.0.131 → 0.0.132

package/dist/components/{p-BuewJQNl.js → p-Davd1R_4.js}

@@ -1,11 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, U as UpdateObjectCommand, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, d as KritzelKeyboardHelper } from './p-DHSEK3rF.js';
-import { O as ObjectHelper } from './p-DnUKql15.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-B1BLgWL1.js';
-import { K as KritzelWorkspace } from './p-B_lb1FGi.js';
-import { d as defineCustomElement$2 } from './p-BubxwvMA.js';
-import { d as defineCustomElement$1 } from './p-p1Jkec_q.js';
+import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, U as UpdateObjectCommand, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, d as KritzelKeyboardHelper } from './p-B3VQubt_.js';
+import { O as ObjectHelper } from './p-EXPChOF6.js';
+import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BGdsAz54.js';
+import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
+import { d as defineCustomElement$2 } from './p-Db3kxVe2.js';
+import { d as defineCustomElement$1 } from './p-sq9jgfX0.js';
 
 class KritzelImage extends KritzelBaseObject {
     __class__ = 'KritzelImage';
@@ -23,17 +24,17 @@ class KritzelImage extends KritzelBaseObject {
         this.translateY = config?.translateY || 0;
         this.scale = config?.scale || 1;
     }
-    static create(store) {
+    static create(core) {
         const object = new KritzelImage();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.x = 0;
         object.y = 0;
         object.translateX = 0;
         object.translateY = 0;
-        object.scale = object._store.state.scale;
-        object.zIndex = store.currentZIndex;
+        object.scale = object._core.store.state.scale;
+        object.zIndex = core.store.currentZIndex;
         return object;
     }
     resize(x, y, width, height) {
@@ -62,8 +63,8 @@ class KritzelImage extends KritzelBaseObject {
 
 class BatchCommand extends KritzelBaseCommand {
     commands;
-    constructor(store, initiator, commands, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, commands, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.commands = commands;
     }
     execute() {
@@ -89,11 +90,11 @@ class KritzelCustomElement extends KritzelBaseObject {
             this.width = config.width || 0;
         }
     }
-    static create(store, config) {
+    static create(core, config) {
         const object = new KritzelCustomElement(config);
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         return object;
     }
     mount(element) {
@@ -129,98 +130,98 @@ class KritzelCustomElement extends KritzelBaseObject {
 
 class RemoveObjectCommand extends KritzelBaseCommand {
     object;
-    constructor(store, initiator, object, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, object, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.object = object;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
-        this._store.deleteObjectFromDatabase(this.object.id);
+        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
+        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._core.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
-        this._store.state.objectsMap.insert(this.object);
-        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
-        this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
+        this._core.store.state.objectsMap.insert(this.object);
+        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._core.addObjectToDatabase(this.object);
     }
 }
 
 class KritzelEraserTool extends KritzelBaseTool {
     touchStartTimeout = null;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._store.state.isErasing = true;
+                this._core.store.setState('isErasing', true);
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
-                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling) {
-                    this._store.state.isErasing = true;
+                if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
+                    this._core.store.setState('isErasing', true);
                 }
             }, 80);
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isErasing) {
-                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+            if (this._core.store.state.isErasing) {
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
                 if (selectedObjects.length === 0)
                     return;
-                const x = this._store.state.pointerX;
-                const y = this._store.state.pointerY;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
                 selectedObjects.forEach(selectedObject => {
                     selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
                 });
-                this._store.rerender();
+                this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.pointers.size === 1 && this._store.state.isErasing) {
-                const shadowRoot = this._store.state.host?.shadowRoot;
+            if (this._core.store.state.pointers.size === 1 && this._core.store.state.isErasing) {
+                const shadowRoot = this._core.store.state.host?.shadowRoot;
                 if (!shadowRoot)
                     return;
-                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
                 if (selectedObjects.length === 0)
                     return;
-                const x = this._store.state.pointerX;
-                const y = this._store.state.pointerY;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
                 selectedObjects.forEach(selectedObject => {
                     selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
                 });
-                this._store.rerender();
+                this._core.rerender();
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects.filter(object => object.markedForRemoval).map(object => {
+            if (this._core.store.state.isErasing) {
+                const removeCommands = this._core.store.allObjects.filter(object => object.markedForRemoval).map(object => {
                     object.markedForRemoval = false;
-                    return new RemoveObjectCommand(this._store, this, object);
+                    return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._store.state.isErasing = false;
+                this._core.store.setState('isErasing', false);
             }
         }
         if (event.pointerType === 'touch') {
             clearTimeout(this.touchStartTimeout);
-            if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects
+            if (this._core.store.state.isErasing) {
+                const removeCommands = this._core.store.allObjects
                     .filter(object => object.markedForRemoval)
                     .map(object => {
                     object.markedForRemoval = false;
-                    return new RemoveObjectCommand(this._store, this, object);
+                    return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._store.state.isErasing = false;
+                this._core.store.setState('isErasing', false);
             }
         }
     }
@@ -228,18 +229,18 @@ class KritzelEraserTool extends KritzelBaseTool {
 
 class RemoveSelectionGroupCommand extends KritzelBaseCommand {
     previousSelectionGroup;
-    constructor(store, initiator, skipHistory = false) {
-        super(store, initiator, skipHistory);
-        this.previousSelectionGroup = this._store.state.selectionGroup;
+    constructor(core, initiator, skipHistory = false) {
+        super(core, initiator, skipHistory);
+        this.previousSelectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
-        this._store.state.selectionGroup = null;
+        this._core.store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
+        this._core.store.setState('selectionGroup', null);
     }
     undo() {
         if (this.previousSelectionGroup) {
-            this._store.state.objectsMap.insert(this.previousSelectionGroup);
-            this._store.state.selectionGroup = this.previousSelectionGroup;
+            this._core.store.state.objectsMap.insert(this.previousSelectionGroup);
+            this._core.store.setState('selectionGroup', this.previousSelectionGroup);
         }
     }
 }
@@ -251,33 +252,33 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
     endX;
     endY;
     skipExecution;
-    constructor(store, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.startX = startX;
         this.startY = startY;
         this.endX = endX;
         this.endY = endY;
         this.skipExecution = skipFirstExecution;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
         if (this.skipExecution) {
             this.skipExecution = false;
             return;
         }
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
     }
     undo() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
     }
 }
 
 class KritzelBaseHandler {
-    _store;
-    constructor(store) {
-        this._store = store;
+    _core;
+    constructor(core) {
+        this._core = core;
     }
 }
 
@@ -288,16 +289,16 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     startY;
     endX;
     endY;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                if (this._store.state.selectionGroup?.isSelected && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
-                    const clientX = event.clientX - this._store.offsetX;
-                    const clientY = event.clientY - this._store.offsetY;
-                    this._store.state.isDragging = true;
+                if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isDragging', true);
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
@@ -306,11 +307,11 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (this._store.state.pointers.size === 1) {
-                if (this._store.state.selectionGroup?.isSelected && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
-                    const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-                    const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.pointers.size === 1) {
+                if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
+                    const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                    const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
                     this.dragStartX = x;
                     this.dragStartY = y;
                     this.startX = x;
@@ -321,30 +322,30 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDragging && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
+            if (this._core.store.state.isDragging && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
                 this.endX = clientX;
                 this.endY = clientY;
-                this._store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
+                this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
                 this.dragStartX = clientX;
                 this.dragStartY = clientY;
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (this._store.state.pointers.size === 1 && this._store.state.selectionGroup && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
-                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
-                this._store.state.isDragging = true;
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.pointers.size === 1 && this._core.store.state.selectionGroup && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
+                const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                this._core.store.setState('isDragging', true);
                 this.endX = x;
                 this.endY = y;
                 const moveDeltaX = Math.abs(x - this.startX);
                 const moveDeltaY = Math.abs(y - this.startY);
                 const moveThreshold = 5;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
-                    clearTimeout(this._store.state.longTouchTimeout);
-                    this._store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
+                    clearTimeout(this._core.store.state.longTouchTimeout);
+                    this._core.store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
                     this.dragStartX = x;
                     this.dragStartY = y;
                 }
@@ -353,29 +354,29 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDragging) {
-                this._store.state.isDragging = false;
-                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true);
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, {
+            if (this._core.store.state.isDragging) {
+                this._core.store.setState('isDragging', false);
+                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true);
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, {
                         translateX: object.translateX,
                         translateY: object.translateY
                     });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isDragging) {
-                this._store.state.isDragging = false;
-                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true);
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, {
+            if (this._core.store.state.isDragging) {
+                this._core.store.setState('isDragging', false);
+                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true);
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, {
                         translateX: object.translateX,
                         translateY: object.translateY
                     });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
             }
         }
     }
@@ -393,19 +394,19 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
     newSize;
     previousSize;
     selectionGroup;
-    constructor(store, initiator, previousSize, newSize, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, previousSize, newSize, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.previousSize = previousSize;
         this.newSize = newSize;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
     }
     undo() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
     }
 }
 
@@ -414,71 +415,71 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     initialMouseY = 0;
     initialSize = { x: 0, y: 0, width: 0, height: 0 };
     newSize = { x: 0, y: 0, width: 0, height: 0 };
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                    const clientX = event.clientX - this._store.offsetX;
-                    const clientY = event.clientY - this._store.offsetY;
-                    this._store.state.isResizing = true;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isResizing', true);
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
-                    this.initialSize.width = this._store.state.selectionGroup.width;
-                    this.initialSize.height = this._store.state.selectionGroup.height;
-                    this.initialSize.x = this._store.state.selectionGroup.translateX;
-                    this.initialSize.y = this._store.state.selectionGroup.translateY;
+                    this.initialSize.width = this._core.store.state.selectionGroup.width;
+                    this.initialSize.height = this._core.store.state.selectionGroup.height;
+                    this.initialSize.x = this._core.store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._core.store.state.selectionGroup.translateY;
                 }
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
             if (activePointers.length === 1) {
-                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                    this._store.state.isResizing = true;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                    this._core.store.setState('isResizing', true);
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
-                    this.initialSize.width = this._store.state.selectionGroup.width;
-                    this.initialSize.height = this._store.state.selectionGroup.height;
-                    this.initialSize.x = this._store.state.selectionGroup.translateX;
-                    this.initialSize.y = this._store.state.selectionGroup.translateY;
-                    clearTimeout(this._store.state.longTouchTimeout);
+                    this.initialSize.width = this._core.store.state.selectionGroup.width;
+                    this.initialSize.height = this._core.store.state.selectionGroup.height;
+                    this.initialSize.x = this._core.store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._core.store.state.selectionGroup.translateY;
+                    clearTimeout(this._core.store.state.longTouchTimeout);
                 }
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isResizing && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
+            if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
-                switch (this._store.state.resizeHandleType) {
+                switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.TopRight:
                         this.newSize.width = this.initialSize.width + dx;
                         this.newSize.height = this.initialSize.height - dy;
                         this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
                         this.newSize.y = this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomRight:
@@ -488,38 +489,37 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         this.newSize.y = this.initialSize.y;
                         break;
                 }
-                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                this._store.rerender();
+                this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const oneFingerTouch = activePointers[0];
             if (!oneFingerTouch) {
                 return;
             }
-            if (this._store.state.isResizing && this._store.state.selectionGroup) {
-                const clientX = Math.round(oneFingerTouch.clientX - this._store.offsetX);
-                const clientY = Math.round(oneFingerTouch.clientY - this._store.offsetY);
+            if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
+                const clientX = Math.round(oneFingerTouch.clientX - this._core.store.offsetX);
+                const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
-                switch (this._store.state.resizeHandleType) {
+                switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.TopRight:
                         this.newSize.width = this.initialSize.width + dx;
                         this.newSize.height = this.initialSize.height - dy;
                         this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
                         this.newSize.y = this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomRight:
@@ -529,33 +529,31 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         this.newSize.y = this.initialSize.y;
                         break;
                 }
-                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                clearTimeout(this._store.state.longTouchTimeout);
+                this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, { ...object });
+            if (this._core.store.state.isResizing) {
+                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize));
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, { ...object });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
-                this._store.state.isResizing = false;
-                this._store.rerender();
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.store.setState('isResizing', false);
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, { ...object });
+            if (this._core.store.state.isResizing) {
+                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize));
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, { ...object });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
-                this._store.state.isResizing = false;
-                this._store.rerender();
-                clearTimeout(this._store.state.longTouchTimeout);
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.store.setState('isResizing', false);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
@@ -565,24 +563,24 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
     rotation;
     initialRotation;
     selectionGroup;
-    constructor(store, initiator, rotation, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, rotation, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.rotation = rotation;
-        this.initialRotation = this._store.state.selectionGroup.rotation;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.initialRotation = this._core.store.state.selectionGroup.rotation;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.rotate(this.rotation);
-        this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsMap.update(object);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.rotate(this.rotation);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
         });
     }
     undo() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.rotate(this.rotation - this.initialRotation);
-        this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsMap.update(object);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup.rotate(this.rotation - this.initialRotation);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
         });
     }
 }
@@ -590,111 +588,109 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
 class KritzelRotationHandler extends KritzelBaseHandler {
     initialRotation = 0;
     rotation = 0;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
-                    const clientX = event.clientX - this._store.offsetX;
-                    const clientY = event.clientY - this._store.offsetY;
-                    this._store.state.isRotating = true;
-                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isRotating', true);
+                    const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                    const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
+                    const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+                    const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
+                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
                 }
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
             if (activePointers.length === 1) {
-                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
-                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                    this._store.state.isRotating = true;
-                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
-                    clearTimeout(this._store.state.longTouchTimeout);
+                if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                    this._core.store.setState('isRotating', true);
+                    const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                    const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
+                    const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+                    const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
+                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
+                    clearTimeout(this._core.store.state.longTouchTimeout);
                 }
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isRotating && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
-                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
+                const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                const groupCenterY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
+                const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+                const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
                 this.rotation = currentRotation - this.initialRotation;
-                this._store.state.selectionGroup.rotate(this.rotation);
-                this._store.rerender();
+                this._core.store.state.selectionGroup.rotate(this.rotation);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
-            if (this._store.state.isRotating && this._store.state.selectionGroup) {
-                const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
+                const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                const groupCenterY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
+                const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+                const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
                 this.rotation = currentRotation - this.initialRotation;
-                this._store.state.selectionGroup.rotate(this.rotation);
-                this._store.rerender();
-                clearTimeout(this._store.state.longTouchTimeout);
+                this._core.store.state.selectionGroup.rotate(this.rotation);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isRotating) {
-                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._store, this, this.rotation);
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, {
+            if (this._core.store.state.isRotating) {
+                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._core, this, this.rotation);
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, {
                         rotation: object.rotation,
                         translateX: object.translateX,
                         translateY: object.translateY,
                     });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
-                this._store.state.isRotating = false;
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.store.setState('isRotating', false);
                 this.initialRotation = 0;
                 this.rotation = 0;
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isRotating) {
-                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._store, this, this.rotation);
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, {
+            if (this._core.store.state.isRotating) {
+                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._core, this, this.rotation);
+                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._core, this, object, {
                         rotation: object.rotation,
                     });
                 });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
-                this._store.state.isRotating = false;
+                this._core.history.executeCommand(new BatchCommand(this._core, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.store.setState('isRotating', false);
                 this.initialRotation = 0;
                 this.rotation = 0;
-                clearTimeout(this._store.state.longTouchTimeout);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
@@ -703,12 +699,12 @@ class KritzelRotationHandler extends KritzelBaseHandler {
 class KrtizelSelectionBox extends KritzelBaseObject {
     __class__ = 'KrtizelSelectionBox';
     objects = [];
-    static create(store) {
+    static create(core) {
         const object = new KrtizelSelectionBox();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
-        object.scale = store.state.scale;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.scale = core.store.state.scale;
         object.zIndex = 99999;
         object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
         object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(0, 122, 255, 0.5))';
@@ -721,20 +717,20 @@ class KrtizelSelectionBox extends KritzelBaseObject {
 
 class AddSelectionGroupCommand extends KritzelBaseCommand {
     selectionGroup;
-    constructor(store, initiator, selectionGroup, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, selectionGroup, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.selectionGroup = selectionGroup;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
-        this._store.state.objectsMap.insert(this.selectionGroup);
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionBox = null;
+        this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
+        this._core.store.state.objectsMap.insert(this.selectionGroup);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.setState('selectionBox', null);
     }
     undo() {
-        this._store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = null;
+        this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', null);
     }
 }
 
@@ -745,23 +741,23 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     touchStartY = 0;
     touchStartTimeout = null;
     get isSelectionClick() {
-        return this._store.state.selectionBox && this._store.state.selectionBox.width === 0 && this._store.state.selectionBox.height === 0;
+        return this._core.store.state.selectionBox && this._core.store.state.selectionBox.width === 0 && this._core.store.state.selectionBox.height === 0;
     }
     get isSelectionDrag() {
-        return this._store.state.selectionBox && (this._store.state.selectionBox.width > 0 || this._store.state.selectionBox.height > 0);
+        return this._core.store.state.selectionBox && (this._core.store.state.selectionBox.width > 0 || this._core.store.state.selectionBox.height > 0);
     }
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
-            if (KritzelEventHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
+            if (KritzelEventHelper.isLeftClick(event) && !this._core.store.state.selectionGroup) {
                 this.startMouseSelection(event);
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
-                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling && !this._store.state.selectionGroup) {
+                if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling && !this._core.store.state.selectionGroup) {
                     this.startTouchSelection();
                     this.updateTouchSelection();
                 }
@@ -770,30 +766,30 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isSelecting) {
+            if (this._core.store.state.isSelecting) {
                 this.updateMouseSelection(event);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-            const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+            const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const moveDeltaX = Math.abs(x - this.touchStartX);
             const moveDeltaY = Math.abs(y - this.touchStartY);
             const moveThreshold = 5;
-            if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._store.state.isSelecting) {
+            if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._core.store.state.isSelecting) {
                 this.updateTouchSelection();
-                clearTimeout(this._store.state.longTouchTimeout);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
+            if (KritzelEventHelper.isLeftClick(event) && this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    const x = this._store.state.pointerX;
-                    const y = this._store.state.pointerY;
-                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    const x = this._core.store.state.pointerX;
+                    const y = this._core.store.state.pointerY;
+                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
                     this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
@@ -806,11 +802,11 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
         if (event.pointerType === 'touch') {
             clearTimeout(this.touchStartTimeout);
-            if (this._store.state.isSelecting) {
+            if (this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    const x = this._store.state.pointerX;
-                    const y = this._store.state.pointerY;
-                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    const x = this._core.store.state.pointerX;
+                    const y = this._core.store.state.pointerY;
+                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
                     this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
@@ -819,82 +815,80 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                     this.addSelectedObjectsToSelectionGroup();
                     this.removeSelectionBox();
                 }
-                this._store.state.skipContextMenu = false;
+                this._core.store.setState('skipContextMenu', false);
             }
         }
     }
     removeSelectionBox() {
-        this._store.state.selectionBox = null;
-        this._store.state.isSelecting = false;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
-        this._store.rerender();
+        this._core.store.setState('selectionBox', null);
+        this._core.store.setState('isSelecting', false);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
     }
     startMouseSelection(event) {
         let clientX, clientY;
-        clientX = event.clientX - this._store.offsetX;
-        clientY = event.clientY - this._store.offsetY;
-        const selectionBox = KrtizelSelectionBox.create(this._store);
-        this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
+        clientX = event.clientX - this._core.store.offsetX;
+        clientY = event.clientY - this._core.store.offsetY;
+        const selectionBox = KrtizelSelectionBox.create(this._core);
+        this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+        this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = selectionBox;
-        this._store.state.isSelecting = true;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsMap.insert(selectionBox);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', selectionBox);
+        this._core.store.setState('isSelecting', true);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._core.store.state.objectsMap.insert(selectionBox);
     }
     startTouchSelection() {
-        const activePointers = Array.from(this._store.state.pointers.values());
+        const activePointers = Array.from(this._core.store.state.pointers.values());
         const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
         let clientX, clientY;
-        clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-        clientY = Math.round(firstTouch.clientY - this._store.offsetY);
+        clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+        clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
         this.touchStartX = clientX;
         this.touchStartY = clientY;
-        const selectionBox = KrtizelSelectionBox.create(this._store);
-        this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
+        const selectionBox = KrtizelSelectionBox.create(this._core);
+        this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+        this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = selectionBox;
-        this._store.state.isSelecting = true;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsMap.insert(selectionBox);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', selectionBox);
+        this._core.store.setState('isSelecting', true);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._core.store.state.objectsMap.insert(selectionBox);
     }
     updateMouseSelection(event) {
         let clientX, clientY;
-        clientX = event.clientX - this._store.offsetX;
-        clientY = event.clientY - this._store.offsetY;
-        const selectionBox = this._store.state.selectionBox;
+        clientX = event.clientX - this._core.store.offsetX;
+        clientY = event.clientY - this._core.store.offsetY;
+        const selectionBox = this._core.store.state.selectionBox;
         if (selectionBox) {
-            const currentX = (clientX - this._store.state.translateX) / selectionBox.scale;
-            const currentY = (clientY - this._store.state.translateY) / selectionBox.scale;
+            const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
+            const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
             selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
             selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
             this.updateSelectedObjects();
-            this._store.rerender();
         }
     }
     updateTouchSelection() {
-        const activePointers = Array.from(this._store.state.pointers.values());
+        const activePointers = Array.from(this._core.store.state.pointers.values());
         const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
         let clientX, clientY;
-        clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-        clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-        const selectionBox = this._store.state.selectionBox;
+        clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+        clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+        const selectionBox = this._core.store.state.selectionBox;
         if (selectionBox) {
-            const currentX = (clientX - this._store.state.translateX) / selectionBox.scale;
-            const currentY = (clientY - this._store.state.translateY) / selectionBox.scale;
+            const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
+            const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
             selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
             selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
             selectionBox.translateX = Math.min(currentX, this.startX);
@@ -903,49 +897,52 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
     }
     updateSelectedObjects() {
-        this._store.allObjects
+        this._core.store.allObjects
             .filter(o => !(o instanceof KrtizelSelectionBox))
-            .forEach(object => (object.isSelected = object.hitTestPolygon(this._store.state.selectionBox.rotatedPolygon)));
+            .forEach(object => (object.isSelected = object.hitTestPolygon(this._core.store.state.selectionBox.rotatedPolygon)));
     }
     addObjectToSelectionGroup(object) {
         if (!object) {
             return;
         }
-        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-        this._store.state.selectionGroup.addOrRemove(object);
-        this._store.state.selectionGroup.isSelected = true;
-        this._store.state.selectionGroup.rotation = object.rotation;
-        this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        selectionGroup.addOrRemove(object);
+        selectionGroup.isSelected = true;
+        selectionGroup.rotation = object.rotation;
+        this._core.store.setState('selectionGroup', selectionGroup);
+        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, this._core.store.state.selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
-        const selectedObjects = this._store.selectedObjects;
+        const selectedObjects = this._core.store.selectedObjects;
         if (selectedObjects.length === 0) {
             return;
         }
-        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
+        this._core.store.setState('selectionGroup', KritzelSelectionGroup.create(this._core));
         selectedObjects.forEach(o => {
             o.isSelected = false;
-            this._store.state.selectionGroup.addOrRemove(o);
+            this._core.store.state.selectionGroup.addOrRemove(o);
         });
-        this._store.state.selectionGroup.isSelected = true;
-        if (this._store.state.selectionGroup.length === 1) {
-            this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
+        const selectionGroup = this._core.store.state.selectionGroup;
+        selectionGroup.isSelected = true;
+        if (selectionGroup.length === 1) {
+            selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
+        this._core.store.setState('selectionGroup', selectionGroup);
+        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, this._core.store.state.selectionGroup));
     }
 }
 
 class KritzelHoverHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const hoveredObject = this._store.getObjectFromPointerEvent(event, '.object');
+            const hoveredObject = this._core.getObjectFromPointerEvent(event, '.object');
             if (!hoveredObject)
                 return;
-            const x = this._store.state.pointerX;
-            const y = this._store.state.pointerY;
+            const x = this._core.store.state.pointerX;
+            const y = this._core.store.state.pointerY;
             hoveredObject.isHovered = hoveredObject.hitTest(x, y);
         }
     }
@@ -957,13 +954,13 @@ class KritzelSelectionTool extends KritzelBaseTool {
     hoverHandler;
     resizeHandler;
     rotationHandler;
-    constructor(store) {
-        super(store);
-        this.selectionHandler = new KritzelSelectionHandler(this._store);
-        this.moveHandler = new KritzelMoveHandler(this._store);
-        this.hoverHandler = new KritzelHoverHandler(this._store);
-        this.resizeHandler = new KritzelResizeHandler(this._store);
-        this.rotationHandler = new KritzelRotationHandler(this._store);
+    constructor(core) {
+        super(core);
+        this.selectionHandler = new KritzelSelectionHandler(this._core);
+        this.moveHandler = new KritzelMoveHandler(this._core);
+        this.hoverHandler = new KritzelHoverHandler(this._core);
+        this.resizeHandler = new KritzelResizeHandler(this._core);
+        this.rotationHandler = new KritzelRotationHandler(this._core);
     }
     handlePointerDown(event) {
         if (event.cancelable) {
@@ -971,16 +968,16 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._store.state.resizeHandleType = this.getHandleType(event);
+                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
+                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
+                this._core.store.setState('resizeHandleType', this.getHandleType(event));
                 const selectedObject = this.getSelectedObject(event);
-                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
+                const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if ((selectedObject === null || isDifferentObject) &&
-                    this._store.state.selectionGroup &&
-                    !this._store.state.isResizeHandleSelected &&
-                    !this._store.state.isRotationHandleSelected) {
-                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                    this._core.store.state.selectionGroup &&
+                    !this._core.store.state.isResizeHandleSelected &&
+                    !this._core.store.state.isRotationHandleSelected) {
+                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
                 if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
                     return;
@@ -990,32 +987,33 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.rotationHandler.handlePointerDown(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
-            if (this._store.state.pointers.size === 1) {
-                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._store.state.resizeHandleType = this.getHandleType(event);
+            if (this._core.store.state.pointers.size === 1) {
+                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
+                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
+                this._core.store.setState('resizeHandleType', this.getHandleType(event));
                 const selectedObject = this.getSelectedObject(event);
-                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
-                if (!this._store.state.selectionGroup && selectedObject) {
-                    this._store.state.skipContextMenu = true;
+                const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
+                if (!this._core.store.state.selectionGroup && selectedObject) {
+                    this._core.store.setState('skipContextMenu', true);
                 }
                 if ((selectedObject === null || isDifferentObject) &&
-                    this._store.state.selectionGroup &&
-                    !this._store.state.isResizeHandleSelected &&
-                    !this._store.state.isRotationHandleSelected) {
-                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                    this._core.store.state.selectionGroup &&
+                    !this._core.store.state.isResizeHandleSelected &&
+                    !this._core.store.state.isRotationHandleSelected) {
+                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
             }
             this.rotationHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.moveHandler.handlePointerDown(event);
             this.selectionHandler.handlePointerDown(event);
+            this._core.rerender();
         }
     }
     handlePointerMove(event) {
@@ -1028,17 +1026,17 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.rotationHandler.handlePointerMove(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
             this.rotationHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.moveHandler.handlePointerMove(event);
             this.selectionHandler.handlePointerMove(event);
-            this._store.rerender();
+            this._core.rerender();
         }
     }
     handlePointerUp(event) {
@@ -1050,22 +1048,23 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerUp(event);
             this.resizeHandler.handlePointerUp(event);
             this.rotationHandler.handlePointerUp(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
             this.rotationHandler.handlePointerUp(event);
             this.resizeHandler.handlePointerUp(event);
             this.moveHandler.handlePointerUp(event);
             this.selectionHandler.handlePointerUp(event);
+            this._core.rerender();
         }
     }
     getSelectedObject(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._store.findObjectById(objectElement?.id);
+        const object = this._core.findObjectById(objectElement?.id);
         if (!object) {
             return null;
         }
@@ -1073,7 +1072,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return object;
         }
         else {
-            const group = KritzelSelectionGroup.create(this._store);
+            const group = KritzelSelectionGroup.create(this._core);
             group.translateX = 0;
             group.translateY = 0;
             group.addOrRemove(object);
@@ -1081,7 +1080,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
     }
     getHandleType(event) {
-        const shadowRoot = this._store.state.host?.shadowRoot;
+        const shadowRoot = this._core.store.state.host?.shadowRoot;
         if (!shadowRoot)
             return;
         const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
@@ -1089,7 +1088,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         return handle?.classList[1];
     }
     isHandleSelected(event) {
-        const shadowRoot = this._store.state.host?.shadowRoot;
+        const shadowRoot = this._core.store.state.host?.shadowRoot;
         if (!shadowRoot)
             return false;
         const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
@@ -1102,9 +1101,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
 }
 
 class KritzelReviver {
-    _store;
-    constructor(store) {
-        this._store = store;
+    _core;
+    constructor(core) {
+        this._core = core;
     }
     revive(obj) {
         if (obj && typeof obj === 'object') {
@@ -1112,34 +1111,37 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = KritzelPath.create(this._store).revive(obj);
+                        revivedObj = KritzelPath.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = KritzelText.create(this._store, obj.fontSize, obj.fontFamily).revive(obj);
+                        revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = KritzelImage.create(this._store).revive(obj);
+                        revivedObj = KritzelImage.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelCustomElement':
-                        revivedObj = KritzelCustomElement.create(this._store).revive(obj);
+                        revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
+                        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._store);
+                        revivedObj = new KritzelBrushTool(this._core);
                         break;
                     case 'KritzelEraserTool':
-                        revivedObj = new KritzelEraserTool(this._store);
+                        revivedObj = new KritzelEraserTool(this._core);
                         break;
                     case 'KritzelImageTool':
-                        revivedObj = new KritzelImageTool(this._store);
+                        revivedObj = new KritzelImageTool(this._core);
                         break;
                     case 'KritzelSelectionTool':
-                        revivedObj = new KritzelSelectionTool(this._store);
+                        revivedObj = new KritzelSelectionTool(this._core);
                         break;
                     case 'KritzelTextTool':
-                        revivedObj = new KritzelTextTool(this._store);
+                        revivedObj = new KritzelTextTool(this._core);
                         break;
                     default:
                         revivedObj = obj;
@@ -1169,12 +1171,12 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     get length() {
         return this.objects.length;
     }
-    static create(store) {
+    static create(core) {
         const object = new KritzelSelectionGroup();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
-        object.scale = store.state.scale;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.scale = core.store.state.scale;
         object.zIndex = 99999;
         return object;
     }
@@ -1206,17 +1208,17 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         });
         this.translateX = x;
         this.translateY = y;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
     move(startX, startY, endX, endY) {
-        const deltaX = (startX - endX) / this._store.state.scale;
-        const deltaY = (startY - endY) / this._store.state.scale;
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
         this.objects.forEach(obj => {
             obj.move(startX, startY, endX, endY);
-            this._store.state.objectsMap.update(obj);
+            this._core.store.state.objectsMap.update(obj);
         });
         this.unchangedObjects.forEach(obj => {
             obj.translateX += deltaX;
@@ -1234,7 +1236,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
             const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
             child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
-            this._store.state.objectsMap.update(child);
+            this._core.store.state.objectsMap.update(child);
         });
         this.refreshObjectDimensions();
         this.unchangedObjects = ObjectHelper.clone(this.objects);
@@ -1255,12 +1257,12 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
             child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
-            this._store.state.objectsMap.update(child);
+            this._core.store.state.objectsMap.update(child);
         });
     }
     copy() {
-        const selectionGroup = KritzelSelectionGroup.create(this._store);
-        let currentZIndex = this._store.currentZIndex;
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        let currentZIndex = this._core.store.currentZIndex;
         this.objects.sort((a, b) => a.zIndex - b.zIndex).forEach(obj => {
             const copiedObject = obj.copy();
             copiedObject.zIndex = currentZIndex;
@@ -1295,7 +1297,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.width = (this.maxX - this.minX - this.padding) * this.scale;
             this.height = (this.maxY - this.minY - this.padding) * this.scale;
         }
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
     getOffsetXToCenter(obj) {
         const objCenterX = obj.translateX + obj.totalWidth / obj.scale / 2;
@@ -1309,7 +1311,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     }
     getUnchangedObject(objectId) {
         const obj = this.unchangedObjects.find(obj => obj.id === objectId);
-        const reviver = new KritzelReviver(this._store);
+        const reviver = new KritzelReviver(this._core);
         return reviver.revive(obj);
     }
 }
@@ -1326,15 +1328,15 @@ function _mergeNamespaces(e,t){return t.forEach((function(t){t&&"string"!=typeof
 class KritzelImageTool extends KritzelBaseTool {
     fileInput = null;
     maxCompressionSize = 300;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
         this.setupFileInput();
     }
     onActivate() {
         this.openFilePicker();
     }
     openFilePicker() {
-        if (this._store.isDisabled) {
+        if (this._core.store.isDisabled) {
             return;
         }
         this.fileInput.click();
@@ -1381,27 +1383,27 @@ class KritzelImageTool extends KritzelBaseTool {
         reader.readAsDataURL(file);
     }
     createKritzelImage(img) {
-        const image = KritzelImage.create(this._store);
+        const image = KritzelImage.create(this._core);
         const { scaledWidth, scaledHeight } = image.calculateScaledDimensions(img);
         image.src = img.src;
         image.width = scaledWidth;
         image.height = scaledHeight;
-        image.zIndex = this._store.currentZIndex;
+        image.zIndex = this._core.store.currentZIndex;
         image.centerInViewport();
         this.addImageToStore(image);
         return image;
     }
     addImageToStore(image) {
-        const selectionGroup = KritzelSelectionGroup.create(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
         selectionGroup.addOrRemove(image);
         selectionGroup.isSelected = true;
-        const addImageCommand = new AddObjectCommand(this._store, this, image);
-        const addSelectionGroupCommand = new AddSelectionGroupCommand(this._store, this, selectionGroup);
-        this._store.history.executeCommand(new BatchCommand(this._store, this, [addImageCommand, addSelectionGroupCommand]));
-        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        const addImageCommand = new AddObjectCommand(this._core, this, image);
+        const addSelectionGroupCommand = new AddSelectionGroupCommand(this._core, this, selectionGroup);
+        this._core.history.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     handleCancel() {
-        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
 }
 
@@ -1409,117 +1411,119 @@ const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
 class KritzelViewport {
-    _store;
+    _core;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
-    constructor(store, host) {
-        this._store = store;
-        this._store.state.host = host;
-        this._store.state.viewportWidth = host.clientWidth;
-        this._store.state.viewportHeight = host.clientHeight;
-        this._store.state.startX = 0;
-        this._store.state.startY = 0;
-        this._store.state.translateX = 0;
-        this._store.state.translateY = 0;
+    constructor(core, host) {
+        this._core = core;
+        this._core.store.setState('host', host);
+        this._core.store.setState('viewportWidth', host.clientWidth);
+        this._core.store.setState('viewportHeight', host.clientHeight);
+        this._core.store.setState('startX', 0);
+        this._core.store.setState('startY', 0);
+        this._core.store.setState('translateX', 0);
+        this._core.store.setState('translateY', 0);
     }
     handleResize() {
-        this._store.state.viewportWidth = this._store.state.host.clientWidth;
-        this._store.state.viewportHeight = this._store.state.host.clientHeight;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
+        this._core.store.setState('viewportWidth', this._core.store.state.host.clientWidth);
+        this._core.store.setState('viewportHeight', this._core.store.state.host.clientHeight);
+        this._core.store.setState('hasViewportChanged', true);
+        this._core.rerender();
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
+            const adjustedClientX = event.clientX - this._core.store.offsetX;
+            const adjustedClientY = event.clientY - this._core.store.offsetY;
             if (event.button === KritzelMouseButton.Right) {
-                this._store.state.isPanning = true;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
+                this._core.store.setState('isPanning', true);
+                this._core.store.setState('startX', adjustedClientX);
+                this._core.store.setState('startY', adjustedClientY);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                this._store.state.currentPath = null;
-                this._store.state.isScaling = true;
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                this._core.store.setState('currentPath', null);
+                this._core.store.setState('isScaling', true);
+                const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
                 this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
                 this.startX = (firstTouchX + secondTouchX) / 2;
                 this.startY = (firstTouchY + secondTouchY) / 2;
-                this._store.rerender();
+                this._core.rerender();
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
-                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
-                this._store.state.startX = xRelativeToHost;
-                this._store.state.startY = yRelativeToHost;
-                this._store.state.hasViewportChanged = true;
-                this._store.state.skipContextMenu = true;
-                this._store.rerender();
-                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
+            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            if (this._core.store.state.isPanning) {
+                const dx = xRelativeToHost - this._core.store.state.startX;
+                const dy = yRelativeToHost - this._core.store.state.startY;
+                this._core.store.setState('translateX', this._core.store.state.translateX + dx);
+                this._core.store.setState('translateY', this._core.store.state.translateY + dy);
+                this._core.store.setState('startX', xRelativeToHost);
+                this._core.store.setState('startY', yRelativeToHost);
+                this._core.store.setState('hasViewportChanged', true);
+                this._core.store.setState('skipContextMenu', true);
+                this._core.rerender();
+                this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
         }
         if (event.pointerType === 'touch') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            const activePointers = Array.from(this._store.state.pointers.values());
+            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
+            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
                 const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
                 const midpointX = (firstTouchX + secondTouchX) / 2;
                 const midpointY = (firstTouchY + secondTouchY) / 2;
                 const scaleRatio = currentTouchDistance / this.initialTouchDistance;
-                const newScale = this._store.state.scale * scaleRatio;
-                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
-                    this._store.state.translateX += midpointX - this.startX;
-                    this._store.state.translateY += midpointY - this.startY;
+                const newScale = this._core.store.state.scale * scaleRatio;
+                if (newScale > this._core.store.state.scaleMax || newScale < this._core.store.state.scaleMin) {
+                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX);
+                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY);
                 }
                 else {
-                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
-                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
-                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
-                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
-                    this._store.state.scale = newScale;
+                    const translateXAdjustment = (midpointX - this._core.store.state.translateX) * (scaleRatio - 1);
+                    const translateYAdjustment = (midpointY - this._core.store.state.translateY) * (scaleRatio - 1);
+                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment);
+                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment);
+                    this._core.store.setState('scale', newScale);
                     this.initialTouchDistance = currentTouchDistance;
                 }
                 this.startX = midpointX;
                 this.startY = midpointY;
-                this._store.state.hasViewportChanged = true;
-                this._store.rerender();
-                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+                this._core.store.setState('hasViewportChanged', true);
+                this._core.rerender();
+                this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isPanning) {
-                this._store.state.isPanning = false;
-                this._store.rerender();
+            if (this._core.store.state.isPanning) {
+                this._core.store.setState('isPanning', false);
+                this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            this._store.state.isScaling = false;
-            this._store.rerender();
+            this._core.store.setState('isScaling', false);
+            this._core.rerender();
         }
     }
     handleWheel(event) {
@@ -1532,188 +1536,166 @@ class KritzelViewport {
         }
     }
     handleZoom(event) {
-        const rect = this._store.state.host.getBoundingClientRect();
+        this._core.store.setState('isScaling', true);
+        const rect = this._core.store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - rect.left;
         const yRelativeToHost = event.clientY - rect.top;
-        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-        const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
-        const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
-        const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
-        this._store.state.scale = newScale;
-        this._store.state.translateX -= translateXAdjustment;
-        this._store.state.translateY -= translateYAdjustment;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+        this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
+        this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+        const delta = event.deltaY > 0 ? -this._core.store.state.scaleStep * this._core.store.state.scale : this._core.store.state.scaleStep * this._core.store.state.scale;
+        const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale + delta));
+        const scaleRatio = newScale / this._core.store.state.scale;
+        const translateXAdjustment = (xRelativeToHost - this._core.store.state.translateX) * (scaleRatio - 1);
+        const translateYAdjustment = (yRelativeToHost - this._core.store.state.translateY) * (scaleRatio - 1);
+        this._core.store.setState('scale', newScale);
+        this._core.store.setState('translateX', this._core.store.state.translateX - translateXAdjustment);
+        this._core.store.setState('translateY', this._core.store.state.translateY - translateYAdjustment);
+        this._core.store.setState('hasViewportChanged', true);
+        this._core.rerender();
+        this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+        setTimeout(() => {
+            this._core.store.setState('isScaling', false);
+            this._core.rerender();
+        }, 300);
     }
     handlePan(event) {
+        this._core.store.setState('isPanning', true);
         const panSpeed = 0.8;
-        this._store.state.translateX -= event.deltaX * panSpeed;
-        this._store.state.translateY -= event.deltaY * panSpeed;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
-    }
-}
-
-class UpdateViewportCommand extends KritzelBaseCommand {
-    currentViewport;
-    previousViewport;
-    constructor(store, initiator, previousViewport, skipHistory = false) {
-        super(store, initiator, skipHistory);
-        this.previousViewport = previousViewport;
-        this.currentViewport = {
-            scale: this._store.state.scale,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    execute() {
-        this._store.state.scale = this.currentViewport.scale;
-        this._store.state.translateX = this.currentViewport.translateX;
-        this._store.state.translateY = this.currentViewport.translateY;
-    }
-    undo() {
-        this._store.state.scale = this.previousViewport.scale;
-        this._store.state.translateX = this.previousViewport.translateX;
-        this._store.state.translateY = this.previousViewport.translateY;
+        this._core.store.setState('translateX', this._core.store.state.translateX - event.deltaX * panSpeed);
+        this._core.store.setState('translateY', this._core.store.state.translateY - event.deltaY * panSpeed);
+        this._core.store.setState('hasViewportChanged', true);
+        this._core.rerender();
+        this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+        setTimeout(() => {
+            this._core.store.setState('isPanning', false);
+            this._core.rerender();
+        }, 300);
     }
 }
 
-class KritzelCircularBuffer {
-    buffer;
-    capacity;
-    head = 0;
-    tail = 0;
-    size = 0;
-    constructor(capacity) {
-        this.capacity = capacity;
-        this.buffer = new Array(capacity).fill(null);
+class KritzelKeyHandler extends KritzelBaseHandler {
+    constructor(core) {
+        super(core);
     }
-    add(item) {
-        this.buffer[this.head] = item;
-        this.head = (this.head + 1) % this.capacity;
-        if (this.size < this.capacity) {
-            this.size++;
+    handleKeyDown(event) {
+        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        if (this._core.store.state.isCtrlKeyPressed) {
+            event.preventDefault();
         }
-        else {
-            this.tail = (this.tail + 1) % this.capacity;
+        if (event.key === 'Escape' && this._core.store.state.selectionGroup) {
+            this._core.clearSelection();
         }
-    }
-    pop() {
-        if (this.size === 0) {
-            return null;
+        if (event.key === 'Delete' && this._core.store.state.selectionGroup) {
+            this._core.delete();
         }
-        this.head = (this.head - 1 + this.capacity) % this.capacity;
-        const item = this.buffer[this.head];
-        this.buffer[this.head] = null;
-        this.size--;
-        return item;
-    }
-    peek() {
-        if (this.size === 0) {
-            return null;
+        if (event.key === 'z' && event.ctrlKey) {
+            this._core.history.undo();
+        }
+        if (event.key === 'y' && event.ctrlKey) {
+            this._core.history.redo();
+        }
+        if (event.key === 's' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'b' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'e' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'i' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('image'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'x' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'c' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.copy();
+            this._core.rerender();
+        }
+        if (event.key === 'v' && event.ctrlKey && this._core.store.state.copiedObjects) {
+            this._core.paste();
+        }
+        if (event.key === '+' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.bringForward();
+        }
+        if (event.key === '-' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.sendBackward();
+        }
+        if (event.key === '*' && event.shiftKey && this._core.store.state.selectionGroup) {
+            this._core.bringToFront();
+        }
+        if (event.key === '_' && event.shiftKey && this._core.store.state.selectionGroup) {
+            this._core.sendToBack();
+        }
+        if (event.key === 'a' && event.ctrlKey && this._core.store.state.activeText) {
+            this._core.store.state.activeText.selectAll();
+        }
+        if (event.key === 'v' && event.ctrlKey && this._core.store.state.activeText) {
+            this._core.store.state.activeText.insertFromClipboard();
         }
-        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;
+    handleKeyUp(event) {
+        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
     }
 }
 
-class KritzelHistory {
-    _store;
-    undoStack;
-    redoStack;
-    previousViewport;
-    constructor(store) {
-        this._store = store;
-        this.undoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.redoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    reset() {
-        this.undoStack.clear();
-        this.redoStack.clear();
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY
-        };
+class KritzelContextMenuHandler extends KritzelBaseHandler {
+    globalContextMenuItems = [];
+    objectContextMenuItems = [];
+    constructor(core, globalContextMenuItems, objectContextMenuItems) {
+        super(core);
+        this.globalContextMenuItems = globalContextMenuItems;
+        this.objectContextMenuItems = objectContextMenuItems;
     }
-    executeCommand(command) {
-        if (this._store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (command.skipHistory === false) {
-            if (this._store.state.debugInfo.logCommands) {
-                console.info('add', command);
-            }
-            this.undoStack.add(command);
-            if (this.redoStack.isEmpty() === false) {
-                this.redoStack.clear();
-            }
+    handleContextMenu(event) {
+        if (!(this._core.store.state.activeTool instanceof KritzelSelectionTool)) {
+            return;
         }
-        this._store.rerender();
-    }
-    undo() {
-        if (this._store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-            command.undo();
-            this._store.state.hasViewportChanged = false;
-            this._store.rerender();
+        if (this._core.store.state.skipContextMenu) {
+            this._core.store.setState('skipContextMenu', false);
             return;
         }
-        const command = this.undoStack.pop();
-        if (command) {
-            command.undo();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('undo', command);
-            this.redoStack.add(command);
+        const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
+        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
+            const selectionGroup = KritzelSelectionGroup.create(this._core);
+            selectionGroup.addOrRemove(selectedObject);
+            selectionGroup.isSelected = true;
+            selectionGroup.rotation = selectedObject.rotation;
+            this._core.store.setState('selectionGroup', selectionGroup);
+            this._core.store.setState('isSelecting', false);
+            this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, this._core.store.state.selectionGroup));
+        }
+        this._core.store.setState('contextMenuItems', this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems);
+        let x = event.clientX - this._core.store.offsetX;
+        let y = event.clientY - this._core.store.offsetY;
+        const menuWidthEstimate = 150;
+        const menuHeightEstimate = 200;
+        const margin = 10;
+        if (x + menuWidthEstimate > window.innerWidth - margin) {
+            x = window.innerWidth - menuWidthEstimate - margin;
         }
-        this._store.rerender();
-    }
-    redo() {
-        const command = this.redoStack.pop();
-        if (command) {
-            command.execute();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('redo', command);
-            this.undoStack.add(command);
+        if (y + menuHeightEstimate > window.innerHeight - margin) {
+            y = window.innerHeight - menuHeightEstimate - margin;
         }
-        this._store.rerender();
+        x = Math.max(margin, x);
+        y = Math.max(margin, y);
+        this._core.store.setState('contextMenuX', x);
+        this._core.store.setState('contextMenuY', y);
+        this._core.store.setState('isContextMenuVisible', true);
+        this._core.store.setState('isEnabled', false);
+        this._core.rerender();
     }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-        command.execute();
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
+}
+
+class KritzelClassHelper {
+    static isInstanceOf(object, className) {
+        return !!object && object.__class__ === className;
     }
 }
 
@@ -1732,7 +1714,6 @@ const DEFAULT_ENGINE_STATE = {
     isEnabled: true,
     isScaling: false,
     isPanning: false,
-    isFocused: false,
     isSelecting: false,
     isResizing: false,
     isResizeHandleSelected: false,
@@ -1795,7 +1776,7 @@ class KritzelDatabase {
                 return;
             }
             if (this.isLoggingEnabled) {
-                console.log(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
+                console.info(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
             }
             const request = indexedDB.open(this.dbName, this.dbVersion);
             request.onerror = () => {
@@ -1805,25 +1786,25 @@ class KritzelDatabase {
             request.onsuccess = () => {
                 this.db = request.result;
                 if (this.isLoggingEnabled) {
-                    console.log(`[IndexedDB] Database opened successfully.`);
+                    console.info(`[IndexedDB] Database opened successfully.`);
                 }
                 resolve();
             };
             request.onupgradeneeded = event => {
                 if (this.isLoggingEnabled) {
-                    console.log(`[IndexedDB] Upgrade needed for database: ${this.dbName}`);
+                    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.log(`[IndexedDB] Creating store: ${storeConfig.name}`);
+                            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.log(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
+                                    console.info(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
                                 }
                                 store.createIndex(index.name, index.keyPath, index.options);
                             });
@@ -1836,7 +1817,7 @@ class KritzelDatabase {
     close() {
         if (this.db) {
             if (this.isLoggingEnabled) {
-                console.log(`[IndexedDB] Closing database: ${this.dbName}`);
+                console.info(`[IndexedDB] Closing database: ${this.dbName}`);
             }
             this.db.close();
             this.db = null;
@@ -1844,43 +1825,51 @@ class KritzelDatabase {
     }
     async add(storeName, item) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Add:', { storeName, item });
+            console.info('[IndexedDB] Add:', { storeName, item });
         }
-        return this.executeTransaction(storeName, 'readwrite', store => store.add(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.add(serializedItem));
     }
     async get(storeName, key) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Get:', { storeName, key });
+            console.info('[IndexedDB] Get:', { storeName, key });
         }
         return this.executeTransaction(storeName, 'readonly', store => store.get(key));
     }
     async getAll(storeName) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAll:', { storeName });
+            console.info('[IndexedDB] GetAll:', { storeName });
         }
         return this.executeTransaction(storeName, 'readonly', store => store.getAll());
     }
     async update(storeName, item) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Update:', { storeName, item });
+            console.info('[IndexedDB] Update:', { storeName, item });
+        }
+        if (item.serialize === undefined) {
+            throw new Error('Item does not implement KritzelSerializable interface.');
         }
-        return this.executeTransaction(storeName, 'readwrite', store => store.put(item));
+        const serializedItem = item.serialize();
+        return this.executeTransaction(storeName, 'readwrite', store => store.put(serializedItem));
     }
     async delete(storeName, key) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Delete:', { storeName, key });
+            console.info('[IndexedDB] Delete:', { storeName, key });
         }
         return this.executeTransaction(storeName, 'readwrite', store => store.delete(key));
     }
     async deleteByRange(storeName, range) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] DeleteByRange:', { storeName, range });
+            console.info('[IndexedDB] DeleteByRange:', { storeName, range });
         }
         return this.executeTransaction(storeName, 'readwrite', store => store.delete(range));
     }
     async getAllByRange(storeName, range) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAllByRange:', { storeName, range });
+            console.info('[IndexedDB] GetAllByRange:', { storeName, range });
         }
         return this.executeTransaction(storeName, 'readonly', store => {
             return store.getAll(range);
@@ -1888,7 +1877,7 @@ class KritzelDatabase {
     }
     async getAllByIndex(storeName, indexName, query) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
+            console.info('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
         }
         return this.executeTransaction(storeName, 'readonly', store => {
             const index = store.index(indexName);
@@ -1924,7 +1913,7 @@ class KritzelDatabase {
         }
         const storeNames = await this.extractStoreNamesFromActions(actions);
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Starting batch transaction:', { storeNames });
+            console.info('[IndexedDB] Starting batch transaction:', { storeNames });
         }
         return new Promise((resolve, reject) => {
             const transaction = this.db.transaction(storeNames, 'readwrite');
@@ -1942,13 +1931,13 @@ class KritzelDatabase {
                 executeTransaction: (storeName, mode, action) => {
                     return new Promise((resolveRequest, rejectRequest) => {
                         if (this.isLoggingEnabled) {
-                            console.log('[IndexedDB] Executing batch action:', { storeName, mode });
+                            console.info('[IndexedDB] Executing batch action:', { storeName, mode });
                         }
                         const store = transaction.objectStore(storeName);
                         const request = action(store);
                         request.onsuccess = () => {
                             if (this.isLoggingEnabled) {
-                                console.log('[IndexedDB] Batch action request successful:', { result: request.result });
+                                console.info('[IndexedDB] Batch action request successful:', { result: request.result });
                             }
                             resolveRequest(request.result);
                         };
@@ -1961,7 +1950,7 @@ class KritzelDatabase {
             };
             transaction.oncomplete = () => {
                 if (this.isLoggingEnabled) {
-                    console.log('[IndexedDB] Batch transaction complete.');
+                    console.info('[IndexedDB] Batch transaction complete.');
                 }
                 Promise.all(promises).then(() => resolve(results));
             };
@@ -2006,6 +1995,164 @@ class KritzelDatabase {
     }
 }
 
+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.setState('scale', this.currentViewport.scale);
+        this._core.store.setState('translateX', this.currentViewport.translateX);
+        this._core.store.setState('translateY', this.currentViewport.translateY);
+    }
+    undo() {
+        this._core.store.setState('scale', this.previousViewport.scale);
+        this._core.store.setState('translateX', this.previousViewport.translateX);
+        this._core.store.setState('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;
+        }
+        this.head = (this.head - 1 + this.capacity) % this.capacity;
+        const item = this.buffer[this.head];
+        this.buffer[this.head] = null;
+        this.size--;
+        return item;
+    }
+    peek() {
+        if (this.size === 0) {
+            return null;
+        }
+        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;
+    previousViewport;
+    constructor(core) {
+        this._core = core;
+        this.undoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
+        this.redoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
+        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,
+        };
+    }
+    reset() {
+        this.undoStack.clear();
+        this.redoStack.clear();
+        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 (command.skipHistory === false) {
+            if (this._core.store.state.debugInfo.logCommands) {
+                console.info('add', command);
+            }
+            this.undoStack.add(command);
+            if (this.redoStack.isEmpty() === false) {
+                this.redoStack.clear();
+            }
+        }
+        this._core.rerender();
+    }
+    undo() {
+        if (this._core.store.state.hasViewportChanged) {
+            const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
+            command.undo();
+            this._core.store.setState('hasViewportChanged', false);
+            this._core.rerender();
+            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.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();
+    }
+    addUpdateViewportCommand() {
+        const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
+        command.execute();
+        this.undoStack.add(command);
+        if (this.redoStack.isEmpty() === false) {
+            this.redoStack.clear();
+        }
+        this._core.store.setState('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 KritzelObjectMap {
     map;
     constructor() {
@@ -2050,18 +2197,8 @@ class KritzelObjectMap {
 }
 
 class KritzelStore {
-    _kritzelEngine;
     _state;
-    _history;
-    _database;
     _listeners = new Map();
-    objects = [];
-    get history() {
-        return this._history;
-    }
-    get database() {
-        return this._database;
-    }
     get state() {
         return this._state;
     }
@@ -2083,12 +2220,52 @@ class KritzelStore {
     get isDisabled() {
         return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
     }
+    constructor(state) {
+        this._state = state;
+        this._state.objectsMap = new KritzelObjectMap();
+    }
+    onStateChange(property, listener) {
+        if (!this._listeners.has(property)) {
+            this._listeners.set(property, new Set());
+        }
+        this._listeners.get(property).add(listener);
+    }
+    getState(property) {
+        return this._state[property];
+    }
+    setState(property, value) {
+        const oldValue = this._state[property];
+        if (oldValue !== value) {
+            this._state[property] = value;
+            if (this._listeners.has(property)) {
+                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
+            }
+        }
+    }
+}
+
+class KritzelCore {
+    _kritzelEngine;
+    _store;
+    _history;
+    _database;
+    get engine() {
+        return this._kritzelEngine;
+    }
+    get history() {
+        return this._history;
+    }
+    get database() {
+        return this._database;
+    }
+    get store() {
+        return this._store;
+    }
     constructor(kritzelEngine) {
-        this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
+        this._store = new KritzelStore(DEFAULT_ENGINE_STATE);
         this._history = new KritzelHistory(this);
-        this._database = new KritzelDatabase('kritzelDB', 1, this._state.debugInfo.logDatabase);
-        this._state.objectsMap = new KritzelObjectMap();
+        this._database = new KritzelDatabase('kritzelDB', 1, this._store.state.debugInfo.logDatabase);
     }
     async initializeDatabase() {
         await this._database.open([
@@ -2104,52 +2281,50 @@ class KritzelStore {
         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');
-        this._state.activeWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
-        const isExistingWorkspace = await this.getWorkspace(this._state.activeWorkspace.id);
+        this._store.setState('activeWorkspace', workspace ?? mostRecentWorkspace ?? fallbackWorkspace);
+        const isExistingWorkspace = await this.getWorkspace(this._store.state.activeWorkspace.id);
         if (isExistingWorkspace) {
-            await this.updateWorkspace(this._state.activeWorkspace);
+            await this.updateWorkspace(this._store.state.activeWorkspace);
         }
         else {
-            await this.createWorkspace(this._state.activeWorkspace);
+            await this.createWorkspace(this._store.state.activeWorkspace);
         }
-        this._state.workspaces = await this.getWorkspaces();
-        this.state.translateX = this._state.activeWorkspace.viewport.translateX;
-        this.state.translateY = this._state.activeWorkspace.viewport.translateY;
-        this.state.scale = this._state.activeWorkspace.viewport.scale;
-        await this.initializeWorkspaceObjects(this._state.activeWorkspace.id);
+        this._store.setState('workspaces', await this.getWorkspaces());
+        this._store.setState('translateX', this._store.state.activeWorkspace.viewport.translateX);
+        this._store.setState('translateY', this._store.state.activeWorkspace.viewport.translateY);
+        this._store.setState('scale', this._store.state.activeWorkspace.viewport.scale);
+        await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
-        this._state.objectsMap.reset();
+        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._state.objectsMap.insert(revivedObject);
+            this._store.state.objectsMap.insert(revivedObject);
         });
         this.rerender();
     }
     async updateWorkspaceViewport(translateX, translateY, scale) {
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.viewport = {
-            translateX,
-            translateY,
-            scale,
-        };
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.update('workspaces', this.state.activeWorkspace);
+        activeWorkspace.viewport = { translateX, translateY, scale };
+        activeWorkspace.updatedAt = new Date();
+        await this._database.update('workspaces', activeWorkspace);
     }
     async addObjectToDatabase(object) {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.add('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        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);
         });
     }
@@ -2157,11 +2332,12 @@ class KritzelStore {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.update('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        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);
         });
     }
@@ -2169,25 +2345,32 @@ class KritzelStore {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.delete('objects', [this.state.activeWorkspace.id, objectId]), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        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);
         });
     }
-    getWorkspace(id) {
+    async getWorkspace(id) {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        return this._database.get('workspaces', id);
+        const reviver = new KritzelReviver(this);
+        return this._database
+            .get('workspaces', id)
+            .then(rawWorkspace => rawWorkspace ? reviver.revive(rawWorkspace) : null);
     }
-    getWorkspaces() {
+    async getWorkspaces() {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        return this._database.getAll('workspaces');
+        const reviver = new KritzelReviver(this);
+        return this._database
+            .getAll('workspaces')
+            .then(rawWorkspaces => rawWorkspaces.map(ws => reviver.revive(ws)));
     }
     async createWorkspace(workspace) {
         if (!this._database) {
@@ -2196,7 +2379,7 @@ class KritzelStore {
         workspace.createdAt = new Date();
         workspace.updatedAt = new Date();
         await this._database.add('workspaces', workspace);
-        this.state.workspaces.push(workspace);
+        this._store.state.workspaces.push(workspace);
     }
     async updateWorkspace(workspace) {
         if (!this._database) {
@@ -2204,9 +2387,11 @@ class KritzelStore {
         }
         workspace.updatedAt = new Date();
         await this._database.update('workspaces', workspace);
-        const index = this.state.workspaces.findIndex(w => w.id === workspace.id);
+        const workspaces = this._store.state.workspaces;
+        const index = workspaces.findIndex(w => w.id === workspace.id);
         if (index !== -1) {
-            this.state.workspaces[index] = workspace;
+            workspaces[index] = workspace;
+            this._store.setState('workspaces', workspaces);
         }
     }
     async deleteWorkspace(workspace) {
@@ -2216,7 +2401,7 @@ class KritzelStore {
         const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
         await this._database.deleteByRange('objects', objectRange);
         await this._database.delete('workspaces', workspace.id);
-        this.state.workspaces = this.state.workspaces.filter(ws => ws.id !== workspace.id);
+        this._store.setState('workspaces', this._store.state.workspaces.filter(ws => ws.id !== workspace.id));
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -2224,7 +2409,7 @@ class KritzelStore {
         }
     }
     findObjectById(id) {
-        for (const object of this.allObjects) {
+        for (const object of this._store.allObjects) {
             if (object.id === id) {
                 return object;
             }
@@ -2232,33 +2417,18 @@ class KritzelStore {
         return null;
     }
     deselectAllObjects() {
-        if (this._state.selectionGroup) {
+        if (this._store.state.selectionGroup) {
             this._history.executeCommand(new RemoveSelectionGroupCommand(this, this));
         }
     }
-    onStateChange(property, listener) {
-        if (!this._listeners.has(property)) {
-            this._listeners.set(property, new Set());
-        }
-        this._listeners.get(property).add(listener);
-    }
-    setState(property, value) {
-        const oldValue = this._state[property];
-        if (oldValue !== value) {
-            this._state[property] = value;
-            if (this._listeners.has(property)) {
-                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
-            }
-        }
-    }
     delete() {
-        if (!this.state.selectionGroup) {
+        if (!this._store.state.selectionGroup) {
             return;
         }
-        const deleteSelectedObjectsCommand = this.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this.state.selectionGroup, obj));
-        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        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.history.executeCommand(new BatchCommand(this, this.state.selectionGroup, commands));
+        this.history.executeCommand(new BatchCommand(this, this._store.state.selectionGroup, commands));
     }
     deleteObject(id, skipHistory = false) {
         const object = this.findObjectById(id);
@@ -2268,28 +2438,30 @@ class KritzelStore {
         }
     }
     copy() {
-        this.state.copiedObjects = this.state.selectionGroup.copy();
+        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
     }
     paste(x, y) {
-        this.state.copiedObjects.isSelected = true;
-        const adjustedX = x !== undefined ? x : this.state.copiedObjects.translateX + 25;
-        const adjustedY = y !== undefined ? y : this.state.copiedObjects.translateY + 25;
-        this.state.copiedObjects.updatePosition(adjustedX, adjustedY);
+        const copiedObjects = this._store.state.copiedObjects;
+        copiedObjects.isSelected = true;
+        this._store.setState('copiedObjects', copiedObjects);
+        const adjustedX = x !== undefined ? x : this._store.state.copiedObjects.translateX + 25;
+        const adjustedY = y !== undefined ? y : this._store.state.copiedObjects.translateY + 25;
+        this._store.state.copiedObjects.updatePosition(adjustedX, adjustedY);
         const commands = [];
-        if (this.state.selectionGroup !== null) {
-            commands.push(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
+        if (this._store.state.selectionGroup !== null) {
+            commands.push(new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup));
         }
-        const addCopiedObjectsCommands = this.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
-        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this.state.copiedObjects);
+        const addCopiedObjectsCommands = this._store.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
+        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this._store.state.copiedObjects);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
         this.history.executeCommand(new BatchCommand(this, this, commands));
-        this.state.isSelecting = false;
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-        this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._store.setState('isSelecting', false);
+        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     bringForward(object) {
-        const max = this.allObjects.length + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const max = this._store.allObjects.length + 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === max) {
                 return;
@@ -2300,7 +2472,7 @@ class KritzelStore {
     }
     sendBackward(object) {
         const min = 0;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === min) {
                 return;
@@ -2310,16 +2482,16 @@ class KritzelStore {
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
-        const max = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const max = Math.max(...this._store.allObjects.map(obj => obj.zIndex)) + 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
-        const min = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const min = Math.min(...this._store.allObjects.map(obj => obj.zIndex)) - 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
@@ -2335,14 +2507,14 @@ class KritzelStore {
             selectionGroup.addOrRemove(obj);
         });
         selectionGroup.isSelected = true;
-        this.state.selectionGroup = selectionGroup;
+        this._store.setState('selectionGroup', selectionGroup);
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
         this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
     }
     selectAllObjectsInViewport() {
-        const objectsInViewport = this._state.objectsMap
+        const objectsInViewport = this._store.state.objectsMap
             .filter(o => o.isInViewport())
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
@@ -2352,31 +2524,31 @@ class KritzelStore {
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.isSelected = true;
-            this.state.isSelecting = false;
+            this._store.setState('isSelecting', false);
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
             this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
-            this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
     clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        const command = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         this.history.executeCommand(command);
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
+        this._store.setState('selectionGroup', null);
+        this._store.setState('selectionBox', null);
+        this._store.setState('isSelecting', false);
+        this._store.setState('isResizeHandleSelected', false);
+        this._store.setState('isRotationHandleSelected', false);
     }
     resetActiveText() {
-        if (this.state.activeText && this.state.activeText.value === ' ') {
-            this.deleteObject(this.state.activeText.id, true);
+        if (this._store.state.activeText && this._store.state.activeText.value === ' ') {
+            this.deleteObject(this._store.state.activeText.id, true);
         }
-        this.state.activeText = null;
+        this._store.setState('activeText', null);
     }
     getObjectFromPointerEvent(event, selector = '.object') {
-        const shadowRoot = this.state.host?.shadowRoot;
+        const shadowRoot = this._store.state.host?.shadowRoot;
         if (!shadowRoot)
             return null;
         const clientX = event.clientX;
@@ -2386,12 +2558,14 @@ class KritzelStore {
             return null;
         const selectedObject = elementAtPoint.closest(selector);
         if (selectedObject) {
-            return this.allObjects.find(object => selectedObject.id === object.id);
+            const foundObject = this._store.allObjects.find(object => selectedObject.id === object.id);
+            const isHit = foundObject?.hitTest(clientX, clientY);
+            return isHit ? foundObject : null;
         }
         return null;
     }
     getObjectsFromPointerEvent(event, selector = '.object') {
-        const shadowRoot = this.state.host?.shadowRoot;
+        const shadowRoot = this._store.state.host?.shadowRoot;
         if (!shadowRoot)
             return [];
         const clientX = event.clientX;
@@ -2407,292 +2581,117 @@ class KritzelStore {
             }
         });
         if (objectIds.size > 0) {
-            return this.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
+            return this._store.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
         }
         return [];
     }
     getCanvasPoint(event) {
-        if (!this.state.host) {
+        if (!this._store.state.host) {
             return { x: 0, y: 0 };
         }
-        // Get the position of the kritzel-engine host element relative to the viewport
-        const hostRect = this.state.host.getBoundingClientRect();
-        // 1. Make the pointer coordinates relative to the host element
+        const hostRect = this._store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - hostRect.left;
         const yRelativeToHost = event.clientY - hostRect.top;
-        // 2. Reverse the translation applied to the #origin div
-        const xWithoutTranslate = xRelativeToHost - this.state.translateX;
-        const yWithoutTranslate = yRelativeToHost - this.state.translateY;
-        // 3. Reverse the scaling to get the final world coordinates
-        const worldX = xWithoutTranslate / this.state.scale;
-        const worldY = yWithoutTranslate / this.state.scale;
+        const xWithoutTranslate = xRelativeToHost - this._store.state.translateX;
+        const yWithoutTranslate = yRelativeToHost - this._store.state.translateY;
+        const worldX = xWithoutTranslate / this._store.state.scale;
+        const worldY = yWithoutTranslate / this._store.state.scale;
         return { x: worldX, y: worldY };
     }
 }
 
-class KritzelKeyHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
-    }
-    handleKeyDown(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-        if (this._store.state.isCtrlKeyPressed) {
-            event.preventDefault();
-        }
-        if (event.key === 'Escape' && this._store.state.selectionGroup) {
-            this._store.clearSelection();
-        }
-        if (event.key === 'Delete' && this._store.state.selectionGroup) {
-            this._store.delete();
-        }
-        if (event.key === 'z' && event.ctrlKey) {
-            this._store.history.undo();
-        }
-        if (event.key === 'y' && event.ctrlKey) {
-            this._store.history.redo();
-        }
-        if (event.key === 's' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'b' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'e' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'i' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('image'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'x' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'c' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.copy();
-            this._store.rerender();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.copiedObjects) {
-            this._store.paste();
-        }
-        if (event.key === '+' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.bringForward();
-        }
-        if (event.key === '-' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.sendBackward();
-        }
-        if (event.key === '*' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.bringToFront();
-        }
-        if (event.key === '_' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.sendToBack();
-        }
-        if (event.key === 'a' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.selectAll();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.insertFromClipboard();
-        }
-    }
-    handleKeyUp(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-    }
-}
-
-class KritzelContextMenuHandler extends KritzelBaseHandler {
-    globalContextMenuItems = [];
-    objectContextMenuItems = [];
-    constructor(store, globalContextMenuItems, objectContextMenuItems) {
-        super(store);
-        this.globalContextMenuItems = globalContextMenuItems;
-        this.objectContextMenuItems = objectContextMenuItems;
-    }
-    handleContextMenu(event) {
-        if (this._store.state.skipContextMenu) {
-            this._store.state.skipContextMenu = false;
-            return;
-        }
-        const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-            this._store.state.selectionGroup.addOrRemove(selectedObject);
-            this._store.state.selectionGroup.isSelected = true;
-            this._store.state.selectionGroup.rotation = selectedObject.rotation;
-            this._store.state.isSelecting = false;
-            this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
-        }
-        this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        let x = event.clientX - this._store.offsetX;
-        let y = event.clientY - this._store.offsetY;
-        const menuWidthEstimate = 150;
-        const menuHeightEstimate = 200;
-        const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
-        }
-        if (y + menuHeightEstimate > window.innerHeight - margin) {
-            y = window.innerHeight - menuHeightEstimate - margin;
-        }
-        x = Math.max(margin, x);
-        y = Math.max(margin, y);
-        this._store.state.contextMenuX = x;
-        this._store.state.contextMenuY = y;
-        this._store.state.isContextMenuVisible = true;
-        this._store.state.isEnabled = false;
-        this._store.rerender();
-    }
-}
-
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return !!object && object.__class__ === className;
-    }
-}
-
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
+    get host() { return this; }
     workspace;
+    onWorkspaceChange(newWorkspace) {
+        if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.initializeWorkspace(newWorkspace);
+        }
+    }
     activeTool;
     globalContextMenuItems;
     objectContextMenuItems;
     scaleMax = ABSOLUTE_SCALE_MAX;
-    scaleMin = ABSOLUTE_SCALE_MIN;
-    isEngineReady;
-    activeToolChange;
-    workspacesChange;
-    get host() { return this; }
-    forceUpdate = 0;
-    onWorkspaceChange(newWorkspace) {
-        if (newWorkspace) {
-            this.store.initializeWorkspace(newWorkspace);
-        }
-    }
     validateScaleMax(newValue) {
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
             this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.store.state.scaleMax = this.scaleMax;
+            this.core.store.setState('scaleMax', this.scaleMax);
         }
         else {
-            this.store.state.scaleMax = newValue;
+            this.core.store.setState('scaleMax', newValue);
         }
     }
+    scaleMin = ABSOLUTE_SCALE_MIN;
     validateScaleMin(newValue) {
         if (newValue < ABSOLUTE_SCALE_MIN) {
             console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
             this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.store.state.scaleMin = this.scaleMin;
+            this.core.store.setState('scaleMin', this.scaleMin);
         }
         else {
-            this.store.state.scaleMin = newValue;
-        }
-    }
-    store;
-    viewport;
-    contextMenuHandler;
-    keyHandler;
-    contextMenuElement = null;
-    get isSelecting() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
-    }
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.isEngineReady = createEvent(this, "isEngineReady");
-        this.activeToolChange = createEvent(this, "activeToolChange");
-        this.workspacesChange = createEvent(this, "workspacesChange");
-        this.store = new KritzelStore(this);
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-    }
-    async componentDidLoad() {
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.viewport = new KritzelViewport(this.store, this.host);
-        this._registerStateChangeListeners();
-        await this.store.initializeDatabase();
-        await this.store.initializeWorkspace(this.workspace);
-        if (this.store.state.isReady === false) {
-            this.store.state.isReady = true;
-            this.isEngineReady.emit(this.store.state);
+            this.core.store.setState('scaleMin', newValue);
         }
     }
+    isEngineReady;
+    activeToolChange;
+    workspacesChange;
+    longpress;
+    forceUpdate = 0;
     handleWheel(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        if (this.store.state.isContextMenuVisible) {
+        if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
-        this.store.state?.activeTool?.handleWheel(ev);
+        this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        if (this.store.isDisabled) {
-            return;
-        }
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
+        if (this.core.store.isDisabled) {
             return;
         }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(event);
-        });
+        KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         this.host.setPointerCapture(ev.pointerId);
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerDown(ev);
-        this.store.state?.activeTool?.handlePointerDown(ev);
+        this.core.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
-        this.store.state?.activeTool?.handlePointerMove(ev);
+        this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        this.store.state?.activeTool?.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        this.store.state?.activeTool?.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
+    }
+    handleLongPress(ev) {
+        this.contextMenuHandler.handleContextMenu(ev.detail);
     }
     handleContextMenu(ev) {
         ev.preventDefault();
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         if (ev.pointerType === 'touch') {
@@ -2709,26 +2708,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     handleKeyUp(ev) {
         this.keyHandler.handleKeyUp(ev);
     }
-    updateFocus(ev) {
-        if (this.store.isDisabled) {
-            return;
-        }
-        const rect = this.store.state.host.getBoundingClientRect();
-        const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
-        const path = ev.composedPath();
-        const kritzelEngineElement = this.host.closest('kritzel-engine');
-        const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
-        this.store.setState('isFocused', isInside && isInKritzelEngine);
-    }
-    handleClick() {
-        this.enable();
-    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.store);
+        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -2737,153 +2722,192 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', tool);
+        this.core.deselectAllObjects();
         tool?.onActivate();
     }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
-    }
     async disable() {
-        this.store.state.isEnabled = false;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', false);
+        this.core.rerender();
     }
     async enable() {
-        this.store.state.isEnabled = true;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', true);
+        this.core.rerender();
     }
     async delete() {
-        this.store.delete();
+        this.core.delete();
     }
     async copy() {
-        this.store.copy();
+        this.core.copy();
     }
     async paste(x, y) {
-        this.store.paste(x, y);
+        this.core.paste(x, y);
     }
     async bringForward(object) {
-        this.store.bringForward(object);
+        this.core.bringForward(object);
     }
     async sendBackward(object) {
-        this.store.sendBackward(object);
+        this.core.sendBackward(object);
     }
     async bringToFront(object) {
-        this.store.bringToFront(object);
+        this.core.bringToFront(object);
     }
     async sendToBack(object) {
-        this.store.sendToBack(object);
+        this.core.sendToBack(object);
     }
     async undo() {
-        this.store.history.undo();
+        this.core.history.undo();
     }
     async redo() {
-        this.store.history.redo();
+        this.core.history.redo();
     }
     async hideContextMenu() {
-        this.store.state.pointers.clear();
-        this.store.state.isContextMenuVisible = false;
-        this.store.state.selectionBox = null;
-        this.store.state.isSelecting = false;
+        this.core.store.state.pointers.clear();
+        this.core.store.setState('isContextMenuVisible', false);
+        this.core.store.setState('selectionBox', null);
+        this.core.store.setState('isSelecting', false);
+        this.core.store.setState('isEnabled', true);
+        this.core.rerender();
     }
     async getObjectById(id) {
-        const object = this.store.objects.find(obj => obj.id === id);
+        const object = this.core.store.allObjects.find(obj => obj.id === id);
         return object || null;
     }
     async addObject(object) {
-        this.store.deselectAllObjects();
+        this.core.deselectAllObjects();
         object.id = object.generateId();
-        object._store = this.store;
-        object.scale = object.scale ? object.scale : this.store.state.scale;
-        object.zIndex = this.store.currentZIndex;
-        const command = new AddObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        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.history.executeCommand(command);
         return object;
     }
     async updateObject(object, updatedProperties) {
-        this.store.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
-        this.store.history.executeCommand(command);
+        this.core.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.core, this, object, updatedProperties);
+        this.core.history.executeCommand(command);
         return object;
     }
     async removeObject(object) {
-        this.store.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        this.core.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.core, this, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getSelectedObjects() {
-        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
+        return this.core.store.state.selectionGroup ? this.core.store.state.selectionGroup.objects : [];
     }
     async selectObjects(objects) {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectObjects(objects);
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectObjects(objects);
     }
     async selectAllObjectsInViewport() {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectAllObjectsInViewport();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectAllObjectsInViewport();
     }
     async clearSelection() {
-        this.store.clearSelection();
+        this.core.clearSelection();
     }
     async centerObjectInViewport(object) {
         object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
-        this.store.history.executeCommand(command);
+        const command = new UpdateObjectCommand(this.core, this, object, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getCopiedObjects() {
-        return this.store.state.copiedObjects?.objects || [];
+        return this.core.store.state.copiedObjects?.objects || [];
     }
     async createWorkspace(workspace) {
-        return this.store.createWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        workspace._core = this.core;
+        await this.core.createWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
+        return workspace;
     }
     async updateWorkspace(workspace) {
-        return this.store.updateWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.updateWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(async () => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.deleteWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async getWorkspaces() {
-        return this.store.getWorkspaces();
+        return this.core.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.core.store.state.activeWorkspace;
+    }
+    core;
+    viewport;
+    contextMenuHandler;
+    keyHandler;
+    contextMenuElement = null;
+    get isSelecting() {
+        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;
+    }
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.isEngineReady = createEvent(this, "isEngineReady");
+        this.activeToolChange = createEvent(this, "activeToolChange");
+        this.workspacesChange = createEvent(this, "workspacesChange");
+        this.longpress = createEvent(this, "longpress");
+        this.core = new KritzelCore(this);
+    }
+    componentWillLoad() {
+        this.validateScaleMax(this.scaleMax);
+        this.validateScaleMin(this.scaleMin);
+    }
+    async componentDidLoad() {
+        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();
+        await this.core.initializeWorkspace(this.workspace);
+        this._registerStateChangeListeners();
+        if (this.core.store.state.isReady === false) {
+            this.core.store.setState('isReady', true);
+            this.isEngineReady.emit(this.core.store.state);
+        }
     }
     _registerStateChangeListeners() {
-        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
+        this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.store.clearSelection();
+            this.core.clearSelection();
         }
-        this.store.state.skipContextMenu = false;
+        this.core.store.setState('skipContextMenu', false);
         this.activeToolChange.emit(activeTool);
         KritzelKeyboardHelper.forceHideKeyboard();
     }
-    _handleIsFocusedChange(isFocused) {
-        if (!isFocused) {
-            this.store.resetActiveText();
-        }
-    }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'fd353ff17bcde1a9ab646b6f463d1c6ce00a3dff' }, h("div", { key: '45bc2af8f1a3a2bfa3aa76a478c7bf208027da0c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '50e932febc35c7dbe852ad99d96ca4f0e0b742fc' }, "ActiveWorkspaceId: ", this.store.state?.activeWorkspace?.id), h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", this.store.state?.activeWorkspace?.name), h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", this.store.state?.translateX), h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", this.store.state?.translateY), h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", this.store.state?.viewportWidth), h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", this.store.state?.viewportHeight), h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", this.store.state?.scale), h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", this.store.state?.activeTool?.name), h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", this.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", this.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", this.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", this.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1713185b36a50dfe0f9efa0c92394222db80a377' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '5104f428b808e7d843712302ad2e58b619876bee' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cb3b27a00627188e7082fa94169eb961a1ae6ed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '7407656e61be665f27e706738faa6d318e2c1d04' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '701bf05c25cb3d3728af6602f694e6064627ea59' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '772c345ea9c64ef800fdbb26919f1a54ca889025' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'dc687c8ba24182b8b61979ad334b989d3be72ec6' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '10cbc575a7905396a76eca4e7b56be719755aeb4' }, "PointerX: ", this.store.state?.pointerX), h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", this.store.state?.pointerY), h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", this.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', id: "origin", class: "origin", style: {
-                transform: `matrix(${this.store.state?.scale}, 0, 0, ${this.store.state?.scale}, ${this.store.state?.translateX}, ${this.store.state?.translateY})`,
-            } }, this.store.state.objectsMap.allObjects()?.map(object => {
-            return (h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object?.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+        return (h(Host, { key: '05b345f98a4548591946d1295da4d4b288767da6' }, h("div", { key: 'c8399a8968a39448120f3123b39c755b0f9b5e49', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '2cedd93f88f1a1e6ddc99e648375549ca5254f04' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '30ed15a98512b0efd91123773963d6266fa8426a' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'a0eb11088673a9e0e2e22880ae8a7a89c6705609' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '97c7ccfc77342d4122f85136ab4c81709046a4e4' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'ff832aa8a779a4adb2fca5b7ecd8d9b992cf7b99' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '6867ad7ee7f4fbe8725ac6edbe1bd999942fd729' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'f54768467cace934702bd3fd6f26970515f669f0' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '4aaa2cec8688e42249a6f0f7e2d67a13c57fa155' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '0bec60557f2a1271c69226b477fde02f4c2857a1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'bd342af473102a1c2095a3a2810de25630c8a717' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '62477d9f931903bff3fa6fa85f1ecd3b2944884f' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '80fba2f64cec36d9c7b2d5f2081ef21190c61768' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'da75419ac806f146a6ac69607b64095eb1f37de4' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '11b3bf816afa3d64fea468de92a351d9e96dee9e' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'e12cf1412d0e48a1245ae923c595e737deb4dffb' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'fa79c455e0ae7d68259003ce63a58eda4c250eba' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'bc7b25568bac9ef9cd6f1341a7415e4b93d8e8e9' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'a62eef5e0e277b629a11bb13809a4ab211d9428c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '285815884e83a3d5d8ec3726034ff4853225f216' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'f267eb928ccb57736229d3a7fbc5bfdfd0d51819' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '55977bf82d326a128a5da8d303875603c2850aac' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '8c91eaf482ce6cbd7400ba5342ec6c866fc0a049', 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: {
+                    display: object.isInViewport() ? 'block' : 'none',
+                    transform: object?.transformationMatrix,
+                    transformOrigin: 'top left',
+                    zIndex: object.zIndex.toString(),
+                    position: 'absolute',
+                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -2940,69 +2964,71 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                     width: '100%',
                     height: '100%',
+                    backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
+                    borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
+                    borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
+                    borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
                 } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.store.state?.scale), style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     cursor: 'grab',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.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' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-        }), h("svg", { key: '0098f1b8233d45f49dc8bdcc13c08f20c04b65e1', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: this.store.state.currentPath?.height.toString(),
-                width: this.store.state.currentPath?.width.toString(),
+                }, 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' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+        }), 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.store.state.currentPath?.zIndex.toString(),
+                zIndex: this.core.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: this.store.state.currentPath?.transformationMatrix,
+                transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.store.state.currentPath?.viewBox }, h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', d: this.store.state.currentPath?.d, fill: this.store.state.currentPath?.fill, stroke: this.store.state.currentPath?.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '2529447e26ba02689303be39cc593dfafc25b96c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: this.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '1cdae549bc53dc30eb397f27702054ac6c5122f7', 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: '2428e653f61d7ac5a71da1dbf94155b02e870406', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
                 position: 'fixed',
-                left: `${this.store.state.contextMenuX}px`,
-                top: `${this.store.state.contextMenuY}px`,
+                left: `${this.core.store.state.contextMenuX}px`,
+                top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10000',
             }, onActionSelected: event => {
                 event.detail.action({
-                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
-                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, this.store.state.selectionGroup?.objects);
+                    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.hideContextMenu();
-            } })), this.store.state?.activeTool instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '94bdb8b137c50bb7499a37e4784ae36989258ee2', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -3020,7 +3046,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "forceUpdate": [32],
         "registerTool": [64],
         "changeActiveTool": [64],
-        "setFocus": [64],
         "disable": [64],
         "enable": [64],
         "delete": [64],
@@ -3046,8 +3071,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "createWorkspace": [64],
         "updateWorkspace": [64],
         "deleteWorkspace": [64],
-        "getWorkspaces": [64]
-    }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"], [0, "click", "handleClick"]], {
+        "getWorkspaces": [64],
+        "getActiveWorkspace": [64]
+    }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "longpress", "handleLongPress"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"]], {
         "workspace": ["onWorkspaceChange"],
         "scaleMax": ["validateScaleMax"],
         "scaleMin": ["validateScaleMin"]
@@ -3082,6 +3108,6 @@ function defineCustomElement() {
 }
 
 export { ABSOLUTE_SCALE_MAX as A, KritzelImage as K, KritzelEraserTool as a, KritzelImageTool as b, KritzelSelectionTool as c, KritzelEngine as d, defineCustomElement as e, ABSOLUTE_SCALE_MIN as f };
-//# sourceMappingURL=p-BuewJQNl.js.map
+//# sourceMappingURL=p-Davd1R_4.js.map
 
-//# sourceMappingURL=p-BuewJQNl.js.map
+//# sourceMappingURL=p-Davd1R_4.js.map