kritzel-stencil 0.3.18 → 0.3.20

package/dist/cjs/{kritzel-active-users_44.cjs.entry.js → kritzel-active-users_45.cjs.entry.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-DrHO_CYF.js');
+var schema_constants = require('./schema.constants-IBG5VW_J.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -154,16 +154,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (index.h(index.Host, { key: '0d372a5443f41835c2e8e5b33b58bcb6c1292e89', style: containerStyles, class: {
+        return (index.h(index.Host, { key: '4bdbe2c1d5d3a1708189166498ae4e36c19c46ff', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: 'deb5f12115dd28b4b4ab2157cb2bbc9e48bb2a3f', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.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 && (index.h("span", { key: '6fc12f2d32923f33df5a8ec743d51434f67e6934', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: 'd803b385f7eaa0659d7452231bfd46b1634f204d', class: "avatar-default" }, index.h("svg", { key: 'a3275ab33f58440abcd15c296d9c027dfab6495c', viewBox: "0 0 24 24", fill: "currentColor" }, index.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 && (index.h("span", { key: 'b60cbe2b94ea1d2cd2a09d10c928290fc1469a4a', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: 'e8a0f49952b5b7e5e4a1fe3d67e68a56081d5e4c', class: "avatar-default" }, index.h("svg", { key: '1fdc256fd53aa5c866bb0e81fdd40393c8a7d69d', viewBox: "0 0 24 24", fill: "currentColor" }, index.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 watchers() { return {
         "user": [{
@@ -473,7 +473,7 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '5ef034156f28bdd1861d99343d51a237498db46b' }, index.h("button", { key: 'caa1c08d04f1a3a84d694b7df5d318a686d3a1fb', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: '0c7cf5e18294ade600be3052ca7c57c8d933a736', name: "chevrons-left" }))));
+        return (index.h(index.Host, { key: 'a7d52616642f45a0c0e7b76deb3cc5994184b968' }, index.h("button", { key: '9e7acae2b62f7f66ee0127545ee8ab115f9d340e', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: '6c404376643554cdb86c33957c066dd4580f19f1', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
@@ -500,11 +500,11 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'aa366907b97e648ac73182a43d099baf457e0ba3' }, index.h("button", { key: 'e80875396a791606461b1a20e0f7e1c896f54073', type: this.type, class: {
+        return (index.h(index.Host, { key: '0de2b5dcf75de9f5b7de0c6b876bd18733bf21b9' }, index.h("button", { key: '5ab9d80167c6b90add7779d4b1c3ebb80fafaed5', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '8f4e57a73837adfbf91f678c54558fe4c737aa91' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: 'dc105f7d1f87aa55c314d942a1cc6522b272526a' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
@@ -552,13 +552,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (index.h(index.Host, { key: '21ce0ecb616266ec4953468ae9bbe0b72259c2da' }, index.h("div", { key: '02c8e8684b3b0819755efd1f160bdee662428ddd', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '0d56c7ad01eddd523ebcf11a32e68367c96090bd' }, index.h("div", { key: '0bef4cb73804b98e6eea6b3cf006c19c8786bdb9', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '0063e9a701994869adbd3022b5ace542e85dfd95', class: {
+            } }, index.h("div", { key: '5be9714c3ddd56ae77c2870333ff97a59b58bd45', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -614,7 +614,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '9910a765816f45d420ad27c8fc7b02811380783b' }, index.h("div", { key: '91f3dae04338f55ab21831e4cac65f9d855c58c6', class: {
+        return (index.h(index.Host, { key: '6d003ec5b92f586532782144c25ca5a733741f20' }, index.h("div", { key: '031838b45da4916aa91d87c066ac950cfe3a1ddc', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -1182,13 +1182,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: '7247a377d1cb75153e35f5308e81b2bd00d98578', style: { display: this.visible ? '' : 'none' }, class: {
+        return (index.h(index.Host, { key: '266e38cdeffb8c22a7f778e865e5fab6b461f5b6', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '075577cd15f3e577a1a216b5b1f1874e82e0d123', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '5e75ece000ac02675d3d226461b7f522dcf5ead9', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '7fb1041763c7b64917e337d68bbb29b36ed86b9a', class: "kritzel-controls" }, index.h("div", { key: '8577ed9c6f43a667aaba7dce1da519456c8ad210', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '42f8f2b85055705674f9e319056bd48856dbd197', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: 'fc98b1675afe1abb6a8d391c4ace34c7f0e46677', class: "kritzel-controls" }, index.h("div", { key: 'b17bc9e9a65646735c56f78a326a281229fa9790', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '9ab9d5c44e515551d75f27c31875de72e9d3407c', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1218,10 +1218,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: '20007273e0f701193502320cf58099cbaedb834e', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: 'fad7512f5d1aa68905a56b8f22d498380f166f9f', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: '2901fc2507e5b02fbd603bd2d2a4e2b07e35c970', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '653e6a9b49146a2f297dbb5b9debe8709efd59ad', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '6fae38444dff1978647e111643ee6e29c9cc1653', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '951a52f625c929634de5102b83a14ad0cf1abc8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '2ff7cb3ad18608102f3d8188b5936cf00b00451f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '10f15f717c8573cbad6ea53b412ad56254099ad1', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'a1b0ed8ecc2696a591e32add642a3d5cb2bf7f4a', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '7ac8214a3dbad5323a38cad3ff7324b57f9dbfb5', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1230,7 +1230,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: 'b8fff73b9055e86b312a9f0798fff4177cf85970', class: "color-container" }, index.h("kritzel-color", { key: 'fcd474e557d887f94383b7e583ab1c95a675ce23', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: '7e64f79859f7f2b03d72bb7a93fb295e7d2b2ac0', class: "color-container" }, index.h("kritzel-color", { key: 'b87d9861949379d84954ef1ecb554e13317b3287', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -1270,7 +1270,7 @@ const KritzelCurrentUser = class {
         this.dialogRef?.open();
     };
     render() {
-        return (index.h(index.Host, { key: '7e45048e532db84347e2531de2df19f5537d62ca' }, index.h("kritzel-avatar", { key: '5a67d1dbae041e16cdaeaf4bc678b6b00c56f442', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: '8e35219e282811b8bbafb058c02c8c0474574009', ref: el => (this.dialogRef = el), user: this.user, terms: this.terms })));
+        return (index.h(index.Host, { key: 'bdee6b71c08d6ea22aec40e88ba56077882b301d' }, index.h("kritzel-avatar", { key: '97bcaaa6b683c0d26d547ac5cbd9df7814f0cd80', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: 'c984ea1803bcf2b06569fd66d12e4e7054235225', ref: el => (this.dialogRef = el), user: this.user, terms: this.terms })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1304,7 +1304,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (index.h(index.Host, { key: '7c9e5c19249d400e2d670c60f5d6716c742adc62' }, index.h("kritzel-dialog", { key: '811da6bff0ce03914f545dd289878ba04924e85c', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '03a101b04d61882732547d91e81a2bacb3aa4df8', class: "user-info" }, index.h("kritzel-avatar", { key: '4033d0e2322d7a25231f01115ec33f20e4fb0d4c', user: this.user, size: 80 }), displayName && index.h("div", { key: 'cf3a3aecb84152736c9de119f82a79f1b2b32f6f', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '5725d71dd80468c64a2b0bb1d9d967232513fb63', class: "user-email" }, this.user.email)))));
+        return (index.h(index.Host, { key: '042455d68a432e0e218d5b8750fb1d22b0d202fc' }, index.h("kritzel-dialog", { key: '058abbc8e1c38c647cc02e85c272e89693cab22a', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'ee141b2e91f093527e2d8f6649bade8e1a14f130', class: "user-info" }, index.h("kritzel-avatar", { key: '2734bb0d3c69df14d26c204eeaf726174afaabc0', user: this.user, size: 80 }), displayName && index.h("div", { key: '56cbad7a51264ebada0cb029e6455aabb9cb4ae9', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: 'ef9075dfdeb52ce6f90bb41d1348fbdf7dbb93ee', class: "user-email" }, this.user.email)))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -2193,7 +2193,7 @@ const DEFAULT_SYNC_CONFIG = {
     providers: [],
 };
 
-const kritzelEditorCss = () => `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}kritzel-controls{position:absolute;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;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-right-buttons{position:absolute;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;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@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}`;
+const kritzelEditorCss = () => `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}kritzel-controls{position:absolute;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;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;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;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@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}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -2291,13 +2291,11 @@ const KritzelEditor = class {
         {
             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(),
         },
     ];
@@ -2308,7 +2306,6 @@ const KritzelEditor = class {
             label: 'menu.paste',
             icon: 'paste',
             group: 'clipboard',
-            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
             action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
         },
         {
@@ -2326,7 +2323,6 @@ const KritzelEditor = class {
             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(schema_constants.KritzelAlignment.StartHorizontal) },
                 { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(schema_constants.KritzelAlignment.CenterHorizontal) },
@@ -2344,16 +2340,11 @@ const KritzelEditor = class {
                 {
                     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(),
                 },
             ],
@@ -2430,6 +2421,13 @@ const KritzelEditor = class {
     shortcuts = [];
     currentIsPublic = false;
     isEditorVisible = false;
+    activeNotification;
+    isNotificationDismissing = false;
+    notificationDismissTimeout;
+    notificationDismissAnimationTimeout;
+    notificationDisplayDurationMs = 5000;
+    notificationDismissAnimationDurationMs = 180;
+    isNotificationHovered = false;
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -2692,9 +2690,6 @@ const KritzelEditor = class {
     async findObjects(predicate) {
         return this.engineRef.findObjects(predicate);
     }
-    async getCopiedObjects() {
-        return this.engineRef.getCopiedObjects();
-    }
     async getObjectsInViewport() {
         return this.engineRef.getObjectsInViewport();
     }
@@ -2710,6 +2705,22 @@ const KritzelEditor = class {
     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 ?? schema_constants.ObjectHelper.generateUUID(),
+            timestamp: notification.timestamp ?? new Date(),
+        };
+        this.clearNotificationDismissAnimationTimer();
+        this.isNotificationDismissing = false;
+        this.isNotificationHovered = false;
+        this.activeNotification = normalizedNotification;
+        this.scheduleNotificationDismiss();
+    }
     engineRef;
     controlsRef;
     settingsRef;
@@ -2734,6 +2745,10 @@ const KritzelEditor = class {
         this.listenForMobileKeyboard();
         this.setOsSpecificCssVariables();
     }
+    disconnectedCallback() {
+        this.clearNotificationDismissTimer();
+        this.clearNotificationDismissAnimationTimer();
+    }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
         await customElements.whenDefined('kritzel-workspace-manager');
@@ -2833,6 +2848,57 @@ const KritzelEditor = class {
         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;
@@ -3071,31 +3137,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '72238560a0f0275c506f59220277fdff7ab92c13', style: {
+        return (index.h(index.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',
-            } }, index.h("div", { key: '14fd50ad857199f3b6be708fc4263aa2e69067de', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: '1840374d7353af2b050822dcd9c54be46e326278', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'cdde0b65c811ee28fb4266afb96005c1fed24323', ref: el => {
+            } }, index.h("div", { key: '2d0db1e78161edb061779b5875114e901f8e79f8', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: 'f2a0305bf73bd14d7522974b7956a289a0a44258', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '918fe80193999ec072042500cd1eaf3670f5ed3c', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '0a5609b2b32f9f04bac03618803c14d9a891742c', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'eb1ff7aeaee3a237baf3ba2d96a10ba03a8bf7fb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.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) }), index.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) }), index.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) }), index.h("div", { key: '01f63c615eec68696532926b6d1efe2443e2d46a', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '73a1fc5b0892b88d6c0a7c5debb42b7bb3f03a84', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '94776978ba9dd68b2c5f62b141c074852585a1cd', class: "top-right-buttons" }, index.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) }), index.h("div", { key: 'b0653098e5e15b81f453a7f3c2b27f137eb38f2e', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '33384aeb6bd32d17fb428bd9ed48e5d588ac60c0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '37bed04c062b63a99c930362fb8ce30b58ed8872', class: "top-right-buttons" }, index.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) }), index.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) }), index.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) }), index.h("kritzel-active-users", { key: '002a01d361137f867efc2a0c91a6c0e9619d4359', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '6a9e0ad77997cbb10981d58afb176a7f7f4938aa', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (index.h("kritzel-button", { key: '5ba13725105d0af68c51fec455569ac7bbeaecde', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: 'f392a518fef108b395eb6d6681af9e06827e3780', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.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) }), index.h("kritzel-active-users", { key: '26d9bbf922b1d4158a0875ba42e7b598011973d5', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '8179cc3e940c9fd8d97978af2bf52543f661a0fd', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'd4aa5bc108043eb103754d14f1b5df42ab73f8c4', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '17ac617bde379d7484dbeed39ac7168349b634a1', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.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 && (index.h("kritzel-login-dialog", { key: '5a7b149d8e2c2acbda3d7818d8576d8ad249ef23', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '5e34b647ac4c3e18981042d765b4d443422c5db3', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -21174,7 +21240,7 @@ class KritzelViewport {
 const NUDGE_AMOUNT = 10;
 /**
  * Handles keyboard events and manages keyboard shortcuts for the Kritzel canvas.
- * Provides functionality for tool switching, clipboard operations, object manipulation,
+ * Provides functionality for tool switching, object manipulation,
  * undo/redo, and navigation via keyboard input.
  */
 class KritzelKeyHandler extends schema_constants.KritzelBaseHandler {
@@ -21217,27 +21283,6 @@ class KritzelKeyHandler extends schema_constants.KritzelBaseHandler {
         { key: '7', ctrl: true, label: 'Tool 7', category: 'Tool Selection', action: () => this.switchToolByIndex(6) },
         { key: '8', ctrl: true, label: 'Tool 8', category: 'Tool Selection', action: () => this.switchToolByIndex(7) },
         { key: '9', ctrl: true, label: 'Tool 9', category: 'Tool Selection', action: () => this.switchToolByIndex(8) },
-        // Clipboard
-        {
-            key: 'c',
-            ctrl: true,
-            label: 'Copy',
-            category: 'Clipboard',
-            condition: c => !!c.store.selectionGroup,
-            action: c => {
-                c.copy();
-                c.rerender();
-            },
-        },
-        { key: 'x', ctrl: true, label: 'Cut', category: 'Clipboard', condition: c => !!c.store.selectionGroup, action: c => c.cut() },
-        {
-            key: 'v',
-            ctrl: true,
-            label: 'Paste',
-            category: 'Clipboard',
-            condition: c => !!c.store.state.copiedObjects && !c.store.activeText && !c.store.activeShape,
-            action: c => c.paste(),
-        },
         // Object layering
         { key: '+', ctrl: true, label: 'Bring Forward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, label: 'Send Backward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
@@ -21747,7 +21792,6 @@ class KritzelReviver {
 const DEFAULT_ENGINE_CONFIG = {
     activeWorkspace: undefined,
     activeTool: null,
-    copiedObjects: null,
     objects: null,
     snapCandidate: null,
     resizeHandleType: null,
@@ -24090,6 +24134,467 @@ class KritzelCursorManager {
     }
 }
 
+/**
+ * Manages browser permission checks and prompts for a core instance.
+ *
+ * Permission-specific prompt logic is routed through a handler registry so new
+ * permissions can be added without changing the core control flow.
+ */
+class KritzelBrowserPermissionManager {
+    _isFirefox = /firefox|fxios/i.test(navigator.userAgent);
+    _isSafari = /safari/i.test(navigator.userAgent) && !/chrome|chromium|crios|android|edg/i.test(navigator.userAgent);
+    _requestHandlers = new Map();
+    /**
+     * Creates a new KritzelBrowserPermissionManager instance.
+     * @param core - The KritzelCore instance this manager belongs to
+     */
+    constructor(_core) {
+        this.registerRequestPermissionHandler('clipboard-read', async () => {
+            // Firefox and Safari open native paste menus when readText() is called
+            // proactively, so rely on the permission state instead of an eager read.
+            if (this._isFirefox || this._isSafari) {
+                return 'granted';
+            }
+            try {
+                await navigator.clipboard.readText();
+                return 'granted';
+            }
+            catch {
+                return 'denied';
+            }
+        });
+    }
+    /**
+     * Registers a custom request handler for a browser permission name.
+     * Existing handlers are replaced, which makes the registry easy to extend.
+     *
+     * @param permissionName - The browser permission name to handle
+     * @param handler - The request implementation for that permission
+     */
+    registerRequestPermissionHandler(permissionName, handler) {
+        this._requestHandlers.set(permissionName, handler);
+    }
+    /**
+     * Checks the current state for a browser permission via the Permissions API.
+     *
+     * @param permissionName - The browser permission name to inspect
+     */
+    async checkPermission(permissionName) {
+        const status = await navigator.permissions.query({ name: permissionName });
+        return status.state;
+    }
+    /**
+     * Requests a browser permission using the registered handler for the given
+     * permission name, then falls back to a permission check when no handler is
+     * registered.
+     *
+     * @param permissionName - The browser permission name to request
+     */
+    async requestPermission(permissionName) {
+        const handler = this._requestHandlers.get(permissionName);
+        if (handler) {
+            return handler();
+        }
+        return this.checkPermission(permissionName);
+    }
+}
+
+const CLIPBOARD_PAYLOAD_PREFIX = 'kritzel-clipboard/v1:';
+/**
+ * Manages clipboard operations (copy/cut/paste) for a core instance.
+ *
+ * The system clipboard is the single source of truth: copy serializes the current
+ * selection into a Kritzel payload, paste reads + revives it. No copied objects are
+ * cached on the engine state.
+ */
+class KritzelClipboardManager {
+    _core;
+    /**
+     * In-memory cascade offset (world units) applied to successive pastes of the same
+     * clipboard content so they don't stack exactly on top of each other. Reset on copy/cut.
+     */
+    _pasteOffset = 0;
+    constructor(core) {
+        this._core = core;
+    }
+    /**
+     * Serializes an object for the clipboard payload. Groups additionally embed their
+     * (recursively serialized) children under `__children__` so the payload is self-contained.
+     */
+    serializeForClipboard(object) {
+        const serialized = (typeof object.serialize === 'function' ? object.serialize() : object);
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+            serialized.__children__ = object.children.map(child => this.serializeForClipboard(child));
+        }
+        return serialized;
+    }
+    serializeClipboardPayload(payload) {
+        return `${CLIPBOARD_PAYLOAD_PREFIX}${JSON.stringify(payload)}`;
+    }
+    parseClipboardPayload(text) {
+        if (!text || !text.startsWith(CLIPBOARD_PAYLOAD_PREFIX)) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(text.slice(CLIPBOARD_PAYLOAD_PREFIX.length));
+            if (parsed?.version !== 1 || !Array.isArray(parsed.objects)) {
+                return null;
+            }
+            return parsed;
+        }
+        catch {
+            return null;
+        }
+    }
+    determineTextPasteIntent(text) {
+        const payload = this.parseClipboardPayload(text);
+        if (payload) {
+            return { type: 'kritzel_objects', payload };
+        }
+        if (text && text.trim().length > 0) {
+            return { type: 'plain_text', text };
+        }
+        return null;
+    }
+    async writeBrowserClipboardPayload(payload, event) {
+        const serialized = this.serializeClipboardPayload(payload);
+        if (event?.clipboardData) {
+            event.clipboardData.setData('text/plain', serialized);
+            return;
+        }
+        if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(serialized);
+        }
+        catch {
+            // Ignore clipboard permission failures and keep the local clipboard working.
+        }
+    }
+    /**
+     * Revives a single serialized clipboard object (and its embedded group children).
+     * IDs are NOT regenerated here; see regenerateIdsAndRemapAnchors.
+     */
+    reviveClipboardObject(serialized) {
+        const reviver = new KritzelReviver(this._core);
+        const { __children__, ...objectData } = serialized;
+        const revived = reviver.revive(objectData);
+        if (!revived) {
+            return null;
+        }
+        if (__children__ && schema_constants.KritzelClassHelper.isInstanceOf(revived, 'KritzelGroup')) {
+            const children = __children__.map(child => this.reviveClipboardObject(child)).filter((child) => child != null);
+            revived._pendingChildren = children;
+            revived.childIds = children.map(child => child.id);
+        }
+        return revived;
+    }
+    /**
+     * Assigns fresh unique IDs to every revived object (including nested group children),
+     * keeping group.childIds in sync and remapping line anchors that reference copied
+     * siblings to their new IDs. Anchors pointing at objects outside the pasted set are
+     * left untouched so they stay connected to the existing object.
+     */
+    regenerateIdsAndRemapAnchors(topLevel) {
+        const all = [];
+        const collect = (objects) => {
+            for (const object of objects) {
+                all.push(object);
+                if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+                    collect(object._pendingChildren);
+                }
+            }
+        };
+        collect(topLevel);
+        const idMap = new Map();
+        for (const object of all) {
+            const newId = object.generateId();
+            idMap.set(object.id, newId);
+            object.id = newId;
+            object.isMounted = false;
+        }
+        for (const object of all) {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+                object.childIds = object.childIds.map(id => idMap.get(id) ?? id);
+            }
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+                if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
+                    object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
+                }
+                if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
+                    object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
+                }
+            }
+        }
+    }
+    /**
+     * Evaluates the clipboard event to determine exactly what the user is trying to paste.
+     * Returns a PasteIntent covering the 3 main cases: Kritzel objects, Images, or Plain text.
+     */
+    async determinePasteIntent(event) {
+        if (event?.clipboardData) {
+            const data = event.clipboardData;
+            const imageFiles = Array.from(data.files ?? []).filter(file => file.type.startsWith('image/'));
+            if (imageFiles.length > 0) {
+                return { type: 'image_files', files: imageFiles };
+            }
+            if (data.types.includes('text/plain')) {
+                const textIntent = this.determineTextPasteIntent(data.getData('text/plain'));
+                if (textIntent)
+                    return textIntent;
+            }
+            return { type: 'unknown' };
+        }
+        if (typeof navigator === 'undefined' || !navigator.clipboard) {
+            return { type: 'unknown' };
+        }
+        const { clipboard } = navigator;
+        const permissionState = await this._core.permissionManager.checkPermission('clipboard-read');
+        if (permissionState !== 'granted') {
+            const requestedState = await this._core.permissionManager.requestPermission('clipboard-read');
+            if (requestedState !== 'granted') {
+                return { type: 'unknown' };
+            }
+        }
+        if (clipboard.read) {
+            try {
+                const items = await clipboard.read();
+                const { imageFiles, text } = await this.processClipboardItems(items);
+                if (imageFiles.length > 0) {
+                    return { type: 'image_files', files: imageFiles };
+                }
+                if (text !== null) {
+                    const textIntent = this.determineTextPasteIntent(text);
+                    if (textIntent)
+                        return textIntent;
+                }
+            }
+            catch {
+                // Fall back to readText below when read() is denied or unavailable at runtime.
+            }
+        }
+        if (clipboard.readText) {
+            const textIntent = this.determineTextPasteIntent(await clipboard.readText());
+            if (textIntent)
+                return textIntent;
+        }
+        return { type: 'unknown' };
+    }
+    /**
+     * Helper to parse clipboard items in parallel
+     */
+    async processClipboardItems(items) {
+        const imageFiles = [];
+        let text = null;
+        // Process items concurrently
+        await Promise.all(items.map(async (item) => {
+            const imageType = item.types.find(type => type.startsWith('image/'));
+            if (imageType) {
+                const blob = await item.getType(imageType);
+                imageFiles.push(new File([blob], 'pasted-image', { type: imageType }));
+                return;
+            }
+            if (text === null && item.types.includes('text/plain')) {
+                const blob = await item.getType('text/plain');
+                text = await blob.text();
+            }
+        }));
+        return { imageFiles, text };
+    }
+    /**
+     * Copies currently selected objects into internal clipboard state.
+     */
+    copy(event) {
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        const payload = {
+            version: 1,
+            sourceWorkspaceId: this._core.store.state.activeWorkspace?.id,
+            objects: selectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => this.serializeForClipboard(obj)),
+        };
+        // A fresh copy resets the cascade so the first paste lands at the default offset.
+        this._pasteOffset = 0;
+        void this.writeBrowserClipboardPayload(payload, event);
+    }
+    /**
+     * Cuts currently selected objects (copy then delete).
+     */
+    cut(event) {
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        this.copy(event);
+        this._core.delete();
+    }
+    materializeKritzelObjects(intent) {
+        const objects = intent.payload.objects.map(object => this.reviveClipboardObject(object)).filter((object) => object != null);
+        this.regenerateIdsAndRemapAnchors(objects);
+        return objects;
+    }
+    async materializeImageFiles(intent) {
+        try {
+            const scale = this._core.store.state.scale;
+            const offset = 25 / scale;
+            const preparePromises = intent.files.map(async (file, index) => {
+                // Use the default image compression size of 1200
+                const compressed = await schema_constants.imageCompression(file, { maxWidthOrHeight: 1200 });
+                return schema_constants.KritzelImage.fromBlob(this._core, compressed, {
+                    translateX: index * offset,
+                    translateY: index * offset,
+                });
+            });
+            return await Promise.all(preparePromises);
+        }
+        catch (err) {
+            console.error('Failed to import pasted image files:', err);
+            return null;
+        }
+    }
+    async materializePlainText(intent) {
+        const textObject = schema_constants.KritzelText.create(this._core);
+        const paragraphs = intent.text.split('\n').map(line => {
+            if (line.length === 0) {
+                return { type: 'paragraph' }; // Empty paragraph
+            }
+            return {
+                type: 'paragraph',
+                content: [{ type: 'text', text: line }],
+            };
+        });
+        textObject.setContent({
+            type: 'doc',
+            content: paragraphs,
+        });
+        return [textObject];
+    }
+    /**
+     * Pastes objects from clipboard with optional explicit world coordinates.
+     */
+    async paste(x, y, event) {
+        const pasteIntent = await this.determinePasteIntent(event);
+        let objects = null;
+        if (pasteIntent.type === 'kritzel_objects') {
+            objects = this.materializeKritzelObjects(pasteIntent);
+        }
+        else if (pasteIntent.type === 'image_files') {
+            objects = await this.materializeImageFiles(pasteIntent);
+        }
+        else if (pasteIntent.type === 'plain_text') {
+            objects = await this.materializePlainText(pasteIntent);
+        }
+        if (!objects || objects.length === 0) {
+            return;
+        }
+        await this.insertMaterializedObjects(objects, pasteIntent, x, y);
+    }
+    async insertMaterializedObjects(copiedObjects, pasteIntent, x, y) {
+        const activeWorkspace = this._core.store.state.activeWorkspace;
+        if (!activeWorkspace) {
+            return;
+        }
+        // Determine if we should center the objects in the viewport.
+        // This happens if the user specifically pasted from a different workspace,
+        // OR if we're inserting brand new external items (like images or text).
+        const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
+        const isNewExternalContent = pasteIntent.type !== 'kritzel_objects';
+        const shouldCenterInViewport = isDifferentWorkspace || isNewExternalContent;
+        const hasExplicitPastePosition = x !== undefined && y !== undefined;
+        const minX = Math.min(...copiedObjects.map(obj => obj.translateX));
+        const minY = Math.min(...copiedObjects.map(obj => obj.translateY));
+        let pasteX;
+        let pasteY;
+        const step = 25 / this._core.store.state.scale;
+        if (x !== undefined && y !== undefined) {
+            pasteX = x;
+            pasteY = y;
+        }
+        else if (shouldCenterInViewport) {
+            pasteX = minX;
+            pasteY = minY;
+        }
+        else {
+            pasteX = minX + step + this._pasteOffset;
+            pasteY = minY + step + this._pasteOffset;
+            // Advance the cascade so the next same-content paste is offset further.
+            this._pasteOffset += step;
+        }
+        const offsetX = pasteX - minX;
+        const offsetY = pasteY - minY;
+        this._core.removeSelectionGroup();
+        this._core.removeSelectionBox();
+        const selectionGroup = schema_constants.KritzelSelectionGroup.create(this._core);
+        const baseZIndex = this._core.store.currentZIndex;
+        this._core.store.objects.transaction(() => {
+            const flushPendingChildren = (group, parentZIndex) => {
+                if (group._pendingChildren.length === 0) {
+                    return;
+                }
+                const pendingChildren = group._pendingChildren;
+                group._pendingChildren = [];
+                pendingChildren.forEach((child, childIndex) => {
+                    if (child.workspaceId !== activeWorkspace.id) {
+                        child.workspaceId = activeWorkspace.id;
+                    }
+                    child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
+                    child.zIndex = parentZIndex + childIndex + 1;
+                    if (schema_constants.KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                        flushPendingChildren(child, child.zIndex);
+                    }
+                    this._core.addObject(child);
+                });
+                group.finalize();
+            };
+            const newlyAddedObjects = [];
+            copiedObjects.forEach((obj, i) => {
+                if (obj.workspaceId !== activeWorkspace.id) {
+                    obj.workspaceId = activeWorkspace.id;
+                }
+                obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
+                obj.zIndex = baseZIndex + i;
+                if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                    flushPendingChildren(obj, obj.zIndex);
+                }
+                this._core.addObject(obj);
+                newlyAddedObjects.push(obj);
+                selectionGroup.addOrRemove(obj);
+            });
+            this._core.engine.emitObjectsAdded(newlyAddedObjects);
+        });
+        this._core.anchorManager.rebuildIndex();
+        selectionGroup.isSelected = true;
+        if (copiedObjects.length === 1) {
+            selectionGroup.rotation = copiedObjects[0].rotation;
+        }
+        if (shouldCenterInViewport && !hasExplicitPastePosition) {
+            selectionGroup.centerInViewport();
+        }
+        this._core.addSelectionGroup(selectionGroup);
+        this._core.engine.viewport?.bringIntoViewIfNeeded(selectionGroup);
+        this._core.store.state.isSelecting = false;
+        // Use a double requestAnimationFrame to ensure the browser has fully rendered the DOM,
+        // and objects like KritzelText have executed their own internal size-adjustment rAF calls.
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        // Re-evaluate bounding box dimensions now that any DOM nodes (like ProseMirror text editors)
+        // have mounted and calculated their actual bounds.
+        selectionGroup.refreshObjectDimensions();
+        // We should update it if the centerInViewport or width adjustments changed it significantly
+        if (shouldCenterInViewport && !hasExplicitPastePosition) {
+            selectionGroup.centerInViewport();
+        }
+        this._core.engine.emitObjectsChange();
+        this._core.rerender();
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+        this._core.engine.emitObjectsChange();
+        this._core.rerender();
+    }
+}
+
 /**
  * Central orchestrator class for the Kritzel canvas system.
  * Manages workspaces, objects, selection, clipboard operations, and coordinates
@@ -24118,6 +24623,10 @@ class KritzelCore {
     _localizationManager;
     /** Manager for license validation and watermark gating */
     _licenseManager;
+    /** Manager for browser permission checks and permission prompts */
+    _permissionManager;
+    /** Manager for clipboard copy/cut/paste orchestration */
+    _clipboardManager;
     /** Per-core registry of drawing tools (one instance per editor). */
     _toolRegistry;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances */
@@ -24180,6 +24689,13 @@ class KritzelCore {
     get licenseManager() {
         return this._licenseManager;
     }
+    /**
+     * Gets the browser permission manager.
+     * @returns The KritzelBrowserPermissionManager for browser permission checks and requests
+     */
+    get permissionManager() {
+        return this._permissionManager;
+    }
     /**
      * Gets the tool registry scoped to this core instance.
      * @returns The KritzelToolRegistry owned by this core
@@ -24187,6 +24703,13 @@ class KritzelCore {
     get toolRegistry() {
         return this._toolRegistry;
     }
+    /**
+     * Gets the clipboard manager scoped to this core instance.
+     * @returns The KritzelClipboardManager owned by this core
+     */
+    get clipboardManager() {
+        return this._clipboardManager;
+    }
     /**
      * Gets the editor ID used for namespacing storage keys.
      * @returns The editor ID or undefined if not set
@@ -24234,6 +24757,8 @@ class KritzelCore {
         this._themeManager = new schema_constants.KritzelThemeManager(this);
         this._localizationManager = new schema_constants.KritzelLocalizationManager(this);
         this._licenseManager = new schema_constants.KritzelLicenseManager(this);
+        this._permissionManager = new KritzelBrowserPermissionManager(this);
+        this._clipboardManager = new KritzelClipboardManager(this);
         this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new schema_constants.KritzelAssetResolver();
     }
@@ -24731,216 +25256,6 @@ class KritzelCore {
             this.rerender();
         }
     }
-    /**
-     * Copies the currently selected objects to the clipboard.
-     * Creates deep copies of objects and tracks ID mappings for anchor remapping.
-     */
-    copy() {
-        const selectionGroup = this._store.selectionGroup;
-        if (selectionGroup) {
-            // Copy each object and store them in an array, also track the ID mapping
-            const idMapping = new Map();
-            const copiedObjects = selectionGroup.objects
-                .sort((a, b) => a.zIndex - b.zIndex)
-                .map(obj => {
-                const copiedObj = obj.copy();
-                // Map: newId -> originalId
-                idMapping.set(copiedObj.id, obj.id);
-                return copiedObj;
-            });
-            this._store.state.copiedObjects = copiedObjects;
-            this._store.state.copiedObjectIdMapping = idMapping;
-        }
-    }
-    /**
-     * Cuts the currently selected objects (copy then delete).
-     * Objects are copied to clipboard and then removed from the canvas.
-     */
-    cut() {
-        const selectionGroup = this._store.selectionGroup;
-        if (!selectionGroup) {
-            return;
-        }
-        // Copy first, then delete
-        this.copy();
-        this.delete();
-    }
-    /**
-     * Pastes objects from the clipboard to the canvas.
-     * Handles positioning (explicit, offset, or centered for cross-workspace paste),
-     * workspace assignment, z-index ordering, group children, and anchor remapping.
-     * Creates a selection group containing the pasted objects.
-     * @param x - Optional explicit X position for paste
-     * @param y - Optional explicit Y position for paste
-     */
-    paste(x, y) {
-        const copiedObjects = this._store.state.copiedObjects;
-        if (!copiedObjects || copiedObjects.length === 0) {
-            return;
-        }
-        const activeWorkspace = this._store.state.activeWorkspace;
-        const originalIdMapping = this._store.state.copiedObjectIdMapping;
-        // Check if we're pasting from a different workspace
-        const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
-        // Calculate the bounding box of all copied objects
-        const minX = Math.min(...copiedObjects.map(obj => obj.translateX));
-        const minY = Math.min(...copiedObjects.map(obj => obj.translateY));
-        // Determine the paste position
-        let pasteX;
-        let pasteY;
-        if (x !== undefined && y !== undefined) {
-            // Explicit position provided (e.g., right-click paste)
-            pasteX = x;
-            pasteY = y;
-        }
-        else if (isDifferentWorkspace) {
-            // Pasting to different workspace without explicit position
-            // Keep original position; will be centered by centerInViewport() later
-            pasteX = minX;
-            pasteY = minY;
-        }
-        else {
-            // Same workspace paste: offset by 25 pixels from original position
-            pasteX = minX + 25 / this._store.state.scale;
-            pasteY = minY + 25 / this._store.state.scale;
-        }
-        // Calculate the offset to apply to all objects
-        const offsetX = pasteX - minX;
-        const offsetY = pasteY - minY;
-        this.removeSelectionGroup();
-        this.removeSelectionBox();
-        // Create a new selection group for the pasted objects
-        const selectionGroup = schema_constants.KritzelSelectionGroup.create(this);
-        // Build a reverse mapping: originalId -> newCopiedObjectId
-        // This is used to remap anchor references from original IDs to the copied object IDs
-        const originalToNewIdMap = new Map();
-        if (originalIdMapping) {
-            originalIdMapping.forEach((originalId, copiedId) => {
-                originalToNewIdMap.set(originalId, copiedId);
-            });
-        }
-        // Precompute zIndex once to avoid O(N * total_objects) repeated scans
-        const baseZIndex = this._store.currentZIndex;
-        // Batch all inserts and updates in a single Y.js transaction to avoid
-        // N separate observer callbacks and N rerenders (fires only once at commit)
-        this._store.objects.transaction(() => {
-            // Recursively flush a group's pending children (and any nested groups'
-            // pending children) into the store. Without recursion, nested groups
-            // would have their grandchildren stranded in `_pendingChildren` and they
-            // would never appear on the canvas, even though the parent group's
-            // bounding box looks correct.
-            const flushPendingChildren = (group, parentZIndex) => {
-                if (group._pendingChildren.length === 0) {
-                    return;
-                }
-                const pendingChildren = group._pendingChildren;
-                group._pendingChildren = [];
-                pendingChildren.forEach((child, childIndex) => {
-                    if (child.workspaceId !== activeWorkspace.id) {
-                        child.workspaceId = activeWorkspace.id;
-                    }
-                    child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
-                    child.zIndex = parentZIndex + childIndex + 1;
-                    // Recurse before adding so grandchildren are inserted as well
-                    if (schema_constants.KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
-                        flushPendingChildren(child, child.zIndex);
-                    }
-                    this.addObject(child);
-                });
-                group.finalize();
-            };
-            const newlyAddedObjects = [];
-            // First add all copied objects to the objectsMap with updated positions
-            copiedObjects.forEach((obj, i) => {
-                // Update workspace if pasting to a different workspace
-                if (obj.workspaceId !== activeWorkspace.id) {
-                    obj.workspaceId = activeWorkspace.id;
-                }
-                // Update position
-                obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
-                // Update z-index
-                obj.zIndex = baseZIndex + i;
-                // Handle KritzelGroup: also add pending children (and grandchildren) with offset
-                if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
-                    flushPendingChildren(obj, obj.zIndex);
-                }
-                // Add to objectsMap
-                this.addObject(obj);
-                newlyAddedObjects.push(obj);
-                // Add to selection group
-                selectionGroup.addOrRemove(obj);
-            });
-            this.engine.emitObjectsAdded(newlyAddedObjects);
-            // Update line anchors to point to the newly pasted objects
-            // Only remap if the anchor target was also part of the copied selection
-            copiedObjects.forEach(obj => {
-                if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
-                    let updated = false;
-                    if (obj.startAnchor && originalToNewIdMap.has(obj.startAnchor.objectId)) {
-                        obj.startAnchor = { objectId: originalToNewIdMap.get(obj.startAnchor.objectId) };
-                        updated = true;
-                    }
-                    if (obj.endAnchor && originalToNewIdMap.has(obj.endAnchor.objectId)) {
-                        obj.endAnchor = { objectId: originalToNewIdMap.get(obj.endAnchor.objectId) };
-                        updated = true;
-                    }
-                    // If anchors were updated, rebuild the anchor index and persist the change
-                    if (updated) {
-                        this._store.objects.update(obj);
-                    }
-                }
-            });
-        });
-        // Rebuild anchor index after all anchor updates
-        this._anchorManager.rebuildIndex();
-        // Mark selection group as selected
-        selectionGroup.isSelected = true;
-        // Set rotation for single object
-        if (copiedObjects.length === 1) {
-            selectionGroup.rotation = copiedObjects[0].rotation;
-        }
-        // For cross-workspace paste, set the selection group's position before inserting
-        // it into the store. This mirrors the existing pattern where objects have
-        // updatePosition called before addObject, so the correct position is captured
-        // in the single initial insert with no separate Yjs update (and no extra undo step).
-        if (isDifferentWorkspace) {
-            if (x !== undefined && y !== undefined) {
-                // Explicit cursor position provided (e.g. right-click paste)
-                selectionGroup.updatePosition(x, y);
-            }
-            else {
-                // Ctrl+V paste: center objects in the current viewport
-                selectionGroup.centerInViewport();
-            }
-        }
-        // Add the selection group (inserts with the already-adjusted position)
-        this.addSelectionGroup(selectionGroup);
-        // Bring pasted objects into view with a smooth animation if they are not
-        // fully visible. These only mutate in-memory viewport state (scale, translateX/Y)
-        // and do not produce any Yjs writes, so they have no impact on the undo history.
-        this.engine.viewport.bringIntoViewIfNeeded(selectionGroup);
-        this._store.state.isSelecting = false;
-        // Defer creating copies for future pastes to next frame to avoid
-        // doubling the object creation cost in the current paste frame
-        requestAnimationFrame(() => {
-            const newSelectionGroup = this._store.selectionGroup;
-            if (newSelectionGroup) {
-                const newIdMapping = new Map();
-                const newCopiedObjects = newSelectionGroup.objects
-                    .sort((a, b) => a.zIndex - b.zIndex)
-                    .map(obj => {
-                    const copiedObj = obj.copy();
-                    newIdMapping.set(copiedObj.id, obj.id);
-                    return copiedObj;
-                });
-                this._store.state.copiedObjects = newCopiedObjects;
-                this._store.state.copiedObjectIdMapping = newIdMapping;
-            }
-        });
-        this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
-        this.engine.emitObjectsChange();
-        this.rerender();
-    }
     /**
      * Moves objects one step forward in the z-order stack.
      * @param object - Optional specific object to move; defaults to all selected objects
@@ -27086,6 +27401,8 @@ const KritzelEngine = class {
     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() {
@@ -27200,19 +27517,56 @@ const KritzelEngine = class {
         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
@@ -27220,7 +27574,7 @@ const KritzelEngine = class {
      * 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)) {
@@ -27316,11 +27670,11 @@ const KritzelEngine = class {
     }
     /** 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.
@@ -27328,7 +27682,16 @@ const KritzelEngine = class {
      * @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: schema_constants.ObjectHelper.generateUUID(),
+            });
+            return;
+        }
+        this.core.clipboardManager.paste(x, y);
     }
     /**
      * Moves an object one layer forward in the z-order.
@@ -27819,10 +28182,6 @@ const KritzelEngine = class {
     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();
@@ -28479,6 +28838,7 @@ const KritzelEngine = class {
         this.objectsInViewportChange = index.createEvent(this, "objectsInViewportChange");
         this.viewportChange = index.createEvent(this, "viewportChange");
         this.awarenessChange = index.createEvent(this, "awarenessChange");
+        this.notificationsChange = index.createEvent(this, "notificationsChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
@@ -28757,7 +29117,6 @@ const KritzelEngine = class {
             this.core.resetActiveShape();
         }
         this.core.store.state.skipContextMenu = false;
-        this.core.store.state.copiedObjects = undefined;
         if (activeTool) {
             this.activeToolChange.emit(activeTool);
         }
@@ -29409,7 +29768,7 @@ const KritzelExport = class {
         return (index.h("div", { class: "export-tab-content" }, index.h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (index.h(index.Host, { key: 'ff6ce7e5d3a0a7a024148529f86bf3ec7ffb0333' }, index.h("kritzel-dialog", { key: '9051d262450af5fbe98959092f6bb0ac25ab43ce', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: '21f404a2101d5cf1d24aeeee663d8fb1854b9574', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '80db6cda288d1b7019387a2f1ade278475ad6e24', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: '45809f91ddd63c74f5a4b3a2e266919f244c6109', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (index.h(index.Host, { key: 'fd219fffd4d8bb528e6a90055c2b43a5f5a73060' }, index.h("kritzel-dialog", { key: '9f4ba5b05f5ad31084aab457386a86cbc6d4f2bc', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: '920bb8f20b42897680084bde47270b3812e2f3e4', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '7090bd0a371457adceaa4bd7461a616839a66349', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'ddf36c1e7cb81409c2cecfa6585e0f1dd7aca2c3', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -29424,7 +29783,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: '49c44f7fef61bd7116e63bbe9522b0a0e22de116' }, index.h("div", { key: '4d130682f67e9c0d758cb6194e6a95f15bceb2ee', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'e37350dd092fb7c81a5624bfdc39c3b9af66b894' }, index.h("div", { key: 'a962ccc23a48f62b86d49ae41b1c9c27bdc9a5b9', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -29500,7 +29859,7 @@ const KritzelFontSize = class {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: '2083b05b3fdc9940c26dd90dbf9e097564ee976d' }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'a314e990b56cb4e819c4d83a139016b1658606b8' }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -29567,7 +29926,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (index.h(index.Host, { key: '8584ea0fa1a2cf0b9518ea978303837da5bfaf31' }, index.h("div", { key: 'e9f3ac340f17580221d1a86c8eb913fce2acdf49', class: "input-container" }, this.label && index.h("label", { key: 'b0d4c0250b07d83a3cd99e0ab18ed672a29de5f0', class: "input-label" }, this.label), index.h("div", { key: '5044bcff621d6c6850ef3d225608427401b75ebd', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: 'f8d057840e975d900c37a891268f39edb5128d49', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '4ae299b88798767b13e7126f88d3bd4703c91938', class: "input-suffix" }, this.suffix)))));
+        return (index.h(index.Host, { key: '7e16272802a5485207721f4f01ddf8e956b56dac' }, index.h("div", { key: 'ab60dacd08c6199db507d896c00cd0c788ecf7fa', class: "input-container" }, this.label && index.h("label", { key: 'e2e5769ca2954442da5a0f2a2abb07847986eac8', class: "input-label" }, this.label), index.h("div", { key: 'e7131f6d1a770cf71de9f7086e3a8a092296b80e', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: '565cb30ed36818badc148475c596b468cdd2a65b', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: 'ec4afb63443b6c89a829e515df7d33066f0f8def', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -29707,7 +30066,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '443d817d6eba7b9fcd31cab652293d7c01fc5ffa' }, index.h("kritzel-dialog", { key: '55214d78abb10f7e2ba789e10d98bf7f3287ff6a', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '31806a7a7c98c2210b7f60d2e0816a8ebc14aff3', class: "login-content" }, this.subtitle && (index.h("p", { key: '7edb2bc7d25cb3c8589594791822e62d035cd3a6', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '3b7731d9cfb98915ebe07b54a07991e03716ce5c', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
+        return (index.h(index.Host, { key: '6ef65077c95d32fee8da4b70ad2e832ad1bb78f7' }, index.h("kritzel-dialog", { key: '04f3d3350393475c7267d8ca90c0b3f0fce10c38', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'c2ed4e339d86dcea23b4a0778b8966a6ae36107a', class: "login-content" }, this.subtitle && (index.h("p", { key: 'ae46baa70526d057b3427459903287489e645e08', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '1055d5861e5281be234094a3c5c86a6aaf58935f', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -29813,15 +30172,15 @@ const KritzelMasterDetail = class {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (index.h(index.Host, { key: '6429c72aaf47f08ba0bdf5e64829b133339dafab' }, index.h("div", { key: '02e4616c67843632d2291abe347ee6ef7a660b12', class: {
+        return (index.h(index.Host, { key: 'e094bc3df0e0d1598e84c9a17a033079b1db33f6' }, index.h("div", { key: '79509ba5d63703fe36650b07b5172f77bd6eafde', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: '35cf3e8f97819a313fa6c57cde0faf05677997eb', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
+            } }, index.h("nav", { key: '79d200d8c2e54789a33fc88b07c48f034de140ad', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index$1 === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: 'cc7c69eb7ef02096fb76dbce310740d21019e72f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: 'd10898c7eb8ec6d993024c7833e1f765a7b93079', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '5395af1bce2b91ade970ad68b1bb87b59e771dff', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '7a5a1ef33081c117f1b16f1da887577bd97d3681' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '642b65781509d192330bb2602dd081585d16f76d', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '18a922dbaad63f05bc3ca7de176de4996b5d7fcb', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: 'b31732cef2ffdb78e67be7ab793aaaf60e373763', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '48fe4ae631a8c0b2db9e4a232edb6300d603562c' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -29894,7 +30253,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '4e4e510d2b1b5834ba12739d95e7c33268c005a6', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'ee60d7f4ceefda5fcdcfb64956b20d42b703c231', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (index.h(index.Host, { key: '6dfdc7928ae69aa191b2c64f9db79801e6978e92', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'ab8fa25f1b6ee0b7960cb0df84c40b1a7648c4e9', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -29999,12 +30358,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'ac91e3534c71074634ba053adc02f924e3fb5e14', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: 'dbdcfcee7fd36fe0b9c405dd3d1641aa62465e53', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, index.h("div", { key: 'f49cf8a96f7394e244ce53d3933137325221d578', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: 'ef97c7cf48190c1bbdde0dd9011cc1d5674b7c94', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -30077,11 +30436,80 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '1fe90a065ac35d1c8d2e9159d006b09e104750a3', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: '734234df7d24f712fa80c3871209142fed2b5ac2', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: 'a6a56bd5714a8780339390904f0469b395748ba9', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, index.h("kritzel-icon", { key: 'a4405ef4b8219f28fec095d4a56ac0aa027a9564', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '99aa8a87844232ec079b48f95afab54cbfe51a0b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'b6861ae2d553ebf5f5af7448c2b053576a380e8c', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (index.h(index.Host, { key: '3e7179c87713cb0087d2d2053f97db8f603f7321', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: '23d6be1ec2c25cd0335c1134f18aad7d5be25c85', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: 'e3064ba3f7b4c20e8447e16327b73d0f47f3842b', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, index.h("kritzel-icon", { key: 'feed090efe4f80c62a29c8146c2d7d8041624381', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '7b1a5db932c7bfb5ea8f4d666571c4f7fbbcd238', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '65b1225b15a494d49712ad1d2d108e90f09507e9', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
 
+const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
+
+const KritzelNotificationCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss");
+        this.hoverChange = index.createEvent(this, "hoverChange");
+    }
+    /** Notification data rendered by this card. */
+    notification;
+    /** Whether a formatted timestamp should be displayed when available. */
+    showTimestamp = true;
+    /** Locale used for formatting the timestamp. */
+    locale;
+    /** Emitted when the notification should be dismissed manually. */
+    dismiss;
+    /** Emitted when pointer hover state changes. */
+    hoverChange;
+    handleDismissClick = (event) => {
+        event.stopPropagation();
+        this.dismiss.emit();
+    };
+    handleMouseEnter = () => {
+        this.hoverChange.emit(true);
+    };
+    handleMouseLeave = () => {
+        this.hoverChange.emit(false);
+    };
+    get type() {
+        return this.notification?.type ?? 'info';
+    }
+    get role() {
+        return this.type === 'error' ? 'alert' : 'status';
+    }
+    getTypeLabel(type) {
+        switch (type) {
+            case 'warning':
+                return 'Warning';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Info';
+        }
+    }
+    formatTimestamp(timestamp) {
+        if (!timestamp || !this.showTimestamp) {
+            return null;
+        }
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(this.locale, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(date);
+    }
+    render() {
+        const notification = this.notification;
+        if (!notification) {
+            return index.h(index.Host, null);
+        }
+        const type = this.type;
+        const timestamp = this.formatTimestamp(notification.timestamp);
+        return (index.h(index.Host, null, index.h("article", { class: { card: true, [`type-${type}`]: true }, role: this.role, "aria-live": "polite", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("header", { class: "card-header" }, index.h("span", { class: "type-pill" }, this.getTypeLabel(type)), index.h("div", { class: "header-right" }, timestamp && (index.h("time", { class: "timestamp", dateTime: notification.timestamp?.toISOString() }, timestamp)), index.h("button", { class: "dismiss-button", type: "button", "aria-label": "Dismiss notification", onClick: this.handleDismissClick }, index.h("kritzel-icon", { name: "x", size: 16 })))), index.h("p", { class: "message" }, notification.message))));
+    }
+};
+KritzelNotificationCard.style = kritzelNotificationCardCss();
+
 const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
 
 const KritzelNumericInput = class {
@@ -30175,7 +30603,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (index.h(index.Host, { key: '3679786121f22a0aacb1b57701764b0bd0bf02f5' }, index.h("div", { key: 'e88251c356332f29d93f6a3d82f5154188243e4c', class: "input-container" }, this.label && index.h("label", { key: 'cb4d64a5acf94794a5876bc61dc13dd8159ad055', class: "input-label" }, this.label), index.h("div", { key: '9faad300f263e871322b68635feefb08172bd15c', class: "input-wrapper" }, index.h("input", { key: 'dd58ade6fe8454a3e4f67fddbb135d279f1147a8', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: 'a959beb441fe2143dc9c1c69347194e024362927', class: "spinner-buttons" }, index.h("button", { key: '6e2129f36080317e68b6fe1c05e69ea4e655fd20', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '47b5e178f82ef4eb6f2c5d888496ed95683c2f6d', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '6d5eb31ac5829b1e024822786beaafd347081c7e', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '5a897f0b29ce89d5bd94327d2055753d06148c89', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '19ff176c07e1c2a18f708debc7c7f3953f2219cb', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '0c1289eb009b62ea36f7397811f553a4e7e669f6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (index.h(index.Host, { key: '008f18fc5ab81adcd82364706ca7d4c39ea39d77' }, index.h("div", { key: '5d91b2ec6e0458d186d923c422e8f6461ac7c51a', class: "input-container" }, this.label && index.h("label", { key: '45c911f1e11ff8289ab876192511f506eb65c940', class: "input-label" }, this.label), index.h("div", { key: 'f5e0bd1610a4085a291cc1d32787b68066757c69', class: "input-wrapper" }, index.h("input", { key: '897b1af7725f59df86a530836dda802e8cb04038', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: '1acab70c82ff7431f916685084a6e5dd827cdca3', class: "spinner-buttons" }, index.h("button", { key: 'd93c4bec338d49ead87897baf61d2e036999a035', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '1e52d43c1eb1e9a43025302a7cd1f3d74c038c36', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '2a96516390bd9caf5b6a3617d07f7b10e2b42451', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '038cf61f4b8982a17bf5c279d78556872a03efea', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '30110c2ad975b51049a902953c52be66c1b7b0af', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '5abe735234debfa80a983d2fb60eeeaedb1dbf9b', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -30214,7 +30642,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (index.h(index.Host, { key: '9b580f61b9113950b7dff5339879374f7882e1bd' }, index.h("div", { key: '80fb336580c49d4d7026993499b9c008ac2a4594', class: "opacity-container" }, index.h("div", { key: 'fcdd8e523d5f2ff4758a4839f2f43cbdabba4c5a', class: "slider-wrapper" }, index.h("input", { key: '914473676adc7cb8974c55b82ba1abf5b2787288', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (index.h(index.Host, { key: 'e3a18981e5193ecd1ffaae5c807bdf6fa67e9695' }, index.h("div", { key: 'ee5ff0bb1355ca4f7e5d727ab8861933259c1a82', class: "opacity-container" }, index.h("div", { key: '6362fb3dba6910c55f5fe3b2a4245bcbb33dcdbb', class: "slider-wrapper" }, index.h("input", { key: 'f435f00fff7cc17ccdc181f39b29e032f6c5bf8d', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));
@@ -30567,7 +30995,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (index.h(index.Host, { key: 'f4ee3156b094ff1126db417f8396ca6cd0eb9aa4', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '87812f4ddd50a29c8a76938e8778500a4873a30c' })));
+        return (index.h(index.Host, { key: '95fbfde070f33a7f1b59026de7c687a2f6d0119c', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '14af59a35c5caf71079f7afb5ea6f4c5f13b05f8' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -30581,7 +31009,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.18';
+const KRITZEL_VERSION = '0.3.20';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 
@@ -30805,7 +31233,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8dc22abaa2a19a14f3bbef10e34d133b16510498' }, index.h("kritzel-dialog", { key: '54072bf290e2d86bb7ec40d8d3e630be46fa3e1e', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '5be80411c943ab4b7b90129527c8a0d147306a5f', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '6f26bd23bf7bb51653f09b96bafef221c51c2bfa' }, index.h("kritzel-dialog", { key: '49ffda0a422ae1c2c9c8e6e608bce532e7d4099e', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'ab5dc7952e555cae6f841ef4de2ab50d7039279b', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{
@@ -30938,9 +31366,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'b364f891659d54623b5472fe4cd5a9a85bc2fafa' }, index.h("kritzel-dialog", { key: '7059a3ede84bc67f7661efc8c84eae9b0c401d43', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: '1b0e7a9b5483a53f91e874075c0edb116b7474d6', class: "share-content" }, index.h("div", { key: '1568dc99224f0f7e2a370c22327dc313515e7d0f', class: "share-section" }, index.h("div", { key: 'a0032f6c870a448e817b013a715aadca1c455bb3', class: "share-row" }, index.h("div", { key: '3bd74cbebc122133354465163f9945dd207245b5', class: "share-label-group" }, index.h("label", { key: '0919fc24e5637c908c53b6914983833b6600e846', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: 'f87c9eae7112d284d7d917fae7c9c05fa6feb0ed', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: '031cf5d1ab48f2791454d4c7348352295359d225' }, index.h("kritzel-dialog", { key: 'cdce63c86ca329a97d1f1787adcb2b92bbfa40f9', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: 'dbb62b3cb175358955b11f6c2d74b0b0eecf212e', class: "share-content" }, index.h("div", { key: '8dc0eaea9644b60ff33812dac20def226fa14232', class: "share-section" }, index.h("div", { key: 'd3cfbf05c28a01681b1223edb6f0b73998ccfd08', class: "share-row" }, index.h("div", { key: '2400f062f92dd918341391cf71086c2676f7fc66', class: "share-label-group" }, index.h("label", { key: 'ab01691b9f53f59f92116a2994b6e3551d347c7b', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: 'fd830ad21e32e4fc5d8ba97d5cea7ef8da15fba4', class: "share-description" }, this.internalIsPublic
             ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
-            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), index.h("kritzel-slide-toggle", { key: '81ccfb76255d40da954cfdcbc486bdbb7dc4bff4', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: 'c72da3550416ebfef5c24690591b212df70cb4db', class: "share-section" }, index.h("div", { key: 'c3dd4bce7d57e60d09989bff6dd1d828a613b425', class: "share-url-container" }, index.h("input", { key: '67aab8a65f54ea67392a9874e949d6d1af519e0f', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'c31d48fe67cdd12aa517e20bac54ac74c05abd04', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, index.h("kritzel-icon", { key: '08ed01ed081e955e28eaed577438cd0008eaacf4', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), index.h("kritzel-slide-toggle", { key: '6f1a71ba524b34753ccd5437eab00bfcbeffdd79', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: '298680e1afdf0094c5393aa95c4983a0a8dd5e18', class: "share-section" }, index.h("div", { key: '546645a748cf9a42df0c8163f2478ef31445273a', class: "share-url-container" }, index.h("input", { key: '9d5b93d762d1cd899f3fc8041380bae603a4919c', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: '747a7ca4a25827de6934b7df30cabc2db4583e1b', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, index.h("kritzel-icon", { key: '096ca9a0527796462769dc9d42dd81d8f97f2865', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -30978,7 +31406,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '92aefb30139abd512c02c99f5c532cb69daab8c3', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '53fc90f3a11055e0b16358be0e3beed2ed25bc48', class: "toggle-track" }, index.h("div", { key: 'e0a0cecb9ede9c8e932cbb6fa7cdc359c07be8db', class: "toggle-thumb" }))));
+        return (index.h(index.Host, { key: '5850c758ccf3263b21c397219bf2301fa088087d', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'df0adeca0447a13d5499219ac9d27b526252fdbe', class: "toggle-track" }, index.h("div", { key: '3938239bbdca29e62ed72229dfcf1904fcbaa983', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -31078,7 +31506,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: '39516b2486a27534273b6bf4def6b11790aa0ed5', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '19c4a58deb3992857b0e42e4a035a15d0980da22', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '4c8e7e09e60717b1653251468c2a25d41c4b1921', name: this.buttonIcon })), index.h("div", { key: '53617db6b630dfb5320e7309dcbc9f7288ff8974', class: "split-divider" }), index.h("button", { key: '5134f88ed43558ff0cb11b8ef29cf2b370aad4ee', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, index.h("kritzel-icon", { key: '41f39a601ae91d4faaf54c1ca39c90e27e084d31', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'dcfe82f72a53e9346b48d2ff6da236c1f1344f3f', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '1208990bff47de642eafa6ca8cfaa76de46ca87c', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: 'd6856a86b3be4d9a22c5e78df1bda19113cb988b', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'd26026af275a8bd5717254223d5829e3d7f02bcb', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '1b3e2f4c2f8245b281d0f85458fd6bcc0cc73c59', name: this.buttonIcon })), index.h("div", { key: 'b002b904e168d62075fa086c88df72e36cc8e8c2', class: "split-divider" }), index.h("button", { key: 'd39084da6775613f2c896f3fa1ae4e216505bacc', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, index.h("kritzel-icon", { key: 'b1bc427b0d7cd26a283dbeb772dee0a6d2ca172c', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'e76300f48a23772a5923ea2cbd0824590302e7e7', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'f110b9315ec63dca9bb1b615136b2d3e284567ba', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -31099,7 +31527,7 @@ const KritzelStrokeSize = class {
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: '20c11daaf60055262706b8177b1090bddd2d522c' }, index.h("div", { key: '1729e29d836f85fe3be984a5ee78a0debc0e6218', class: "size-grid" }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'bde2cc986aebbe869a3eea026654229dee0d3e0e' }, index.h("div", { key: 'f84c4b844b865080f4e0e245bbccc6d77ac3f049', class: "size-grid" }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -31480,14 +31908,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '57c0c2ddbe3f88815b975b7cf5b02c7da389b7f9', style: {
+        return (index.h(index.Host, { key: 'ba4d13171aa25acac6c615ee12f35eab96d0aad6', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, index.h("div", { key: '3ab17ef4ba55ed39458814685574b0c00504a07d', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'b0aa1eb2c9363644939bcc59a80d0294787f0946' }))));
+            } }, index.h("div", { key: '923168164a018b08eac4246d88c7f8648b71d078', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'aafad8ab026d591ebb9e2aeffa15d07718eba261' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -31528,7 +31956,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '7738c225b6ec936e032770e0a7387b01718e94e0' }, index.h("button", { key: '8bc7346eb02e3c220ca9f9c06f1ae048e83667ee', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, index.h("kritzel-icon", { key: '3c7d87edc047113cac359f4782c7feeb53e18193', name: "undo" })), index.h("button", { key: '960dc7783cfe558f08749b9e71c6583c8d53c167', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, index.h("kritzel-icon", { key: 'b5ac0b631c51b8e6c2762b4887dcdef899327e52', name: "redo" })), index.h("div", { key: '4075c8eb7d8c57d5e93afb18282c7a50ec8e050e', class: "utility-separator" }), index.h("button", { key: '4e7c53a0933c527e84e0ad78519983446f10d23c', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, index.h("kritzel-icon", { key: 'f2d3d9817626c53e2e4c3d4c7c702705b25d7788', name: "delete" }))));
+        return (index.h(index.Host, { key: '22f3826d57b4d8f0e476951a860bde3dbc6c7200' }, index.h("button", { key: 'c3259c5e924b3cf74920dc4676ec8a682c3273e8', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, index.h("kritzel-icon", { key: 'ab4e9da6b60d9fa470fd8f5002f2acd5a758a8ba', name: "undo" })), index.h("button", { key: 'd17e25e78831b5ee13596cc2639cfbb5bd75a1cb', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, index.h("kritzel-icon", { key: '7ae8cec39ffab1303d76315ab85ac575b886b233', name: "redo" })), index.h("div", { key: 'f54e0262f133ad0eed0bbf853b67edd6c2f5e87f', class: "utility-separator" }), index.h("button", { key: '162d6e85965338b5700e661595dc6da6131ebccf', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, index.h("kritzel-icon", { key: 'dc00247ed45f09b86ad9314395f56e70d1122a4b', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -31549,7 +31977,7 @@ const KritzelWatermark = class {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (index.h(index.Host, { key: '7ec2a304ac711a4d2a54edef317eef9f4aad1d47' }, index.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 (index.h(index.Host, { key: '975534180d82064e38fa0289a2955e97a4ca0a08' }, index.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)));
     }
 };
 KritzelWatermark.style = kritzelWatermarkCss();
@@ -31737,7 +32165,7 @@ const KritzelZoomPanel = class {
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (index.h(index.Host, { key: '6c88ed18f63e1a4cfffef6ba3aa1772404908d59' }, index.h("div", { key: '18fcdf05a6822d2b9cf319059118b4851429283d', class: { panel: true, visible: this.visible } }, index.h("button", { key: 'df2c90912e091e4f2ca025dd246916e9fea6f7fa', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '293847a34220520592e74f50c89d57140d7f1cbe', name: "minus" })), index.h("span", { key: '575119b81e6d5d41f5802a29be1b586727968919', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: '8cdd7100aaeb313f2504351204ff512142414815', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: 'b792164a29dd43ef601a4f469fed440ee1d72510', name: "plus" })))));
+        return (index.h(index.Host, { key: '00d5c674581d4efa40da3a2ad5cbdd8295406590' }, index.h("div", { key: 'c7a4158f57b8062f37ee69f7b198442ec357d746', class: { panel: true, visible: this.visible } }, index.h("button", { key: 'e20344f5e522d481185a9dab7afdb2668cf44408', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '4fc1eeb78669894b0939a96c5e6945cea5056ac1', name: "minus" })), index.h("span", { key: 'ed26096e2ca76fe91b50d73ea6c9481996d01590', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: '42609c6e8558b7d9e9e348b864639ead6c4cc9bb', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: '3a321afb57f532ef867bae73751314f3fd355214', name: "plus" })))));
     }
 };
 KritzelZoomPanel.style = kritzelZoomPanelCss();
@@ -31770,6 +32198,7 @@ exports.kritzel_master_detail = KritzelMasterDetail;
 exports.kritzel_menu = KritzelMenu;
 exports.kritzel_menu_item = KritzelMenuItem;
 exports.kritzel_more_menu = KritzelMoreMenu;
+exports.kritzel_notification_card = KritzelNotificationCard;
 exports.kritzel_numeric_input = KritzelNumericInput;
 exports.kritzel_opacity_slider = KritzelOpacitySlider;
 exports.kritzel_pill_tabs = KritzelPillTabs;