kritzel-stencil 0.4.24 → 0.4.25

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

@@ -266,6 +266,7 @@ export class KritzelEditor {
     login;
     isPublicChange;
     awarenessChange;
+    isSyncing;
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -287,8 +288,8 @@ export class KritzelEditor {
     contextMenuState;
     normalizedControls = [];
     resolvedMoreMenuItems = [];
-    isSyncing = false;
     isLoadingOverlayVisible = false;
+    isSyncingIndicatorVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -771,6 +772,11 @@ export class KritzelEditor {
         event.stopPropagation();
         this.awarenessChange.emit(event.detail);
     }
+    handleIsSyncingChange(event) {
+        event.stopPropagation();
+        this.isSyncingIndicatorVisible = event.detail;
+        this.isSyncing.emit(event.detail);
+    }
     handleNotificationsChange(event) {
         event.stopPropagation();
         this.clearNotificationDismissAnimationTimer();
@@ -1084,40 +1090,40 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'b7b9b3cd6a81c4a7b8aa9730259377c8448336ba' }, h("div", { key: '7714490de58839fffb5a20d355a942dbb4d62409', class: "editor-content", style: {
+        return (h(Host, { key: 'a24350a0c12d99ccb0d0ec3ab5975d0f1bf7f861' }, h("div", { key: 'bd7029567aeef8cba5290c2bf9937db1af113475', 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: '0e9c1c786beacd19e8ef5a6e519e47efe7bf35f6', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'cd85c3bf1f6b281057d7538cb5d192b8826bc9ee', 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: 'ea0065152125ca3318da9e6fc4c372ae4b71e053', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'efde12cf6ed5fe19b651862ef7a123edacfc1e30', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '3bffe023e9119868ad18a52690272adb073ee3b0', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fcf62343eb401093ae6bfa1298f76d25d48eb0e4', 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: '9de9892adaaf4c123d4636393ccfa13a48730b17', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, h("div", { key: 'f628dbd94d88c9bdb313a59d73ce86302c90e375', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '5a82d054da31e47d3f8b5c6c403949a5fb97b9dd', 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: 'a5bccef36c8a49ef2cb7ec029def1c7ba71d1c31', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'c5c359b199528dd7b1b64a6a32ef349037357c5a', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'a41cd6c67c56626c2b6f0eb12193af1f80d6a254', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fb49769368ddf0fc74998a96dd26dc446ff2b386', 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: '56f38790f477d08761d7542ed3794c52f1f73815', 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-sync-indicator", { key: 'b0369b8006e4df5b7b395487de085faf11a59ed7', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '4509e6fca3da8a8b1a5ac1e82581cfa136ab9913', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'ec14d7f4f12dcf08c036a60b3ccc15a9fc558bd7', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-sync-indicator", { key: '4957b8bae0d7087d586c9d0c6da82cae905d7d08', visible: this.isSyncingIndicatorVisible, text: "Syncing..." }), h("kritzel-loading-overlay", { key: 'e2e99dc452245a2edf7a575ea5fb60aa91be20df', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'fcebe1cc1237c8649461f03679f9c76c05dde9c4', 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), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '59413042ba6aff8e972d51e4a04a44893b3a4b97', 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), onIsSyncing: event => this.handleIsSyncingChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '72b1a3f80bfedb3843d0d54159ad47793db69977', 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: '4cde7726bc85e97c20687f43673689c6e1825dbd', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '8b7bd923d0086548325f8c38d0a1c16bb0335ed0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'c445b1efd03ed38e1b75361cd95cdef90f789825', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c7b555a2a35833c362271006089a2632bd5db4f8', 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: '1684a320f1806ae9fdfcfcff115d01f5788737e7', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '8e85652ded70df043d79c9cd73b226aaefa5d6d4', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a836056bdae11324f4ce79da4b991281c1985358', class: "top-right-buttons" }, h("kritzel-settings", { key: 'e68f4e79bc053e03dc37c18ee153758d284b0d34', 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: '9789c32789c70d817ca894fceee74610c494eede', 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: 'f1e9ea467d11b55dbe75d8b0252fd7f5ed37a1a2', 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: '010d5137a3204b5f90ecbfb10c06e4823c0acec3', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '65b04f1d7912cf03baabe5bed8e37db8aaf4fe17', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'ffceb4a511e1f51a193d8a3ee9c331d4aa5c270b', 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: '01bb56bd37bc22e82be5a1175f597cdf724c4834', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '5470ef356a4d6332b380e8c75f02f0fccbe861cc', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '229551b18f0443944a96f7b8e833ff1aefb001f4', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '789427d5e7af880420830f69ec292d5a78831fde', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '053f004ac79f7fa7413238dcd4276f75cb47ce74', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '60f608263145323645f3b292243b63243676680b', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '3d9a8ebbe62084e94348265f1f883bc80e625d9c', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '9f7f763c330b27068bc371d98eb22a80adbf359e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'c60b860e22394a44270285dea45f02305a05c545', 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: '94e8ccb8da10cc8bfe6bb3debe21af40a47aeea7', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '84d0fab11722a7be1d5824b3284f000502277dfc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1299,7 +1305,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    showViewportInfo: false,\r\n    showObjectInfo: false,\r\n    showSyncProviderInfo: true,\r\n    showMigrationInfo: true,\r\n    showAssetResolverInfo: false,\r\n  }"
+                "defaultValue": "{\n    showViewportInfo: false,\n    showObjectInfo: false,\n    showSyncProviderInfo: true,\n    showMigrationInfo: true,\n    showAssetResolverInfo: false,\n  }"
             },
             "user": {
                 "type": "unknown",
@@ -1372,7 +1378,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      isDefault: true,\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'line',\r\n      type: 'tool',\r\n      tool: KritzelLineTool,\r\n      icon: 'arrow',\r\n      config: DEFAULT_LINE_TOOL_CONFIG,\r\n    },\r\n    {\r\n      name: 'shape',\r\n      type: 'tool',\r\n      tool: KritzelShapeTool,\r\n      icon: 'shape-rectangle',\r\n      config: DEFAULT_SHAPE_CONFIG,\r\n      subOptions: [\r\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\r\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\r\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\r\n      ],\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      name: 'selection',\n      type: 'tool',\n      isDefault: true,\n      tool: KritzelSelectionTool,\n      icon: 'cursor',\n    },\n    {\n      name: 'brush',\n      type: 'tool',\n      tool: KritzelBrushTool,\n      icon: 'pen',\n      config: DEFAULT_BRUSH_CONFIG,\n    },\n    {\n      name: 'eraser',\n      type: 'tool',\n      tool: KritzelEraserTool,\n      icon: 'eraser',\n    },\n    {\n      name: 'line',\n      type: 'tool',\n      tool: KritzelLineTool,\n      icon: 'arrow',\n      config: DEFAULT_LINE_TOOL_CONFIG,\n    },\n    {\n      name: 'shape',\n      type: 'tool',\n      tool: KritzelShapeTool,\n      icon: 'shape-rectangle',\n      config: DEFAULT_SHAPE_CONFIG,\n      subOptions: [\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\n      ],\n    },\n    {\n      name: 'text',\n      type: 'tool',\n      tool: KritzelTextTool,\n      icon: 'type',\n      config: DEFAULT_TEXT_CONFIG,\n    },\n    {\n      name: 'image',\n      type: 'tool',\n      tool: KritzelImageTool,\n      icon: 'image',\n    },\n    {\n      name: 'config',\n      type: 'config',\n    },\n  ]"
             },
             "globalContextMenuItems": {
                 "type": "unknown",
@@ -1397,7 +1403,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      label: 'menu.paste',\r\n      icon: 'paste',\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'menu.selectAll',\r\n      icon: 'select-all',\r\n      action: () => this.selectAllObjectsInViewport(),\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.selectAll',\n      icon: 'select-all',\n      action: () => this.selectAllObjectsInViewport(),\n    },\n  ]"
             },
             "objectContextMenuItems": {
                 "type": "unknown",
@@ -1422,7 +1428,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\r\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\r\n    {\r\n      label: 'menu.paste',\r\n      icon: 'paste',\r\n      group: 'clipboard',\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'menu.export',\r\n      icon: 'upload',\r\n      group: 'clipboard',\r\n      visible: (_, objects) => this.canExportObjects(objects),\r\n      action: (_, objects) => {\r\n        const format = this.getPreferredExportFormat(objects);\r\n        if (!format) {\r\n          return;\r\n        }\r\n\r\n        void this.engineRef.exportSelectedObject(format);\r\n      },\r\n    },\r\n    {\r\n      label: 'menu.order',\r\n      icon: 'ordering',\r\n      group: 'other',\r\n      children: [\r\n        { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n        { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n        { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\r\n        { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\r\n      ],\r\n    },\r\n    {\r\n      label: 'menu.align',\r\n      icon: 'align',\r\n      group: 'other',\r\n      children: [\r\n        { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\r\n        { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\r\n        { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\r\n        { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\r\n        { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\r\n        { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\r\n      ],\r\n    },\r\n    {\r\n      label: 'menu.group',\r\n      icon: 'group',\r\n      group: 'other',\r\n      children: [\r\n        {\r\n          label: 'menu.group',\r\n          icon: 'group',\r\n          action: () => this.engineRef.group(),\r\n        },\r\n        {\r\n          label: 'menu.ungroup',\r\n          icon: 'ungroup',\r\n          action: () => this.engineRef.ungroup(),\r\n        },\r\n      ],\r\n    },\r\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\r\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",
@@ -1447,7 +1453,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      id: 'share',\r\n      label: 'menu.share',\r\n      icon: 'share',\r\n      isVisible: async () => hasRemoteSyncProvider(this.syncConfig),\r\n      action: () => {\r\n        if (!this.isLoggedIn && this.loginConfig) {\r\n          this.openLoginDialog();\r\n          return;\r\n        }\r\n        this.shareDialogRef.open();\r\n      },\r\n    },\r\n    {\r\n      id: 'export',\r\n      label: 'menu.export',\r\n      icon: 'upload',\r\n      action: async () => {\r\n        const preview = await this.engineRef.getScreenshot('png');\r\n        this.exportRef.open(preview ?? undefined);\r\n      },\r\n    },\r\n    {\r\n      id: 'import',\r\n      label: 'menu.import',\r\n      icon: 'download',\r\n      action: () => this.engineRef.importFromFile(),\r\n    },\r\n    {\r\n      id: 'settings',\r\n      label: 'menu.settings',\r\n      icon: 'settings',\r\n      action: () => this.settingsRef.open(),\r\n    },\r\n  ]"
+                "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",
@@ -1639,7 +1645,7 @@ export class KritzelEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Registers fonts for runtime usage (for example custom object rendering).\r\nText-tool config tooltip options are controlled via controls[].config.availableFonts."
+                    "text": "Registers fonts for runtime usage (for example custom object rendering).\nText-tool config tooltip options are controlled via controls[].config.availableFonts."
                 },
                 "getter": false,
                 "setter": false,
@@ -1828,7 +1834,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1853,7 +1859,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -1982,8 +1988,8 @@ export class KritzelEditor {
             "contextMenuState": {},
             "normalizedControls": {},
             "resolvedMoreMenuItems": {},
-            "isSyncing": {},
-            "isLoadingOverlayVisible": {}
+            "isLoadingOverlayVisible": {},
+            "isSyncingIndicatorVisible": {}
         };
     }
     static get events() {
@@ -2290,6 +2296,21 @@ export class KritzelEditor {
                         }
                     }
                 }
+            }, {
+                "method": "isSyncing",
+                "name": "isSyncing",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -4148,7 +4169,7 @@ export class KritzelEditor {
                             "text": "fonts - Mapping from font keys to family names or font definitions."
                         }, {
                             "name": "remarks",
-                            "text": "This no longer controls the text-tool config tooltip font options.\r\nConfigure tooltip fonts via controls[].config.availableFonts."
+                            "text": "This no longer controls the text-tool config tooltip font options.\nConfigure tooltip fonts via controls[].config.availableFonts."
                         }]
                 }
             },

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

@@ -1,81 +1,81 @@
-:host {
-  display: block;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  isolation: isolate;
-  background-color: var(--kritzel-engine-background-color, #ffffff);
-}
-
-:host,
-:host * {
-  touch-action: none;
-  user-select: none;
-}
-
-.ProseMirror {
-  outline: none;
-}
-
-p, h1, h2, h3, h4, h5, h6, blockquote, pre {
-  margin: 0;
-  padding: 0;
-}
-
-.debug-panel {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  right: 0;
-}
-
-.origin {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 0;
-  width: 0;
-  pointer-events: none;
-  -webkit-transform-origin: top left;
-  -moz-transform-origin: top left;
-  transform-origin: top left;
-  overflow: visible;
-}
-
-.object {
-  overflow: visible;
-}
-
-.kritzel-image-object--first-reveal {
-  animation: kritzel-image-first-reveal 180ms ease-out both;
-  will-change: filter;
-}
-
-@keyframes kritzel-image-first-reveal {
-  from {
-    filter: opacity(0);
-  }
-
-  to {
-    filter: opacity(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .kritzel-image-object--first-reveal {
-    animation: none;
-  }
-}
-
-.PlaygroundEditorTheme__quote {
-  margin: 0;
-  margin-left: 20px;
-  margin-bottom: 10px;
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
-  border-left-width: 4px;
-  border-left-style: solid;
-  padding-left: 16px;
+:host {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  isolation: isolate;
+  background-color: var(--kritzel-engine-background-color, #ffffff);
+}
+
+:host,
+:host * {
+  touch-action: none;
+  user-select: none;
+}
+
+.ProseMirror {
+  outline: none;
+}
+
+p, h1, h2, h3, h4, h5, h6, blockquote, pre {
+  margin: 0;
+  padding: 0;
+}
+
+.debug-panel {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+}
+
+.origin {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  transform-origin: top left;
+  overflow: visible;
+}
+
+.object {
+  overflow: visible;
+}
+
+.kritzel-image-object--first-reveal {
+  animation: kritzel-image-first-reveal 180ms ease-out both;
+  will-change: filter;
+}
+
+@keyframes kritzel-image-first-reveal {
+  from {
+    filter: opacity(0);
+  }
+
+  to {
+    filter: opacity(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kritzel-image-object--first-reveal {
+    animation: none;
+  }
+}
+
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
 }