kritzel-stencil 0.1.78 → 0.1.80

package/dist/esm/kritzel-active-users_42.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-BbOHefEf.js';
-import { a as KritzelPath, c as KritzelLine, y as KritzelColorHelper, m as KritzelSelectionTool, f as KritzelBrushTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, z as KritzelDevicesHelper, B as KritzelMouseButton, E as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, h as KritzelEraserTool, r as DEFAULT_LINE_TOOL_CONFIG, q as DEFAULT_TEXT_CONFIG, i as KritzelImageTool, u as KritzelAlignment, H as HocuspocusSyncProvider, I as IndexedDBSyncProvider, F as KritzelSelectionGroup, G as KritzelSelectionBox, J as KritzelIconRegistry, L as KritzelKeyboardHelper, M as KritzelBaseHandler, N as KritzelToolRegistry, O as KritzelBaseObject, n as KritzelWorkspace, d as KritzelGroup, b as KritzelImage, e as KritzelShape, K as KritzelText, w as runMigrations, v as CURRENT_WORKSPACE_SCHEMA_VERSION, x as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, A as APP_STATE_MIGRATIONS, P as ObjectHelper, l as KritzelCursorHelper, o as KritzelAnchorManager, p as KritzelThemeManager, Q as KritzelClassHelper, R as KritzelEventHelper, T as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-NhRgr2_H.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-D9HaikfQ.js';
+import { a as KritzelPath, c as KritzelLine, y as KritzelColorHelper, m as KritzelSelectionTool, f as KritzelBrushTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, z as KritzelDevicesHelper, B as KritzelMouseButton, E as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, h as KritzelEraserTool, r as DEFAULT_LINE_TOOL_CONFIG, q as DEFAULT_TEXT_CONFIG, i as KritzelImageTool, u as KritzelAlignment, H as HocuspocusSyncProvider, I as IndexedDBSyncProvider, F as KritzelSelectionGroup, G as KritzelSelectionBox, J as KritzelIconRegistry, L as KritzelKeyboardHelper, M as KritzelBaseHandler, N as KritzelToolRegistry, O as KritzelBaseObject, n as KritzelWorkspace, d as KritzelGroup, b as KritzelImage, e as KritzelShape, K as KritzelText, w as runMigrations, v as CURRENT_WORKSPACE_SCHEMA_VERSION, x as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, A as APP_STATE_MIGRATIONS, P as ObjectHelper, l as KritzelCursorHelper, o as KritzelAnchorManager, p as KritzelThemeManager, Q as KritzelClassHelper, R as KritzelEventHelper, T as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-OzSSw5kt.js';
 import * as Y from 'yjs';
 import 'y-websocket';
 import 'y-indexeddb';
@@ -171,10 +171,10 @@ const KritzelAwarenessCursors = class {
     cleanupIntervalId;
     objectChangeRafId = null;
     componentDidLoad() {
-        this.core.store.state.objects?.onAwarenessChange(states => {
+        this.core.store.objects?.onAwarenessChange(states => {
             this.handleAwarenessChange(states);
         });
-        this.core.store.state.objects?.onObjectsChange(() => {
+        this.core.store.objects?.onObjectsChange(() => {
             this.handleRemoteObjectChange();
         });
         this.cleanupIntervalId = setInterval(() => {
@@ -190,7 +190,7 @@ const KritzelAwarenessCursors = class {
         }
     }
     handleAwarenessChange(states) {
-        const localClientId = this.core.store.state.objects?.localClientId;
+        const localClientId = this.core.store.objects?.localClientId;
         const now = Date.now();
         const updated = new Map(this.remoteCursors);
         // Track which clientIds are still present
@@ -266,7 +266,7 @@ const KritzelAwarenessCursors = class {
         });
     }
     getActiveObjectTip(objectId) {
-        const obj = this.core.store.state.objects?.findById(objectId);
+        const obj = this.core.store.objects?.findById(objectId);
         if (!obj)
             return null;
         if (obj instanceof KritzelPath && !obj.isCompleted) {
@@ -334,7 +334,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: '5a28def6e024249c4309c087502cde9f219f5421' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '1743084eadda932b5aaf89552f500b90e194a79f' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -1248,7 +1248,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b6a9e84ce49dd72f353e0b87ae0bc02b0e5aeb1e' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '238ea314a937d556c75ae080495c2e6559340c6f', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'b0f5c795c4803e27a49d7f76f3fedea818967049' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '6ff883be1aecfb302bc9ecb3b7562617d753d5ba', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -2027,6 +2027,8 @@ const KritzelEditor = class {
             }
         ]
     };
+    /** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
+    isLoading = false;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
     /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
@@ -2066,9 +2068,10 @@ const KritzelEditor = class {
         }
     }
     onWorkspacesChange(newWorkspaces) {
-        if (this.activeWorkspace) {
-            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);
-            if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {
+        const activeWorkspace = this.activeWorkspace;
+        if (activeWorkspace) {
+            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === activeWorkspace.id);
+            if (updatedActiveWorkspace && updatedActiveWorkspace !== activeWorkspace) {
                 this.activeWorkspace = updatedActiveWorkspace;
             }
         }
@@ -2295,7 +2298,7 @@ const KritzelEditor = class {
         await customElements.whenDefined('kritzel-workspace-manager');
         await customElements.whenDefined('kritzel-controls');
         await customElements.whenDefined('kritzel-engine');
-        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
+        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady || !this.activeWorkspace) {
             return;
         }
         const { id, name, isPublic, createdAt, updatedAt } = this.activeWorkspace;
@@ -2314,6 +2317,9 @@ const KritzelEditor = class {
     }
     async onEngineReady(event) {
         this.isEngineReady = true;
+        if (!event.detail.activeWorkspace) {
+            return;
+        }
         this.activeWorkspace = event.detail.activeWorkspace;
         this.workspaces = event.detail.workspaces;
         this.currentIsPublic = await this.engineRef.getIsPublic();
@@ -2396,7 +2402,7 @@ const KritzelEditor = class {
                 icon: 'upload',
                 action: async () => {
                     const preview = await this.engineRef.getScreenshot('png');
-                    this.exportRef.open(preview);
+                    this.exportRef.open(preview ?? undefined);
                 },
             },
             {
@@ -2427,7 +2433,7 @@ const KritzelEditor = class {
         activeWorkspace.isPublic = isPublic;
         await this.engineRef.updateWorkspace(activeWorkspace);
         this.activeWorkspace = activeWorkspace.clone();
-        this.isPublicChange.emit({ isPublic, workspaceId: this.activeWorkspace?.id });
+        this.isPublicChange.emit({ isPublic, workspaceId: activeWorkspace.id });
     };
     /**
      * Updates the currentIsPublic state from the active workspace and emits the isPublicChange event.
@@ -2436,6 +2442,9 @@ const KritzelEditor = class {
         const isPublic = this.activeWorkspace?.isPublic ?? false;
         const workspaceId = this.activeWorkspace?.id;
         this.currentIsPublic = isPublic;
+        if (!workspaceId) {
+            return;
+        }
         this.isPublicChange.emit({ isPublic, workspaceId });
     }
     handleProviderLogin = (event) => {
@@ -2540,7 +2549,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '6dbc3a8c64dd097ba82e46341b3fb97cbd0194db' }, h("div", { key: '26ceb62f59ad830fd651a1712f57e5d711e7c6f4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'afb4f5b87c5dc0a673444fb27930e43994df4e02', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f3c0f31841cb819917c3277852bc9b5ce291c09a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '8a9e57132e6b74ec812ee516dc7f0d5fc6c8a2e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '6caadf512a0208fecdb18b6d68b17daa522161a3', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e27e5f3965be2fd15c83b91470ef87c4031dd7a2', class: "top-right-buttons" }, h("kritzel-settings", { key: '57f8e75287402aecbb7740d46dfa15839de2169f', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '5ccf176d4fe1221c5d7597bd1c8537cf3324d3ee', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '44a334b808706e11163e89b91074ca4ea8ab4b18', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bcb3c966e630b1a8fc4ccd438fc8fbb11cd2b167', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'f1957e56257b7c565311e41b770579f7e2bb910d', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'd8c1d1b51cf87725d68aaf4457b88828986a40dc', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'f5840e7f56cf6897ec28b0f28d9b204037bf3348', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cfdcc3d5e7a5e29b0a352f0d4423ae79195dbf69', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (h(Host, { key: '1e3c220506d14f276ca246365c2bda79110c6c35' }, h("div", { key: '154b45141b995f749adb52a11dc3363ab2989475', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '22519269ea7227a1a7a05d2f282bbcd2466edf5d', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'e89f0609dfd031cb040fd80a1f60ecb56d56734c', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '0b3acdf827d48c9589fb8170b49a602beb273684', ref: el => {
+                if (el) {
+                    this.engineRef = el;
+                }
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '324ba00f982938abc7a3f4dc47368f3b9bad665e', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+                if (el) {
+                    this.controlsRef = el;
+                }
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0c4662e92cbe90a958f8704e6db0375915d9c634', class: "top-right-buttons" }, h("kritzel-settings", { key: 'e0422c1a02bc895bafd4b777d4d593afcfdf335b', ref: el => {
+                if (el) {
+                    this.settingsRef = el;
+                }
+            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '72f59ec2eab76d753bb64475f199f0fa33e935d4', ref: el => {
+                if (el) {
+                    this.exportRef = el;
+                }
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'c60411370947fc408b5e9d7adade3e28210b8d47', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4783940d3d4f9c2a7e8156c0713f29cb8b043125', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'bdb727d5641f8cda3711856086e1b9aa8533a5a6', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '3afa57ea46636c92cc7232dfe22a27cace85766e', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: '852f9980fa3b89ceb5b6d8bde1bdd5598d3dc6e4', ref: el => {
+                if (el) {
+                    this.shareDialogRef = el;
+                }
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cdccbb7ef0b9932c0747545a18071f22e5683d8c', ref: el => {
+                if (el) {
+                    this.loginDialogRef = el;
+                }
+            }, providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -19955,8 +19988,8 @@ class KritzelViewport {
      * Updates the stored viewport dimensions and triggers a rerender.
      */
     handleResize() {
-        this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
-        this._core.store.state.viewportHeight = this._core.store.state.host.clientHeight;
+        this._core.store.state.viewportWidth = this._core.store.host.clientWidth;
+        this._core.store.state.viewportHeight = this._core.store.host.clientHeight;
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
     }
@@ -19987,15 +20020,15 @@ class KritzelViewport {
                 this._touchCursorBroadcastActive = false;
             }
             if (activePointers.length === 2) {
-                this._core.store.state.objects?.clearCursorPosition();
+                this._core.store.objects?.clearCursorPosition();
                 const currentPath = this._core.store.currentPath;
                 if (currentPath) {
-                    this._core.store.state.objects.remove(obj => obj.id === currentPath.id);
+                    this._core.store.objects.remove(obj => obj.id === currentPath.id);
                 }
                 // Clear selection box when scaling starts to prevent it from remaining on screen
                 if (this._core.store.state.isSelecting) {
                     this._core.store.state.isSelecting = false;
-                    this._core.store.state.objects.remove(obj => obj instanceof KritzelSelectionBox);
+                    this._core.store.objects.remove(obj => obj instanceof KritzelSelectionBox);
                     this._core.store.setSelectionBox(null);
                     // Clear selection preview state from objects - use selectedObjects for efficiency
                     this._core.store.selectedObjects.forEach(object => {
@@ -20022,12 +20055,12 @@ class KritzelViewport {
      */
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const hostRect = this._core.store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
             this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
             this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
-            this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
+            this._core.store.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
             if (this._core.store.state.isPanning) {
                 const dx = xRelativeToHost - this._core.store.state.startX;
                 const dy = yRelativeToHost - this._core.store.state.startY;
@@ -20045,12 +20078,12 @@ class KritzelViewport {
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            const hostRect = this._core.store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (this._core.store.state.isScaling || activePointers.length > 1) {
-                this._core.store.state.objects?.clearCursorPosition();
+                this._core.store.objects?.clearCursorPosition();
             }
             else {
                 this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
@@ -20063,7 +20096,7 @@ class KritzelViewport {
                     }
                 }
                 if (this._touchCursorBroadcastActive) {
-                    this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
+                    this._core.store.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
                 }
             }
             if (activePointers.length === 2) {
@@ -20262,12 +20295,12 @@ class KritzelViewport {
      */
     handleZoom(event) {
         this._core.store.state.isScaling = true;
-        const rect = this._core.store.state.host.getBoundingClientRect();
+        const rect = this._core.store.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - rect.left;
         const yRelativeToHost = event.clientY - rect.top;
         this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
         this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
-        this._core.store.state.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
+        this._core.store.objects?.updateCursorPosition(this._core.store.state.pointerX, this._core.store.state.pointerY);
         const rawScaleFactor = 1 + (event.deltaY * -0.012);
         const scaleFactor = Math.max(0.8, Math.min(1.2, rawScaleFactor));
         const effectiveMinScale = this.getEffectiveMinScale();
@@ -20615,7 +20648,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         const selectionTool = this._core.store.state.activeTool;
         selectionTool?.moveHandler?.cancelPendingDrag();
         if (this._core.store.selectionBox) {
-            this._core.store.state.objects.remove(object => object instanceof KritzelSelectionBox);
+            this._core.store.objects.remove(object => object instanceof KritzelSelectionBox);
             this._core.store.setSelectionBox(null);
             this._core.store.state.isSelecting = false;
         }
@@ -20704,7 +20737,7 @@ class KritzelCustomElement extends KritzelBaseObject {
         const object = new KritzelCustomElement(config);
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.workspaceId = core.store.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }
@@ -20750,7 +20783,7 @@ class KritzelCustomElement extends KritzelBaseObject {
             this.element.style.height = `${height}px`;
         }
         // Update to sync changes to y.js and propagate to other tabs
-        this._core.store.state.objects.update(this);
+        this._core.store.objects.update(this);
     }
     /**
      * Creates a deep copy of this custom element.
@@ -20878,7 +20911,7 @@ class KritzelReviver {
 }
 
 const DEFAULT_ENGINE_CONFIG = {
-    activeWorkspace: null,
+    activeWorkspace: undefined,
     activeTool: null,
     copiedObjects: null,
     objects: null,
@@ -20904,7 +20937,7 @@ const DEFAULT_ENGINE_CONFIG = {
     isDrawing: false,
     isErasing: false,
     isWriting: false,
-    isWorkspaceLoading: false,
+    isLoading: false,
     isCtrlKeyPressed: false,
     isContextMenuVisible: false,
     contextMenuItems: [],
@@ -21668,9 +21701,9 @@ class KritzelObjectMap {
                 objectsToDelete.push(key);
             }
             else {
-                const serialized = this._objectsMap.get(key);
+                const serialized = this._objectsMap?.get(key);
                 if (serialized) {
-                    const object = this._reviver.revive(serialized);
+                    const object = this._reviver?.revive(serialized);
                     // Separate SelectionGroups to process them after regular objects
                     if (object instanceof KritzelSelectionGroup) {
                         selectionGroupsToUpdate.push(object);
@@ -21777,17 +21810,17 @@ class KritzelObjectMap {
             return;
         }
         this._ydoc.transact(() => {
-            if (!this._metadataMap.get('type')) {
-                this._metadataMap.set('type', type);
+            if (!this._metadataMap?.get('type')) {
+                this._metadataMap?.set('type', type);
             }
-            if (this._metadataMap.get('isPublic') === undefined) {
-                this._metadataMap.set('isPublic', false);
+            if (this._metadataMap?.get('isPublic') === undefined) {
+                this._metadataMap?.set('isPublic', false);
             }
-            if (this._metadataMap.get('schemaVersion') === undefined) {
-                this._metadataMap.set('schemaVersion', CURRENT_WORKSPACE_SCHEMA_VERSION);
+            if (this._metadataMap?.get('schemaVersion') === undefined) {
+                this._metadataMap?.set('schemaVersion', CURRENT_WORKSPACE_SCHEMA_VERSION);
             }
-            this._metadataMap.set('workspaceId', workspaceId);
-            this._metadataMap.set('workspaceName', workspaceName);
+            this._metadataMap?.set('workspaceId', workspaceId);
+            this._metadataMap?.set('workspaceName', workspaceName);
         }, 'metadata');
     }
     /**
@@ -21805,8 +21838,8 @@ class KritzelObjectMap {
         if (!this._metadataMap || !this._ydoc) {
             return;
         }
-        this._ydoc.transact(() => {
-            this._metadataMap.set('isPublic', isPublic);
+        this._ydoc?.transact(() => {
+            this._metadataMap?.set('isPublic', isPublic);
         }, 'metadata');
     }
     /**
@@ -21830,8 +21863,8 @@ class KritzelObjectMap {
         if (!this._metadataMap || !this._ydoc) {
             return;
         }
-        this._ydoc.transact(() => {
-            this._metadataMap.set('workspaceName', name);
+        this._ydoc?.transact(() => {
+            this._metadataMap?.set('workspaceName', name);
         }, 'metadata');
     }
     /**
@@ -21866,13 +21899,16 @@ class KritzelObjectMap {
         const localUserId = this._core?.user?.id;
         const staleSelectionGroupIds = [];
         this._objectsMap.forEach((serialized, key) => {
-            const object = this._reviver.revive(serialized);
+            const object = this._reviver?.revive(serialized);
             // Remove remote selection groups on startup — they are transient UI state
             // that should not survive an app restart. The owning user's session is gone.
             if (object instanceof KritzelSelectionGroup && object.userId != null && object.userId !== localUserId) {
                 staleSelectionGroupIds.push(key);
                 return;
             }
+            if (!object) {
+                return;
+            }
             this.quadtree.insert(object);
             this._idMap.set(object.id, object);
         });
@@ -21893,8 +21929,8 @@ class KritzelObjectMap {
     reset() {
         this.quadtree.reset();
         this._idMap.clear();
-        this._ydoc.transact(() => {
-            this._objectsMap.clear();
+        this._ydoc?.transact(() => {
+            this._objectsMap?.clear();
         }, 'local');
     }
     /**
@@ -21913,8 +21949,8 @@ class KritzelObjectMap {
         this._idMap.set(object.id, object);
         if (this._objectsMap && this.isPersistable(object)) {
             const serialized = object.serialize();
-            this._ydoc.transact(() => {
-                this._objectsMap.set(object.id, serialized);
+            this._ydoc?.transact(() => {
+                this._objectsMap?.set(object.id, serialized);
             }, 'local');
         }
         return true;
@@ -21943,8 +21979,8 @@ class KritzelObjectMap {
         if (this._objectsMap && this.isPersistable(object)) {
             const serialized = object.serialize();
             const origin = options.temporary ? 'temporary' : 'local';
-            this._ydoc.transact(() => {
-                this._objectsMap.set(object.id, serialized);
+            this._ydoc?.transact(() => {
+                this._objectsMap?.set(object.id, serialized);
             }, origin);
         }
         return true;
@@ -21961,8 +21997,8 @@ class KritzelObjectMap {
             this.quadtree.remove(o => o.id === object.id);
             this._idMap.delete(object.id);
             if (this._objectsMap && this.isPersistable(object)) {
-                this._ydoc.transact(() => {
-                    this._objectsMap.delete(object.id);
+                this._ydoc?.transact(() => {
+                    this._objectsMap?.delete(object.id);
                 }, 'local');
             }
         }
@@ -22020,7 +22056,7 @@ class KritzelObjectMap {
     undo() {
         if (this._undoManager && this._undoManager.canUndo()) {
             this._undoManager.undo();
-            this._core.engine.emitObjectsChange();
+            this._core?.engine.emitObjectsChange();
         }
     }
     /**
@@ -22030,7 +22066,7 @@ class KritzelObjectMap {
     redo() {
         if (this._undoManager && this._undoManager.canRedo()) {
             this._undoManager.redo();
-            this._core.engine.emitObjectsChange();
+            this._core?.engine.emitObjectsChange();
         }
     }
     /**
@@ -22099,9 +22135,9 @@ class KritzelObjectMap {
             }
             // Now redo them all as a single 'local' transaction
             // This will consolidate them into one undo item
-            this._ydoc.transact(() => {
+            this._ydoc?.transact(() => {
                 for (let i = itemsToConsolidate - 1; i >= 0; i--) {
-                    if (this._undoManager.canRedo()) {
+                    if (this._undoManager?.canRedo()) {
                         this._undoManager.redo();
                     }
                 }
@@ -22217,13 +22253,49 @@ class KritzelStore {
     get state() {
         return this._state;
     }
+    /**
+     *  Gets the map of all objects in the workspace.
+     *  Throws an error if the objects map is not initialized, as it is required for all object management.
+     *  @returns The KritzelObjectMap containing all objects
+     *  @throws Error if the objects map is not initialized in the state
+     */
+    get objects() {
+        if (!this._state.objects) {
+            throw new Error('Objects map is not initialized.');
+        }
+        return this._state.objects;
+    }
+    /**
+     * Gets the currently active workspace.
+     * Throws an error if no active workspace is set, as it is required for workspace-bound operations.
+     * @returns The current active KritzelWorkspace
+     * @throws Error if no active workspace is set in the state
+     */
+    get activeWorkspace() {
+        if (!this._state.activeWorkspace) {
+            throw new Error('Active workspace is not set.');
+        }
+        return this._state.activeWorkspace;
+    }
+    /**
+     * Gets the host element for the Kritzel editor.
+     * Throws an error if the host is not set, as it is required for many operations.
+     * @returns The host HTMLElement
+     * @throws Error if the host element is not set in the state
+     */
+    get host() {
+        if (!this._state.host) {
+            throw new Error('Host element is not set.');
+        }
+        return this._state.host;
+    }
     /**
      * Gets the next available z-index for new objects.
      * Calculates the maximum z-index among all non-selection objects and adds 1.
      * @returns The next z-index value to use for new objects
      */
     get currentZIndex() {
-        return Math.max(0, ...this._state.objects.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
+        return Math.max(0, ...this.objects.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     /**
      * Returns true if viewport boundaries are set to finite values (not Infinity).
@@ -22260,7 +22332,7 @@ class KritzelStore {
         if (this.hasViewportBoundaries) {
             return this.allObjects.length;
         }
-        return this._state.objects.totalCount;
+        return this.objects.totalCount;
     }
     /**
      * Gets all objects in the workspace.
@@ -22269,9 +22341,9 @@ class KritzelStore {
      */
     get allObjects() {
         if (this.hasViewportBoundaries) {
-            return this._state.objects.query(this.viewportBoundaryBounds);
+            return this.objects.query(this.viewportBoundaryBounds);
         }
-        return this._state.objects.allObjects();
+        return this.objects.allObjects();
     }
     /**
      * Gets all objects currently visible in the viewport.
@@ -22287,7 +22359,7 @@ class KritzelStore {
             height: this._state.viewportHeight / this._state.scale,
             depth: 100,
         };
-        return this._state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
+        return this.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
     }
     /**
      * Gets all objects excluding selection-related objects (selection group and selection box).
@@ -22312,7 +22384,7 @@ class KritzelStore {
         if (this._selectionBoxCacheValid) {
             return this._cachedSelectionBox;
         }
-        const selectionBoxes = this._state.objects.filter(o => o instanceof KritzelSelectionBox);
+        const selectionBoxes = this.objects.filter(o => o instanceof KritzelSelectionBox);
         this._cachedSelectionBox = selectionBoxes.length > 0 ? selectionBoxes[0] : null;
         this._selectionBoxCacheValid = true;
         return this._cachedSelectionBox;
@@ -22327,7 +22399,7 @@ class KritzelStore {
         if (this._selectionGroupCacheValid) {
             return this._cachedSelectionGroup;
         }
-        const selectionGroups = this._state.objects.filter(o => o instanceof KritzelSelectionGroup);
+        const selectionGroups = this.objects.filter(o => o instanceof KritzelSelectionGroup);
         if (this._localUserId) {
             this._cachedSelectionGroup = selectionGroups.find(sg => sg.userId === this._localUserId) ?? null;
         }
@@ -22376,7 +22448,7 @@ class KritzelStore {
      * @returns The text object in editing mode, or null if none
      */
     get activeText() {
-        const activeTexts = this._state.objects.filter(o => o instanceof KritzelText && o.isEditing);
+        const activeTexts = this.objects.filter(o => o instanceof KritzelText && o.isEditing);
         return activeTexts.length > 0 ? activeTexts[0] : null;
     }
     /**
@@ -22384,7 +22456,7 @@ class KritzelStore {
      * @returns The shape object in editing mode, or null if none
      */
     get activeShape() {
-        const activeShapes = this._state.objects.filter(o => o instanceof KritzelShape && o.isEditing);
+        const activeShapes = this.objects.filter(o => o instanceof KritzelShape && o.isEditing);
         return activeShapes.length > 0 ? activeShapes[0] : null;
     }
     /**
@@ -22392,7 +22464,7 @@ class KritzelStore {
      * @returns The incomplete path object, or null if no path is being drawn
      */
     get currentPath() {
-        const drawingPaths = this._state.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
+        const drawingPaths = this.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
         return drawingPaths.length > 0 ? drawingPaths[0] : null;
     }
     /**
@@ -22400,7 +22472,7 @@ class KritzelStore {
      * @returns The incomplete line object, or null if no line is being drawn
      */
     get currentLine() {
-        const drawingLines = this._state.objects.filter(o => o instanceof KritzelLine && o.isCompleted === false);
+        const drawingLines = this.objects.filter(o => o instanceof KritzelLine && o.isCompleted === false);
         return drawingLines.length > 0 ? drawingLines[0] : null;
     }
     /**
@@ -22408,14 +22480,14 @@ class KritzelStore {
      * @returns The left position of the host element in client coordinates
      */
     get offsetX() {
-        return this._state.host.getBoundingClientRect().left;
+        return this.host.getBoundingClientRect().left;
     }
     /**
      * Gets the vertical offset of the host element from the viewport.
      * @returns The top position of the host element in client coordinates
      */
     get offsetY() {
-        return this._state.host.getBoundingClientRect().top;
+        return this.host.getBoundingClientRect().top;
     }
     /**
      * Checks if the engine is currently disabled.
@@ -22451,7 +22523,11 @@ class KritzelStore {
         if (!this._listeners.has(property)) {
             this._listeners.set(property, new Set());
         }
-        this._listeners.get(property).add(listener);
+        const listenersForProperty = this._listeners.get(property);
+        if (!listenersForProperty) {
+            throw new Error(`Listeners set for property ${String(property)} was not initialized.`);
+        }
+        listenersForProperty.add(listener);
     }
     /**
      * Gets the current value of a state property as readonly.
@@ -22473,8 +22549,9 @@ class KritzelStore {
         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)));
+            const listenersForProperty = this._listeners.get(property);
+            if (listenersForProperty) {
+                listenersForProperty.forEach(listener => listener(value, oldValue, String(property)));
             }
         }
     }
@@ -22683,7 +22760,9 @@ class KritzelAppStateMap {
             };
         }
         const workspace = new KritzelWorkspace(serialized.id, serialized.name, viewport);
-        workspace._core = this._core;
+        if (this._core) {
+            workspace._core = this._core;
+        }
         workspace.createdAt = new Date(serialized.createdAt);
         workspace.updatedAt = new Date(serialized.updatedAt);
         workspace.isPublic = serialized.isPublic ?? false;
@@ -22698,14 +22777,14 @@ class KritzelAppStateMap {
             return;
         }
         this._ydoc.transact(() => {
-            if (!this._metadataMap.get('type')) {
-                this._metadataMap.set('type', type);
+            if (!this._metadataMap?.get('type')) {
+                this._metadataMap?.set('type', type);
             }
-            if (this._metadataMap.get('isPublic') === undefined) {
-                this._metadataMap.set('isPublic', false);
+            if (this._metadataMap?.get('isPublic') === undefined) {
+                this._metadataMap?.set('isPublic', false);
             }
-            if (this._metadataMap.get('schemaVersion') === undefined) {
-                this._metadataMap.set('schemaVersion', CURRENT_APP_STATE_SCHEMA_VERSION);
+            if (this._metadataMap?.get('schemaVersion') === undefined) {
+                this._metadataMap?.set('schemaVersion', CURRENT_APP_STATE_SCHEMA_VERSION);
             }
         }, 'metadata');
     }
@@ -22724,7 +22803,7 @@ class KritzelAppStateMap {
             return;
         }
         this._ydoc.transact(() => {
-            this._metadataMap.set('isPublic', isPublic);
+            this._metadataMap?.set('isPublic', isPublic);
         }, 'metadata');
     }
     /**
@@ -22764,8 +22843,8 @@ class KritzelAppStateMap {
      */
     reset() {
         this.map.clear();
-        this._ydoc.transact(() => {
-            this._workspacesMap.clear();
+        this._ydoc?.transact(() => {
+            this._workspacesMap?.clear();
         }, 'local');
     }
     /**
@@ -22781,8 +22860,8 @@ class KritzelAppStateMap {
         this.map.set(workspace.id, workspace);
         if (this._workspacesMap) {
             const serialized = workspace.serialize();
-            this._ydoc.transact(() => {
-                this._workspacesMap.set(workspace.id, serialized);
+            this._ydoc?.transact(() => {
+                this._workspacesMap?.set(workspace.id, serialized);
             }, 'local');
         }
         return true;
@@ -22800,8 +22879,8 @@ class KritzelAppStateMap {
         this.map.set(workspace.id, workspace);
         if (this._workspacesMap) {
             const serialized = workspace.serialize();
-            this._ydoc.transact(() => {
-                this._workspacesMap.set(workspace.id, serialized);
+            this._ydoc?.transact(() => {
+                this._workspacesMap?.set(workspace.id, serialized);
             }, 'local');
         }
         return true;
@@ -22819,8 +22898,8 @@ class KritzelAppStateMap {
         }
         this.map.delete(workspaceToRemove.id);
         if (this._workspacesMap) {
-            this._ydoc.transact(() => {
-                this._workspacesMap.delete(workspaceToRemove.id);
+            this._ydoc?.transact(() => {
+                this._workspacesMap?.delete(workspaceToRemove.id);
             }, 'local');
         }
         return true;
@@ -23132,7 +23211,7 @@ class KritzelCore {
     setUser(user) {
         this._user = user;
         this._store.setLocalUserId(user?.id ?? null);
-        this._store.state.objects?.setLocalUser(user);
+        this._store.objects?.setLocalUser(user);
     }
     /**
      * Creates a new KritzelCore instance.
@@ -23251,8 +23330,8 @@ class KritzelCore {
         // Save active workspace ID to localStorage
         localStorage.setItem(this.getStorageKey('kritzel-active-workspace-id'), activeWorkspace.id);
         // Destroy old ObjectMap if switching workspaces
-        if (this._store.state.objects && this._store.state.objects.isReady) {
-            this._store.state.objects.destroy();
+        if (this._store.objects && this._store.objects.isReady) {
+            this._store.objects.destroy();
         }
         // Create new ObjectMap with its own Y.Doc for this workspace
         const objectsMap = new KritzelObjectMap();
@@ -23322,7 +23401,10 @@ class KritzelCore {
             height: this._store.state.viewportHeight / this._store.state.scale,
             depth: 100,
         };
-        return this._store.state.objects
+        if (!this._store.objects) {
+            return [];
+        }
+        return this._store.objects
             .query(viewportBounds)
             .filter(obj => !(obj instanceof KritzelSelectionGroup) && !(obj instanceof KritzelSelectionBox))
             .sort((a, b) => a.zIndex - b.zIndex);
@@ -23377,8 +23459,8 @@ class KritzelCore {
         workspace.updatedAt = new Date();
         this.saveWorkspaceToAppState(workspace);
         // Keep metadata map in sync when the active workspace's name changes
-        if (this._store.state.activeWorkspace?.id === workspace.id) {
-            this._store.state.objects?.setWorkspaceName(workspace.name);
+        if (this._store.activeWorkspace?.id === workspace.id) {
+            this._store.objects?.setWorkspaceName(workspace.name);
         }
         const workspaces = this._store.state.workspaces;
         const index = workspaces.findIndex(w => w.id === workspace.id);
@@ -23395,9 +23477,9 @@ class KritzelCore {
      */
     deleteWorkspace(workspace) {
         // If deleting the active workspace, need to handle ObjectMap cleanup
-        if (this._store.state.activeWorkspace?.id === workspace.id) {
+        if (this._store.activeWorkspace?.id === workspace.id) {
             this.engine.viewport?.cancelPendingUpdates();
-            this._store.state.objects?.destroy();
+            this._store.objects?.destroy();
         }
         this.deleteWorkspaceFromAppState(workspace.id);
         this._store.state.workspaces = this.loadWorkspacesFromAppState();
@@ -23416,7 +23498,7 @@ class KritzelCore {
      * @param scale - The zoom scale of the viewport
      */
     updateWorkspaceViewport(translateX, translateY, scale) {
-        const activeWorkspace = this._store.state.activeWorkspace;
+        const activeWorkspace = this._store.activeWorkspace;
         if (!activeWorkspace) {
             return;
         }
@@ -23439,7 +23521,7 @@ class KritzelCore {
      * @returns True if the workspace is public, false otherwise
      */
     getIsPublic() {
-        return this._store.state.activeWorkspace?.isPublic ?? false;
+        return this._store.activeWorkspace?.isPublic ?? false;
     }
     // ═══════════════════════════════════════════════════════════════════════════
     // Object Management Methods
@@ -23449,7 +23531,7 @@ class KritzelCore {
      * @param object - The object to add to the canvas
      */
     addObject(object) {
-        this._store.state.objects.insert(object);
+        this._store.objects.insert(object);
     }
     /**
      * Removes an object from the workspace.
@@ -23477,7 +23559,7 @@ class KritzelCore {
             this._anchorManager.handleObjectDeleted(object.id);
         }
         object.isMounted = false;
-        this._store.state.objects.remove(o => o.id === object.id);
+        this._store.objects.remove(o => o.id === object.id);
     }
     /**
      * Updates properties on an object and persists the changes.
@@ -23490,12 +23572,15 @@ class KritzelCore {
         const changedKeys = [];
         for (const key in updatedProperties) {
             if (updatedProperties.hasOwnProperty(key)) {
-                object[key] = updatedProperties[key];
-                changedKeys.push(key);
+                const value = updatedProperties[key];
+                if (value !== undefined) {
+                    object[key] = value;
+                    changedKeys.push(key);
+                }
             }
         }
         object.onAfterUpdate(changedKeys);
-        this._store.state.objects.update(object);
+        this._store.objects.update(object);
     }
     /**
      * Adds a selection group to the canvas.
@@ -23506,7 +23591,7 @@ class KritzelCore {
     addSelectionGroup(selectionGroup) {
         this.removeSelectionGroup();
         this.removeSelectionBox();
-        this._store.state.objects.insert(selectionGroup);
+        this._store.objects.insert(selectionGroup);
         this._store.setSelectionGroup(selectionGroup);
         this._kritzelEngine.triggerSelectionChange();
     }
@@ -23517,7 +23602,7 @@ class KritzelCore {
     removeSelectionGroup() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
-            this._store.state.objects.remove(object => object.id === selectionGroup.id);
+            this._store.objects.remove(object => object.id === selectionGroup.id);
             this._store.setSelectionGroup(null);
             this._kritzelEngine.triggerSelectionChange();
         }
@@ -23529,9 +23614,9 @@ class KritzelCore {
     removeSelectionBox() {
         const selectionBox = this._store.selectionBox;
         if (selectionBox) {
-            this._store.state.objects.remove(object => object.id === selectionBox.id);
+            this._store.objects.remove(object => object.id === selectionBox.id);
             this._store.setSelectionBox(null);
-            this._store.state.objects.clearLocalSelectionBox();
+            this._store.objects.clearLocalSelectionBox();
         }
     }
     /**
@@ -23560,13 +23645,13 @@ class KritzelCore {
      * Undoes the last action in the history stack.
      */
     undo() {
-        this._store.state.objects?.undo();
+        this._store.objects?.undo();
     }
     /**
      * Redoes the last undone action from the history stack.
      */
     redo() {
-        this._store.state.objects?.redo();
+        this._store.objects?.redo();
     }
     /**
      * Deletes a specific object by its ID.
@@ -23628,7 +23713,7 @@ class KritzelCore {
         if (!copiedObjects || copiedObjects.length === 0) {
             return;
         }
-        const activeWorkspace = this._store.state.activeWorkspace;
+        const activeWorkspace = this._store.activeWorkspace;
         const originalIdMapping = this._store.state.copiedObjectIdMapping;
         // Check if we're pasting from a different workspace
         const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
@@ -23673,7 +23758,7 @@ class KritzelCore {
         const baseZIndex = this._store.currentZIndex;
         // Batch all inserts and updates in a single Y.js transaction to avoid
         // N separate observer callbacks and N rerenders (fires only once at commit)
-        this._store.state.objects.transaction(() => {
+        this._store.objects.transaction(() => {
             // First add all copied objects to the objectsMap with updated positions
             copiedObjects.forEach((obj, i) => {
                 // Update workspace if pasting to a different workspace
@@ -23725,7 +23810,7 @@ class KritzelCore {
                     }
                     // If anchors were updated, rebuild the anchor index and persist the change
                     if (updated) {
-                        this._store.state.objects.update(obj);
+                        this._store.objects.update(obj);
                     }
                 }
             });
@@ -23847,7 +23932,7 @@ class KritzelCore {
         }
         const objects = selectionGroup.objects;
         const alignedPositions = AlignmentHelper.calculateAlignedPositions(objects, alignment);
-        this._store.state.objects.transaction(() => {
+        this._store.objects.transaction(() => {
             for (const obj of objects) {
                 const newPosition = alignedPositions.get(obj.id);
                 if (newPosition) {
@@ -23945,7 +24030,7 @@ class KritzelCore {
      * Switches to selection tool.
      */
     selectAllObjects() {
-        const allObjects = this._store.state.objects
+        const allObjects = this._store.objects
             .allObjects()
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (allObjects.length > 0) {
@@ -23978,7 +24063,7 @@ class KritzelCore {
             height: this._store.state.viewportHeight / this._store.state.scale,
             depth: 100,
         };
-        const objectsInViewport = this._store.state.objects
+        const objectsInViewport = this._store.objects
             .query(viewportBounds)
             .filter(o => o.isInViewport())
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
@@ -24005,7 +24090,7 @@ class KritzelCore {
     clearSelection() {
         this.removeSelectionGroup();
         const localUserId = this._user?.id;
-        this._store.state.objects.remove(o => o instanceof KritzelSelectionBox ||
+        this._store.objects.remove(o => o instanceof KritzelSelectionBox ||
             (o instanceof KritzelSelectionGroup && (localUserId == null || o.userId === localUserId || o.userId == null)));
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
@@ -24014,7 +24099,7 @@ class KritzelCore {
         this._store.state.isRotationHandleSelected = false;
         this._store.state.isLineHandleSelected = false;
         this._store.state.isLineHandleDragging = false;
-        this._store.state.lineHandleType = null;
+        this._store.state.lineHandleType = undefined;
         this.rerender();
     }
     /**
@@ -24060,7 +24145,9 @@ class KritzelCore {
         const selectedObject = elementAtPoint.closest(selector);
         if (selectedObject) {
             const foundObject = this._store.allObjects.find(object => selectedObject.id === object.id);
-            const isHit = foundObject?.hitTest(clientX, clientY);
+            if (!foundObject)
+                return null;
+            const isHit = foundObject.hitTest(clientX, clientY);
             return isHit ? foundObject : null;
         }
         return null;
@@ -24142,7 +24229,7 @@ class KritzelCore {
         // saving the old workspace's viewport to the new workspace
         this._kritzelEngine.viewport?.cancelPendingUpdates();
         // Immediately save the current workspace's viewport before switching
-        const currentWorkspace = this._store.state.activeWorkspace;
+        const currentWorkspace = this._store.activeWorkspace;
         if (currentWorkspace) {
             this.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
         }
@@ -25484,7 +25571,7 @@ async function toPng(node, options = {}) {
     return canvas.toDataURL();
 }
 
-const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in var(--kritzel-loading-overlay-delay, 300ms) ease-out forwards;opacity:0}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards;opacity:0}.workspace-loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:workspace-loading-spin 0.6s linear infinite}@keyframes workspace-loading-spin{to{transform:rotate(360deg)}}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return getElement(this); }
@@ -25497,13 +25584,13 @@ const KritzelEngine = class {
         }
         // Let batched prop updates settle, then perform an idempotent re-check.
         await Promise.resolve();
-        const currentWorkspaceId = this.core.store.state.activeWorkspace?.id;
+        const currentWorkspaceId = this.core.store.activeWorkspace?.id;
         if (currentWorkspaceId === newWorkspaceId) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(newWorkspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
@@ -25603,6 +25690,11 @@ const KritzelEngine = class {
     }
     /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
     wheelEnabled = true;
+    /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
+    isLoading = false;
+    onIsLoadingChange() {
+        this.syncLoadingState();
+    }
     /** Emitted when the engine has fully initialized and is ready for interaction. */
     isEngineReady;
     /** Emitted when the active drawing tool changes. */
@@ -25711,7 +25803,7 @@ const KritzelEngine = class {
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerLeave() {
-        this.core.store.state.objects?.clearCursorPosition();
+        this.core.store.objects?.clearCursorPosition();
     }
     handleLongPress(ev) {
         this.contextMenuHandler.handleContextMenu(ev.detail);
@@ -25894,9 +25986,9 @@ const KritzelEngine = class {
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
         this.core.store.state.isContextMenuVisible = false;
-        this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
+        this.core.store.objects?.remove(o => o instanceof KritzelSelectionBox);
         this.core.store.setSelectionBox(null);
-        this.core.store.state.objects.clearLocalSelectionBox();
+        this.core.store.objects?.clearLocalSelectionBox();
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
         this.core.rerender();
@@ -25950,7 +26042,7 @@ const KritzelEngine = class {
         object._core = this.core;
         object.scale = this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
-        object.workspaceId = this.core.store.state.activeWorkspace.id;
+        object.workspaceId = this.core.store.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
@@ -25971,7 +26063,7 @@ const KritzelEngine = class {
                 child._core = this.core;
                 child.scale = this.core.store.state.scale;
                 child.zIndex = this.core.store.currentZIndex;
-                child.workspaceId = this.core.store.state.activeWorkspace.id;
+                child.workspaceId = this.core.store.activeWorkspace.id;
                 idRemapping.set(oldId, child.id);
                 object.childIds.push(child.id);
             });
@@ -26025,8 +26117,12 @@ const KritzelEngine = class {
      * @returns The removed object.
      */
     async removeObject(object) {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap) {
+            return null;
+        }
         this.core.deselectAllObjects();
-        this.core.store.state.objects.remove(o => o.id === object.id);
+        objectsMap.remove(o => o.id === object.id);
         this.core.rerender();
         this.emitObjectsRemoved([object]);
         return object;
@@ -26045,15 +26141,23 @@ const KritzelEngine = class {
      * @param objects - The objects to select.
      */
     async selectObjects(objects) {
+        const selectionTool = KritzelToolRegistry.getTool('selection');
+        if (!selectionTool) {
+            return;
+        }
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', selectionTool);
         this.core.deselectAllObjects();
         this.core.selectObjects(objects);
     }
     /** Selects all objects currently visible in the viewport. Switches to the selection tool automatically. */
     async selectAllObjectsInViewport() {
+        const selectionTool = KritzelToolRegistry.getTool('selection');
+        if (!selectionTool) {
+            return;
+        }
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', selectionTool);
         this.core.deselectAllObjects();
         this.core.selectAllObjectsInViewport();
     }
@@ -26159,8 +26263,8 @@ const KritzelEngine = class {
             return null;
         // Save critical state before screenshot to restore after
         const savedState = {
-            objects: this.core.store.state.objects,
-            activeWorkspace: this.core.store.state.activeWorkspace,
+            objects: this.core.store.objects,
+            activeWorkspace: this.core.store.activeWorkspace,
             workspaces: this.core.store.state.workspaces,
             activeTool: this.core.store.state.activeTool,
             isReady: this.core.store.state.isReady,
@@ -26211,6 +26315,10 @@ const KritzelEngine = class {
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.png`;
             const dataUrl = await this.getScreenshot('png');
+            if (!dataUrl) {
+                console.error('Failed to export viewport as PNG: screenshot could not be generated');
+                return;
+            }
             const link = document.createElement('a');
             link.download = filename;
             link.href = dataUrl;
@@ -26228,6 +26336,10 @@ const KritzelEngine = class {
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.svg`;
             const dataUrl = await this.getScreenshot('svg');
+            if (!dataUrl) {
+                console.error('Failed to export viewport as SVG: screenshot could not be generated');
+                return;
+            }
             const link = document.createElement('a');
             link.download = filename;
             link.href = dataUrl;
@@ -26350,7 +26462,10 @@ const KritzelEngine = class {
      * @returns A JSON string representing the complete workspace state.
      */
     async exportAsJson() {
-        const workspace = this.core.store.state.activeWorkspace;
+        const workspace = this.core.store.activeWorkspace;
+        if (!workspace) {
+            throw new Error('Cannot export workspace: no active workspace is loaded');
+        }
         const serialized = workspace.serialize({ includeObjects: true });
         return JSON.stringify(serialized, null, 2);
     }
@@ -26423,7 +26538,11 @@ const KritzelEngine = class {
         if (data.version && data.version !== WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
-        const currentWorkspaceId = this.core.store.state.activeWorkspace.id;
+        const activeWorkspace = this.core.store.activeWorkspace;
+        if (!activeWorkspace) {
+            throw new Error('Cannot load objects: no active workspace is loaded');
+        }
+        const currentWorkspaceId = activeWorkspace.id;
         let loadedCount = 0;
         // Revive and add objects to the current workspace
         if (data.objects && Array.isArray(data.objects)) {
@@ -26559,7 +26678,11 @@ const KritzelEngine = class {
     }
     /** Returns the currently active workspace. */
     async getActiveWorkspace() {
-        return this.core.store.state.activeWorkspace;
+        const activeWorkspace = this.core.store.activeWorkspace;
+        if (!activeWorkspace) {
+            throw new Error('No active workspace is loaded');
+        }
+        return activeWorkspace;
     }
     /**
      * Gets whether the active workspace is publicly accessible.
@@ -26588,7 +26711,7 @@ const KritzelEngine = class {
         this.workspacesChange.emit(this.core.store.state.workspaces);
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     /**
      * Reinitializes sync by performing a full teardown and re-initialization.
@@ -26598,8 +26721,8 @@ const KritzelEngine = class {
      */
     async reinitSync() {
         this.core.setSyncConfig(this.syncConfig);
-        this.core.store.state.objects?.clearCursorPosition();
-        this.core.store.state.objects?.destroy();
+        this.core.store.objects?.clearCursorPosition();
+        this.core.store.objects?.destroy();
         this.core.appStateMap.destroy();
         this._isYjsInitialized = false;
         await this.initializeSyncAndWorkspace();
@@ -26617,6 +26740,16 @@ const KritzelEngine = class {
     _workspaceInitializationTargetKey = null;
     _syncInitPromise = null;
     _syncConfigRevision = 0;
+    _isWorkspaceLoading = false;
+    _defaultUndoState = {
+        canUndo: false,
+        canRedo: false,
+        undoStackSize: 0,
+        redoStackSize: 0,
+    };
+    syncLoadingState() {
+        this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
+    }
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -26644,10 +26777,10 @@ const KritzelEngine = class {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         // Clear cursor position in awareness before destroying
-        this.core.store.state.objects?.clearCursorPosition();
+        this.core.store.objects?.clearCursorPosition();
         // Clean up current workspace's ObjectMap
-        if (this.core.store.state.objects) {
-            this.core.store.state.objects.destroy();
+        if (this.core.store.objects) {
+            this.core.store.objects.destroy();
         }
         // Clean up AppStateMap (workspaces Y.Doc)
         this.core.appStateMap.destroy();
@@ -26665,6 +26798,8 @@ const KritzelEngine = class {
         this.core.store.state.viewportBoundaryRight = this.viewportBoundaryRight;
         this.core.store.state.viewportBoundaryTop = this.viewportBoundaryTop;
         this.core.store.state.viewportBoundaryBottom = this.viewportBoundaryBottom;
+        this._isWorkspaceLoading = true;
+        this.syncLoadingState();
     }
     async componentDidLoad() {
         setTimeout(async () => {
@@ -26673,7 +26808,9 @@ const KritzelEngine = class {
             this.viewport = new KritzelViewport(this.core, this.host);
             // Initialize cursor manager with target element and shadow root
             this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
-            this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
+            if (this.host.shadowRoot) {
+                this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
+            }
             // Initialize theme manager with kritzel-editor as target element
             const editorElement = this.host.closest('kritzel-editor');
             this.core.themeManager.setTargetElement(editorElement || this.host);
@@ -26734,7 +26871,7 @@ const KritzelEngine = class {
             await this.initializeWorkspaceIfNeeded(startupWorkspace);
         }
         // Emit initial active workspace once startup initialization has completed
-        const initialActiveWorkspace = this.core.store.state.activeWorkspace;
+        const initialActiveWorkspace = this.core.store.activeWorkspace;
         if (initialActiveWorkspace) {
             this.activeWorkspaceChange.emit(initialActiveWorkspace);
         }
@@ -26763,7 +26900,7 @@ const KritzelEngine = class {
         if (!this.activeWorkspaceId || this._isResolvingActiveWorkspaceId) {
             return;
         }
-        if (this.core.store.state.activeWorkspace?.id === this.activeWorkspaceId) {
+        if (this.core.store.activeWorkspace?.id === this.activeWorkspaceId) {
             return;
         }
         this._isResolvingActiveWorkspaceId = true;
@@ -26779,24 +26916,25 @@ const KritzelEngine = class {
             }
             return;
         }
-        if (this.core.store.state.activeWorkspace?.id === workspace.id) {
+        if (this.core.store.activeWorkspace?.id === workspace.id) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     async initializeWorkspaceIfNeeded(workspace, options) {
         const targetWorkspaceId = workspace?.id ?? null;
         const targetKey = targetWorkspaceId ?? (options?.skipFallbackCreation ? '__NO_FALLBACK__' : '__AUTO__');
-        if (targetWorkspaceId && this.core.store.state.activeWorkspace?.id === targetWorkspaceId) {
+        if (targetWorkspaceId && this.core.store.activeWorkspace?.id === targetWorkspaceId) {
             return;
         }
         if (this._workspaceInitializationPromise && this._workspaceInitializationTargetKey === targetKey) {
             await this._workspaceInitializationPromise;
             return;
         }
-        this.core.store.state.isWorkspaceLoading = true;
+        this._isWorkspaceLoading = true;
+        this.syncLoadingState();
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
@@ -26808,12 +26946,23 @@ const KritzelEngine = class {
                 this._workspaceInitializationPromise = null;
                 this._workspaceInitializationTargetKey = null;
             }
-            this.core.store.state.isWorkspaceLoading = false;
+            this._isWorkspaceLoading = false;
+            this.syncLoadingState();
         }
     }
     emitObjectsChange() {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap) {
+            this.objectsChange.emit([]);
+            this.undoStateChange.emit(this._defaultUndoState);
+            if (this._lastHadSelectionGroup) {
+                this._lastHadSelectionGroup = false;
+                this.objectsSelectionChange.emit();
+            }
+            return;
+        }
         const objects = this.core.store.allObjects;
-        const undoState = this.core.store.state.objects.undoState;
+        const undoState = objectsMap.undoState;
         const hasSelectionGroup = this.core.store.selectionGroup !== null;
         this.objectsChange.emit(objects);
         this.undoStateChange.emit(undoState);
@@ -26844,22 +26993,24 @@ const KritzelEngine = class {
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
-            this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
+            this.core.store.objects?.remove(o => o instanceof KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
-            this.core.store.state.objects.clearLocalSelectionBox();
+            this.core.store.objects?.clearLocalSelectionBox();
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
         }
         this.core.store.state.skipContextMenu = false;
-        this.core.store.state.copiedObjects = null;
-        this.activeToolChange.emit(activeTool);
+        this.core.store.state.copiedObjects = undefined;
+        if (activeTool) {
+            this.activeToolChange.emit(activeTool);
+        }
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
     render() {
         if (!this.viewport) {
-            return null;
+            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
         }
         const currentTheme = this.core.themeManager.getStoredTheme();
         const computedStyle = window.getComputedStyle(this.host);
@@ -26876,7 +27027,7 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (h(Host, null, this.core.store.state.isWorkspaceLoading && (h("div", { class: "workspace-loading-overlay" }, "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
+        return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { 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})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
@@ -26885,7 +27036,7 @@ const KritzelEngine = class {
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -26896,7 +27047,7 @@ const KritzelEngine = class {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -26907,7 +27058,7 @@ const KritzelEngine = class {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el && object.mount(el), src: object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26925,7 +27076,7 @@ const KritzelEngine = class {
                     overflow: 'visible',
                     userSelect: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26942,7 +27093,7 @@ const KritzelEngine = class {
                     padding: object.padding + 'px',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26952,7 +27103,7 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26976,7 +27127,7 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }, h("div", { id: "text-object", ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -26986,7 +27137,7 @@ const KritzelEngine = class {
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -27005,7 +27156,7 @@ const KritzelEngine = class {
                     height: '100%',
                     overflow: 'visible',
                     pointerEvents: 'none',
-                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), h("div", { ref: el => object.mountTextEditor(el), style: {
+                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), h("div", { ref: el => el && object.mountTextEditor(el), style: {
                     position: 'absolute',
                     top: '0',
                     left: '0',
@@ -27026,8 +27177,8 @@ const KritzelEngine = class {
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
-                    const localClientId = this.core.store.state.objects?.localClientId;
-                    const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
+                    const localClientId = this.core.store.objects?.localClientId;
+                    const awarenessStates = this.core.store.objects?.awareness?.getStates();
                     const isRemoteSelection = isSelectionGroup && (
                     // Different user
                     (object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
@@ -27255,18 +27406,20 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10002',
             }, onActionSelected: event => {
-                event.detail.action({
-                    x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
-                    y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
-                }, this.core.store.selectionGroup?.objects);
+                if (event.detail.action) {
+                    event.detail.action({
+                        x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
+                        y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
+                    }, this.core.store.selectionGroup?.objects || []);
+                }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -27310,6 +27463,9 @@ const KritzelEngine = class {
             }],
         "debugInfo": [{
                 "onDebugInfoChange": 0
+            }],
+        "isLoading": [{
+                "onIsLoadingChange": 0
             }]
     }; }
 };
@@ -28537,7 +28693,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.78';
+const KRITZEL_VERSION = '0.1.80';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;