kritzel-stencil 0.4.8 → 0.4.10

package/dist/components/kritzel-editor.js

@@ -1,56 +1,56 @@
 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-D8bHNNEm.js';
-import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-CURiiQfq.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-C6e7eOEb.js';
+import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-7I4Uzjrw.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 { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$4 } from './p-DtnMdWWB.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-0H4HOJjy.js';
+import { O as ObjectHelper } from './p-DPONTran.js';
+import { d as defineCustomElement$J } from './p-bAacqNHq.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
-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-CMZ09rB1.js';
-import { d as defineCustomElement$F } from './p-9m1cAVwG.js';
+import { d as defineCustomElement$L } from './p-DBqoPgev.js';
+import { d as defineCustomElement$K } from './p-4SPnZZkH.js';
+import { d as defineCustomElement$I } from './p-CZ99VWQc.js';
+import { d as defineCustomElement$H } from './p-BoN700-O.js';
+import { d as defineCustomElement$G } from './p-Dt7-I2Xz.js';
+import { d as defineCustomElement$F } from './p-B-585egz.js';
 import { d as defineCustomElement$E } from './p-BxpKq94F.js';
-import { d as defineCustomElement$D } from './p-BknTMcbz.js';
-import { d as defineCustomElement$C } from './p-BO9BvTtK.js';
-import { d as defineCustomElement$B } from './p-BU-FZuj0.js';
+import { d as defineCustomElement$D } from './p-COylwYw1.js';
+import { d as defineCustomElement$C } from './p-DwMqCX2P.js';
+import { d as defineCustomElement$B } from './p-vqEUQ-4Q.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$v } from './p-DgnK50xO.js';
+import { d as defineCustomElement$w } from './p-BP6Fo3rt.js';
+import { d as defineCustomElement$v } from './p-DVXTPI71.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$t } from './p-2WiGyky4.js';
+import { d as defineCustomElement$r } from './p-PjPPCHVL.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$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$p } from './p-DB58Oa5V.js';
+import { d as defineCustomElement$o } from './p-Dv4pZx8G.js';
+import { d as defineCustomElement$n } from './p-CM65T33m.js';
+import { d as defineCustomElement$l, a as defineCustomElement$m } from './p-D-UkGru5.js';
+import { d as defineCustomElement$k } from './p-BX1aRLEi.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$i } from './p-DKGg-76-.js';
+import { d as defineCustomElement$h } from './p-CrHvaLRV.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-DgA865Tp.js';
+import { d as defineCustomElement$f } from './p-BPsKYMH6.js';
+import { d as defineCustomElement$e } from './p-DdabFzSa.js';
 import { d as defineCustomElement$d } from './p-BFYtCsZu.js';
-import { d as defineCustomElement$c } from './p-BMRln59F.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-Ckm1Aq0V.js';
-import { d as defineCustomElement$8 } from './p-CM1duewg.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$c } from './p-B_lZQo3s.js';
+import { d as defineCustomElement$b } from './p-BozrueXV.js';
+import { d as defineCustomElement$a } from './p-30g2W_Gx.js';
+import { d as defineCustomElement$9 } from './p-GKmqCI8r.js';
+import { d as defineCustomElement$8 } from './p-CAoN_STZ.js';
+import { d as defineCustomElement$7 } from './p-Dy3uucl_.js';
+import { d as defineCustomElement$6 } from './p-CaBbajU2.js';
+import { d as defineCustomElement$5 } from './p-Bvv1pGFD.js';
+import { d as defineCustomElement$3 } from './p-x3z0Cz1B.js';
+import { d as defineCustomElement$2 } from './p-ShJrZeyt.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,9 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     isNotificationDismissing = false;
     contextMenuState;
     normalizedControls = [];
+    resolvedMoreMenuItems = [];
+    isSyncing = false;
+    isLoadingOverlayVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -3196,6 +3261,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 +3322,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 +3483,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 +3557,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 +3578,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 +3624,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 +3787,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 +3816,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 +4014,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: '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;
                 }
@@ -4001,6 +4073,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 +4113,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 +4155,9 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "isNotificationDismissing": [32],
         "contextMenuState": [32],
         "normalizedControls": [32],
+        "resolvedMoreMenuItems": [32],
+        "isSyncing": [32],
+        "isLoadingOverlayVisible": [32],
         "getObjectById": [64],
         "addObject": [64],
         "addObjects": [64],
@@ -4121,8 +4209,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 +4253,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 +4525,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-D8bHNNEm.js';
+import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-C6e7eOEb.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-BP6Fo3rt.js';
 
 const KritzelExport = KritzelExport$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-8xkoVMfO.js';
+import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-2WiGyky4.js';
 
 const KritzelFontSize = KritzelFontSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-font.js

@@ -1,4 +1,4 @@
-import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DgnK50xO.js';
+import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DVXTPI71.js';
 
 const KritzelFont = KritzelFont$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-input.js

@@ -1,4 +1,4 @@
-import { K as KritzelInput$1, d as defineCustomElement$1 } from './p-DSOc0eIT.js';
+import { K as KritzelInput$1, d as defineCustomElement$1 } from './p-PjPPCHVL.js';
 
 const KritzelInput = KritzelInput$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-DB58Oa5V.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-Dv4pZx8G.js';
 
 const KritzelLoginDialog = KritzelLoginDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-master-detail.js

@@ -1,4 +1,4 @@
-import { K as KritzelMasterDetail$1, d as defineCustomElement$1 } from './p-CVhcOiEA.js';
+import { K as KritzelMasterDetail$1, d as defineCustomElement$1 } from './p-CM65T33m.js';
 
 const KritzelMasterDetail = KritzelMasterDetail$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-D-UkGru5.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-D-UkGru5.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-BX1aRLEi.js';
 
 const KritzelMoreMenu = KritzelMoreMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-numeric-input.js

@@ -1,4 +1,4 @@
-import { K as KritzelNumericInput$1, d as defineCustomElement$1 } from './p-DIMNEOTW.js';
+import { K as KritzelNumericInput$1, d as defineCustomElement$1 } from './p-DKGg-76-.js';
 
 const KritzelNumericInput = KritzelNumericInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-opacity-slider.js

@@ -1,4 +1,4 @@
-import { K as KritzelOpacitySlider$1, d as defineCustomElement$1 } from './p-BzrxIesp.js';
+import { K as KritzelOpacitySlider$1, d as defineCustomElement$1 } from './p-CrHvaLRV.js';
 
 const KritzelOpacitySlider = KritzelOpacitySlider$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-BPsKYMH6.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-DgA865Tp.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-DdabFzSa.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-B_lZQo3s.js';
 
 const KritzelShareDialog = KritzelShareDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-slide-toggle.js

@@ -1,4 +1,4 @@
-import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-BzJEwFtn.js';
+import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-BozrueXV.js';
 
 const KritzelSlideToggle = KritzelSlideToggle$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-30g2W_Gx.js';
 
 const KritzelSplitButton = KritzelSplitButton$1;
 const defineCustomElement = defineCustomElement$1;