kritzel-stencil 0.3.18 → 0.3.20

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

@@ -23,6 +23,7 @@ import { lightTheme } from "../../../themes/light-theme";
 import { darkTheme } from "../../../themes/dark-theme";
 import { KritzelSelectionGroup } from "../../../classes/objects/selection-group.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
+import { ObjectHelper } from "../../../helpers/object.helper";
 export class KritzelEditor {
     host;
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -102,13 +103,11 @@ export class KritzelEditor {
         {
             label: 'menu.paste',
             icon: 'paste',
-            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
             action: menu => this.engineRef.paste(menu.x, menu.y),
         },
         {
             label: 'menu.selectAll',
             icon: 'select-all',
-            disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,
             action: () => this.selectAllObjectsInViewport(),
         },
     ];
@@ -119,7 +118,6 @@ export class KritzelEditor {
             label: 'menu.paste',
             icon: 'paste',
             group: 'clipboard',
-            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
             action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
         },
         {
@@ -137,7 +135,6 @@ export class KritzelEditor {
             label: 'menu.align',
             icon: 'align',
             group: 'other',
-            disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
             children: [
                 { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },
                 { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },
@@ -155,16 +152,11 @@ export class KritzelEditor {
                 {
                     label: 'menu.group',
                     icon: 'group',
-                    disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
                     action: () => this.engineRef.group(),
                 },
                 {
                     label: 'menu.ungroup',
                     icon: 'ungroup',
-                    disabled: async () => {
-                        const selectedObjects = await this.engineRef.getSelectedObjects();
-                        return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');
-                    },
                     action: () => this.engineRef.ungroup(),
                 },
             ],
@@ -241,6 +233,13 @@ export class KritzelEditor {
     shortcuts = [];
     currentIsPublic = false;
     isEditorVisible = false;
+    activeNotification;
+    isNotificationDismissing = false;
+    notificationDismissTimeout;
+    notificationDismissAnimationTimeout;
+    notificationDisplayDurationMs = 5000;
+    notificationDismissAnimationDurationMs = 180;
+    isNotificationHovered = false;
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -503,9 +502,6 @@ export class KritzelEditor {
     async findObjects(predicate) {
         return this.engineRef.findObjects(predicate);
     }
-    async getCopiedObjects() {
-        return this.engineRef.getCopiedObjects();
-    }
     async getObjectsInViewport() {
         return this.engineRef.getObjectsInViewport();
     }
@@ -521,6 +517,22 @@ export class KritzelEditor {
     async getDisplayableShortcuts() {
         return this.engineRef.getDisplayableShortcuts();
     }
+    /**
+     * Triggers a UI notification programmatically.
+     * @param notification - Notification payload. `id` and `timestamp` are optional.
+     */
+    async triggerNotification(notification) {
+        const normalizedNotification = {
+            ...notification,
+            id: notification.id ?? ObjectHelper.generateUUID(),
+            timestamp: notification.timestamp ?? new Date(),
+        };
+        this.clearNotificationDismissAnimationTimer();
+        this.isNotificationDismissing = false;
+        this.isNotificationHovered = false;
+        this.activeNotification = normalizedNotification;
+        this.scheduleNotificationDismiss();
+    }
     engineRef;
     controlsRef;
     settingsRef;
@@ -545,6 +557,10 @@ export class KritzelEditor {
         this.listenForMobileKeyboard();
         this.setOsSpecificCssVariables();
     }
+    disconnectedCallback() {
+        this.clearNotificationDismissTimer();
+        this.clearNotificationDismissAnimationTimer();
+    }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
         await customElements.whenDefined('kritzel-workspace-manager');
@@ -644,6 +660,57 @@ export class KritzelEditor {
         event.stopPropagation();
         this.awarenessChange.emit(event.detail);
     }
+    handleNotificationsChange(event) {
+        event.stopPropagation();
+        this.clearNotificationDismissAnimationTimer();
+        this.isNotificationDismissing = false;
+        this.isNotificationHovered = false;
+        this.activeNotification = event.detail;
+        this.scheduleNotificationDismiss();
+    }
+    handleNotificationHoverChange(event) {
+        event.stopPropagation();
+        this.isNotificationHovered = event.detail;
+        if (this.isNotificationHovered) {
+            this.clearNotificationDismissTimer();
+            return;
+        }
+        if (this.activeNotification && !this.isNotificationDismissing) {
+            this.scheduleNotificationDismiss();
+        }
+    }
+    scheduleNotificationDismiss() {
+        this.clearNotificationDismissTimer();
+        this.notificationDismissTimeout = setTimeout(() => {
+            this.dismissNotification();
+        }, this.notificationDisplayDurationMs);
+    }
+    clearNotificationDismissTimer() {
+        if (this.notificationDismissTimeout) {
+            clearTimeout(this.notificationDismissTimeout);
+            this.notificationDismissTimeout = undefined;
+        }
+    }
+    clearNotificationDismissAnimationTimer() {
+        if (this.notificationDismissAnimationTimeout) {
+            clearTimeout(this.notificationDismissAnimationTimeout);
+            this.notificationDismissAnimationTimeout = undefined;
+        }
+    }
+    dismissNotification = () => {
+        this.clearNotificationDismissTimer();
+        this.isNotificationHovered = false;
+        if (!this.activeNotification || this.isNotificationDismissing) {
+            return;
+        }
+        this.isNotificationDismissing = true;
+        this.clearNotificationDismissAnimationTimer();
+        this.notificationDismissAnimationTimeout = setTimeout(() => {
+            this.activeNotification = undefined;
+            this.isNotificationDismissing = false;
+            this.notificationDismissAnimationTimeout = undefined;
+        }, this.notificationDismissAnimationDurationMs);
+    };
     handleSettingsChange(event) {
         this.scaleMin = event.detail.scaleMin;
         this.scaleMax = event.detail.scaleMax;
@@ -882,31 +949,31 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '72238560a0f0275c506f59220277fdff7ab92c13', style: {
+        return (h(Host, { key: '07fe246b722ca64cfbdd8cc3474e6288c39d1128', 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: '14fd50ad857199f3b6be708fc4263aa2e69067de', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '8788631c804770c67110c7e7906fe2034438ef9b', 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: '1840374d7353af2b050822dcd9c54be46e326278', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'cdde0b65c811ee28fb4266afb96005c1fed24323', ref: el => {
+            } }, h("div", { key: '2d0db1e78161edb061779b5875114e901f8e79f8', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '8fee1d57b0b868b673c41015453fd39a19f8cb43', 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: 'f2a0305bf73bd14d7522974b7956a289a0a44258', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '918fe80193999ec072042500cd1eaf3670f5ed3c', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '0a5609b2b32f9f04bac03618803c14d9a891742c', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'eb1ff7aeaee3a237baf3ba2d96a10ba03a8bf7fb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '8783a87101f308029482ced926a8d2163aae1428', 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) }), h("kritzel-controls", { key: '9b91d0cc3b3afba8894bd852bac911178c0ca82d', 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) }), h("kritzel-controls", { key: '73a94f6baef4e0e26be4540ecd44d24588f5761b', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '01f63c615eec68696532926b6d1efe2443e2d46a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '73a1fc5b0892b88d6c0a7c5debb42b7bb3f03a84', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '94776978ba9dd68b2c5f62b141c074852585a1cd', class: "top-right-buttons" }, h("kritzel-settings", { key: '665a74511f8e511602d4d3437927e03af2c3c01c', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'b0653098e5e15b81f453a7f3c2b27f137eb38f2e', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '33384aeb6bd32d17fb428bd9ed48e5d588ac60c0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '37bed04c062b63a99c930362fb8ce30b58ed8872', class: "top-right-buttons" }, h("kritzel-settings", { key: '4e339573e3d8d48bc9803b9dd40a549bd056d147', 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: '6b52127d4634d92c3e7410a084f37970bd8c84e7', 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: '2a726ea5b56cd36ecf92bbab17d69d04baf73009', 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: '002a01d361137f867efc2a0c91a6c0e9619d4359', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '6a9e0ad77997cbb10981d58afb176a7f7f4938aa', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (h("kritzel-button", { key: '5ba13725105d0af68c51fec455569ac7bbeaecde', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'f392a518fef108b395eb6d6681af9e06827e3780', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '845a3153f5fd9b419f7d0b81be85f5e1ea0051cc', 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: '26d9bbf922b1d4158a0875ba42e7b598011973d5', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8179cc3e940c9fd8d97978af2bf52543f661a0fd', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (h("kritzel-button", { key: 'd4aa5bc108043eb103754d14f1b5df42ab73f8c4', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '17ac617bde379d7484dbeed39ac7168349b634a1', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '881729b36d34ef3ac3d87fc51ad828fc20fa36cd', 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: '5a7b149d8e2c2acbda3d7818d8576d8ad249ef23', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '5e34b647ac4c3e18981042d765b4d443422c5db3', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1186,7 +1253,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.selectAll',\n      icon: 'select-all',\n      disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,\n      action: () => this.selectAllObjectsInViewport(),\n    },\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",
@@ -1211,7 +1278,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "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      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\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      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\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          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'menu.ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'menu.export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\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.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    {\n      label: 'menu.export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
             "themes": {
                 "type": "unknown",
@@ -1715,7 +1782,9 @@ export class KritzelEditor {
             "currentZoomPercent": {},
             "shortcuts": {},
             "currentIsPublic": {},
-            "isEditorVisible": {}
+            "isEditorVisible": {},
+            "activeNotification": {},
+            "isNotificationDismissing": {}
         };
     }
     static get events() {
@@ -3475,37 +3544,6 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
-            "getCopiedObjects": {
-                "complexType": {
-                    "signature": "() => Promise<KritzelBaseObject[]>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "KritzelBaseObject": {
-                            "location": "import",
-                            "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
-                            "referenceLocation": "KritzelBaseObject"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        },
-                        "SVGElement": {
-                            "location": "global",
-                            "id": "global::SVGElement"
-                        }
-                    },
-                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>[]>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "getObjectsInViewport": {
                 "complexType": {
                     "signature": "() => Promise<KritzelBaseObject[]>",
@@ -3619,6 +3657,48 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "triggerNotification": {
+                "complexType": {
+                    "signature": "(notification: Omit<KritzelNotification, \"id\"> & Partial<Pick<KritzelNotification, \"id\" | \"timestamp\">>) => Promise<void>",
+                    "parameters": [{
+                            "name": "notification",
+                            "type": "Omit<KritzelNotification, \"id\"> & Partial<Pick<KritzelNotification, \"id\" | \"timestamp\">>",
+                            "docs": "- Notification payload. `id` and `timestamp` are optional."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "KritzelNotification": {
+                            "location": "import",
+                            "path": "../../../interfaces/notification.interface",
+                            "id": "src/interfaces/notification.interface.ts::KritzelNotification",
+                            "referenceLocation": "KritzelNotification"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Pick": {
+                            "location": "global",
+                            "id": "global::Pick"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Triggers a UI notification programmatically.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "notification - Notification payload. `id` and `timestamp` are optional."
+                        }]
+                }
+            },
             "openLoginDialog": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -245,6 +245,8 @@ export class KritzelEngine {
     viewportChange;
     /** Emitted when the awareness state changes (remote user cursors, presence). */
     awarenessChange;
+    /** Emitted when notifications change. */
+    notificationsChange;
     forceUpdate = 0;
     /** Manually triggers the `objectsSelectionChange` event. */
     async triggerSelectionChange() {
@@ -359,19 +361,56 @@ export class KritzelEngine {
         this.viewport.handleResize();
     }
     handleKeyDown(ev) {
-        if (this.core.store.isDisabled || !this.shouldHandleKeyboardEvent(ev)) {
+        if (this.core.store.isDisabled || !this.shouldHandleGlobalShortcutEvent(ev)) {
             return;
         }
         this.keyHandler.handleKeyDown(ev);
     }
     handleKeyUp(ev) {
-        if (this.core.store.isDisabled || !this.shouldHandleKeyboardEvent(ev)) {
+        if (this.core.store.isDisabled || !this.shouldHandleGlobalShortcutEvent(ev)) {
             return;
         }
         this.keyHandler.handleKeyUp(ev);
     }
+    handleCopy(ev) {
+        if (this.core.store.isDisabled || !this.shouldHandleGlobalShortcutEvent(ev)) {
+            return;
+        }
+        if (!this.core.store.selectionGroup || this.core.store.activeText || this.core.store.activeShape) {
+            return;
+        }
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
+        this.core.clipboardManager.copy(ev);
+        this.core.rerender();
+    }
+    handleCut(ev) {
+        if (this.core.store.isDisabled || !this.shouldHandleGlobalShortcutEvent(ev)) {
+            return;
+        }
+        if (!this.core.store.selectionGroup || this.core.store.activeText || this.core.store.activeShape) {
+            return;
+        }
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
+        this.core.clipboardManager.cut(ev);
+    }
+    handlePaste(ev) {
+        if (this.core.store.isDisabled || !this.shouldHandleGlobalShortcutEvent(ev)) {
+            return;
+        }
+        if (this.core.store.activeText || this.core.store.activeShape) {
+            return;
+        }
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
+        void this.core.clipboardManager.paste(undefined, undefined, ev);
+    }
     /**
-     * Determines if the engine should handle a keyboard event.
+      * Determines if the engine should handle a keyboard/clipboard shortcut event.
      * Returns true only if:
      * - The event originates from within the engine component, OR
      * - The event target is not an interactive element that needs keyboard input
@@ -379,7 +418,7 @@ export class KritzelEngine {
      * This prevents conflicts with inputs, textareas, dialogs, or other
      * interactive elements that need their own keyboard handling.
      */
-    shouldHandleKeyboardEvent(ev) {
+    shouldHandleGlobalShortcutEvent(ev) {
         const path = ev.composedPath();
         // Check if event path includes our host - works reliably with Shadow DOM
         if (path.includes(this.host)) {
@@ -475,11 +514,11 @@ export class KritzelEngine {
     }
     /** Copies the currently selected objects to the internal clipboard. */
     async copy() {
-        this.core.copy();
+        this.core.clipboardManager.copy();
     }
     /** Cuts the currently selected objects to the internal clipboard (deletes them from the canvas). */
     async cut() {
-        this.core.cut();
+        this.core.clipboardManager.cut();
     }
     /**
      * Pastes previously copied objects at the specified world coordinates.
@@ -487,7 +526,16 @@ export class KritzelEngine {
      * @param y - Y position in world coordinates.
      */
     async paste(x, y) {
-        this.core.paste(x, y);
+        const hasPermission = await this.core.permissionManager.requestPermission('clipboard-read');
+        if (hasPermission !== 'granted') {
+            this.notificationsChange.emit({
+                type: 'error',
+                message: 'Clipboard read permission is required to paste content. Please grant permission and try again.',
+                id: ObjectHelper.generateUUID(),
+            });
+            return;
+        }
+        this.core.clipboardManager.paste(x, y);
     }
     /**
      * Moves an object one layer forward in the z-order.
@@ -978,10 +1026,6 @@ export class KritzelEngine {
     async worldToScreen(x, y) {
         return this.viewport.worldToScreen(x, y);
     }
-    /** Returns the objects currently stored in the internal clipboard from a prior `copy()` call. */
-    async getCopiedObjects() {
-        return this.core.store.state.copiedObjects || [];
-    }
     /** Returns all objects currently visible within the viewport bounds. */
     async getObjectsInViewport() {
         return this.core.getObjectsInViewport();
@@ -1901,7 +1945,6 @@ export class KritzelEngine {
             this.core.resetActiveShape();
         }
         this.core.store.state.skipContextMenu = false;
-        this.core.store.state.copiedObjects = undefined;
         if (activeTool) {
             this.activeToolChange.emit(activeTool);
         }
@@ -3317,6 +3360,28 @@ export class KritzelEngine {
                         }
                     }
                 }
+            }, {
+                "method": "notificationsChange",
+                "name": "notificationsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when notifications change."
+                },
+                "complexType": {
+                    "original": "KritzelNotification",
+                    "resolved": "KritzelNotification",
+                    "references": {
+                        "KritzelNotification": {
+                            "location": "import",
+                            "path": "../../../interfaces/notification.interface",
+                            "id": "src/interfaces/notification.interface.ts::KritzelNotification",
+                            "referenceLocation": "KritzelNotification"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -3564,6 +3629,12 @@ export class KritzelEngine {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelNotification": {
+                            "location": "import",
+                            "path": "../../../interfaces/notification.interface",
+                            "id": "src/interfaces/notification.interface.ts::KritzelNotification",
+                            "referenceLocation": "KritzelNotification"
                         }
                     },
                     "return": "Promise<void>"
@@ -4750,37 +4821,6 @@ export class KritzelEngine {
                         }]
                 }
             },
-            "getCopiedObjects": {
-                "complexType": {
-                    "signature": "() => Promise<KritzelBaseObject[]>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "KritzelBaseObject": {
-                            "location": "import",
-                            "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
-                            "referenceLocation": "KritzelBaseObject"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        },
-                        "SVGElement": {
-                            "location": "global",
-                            "id": "global::SVGElement"
-                        }
-                    },
-                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>[]>"
-                },
-                "docs": {
-                    "text": "Returns the objects currently stored in the internal clipboard from a prior `copy()` call.",
-                    "tags": []
-                }
-            },
             "getObjectsInViewport": {
                 "complexType": {
                     "signature": "() => Promise<KritzelBaseObject[]>",
@@ -5764,6 +5804,24 @@ export class KritzelEngine {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "copy",
+                "method": "handleCopy",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cut",
+                "method": "handleCut",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "paste",
+                "method": "handlePaste",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "dblclick",
                 "method": "preventDoubleTapZoomOnTouchDevices",

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

@@ -19,7 +19,7 @@ export class KritzelWatermark {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (h(Host, { key: '7ec2a304ac711a4d2a54edef317eef9f4aad1d47' }, h("a", { key: '365d588727bbc360fd47bc9a3fbd66155770d32f', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (h(Host, { key: '975534180d82064e38fa0289a2955e97a4ca0a08' }, h("a", { key: 'c59723d1f5bf3089256c0b610d0574bfc385ef85', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
     static get is() { return "kritzel-watermark"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '0d372a5443f41835c2e8e5b33b58bcb6c1292e89', style: containerStyles, class: {
+        return (h(Host, { key: '4bdbe2c1d5d3a1708189166498ae4e36c19c46ff', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'deb5f12115dd28b4b4ab2157cb2bbc9e48bb2a3f', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '55c3a13c9d514ea700c6b1a9339cd0dff1828b2b', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: '6fc12f2d32923f33df5a8ec743d51434f67e6934', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd803b385f7eaa0659d7452231bfd46b1634f204d', class: "avatar-default" }, h("svg", { key: 'a3275ab33f58440abcd15c296d9c027dfab6495c', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31ac7e63fe6b1778c3d0cbd71b5c85791b79d084', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'b60cbe2b94ea1d2cd2a09d10c928290fc1469a4a', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'e8a0f49952b5b7e5e4a1fe3d67e68a56081d5e4c', class: "avatar-default" }, h("svg", { key: '1fdc256fd53aa5c866bb0e81fdd40393c8a7d69d', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '8f3a5a6775154e46a2f331534fe75671b9ad081a', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-button/kritzel-button.js

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'aa366907b97e648ac73182a43d099baf457e0ba3' }, h("button", { key: 'e80875396a791606461b1a20e0f7e1c896f54073', type: this.type, class: {
+        return (h(Host, { key: '0de2b5dcf75de9f5b7de0c6b876bd18733bf21b9' }, h("button", { key: '5ab9d80167c6b90add7779d4b1c3ebb80fafaed5', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8f4e57a73837adfbf91f678c54558fe4c737aa91' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'dc105f7d1f87aa55c314d942a1cc6522b272526a' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-color/kritzel-color.js

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: '21ce0ecb616266ec4953468ae9bbe0b72259c2da' }, h("div", { key: '02c8e8684b3b0819755efd1f160bdee662428ddd', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '0d56c7ad01eddd523ebcf11a32e68367c96090bd' }, h("div", { key: '0bef4cb73804b98e6eea6b3cf006c19c8786bdb9', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '0063e9a701994869adbd3022b5ace542e85dfd95', class: {
+            } }, h("div", { key: '5be9714c3ddd56ae77c2870333ff97a59b58bd45', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {