kritzel-stencil 0.4.20 → 0.4.21

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

@@ -1,161 +1,161 @@
-kritzel-editor{
-  display: flex;
-  margin: 0;
-  position: relative;
-  container-type: inline-size;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  touch-action: manipulation;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: start;
-  line-height: normal;
-}
-
-.editor-content {
-  position: absolute;
-  inset: 0;
-}
-
-.editor-content > kritzel-engine {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-
-kritzel-controls {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  right: 0;
-  margin-inline: auto;
-  width: max-content;
-  max-width: calc(100% - 16px);
-  bottom: var(--kritzel-editor-controls-bottom, 14px);
-  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
-}
-
-kritzel-controls.keyboard-open {
-  transform: var(--kritzel-editor-controls-transform, translateY(300%));
-}
-
-.top-left-buttons {
-  position: absolute;
-  z-index: 1;
-  top: var(--kritzel-editor-top-left-buttons-top, 14px);
-  left: var(--kritzel-editor-top-left-buttons-left, 14px);
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.top-center-notification-layer {
-  position: absolute;
-  top: var(--kritzel-editor-top-center-notification-top, 14px);
-  left: 0;
-  right: 0;
-  z-index: var(--kritzel-editor-top-center-notification-z-index, 10001);
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.top-center-notification-container {
-  width: min(90vw, 420px);
-  pointer-events: auto;
-  animation: kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
-    var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.top-center-notification-container.is-dismissing {
-  animation: kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)
-    var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards;
-}
-
-@keyframes kritzel-notification-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes kritzel-notification-fade-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .top-center-notification-container {
-    animation: none;
-  }
-}
-
-.top-right-buttons {
-  position: absolute;
-  z-index: 1;
-  top: var(--kritzel-editor-top-right-buttons-top, 14px);
-  right: var(--kritzel-editor-top-right-buttons-right, 14px);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.bottom-left-buttons {
-  position: absolute;
-  z-index: 1;
-  left: var(--kritzel-editor-top-left-buttons-left, 14px);
-  bottom: var(--kritzel-editor-controls-bottom, 14px);
-  display: flex;
-  align-items: flex-end;
-}
-
-/* Hide the zoom panel when the editor container is narrow. */
-@container (max-width: 767px) {
-  .bottom-left-buttons {
-    display: none;
-  }
-}
-
-.top-right-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  padding: 0;
-  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  transition: background-color 150ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.top-right-button:hover {
-  background-color: #f5f5f5;
-}
-
-.top-right-button:active {
-  background-color: #ebebeb;
+kritzel-editor{
+  display: flex;
+  margin: 0;
+  position: relative;
+  container-type: inline-size;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: start;
+  line-height: normal;
+}
+
+.editor-content {
+  position: absolute;
+  inset: 0;
+}
+
+.editor-content > kritzel-engine {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+kritzel-controls {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: max-content;
+  max-width: calc(100% - 16px);
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
+}
+
+kritzel-controls.keyboard-open {
+  transform: var(--kritzel-editor-controls-transform, translateY(300%));
+}
+
+.top-left-buttons {
+  position: absolute;
+  z-index: 1;
+  top: var(--kritzel-editor-top-left-buttons-top, 14px);
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.top-center-notification-layer {
+  position: absolute;
+  top: var(--kritzel-editor-top-center-notification-top, 14px);
+  left: 0;
+  right: 0;
+  z-index: var(--kritzel-editor-top-center-notification-z-index, 10001);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.top-center-notification-container {
+  width: min(90vw, 420px);
+  pointer-events: auto;
+  animation: kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
+    var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.top-center-notification-container.is-dismissing {
+  animation: kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)
+    var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards;
+}
+
+@keyframes kritzel-notification-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes kritzel-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .top-center-notification-container {
+    animation: none;
+  }
+}
+
+.top-right-buttons {
+  position: absolute;
+  z-index: 1;
+  top: var(--kritzel-editor-top-right-buttons-top, 14px);
+  right: var(--kritzel-editor-top-right-buttons-right, 14px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bottom-left-buttons {
+  position: absolute;
+  z-index: 1;
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  display: flex;
+  align-items: flex-end;
+}
+
+/* Hide the zoom panel when the editor container is narrow. */
+@container (max-width: 767px) {
+  .bottom-left-buttons {
+    display: none;
+  }
+}
+
+.top-right-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  transition: background-color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.top-right-button:hover {
+  background-color: #f5f5f5;
+}
+
+.top-right-button:active {
+  background-color: #ebebeb;
 }

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

@@ -1084,40 +1084,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: '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: '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: '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-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: '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), 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), 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: '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: '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: '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: '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: '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: '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: 'fc70555061d2aeaebdbe981bdbe8cf501bd8120e', 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: '9666163a2a36a64ecb641659dca515ae30409d0f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '167ac17ea93897597e83d4fe8b3b561fac848bb6', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '10cfb0b794d613ec39299f06ac1a3402d1ad3084', 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: '99dcb9051382982ec5a8975bdd991bae57745bb9', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1299,7 +1299,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 +1372,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 +1397,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 +1422,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 +1447,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 +1639,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 +1828,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1853,7 +1853,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n  providers: [],\r\n}"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -4148,7 +4148,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."
                         }]
                 }
             },