kritzel-stencil 0.4.8 → 0.4.10

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

@@ -16,6 +16,7 @@ import { DEFAULT_SHAPE_CONFIG } from "../../../configs/default-shape-tool.config
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
+import { hasRemoteSyncProvider } from "../../../interfaces/sync-config.interface";
 import { DEFAULT_ASSET_STORAGE_CONFIG } from "../../..";
 import { DEFAULT_SYNC_CONFIG } from "../../../configs/default-sync.config";
 import { ThemeHelper } from "../../../helpers/theme.helper";
@@ -123,6 +124,19 @@ export class KritzelEditor {
             group: 'clipboard',
             action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
         },
+        {
+            label: 'menu.export',
+            icon: 'upload',
+            group: 'clipboard',
+            visible: (_, objects) => this.canExportObjects(objects),
+            action: (_, objects) => {
+                const format = this.getPreferredExportFormat(objects);
+                if (!format) {
+                    return;
+                }
+                void this.engineRef.exportSelectedObject(format);
+            },
+        },
         {
             label: 'menu.order',
             icon: 'ordering',
@@ -164,16 +178,43 @@ export class KritzelEditor {
                 },
             ],
         },
+        { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
+    ];
+    moreMenuItems = [
+        {
+            id: 'share',
+            label: 'menu.share',
+            icon: 'share',
+            isVisible: async () => hasRemoteSyncProvider(this.syncConfig),
+            action: () => {
+                if (!this.isLoggedIn && this.loginConfig) {
+                    this.openLoginDialog();
+                    return;
+                }
+                this.shareDialogRef.open();
+            },
+        },
         {
+            id: 'export',
             label: 'menu.export',
+            icon: 'upload',
+            action: async () => {
+                const preview = await this.engineRef.getScreenshot('png');
+                this.exportRef.open(preview ?? undefined);
+            },
+        },
+        {
+            id: 'import',
+            label: 'menu.import',
             icon: 'download',
-            group: 'export',
-            children: [
-                { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },
-                { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },
-            ],
+            action: () => this.engineRef.importFromFile(),
+        },
+        {
+            id: 'settings',
+            label: 'menu.settings',
+            icon: 'settings',
+            action: () => this.settingsRef.open(),
         },
-        { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
     ];
     themes;
     theme = 'light';
@@ -245,6 +286,9 @@ export class KritzelEditor {
     isNotificationDismissing = false;
     contextMenuState;
     normalizedControls = [];
+    resolvedMoreMenuItems = [];
+    isSyncing = false;
+    isLoadingOverlayVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -287,6 +331,18 @@ export class KritzelEditor {
     onControlsChange(newValue) {
         this.normalizedControls = this.normalizeControls(newValue);
     }
+    onMoreMenuItemsChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onSyncConfigChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onLoginConfigChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onUserChange() {
+        this.recomputeMoreMenuItems();
+    }
     onActiveWorkspaceIdChange(newId) {
         // If no ID is provided, do nothing (allows other logic to control activeWorkspace)
         if (!newId) {
@@ -336,6 +392,7 @@ export class KritzelEditor {
         }
         this.resolvedTerms = await this.engineRef.getResolvedTerms();
         this.availableLocaleOptions = await this.engineRef.getAvailableLocaleOptions();
+        this.recomputeMoreMenuItems();
     }
     onTouchStart(event) {
         if (event.cancelable) {
@@ -496,11 +553,14 @@ export class KritzelEditor {
     async exportViewportAsSvg(options) {
         return this.engineRef.exportViewportAsSvg(options);
     }
-    async exportSelectedObjectsAsPng() {
-        return this.engineRef.exportSelectedObjectsAsPng();
+    async getSelectedObjectSupportedExportFormats() {
+        return this.engineRef.getSelectedObjectSupportedExportFormats();
+    }
+    async canExportSelectedObjectAs(format) {
+        return this.engineRef.canExportSelectedObjectAs(format);
     }
-    async exportSelectedObjectsAsSvg() {
-        return this.engineRef.exportSelectedObjectsAsSvg();
+    async exportSelectedObject(format) {
+        return this.engineRef.exportSelectedObject(format);
     }
     async downloadAsJson(filename) {
         return this.engineRef.downloadAsJson(filename);
@@ -567,6 +627,7 @@ export class KritzelEditor {
     currentUserDialogRef;
     componentWillLoad() {
         this.normalizedControls = this.normalizeControls(this.controls);
+        this.recomputeMoreMenuItems();
         this.loadSettingsFromStorage();
         this.applyTheme();
     }
@@ -587,13 +648,18 @@ export class KritzelEditor {
             };
         });
     }
+    recomputeMoreMenuItems() {
+        if (this.moreMenuItems) {
+            this.resolvedMoreMenuItems = this.moreMenuItems;
+            return;
+        }
+    }
     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);
+        return this.themes?.find(t => t.name === this.theme) ?? (this.theme === 'dark' ? darkTheme : lightTheme);
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
@@ -628,7 +694,7 @@ export class KritzelEditor {
             syncConfig: this.syncConfig,
             assetStorageConfig: this.assetStorageConfig,
             loginConfig: this.loginConfig,
-            theme: this.theme
+            theme: this.theme,
         });
     }
     async onEngineReady(event) {
@@ -791,43 +857,6 @@ export class KritzelEditor {
         }
         this.themeChange.emit(event.detail.theme);
     }
-    get moreMenuItems() {
-        return [
-            {
-                id: 'share',
-                label: this.resolvedTerms['menu.share'] ?? 'Share',
-                icon: 'share',
-                action: () => {
-                    if (!this.isLoggedIn && this.loginConfig) {
-                        this.openLoginDialog();
-                        return;
-                    }
-                    this.shareDialogRef.open();
-                },
-            },
-            {
-                id: 'export',
-                label: this.resolvedTerms['menu.export'] ?? 'Export',
-                icon: 'upload',
-                action: async () => {
-                    const preview = await this.engineRef.getScreenshot('png');
-                    this.exportRef.open(preview ?? undefined);
-                },
-            },
-            {
-                id: 'import',
-                label: this.resolvedTerms['menu.import'] ?? 'Import',
-                icon: 'download',
-                action: () => this.engineRef.importFromFile(),
-            },
-            {
-                id: 'settings',
-                label: this.resolvedTerms['menu.settings'] ?? 'Settings',
-                icon: 'settings',
-                action: () => this.settingsRef.open(),
-            }
-        ];
-    }
     handleToggleIsPublic = async (event) => {
         const isPublic = event.detail;
         const activeWorkspace = await this.engineRef.getActiveWorkspace();
@@ -857,6 +886,28 @@ export class KritzelEditor {
     get isLoggedIn() {
         return !!this.user && !this.user.isGuest;
     }
+    canExportObjectsAs(objects, format) {
+        if (!objects || objects.length !== 1) {
+            return false;
+        }
+        const [selected] = objects;
+        if (!ObjectHelper.isKritzelExportable(selected)) {
+            return false;
+        }
+        return selected.getSupportedExportFormats().includes(format);
+    }
+    canExportObjects(objects) {
+        return this.canExportObjectsAs(objects, 'png') || this.canExportObjectsAs(objects, 'svg');
+    }
+    getPreferredExportFormat(objects) {
+        if (this.canExportObjectsAs(objects, 'png')) {
+            return 'png';
+        }
+        if (this.canExportObjectsAs(objects, 'svg')) {
+            return 'svg';
+        }
+        return null;
+    }
     async openLoginDialog() {
         this.loginDialogRef?.open();
     }
@@ -1033,41 +1084,41 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'ab06876e3a07e97c3788113ffd0483bbb2819d5b' }, h("div", { key: 'e393eacfad2b224a720e5a97b047af8dd3ce97a5', class: "editor-content", style: {
+        return (h(Host, { key: 'd9d87b5ca40972d7ab2c5986f340278347f78c6e' }, h("div", { key: 'd8da2ed24d19c550420689c6720dc491fe0d3a22', class: "editor-content", 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: 'd9dcbd6859bea28d75c7f8b0cc26ea3ba58b2433', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '945953a6c95520316c4e0f35503a824414bd3c7a', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '8b345bf6ce0ec33ca35f1f630af2050b95bc6b74', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '1b965de38a7f1f40d5d91431801e873289416924', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'f165dc7acc5e1bc7923fec217ebc16fe4a3f2ece', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'c5cf7edc1f921e35310c89449f5a043dda171a04', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: 'fc3417276f0034e7fc7e8360d3f3ce57106146b2', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, h("div", { key: '82a5d216e7c95307b1bdbd1f06fdfe881c1c50d4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'de13673384b44bb6bd309a927a2866a9b78b519e', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f68610d7d91713f7a0ec5f0135d208769f7fab9c', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '9d1f972fb67050b1f996e3088710713fa1219b9a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '295eff0a02f7cc79ad8e80cda23baa3c576ce156', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '1d1bf140ddfb7b927d30fb1d77e7b887240d7deb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '1062bc9554e5834ef2002fbfe953f7938866fb84', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
                 position: 'absolute',
                 left: `${this.contextMenuState.position.x}px`,
                 top: `${this.contextMenuState.position.y}px`,
                 zIndex: '10002',
-            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-engine", { key: '0c9df0386d38a87f50d324cfc51307a1cb947a58', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-sync-indicator", { key: '0094a026828473988f857d82cfccb811f36f049c', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '680096e20b6175104a866b9a92ca4c1d0087c93a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '0698a44fcbf2d6ea786d53502350ac0c9ffb9d66', 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, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event) }), h("kritzel-controls", { key: '46d8e9c45c7bed24fc02d17c8fef836d596088d7', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, 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, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '765a670807111ad68e9f8d14bdca2651a33704d4', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e3ef94509a82fe435f827b66cf1813969b7dec66', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '4e6cbdf85f550e6e3037dce3b910c0582ea0320b', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a62df7f8a68cbed728b701894a5284c2bff39e1e', class: "top-right-buttons" }, h("kritzel-settings", { key: '0b6daf9ff43551df9f86431d398a32913a845925', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e7c5ebab4a40b7ab4fa5d19d203129326c0009ed', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '0aa3891b553d2abcd06e635227fd6bb6656ed739', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '824244bbd78784c1d78ab89cc12e206ca61d84cc', class: "top-right-buttons" }, h("kritzel-settings", { key: 'baf4830b6b9ccb6241b1a1baa5cc6ff9d0295fb9', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '29d02ffd3358fe91d27435cc3fdd5f8ac2ad7cf5', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '57e2682450c71803cd49bfe65f16e02d9d3358bc', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '729ca599e46654bc1429b5d91ff73f26d9b6e7bb', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '84c07268072418a82cf504f16803c59a1e37c0ae', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '55189e3da7899628b252e7995b20bc422fce2d5c', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '955d2a61b98d937f8eec39ab19f1b73e702c9fd7', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'c0885e0c8cab1a4cb50c8f6d4b17e03f32cc2b87', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '8209b2562ffb821036bb8e4dacf052cacbe99bee', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                     this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
                 }
-            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: 'a55d85769bad635fcc7934f584bf1bf74c1e7ea6', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '67dd879ec3c55c98e32f6112ca53d925f47b56b4', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '5f13130099110eb472022099219e15877ceceb57', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && h("kritzel-button", { key: '9cec12de2207e8931a08c0a4f6bda39d039dfd1f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: 'fe0e1413148b9ac64e5f058790ba96b856faef9e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'ea06c88b0cba0464144bea1e2247b37cc5c44646', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cda0fcdcad75de8730ce10bda425cc0fbe01429a', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'e9a523d5989284b7e30ac44f55882a17c82c643b', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1372,7 +1423,32 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      group: 'clipboard',\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'menu.align',\n      icon: 'align',\n      group: 'other',\n      children: [\n        { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'menu.group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'menu.group',\n          icon: 'group',\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'menu.ungroup',\n          icon: 'ungroup',\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'menu.export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
+                "defaultValue": "[\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      group: 'clipboard',\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.export',\n      icon: 'upload',\n      group: 'clipboard',\n      visible: (_, objects) => this.canExportObjects(objects),\n      action: (_, objects) => {\n        const format = this.getPreferredExportFormat(objects);\n        if (!format) {\n          return;\n        }\n\n        void this.engineRef.exportSelectedObject(format);\n      },\n    },\n    {\n      label: 'menu.order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'menu.align',\n      icon: 'align',\n      group: 'other',\n      children: [\n        { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'menu.group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'menu.group',\n          icon: 'group',\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'menu.ungroup',\n          icon: 'ungroup',\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
+            },
+            "moreMenuItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem[]",
+                    "resolved": "IKritzelMenuItem<any>[]",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    {\n      id: 'share',\n      label: 'menu.share',\n      icon: 'share',\n      isVisible: async () => hasRemoteSyncProvider(this.syncConfig),\n      action: () => {\n        if (!this.isLoggedIn && this.loginConfig) {\n          this.openLoginDialog();\n          return;\n        }\n        this.shareDialogRef.open();\n      },\n    },\n    {\n      id: 'export',\n      label: 'menu.export',\n      icon: 'upload',\n      action: async () => {\n        const preview = await this.engineRef.getScreenshot('png');\n        this.exportRef.open(preview ?? undefined);\n      },\n    },\n    {\n      id: 'import',\n      label: 'menu.import',\n      icon: 'download',\n      action: () => this.engineRef.importFromFile(),\n    },\n    {\n      id: 'settings',\n      label: 'menu.settings',\n      icon: 'settings',\n      action: () => this.settingsRef.open(),\n    },\n  ]"
             },
             "themes": {
                 "type": "unknown",
@@ -1905,7 +1981,10 @@ export class KritzelEditor {
             "activeNotification": {},
             "isNotificationDismissing": {},
             "contextMenuState": {},
-            "normalizedControls": {}
+            "normalizedControls": {},
+            "resolvedMoreMenuItems": {},
+            "isSyncing": {},
+            "isLoadingOverlayVisible": {}
         };
     }
     static get events() {
@@ -3491,31 +3570,74 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
-            "exportSelectedObjectsAsPng": {
+            "getSelectedObjectSupportedExportFormats": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<KritzelObjectExportFormat[]>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<KritzelObjectExportFormat[]>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "exportSelectedObjectsAsSvg": {
+            "canExportSelectedObjectAs": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(format: KritzelObjectExportFormat) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "format",
+                            "type": "\"svg\" | \"png\"",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "exportSelectedObject": {
+                "complexType": {
+                    "signature": "(format: KritzelObjectExportFormat) => Promise<void>",
+                    "parameters": [{
+                            "name": "format",
+                            "type": "\"svg\" | \"png\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
                         }
                     },
                     "return": "Promise<void>"
@@ -4096,6 +4218,18 @@ export class KritzelEditor {
             }, {
                 "propName": "controls",
                 "methodName": "onControlsChange"
+            }, {
+                "propName": "moreMenuItems",
+                "methodName": "onMoreMenuItemsChange"
+            }, {
+                "propName": "syncConfig",
+                "methodName": "onSyncConfigChange"
+            }, {
+                "propName": "loginConfig",
+                "methodName": "onLoginConfigChange"
+            }, {
+                "propName": "user",
+                "methodName": "onUserChange"
             }, {
                 "propName": "activeWorkspaceId",
                 "methodName": "onActiveWorkspaceIdChange"