kritzel-stencil 0.4.7 → 0.4.9

package/dist/components/kritzel-editor.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$s } from './p-CdR76C4L.js';
-import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-C2yi85nc.js';
-import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-BmyTdQGy.js';
+import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-ZPPtEla5.js';
+import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-CURiiQfq.js';
 import { D as DEFAULT_TEXT_TOOL_AVAILABLE_FONTS, r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
 import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$4 } from './p-CwuGA058.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
-import { O as ObjectHelper } from './p-Dd-pMvlr.js';
-import { d as defineCustomElement$J } from './p-Ka7OWbnk.js';
+import { O as ObjectHelper } from './p-DPONTran.js';
+import { d as defineCustomElement$J } from './p-lQ7nfhOy.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
@@ -14,43 +14,43 @@ import { d as defineCustomElement$L } from './p-yD_3Z3K1.js';
 import { d as defineCustomElement$K } from './p-DXcjIb_a.js';
 import { d as defineCustomElement$I } from './p-BYO6pz8T.js';
 import { d as defineCustomElement$H } from './p-oGAPPwAL.js';
-import { d as defineCustomElement$G } from './p-zd7zXld8.js';
-import { d as defineCustomElement$F } from './p-1nG2hxfJ.js';
+import { d as defineCustomElement$G } from './p-CMZ09rB1.js';
+import { d as defineCustomElement$F } from './p-9m1cAVwG.js';
 import { d as defineCustomElement$E } from './p-BxpKq94F.js';
-import { d as defineCustomElement$D } from './p-DkH3hoLz.js';
+import { d as defineCustomElement$D } from './p-8ScektIm.js';
 import { d as defineCustomElement$C } from './p-BO9BvTtK.js';
 import { d as defineCustomElement$B } from './p-BU-FZuj0.js';
 import { d as defineCustomElement$A } from './p-Cm33td2O.js';
 import { d as defineCustomElement$z } from './p-DX2nriaq.js';
 import { d as defineCustomElement$y } from './p-Df3BwVGy.js';
-import { d as defineCustomElement$w } from './p-COjsYPir.js';
+import { d as defineCustomElement$w } from './p-dVfh-Sy9.js';
 import { d as defineCustomElement$v } from './p-DgnK50xO.js';
 import { d as defineCustomElement$u } from './p-djJSnjAX.js';
 import { d as defineCustomElement$t } from './p-8xkoVMfO.js';
 import { d as defineCustomElement$r } from './p-DSOc0eIT.js';
 import { d as defineCustomElement$q } from './p-CXpv9Rxe.js';
-import { d as defineCustomElement$p } from './p-BVEGQLBD.js';
-import { d as defineCustomElement$o } from './p-7Rt7ml3v.js';
+import { d as defineCustomElement$p } from './p-CoY7emAj.js';
+import { d as defineCustomElement$o } from './p-Cj0NElII.js';
 import { d as defineCustomElement$n } from './p-CVhcOiEA.js';
-import { d as defineCustomElement$l, a as defineCustomElement$m } from './p-BKOsmXB5.js';
-import { d as defineCustomElement$k } from './p-DkY7pIg5.js';
+import { d as defineCustomElement$l, a as defineCustomElement$m } from './p-BqWiEmYI.js';
+import { d as defineCustomElement$k } from './p-BRGufCki.js';
 import { d as defineCustomElement$j } from './p-pagW8YF7.js';
 import { d as defineCustomElement$i } from './p-DIMNEOTW.js';
 import { d as defineCustomElement$h } from './p-BzrxIesp.js';
 import { d as defineCustomElement$g } from './p-D09kgc5Q.js';
-import { d as defineCustomElement$f } from './p-BLOPBDUF.js';
-import { d as defineCustomElement$e } from './p-D0oplzU-.js';
+import { d as defineCustomElement$f } from './p-C2CeSrTm.js';
+import { d as defineCustomElement$e } from './p-D7H8oxZb.js';
 import { d as defineCustomElement$d } from './p-BFYtCsZu.js';
-import { d as defineCustomElement$c } from './p-BMRln59F.js';
+import { d as defineCustomElement$c } from './p-DW7WW4EN.js';
 import { d as defineCustomElement$b } from './p-BzJEwFtn.js';
-import { d as defineCustomElement$a } from './p-D8TOEhPY.js';
-import { d as defineCustomElement$9 } from './p-Bm_BWQa4.js';
+import { d as defineCustomElement$a } from './p-DuVkk58V.js';
+import { d as defineCustomElement$9 } from './p-Ckm1Aq0V.js';
 import { d as defineCustomElement$8 } from './p-CM1duewg.js';
-import { d as defineCustomElement$7 } from './p-BZxOukfY.js';
+import { d as defineCustomElement$7 } from './p-Cr2z2UBL.js';
 import { d as defineCustomElement$6 } from './p-DrQRChp3.js';
-import { d as defineCustomElement$5 } from './p-DwY5pghH.js';
-import { d as defineCustomElement$3 } from './p-DDbO5q-e.js';
-import { d as defineCustomElement$2 } from './p-OLfoATNk.js';
+import { d as defineCustomElement$5 } from './p-6rQICkGr.js';
+import { d as defineCustomElement$3 } from './p-CXJZxJvp.js';
+import { d as defineCustomElement$2 } from './p-U9FjWrp-.js';
 
 /**
  * Common Math expressions.
@@ -2856,6 +2856,28 @@ class HocuspocusProvider extends EventEmitter {
     }
 }
 
+/**
+ * Returns the provider type (`'local'` or `'network'`) for a given provider config entry.
+ * Works for both class constructors (via a static `type` property) and
+ * factory objects (via an optional `type` property on the factory).
+ */
+function getProviderConfigType(config) {
+    if (typeof config === 'function') {
+        return config.type;
+    }
+    return config.type;
+}
+/**
+ * Returns `true` when the given sync configuration contains at least one remote
+ * (network) provider, meaning the share option should be available in the UI.
+ */
+function hasRemoteSyncProvider(syncConfig) {
+    if (!syncConfig?.providers?.length) {
+        return false;
+    }
+    return syncConfig.providers.some(p => getProviderConfigType(p) === 'network');
+}
+
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
     color: DEFAULT_COLOR_PALETTE[0],
@@ -3032,6 +3054,19 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
             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',
@@ -3073,16 +3108,43 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
                 },
             ],
         },
+        { 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';
@@ -3154,6 +3216,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     isNotificationDismissing = false;
     contextMenuState;
     normalizedControls = [];
+    resolvedMoreMenuItems = [];
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -3196,6 +3259,18 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     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) {
@@ -3245,6 +3320,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         }
         this.resolvedTerms = await this.engineRef.getResolvedTerms();
         this.availableLocaleOptions = await this.engineRef.getAvailableLocaleOptions();
+        this.recomputeMoreMenuItems();
     }
     onTouchStart(event) {
         if (event.cancelable) {
@@ -3405,11 +3481,14 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     async exportViewportAsSvg(options) {
         return this.engineRef.exportViewportAsSvg(options);
     }
-    async exportSelectedObjectsAsPng() {
-        return this.engineRef.exportSelectedObjectsAsPng();
+    async getSelectedObjectSupportedExportFormats() {
+        return this.engineRef.getSelectedObjectSupportedExportFormats();
     }
-    async exportSelectedObjectsAsSvg() {
-        return this.engineRef.exportSelectedObjectsAsSvg();
+    async canExportSelectedObjectAs(format) {
+        return this.engineRef.canExportSelectedObjectAs(format);
+    }
+    async exportSelectedObject(format) {
+        return this.engineRef.exportSelectedObject(format);
     }
     async downloadAsJson(filename) {
         return this.engineRef.downloadAsJson(filename);
@@ -3476,6 +3555,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     currentUserDialogRef;
     componentWillLoad() {
         this.normalizedControls = this.normalizeControls(this.controls);
+        this.recomputeMoreMenuItems();
         this.loadSettingsFromStorage();
         this.applyTheme();
     }
@@ -3496,13 +3576,18 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
             };
         });
     }
+    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();
@@ -3537,7 +3622,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
             syncConfig: this.syncConfig,
             assetStorageConfig: this.assetStorageConfig,
             loginConfig: this.loginConfig,
-            theme: this.theme
+            theme: this.theme,
         });
     }
     async onEngineReady(event) {
@@ -3700,43 +3785,6 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         }
         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();
@@ -3766,6 +3814,28 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     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();
     }
@@ -3942,41 +4012,41 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         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: '3119d6909544f0d15bd805f65ccf3f18469dc11d' }, h("div", { key: '7528eec8df968cd7814a2343fa3aa792802b9856', 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: '71f0dba52cddc6e28ea7f7b3b6ff78c32aa19acf', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '579826701b13fb4b12dbdbf0b31b05031f01c3d1', 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: '84fb52fba5f898cf1034780f87f7ce49d370cdfe', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'ecca20769db06f56bd52199b04f9e44c74bf525d', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'aa2232646d7d77d70af04c8b413e2eb8033a00eb', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fa111382e6fdebf8e5944c6148cad9583bc8b68d', 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: '420caf2b6bfb79f3ebda3537cc379f8735eb8c09', 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-engine", { key: 'd10589d02c626712e10f55b07f716907d83b28c1', 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) }), h("kritzel-controls", { key: '121480e948808fe6a44a94511becb834f9249897', 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: 'e84f31858a6a45fb9f7bcc3686122b349551618b', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'a25d93767a124e1a2fdcdd4b77706ec7d032234c', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '49810743d464d4e019670859f6ed31d9c12cd560', class: "top-right-buttons" }, h("kritzel-settings", { key: '57daff63b4ec1de36f94be99948d0d0aa091c522', 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: 'cad9614f0e439713e96108476ed3c400c14546cc', 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: '191775e6c3f62391e4c62cb8039ace51b4853555', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '385264c0ebb74eb1c3e3793ad889b8bd84ec1920', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '065b583dd31019fe88739171089414123af7d640', 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: 'b655001273147d58f299983c9512d10ee16847a1', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '265cd05a2e62fb3a16beae85a82a81e69410f284', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '0c441b88aab039e4f9eb86d226670732f0635446', 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: '3e06e1b33c3dc98cfa8f76641acdb5a3ea51c1d5', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -4001,6 +4071,18 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "controls": [{
                 "onControlsChange": 0
             }],
+        "moreMenuItems": [{
+                "onMoreMenuItemsChange": 0
+            }],
+        "syncConfig": [{
+                "onSyncConfigChange": 0
+            }],
+        "loginConfig": [{
+                "onLoginConfigChange": 0
+            }],
+        "user": [{
+                "onUserChange": 0
+            }],
         "activeWorkspaceId": [{
                 "onActiveWorkspaceIdChange": 0
             }],
@@ -4029,6 +4111,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "controls": [16],
         "globalContextMenuItems": [16],
         "objectContextMenuItems": [16],
+        "moreMenuItems": [16],
         "themes": [16],
         "theme": [1025],
         "licenseKey": [1, "license-key"],
@@ -4070,6 +4153,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "isNotificationDismissing": [32],
         "contextMenuState": [32],
         "normalizedControls": [32],
+        "resolvedMoreMenuItems": [32],
         "getObjectById": [64],
         "addObject": [64],
         "addObjects": [64],
@@ -4121,8 +4205,9 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "getScreenshot": [64],
         "exportViewportAsPng": [64],
         "exportViewportAsSvg": [64],
-        "exportSelectedObjectsAsPng": [64],
-        "exportSelectedObjectsAsSvg": [64],
+        "getSelectedObjectSupportedExportFormats": [64],
+        "canExportSelectedObjectAs": [64],
+        "exportSelectedObject": [64],
         "downloadAsJson": [64],
         "importFromFile": [64],
         "loadObjectsFromJson": [64],
@@ -4164,6 +4249,18 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "controls": [{
                 "onControlsChange": 0
             }],
+        "moreMenuItems": [{
+                "onMoreMenuItemsChange": 0
+            }],
+        "syncConfig": [{
+                "onSyncConfigChange": 0
+            }],
+        "loginConfig": [{
+                "onLoginConfigChange": 0
+            }],
+        "user": [{
+                "onUserChange": 0
+            }],
         "activeWorkspaceId": [{
                 "onActiveWorkspaceIdChange": 0
             }],
@@ -4424,4 +4521,4 @@ function defineCustomElement$1() {
 const KritzelEditor = KritzelEditor$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { DEFAULT_BRUSH_CONFIG as D, HocuspocusProvider as H, KritzelEditor, HocuspocusProviderWebsocket as a, DEFAULT_TEXT_CONFIG as b, DEFAULT_LINE_TOOL_CONFIG as c, DEFAULT_ASSET_STORAGE_CONFIG as d, defineCustomElement };
+export { DEFAULT_BRUSH_CONFIG as D, HocuspocusProvider as H, KritzelEditor, HocuspocusProviderWebsocket as a, DEFAULT_TEXT_CONFIG as b, DEFAULT_LINE_TOOL_CONFIG as c, DEFAULT_ASSET_STORAGE_CONFIG as d, defineCustomElement, hasRemoteSyncProvider as h };

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-C2yi85nc.js';
+import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-ZPPtEla5.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-export.js

@@ -1,4 +1,4 @@
-import { K as KritzelExport$1, d as defineCustomElement$1 } from './p-COjsYPir.js';
+import { K as KritzelExport$1, d as defineCustomElement$1 } from './p-dVfh-Sy9.js';
 
 const KritzelExport = KritzelExport$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-loading-overlay.js

@@ -1,4 +1,4 @@
-import { K as KritzelLoadingOverlay$1, d as defineCustomElement$1 } from './p-BVEGQLBD.js';
+import { K as KritzelLoadingOverlay$1, d as defineCustomElement$1 } from './p-CoY7emAj.js';
 
 const KritzelLoadingOverlay = KritzelLoadingOverlay$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-login-dialog.js

@@ -1,4 +1,4 @@
-import { K as KritzelLoginDialog$1, d as defineCustomElement$1 } from './p-7Rt7ml3v.js';
+import { K as KritzelLoginDialog$1, d as defineCustomElement$1 } from './p-Cj0NElII.js';
 
 const KritzelLoginDialog = KritzelLoginDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu-item.js

@@ -1,4 +1,4 @@
-import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-BKOsmXB5.js';
+import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-BqWiEmYI.js';
 
 const KritzelMenuItem = KritzelMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-BKOsmXB5.js';
+import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-BqWiEmYI.js';
 
 const KritzelMenu = KritzelMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-more-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelMoreMenu$1, d as defineCustomElement$1 } from './p-DkY7pIg5.js';
+import { K as KritzelMoreMenu$1, d as defineCustomElement$1 } from './p-BRGufCki.js';
 
 const KritzelMoreMenu = KritzelMoreMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-portal.js

@@ -1,4 +1,4 @@
-import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-BLOPBDUF.js';
+import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-C2CeSrTm.js';
 
 const KritzelPortal = KritzelPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-settings.js

@@ -1,4 +1,4 @@
-import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-D0oplzU-.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-D7H8oxZb.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-share-dialog.js

@@ -1,4 +1,4 @@
-import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-BMRln59F.js';
+import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-DW7WW4EN.js';
 
 const KritzelShareDialog = KritzelShareDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-split-button.js

@@ -1,4 +1,4 @@
-import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-D8TOEhPY.js';
+import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-DuVkk58V.js';
 
 const KritzelSplitButton = KritzelSplitButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-stroke-size.js

@@ -1,4 +1,4 @@
-import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-Bm_BWQa4.js';
+import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-Ckm1Aq0V.js';
 
 const KritzelStrokeSize = KritzelStrokeSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tool-config.js

@@ -1,4 +1,4 @@
-import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-BZxOukfY.js';
+import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-Cr2z2UBL.js';
 
 const KritzelToolConfig = KritzelToolConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-utility-panel.js

@@ -1,4 +1,4 @@
-import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-DwY5pghH.js';
+import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-6rQICkGr.js';
 
 const KritzelUtilityPanel = KritzelUtilityPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-workspace-manager.js

@@ -1,4 +1,4 @@
-import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-DDbO5q-e.js';
+import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-CXJZxJvp.js';
 
 const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-zoom-panel.js

@@ -1,4 +1,4 @@
-import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-OLfoATNk.js';
+import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-U9FjWrp-.js';
 
 const KritzelZoomPanel = KritzelZoomPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-DwY5pghH.js → p-6rQICkGr.js}

@@ -33,7 +33,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '3e86e2c4c480ab56f4646a4f288ad37a63e29642' }, h("button", { key: 'e5282e42994f2de061ec36bf892f4da3fc01d2e5', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '5a2b903cc3e5f9c554928f11a1c3098d569cbc4d', name: "undo" })), h("button", { key: '466cdff71501f34f0236b4dc60263817966d7b4a', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '19209a95787f4475eda9dc0712c2bf36a573c953', name: "redo" })), h("div", { key: '7a463d5ac1f78017fb728abcd2c33061d8545978', class: "utility-separator" }), h("button", { key: '155c2bb50d70223e4f4d5377bacced56ffda68ad', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '47bd8469b9efe395e9185b3e7375c7375811c0aa', name: "delete" }))));
+        return (h(Host, { key: '001ee010d714513a4b5027f84cac4586c64e2260' }, h("button", { key: '6ba6cbf100e2ad9f81de6416b85f981cd1467f1c', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: 'b246d3964623e57e9458e5f0266a2f9e0565c646', name: "undo" })), h("button", { key: '1f5015fbd2fd84508bc8b8f295d35960bf31af5b', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'b3694d884707c6844a0036610990cdcfa74c6931', name: "redo" })), h("div", { key: '4f8f4725213d1453af11dc3b4c9ff271f1933df5', class: "utility-separator" }), h("button", { key: '5eba2c56dd96698538a48a8ea9f32fcf8b4d8402', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '268a186e4e7eaa1ea874ef23e72df511f86b0343', name: "delete" }))));
     }
     static get style() { return kritzelUtilityPanelCss(); }
 }, [513, "kritzel-utility-panel", {