kritzel-stencil 0.4.24 → 0.4.26

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

@@ -287,7 +287,6 @@ export class KritzelEditor {
     contextMenuState;
     normalizedControls = [];
     resolvedMoreMenuItems = [];
-    isSyncing = false;
     isLoadingOverlayVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
@@ -1084,40 +1083,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: '10d7810f2db00207f1f024727fb3957dce6496c5' }, h("div", { key: 'f1bced369a6e820d17c89b6e8cdd8f09fc7e084f', 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: '42d177987e4d14de10ebb45d673f750022c7d944', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'be583a237b378e0eeb14756fcb0bd9a733b51020', 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: '5713455fd09512085e5048ab3da35499d48c9bbc', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '41c3fbd197ccca774bb87be7d003374bc548e46e', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '5634e4cfd0d6cb7accee59e7f239e3d758872202', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b1b2a90199b16e874a54a6435ebb4f873cc8a403', 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: '9b1d0f847171e177a2135454cab0c3761308c396', 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-loading-overlay", { key: '693536ad11dbc5080203902f0553d87b628704e9', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'd4dacd1803e63417c2d7d9dcd008345e947f2806', 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), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: 'f988a540cae6372b2259167956f81ecfae324bf1', 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: 'c9eca767869cb0504b18b480f14abb4ae9515e6a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '9a02ece644a46b9eaa1ce92245df2183bfe7bb5a', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a214d0c6039cfeeda9e4e015e83ca196e4b73b56', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c20518083d832267e85384d14adca6342fa82299', 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: '3306caba17bb638e5285c838539c7862e889dbbd', 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: '1aede3a116f502f017188153803c35e304592575', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8eaa1d59ca018d1b1190aa01c9fa3d2bd587de4c', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'c9a138c1411746654b3a2385c6c5c82b875cf88d', 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: '9a2900deb52b4d70f1612fb75c5baa9302412ebf', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '027d3c3d847bf975bc5c6f44e9ecf1b452c77bf9', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '461e239bd09abf63b85e6122b1b9f7425da23ec3', 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: '1e324fb764ab33047dba85eb34ae51418d081f2c', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1299,7 +1298,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 +1371,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 +1396,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 +1421,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 +1446,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 +1638,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 +1827,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1853,7 +1852,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -1982,7 +1981,6 @@ export class KritzelEditor {
             "contextMenuState": {},
             "normalizedControls": {},
             "resolvedMoreMenuItems": {},
-            "isSyncing": {},
             "isLoadingOverlayVisible": {}
         };
     }
@@ -4148,7 +4146,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;
 }