kritzel-stencil 0.1.78 → 0.1.80

package/dist/collection/classes/tools/line-tool.class.js

@@ -69,8 +69,8 @@ export class KritzelLineTool extends KritzelBaseTool {
                 });
                 line.isCompleted = false;
                 this._currentLineId = line.id;
-                this._core.store.state.objects.insert(line);
-                this._core.store.state.objects?.setActiveDrawingObject(line.id);
+                this._core.store.objects.insert(line);
+                this._core.store.objects?.setActiveDrawingObject(line.id);
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
@@ -99,8 +99,8 @@ export class KritzelLineTool extends KritzelBaseTool {
                 });
                 line.isCompleted = false;
                 this._currentLineId = line.id;
-                this._core.store.state.objects.insert(line);
-                this._core.store.state.objects?.setActiveDrawingObject(line.id);
+                this._core.store.objects.insert(line);
+                this._core.store.objects?.setActiveDrawingObject(line.id);
             }
         }
     }
@@ -116,7 +116,7 @@ export class KritzelLineTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing && this._currentLineId) {
-                const currentLine = this._core.store.state.objects.findById(this._currentLineId);
+                const currentLine = this._core.store.objects.findById(this._currentLineId);
                 if (currentLine) {
                     const viewportScale = this._core.store.state.scale;
                     const lockScale = this._core.store.state.lockDrawingScale;
@@ -140,14 +140,14 @@ export class KritzelLineTool extends KritzelBaseTool {
                     updatedLine.workspaceId = currentLine.workspaceId;
                     updatedLine.zIndex = currentLine.zIndex;
                     updatedLine.isCompleted = false;
-                    this._core.store.state.objects.update(updatedLine);
+                    this._core.store.objects.update(updatedLine);
                 }
             }
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1 && this._currentLineId) {
-                const currentLine = this._core.store.state.objects.findById(this._currentLineId);
+                const currentLine = this._core.store.objects.findById(this._currentLineId);
                 if (currentLine) {
                     const viewportScale = this._core.store.state.scale;
                     const lockScale = this._core.store.state.lockDrawingScale;
@@ -171,7 +171,7 @@ export class KritzelLineTool extends KritzelBaseTool {
                     updatedLine.workspaceId = currentLine.workspaceId;
                     updatedLine.zIndex = currentLine.zIndex;
                     updatedLine.isCompleted = false;
-                    this._core.store.state.objects.update(updatedLine);
+                    this._core.store.objects.update(updatedLine);
                 }
             }
         }
@@ -190,16 +190,16 @@ export class KritzelLineTool extends KritzelBaseTool {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
                 if (this._currentLineId) {
-                    const currentLine = this._core.store.state.objects.findById(this._currentLineId);
+                    const currentLine = this._core.store.objects.findById(this._currentLineId);
                     if (currentLine) {
                         currentLine.isCompleted = true;
-                        this._core.store.state.objects.update(currentLine);
+                        this._core.store.objects.update(currentLine);
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentLine]);
                         // Switch to selection tool and select the drawn line
                         this.selectLineAndSwitchTool(currentLine);
                     }
-                    this._core.store.state.objects?.setActiveDrawingObject(null);
+                    this._core.store.objects?.setActiveDrawingObject(null);
                     this._currentLineId = null;
                 }
             }
@@ -208,16 +208,16 @@ export class KritzelLineTool extends KritzelBaseTool {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
                 if (this._currentLineId) {
-                    const currentLine = this._core.store.state.objects.findById(this._currentLineId);
+                    const currentLine = this._core.store.objects.findById(this._currentLineId);
                     if (currentLine) {
                         currentLine.isCompleted = true;
-                        this._core.store.state.objects.update(currentLine);
+                        this._core.store.objects.update(currentLine);
                         this._core.engine.emitObjectsChange();
                         this._core.engine.emitObjectsAdded([currentLine]);
                         // Switch to selection tool and select the drawn line
                         this.selectLineAndSwitchTool(currentLine);
                     }
-                    this._core.store.state.objects?.setActiveDrawingObject(null);
+                    this._core.store.objects?.setActiveDrawingObject(null);
                     this._currentLineId = null;
                 }
             }

package/dist/collection/classes/tools/selection-tool.class.js

@@ -234,7 +234,7 @@ export class KritzelSelectionTool extends KritzelBaseTool {
         const objects = this.flattenObjects(this.getSelectedObjects());
         for (const obj of objects) {
             if (obj instanceof KritzelLine)
-                return obj.arrows;
+                return obj.arrows ?? { start: { enabled: false }, end: { enabled: false } };
         }
         return { start: { enabled: false }, end: { enabled: false } };
     }
@@ -476,7 +476,7 @@ export class KritzelSelectionTool extends KritzelBaseTool {
     getSelectedObject(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._core.findObjectById(objectElement?.id);
+        const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
         if (!object) {
             return null;
         }

package/dist/collection/classes/tools/shape-tool.class.js

@@ -178,8 +178,8 @@ export class KritzelShapeTool extends KritzelBaseTool {
             fontFamily: this.fontFamily,
             scale: lockScale ? 1 : viewportScale,
         });
-        this._core.store.state.objects.insert(this.currentShape);
-        this._core.store.state.objects?.setActiveDrawingObject(this.currentShape.id);
+        this._core.store.objects.insert(this.currentShape);
+        this._core.store.objects?.setActiveDrawingObject(this.currentShape.id);
         this._core.rerender();
     }
     /**
@@ -213,7 +213,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
         this.currentShape.translateX = -this._core.store.state.translateX / divider;
         this.currentShape.translateY = -this._core.store.state.translateY / divider;
         this.currentShape.updateDimensions();
-        this._core.store.state.objects.update(this.currentShape);
+        this._core.store.objects.update(this.currentShape);
     }
     /**
      * Completes the shape drawing process.
@@ -229,18 +229,18 @@ export class KritzelShapeTool extends KritzelBaseTool {
         // Compare in screen space
         if (this.currentShape.width < 10 && this.currentShape.height < 10) {
             const shapeId = this.currentShape.id;
-            this._core.store.state.objects.remove(o => o.id === shapeId);
+            this._core.store.objects.remove(o => o.id === shapeId);
         }
         else {
             this.currentShape.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.objects.update(this.currentShape);
+            this._core.store.objects.update(this.currentShape);
             this._core.engine.emitObjectsChange();
             this._core.engine.emitObjectsAdded([this.currentShape]);
             this._core.selectObjects([this.currentShape]);
             this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
         this.isDrawing = false;
-        this._core.store.state.objects?.setActiveDrawingObject(null);
+        this._core.store.objects?.setActiveDrawingObject(null);
         this.currentShape = null;
         this._core.rerender();
     }

package/dist/collection/classes/tools/text-tool.class.js

@@ -71,7 +71,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
             text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.objects.insert(text);
+            this._core.store.objects.insert(text);
             this._core.rerender();
             text.edit(event);
         }
@@ -108,7 +108,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
             text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.objects.insert(text);
+            this._core.store.objects.insert(text);
             this._core.rerender();
             text.edit(event);
         }

package/dist/collection/collection-manifest.json

@@ -47,7 +47,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js

@@ -13,10 +13,10 @@ export class KritzelAwarenessCursors {
     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(() => {
@@ -32,7 +32,7 @@ export class KritzelAwarenessCursors {
         }
     }
     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
@@ -108,7 +108,7 @@ export class KritzelAwarenessCursors {
         });
     }
     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) {
@@ -185,7 +185,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         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
@@ -295,7 +295,7 @@ export class KritzelAwarenessCursors {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     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',
@@ -112,7 +112,7 @@ export class KritzelCursorTrail {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -193,6 +193,8 @@ export class KritzelEditor {
             }
         ]
     };
+    /** 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. */
@@ -232,9 +234,10 @@ export class KritzelEditor {
         }
     }
     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;
             }
         }
@@ -461,7 +464,7 @@ export class KritzelEditor {
         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;
@@ -480,6 +483,9 @@ export class KritzelEditor {
     }
     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();
@@ -562,7 +568,7 @@ export class KritzelEditor {
                 icon: 'upload',
                 action: async () => {
                     const preview = await this.engineRef.getScreenshot('png');
-                    this.exportRef.open(preview);
+                    this.exportRef.open(preview ?? undefined);
                 },
             },
             {
@@ -593,7 +599,7 @@ export class KritzelEditor {
         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.
@@ -602,6 +608,9 @@ export class KritzelEditor {
         const isPublic = this.activeWorkspace?.isPublic ?? false;
         const workspaceId = this.activeWorkspace?.id;
         this.currentIsPublic = isPublic;
+        if (!workspaceId) {
+            return;
+        }
         this.isPublicChange.emit({ isPublic, workspaceId });
     }
     handleProviderLogin = (event) => {
@@ -706,7 +715,31 @@ export class KritzelEditor {
         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 is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -1142,6 +1175,26 @@ export class KritzelEditor {
                 "setter": false,
                 "defaultValue": "{\r\n    providers: [\r\n      {\r\n        label: 'Sign in with Google',\r\n        icon: 'google',\r\n        name: 'Google',\r\n      }\r\n    ]\r\n  }"
             },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the editor is in a loading state. When true, a loading overlay is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
             "editorId": {
                 "type": "string",
                 "mutable": false,
@@ -2103,7 +2156,7 @@ export class KritzelEditor {
             },
             "registerTool": {
                 "complexType": {
-                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig) => Promise<KritzelBaseTool>",
+                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig) => Promise<KritzelBaseTool | null>",
                     "parameters": [{
                             "name": "toolName",
                             "type": "string",
@@ -2485,7 +2538,7 @@ export class KritzelEditor {
             },
             "getScreenshot": {
                 "complexType": {
-                    "signature": "(format?: \"png\" | \"svg\") => Promise<string>",
+                    "signature": "(format?: \"png\" | \"svg\") => Promise<string | null>",
                     "parameters": [{
                             "name": "format",
                             "type": "\"svg\" | \"png\"",
@@ -2643,10 +2696,10 @@ export class KritzelEditor {
             },
             "findObjects": {
                 "complexType": {
-                    "signature": "<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject) => boolean) => Promise<T[]>",
+                    "signature": "<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject<Element>) => boolean) => Promise<T[]>",
                     "parameters": [{
                             "name": "predicate",
-                            "type": "(obj: KritzelBaseObject<HTMLElement | SVGElement>) => boolean",
+                            "type": "(obj: KritzelBaseObject<Element>) => boolean",
                             "docs": ""
                         }],
                     "references": {
@@ -2663,6 +2716,12 @@ export class KritzelEditor {
                             "path": "../../../classes/objects/base-object.class",
                             "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
                             "referenceLocation": "KritzelBaseObject"
+                        },
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
+                            "referenceLocation": "Element"
                         }
                     },
                     "return": "Promise<T[]>"

package/dist/collection/components/core/kritzel-engine/kritzel-engine.css

@@ -29,14 +29,34 @@ p, h1, h2, h3, h4, h5, h6, blockquote, pre {
   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 var(--kritzel-loading-overlay-delay, 300ms) ease-out forwards;
+  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;