kritzel-stencil 0.3.8 → 0.3.10

package/dist/collection/classes/objects/selection-group.class.js

@@ -101,10 +101,10 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
         // Initialize styling with theme-aware defaults
-        object.borderColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.borderColor = undefined;
         object.borderWidth = 2;
-        object.handleColor = { light: '#ffffff', dark: '#1a1a1a' };
-        object.handleStrokeColor = { light: '#007AFF', dark: '#0A84FF' };
+        object.handleColor = undefined;
+        object.handleStrokeColor = undefined;
         object.handleSize = 6;
         return object;
     }

package/dist/collection/classes/objects/text.class.js

@@ -25,6 +25,7 @@ export class KritzelText extends KritzelBaseObject {
     isDebugInfoVisible = true;
     isEditable = true;
     isEditing = false;
+    isNewlyCreated = false;
     editor = null;
     content = null;
     _schema = new Schema({
@@ -330,6 +331,13 @@ export class KritzelText extends KritzelBaseObject {
         this._core.store.objects.consolidateTemporaryItems();
         this._core.store.objects.update(this);
         this._core.engine.emitObjectsChange();
+        if (this.isNewlyCreated) {
+            this.isNewlyCreated = false;
+            this._core.engine.emitObjectsAdded([this]);
+        }
+        else {
+            this._core.engine.emitObjectsUpdated([{ object: this, changedProperties: ['content'] }]);
+        }
     }
     /**
      * Handles the Escape key while the text object is in edit mode.

package/dist/collection/classes/registries/icon-registry.class.js

@@ -110,5 +110,6 @@ KritzelIconRegistry.registerIcons({
     'log-out': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out-icon lucide-log-out"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>',
     'users-round': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round-icon lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></svg>',
     'google': '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg>',
-    'braces': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces-icon lucide-braces"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>'
+    'braces': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces-icon lucide-braces"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>',
+    'heart': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>'
 });

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

@@ -117,6 +117,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;
+            text.isNewlyCreated = true;
             this._core.store.objects.insert(text);
             this._core.rerender();
             text.edit(event);
@@ -154,6 +155,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;
+            text.isNewlyCreated = true;
             this._core.store.objects.insert(text);
             this._core.rerender();
             text.edit(event);

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

@@ -195,7 +195,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: '0f8678b0a96d80e12d2aa75f85af74a8737f836d' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '5c695e3c5a012767b31bb1b756ef03e2a174f46e' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from

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

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     render() {
-        return (h(Host, { key: '2e40e68375f4b8b4531181d249c1638a01d9dac5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'c015f003cc5f4c5c532803846fa5201edf4c211a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'b427550b19a3e172cb25d05e34635121b82a61c5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9685b563497e110f36c0feffbfde04ebeb38024b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',

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

@@ -18,6 +18,9 @@ import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 import { DEFAULT_ASSET_STORAGE_CONFIG } from "../../..";
 import { DEFAULT_SYNC_CONFIG } from "../../../configs/default-sync.config";
+import { ThemeHelper } from "../../../helpers/theme.helper";
+import { lightTheme } from "../../../themes/light-theme";
+import { darkTheme } from "../../../themes/dark-theme";
 import { KritzelSelectionGroup } from "../../../classes/objects/selection-group.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 export class KritzelEditor {
@@ -178,6 +181,8 @@ export class KritzelEditor {
         },
         { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
     ];
+    themes;
+    theme = 'light';
     customSvgIcons = {};
     isControlsVisible = true;
     isUtilityPanelVisible = true;
@@ -224,9 +229,9 @@ export class KritzelEditor {
     isVirtualKeyboardOpen = false;
     undoState = null;
     isBackToContentButtonVisible = false;
-    currentTheme = 'light';
     shortcuts = [];
     currentIsPublic = false;
+    isEditorVisible = false;
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -278,11 +283,15 @@ export class KritzelEditor {
         }
     }
     onCurrentThemeChange() {
+        this.applyTheme();
         setTimeout(() => this.setOsSpecificCssVariables(), 0);
         if (this.engineRef) {
             this.engineRef.saveSettings(this.currentSettingsConfig);
         }
     }
+    onThemesChange() {
+        this.applyTheme();
+    }
     onTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -424,6 +433,12 @@ export class KritzelEditor {
     async exportViewportAsSvg() {
         return this.engineRef.exportViewportAsSvg();
     }
+    async exportSelectedObjectsAsPng() {
+        return this.engineRef.exportSelectedObjectsAsPng();
+    }
+    async exportSelectedObjectsAsSvg() {
+        return this.engineRef.exportSelectedObjectsAsSvg();
+    }
     async downloadAsJson(filename) {
         return this.engineRef.downloadAsJson(filename);
     }
@@ -451,6 +466,9 @@ export class KritzelEditor {
     async hideContextMenu() {
         return this.engineRef.hideContextMenu();
     }
+    async openContextMenu(options) {
+        return this.engineRef.openContextMenu(options);
+    }
     async triggerSelectionChange() {
         return this.engineRef.triggerSelectionChange();
     }
@@ -466,6 +484,15 @@ export class KritzelEditor {
     loginDialogRef;
     componentWillLoad() {
         this.loadSettingsFromStorage();
+        this.applyTheme();
+    }
+    applyTheme() {
+        const themeObj = this.resolveThemeObject();
+        ThemeHelper.applyThemeToElement(this.host, themeObj);
+    }
+    resolveThemeObject() {
+        return this.themes?.find(t => t.name === this.theme)
+            ?? (this.theme === 'dark' ? darkTheme : lightTheme);
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
@@ -480,6 +507,7 @@ export class KritzelEditor {
         if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady || !this.activeWorkspace) {
             return;
         }
+        this.isEditorVisible = true;
         const { id, name, isPublic, createdAt, updatedAt } = this.activeWorkspace;
         this.isReady.emit({
             host: this.host,
@@ -493,6 +521,7 @@ export class KritzelEditor {
             syncConfig: this.syncConfig,
             assetStorageConfig: this.assetStorageConfig,
             loginConfig: this.loginConfig,
+            theme: this.theme
         });
     }
     async onEngineReady(event) {
@@ -506,6 +535,7 @@ export class KritzelEditor {
         this.loadShortcuts();
     }
     handleWorkspacesChange(event) {
+        event.stopPropagation();
         this.workspaces = event.detail;
     }
     handleActiveWorkspaceChange(event) {
@@ -524,46 +554,54 @@ export class KritzelEditor {
         });
     }
     handleObjectsChange(event) {
+        event.stopPropagation();
         this.objectsChange.emit(event.detail);
     }
     handleObjectsAdded(event) {
+        event.stopPropagation();
         this.objectsAdded.emit(event.detail);
     }
     handleObjectsRemoved(event) {
+        event.stopPropagation();
         this.objectsRemoved.emit(event.detail);
     }
     handleObjectsUpdated(event) {
+        event.stopPropagation();
         this.objectsUpdated.emit(event.detail);
     }
     handleUndoStateChange(event) {
+        event.stopPropagation();
         this.undoStateChange.emit(event.detail);
         this.undoState = event.detail;
     }
     async handleObjectsInViewportChange(event) {
+        event.stopPropagation();
         const hasVisibleObjects = this.getContentObjects(event.detail).length > 0;
         const hasAnyObjectsAtAll = this.getContentObjects(await this.engineRef.getAllObjects()).length > 0;
         this.isBackToContentButtonVisible = !hasVisibleObjects && hasAnyObjectsAtAll;
     }
     handleViewportChange(event) {
+        event.stopPropagation();
         this.viewportChange.emit(event.detail);
     }
     handleAwarenessChange(event) {
+        event.stopPropagation();
         this.awarenessChange.emit(event.detail);
     }
     handleSettingsChange(event) {
         this.scaleMin = event.detail.scaleMin;
         this.scaleMax = event.detail.scaleMax;
         this.lockDrawingScale = event.detail.lockDrawingScale;
-        this.currentTheme = event.detail.theme;
+        this.theme = event.detail.theme;
         this.viewportBoundaryLeft = event.detail.viewportBoundaryLeft ?? -Infinity;
         this.viewportBoundaryRight = event.detail.viewportBoundaryRight ?? Infinity;
         this.viewportBoundaryTop = event.detail.viewportBoundaryTop ?? -Infinity;
         this.viewportBoundaryBottom = event.detail.viewportBoundaryBottom ?? Infinity;
         this.debugInfo = event.detail.debugInfo;
-        this.themeChange.emit(event.detail.theme);
         if (this.engineRef) {
             this.engineRef.saveSettings(event.detail);
         }
+        this.themeChange.emit(event.detail.theme);
     }
     get moreMenuItems() {
         return [
@@ -659,8 +697,8 @@ export class KritzelEditor {
                 if (typeof parsed.lockDrawingScale === 'boolean') {
                     this.lockDrawingScale = parsed.lockDrawingScale;
                 }
-                if (parsed.theme === 'light' || parsed.theme === 'dark') {
-                    this.currentTheme = parsed.theme;
+                if (typeof parsed.theme === 'string') {
+                    this.theme = parsed.theme;
                 }
                 if (typeof parsed.viewportBoundaryLeft === 'number') {
                     this.viewportBoundaryLeft = parsed.viewportBoundaryLeft;
@@ -691,7 +729,7 @@ export class KritzelEditor {
             scaleMin: this.scaleMin,
             scaleMax: this.scaleMax,
             lockDrawingScale: this.lockDrawingScale,
-            theme: this.currentTheme,
+            theme: this.theme,
             viewportBoundaryLeft: this.viewportBoundaryLeft,
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
@@ -744,28 +782,32 @@ export class KritzelEditor {
     render() {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
-        const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '2856db9fa6a0926df078d5d6eedb19d2b4de98a5' }, h("div", { key: '7ffad0fd28904b740af43e20addfef701bbcead9', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '0639e3d0f1a91935d42c10d5dfa793fd595cc234', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '0039bc16615c26ab239ceeac418a7d47ff2ad40a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '4815e1c4dfc6a04e68894b795c02dd678fec108d', ref: el => {
+        const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
+        return (h(Host, { key: '3606d2318e6811f2f4b647f1531ff8bda409a401', style: {
+                opacity: this.isEditorVisible ? '1' : '0',
+                visibility: this.isEditorVisible ? 'visible' : 'hidden',
+                transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
+            } }, h("div", { key: '094e66c69a829a3d150cd672f66f3f092cf19623', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'b31a64b26f0f13a24bc07f2a5db8230ebc0377e2', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '9768ead0daf60292c649a0ccdb4dcd92d8ce342a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'cf4cf487da19cd10352a31dab4e50db4aaabfd7a', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, 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: 'fc44c417ee17a98f2b5d8eecffac6a86e43fda2a', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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: 'eb0839b834e688f15461ebd7391c87b331a5b328', 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: 'f333d2b31d456d4e35dbd41c93492329939a7c4d', class: "top-right-buttons" }, h("kritzel-settings", { key: '7900c9b1c3fd35e07e0d2a2aa0b797f455f52e1d', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e5c14a118d245ef0ec1c5863eb21022a5e5d7c77', class: "top-right-buttons" }, h("kritzel-settings", { key: 'bad9ebae5bc91efaf388e525375ba263f0344374', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'c6ad8ae5255c9d90d854b7a26e81b65cfdc6236d', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'ca28cd1057181b347af75ea51950114272bf33ec', 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: '3d6d3c460e5954b4d477c6bcc9992e503f781a81', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '33a72ce69276082ca7cc2815a93ad14de8dcf5a0', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '809dedeacbf89674e42ab3e5850e67aadfe1111c', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '7521045a24e32e6aa69a5a8c41a4edea5d657d93', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'a4e778dee23b3dba94109c141e3628f22b740355', ref: 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: '1b667e832c1f231ecdd9ea0cca0504c6f4a82ce1', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ec0a1827625f79435d20b8d53374eb29e7174f7e', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '0ddec61cc09b96797c33ae18c225ec967efed3e8', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'e9d41eff38bbd4e9420f8586559597f8ec9d6802', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'f3fd8a06f5cf0ac89c02d535ee30dec05c9e536f', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '3394d489bdbc92c572208c8f65601bf91568f0c4', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '49bd9f85d4cb7ee0f8dc7d2b7248169848c36b9f', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1092,6 +1134,57 @@ export class KritzelEditor {
                 "setter": false,
                 "defaultValue": "[\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'Paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'Align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'Group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'Group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'Ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'Export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
+            "themes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelTheme[]",
+                    "resolved": "KritzelTheme[]",
+                    "references": {
+                        "KritzelTheme": {
+                            "location": "import",
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::KritzelTheme",
+                            "referenceLocation": "KritzelTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
+                    "references": {
+                        "ThemeName": {
+                            "location": "import",
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
             "customSvgIcons": {
                 "type": "unknown",
                 "mutable": false,
@@ -1362,9 +1455,9 @@ export class KritzelEditor {
             "isVirtualKeyboardOpen": {},
             "undoState": {},
             "isBackToContentButtonVisible": {},
-            "currentTheme": {},
             "shortcuts": {},
-            "currentIsPublic": {}
+            "currentIsPublic": {},
+            "isEditorVisible": {}
         };
     }
     static get events() {
@@ -1534,7 +1627,7 @@ export class KritzelEditor {
                 },
                 "complexType": {
                     "original": "ThemeName",
-                    "resolved": "\"dark\" | \"light\"",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
                         "ThemeName": {
                             "location": "import",
@@ -2746,6 +2839,40 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "exportSelectedObjectsAsPng": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "exportSelectedObjectsAsSvg": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "downloadAsJson": {
                 "complexType": {
                     "signature": "(filename?: string) => Promise<void>",
@@ -2965,6 +3092,27 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "openContextMenu": {
+                "complexType": {
+                    "signature": "(options: { x: number; y: number; objectId?: string; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ x: number; y: number; objectId?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "triggerSelectionChange": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -3067,8 +3215,11 @@ export class KritzelEditor {
                 "propName": "activeWorkspaceId",
                 "methodName": "onActiveWorkspaceIdChange"
             }, {
-                "propName": "currentTheme",
+                "propName": "theme",
                 "methodName": "onCurrentThemeChange"
+            }, {
+                "propName": "themes",
+                "methodName": "onThemesChange"
             }];
     }
     static get listeners() {

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

@@ -134,6 +134,14 @@ export class KritzelEngine {
     onThemeChange(newValue) {
         this.core.themeManager.setTheme(newValue);
     }
+    /** An array of available themes for the editor. */
+    themes;
+    onThemesChange(newValue) {
+        if (newValue && newValue.length > 0) {
+            this.core.themeManager.registerThemes(newValue);
+            this.core.themeManager.applyTheme(this.core.themeManager.currentTheme);
+        }
+    }
     /** Left boundary of the viewport in world coordinates. Objects beyond this X position cannot be panned to. */
     viewportBoundaryLeft = -Infinity;
     onViewportBoundaryLeftChange(newValue) {
@@ -496,6 +504,18 @@ export class KritzelEngine {
         this.core.store.state.isEnabled = true;
         this.core.rerender();
     }
+    /**
+     * Programmatically opens the context menu at a specified world-coordinate position.
+     * If `objectId` is provided and found, the object context menu is shown for that object.
+     * If no `objectId` is provided but a selection group already exists, the object context menu is shown.
+     * Otherwise, the global context menu is shown.
+     * @param options.x - The X position in world (canvas) coordinates.
+     * @param options.y - The Y position in world (canvas) coordinates.
+     * @param options.objectId - Optional ID of an object to select and show the object context menu for.
+     */
+    async openContextMenu(options) {
+        this.contextMenuHandler.open(options);
+    }
     /**
      * Retrieves a canvas object by its unique ID.
      * @param id - The object's unique identifier.
@@ -1350,6 +1370,11 @@ export class KritzelEngine {
     }
     componentWillLoad() {
         this.core.setEditorId(this.editorId);
+        if (this.themes && this.themes.length > 0) {
+            this.core.themeManager.registerThemes(this.themes);
+        }
+        const editorElement = this.host.closest('kritzel-editor');
+        this.core.themeManager.injectThemeEarly(editorElement || this.host);
         this.core.setUser(this.user);
         this.validateScaleMax(this.scaleMax);
         this.validateScaleMin(this.scaleMin);
@@ -2334,7 +2359,7 @@ export class KritzelEngine {
                 "mutable": false,
                 "complexType": {
                     "original": "ThemeName",
-                    "resolved": "\"dark\" | \"light\"",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
                         "ThemeName": {
                             "location": "import",
@@ -2356,6 +2381,30 @@ export class KritzelEngine {
                 "attribute": "theme",
                 "defaultValue": "'light'"
             },
+            "themes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelTheme[]",
+                    "resolved": "KritzelTheme[]",
+                    "references": {
+                        "KritzelTheme": {
+                            "location": "import",
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::KritzelTheme",
+                            "referenceLocation": "KritzelTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of available themes for the editor."
+                },
+                "getter": false,
+                "setter": false
+            },
             "viewportBoundaryLeft": {
                 "type": "number",
                 "mutable": false,
@@ -3312,6 +3361,36 @@ export class KritzelEngine {
                     "tags": []
                 }
             },
+            "openContextMenu": {
+                "complexType": {
+                    "signature": "(options: { x: number; y: number; objectId?: string; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ x: number; y: number; objectId?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically opens the context menu at a specified world-coordinate position.\nIf `objectId` is provided and found, the object context menu is shown for that object.\nIf no `objectId` is provided but a selection group already exists, the object context menu is shown.\nOtherwise, the global context menu is shown.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options.x - The X position in world (canvas) coordinates."
+                        }, {
+                            "name": "param",
+                            "text": "options.y - The Y position in world (canvas) coordinates."
+                        }, {
+                            "name": "param",
+                            "text": "options.objectId - Optional ID of an object to select and show the object context menu for."
+                        }]
+                }
+            },
             "getObjectById": {
                 "complexType": {
                     "signature": "<T extends KritzelBaseObject>(id: string) => Promise<T | null>",
@@ -4648,6 +4727,9 @@ export class KritzelEngine {
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"
+            }, {
+                "propName": "themes",
+                "methodName": "onThemesChange"
             }, {
                 "propName": "viewportBoundaryLeft",
                 "methodName": "onViewportBoundaryLeftChange"

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '2067605684a743be45059efd562697ff21fefbcb', style: containerStyles, class: {
+        return (h(Host, { key: '571bd5b92adc7c65b96ded37b8daf5ed79905361', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '1ed322318335deb011087494a2c437849b5a23a0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '1065850b4575fda4637ab61ce07c6dfc97f14a90', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'ff99dded4cb17d6c25880b54e3875c262dfc0440', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '5a217c6a1366dea3ceee8bfa03a38917cad7a9f9', class: "avatar-default" }, h("svg", { key: 'f4537e21772e6e6f1bb60835ad7a56123a200dd7', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '29649695038a506e1caeba3a8b6c066860fb5a1d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'a6d9c9dd2eac6e44c731a878e2460017da7fb0b7', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '9e9d33cdd213649071b76cb0875008562b30f6a1', class: "avatar-default" }, h("svg", { key: '5d0be5c503a8944b45de239f08e6f40378c2dc5e', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9264549c9b8abbdea74cd707d6f77bcfdde6459d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }