kritzel-stencil 0.4.8 → 0.4.10

package/dist/cjs/kritzel-active-users_47.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-gDeS7USU.js');
+var schema_constants = require('./schema.constants-C6PknABJ.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -158,16 +158,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (index.h(index.Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
+        return (index.h(index.Host, { key: '90ce966bb2a374e68c544906c8c746df6cc01038', 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: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: '6799f4ad45c7d40ebaf640f191171ed6a5f14ae9', 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: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, index.h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '31548a495a86f033325c98cfcc0ae398b6bb8281', 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: '98cdcda64b900994b61a03179be9f2af17c489e8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '64e6a6ee67017c927dce0b51810a5bb02fc0d6d1', class: "avatar-default" }, index.h("svg", { key: '42f99637a3c23aaf10fa7c99753347ede1d518c0', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '28b52a68b36e98b0e14891fd225457be65f1bb46', 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": [{
@@ -492,7 +492,7 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '86a94bdc5bb02977214f999b7b880ce3193b6d8f' }, index.h("button", { key: '6a07c13c9986ebef6100140f7e702a1dfb5c2033', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: 'ebadc99b15f2f015ada8795fa05a3a64ccac9cb5', name: "chevrons-left" }))));
+        return (index.h(index.Host, { key: '2576489b9f97c77d1931e7c8496bae968d998f9d' }, index.h("button", { key: 'da891543ce8a9b5ccd2f4a461bdcdc7f3f9ad266', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: '4559cc932918707d5961c6237f3c5e23c9e4cc9d', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
@@ -519,11 +519,11 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, index.h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
+        return (index.h(index.Host, { key: '51621006f6b085db2b43accf52192f0674d2c50c' }, index.h("button", { key: '01ab2d96abe5ad34285e59f6fec66f6b21e91849', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '4b085139ea85ad9f836059f4cf2dde15b948e0e2' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
@@ -571,13 +571,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (index.h(index.Host, { key: 'e39c77c55942b9c615e404efabf4939b2cf05a34' }, index.h("div", { key: 'ac343295592ea80ca7d3da61ca1244dd1aaa50db', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: 'e797bfa6a2aed82d1913ec2f02f8b25a063564e5' }, index.h("div", { key: '5b62fcdbb2985b90fe0d7c7b65b507ec1c55e240', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '4c87934b3febd4c41874cd290d86a9a9a557e3e5', class: {
+            } }, index.h("div", { key: '2d62717ebf81be93219ebda7071c0ba992d7441a', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -633,7 +633,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: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, index.h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
+        return (index.h(index.Host, { key: '9a637b3a6946384a889f54dc3a635da7ff014439' }, index.h("div", { key: '4db8bbc7a234bfed26b60ed306a5f999875e2195', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -1202,13 +1202,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: 'a72f9b1befd185b67d24f6d7a4987ebeb4d6742d', style: { display: this.visible ? '' : 'none' }, class: {
+        return (index.h(index.Host, { key: '2a7595b72594df3e8ff9a103c3ff7dd70f0a8045', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '4e69324b23542878919119d10db98fc44b0dc536', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '1c2d9f14c53944f291cf49cbcd1bf282ad8a8683', 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: 'f4c7b461a433055512f5b6d397ab69d470531285', class: "kritzel-controls" }, index.h("div", { key: '53c27ef4ac2a9121f07ce91c82e63de5d7029de6', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '43d90c6031e164843dd43563d4fe75410b990278', 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: '8ac30e183885bc106033ca163aa7e5927802e67c', class: "kritzel-controls" }, index.h("div", { key: '74b2808a506e671682aed91107c7c9e27aa4b2c7', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '3fd693c993d5b11eadd2eec7481214fbc1550301', 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);
@@ -1238,10 +1238,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: '9a8bd38a8266f1bb5feddcb4e396bb20c25512fa', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: '6f16a8332dc6a082f2e6aedbec3e31398f2a8b66', 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: 'c889744c924d29f1e65cf67263be9ff708916610', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '9df35a6967a9738e24d328865b07b50328cef811', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '6f0079c879dc2ca5910193a02d19f246068d09e6', 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: 'a6af0ad5cc2fd0bbef0ade522f82ead53b30f92b', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '554d743fccfb62d8c368f2a5cdca232ae9842b7f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'af97d986d82c961d66c910f7edabd6e597ec59ab', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '3721e5463a85881c7e806d69c0a9524f44732978', 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: 'c6e3fe4a4a9b781db394073c8f929533487be760', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1250,7 +1250,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: '07a7fb2e0dc5c53a389da7f742322fdf489e0bd7', class: "color-container" }, index.h("kritzel-color", { key: '2987b76ca66d58a12ee71dd4c7d82a9c42480690', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: '9eeb3a9fc29f4848ee9f325d50b4cbfc5bfe5f1c', class: "color-container" }, index.h("kritzel-color", { key: '1d45edb7ed07a8d12ab55e374ea456b8e95c8d41', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -1284,7 +1284,7 @@ const KritzelCurrentUser = class {
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
     render() {
-        return (index.h(index.Host, { key: '3c23677e98ba459144fafde994dc66a14068c5b1' }, index.h("kritzel-avatar", { key: 'e5c04bf871f7808ab0e380770a2a94ddab8eac83', user: this.user, size: this.avatarSize })));
+        return (index.h(index.Host, { key: '19551eb12507f1384aedf3ca4ce5212eca509c24' }, index.h("kritzel-avatar", { key: 'e39405e8e6c2e77a8acf5f286fa3890e28e8ab17', user: this.user, size: this.avatarSize })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1325,7 +1325,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (index.h(index.Host, { key: 'd5be0723f615c45bac897d4f2a2ebe5c67b4769c' }, index.h("kritzel-dialog", { key: '4de42a3df3d18f96ddfbc362c05e98ade4aeaaf8', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '7908d833617b67a6663e41fd91599356ab66619b', class: "user-info" }, index.h("kritzel-avatar", { key: '93fd9ddb633ad9ad7e17a7c4292861b86ef132f1', user: this.user, size: 80 }), displayName && index.h("div", { key: 'dff873e3c8b643e7a52f212a3e00167adc301cf7', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '7b30a9930cd454ca040181cb11c1d000e408bfc8', class: "user-email" }, this.user.email), index.h("kritzel-button", { key: '04ea8cbadd90b149ee8f5bbac071040b74eb12b3', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+        return (index.h(index.Host, { key: '8f8e63ac6f789f2d0ee43b8b7439634411a91ac9' }, index.h("kritzel-dialog", { key: '4022a7251881f669f290e0a8beb9a39ef6242b19', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '4671f884c121cfaefdd8a47bd52b30acc2d7b345', class: "user-info" }, index.h("kritzel-avatar", { key: 'a1847b4b67302f3b7179e4e2b751f7f2106b76d4', user: this.user, size: 80 }), displayName && index.h("div", { key: 'b3d09b4c99d76014a2e36260edce52c39f1081e1', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: 'a76ce19cbd24ad536b022264dab6a83f4d1b36c2', class: "user-email" }, this.user.email), index.h("kritzel-button", { key: 'f125164a9d9362eedfbfff4fc2629f7ec055fc14', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -2265,6 +2265,19 @@ const KritzelEditor = class {
             group: 'clipboard',
             action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
         },
+        {
+            label: 'menu.export',
+            icon: 'upload',
+            group: 'clipboard',
+            visible: (_, objects) => this.canExportObjects(objects),
+            action: (_, objects) => {
+                const format = this.getPreferredExportFormat(objects);
+                if (!format) {
+                    return;
+                }
+                void this.engineRef.exportSelectedObject(format);
+            },
+        },
         {
             label: 'menu.order',
             icon: 'ordering',
@@ -2306,16 +2319,43 @@ const KritzelEditor = class {
                 },
             ],
         },
+        { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
+    ];
+    moreMenuItems = [
+        {
+            id: 'share',
+            label: 'menu.share',
+            icon: 'share',
+            isVisible: async () => schema_constants.hasRemoteSyncProvider(this.syncConfig),
+            action: () => {
+                if (!this.isLoggedIn && this.loginConfig) {
+                    this.openLoginDialog();
+                    return;
+                }
+                this.shareDialogRef.open();
+            },
+        },
         {
+            id: 'export',
             label: 'menu.export',
+            icon: 'upload',
+            action: async () => {
+                const preview = await this.engineRef.getScreenshot('png');
+                this.exportRef.open(preview ?? undefined);
+            },
+        },
+        {
+            id: 'import',
+            label: 'menu.import',
             icon: 'download',
-            group: 'export',
-            children: [
-                { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },
-                { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },
-            ],
+            action: () => this.engineRef.importFromFile(),
+        },
+        {
+            id: 'settings',
+            label: 'menu.settings',
+            icon: 'settings',
+            action: () => this.settingsRef.open(),
         },
-        { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
     ];
     themes;
     theme = 'light';
@@ -2387,6 +2427,9 @@ const KritzelEditor = class {
     isNotificationDismissing = false;
     contextMenuState;
     normalizedControls = [];
+    resolvedMoreMenuItems = [];
+    isSyncing = false;
+    isLoadingOverlayVisible = false;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -2429,6 +2472,18 @@ const KritzelEditor = class {
     onControlsChange(newValue) {
         this.normalizedControls = this.normalizeControls(newValue);
     }
+    onMoreMenuItemsChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onSyncConfigChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onLoginConfigChange() {
+        this.recomputeMoreMenuItems();
+    }
+    onUserChange() {
+        this.recomputeMoreMenuItems();
+    }
     onActiveWorkspaceIdChange(newId) {
         // If no ID is provided, do nothing (allows other logic to control activeWorkspace)
         if (!newId) {
@@ -2478,6 +2533,7 @@ const KritzelEditor = class {
         }
         this.resolvedTerms = await this.engineRef.getResolvedTerms();
         this.availableLocaleOptions = await this.engineRef.getAvailableLocaleOptions();
+        this.recomputeMoreMenuItems();
     }
     onTouchStart(event) {
         if (event.cancelable) {
@@ -2638,11 +2694,14 @@ const KritzelEditor = class {
     async exportViewportAsSvg(options) {
         return this.engineRef.exportViewportAsSvg(options);
     }
-    async exportSelectedObjectsAsPng() {
-        return this.engineRef.exportSelectedObjectsAsPng();
+    async getSelectedObjectSupportedExportFormats() {
+        return this.engineRef.getSelectedObjectSupportedExportFormats();
     }
-    async exportSelectedObjectsAsSvg() {
-        return this.engineRef.exportSelectedObjectsAsSvg();
+    async canExportSelectedObjectAs(format) {
+        return this.engineRef.canExportSelectedObjectAs(format);
+    }
+    async exportSelectedObject(format) {
+        return this.engineRef.exportSelectedObject(format);
     }
     async downloadAsJson(filename) {
         return this.engineRef.downloadAsJson(filename);
@@ -2709,6 +2768,7 @@ const KritzelEditor = class {
     currentUserDialogRef;
     componentWillLoad() {
         this.normalizedControls = this.normalizeControls(this.controls);
+        this.recomputeMoreMenuItems();
         this.loadSettingsFromStorage();
         this.applyTheme();
     }
@@ -2729,13 +2789,18 @@ const KritzelEditor = class {
             };
         });
     }
+    recomputeMoreMenuItems() {
+        if (this.moreMenuItems) {
+            this.resolvedMoreMenuItems = this.moreMenuItems;
+            return;
+        }
+    }
     applyTheme() {
         const themeObj = this.resolveThemeObject();
         schema_constants.ThemeHelper.applyThemeToElement(this.host, themeObj);
     }
     resolveThemeObject() {
-        return this.themes?.find(t => t.name === this.theme)
-            ?? (this.theme === 'dark' ? schema_constants.darkTheme : schema_constants.lightTheme);
+        return this.themes?.find(t => t.name === this.theme) ?? (this.theme === 'dark' ? schema_constants.darkTheme : schema_constants.lightTheme);
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
@@ -2770,7 +2835,7 @@ const KritzelEditor = class {
             syncConfig: this.syncConfig,
             assetStorageConfig: this.assetStorageConfig,
             loginConfig: this.loginConfig,
-            theme: this.theme
+            theme: this.theme,
         });
     }
     async onEngineReady(event) {
@@ -2933,43 +2998,6 @@ const KritzelEditor = class {
         }
         this.themeChange.emit(event.detail.theme);
     }
-    get moreMenuItems() {
-        return [
-            {
-                id: 'share',
-                label: this.resolvedTerms['menu.share'] ?? 'Share',
-                icon: 'share',
-                action: () => {
-                    if (!this.isLoggedIn && this.loginConfig) {
-                        this.openLoginDialog();
-                        return;
-                    }
-                    this.shareDialogRef.open();
-                },
-            },
-            {
-                id: 'export',
-                label: this.resolvedTerms['menu.export'] ?? 'Export',
-                icon: 'upload',
-                action: async () => {
-                    const preview = await this.engineRef.getScreenshot('png');
-                    this.exportRef.open(preview ?? undefined);
-                },
-            },
-            {
-                id: 'import',
-                label: this.resolvedTerms['menu.import'] ?? 'Import',
-                icon: 'download',
-                action: () => this.engineRef.importFromFile(),
-            },
-            {
-                id: 'settings',
-                label: this.resolvedTerms['menu.settings'] ?? 'Settings',
-                icon: 'settings',
-                action: () => this.settingsRef.open(),
-            }
-        ];
-    }
     handleToggleIsPublic = async (event) => {
         const isPublic = event.detail;
         const activeWorkspace = await this.engineRef.getActiveWorkspace();
@@ -2999,6 +3027,28 @@ const KritzelEditor = class {
     get isLoggedIn() {
         return !!this.user && !this.user.isGuest;
     }
+    canExportObjectsAs(objects, format) {
+        if (!objects || objects.length !== 1) {
+            return false;
+        }
+        const [selected] = objects;
+        if (!schema_constants.ObjectHelper.isKritzelExportable(selected)) {
+            return false;
+        }
+        return selected.getSupportedExportFormats().includes(format);
+    }
+    canExportObjects(objects) {
+        return this.canExportObjectsAs(objects, 'png') || this.canExportObjectsAs(objects, 'svg');
+    }
+    getPreferredExportFormat(objects) {
+        if (this.canExportObjectsAs(objects, 'png')) {
+            return 'png';
+        }
+        if (this.canExportObjectsAs(objects, 'svg')) {
+            return 'svg';
+        }
+        return null;
+    }
     async openLoginDialog() {
         this.loginDialogRef?.open();
     }
@@ -3175,41 +3225,41 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'ab06876e3a07e97c3788113ffd0483bbb2819d5b' }, index.h("div", { key: 'e393eacfad2b224a720e5a97b047af8dd3ce97a5', class: "editor-content", style: {
+        return (index.h(index.Host, { key: 'd9d87b5ca40972d7ab2c5986f340278347f78c6e' }, index.h("div", { key: 'd8da2ed24d19c550420689c6720dc491fe0d3a22', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: 'd9dcbd6859bea28d75c7f8b0cc26ea3ba58b2433', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '945953a6c95520316c4e0f35503a824414bd3c7a', 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: '8b345bf6ce0ec33ca35f1f630af2050b95bc6b74', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '1b965de38a7f1f40d5d91431801e873289416924', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: 'f165dc7acc5e1bc7923fec217ebc16fe4a3f2ece', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'c5cf7edc1f921e35310c89449f5a043dda171a04', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (index.h("kritzel-context-menu", { key: 'fc3417276f0034e7fc7e8360d3f3ce57106146b2', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, index.h("div", { key: '82a5d216e7c95307b1bdbd1f06fdfe881c1c50d4', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'de13673384b44bb6bd309a927a2866a9b78b519e', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'f68610d7d91713f7a0ec5f0135d208769f7fab9c', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '9d1f972fb67050b1f996e3088710713fa1219b9a', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '295eff0a02f7cc79ad8e80cda23baa3c576ce156', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: '1d1bf140ddfb7b927d30fb1d77e7b887240d7deb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (index.h("kritzel-context-menu", { key: '1062bc9554e5834ef2002fbfe953f7938866fb84', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
                 position: 'absolute',
                 left: `${this.contextMenuState.position.x}px`,
                 top: `${this.contextMenuState.position.y}px`,
                 zIndex: '10002',
-            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), index.h("kritzel-engine", { key: '0c9df0386d38a87f50d324cfc51307a1cb947a58', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), index.h("kritzel-sync-indicator", { key: '0094a026828473988f857d82cfccb811f36f049c', visible: this.isSyncing, text: "Syncing..." }), index.h("kritzel-loading-overlay", { key: '680096e20b6175104a866b9a92ca4c1d0087c93a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), index.h("kritzel-engine", { key: '0698a44fcbf2d6ea786d53502350ac0c9ffb9d66', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event) }), index.h("kritzel-controls", { key: '46d8e9c45c7bed24fc02d17c8fef836d596088d7', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), index.h("kritzel-controls", { key: '765a670807111ad68e9f8d14bdca2651a33704d4', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e3ef94509a82fe435f827b66cf1813969b7dec66', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '4e6cbdf85f550e6e3037dce3b910c0582ea0320b', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: 'a62df7f8a68cbed728b701894a5284c2bff39e1e', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '0b6daf9ff43551df9f86431d398a32913a845925', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e7c5ebab4a40b7ab4fa5d19d203129326c0009ed', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '0aa3891b553d2abcd06e635227fd6bb6656ed739', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '824244bbd78784c1d78ab89cc12e206ca61d84cc', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'baf4830b6b9ccb6241b1a1baa5cc6ff9d0295fb9', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '29d02ffd3358fe91d27435cc3fdd5f8ac2ad7cf5', 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: '57e2682450c71803cd49bfe65f16e02d9d3358bc', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '729ca599e46654bc1429b5d91ff73f26d9b6e7bb', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '84c07268072418a82cf504f16803c59a1e37c0ae', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: '55189e3da7899628b252e7995b20bc422fce2d5c', 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: '955d2a61b98d937f8eec39ab19f1b73e702c9fd7', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'c0885e0c8cab1a4cb50c8f6d4b17e03f32cc2b87', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: '8209b2562ffb821036bb8e4dacf052cacbe99bee', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                     this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
                 }
-            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (index.h("kritzel-button", { key: 'a55d85769bad635fcc7934f584bf1bf74c1e7ea6', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '67dd879ec3c55c98e32f6112ca53d925f47b56b4', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '5f13130099110eb472022099219e15877ceceb57', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && index.h("kritzel-button", { key: '9cec12de2207e8931a08c0a4f6bda39d039dfd1f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), index.h("kritzel-more-menu", { key: 'fe0e1413148b9ac64e5f058790ba96b856faef9e', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: 'ea06c88b0cba0464144bea1e2247b37cc5c44646', 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: 'cda0fcdcad75de8730ce10bda425cc0fbe01429a', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'e9a523d5989284b7e30ac44f55882a17c82c643b', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -3234,6 +3284,18 @@ const KritzelEditor = class {
         "controls": [{
                 "onControlsChange": 0
             }],
+        "moreMenuItems": [{
+                "onMoreMenuItemsChange": 0
+            }],
+        "syncConfig": [{
+                "onSyncConfigChange": 0
+            }],
+        "loginConfig": [{
+                "onLoginConfigChange": 0
+            }],
+        "user": [{
+                "onUserChange": 0
+            }],
         "activeWorkspaceId": [{
                 "onActiveWorkspaceIdChange": 0
             }],
@@ -25940,962 +26002,310 @@ class KritzelCore {
     }
 }
 
-/**
- * Helper class for exporting Kritzel objects to SVG format.
- * Generates clean, standards-compliant SVG markup from canvas objects.
- */
-class KritzelSvgExportHelper {
-    /**
-     * Calculates the combined bounding box that encompasses all objects.
-     * Uses rotatedBoundingBox to account for object rotation.
-     * @param objects - Array of objects to calculate bounds for
-     * @returns Combined bounding box, or null if no objects provided
-     */
-    static calculateCombinedBounds(objects) {
-        if (!objects || objects.length === 0) {
-            return null;
-        }
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        for (const obj of objects) {
-            const bbox = obj.rotatedBoundingBox;
-            minX = Math.min(minX, bbox.x);
-            minY = Math.min(minY, bbox.y);
-            maxX = Math.max(maxX, bbox.x + bbox.width);
-            maxY = Math.max(maxY, bbox.y + bbox.height);
-        }
-        return {
-            x: minX,
-            y: minY,
-            z: 1,
-            width: maxX - minX,
-            height: maxY - minY,
-        };
+function resolveUrl(url, baseUrl) {
+    // url is absolute already
+    if (url.match(/^[a-z]+:\/\//i)) {
+        return url;
     }
-    /**
-     * Generates a complete SVG document string from the given objects.
-     * @param objects - Objects to export
-     * @param options - Export options
-     * @returns SVG document string
-     */
-    static generateSvg(objects, options = {}) {
-        const { theme, padding = 0, includeXmlDeclaration = true, rasterSafeForCanvas = false, imageDataUrls } = options;
-        if (!objects || objects.length === 0) {
-            return '';
-        }
-        // Flatten groups to get all objects including nested children
-        const allObjects = this.flattenObjects(objects);
-        const bounds = this.calculateCombinedBounds(allObjects);
-        if (!bounds) {
-            return '';
+    // url is absolute already, without protocol
+    if (url.match(/^\/\//)) {
+        return window.location.protocol + url;
+    }
+    // dataURI, mailto:, tel:, etc.
+    if (url.match(/^[a-z]+:/i)) {
+        return url;
+    }
+    const doc = document.implementation.createHTMLDocument();
+    const base = doc.createElement('base');
+    const a = doc.createElement('a');
+    doc.head.appendChild(base);
+    doc.body.appendChild(a);
+    if (baseUrl) {
+        base.href = baseUrl;
+    }
+    a.href = url;
+    return a.href;
+}
+const uuid = (() => {
+    // generate uuid for className of pseudo elements.
+    // We should not use GUIDs, otherwise pseudo elements sometimes cannot be captured.
+    let counter = 0;
+    // ref: http://stackoverflow.com/a/6248722/2519373
+    const random = () => 
+    // eslint-disable-next-line no-bitwise
+    `0000${((Math.random() * 36 ** 4) << 0).toString(36)}`.slice(-4);
+    return () => {
+        counter += 1;
+        return `u${random()}${counter}`;
+    };
+})();
+function toArray(arrayLike) {
+    const arr = [];
+    for (let i = 0, l = arrayLike.length; i < l; i++) {
+        arr.push(arrayLike[i]);
+    }
+    return arr;
+}
+let styleProps = null;
+function getStyleProperties(options = {}) {
+    if (styleProps) {
+        return styleProps;
+    }
+    if (options.includeStyleProperties) {
+        styleProps = options.includeStyleProperties;
+        return styleProps;
+    }
+    styleProps = toArray(window.getComputedStyle(document.documentElement));
+    return styleProps;
+}
+function px(node, styleProperty) {
+    const win = node.ownerDocument.defaultView || window;
+    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
+    return val ? parseFloat(val.replace('px', '')) : 0;
+}
+function getNodeWidth(node) {
+    const leftBorder = px(node, 'border-left-width');
+    const rightBorder = px(node, 'border-right-width');
+    return node.clientWidth + leftBorder + rightBorder;
+}
+function getNodeHeight(node) {
+    const topBorder = px(node, 'border-top-width');
+    const bottomBorder = px(node, 'border-bottom-width');
+    return node.clientHeight + topBorder + bottomBorder;
+}
+function getImageSize(targetNode, options = {}) {
+    const width = options.width || getNodeWidth(targetNode);
+    const height = options.height || getNodeHeight(targetNode);
+    return { width, height };
+}
+function getPixelRatio() {
+    let ratio;
+    let FINAL_PROCESS;
+    try {
+        FINAL_PROCESS = process;
+    }
+    catch (e) {
+        // pass
+    }
+    const val = FINAL_PROCESS && FINAL_PROCESS.env
+        ? FINAL_PROCESS.env.devicePixelRatio
+        : null;
+    if (val) {
+        ratio = parseInt(val, 10);
+        if (Number.isNaN(ratio)) {
+            ratio = 1;
         }
-        // Add padding to bounds
-        const viewBoxX = bounds.x - padding;
-        const viewBoxY = bounds.y - padding;
-        const viewBoxWidth = bounds.width + padding * 2;
-        const viewBoxHeight = bounds.height + padding * 2;
-        // Collect all defs (markers, patterns, etc.)
-        const defs = this.collectDefs(allObjects, theme);
-        // Generate SVG elements for each object
-        const elements = objects
-            .sort((a, b) => a.zIndex - b.zIndex)
-            .map(obj => this.objectToSvgElement(obj, theme, imageDataUrls, rasterSafeForCanvas))
-            .filter(Boolean)
-            .join('\n  ');
-        const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
-        const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
-        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
-  ${elements}
-</svg>`;
     }
-    /**
-     * Flattens a list of objects, expanding groups into their children recursively.
-     * @param objects - Objects to flatten
-     * @returns Flat array of all objects including group children
-     */
-    static flattenObjects(objects) {
-        const result = [];
-        for (const obj of objects) {
-            if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
-                result.push(...this.flattenObjects(obj.children));
+    return ratio || window.devicePixelRatio || 1;
+}
+// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+const canvasDimensionLimit = 16384;
+function checkCanvasDimensions(canvas) {
+    if (canvas.width > canvasDimensionLimit ||
+        canvas.height > canvasDimensionLimit) {
+        if (canvas.width > canvasDimensionLimit &&
+            canvas.height > canvasDimensionLimit) {
+            if (canvas.width > canvas.height) {
+                canvas.height *= canvasDimensionLimit / canvas.width;
+                canvas.width = canvasDimensionLimit;
             }
             else {
-                result.push(obj);
+                canvas.width *= canvasDimensionLimit / canvas.height;
+                canvas.height = canvasDimensionLimit;
             }
         }
-        return result;
-    }
-    /**
-     * Resolves every image referenced by the given objects (including those
-     * nested inside groups) to an inlined `data:` URL, keyed by object id.
-     *
-     * This is required for export flows that rasterize the SVG (e.g. PNG
-     * export): an SVG loaded into an `<img>` element will NOT load external
-     * or `blob:` resources, so a `<image href="blob:...">` renders as a
-     * broken-image placeholder. Embedding the bytes as a base64 `data:` URL
-     * makes the image self-contained and survive rasterization.
-     *
-     * Resolution is best-effort: images that fail to resolve are simply
-     * omitted from the map, and the SVG falls back to whatever `href` the
-     * synchronous path would have produced.
-     * @param objects - Objects to inline images for
-     * @param assetResolver - Resolver used to fetch asset bytes; optional
-     * @returns Map of image object id -> inlined `data:` URL
-     */
-    static async resolveImageDataUrls(objects, assetResolver) {
-        const dataUrls = new Map();
-        if (!objects || objects.length === 0) {
-            return dataUrls;
+        else if (canvas.width > canvasDimensionLimit) {
+            canvas.height *= canvasDimensionLimit / canvas.width;
+            canvas.width = canvasDimensionLimit;
         }
-        const images = this.flattenObjects(objects).filter((obj) => schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelImage'));
-        await Promise.all(images.map(async (image) => {
-            // Legacy inline data URL is already embeddable as-is.
-            if (image.src?.startsWith('data:')) {
-                dataUrls.set(image.id, image.src);
-                return;
-            }
-            // A resolvedSrc that is itself a data URL can be embedded directly.
-            if (image.resolvedSrc?.startsWith('data:')) {
-                dataUrls.set(image.id, image.resolvedSrc);
-                return;
-            }
-            if (!image.assetId || !assetResolver) {
-                return;
-            }
+        else {
+            canvas.width *= canvasDimensionLimit / canvas.height;
+            canvas.height = canvasDimensionLimit;
+        }
+    }
+}
+function createImage(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            img.decode().then(() => {
+                requestAnimationFrame(() => resolve(img));
+            });
+        };
+        img.onerror = reject;
+        img.crossOrigin = 'anonymous';
+        img.decoding = 'async';
+        img.src = url;
+    });
+}
+async function svgToDataURL(svg) {
+    return Promise.resolve()
+        .then(() => new XMLSerializer().serializeToString(svg))
+        .then(encodeURIComponent)
+        .then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
+}
+async function nodeToDataURL(node, width, height) {
+    const xmlns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(xmlns, 'svg');
+    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
+    svg.setAttribute('width', `${width}`);
+    svg.setAttribute('height', `${height}`);
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    foreignObject.setAttribute('width', '100%');
+    foreignObject.setAttribute('height', '100%');
+    foreignObject.setAttribute('x', '0');
+    foreignObject.setAttribute('y', '0');
+    foreignObject.setAttribute('externalResourcesRequired', 'true');
+    svg.appendChild(foreignObject);
+    foreignObject.appendChild(node);
+    return svgToDataURL(svg);
+}
+const isInstanceOfElement = (node, instance) => {
+    if (node instanceof instance)
+        return true;
+    const nodePrototype = Object.getPrototypeOf(node);
+    if (nodePrototype === null)
+        return false;
+    return (nodePrototype.constructor.name === instance.name ||
+        isInstanceOfElement(nodePrototype, instance));
+};
+
+function formatCSSText(style) {
+    const content = style.getPropertyValue('content');
+    return `${style.cssText} content: '${content.replace(/'|"/g, '')}';`;
+}
+function formatCSSProperties(style, options) {
+    return getStyleProperties(options)
+        .map((name) => {
+        const value = style.getPropertyValue(name);
+        const priority = style.getPropertyPriority(name);
+        return `${name}: ${value}${priority ? ' !important' : ''};`;
+    })
+        .join(' ');
+}
+function getPseudoElementStyle(className, pseudo, style, options) {
+    const selector = `.${className}:${pseudo}`;
+    const cssText = style.cssText
+        ? formatCSSText(style)
+        : formatCSSProperties(style, options);
+    return document.createTextNode(`${selector}{${cssText}}`);
+}
+function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
+    const style = window.getComputedStyle(nativeNode, pseudo);
+    const content = style.getPropertyValue('content');
+    if (content === '' || content === 'none') {
+        return;
+    }
+    const className = uuid();
+    try {
+        clonedNode.className = `${clonedNode.className} ${className}`;
+    }
+    catch (err) {
+        return;
+    }
+    const styleElement = document.createElement('style');
+    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
+    clonedNode.appendChild(styleElement);
+}
+function clonePseudoElements(nativeNode, clonedNode, options) {
+    clonePseudoElement(nativeNode, clonedNode, ':before', options);
+    clonePseudoElement(nativeNode, clonedNode, ':after', options);
+}
+
+const WOFF = 'application/font-woff';
+const JPEG = 'image/jpeg';
+const mimes = {
+    woff: WOFF,
+    woff2: WOFF,
+    ttf: 'application/font-truetype',
+    eot: 'application/vnd.ms-fontobject',
+    png: 'image/png',
+    jpg: JPEG,
+    jpeg: JPEG,
+    gif: 'image/gif',
+    tiff: 'image/tiff',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+};
+function getExtension(url) {
+    const match = /\.([^./]*?)$/g.exec(url);
+    return match ? match[1] : '';
+}
+function getMimeType(url) {
+    const extension = getExtension(url).toLowerCase();
+    return mimes[extension] || '';
+}
+
+function getContentFromDataUrl(dataURL) {
+    return dataURL.split(/,/)[1];
+}
+function isDataUrl(url) {
+    return url.search(/^(data:)/) !== -1;
+}
+function makeDataUrl(content, mimeType) {
+    return `data:${mimeType};base64,${content}`;
+}
+async function fetchAsDataURL(url, init, process) {
+    const res = await fetch(url, init);
+    if (res.status === 404) {
+        throw new Error(`Resource "${res.url}" not found`);
+    }
+    const blob = await res.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = reject;
+        reader.onloadend = () => {
             try {
-                const blob = await assetResolver.fetchBlob(image.assetId);
-                dataUrls.set(image.id, await this.blobToDataUrl(blob));
+                resolve(process({ res, result: reader.result }));
             }
-            catch (err) {
-                console.warn(`[KritzelSvgExportHelper] Failed to inline image asset ${image.assetId} for export:`, err);
+            catch (error) {
+                reject(error);
             }
-        }));
-        return dataUrls;
+        };
+        reader.readAsDataURL(blob);
+    });
+}
+const cache = {};
+function getCacheKey(url, contentType, includeQueryParams) {
+    let key = url.replace(/\?.*/, '');
+    if (includeQueryParams) {
+        key = url;
     }
-    /**
-     * Reads a Blob into a base64 `data:` URL.
-     * @param blob - The blob to encode
-     * @returns Promise resolving to the data URL string
-     */
-    static async blobToDataUrl(blob) {
-        // Prefer FileReader in browser-like runtimes for efficiency.
-        const hasFileReader = typeof FileReader !== 'undefined';
-        if (hasFileReader) {
-            try {
-                return await new Promise((resolve, reject) => {
-                    const reader = new FileReader();
-                    reader.onload = () => {
-                        if (typeof reader.result === 'string') {
-                            resolve(reader.result);
-                            return;
-                        }
-                        reject(new Error('FileReader result is not a string'));
-                    };
-                    reader.onerror = () => reject(reader.error ?? new Error('Failed to read blob as data URL'));
-                    reader.readAsDataURL(blob);
-                });
-            }
-            catch {
-                // Fall through to the ArrayBuffer-based encoder.
+    // font resource
+    if (/ttf|otf|eot|woff2?/i.test(key)) {
+        key = key.replace(/.*\//, '');
+    }
+    return contentType ? `[${contentType}]${key}` : key;
+}
+async function resourceToDataURL(resourceUrl, contentType, options) {
+    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
+    if (cache[cacheKey] != null) {
+        return cache[cacheKey];
+    }
+    // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+    if (options.cacheBust) {
+        // eslint-disable-next-line no-param-reassign
+        resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime();
+    }
+    let dataURL;
+    try {
+        const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
+            if (!contentType) {
+                // eslint-disable-next-line no-param-reassign
+                contentType = res.headers.get('Content-Type') || '';
             }
-        }
-        const bytes = new Uint8Array(await blob.arrayBuffer());
-        const mimeType = blob.type || 'application/octet-stream';
-        return `data:${mimeType};base64,${this.uint8ToBase64(bytes)}`;
+            return getContentFromDataUrl(result);
+        });
+        dataURL = makeDataUrl(content, contentType);
     }
-    /**
-     * Encodes a byte array to base64 across browser and Node-like runtimes.
-     */
-    static uint8ToBase64(bytes) {
-        if (typeof Buffer !== 'undefined') {
-            return Buffer.from(bytes).toString('base64');
+    catch (error) {
+        dataURL = options.imagePlaceholder || '';
+        let msg = `Failed to fetch resource: ${resourceUrl}`;
+        if (error) {
+            msg = typeof error === 'string' ? error : error.message;
         }
-        let binary = '';
-        const chunkSize = 0x8000;
-        for (let i = 0; i < bytes.length; i += chunkSize) {
-            const chunk = bytes.subarray(i, Math.min(i + chunkSize, bytes.length));
-            binary += String.fromCharCode(...chunk);
-        }
-        if (typeof btoa === 'function') {
-            return btoa(binary);
-        }
-        throw new Error('No base64 encoder available in this runtime');
-    }
-    /**
-     * Collects SVG defs (markers, patterns, etc.) needed by the objects.
-     * @param objects - Objects to collect defs for
-     * @param theme - Theme for color resolution
-     * @returns Array of def element strings
-     */
-    static collectDefs(objects, theme) {
-        const defs = [];
-        for (const obj of objects) {
-            if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
-                if (obj.hasStartArrow) {
-                    defs.push(this.generateArrowMarker(obj, 'start', theme));
-                }
-                if (obj.hasEndArrow) {
-                    defs.push(this.generateArrowMarker(obj, 'end', theme));
-                }
-            }
-        }
-        return defs;
-    }
-    /**
-     * Generates an SVG marker element for line arrows.
-     * @param line - The line object
-     * @param end - Which end of the line ('start' or 'end')
-     * @param theme - Theme for color resolution
-     * @returns SVG marker element string
-     */
-    static generateArrowMarker(line, end, _theme) {
-        const markerId = end === 'start' ? line.startMarkerId : line.endMarkerId;
-        const size = line.getArrowSize(end);
-        const fill = line.getArrowFill(end);
-        const style = end === 'start' ? line.arrows?.start?.style : line.arrows?.end?.style;
-        const path = line.getArrowPath(style);
-        const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
-        const refX = 0;
-        const refY = size / 2;
-        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
-      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
-    </marker>`;
-    }
-    /**
-     * Converts a Kritzel object to its SVG element representation.
-     * @param object - The object to convert
-     * @param theme - Theme for color resolution
-     * @param imageDataUrls - Optional map of image id -> inlined data URL
-     * @returns SVG element string, or empty string if object type is not supported
-     */
-    static objectToSvgElement(object, theme, imageDataUrls, rasterSafeForCanvas = false) {
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
-            return this.pathToSvg(object, theme);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
-            return this.lineToSvg(object, theme);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
-            return this.shapeToSvg(object, theme);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
-            return this.textToSvg(object, theme, rasterSafeForCanvas);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
-            return this.imageToSvg(object, imageDataUrls);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
-            return this.customElementToSvg(object, rasterSafeForCanvas);
-        }
-        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
-            return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
-        }
-        return '';
-    }
-    /**
-     * Converts a KritzelPath to SVG.
-     * @param path - The path object
-     * @param theme - Theme for color resolution
-     * @returns SVG element string
-     */
-    static pathToSvg(path, theme) {
-        const transform = this.buildTransform(path);
-        const fill = schema_constants.KritzelColorHelper.resolveThemeColor(path.fill, theme);
-        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(path.stroke, theme);
-        const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
-        const scale = this.getObjectScale(path);
-        // Path needs to be wrapped in a g with translation since path.d uses local coordinates
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
-      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
-    </svg>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelLine to SVG.
-     * @param line - The line object
-     * @param theme - Theme for color resolution
-     * @returns SVG element string
-     */
-    static lineToSvg(line, theme) {
-        const transform = this.buildTransform(line);
-        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(line.stroke, theme);
-        const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
-        const scale = this.getObjectScale(line);
-        const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
-        const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
-      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
-    </svg>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelShape to SVG.
-     * @param shape - The shape object
-     * @param theme - Theme for color resolution
-     * @returns SVG element string
-     */
-    static shapeToSvg(shape, theme) {
-        const transform = this.buildTransform(shape);
-        const fill = schema_constants.KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
-        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
-        const opacity = shape.opacity !== 1 ? ` opacity="${shape.opacity}"` : '';
-        const scale = this.getObjectScale(shape);
-        // Get the SVG path for the shape
-        const pathD = shape.getSvgPath();
-        // Handle text content if present
-        let textContent = '';
-        if (shape.editor && !shape.editor.state.doc.textContent.trim()) ;
-        else if (shape.content) {
-            const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
-            if (textHtml) {
-                const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
-                textContent = `
-    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
-        ${textHtml}
-      </div>
-    </foreignObject>`;
-            }
-        }
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
-      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
-    </svg>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelText to SVG using foreignObject for rich text support.
-     * @param text - The text object
-     * @param theme - Theme for color resolution
-     * @returns SVG element string
-     */
-    static textToSvg(text, theme, rasterSafeForCanvas = false) {
-        if (rasterSafeForCanvas) {
-            return this.textToSvgRasterSafe(text, theme);
-        }
-        const transform = this.buildTransform(text);
-        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
-        const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
-        const bgColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
-        const scale = this.getObjectScale(text);
-        // Convert ProseMirror content to HTML
-        const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
-        // Calculate dimensions in SVG world units (world units = CSS px in a 1:1 SVG).
-        const width = text.totalWidth / scale;
-        const height = text.totalHeight / scale;
-        // Convert the font size from pt to SVG world units (px equivalent).
-        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
-        // We also bake in scaleFactor (user resize) and divide by the object scale so
-        // that the rendered font aligns with the world-unit dimensions above.
-        // The CSS transform: scale(scaleFactor) is removed from the div because the
-        // adjusted font-size already accounts for it – keeping both would double-scale
-        // the content and overflow the foreignObject.
-        const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
-        return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
-    </foreignObject>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelText to SVG using pure SVG text primitives.
-     * This path avoids `<foreignObject>`, which taints canvases when the
-     * generated SVG is rasterized through `<img>` and `drawImage`.
-     */
-    static textToSvgRasterSafe(text, theme) {
-        const transform = this.buildTransform(text);
-        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
-        const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
-        const bgColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
-        const scale = this.getObjectScale(text);
-        const width = text.totalWidth / scale;
-        const height = text.totalHeight / scale;
-        const lines = this.prosemirrorToPlainTextLines(text.content);
-        const resolvedLines = lines.length > 0 ? lines : [''];
-        // Convert the font size from pt to SVG world units (px equivalent).
-        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
-        // We also bake in scaleFactor (user resize) and divide by the object scale so
-        // that the rendered lines align with the world-unit bounding box dimensions above.
-        const resolvedFontSizePx = Math.max(1, text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale);
-        const lineHeight = resolvedFontSizePx * 1.2;
-        const startY = resolvedFontSizePx;
-        const bgRect = bgColor && bgColor !== 'transparent'
-            ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
-            : '';
-        const tspans = resolvedLines
-            .map((line, index) => {
-            const y = startY + index * lineHeight;
-            return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
-        })
-            .join('');
-        return `<g transform="${transform}"${opacity}>
-    ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelImage to SVG.
-     *
-     * Prefers an inlined `data:` URL from `imageDataUrls` (keyed by object
-     * id) when provided, so the embedded bytes survive rasterization to
-     * PNG. Falls back to `resolvedSrc` (populated by the renderer via the
-     * asset resolver) and finally the legacy inline `src` field for
-     * documents persisted before the asset layer existed.
-     *
-     * Note: a `blob:` `resolvedSrc` renders correctly on-canvas but becomes
-     * a broken-image placeholder once the SVG is loaded into an `<img>` and
-     * drawn to a canvas. Callers that rasterize the SVG must pass
-     * `imageDataUrls` (see {@link KritzelSvgExportHelper.resolveImageDataUrls}).
-     * @param image - The image object
-     * @param imageDataUrls - Optional map of image id -> inlined data URL
-     * @returns SVG element string
-     */
-    static imageToSvg(image, imageDataUrls) {
-        const transform = this.buildTransform(image);
-        const opacity = image.opacity !== 1 ? ` opacity="${image.opacity}"` : '';
-        const scale = this.getObjectScale(image);
-        // Calculate dimensions
-        const width = image.totalWidth / scale;
-        const height = image.totalHeight / scale;
-        const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
-        return `<g transform="${transform}"${opacity}>
-    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
-  </g>`;
-    }
-    /**
-     * Converts a KritzelCustomElement to SVG.
-     * SVG mode: embeds HTML in foreignObject (best-effort).
-     * PNG/raster mode: renders placeholder rect with warning.
-     * @param obj - The custom element object
-     * @param rasterSafeForCanvas - If true, render placeholder (for PNG export)
-     * @returns SVG element string
-     */
-    static customElementToSvg(obj, rasterSafeForCanvas = false) {
-        const transform = this.buildTransform(obj);
-        const opacity = obj.opacity !== 1 ? ` opacity="${obj.opacity}"` : '';
-        const scale = this.getObjectScale(obj);
-        const width = obj.totalWidth / scale;
-        const height = obj.totalHeight / scale;
-        if (rasterSafeForCanvas) {
-            // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
-            console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
-            return `<g transform="${transform}"${opacity}>
-      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
-      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
-    </g>`;
-        }
-        // SVG export: use foreignObject to embed HTML
-        const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
-        return `<g transform="${transform}"${opacity}>
-      <foreignObject x="0" y="0" width="${width}" height="${height}">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
-          ${html}
-        </div>
-      </foreignObject>
-    </g>`;
-    }
-    /**
-     * Converts a KritzelGroup to SVG by recursively converting children.
-     * @param group - The group object
-     * @param theme - Theme for color resolution
-     * @param imageDataUrls - Optional map of image id -> inlined data URL
-     * @returns SVG element string
-     */
-    static groupToSvg(group, theme, imageDataUrls, rasterSafeForCanvas = false) {
-        const children = group.children
-            .sort((a, b) => a.zIndex - b.zIndex)
-            .map(child => this.objectToSvgElement(child, theme, imageDataUrls, rasterSafeForCanvas))
-            .filter(Boolean)
-            .join('\n    ');
-        if (!children) {
-            return '';
-        }
-        const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
-  </g>`;
-    }
-    /**
-     * Builds a transform attribute string for an object.
-     * Combines translation and rotation.
-     * @param object - The object to build transform for
-     * @returns Transform attribute value string
-     */
-    static buildTransform(object) {
-        const transforms = [];
-        const scale = this.getObjectScale(object);
-        // Translation
-        transforms.push(`translate(${object.translateX}, ${object.translateY})`);
-        // Rotation around center
-        if (object.rotation !== 0) {
-            const centerX = object.totalWidth / 2 / scale;
-            const centerY = object.totalHeight / 2 / scale;
-            const degrees = object.rotation * (180 / Math.PI);
-            transforms.push(`rotate(${degrees}, ${centerX}, ${centerY})`);
-        }
-        return transforms.join(' ');
-    }
-    /**
-     * Returns a safe non-zero scale for export geometry calculations.
-     */
-    static getObjectScale(object) {
-        const scale = object.scale ?? 1;
-        return scale === 0 ? 1 : scale;
-    }
-    /**
-     * Converts ProseMirror JSON content to HTML string.
-     * @param content - ProseMirror document JSON
-     * @param context - The text or shape object for styling context
-     * @param theme - Theme for color resolution
-     * @returns HTML string
-     */
-    static prosemirrorToHtml(content, _context, theme) {
-        if (!content || !content.content) {
-            return '';
-        }
-        return content.content
-            .map((node) => this.nodeToHtml(node, theme))
-            .join('');
-    }
-    /**
-     * Converts a ProseMirror node to HTML.
-     * @param node - ProseMirror node JSON
-     * @param theme - Theme for color resolution
-     * @returns HTML string
-     */
-    static nodeToHtml(node, theme) {
-        if (!node)
-            return '';
-        switch (node.type) {
-            case 'paragraph':
-                const pContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
-                return `<p style="margin: 0;">${pContent || '<br/>'}</p>`;
-            case 'text':
-                let text = this.escapeHtml(node.text || '');
-                if (node.marks) {
-                    for (const mark of node.marks) {
-                        text = this.applyMark(text, mark, theme);
-                    }
-                }
-                return text;
-            case 'hard_break':
-                return '<br/>';
-            case 'bullet_list':
-                const blContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
-                return `<ul style="margin: 0; padding-left: 1.5em;">${blContent}</ul>`;
-            case 'ordered_list':
-                const olContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
-                return `<ol style="margin: 0; padding-left: 1.5em;">${olContent}</ol>`;
-            case 'list_item':
-                const liContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
-                return `<li>${liContent}</li>`;
-            default:
-                // For unknown node types, try to render content
-                if (node.content) {
-                    return node.content.map((n) => this.nodeToHtml(n, theme)).join('');
-                }
-                return '';
-        }
-    }
-    /**
-     * Converts ProseMirror JSON content to plain-text lines.
-     * Used by raster-safe SVG export, which cannot depend on HTML/foreignObject.
-     */
-    static prosemirrorToPlainTextLines(content) {
-        if (!content || !Array.isArray(content.content)) {
-            return [];
-        }
-        const plainText = content.content
-            .map((node) => this.nodeToPlainText(node))
-            .join('')
-            .replace(/\r\n/g, '\n')
-            .replace(/\n+$/, '');
-        if (!plainText) {
-            return [];
-        }
-        return plainText.split('\n');
-    }
-    /**
-     * Converts a ProseMirror node tree into plain text.
-     */
-    static nodeToPlainText(node) {
-        if (!node) {
-            return '';
-        }
-        switch (node.type) {
-            case 'text':
-                return node.text || '';
-            case 'hard_break':
-                return '\n';
-            case 'paragraph': {
-                const paragraph = Array.isArray(node.content)
-                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
-                    : '';
-                return `${paragraph}\n`;
-            }
-            case 'list_item': {
-                const item = Array.isArray(node.content)
-                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
-                    : '';
-                return `- ${item.trim()}\n`;
-            }
-            default:
-                return Array.isArray(node.content)
-                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
-                    : '';
-        }
-    }
-    /**
-     * Applies a ProseMirror mark to text.
-     * @param text - The text to wrap
-     * @param mark - The mark to apply
-     * @param theme - Theme for color resolution
-     * @returns Wrapped HTML string
-     */
-    static applyMark(text, mark, _theme) {
-        switch (mark.type) {
-            case 'bold':
-            case 'strong':
-                return `<strong>${text}</strong>`;
-            case 'italic':
-            case 'em':
-                return `<em>${text}</em>`;
-            case 'underline':
-                return `<u>${text}</u>`;
-            case 'strike':
-                return `<s>${text}</s>`;
-            case 'code':
-                return `<code>${text}</code>`;
-            case 'link':
-                const href = mark.attrs?.href || '#';
-                return `<a href="${this.escapeHtml(href)}">${text}</a>`;
-            default:
-                return text;
-        }
-    }
-    /**
-     * Escapes HTML special characters.
-     * @param str - String to escape
-     * @returns Escaped string
-     */
-    static escapeHtml(str) {
-        return str
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-}
-
-function resolveUrl(url, baseUrl) {
-    // url is absolute already
-    if (url.match(/^[a-z]+:\/\//i)) {
-        return url;
-    }
-    // url is absolute already, without protocol
-    if (url.match(/^\/\//)) {
-        return window.location.protocol + url;
-    }
-    // dataURI, mailto:, tel:, etc.
-    if (url.match(/^[a-z]+:/i)) {
-        return url;
-    }
-    const doc = document.implementation.createHTMLDocument();
-    const base = doc.createElement('base');
-    const a = doc.createElement('a');
-    doc.head.appendChild(base);
-    doc.body.appendChild(a);
-    if (baseUrl) {
-        base.href = baseUrl;
-    }
-    a.href = url;
-    return a.href;
-}
-const uuid = (() => {
-    // generate uuid for className of pseudo elements.
-    // We should not use GUIDs, otherwise pseudo elements sometimes cannot be captured.
-    let counter = 0;
-    // ref: http://stackoverflow.com/a/6248722/2519373
-    const random = () => 
-    // eslint-disable-next-line no-bitwise
-    `0000${((Math.random() * 36 ** 4) << 0).toString(36)}`.slice(-4);
-    return () => {
-        counter += 1;
-        return `u${random()}${counter}`;
-    };
-})();
-function toArray(arrayLike) {
-    const arr = [];
-    for (let i = 0, l = arrayLike.length; i < l; i++) {
-        arr.push(arrayLike[i]);
-    }
-    return arr;
-}
-let styleProps = null;
-function getStyleProperties(options = {}) {
-    if (styleProps) {
-        return styleProps;
-    }
-    if (options.includeStyleProperties) {
-        styleProps = options.includeStyleProperties;
-        return styleProps;
-    }
-    styleProps = toArray(window.getComputedStyle(document.documentElement));
-    return styleProps;
-}
-function px(node, styleProperty) {
-    const win = node.ownerDocument.defaultView || window;
-    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
-    return val ? parseFloat(val.replace('px', '')) : 0;
-}
-function getNodeWidth(node) {
-    const leftBorder = px(node, 'border-left-width');
-    const rightBorder = px(node, 'border-right-width');
-    return node.clientWidth + leftBorder + rightBorder;
-}
-function getNodeHeight(node) {
-    const topBorder = px(node, 'border-top-width');
-    const bottomBorder = px(node, 'border-bottom-width');
-    return node.clientHeight + topBorder + bottomBorder;
-}
-function getImageSize(targetNode, options = {}) {
-    const width = options.width || getNodeWidth(targetNode);
-    const height = options.height || getNodeHeight(targetNode);
-    return { width, height };
-}
-function getPixelRatio() {
-    let ratio;
-    let FINAL_PROCESS;
-    try {
-        FINAL_PROCESS = process;
-    }
-    catch (e) {
-        // pass
-    }
-    const val = FINAL_PROCESS && FINAL_PROCESS.env
-        ? FINAL_PROCESS.env.devicePixelRatio
-        : null;
-    if (val) {
-        ratio = parseInt(val, 10);
-        if (Number.isNaN(ratio)) {
-            ratio = 1;
-        }
-    }
-    return ratio || window.devicePixelRatio || 1;
-}
-// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
-const canvasDimensionLimit = 16384;
-function checkCanvasDimensions(canvas) {
-    if (canvas.width > canvasDimensionLimit ||
-        canvas.height > canvasDimensionLimit) {
-        if (canvas.width > canvasDimensionLimit &&
-            canvas.height > canvasDimensionLimit) {
-            if (canvas.width > canvas.height) {
-                canvas.height *= canvasDimensionLimit / canvas.width;
-                canvas.width = canvasDimensionLimit;
-            }
-            else {
-                canvas.width *= canvasDimensionLimit / canvas.height;
-                canvas.height = canvasDimensionLimit;
-            }
-        }
-        else if (canvas.width > canvasDimensionLimit) {
-            canvas.height *= canvasDimensionLimit / canvas.width;
-            canvas.width = canvasDimensionLimit;
-        }
-        else {
-            canvas.width *= canvasDimensionLimit / canvas.height;
-            canvas.height = canvasDimensionLimit;
-        }
-    }
-}
-function createImage(url) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => {
-            img.decode().then(() => {
-                requestAnimationFrame(() => resolve(img));
-            });
-        };
-        img.onerror = reject;
-        img.crossOrigin = 'anonymous';
-        img.decoding = 'async';
-        img.src = url;
-    });
-}
-async function svgToDataURL(svg) {
-    return Promise.resolve()
-        .then(() => new XMLSerializer().serializeToString(svg))
-        .then(encodeURIComponent)
-        .then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
-}
-async function nodeToDataURL(node, width, height) {
-    const xmlns = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(xmlns, 'svg');
-    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
-    svg.setAttribute('width', `${width}`);
-    svg.setAttribute('height', `${height}`);
-    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
-    foreignObject.setAttribute('width', '100%');
-    foreignObject.setAttribute('height', '100%');
-    foreignObject.setAttribute('x', '0');
-    foreignObject.setAttribute('y', '0');
-    foreignObject.setAttribute('externalResourcesRequired', 'true');
-    svg.appendChild(foreignObject);
-    foreignObject.appendChild(node);
-    return svgToDataURL(svg);
-}
-const isInstanceOfElement = (node, instance) => {
-    if (node instanceof instance)
-        return true;
-    const nodePrototype = Object.getPrototypeOf(node);
-    if (nodePrototype === null)
-        return false;
-    return (nodePrototype.constructor.name === instance.name ||
-        isInstanceOfElement(nodePrototype, instance));
-};
-
-function formatCSSText(style) {
-    const content = style.getPropertyValue('content');
-    return `${style.cssText} content: '${content.replace(/'|"/g, '')}';`;
-}
-function formatCSSProperties(style, options) {
-    return getStyleProperties(options)
-        .map((name) => {
-        const value = style.getPropertyValue(name);
-        const priority = style.getPropertyPriority(name);
-        return `${name}: ${value}${priority ? ' !important' : ''};`;
-    })
-        .join(' ');
-}
-function getPseudoElementStyle(className, pseudo, style, options) {
-    const selector = `.${className}:${pseudo}`;
-    const cssText = style.cssText
-        ? formatCSSText(style)
-        : formatCSSProperties(style, options);
-    return document.createTextNode(`${selector}{${cssText}}`);
-}
-function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
-    const style = window.getComputedStyle(nativeNode, pseudo);
-    const content = style.getPropertyValue('content');
-    if (content === '' || content === 'none') {
-        return;
-    }
-    const className = uuid();
-    try {
-        clonedNode.className = `${clonedNode.className} ${className}`;
-    }
-    catch (err) {
-        return;
-    }
-    const styleElement = document.createElement('style');
-    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
-    clonedNode.appendChild(styleElement);
-}
-function clonePseudoElements(nativeNode, clonedNode, options) {
-    clonePseudoElement(nativeNode, clonedNode, ':before', options);
-    clonePseudoElement(nativeNode, clonedNode, ':after', options);
-}
-
-const WOFF = 'application/font-woff';
-const JPEG = 'image/jpeg';
-const mimes = {
-    woff: WOFF,
-    woff2: WOFF,
-    ttf: 'application/font-truetype',
-    eot: 'application/vnd.ms-fontobject',
-    png: 'image/png',
-    jpg: JPEG,
-    jpeg: JPEG,
-    gif: 'image/gif',
-    tiff: 'image/tiff',
-    svg: 'image/svg+xml',
-    webp: 'image/webp',
-};
-function getExtension(url) {
-    const match = /\.([^./]*?)$/g.exec(url);
-    return match ? match[1] : '';
-}
-function getMimeType(url) {
-    const extension = getExtension(url).toLowerCase();
-    return mimes[extension] || '';
-}
-
-function getContentFromDataUrl(dataURL) {
-    return dataURL.split(/,/)[1];
-}
-function isDataUrl(url) {
-    return url.search(/^(data:)/) !== -1;
-}
-function makeDataUrl(content, mimeType) {
-    return `data:${mimeType};base64,${content}`;
-}
-async function fetchAsDataURL(url, init, process) {
-    const res = await fetch(url, init);
-    if (res.status === 404) {
-        throw new Error(`Resource "${res.url}" not found`);
-    }
-    const blob = await res.blob();
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onerror = reject;
-        reader.onloadend = () => {
-            try {
-                resolve(process({ res, result: reader.result }));
-            }
-            catch (error) {
-                reject(error);
-            }
-        };
-        reader.readAsDataURL(blob);
-    });
-}
-const cache = {};
-function getCacheKey(url, contentType, includeQueryParams) {
-    let key = url.replace(/\?.*/, '');
-    if (includeQueryParams) {
-        key = url;
-    }
-    // font resource
-    if (/ttf|otf|eot|woff2?/i.test(key)) {
-        key = key.replace(/.*\//, '');
-    }
-    return contentType ? `[${contentType}]${key}` : key;
-}
-async function resourceToDataURL(resourceUrl, contentType, options) {
-    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
-    if (cache[cacheKey] != null) {
-        return cache[cacheKey];
-    }
-    // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
-    if (options.cacheBust) {
-        // eslint-disable-next-line no-param-reassign
-        resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime();
-    }
-    let dataURL;
-    try {
-        const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
-            if (!contentType) {
-                // eslint-disable-next-line no-param-reassign
-                contentType = res.headers.get('Content-Type') || '';
-            }
-            return getContentFromDataUrl(result);
-        });
-        dataURL = makeDataUrl(content, contentType);
-    }
-    catch (error) {
-        dataURL = options.imagePlaceholder || '';
-        let msg = `Failed to fetch resource: ${resourceUrl}`;
-        if (error) {
-            msg = typeof error === 'string' ? error : error.message;
-        }
-        if (msg) {
-            console.warn(msg);
+        if (msg) {
+            console.warn(msg);
         }
     }
     cache[cacheKey] = dataURL;
@@ -27429,156 +26839,808 @@ async function embedWebFonts(clonedNode, options) {
             clonedNode.appendChild(styleNode);
         }
     }
-}
-
-async function toSvg(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const clonedNode = (await cloneNode(node, options, true));
-    await embedWebFonts(clonedNode, options);
-    await embedImages(clonedNode, options);
-    applyStyle(clonedNode, options);
-    const datauri = await nodeToDataURL(clonedNode, width, height);
-    return datauri;
-}
-async function toCanvas(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const svg = await toSvg(node, options);
-    const img = await createImage(svg);
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    const ratio = options.pixelRatio || getPixelRatio();
-    const canvasWidth = options.canvasWidth || width;
-    const canvasHeight = options.canvasHeight || height;
-    canvas.width = canvasWidth * ratio;
-    canvas.height = canvasHeight * ratio;
-    if (!options.skipAutoScale) {
-        checkCanvasDimensions(canvas);
+}
+
+async function toSvg(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const clonedNode = (await cloneNode(node, options, true));
+    await embedWebFonts(clonedNode, options);
+    await embedImages(clonedNode, options);
+    applyStyle(clonedNode, options);
+    const datauri = await nodeToDataURL(clonedNode, width, height);
+    return datauri;
+}
+async function toCanvas(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const svg = await toSvg(node, options);
+    const img = await createImage(svg);
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    const ratio = options.pixelRatio || getPixelRatio();
+    const canvasWidth = options.canvasWidth || width;
+    const canvasHeight = options.canvasHeight || height;
+    canvas.width = canvasWidth * ratio;
+    canvas.height = canvasHeight * ratio;
+    if (!options.skipAutoScale) {
+        checkCanvasDimensions(canvas);
+    }
+    canvas.style.width = `${canvasWidth}`;
+    canvas.style.height = `${canvasHeight}`;
+    if (options.backgroundColor) {
+        context.fillStyle = options.backgroundColor;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    context.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas;
+}
+async function toPng(node, options = {}) {
+    const canvas = await toCanvas(node, options);
+    return canvas.toDataURL();
+}
+
+class KritzelWheelHelper {
+    static shouldKeepWheelInCustomElement(ev, customElement) {
+        // Keep Ctrl+wheel available for viewport zoom gestures.
+        if (ev.ctrlKey || customElement.isSelected !== true) {
+            return false;
+        }
+        const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+        const scrollContainer = this.getScrollableContainerFromEventPath(path, customElement);
+        // No scroll container found inside the custom element: let the wheel
+        // event pass through so the viewport can continue handling it.
+        if (!scrollContainer) {
+            return false;
+        }
+        return this.canElementConsumeWheel(scrollContainer, ev.deltaX, ev.deltaY);
+    }
+    static getScrollableContainerFromEventPath(path, customElement) {
+        const potentialRoots = [];
+        if (customElement.element instanceof HTMLElement) {
+            potentialRoots.push(customElement.element);
+        }
+        if (customElement.elementRef instanceof HTMLElement) {
+            potentialRoots.push(customElement.elementRef);
+        }
+        const legacyElementRef = customElement.elmeentRef;
+        if (legacyElementRef instanceof HTMLElement) {
+            potentialRoots.push(legacyElementRef);
+        }
+        for (const root of potentialRoots) {
+            const rootIndex = path.findIndex(entry => entry === root);
+            if (rootIndex === -1) {
+                continue;
+            }
+            for (const entry of path.slice(0, rootIndex + 1)) {
+                if (!(entry instanceof HTMLElement)) {
+                    continue;
+                }
+                if (this.isScrollableElement(entry)) {
+                    return entry;
+                }
+            }
+        }
+        // Fallback for synthetic/custom wheel events where composedPath is absent
+        // or does not include the custom-element subtree.
+        for (const root of potentialRoots) {
+            if (this.isScrollableElement(root)) {
+                return root;
+            }
+            const firstChild = root.firstElementChild;
+            if (firstChild instanceof HTMLElement && this.isScrollableElement(firstChild)) {
+                return firstChild;
+            }
+        }
+        return null;
+    }
+    static isScrollableElement(element) {
+        const canScrollVertically = element.scrollHeight - element.clientHeight > 0;
+        const canScrollHorizontally = element.scrollWidth - element.clientWidth > 0;
+        if (!canScrollVertically && !canScrollHorizontally) {
+            return false;
+        }
+        const computedStyle = window.getComputedStyle(element);
+        const overflowX = computedStyle.overflowX;
+        const overflowY = computedStyle.overflowY;
+        const allowsVerticalScroll = overflowY !== 'visible' && overflowY !== 'clip';
+        const allowsHorizontalScroll = overflowX !== 'visible' && overflowX !== 'clip';
+        return (canScrollVertically && allowsVerticalScroll) || (canScrollHorizontally && allowsHorizontalScroll);
+    }
+    static canElementConsumeWheel(element, deltaX, deltaY) {
+        const canConsumeVertical = this.canElementConsumeVerticalWheel(element, deltaY);
+        const canConsumeHorizontal = this.canElementConsumeHorizontalWheel(element, deltaX);
+        // Keep wheel events inside the custom element whenever at least one
+        // requested axis can still be consumed by its scroll container.
+        return canConsumeVertical || canConsumeHorizontal;
+    }
+    static canElementConsumeVerticalWheel(element, deltaY) {
+        if (deltaY === 0) {
+            return false;
+        }
+        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+        if (maxScrollTop === 0) {
+            return false;
+        }
+        const epsilon = 1;
+        const scrollingDown = deltaY > 0;
+        const scrollingUp = deltaY < 0;
+        if (scrollingDown) {
+            return element.scrollTop < maxScrollTop - epsilon;
+        }
+        if (scrollingUp) {
+            return element.scrollTop > epsilon;
+        }
+        return false;
+    }
+    static canElementConsumeHorizontalWheel(element, deltaX) {
+        if (deltaX === 0) {
+            return false;
+        }
+        const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+        if (maxScrollLeft === 0) {
+            return false;
+        }
+        const epsilon = 1;
+        const scrollingRight = deltaX > 0;
+        const scrollingLeft = deltaX < 0;
+        if (scrollingRight) {
+            return element.scrollLeft < maxScrollLeft - epsilon;
+        }
+        if (scrollingLeft) {
+            return element.scrollLeft > epsilon;
+        }
+        return false;
+    }
+}
+
+/**
+ * Helper class for exporting Kritzel objects to SVG format.
+ * Generates clean, standards-compliant SVG markup from canvas objects.
+ */
+class KritzelSvgExportHelper {
+    /**
+     * Calculates the combined bounding box that encompasses all objects.
+     * Uses rotatedBoundingBox to account for object rotation.
+     * @param objects - Array of objects to calculate bounds for
+     * @returns Combined bounding box, or null if no objects provided
+     */
+    static calculateCombinedBounds(objects) {
+        if (!objects || objects.length === 0) {
+            return null;
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const obj of objects) {
+            const bbox = obj.rotatedBoundingBox;
+            minX = Math.min(minX, bbox.x);
+            minY = Math.min(minY, bbox.y);
+            maxX = Math.max(maxX, bbox.x + bbox.width);
+            maxY = Math.max(maxY, bbox.y + bbox.height);
+        }
+        return {
+            x: minX,
+            y: minY,
+            z: 1,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    /**
+     * Generates a complete SVG document string from the given objects.
+     * @param objects - Objects to export
+     * @param options - Export options
+     * @returns SVG document string
+     */
+    static generateSvg(objects, options = {}) {
+        const { theme, padding = 0, includeXmlDeclaration = true, rasterSafeForCanvas = false, imageDataUrls } = options;
+        if (!objects || objects.length === 0) {
+            return '';
+        }
+        // Flatten groups to get all objects including nested children
+        const allObjects = this.flattenObjects(objects);
+        const bounds = this.calculateCombinedBounds(allObjects);
+        if (!bounds) {
+            return '';
+        }
+        // Add padding to bounds
+        const viewBoxX = bounds.x - padding;
+        const viewBoxY = bounds.y - padding;
+        const viewBoxWidth = bounds.width + padding * 2;
+        const viewBoxHeight = bounds.height + padding * 2;
+        // Collect all defs (markers, patterns, etc.)
+        const defs = this.collectDefs(allObjects, theme);
+        // Generate SVG elements for each object
+        const elements = objects
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .map(obj => this.objectToSvgElement(obj, theme, imageDataUrls, rasterSafeForCanvas))
+            .filter(Boolean)
+            .join('\n  ');
+        const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
+        const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
+        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
+  ${elements}
+</svg>`;
+    }
+    /**
+     * Flattens a list of objects, expanding groups into their children recursively.
+     * @param objects - Objects to flatten
+     * @returns Flat array of all objects including group children
+     */
+    static flattenObjects(objects) {
+        const result = [];
+        for (const obj of objects) {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                result.push(...this.flattenObjects(obj.children));
+            }
+            else {
+                result.push(obj);
+            }
+        }
+        return result;
+    }
+    /**
+     * Resolves every image referenced by the given objects (including those
+     * nested inside groups) to an inlined `data:` URL, keyed by object id.
+     *
+     * This is required for export flows that rasterize the SVG (e.g. PNG
+     * export): an SVG loaded into an `<img>` element will NOT load external
+     * or `blob:` resources, so a `<image href="blob:...">` renders as a
+     * broken-image placeholder. Embedding the bytes as a base64 `data:` URL
+     * makes the image self-contained and survive rasterization.
+     *
+     * Resolution is best-effort: images that fail to resolve are simply
+     * omitted from the map, and the SVG falls back to whatever `href` the
+     * synchronous path would have produced.
+     * @param objects - Objects to inline images for
+     * @param assetResolver - Resolver used to fetch asset bytes; optional
+     * @returns Map of image object id -> inlined `data:` URL
+     */
+    static async resolveImageDataUrls(objects, assetResolver) {
+        const dataUrls = new Map();
+        if (!objects || objects.length === 0) {
+            return dataUrls;
+        }
+        const images = this.flattenObjects(objects).filter((obj) => schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelImage'));
+        await Promise.all(images.map(async (image) => {
+            // Legacy inline data URL is already embeddable as-is.
+            if (image.src?.startsWith('data:')) {
+                dataUrls.set(image.id, image.src);
+                return;
+            }
+            // A resolvedSrc that is itself a data URL can be embedded directly.
+            if (image.resolvedSrc?.startsWith('data:')) {
+                dataUrls.set(image.id, image.resolvedSrc);
+                return;
+            }
+            if (!image.assetId || !assetResolver) {
+                return;
+            }
+            try {
+                const blob = await assetResolver.fetchBlob(image.assetId);
+                dataUrls.set(image.id, await this.blobToDataUrl(blob));
+            }
+            catch (err) {
+                console.warn(`[KritzelSvgExportHelper] Failed to inline image asset ${image.assetId} for export:`, err);
+            }
+        }));
+        return dataUrls;
+    }
+    /**
+     * Reads a Blob into a base64 `data:` URL.
+     * @param blob - The blob to encode
+     * @returns Promise resolving to the data URL string
+     */
+    static async blobToDataUrl(blob) {
+        // Prefer FileReader in browser-like runtimes for efficiency.
+        const hasFileReader = typeof FileReader !== 'undefined';
+        if (hasFileReader) {
+            try {
+                return await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        if (typeof reader.result === 'string') {
+                            resolve(reader.result);
+                            return;
+                        }
+                        reject(new Error('FileReader result is not a string'));
+                    };
+                    reader.onerror = () => reject(reader.error ?? new Error('Failed to read blob as data URL'));
+                    reader.readAsDataURL(blob);
+                });
+            }
+            catch {
+                // Fall through to the ArrayBuffer-based encoder.
+            }
+        }
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        const mimeType = blob.type || 'application/octet-stream';
+        return `data:${mimeType};base64,${this.uint8ToBase64(bytes)}`;
+    }
+    /**
+     * Encodes a byte array to base64 across browser and Node-like runtimes.
+     */
+    static uint8ToBase64(bytes) {
+        if (typeof Buffer !== 'undefined') {
+            return Buffer.from(bytes).toString('base64');
+        }
+        let binary = '';
+        const chunkSize = 0x8000;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, Math.min(i + chunkSize, bytes.length));
+            binary += String.fromCharCode(...chunk);
+        }
+        if (typeof btoa === 'function') {
+            return btoa(binary);
+        }
+        throw new Error('No base64 encoder available in this runtime');
+    }
+    /**
+     * Collects SVG defs (markers, patterns, etc.) needed by the objects.
+     * @param objects - Objects to collect defs for
+     * @param theme - Theme for color resolution
+     * @returns Array of def element strings
+     */
+    static collectDefs(objects, theme) {
+        const defs = [];
+        for (const obj of objects) {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
+                if (obj.hasStartArrow) {
+                    defs.push(this.generateArrowMarker(obj, 'start', theme));
+                }
+                if (obj.hasEndArrow) {
+                    defs.push(this.generateArrowMarker(obj, 'end', theme));
+                }
+            }
+        }
+        return defs;
+    }
+    /**
+     * Generates an SVG marker element for line arrows.
+     * @param line - The line object
+     * @param end - Which end of the line ('start' or 'end')
+     * @param theme - Theme for color resolution
+     * @returns SVG marker element string
+     */
+    static generateArrowMarker(line, end, _theme) {
+        const markerId = end === 'start' ? line.startMarkerId : line.endMarkerId;
+        const size = line.getArrowSize(end);
+        const fill = line.getArrowFill(end);
+        const style = end === 'start' ? line.arrows?.start?.style : line.arrows?.end?.style;
+        const path = line.getArrowPath(style);
+        const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
+        const refX = 0;
+        const refY = size / 2;
+        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
+      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
+    </marker>`;
+    }
+    /**
+     * Converts a Kritzel object to its SVG element representation.
+     * @param object - The object to convert
+     * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
+     * @returns SVG element string, or empty string if object type is not supported
+     */
+    static objectToSvgElement(object, theme, imageDataUrls, rasterSafeForCanvas = false) {
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
+            return this.pathToSvg(object, theme);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+            return this.lineToSvg(object, theme);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
+            return this.shapeToSvg(object, theme);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+            return this.textToSvg(object, theme, rasterSafeForCanvas);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+            return this.imageToSvg(object, imageDataUrls);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            return this.customElementToSvg(object, rasterSafeForCanvas);
+        }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+            return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
+        }
+        return '';
+    }
+    /**
+     * Converts a KritzelPath to SVG.
+     * @param path - The path object
+     * @param theme - Theme for color resolution
+     * @returns SVG element string
+     */
+    static pathToSvg(path, theme) {
+        const transform = this.buildTransform(path);
+        const fill = schema_constants.KritzelColorHelper.resolveThemeColor(path.fill, theme);
+        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(path.stroke, theme);
+        const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
+        const scale = this.getObjectScale(path);
+        // Path needs to be wrapped in a g with translation since path.d uses local coordinates
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
+      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
+    </svg>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelLine to SVG.
+     * @param line - The line object
+     * @param theme - Theme for color resolution
+     * @returns SVG element string
+     */
+    static lineToSvg(line, theme) {
+        const transform = this.buildTransform(line);
+        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(line.stroke, theme);
+        const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
+        const scale = this.getObjectScale(line);
+        const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
+        const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
+      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
+    </svg>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelShape to SVG.
+     * @param shape - The shape object
+     * @param theme - Theme for color resolution
+     * @returns SVG element string
+     */
+    static shapeToSvg(shape, theme) {
+        const transform = this.buildTransform(shape);
+        const fill = schema_constants.KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
+        const stroke = schema_constants.KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
+        const opacity = shape.opacity !== 1 ? ` opacity="${shape.opacity}"` : '';
+        const scale = this.getObjectScale(shape);
+        // Get the SVG path for the shape
+        const pathD = shape.getSvgPath();
+        // Handle text content if present
+        let textContent = '';
+        if (shape.editor && !shape.editor.state.doc.textContent.trim()) ;
+        else if (shape.content) {
+            const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
+            if (textHtml) {
+                const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
+                textContent = `
+    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
+        ${textHtml}
+      </div>
+    </foreignObject>`;
+            }
+        }
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
+      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
+    </svg>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelText to SVG using foreignObject for rich text support.
+     * @param text - The text object
+     * @param theme - Theme for color resolution
+     * @returns SVG element string
+     */
+    static textToSvg(text, theme, rasterSafeForCanvas = false) {
+        if (rasterSafeForCanvas) {
+            return this.textToSvgRasterSafe(text, theme);
+        }
+        const transform = this.buildTransform(text);
+        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
+        const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
+        // Convert ProseMirror content to HTML
+        const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
+        // Calculate dimensions in SVG world units (world units = CSS px in a 1:1 SVG).
+        const width = text.totalWidth / scale;
+        const height = text.totalHeight / scale;
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered font aligns with the world-unit dimensions above.
+        // The CSS transform: scale(scaleFactor) is removed from the div because the
+        // adjusted font-size already accounts for it – keeping both would double-scale
+        // the content and overflow the foreignObject.
+        const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
+        return `<g transform="${transform}"${opacity}>
+    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
+    </foreignObject>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelText to SVG using pure SVG text primitives.
+     * This path avoids `<foreignObject>`, which taints canvases when the
+     * generated SVG is rasterized through `<img>` and `drawImage`.
+     */
+    static textToSvgRasterSafe(text, theme) {
+        const transform = this.buildTransform(text);
+        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
+        const fontColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = schema_constants.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
+        const width = text.totalWidth / scale;
+        const height = text.totalHeight / scale;
+        const lines = this.prosemirrorToPlainTextLines(text.content);
+        const resolvedLines = lines.length > 0 ? lines : [''];
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered lines align with the world-unit bounding box dimensions above.
+        const resolvedFontSizePx = Math.max(1, text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale);
+        const lineHeight = resolvedFontSizePx * 1.2;
+        const startY = resolvedFontSizePx;
+        const bgRect = bgColor && bgColor !== 'transparent'
+            ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
+            : '';
+        const tspans = resolvedLines
+            .map((line, index) => {
+            const y = startY + index * lineHeight;
+            return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
+        })
+            .join('');
+        return `<g transform="${transform}"${opacity}>
+    ${bgRect}
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
+  </g>`;
     }
-    canvas.style.width = `${canvasWidth}`;
-    canvas.style.height = `${canvasHeight}`;
-    if (options.backgroundColor) {
-        context.fillStyle = options.backgroundColor;
-        context.fillRect(0, 0, canvas.width, canvas.height);
+    /**
+     * Converts a KritzelImage to SVG.
+     *
+     * Prefers an inlined `data:` URL from `imageDataUrls` (keyed by object
+     * id) when provided, so the embedded bytes survive rasterization to
+     * PNG. Falls back to `resolvedSrc` (populated by the renderer via the
+     * asset resolver) and finally the legacy inline `src` field for
+     * documents persisted before the asset layer existed.
+     *
+     * Note: a `blob:` `resolvedSrc` renders correctly on-canvas but becomes
+     * a broken-image placeholder once the SVG is loaded into an `<img>` and
+     * drawn to a canvas. Callers that rasterize the SVG must pass
+     * `imageDataUrls` (see {@link KritzelSvgExportHelper.resolveImageDataUrls}).
+     * @param image - The image object
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
+     * @returns SVG element string
+     */
+    static imageToSvg(image, imageDataUrls) {
+        const transform = this.buildTransform(image);
+        const opacity = image.opacity !== 1 ? ` opacity="${image.opacity}"` : '';
+        const scale = this.getObjectScale(image);
+        // Calculate dimensions
+        const width = image.totalWidth / scale;
+        const height = image.totalHeight / scale;
+        const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
+        return `<g transform="${transform}"${opacity}>
+    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
+  </g>`;
     }
-    context.drawImage(img, 0, 0, canvas.width, canvas.height);
-    return canvas;
-}
-async function toPng(node, options = {}) {
-    const canvas = await toCanvas(node, options);
-    return canvas.toDataURL();
-}
-
-class KritzelWheelHelper {
-    static shouldKeepWheelInCustomElement(ev, customElement) {
-        // Keep Ctrl+wheel available for viewport zoom gestures.
-        if (ev.ctrlKey || customElement.isSelected !== true) {
-            return false;
-        }
-        const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-        const scrollContainer = this.getScrollableContainerFromEventPath(path, customElement);
-        // No scroll container found inside the custom element: let the wheel
-        // event pass through so the viewport can continue handling it.
-        if (!scrollContainer) {
-            return false;
+    /**
+     * Converts a KritzelCustomElement to SVG.
+     * SVG mode: embeds HTML in foreignObject (best-effort).
+     * PNG/raster mode: renders placeholder rect with warning.
+     * @param obj - The custom element object
+     * @param rasterSafeForCanvas - If true, render placeholder (for PNG export)
+     * @returns SVG element string
+     */
+    static customElementToSvg(obj, rasterSafeForCanvas = false) {
+        const transform = this.buildTransform(obj);
+        const opacity = obj.opacity !== 1 ? ` opacity="${obj.opacity}"` : '';
+        const scale = this.getObjectScale(obj);
+        const width = obj.totalWidth / scale;
+        const height = obj.totalHeight / scale;
+        if (rasterSafeForCanvas) {
+            // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
+            console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
+            return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
+    </g>`;
         }
-        return this.canElementConsumeWheel(scrollContainer, ev.deltaX, ev.deltaY);
+        // SVG export: use foreignObject to embed HTML
+        const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
+        return `<g transform="${transform}"${opacity}>
+      <foreignObject x="0" y="0" width="${width}" height="${height}">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
+    </g>`;
     }
-    static getScrollableContainerFromEventPath(path, customElement) {
-        const potentialRoots = [];
-        if (customElement.element instanceof HTMLElement) {
-            potentialRoots.push(customElement.element);
-        }
-        if (customElement.elementRef instanceof HTMLElement) {
-            potentialRoots.push(customElement.elementRef);
-        }
-        const legacyElementRef = customElement.elmeentRef;
-        if (legacyElementRef instanceof HTMLElement) {
-            potentialRoots.push(legacyElementRef);
-        }
-        for (const root of potentialRoots) {
-            const rootIndex = path.findIndex(entry => entry === root);
-            if (rootIndex === -1) {
-                continue;
-            }
-            for (const entry of path.slice(0, rootIndex + 1)) {
-                if (!(entry instanceof HTMLElement)) {
-                    continue;
-                }
-                if (this.isScrollableElement(entry)) {
-                    return entry;
-                }
-            }
-        }
-        // Fallback for synthetic/custom wheel events where composedPath is absent
-        // or does not include the custom-element subtree.
-        for (const root of potentialRoots) {
-            if (this.isScrollableElement(root)) {
-                return root;
-            }
-            const firstChild = root.firstElementChild;
-            if (firstChild instanceof HTMLElement && this.isScrollableElement(firstChild)) {
-                return firstChild;
-            }
+    /**
+     * Converts a KritzelGroup to SVG by recursively converting children.
+     * @param group - The group object
+     * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
+     * @returns SVG element string
+     */
+    static groupToSvg(group, theme, imageDataUrls, rasterSafeForCanvas = false) {
+        const children = group.children
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .map(child => this.objectToSvgElement(child, theme, imageDataUrls, rasterSafeForCanvas))
+            .filter(Boolean)
+            .join('\n    ');
+        if (!children) {
+            return '';
         }
-        return null;
+        const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
+        return `<g${opacity}>
+    ${children}
+  </g>`;
     }
-    static isScrollableElement(element) {
-        const canScrollVertically = element.scrollHeight - element.clientHeight > 0;
-        const canScrollHorizontally = element.scrollWidth - element.clientWidth > 0;
-        if (!canScrollVertically && !canScrollHorizontally) {
-            return false;
+    /**
+     * Builds a transform attribute string for an object.
+     * Combines translation and rotation.
+     * @param object - The object to build transform for
+     * @returns Transform attribute value string
+     */
+    static buildTransform(object) {
+        const transforms = [];
+        const scale = this.getObjectScale(object);
+        // Translation
+        transforms.push(`translate(${object.translateX}, ${object.translateY})`);
+        // Rotation around center
+        if (object.rotation !== 0) {
+            const centerX = object.totalWidth / 2 / scale;
+            const centerY = object.totalHeight / 2 / scale;
+            const degrees = object.rotation * (180 / Math.PI);
+            transforms.push(`rotate(${degrees}, ${centerX}, ${centerY})`);
         }
-        const computedStyle = window.getComputedStyle(element);
-        const overflowX = computedStyle.overflowX;
-        const overflowY = computedStyle.overflowY;
-        const allowsVerticalScroll = overflowY !== 'visible' && overflowY !== 'clip';
-        const allowsHorizontalScroll = overflowX !== 'visible' && overflowX !== 'clip';
-        return (canScrollVertically && allowsVerticalScroll) || (canScrollHorizontally && allowsHorizontalScroll);
+        return transforms.join(' ');
     }
-    static canElementConsumeWheel(element, deltaX, deltaY) {
-        const canConsumeVertical = this.canElementConsumeVerticalWheel(element, deltaY);
-        const canConsumeHorizontal = this.canElementConsumeHorizontalWheel(element, deltaX);
-        // Keep wheel events inside the custom element whenever at least one
-        // requested axis can still be consumed by its scroll container.
-        return canConsumeVertical || canConsumeHorizontal;
+    /**
+     * Returns a safe non-zero scale for export geometry calculations.
+     */
+    static getObjectScale(object) {
+        const scale = object.scale ?? 1;
+        return scale === 0 ? 1 : scale;
     }
-    static canElementConsumeVerticalWheel(element, deltaY) {
-        if (deltaY === 0) {
-            return false;
+    /**
+     * Converts ProseMirror JSON content to HTML string.
+     * @param content - ProseMirror document JSON
+     * @param context - The text or shape object for styling context
+     * @param theme - Theme for color resolution
+     * @returns HTML string
+     */
+    static prosemirrorToHtml(content, _context, theme) {
+        if (!content || !content.content) {
+            return '';
         }
-        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
-        if (maxScrollTop === 0) {
-            return false;
+        return content.content
+            .map((node) => this.nodeToHtml(node, theme))
+            .join('');
+    }
+    /**
+     * Converts a ProseMirror node to HTML.
+     * @param node - ProseMirror node JSON
+     * @param theme - Theme for color resolution
+     * @returns HTML string
+     */
+    static nodeToHtml(node, theme) {
+        if (!node)
+            return '';
+        switch (node.type) {
+            case 'paragraph':
+                const pContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
+                return `<p style="margin: 0;">${pContent || '<br/>'}</p>`;
+            case 'text':
+                let text = this.escapeHtml(node.text || '');
+                if (node.marks) {
+                    for (const mark of node.marks) {
+                        text = this.applyMark(text, mark, theme);
+                    }
+                }
+                return text;
+            case 'hard_break':
+                return '<br/>';
+            case 'bullet_list':
+                const blContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
+                return `<ul style="margin: 0; padding-left: 1.5em;">${blContent}</ul>`;
+            case 'ordered_list':
+                const olContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
+                return `<ol style="margin: 0; padding-left: 1.5em;">${olContent}</ol>`;
+            case 'list_item':
+                const liContent = node.content ? node.content.map((n) => this.nodeToHtml(n, theme)).join('') : '';
+                return `<li>${liContent}</li>`;
+            default:
+                // For unknown node types, try to render content
+                if (node.content) {
+                    return node.content.map((n) => this.nodeToHtml(n, theme)).join('');
+                }
+                return '';
         }
-        const epsilon = 1;
-        const scrollingDown = deltaY > 0;
-        const scrollingUp = deltaY < 0;
-        if (scrollingDown) {
-            return element.scrollTop < maxScrollTop - epsilon;
+    }
+    /**
+     * Converts ProseMirror JSON content to plain-text lines.
+     * Used by raster-safe SVG export, which cannot depend on HTML/foreignObject.
+     */
+    static prosemirrorToPlainTextLines(content) {
+        if (!content || !Array.isArray(content.content)) {
+            return [];
         }
-        if (scrollingUp) {
-            return element.scrollTop > epsilon;
+        const plainText = content.content
+            .map((node) => this.nodeToPlainText(node))
+            .join('')
+            .replace(/\r\n/g, '\n')
+            .replace(/\n+$/, '');
+        if (!plainText) {
+            return [];
         }
-        return false;
+        return plainText.split('\n');
     }
-    static canElementConsumeHorizontalWheel(element, deltaX) {
-        if (deltaX === 0) {
-            return false;
-        }
-        const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
-        if (maxScrollLeft === 0) {
-            return false;
+    /**
+     * Converts a ProseMirror node tree into plain text.
+     */
+    static nodeToPlainText(node) {
+        if (!node) {
+            return '';
         }
-        const epsilon = 1;
-        const scrollingRight = deltaX > 0;
-        const scrollingLeft = deltaX < 0;
-        if (scrollingRight) {
-            return element.scrollLeft < maxScrollLeft - epsilon;
+        switch (node.type) {
+            case 'text':
+                return node.text || '';
+            case 'hard_break':
+                return '\n';
+            case 'paragraph': {
+                const paragraph = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `${paragraph}\n`;
+            }
+            case 'list_item': {
+                const item = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `- ${item.trim()}\n`;
+            }
+            default:
+                return Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
         }
-        if (scrollingLeft) {
-            return element.scrollLeft > epsilon;
+    }
+    /**
+     * Applies a ProseMirror mark to text.
+     * @param text - The text to wrap
+     * @param mark - The mark to apply
+     * @param theme - Theme for color resolution
+     * @returns Wrapped HTML string
+     */
+    static applyMark(text, mark, _theme) {
+        switch (mark.type) {
+            case 'bold':
+            case 'strong':
+                return `<strong>${text}</strong>`;
+            case 'italic':
+            case 'em':
+                return `<em>${text}</em>`;
+            case 'underline':
+                return `<u>${text}</u>`;
+            case 'strike':
+                return `<s>${text}</s>`;
+            case 'code':
+                return `<code>${text}</code>`;
+            case 'link':
+                const href = mark.attrs?.href || '#';
+                return `<a href="${this.escapeHtml(href)}">${text}</a>`;
+            default:
+                return text;
         }
-        return false;
+    }
+    /**
+     * Escapes HTML special characters.
+     * @param str - String to escape
+     * @returns Escaped string
+     */
+    static escapeHtml(str) {
+        return str
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
     }
 }
 
@@ -28775,10 +28837,7 @@ const KritzelEngine = class {
                 console.error('Failed to export viewport as PNG: screenshot could not be generated');
                 return;
             }
-            const link = document.createElement('a');
-            link.download = filename;
-            link.href = dataUrl;
-            link.click();
+            this.triggerDataUrlDownload(dataUrl, filename);
         }
         catch (error) {
             console.error('Failed to export viewport as PNG:', error);
@@ -28800,129 +28859,57 @@ const KritzelEngine = class {
                 console.error('Failed to export viewport as SVG: screenshot could not be generated');
                 return;
             }
-            const link = document.createElement('a');
-            link.download = filename;
-            link.href = dataUrl;
-            link.click();
+            this.triggerDataUrlDownload(dataUrl, filename);
         }
         catch (error) {
             console.error('Failed to export viewport as SVG:', error);
         }
     }
     /**
-     * Generates an SVG string from the currently selected objects.
-     * Creates clean, standards-compliant SVG markup by directly serializing object properties.
-     * @param options - Optional export settings (theme, padding, raster-safe mode for canvas export).
-     * @returns SVG markup string, or null if no objects are selected.
+     * Returns export formats supported by the currently selected object.
+     * Only returns formats when exactly one object is selected.
      */
-    async getSelectedObjectsAsSvgString(options) {
-        const selectedObjects = await this.getSelectedObjects();
-        if (!selectedObjects || selectedObjects.length === 0) {
-            return null;
+    async getSelectedObjectSupportedExportFormats() {
+        const selected = this.getSingleSelectedExportableObject();
+        if (!selected) {
+            return [];
         }
-        const theme = options?.theme ?? this.core.themeManager.getStoredTheme();
-        // Inline image bytes as data URLs so they survive both standalone SVG
-        // files and rasterization to PNG (a `blob:` href is not loaded when an
-        // SVG is drawn into a canvas, which otherwise yields a broken image).
-        const imageDataUrls = await KritzelSvgExportHelper.resolveImageDataUrls(selectedObjects, this.core.assetResolver);
-        return KritzelSvgExportHelper.generateSvg(selectedObjects, {
-            theme,
-            padding: options?.padding ?? 0,
-            includeXmlDeclaration: true,
-            rasterSafeForCanvas: options?.rasterSafeForCanvas ?? false,
-            imageDataUrls,
-        });
+        return selected.getSupportedExportFormats();
     }
     /**
-     * Exports the currently selected objects as an SVG file and triggers a browser download.
-     * Creates clean, standards-compliant SVG markup suitable for import into vector editors.
-     * @param options - Optional export settings (theme, padding).
+     * Checks whether the currently selected object supports a specific export format.
+     * Returns false when none or multiple objects are selected.
      */
-    async exportSelectedObjectsAsSvg(options) {
-        try {
-            const svgString = await this.getSelectedObjectsAsSvgString(options);
-            if (!svgString) {
-                console.warn('No objects selected for SVG export');
-                return;
-            }
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const filename = `selection-${timestamp}.svg`;
-            const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.download = filename;
-            link.href = url;
-            link.click();
-            URL.revokeObjectURL(url);
-        }
-        catch (error) {
-            console.error('Failed to export selected objects as SVG:', error);
+    async canExportSelectedObjectAs(format) {
+        const selected = this.getSingleSelectedExportableObject();
+        if (!selected) {
+            return false;
         }
+        return selected.getSupportedExportFormats().includes(format);
     }
     /**
-     * Generates a PNG data URL from the currently selected objects.
-     * Converts the SVG representation to a rasterized PNG image.
-     * @param options - Optional export settings (theme, padding, scale for resolution).
-     * @returns PNG data URL string, or null if no objects are selected.
+     * Exports the currently selected object in the requested format and triggers a file download.
+     * Only supports single selection.
      */
-    async getSelectedObjectsAsPngDataUrl(options) {
-        const svgString = await this.getSelectedObjectsAsSvgString({
-            theme: options?.theme,
-            padding: options?.padding,
-            // Avoid foreignObject-based text serialization, which taints the
-            // canvas in SVG->PNG conversion paths.
-            rasterSafeForCanvas: true,
-        });
-        if (!svgString) {
-            return null;
+    async exportSelectedObject(format) {
+        const selected = this.getSingleSelectedExportableObject();
+        if (!selected) {
+            return;
         }
-        const scale = options?.scale ?? 2; // Default 2x for better quality
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-            const url = URL.createObjectURL(svgBlob);
-            img.onload = () => {
-                const canvas = document.createElement('canvas');
-                canvas.width = img.width * scale;
-                canvas.height = img.height * scale;
-                const ctx = canvas.getContext('2d');
-                if (!ctx) {
-                    URL.revokeObjectURL(url);
-                    reject(new Error('Failed to get canvas context'));
-                    return;
-                }
-                ctx.scale(scale, scale);
-                ctx.drawImage(img, 0, 0);
-                URL.revokeObjectURL(url);
-                resolve(canvas.toDataURL('image/png'));
-            };
-            img.onerror = () => {
-                URL.revokeObjectURL(url);
-                reject(new Error('Failed to load SVG for PNG conversion'));
-            };
-            img.src = url;
-        });
-    }
-    /**
-     * Exports the currently selected objects as a PNG file and triggers a browser download.
-     * @param options - Optional export settings (theme, padding, scale for resolution).
-     */
-    async exportSelectedObjectsAsPng(options) {
         try {
-            const dataUrl = await this.getSelectedObjectsAsPngDataUrl(options);
+            const dataUrl = await selected.exportAs(format, this.getObjectExportContext());
             if (!dataUrl) {
-                console.warn('No objects selected for PNG export');
+                console.error(`Failed to export selected object as ${format}: export returned no data URL`);
                 return;
             }
+            const activeWorkspaceName = this.core.store.state?.activeWorkspace?.name || 'workspace';
+            const objectName = selected.__class__.replace(/^Kritzel/, '').toLowerCase() || 'object';
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const filename = `selection-${timestamp}.png`;
-            const link = document.createElement('a');
-            link.download = filename;
-            link.href = dataUrl;
-            link.click();
+            const filename = `${activeWorkspaceName}-${objectName}-${timestamp}.${format}`;
+            this.triggerDataUrlDownload(dataUrl, filename);
         }
         catch (error) {
-            console.error('Failed to export selected objects as PNG:', error);
+            console.error(`Failed to export selected object as ${format}:`, error);
         }
     }
     /**
@@ -29117,6 +29104,73 @@ const KritzelEngine = class {
         const response = await fetch(dataUrl);
         return response.blob();
     }
+    triggerDataUrlDownload(dataUrl, filename) {
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+    }
+    getSingleSelectedExportableObject() {
+        const selectedObjects = this.core.store.selectionGroup?.objects ?? [];
+        if (selectedObjects.length !== 1) {
+            return null;
+        }
+        const [selected] = selectedObjects;
+        if (!schema_constants.ObjectHelper.isKritzelExportable(selected)) {
+            return null;
+        }
+        return selected;
+    }
+    getObjectExportContext() {
+        return {
+            getObjectAsSvgDataUrl: async (object, options) => {
+                const svg = await this.getObjectAsSvgMarkup(object, options?.rasterSafeForCanvas ?? false);
+                return svg ? this.svgMarkupToDataUrl(svg) : null;
+            },
+            getObjectAsPngDataUrl: async (object) => {
+                const svg = await this.getObjectAsSvgMarkup(object, true);
+                return svg ? this.svgMarkupToPngDataUrl(svg) : null;
+            },
+        };
+    }
+    async getObjectAsSvgMarkup(object, rasterSafeForCanvas) {
+        const imageDataUrls = await KritzelSvgExportHelper.resolveImageDataUrls([object], this.core.assetResolver);
+        const svg = KritzelSvgExportHelper.generateSvg([object], {
+            theme: this.theme,
+            rasterSafeForCanvas,
+            imageDataUrls,
+        });
+        return svg || null;
+    }
+    svgMarkupToDataUrl(svgMarkup) {
+        return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+    }
+    async svgMarkupToPngDataUrl(svgMarkup) {
+        const svgBlob = new Blob([svgMarkup], { type: 'image/svg+xml;charset=utf-8' });
+        const svgBlobUrl = URL.createObjectURL(svgBlob);
+        try {
+            const img = await new Promise((resolve, reject) => {
+                const element = new Image();
+                element.onload = () => resolve(element);
+                element.onerror = err => reject(err);
+                element.src = svgBlobUrl;
+            });
+            const width = Math.max(1, Math.ceil(img.naturalWidth || img.width));
+            const height = Math.max(1, Math.ceil(img.naturalHeight || img.height));
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext('2d');
+            if (!context) {
+                throw new Error('Could not create 2D canvas context for PNG export');
+            }
+            context.drawImage(img, 0, 0, width, height);
+            return canvas.toDataURL('image/png');
+        }
+        finally {
+            URL.revokeObjectURL(svgBlobUrl);
+        }
+    }
     getImportedWorkspaceName(rawName) {
         if (typeof rawName === 'string' && rawName.trim().length > 0) {
             return rawName;
@@ -29993,7 +30047,7 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (index.h(index.Host, null, index.h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), index.h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel", style: {
+        return (index.h(index.Host, null, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel", style: {
                 color: 'var(--kritzel-global-text-primary)',
             } }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
@@ -30588,7 +30642,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: '0bc45e80716be4a7b19ae12a6464a641b5bd4550' }, index.h("kritzel-dialog", { key: 'f336f8b1e4ae10954d48ca67da88504faf06b295', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: 'e2d1209652bb54fb7f623e50bc4bbbb703083b76', class: "export-content" }, index.h("kritzel-pill-tabs", { key: 'dd78430b78d1e8c4ac0a76e8a6a5d48bebf5e889', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'e06564889d991afc7a4ac43bb1e5504e98c94c52', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (index.h(index.Host, { key: '64a9957ef87799215f9274213ead958a895dd8ef' }, index.h("kritzel-dialog", { key: '59ad70cc7d2834f5ecac3a659189390015cd26cb', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: 'fc9247f5b3848def87e6f6a6044d3fb1e63594ac', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '54da74bbbd206b5e596865081cc5fe65bf8a776f', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), index.h("div", { key: 'b8e748034496936bf000a8eb111f52d58bf28d20', slot: "footer" }, index.h("button", { key: 'b7a59f3882146b45a0eb8395ea1c45cb41af0f34', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -30603,7 +30657,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: '054371cac30a2433611139a670406b0a1e3b99ff' }, index.h("div", { key: 'b4f2142b3cb31d067f39952a38b6f665f28f63bf', class: "font-preview", style: {
+        return (index.h(index.Host, { key: '42f058426e2afcc49c788f2385e23a5ff153e77c' }, index.h("div", { key: '962dfc48ba84c5f5d2b98eb2464c69c04764ab0f', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -30687,7 +30741,7 @@ const KritzelFontSize = class {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: '9d6592f049c25e9dfa2f6f3a270feb2440aa7f35' }, 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 }))))));
@@ -30754,7 +30808,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (index.h(index.Host, { key: '46a0a48902a06ad85edcbaad3679ce3fe9ba850c' }, index.h("div", { key: 'a6beaf920614aa959d2fbd68b7268afba8637358', class: "input-container" }, this.label && index.h("label", { key: 'ca6d3fb3c22f1540795dbb0695ddd9b87cc05eee', class: "input-label" }, this.label), index.h("div", { key: '78d116e82531a9cca996d594792245449bcaf9c8', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: '0d10d6356dea3a11338172bbe8c3c878eefcc708', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '0e6166ba8728efc1035302d7fb048306efbe5a68', class: "input-suffix" }, this.suffix)))));
+        return (index.h(index.Host, { key: 'a4d86101322da32c87a62ac8bb05edb7015ede2a' }, index.h("div", { key: 'abc5b007af0f6f9353e0b680636c92813ee1ef49', class: "input-container" }, this.label && index.h("label", { key: 'f79e02a925aa6bd1b6cd48fc4225e441695ff893', class: "input-label" }, this.label), index.h("div", { key: 'e2937d2ad1def996e1937a9dd711578a3f9b6494', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: '8bc45cc6f2603bec30f2299286d03beacd8c07fb', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '917fb6fa6c5fe62ab0f1e5c83f09aedd22623353', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -30847,7 +30901,7 @@ const KritzelLineEndings = class {
 };
 KritzelLineEndings.style = kritzelLineEndingsCss();
 
-const kritzelLoadingOverlayCss = () => `:host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}`;
+const kritzelLoadingOverlayCss = () => `:host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-editor-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-editor-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-editor-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}`;
 
 const KritzelLoadingOverlay = class {
     constructor(hostRef) {
@@ -30862,7 +30916,7 @@ const KritzelLoadingOverlay = class {
      */
     text = 'Loading...';
     render() {
-        return (index.h(index.Host, { key: '331e4c9eb30e6f7b98023c23218b3caf5093c34b' }, index.h("div", { key: 'f994fec0db325a2bd687e5acc68263752e7a6acd', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("span", { key: 'b6087dc1e59845ab95946e654c7bb8e568b42dda', class: "loading-spinner" }), this.text)));
+        return (index.h(index.Host, { key: '6fc1886217516966fa3599473989748151d93efd' }, index.h("div", { key: 'c6f2aa1c7f81bbab65411292934d185b4bf69e5a', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("span", { key: '21bae0b6f9b9a08f814aec7e6635a904018ab839', class: "loading-spinner" }), this.text)));
     }
 };
 KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
@@ -30914,7 +30968,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'bcd7f30bbfeb07bbca732c5f1034bcabbd5e4f80' }, index.h("kritzel-dialog", { key: '61b5c5054d43433894747f37c571e68ecf08fc4c', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '3ddcb858b6148e8be4bd121b2bd8ca38c66e0505', class: "login-content" }, this.subtitle && (index.h("p", { key: '6f10f890af9f6025a3aa2d69f8f4d916821fd653', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '0d043ac1ac751dc3d0a561bc16e52a2cfaffc578', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
+        return (index.h(index.Host, { key: '97532a2eeb125a2692117228ec3c77907c90d021' }, index.h("kritzel-dialog", { key: '60597c3d75f532a3c73aab983bed683bea243eac', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'cb086e90c5981f8c3d5fc65e7b94675884a255dc', class: "login-content" }, this.subtitle && (index.h("p", { key: '0ac0e31a5bf8d8a3e24b7df1d388f1cdc6951bd7', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '6057615670a1758581d0c518bb2809b88af0672e', 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,
@@ -31020,15 +31074,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: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, index.h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
+        return (index.h(index.Host, { key: '0166376f16ebb098049cd2ef5539a86086a5570e' }, index.h("div", { key: 'f5091fe672bc4751c8f66d43baa5c1fc86fca034', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', 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: '66f5c61ea0308ea9ae1339526e86dcf1ee51fc0a', 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: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
+            }, 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: 'e8f762ad87fdcf401ec717538bf1e979b22a9f15', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '958360d57a1fad0953bc3865503e86c1d8aa24e3', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: 'c65eb947f80aafec99b367dae7ea72b1a77acdac', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '44557fddf513fffd86c7a1b28b71a41fef7701f1' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -31101,7 +31155,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '27a90a3a8549517a2d6e341a5da13496bf714970', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'c0c2351fac389f6676b38481eaacee553ca6867a', 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: '804ed34eb5340ecc1611ada01f608f7a0cf2f619', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: '6de5954a05b7f28961fa33cf8d34df3a81aae5f8', 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();
@@ -31206,12 +31260,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: '9d6653a630da5a3da38291d89d6d7d59d6994e02', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '9b35e5631cfa14aca391636f06598ef6f2f26550', 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: '48a1678296e672c6c03fb3e1473c42d3a246d481', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: '175258699f76fdad5dcf3c7481e7882c6765bf33', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -31259,6 +31313,14 @@ const KritzelMoreMenu = class {
     itemSelect;
     menuAnchor = null;
     isTouchDevice = schema_constants.KritzelDevicesHelper.isTouchDevice();
+    visibleItems = [];
+    visibilityResolveVersion = 0;
+    onItemsChange() {
+        void this.resolveVisibleItems();
+    }
+    componentWillLoad() {
+        void this.resolveVisibleItems();
+    }
     toggleMenu = (event) => {
         event.stopPropagation();
         if (this.menuAnchor) {
@@ -31267,13 +31329,84 @@ const KritzelMoreMenu = class {
         else {
             window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
             this.menuAnchor = this.host;
+            this.visibleItems = this.filterVisibleItemsSync(this.items ?? []);
+            void this.resolveVisibleItems();
         }
     };
     closeMenu = () => {
         this.menuAnchor = null;
     };
-    get visibleItems() {
-        return this.items.filter(item => item.isVisible !== false);
+    async evaluateVisibility(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                return (await visibility()) !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    evaluateVisibilitySync(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                const result = visibility();
+                return result instanceof Promise ? null : result !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    filterVisibleItemsSync(items) {
+        return items.reduce((visibleItems, item) => {
+            const isVisible = this.evaluateVisibilitySync(item.isVisible);
+            if (isVisible === null || !isVisible) {
+                return visibleItems;
+            }
+            if (!item.children?.length) {
+                visibleItems.push(item);
+                return visibleItems;
+            }
+            visibleItems.push({
+                ...item,
+                children: this.filterVisibleItemsSync(item.children),
+            });
+            return visibleItems;
+        }, []);
+    }
+    async filterVisibleItems(items) {
+        const resolved = await Promise.all(items.map(async (item) => {
+            const isVisible = await this.evaluateVisibility(item.isVisible);
+            if (!isVisible) {
+                return null;
+            }
+            if (!item.children?.length) {
+                return item;
+            }
+            return {
+                ...item,
+                children: await this.filterVisibleItems(item.children),
+            };
+        }));
+        return resolved.filter((item) => !!item);
+    }
+    async resolveVisibleItems() {
+        const version = ++this.visibilityResolveVersion;
+        const items = this.items ?? [];
+        const resolvedItems = await this.filterVisibleItems(items);
+        if (version !== this.visibilityResolveVersion) {
+            return;
+        }
+        this.visibleItems = resolvedItems;
+    }
+    resolveMenuLabels(items) {
+        return items.map(item => ({
+            ...item,
+            label: this.terms[item.label] ?? item.label,
+            children: item.children ? this.resolveMenuLabels(item.children) : undefined,
+        }));
     }
     handleMenuItemSelect = (event) => {
         const { item, parent } = event.detail;
@@ -31284,8 +31417,13 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '96451062021ac2ebcb44b65384a7e9be67f1563b', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: 'e776398742284ea6984925d4a5a99e732674d640', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: '4371b2e5cbf7d35fac09a06ee2e54cd49072929b', 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: '076513ce393222b6f604036ec646a8309bc3a3ac', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: 'fde8071b3199735cc7827a2d6f2eaf79d0e1b997', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '2d49ad8a228c4b55a34c388b794bfdf500fec3c8', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (index.h(index.Host, { key: '3eaf5dac0beb1f08100c9f57f63a2bdbef6e592d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: '30e4426b7d3a06ec45f0159f6403862bf4106723', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: '037b715fadad3b674f07bd9225acc4075b2d41b3', 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: 'b68b306b5b913ff36d220604a70626aa8468215c', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: 'dc86c2679956f2dfc66d000b183d99865291b6d3', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '9bd661fceea95df4d307e497d64365fcb854e8ce', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
     }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChange": 0
+            }]
+    }; }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
 
@@ -31451,7 +31589,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (index.h(index.Host, { key: '8901e0b56ccbc344420483a4a56663f7cd74d9e8' }, index.h("div", { key: '5f3d6b5c56007e11383aa69f60f22031b0e8f332', class: "input-container" }, this.label && index.h("label", { key: '2cb102a5b6c16d068f4f304fbcc6241f79fc0ce8', class: "input-label" }, this.label), index.h("div", { key: '96441095acc3d9a8e77b6d2bac2ceda683c9c976', class: "input-wrapper" }, index.h("input", { key: '523a5485111077e20faded235df6362e5ea9cfd4', 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: '2071e98125a8d014513e93052bd8c1fee17932a5', class: "spinner-buttons" }, index.h("button", { key: '12422e5285dfb532dbbb6eb1a36dbcb3de50f2bc', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '49ad5625c80fae6706ba4ab91f47bd550481ef74', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'ff7d19b61baeb5ba58bb60f2cc629bcec6eb4411', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: 'e4fec28e4fc997e007127f2b30b00cc752433221', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '27bf06cde8de11f4a97090911afd6b8993463112', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'ed7071dd79bfe509ebb319ce43ecb3e982dd4157', 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: '68e6fecd79c3c970d1742b1a0bb8667ca2d31729' }, index.h("div", { key: 'efcf623186d221690bbb956088ec51343de07f3a', class: "input-container" }, this.label && index.h("label", { key: '300de793f02008ad037da021003b46fc34fc5239', class: "input-label" }, this.label), index.h("div", { key: '9ff424901fddfcbdac4835e2b2089df2e0966d0f', class: "input-wrapper" }, index.h("input", { key: 'fc77e6ad1c0b15e3dd3f960b6448ddab1a9beeb1', 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: 'c286606fa0617cc3acbbe40a27e40b154002e01d', class: "spinner-buttons" }, index.h("button", { key: 'e3a65a327975918fe604cd196ffb087fc4d3ca47', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '62b2ff4ed67ca8b6fc220ff9c63ceca90f75baea', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '803d5c30826d40d95f282071f3f88356366a9faf', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '3c54a48e7082f5aaa9ed923357d0cc4a722018b5', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '9f6cb5f34bbb0e70b5773aecec519b7d8b742712', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '6539b0d4f4bd26e463fa9152cf58757497355cf6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -31490,7 +31628,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (index.h(index.Host, { key: '2dadd8a7c4d1af748e91a6005433288ab231f2e8' }, index.h("div", { key: '65ae90d95bffff244d97329754cf0cb8f73331fa', class: "opacity-container" }, index.h("div", { key: '90e95347f7015882112f0653a25347e715233227', class: "slider-wrapper" }, index.h("input", { key: '15836bc089c1725062016677d3b95384d1958431', 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: '895ae10ad71e846a1bc62b794751332816650727' }, index.h("div", { key: '22ea167ce0d6eb17c733d789cde10477c48a2a0e', class: "opacity-container" }, index.h("div", { key: '2be4fbf8c1f8ddb1fde8f9da727ed0947d21646c', class: "slider-wrapper" }, index.h("input", { key: 'ed3621baf0adc54aa513a0296ede2f413378a06f', 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,
             } })))));
@@ -31843,7 +31981,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (index.h(index.Host, { key: '72273b4c7811473072ee27668836a5ddddcfd618', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: 'b4f37ca27c47ab950a4639162fa31a3c2362d6f7' })));
+        return (index.h(index.Host, { key: '489a752e48d96c2607defa40a39477675685b60a', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '13c6b7567039b8c8c78de27e3d9aeda30a798de1' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -31857,7 +31995,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.8';
+const KRITZEL_VERSION = '0.4.10';
 
 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-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.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)}`;
 
@@ -32069,7 +32207,7 @@ const KritzelSettings = class {
         return (index.h("div", { class: "settings-categories-wrapper" }, index.h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, index.h("div", { class: "settings-content" }, index.h("h3", null, this.t('settings.general.title', 'General Settings')), index.h("div", { class: "settings-group" }, index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), index.h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), index.h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), index.h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), index.h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), index.h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), index.h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), index.h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, index.h("div", { class: "settings-content" }, index.h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), index.h("div", { class: "settings-group" }, index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), index.h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), index.h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), index.h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), index.h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), index.h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), index.h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), index.h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), index.h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, index.h("div", { class: "settings-content" }, index.h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), index.h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (index.h("div", { class: "shortcuts-category", key: category }, index.h("h4", { class: "shortcuts-category-title" }, category), index.h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (index.h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, index.h("span", { class: "shortcut-label" }, shortcut.label), index.h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), index.h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, index.h("div", { class: "settings-content" }, index.h("h3", null, this.t('settings.developer.title', 'Developer Options')), index.h("div", { class: "settings-group" }, index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), index.h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), index.h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), index.h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), index.h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), index.h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, index.h("div", { class: "settings-content" }, index.h("h3", null, this.t('settings.about.title', 'About')), index.h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), index.h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), index.h("p", { class: "version-info" }, "App-State Schema v", schema_constants.CURRENT_APP_STATE_SCHEMA_VERSION), index.h("p", { class: "version-info" }, "Workspace Schema v", schema_constants.CURRENT_WORKSPACE_SCHEMA_VERSION)))));
     }
     render() {
-        return (index.h(index.Host, { key: '36bca8be04b34a37630d6aa5394595a8b394d180' }, index.h("kritzel-dialog", { key: '1e257904178fd9afa2bfbe4a758663fb366c8847', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'b7d9ad97d9b126ccf6e800e6c9032749635eb988', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '71f8a12325a781212dd6f2c8b794563fcb4eee64' }, index.h("kritzel-dialog", { key: '1abe7c1dedcf79433a95d60dadce342f46e62c3a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '9e8b3a11d97c1a10c6693434eb2e8bfc1d3fda7d', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{
@@ -35309,9 +35447,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'd30a468b9443f76731b207cb5caec1911f378c15' }, index.h("kritzel-dialog", { key: '4a4ec0a2becba58a49a87fc411a82e26557d8232', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: '0b2fec3db6c039752429768fb4bd6a2150a4345e', class: "share-content" }, index.h("div", { key: 'bd0b85f8418d0c46d14b718024ed62b9f72e4f52', class: "share-section" }, index.h("div", { key: 'bf62503a593454ffacd30d532fcd79dcbf938659', class: "share-row" }, index.h("div", { key: 'dfd9e83166b886d00fb5b097d0ccd77169c011bd', class: "share-label-group" }, index.h("label", { key: '67dba950ded47a08eb006c1628d14038b18171b5', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: '926f8670b35dab1e3e2a6496f44b5d6e0ee46417', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: 'f6028ad618f04e3be65c816f4b53c4ccaa93fc71' }, index.h("kritzel-dialog", { key: '7dabab65955f287650de4ba484e37f4ccdd7c57e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: '321e2b17048dea20528c0f34f39a462548c64689', class: "share-content" }, index.h("div", { key: 'b31bbe2f686f5fe2fdc03189ffb98082683fff63', class: "share-section" }, index.h("div", { key: '2c864e00aa4c2da0a7f8ee6c83f149e6e93610a5', class: "share-row" }, index.h("div", { key: 'cbee03ac7ec9ee82f22c77d3681d4a540a0780a3', class: "share-label-group" }, index.h("label", { key: '3be7c8dc2ac2f7dbfe6458a902b14a887895fdc3', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: 'c7401bc76fdccbafc6c7c4e37380fc75f35b3a99', 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: 'e42fabecb37fd21cc4907b966e2f50113b945eda', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: '40afacc81e0bbcf4c404ae32491e5142a32bca66', class: "share-section" }, index.h("div", { key: '57b6952670b1cbc789770362b573623035b50cf3', class: "share-url-container" }, index.h("input", { key: '0ee836655ca26c1e073d5d86014322939527c74b', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: '2d4661c1718bd8390dbe1146e8f9afe035934635', 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: 'b43bde94601c352b6065c89c026807d7efb3bcc3', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (index.h("div", { key: 'f4d657aa918abbb3cf3ed039332d8c67247b83e8', class: "share-qr-container" }, index.h("img", { key: 'b165a446df3fba87918a19928734d39af1e6bfcf', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), index.h("kritzel-slide-toggle", { key: '52ae14da0d79797e9ad73f1ffbac003fd1395f47', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: 'bd44618680db14d7d95f0c1bbc4441a103e9f15a', class: "share-section" }, index.h("div", { key: '659cd6b2e2e719d76f692a8dc5a8c0855e5d246d', class: "share-url-container" }, index.h("input", { key: '76be432ecaad753cb7043aad912d8aa1770afb61', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'ef75a04964fb481fae2f6e924497eb2adedc100d', 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: '06bbdc32d4348ca6d75dbbe11ba74d94e1c86882', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (index.h("div", { key: '9246e86b26a9794738a29e6a6bfe6c4812339449', class: "share-qr-container" }, index.h("img", { key: '90e18eee230c23e0bfd773c9b8a6967803ae10dc', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -35352,7 +35490,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '00160c9cfdafa0d53f3acfb1fb235b29abf2622a', 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: '385008948ffbdc0f26249d2d833aae8f04eeb6a0', class: "toggle-track" }, index.h("div", { key: '43929e94335589feb24ee45f1c34a270653dd412', class: "toggle-thumb" }))));
+        return (index.h(index.Host, { key: 'e310e7bc8c115feadaa2494a6a543719f1b25245', 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: 'fef37a1b373bf438cbacbf6537640269c2ab6b59', class: "toggle-track" }, index.h("div", { key: '4e140f83a8802e04c0b42e76f5e5719efd5a1cbc', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -35452,7 +35590,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: 'fa22dc1185ef07d8127d9ee9f6dbe482d126f934', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'a48aba702b70e9b24ad5486dde61fa9f9c8f7cdc', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '0d1c9a3e9f744541dd6ebe491105f6ee65233543', name: this.buttonIcon })), index.h("div", { key: 'c9db29f0b9c9cf1974d78f4f60be9e1b0e26c5d2', class: "split-divider" }), index.h("button", { key: '57addfd5228b7c7668be902c53683d12c976b89b', 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: 'd860cc503043425860b1234b5d34693bfdd1d5ab', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'cd6dda8869aea4205d922fc639073019bbd2b102', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '1ef1c2b319662e7a2af15b46362addcc75bceb68', 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: 'f7f5019b32f4514a4ccf5bd07742658e3d05020a', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '361007b4281edfe2bf18f28f7c4f19ba1f251b49', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '17d4fad6cfa070225daa67dfc648d4ac64091e90', name: this.buttonIcon })), index.h("div", { key: 'c18107b7d557525092c28ff5d7336ebb3648b672', class: "split-divider" }), index.h("button", { key: 'c7a9a67d832f026fa8e21eff7ea5935cd72862ed', 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: '5b40284c8f04fba80ca606b0af201040efe53880', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '62bd7f26c020497f2131759d0d1ef9d18e817b37', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'a1a11a0ae33f9626db3cd56fbb881c613f1ab78c', 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();
@@ -35473,7 +35611,7 @@ const KritzelStrokeSize = class {
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: 'ba181d798d2bf7b60308746635d2077ce1353b83' }, index.h("div", { key: '048fc8934190359b9337747567844ca88925a6ce', class: "size-grid" }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'c0307e527e6f9d5d663ae3f8f605162cdde2a339' }, index.h("div", { key: '9533e0486f8078d25b7e8fc3323126d77700ac72', 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 })))))));
@@ -35481,7 +35619,7 @@ const KritzelStrokeSize = class {
 };
 KritzelStrokeSize.style = kritzelStrokeSizeCss();
 
-const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-editor-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-editor-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 const KritzelSyncIndicator = class {
     constructor(hostRef) {
@@ -35492,7 +35630,7 @@ const KritzelSyncIndicator = class {
     /** The text displayed next to the spinner. */
     text = 'Syncing...';
     render() {
-        return (index.h(index.Host, { key: '585d5fd13116c093e5221164e36e6e986a63da58' }, index.h("div", { key: 'd4e0d9e51db002b8ea201a0564c22916809c346d', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, index.h("span", { key: 'b82f4c363ee31ae697e435fc8eb6ce0e2f3df1ab', class: "spinner", "aria-hidden": "true" }), index.h("span", { key: 'f39e04332aaf622dad69d0e5d6b6e90ee5df3ed1' }, this.text))));
+        return (index.h(index.Host, { key: '05e825ee1c08fe02008b8e1adfe9e09a7996f221' }, index.h("div", { key: 'ea1635896f643c16713d35d6efd3abf486b1fbe2', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, index.h("span", { key: '7b57ea67d6f2c40dc74e966c16ebe9d95c75394a', class: "spinner", "aria-hidden": "true" }), index.h("span", { key: 'fc16405b02d96213d0025239b6e863883192ada5' }, this.text))));
     }
 };
 KritzelSyncIndicator.style = kritzelSyncIndicatorCss();
@@ -35905,14 +36043,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '227146703158aa65ecffcce348e568d559cee829', style: {
+        return (index.h(index.Host, { key: '93486d37c5dcaaf9a3d0d1c53d6308ddd5712560', 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: '573e97ed81920066e8fbf50f790224c23b37ec21', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'c489b45928cf6720c6827df73b9eedf08bc9d5e2' }))));
+            } }, index.h("div", { key: '4b5cf451f75d09459145b874eb3c7faffafa87e0', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: '6c7fda100473a7d4fc533edc52d67bf6909bdc0e' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -35953,7 +36091,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '3e86e2c4c480ab56f4646a4f288ad37a63e29642' }, index.h("button", { key: 'e5282e42994f2de061ec36bf892f4da3fc01d2e5', 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: '5a2b903cc3e5f9c554928f11a1c3098d569cbc4d', name: "undo" })), index.h("button", { key: '466cdff71501f34f0236b4dc60263817966d7b4a', 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: '19209a95787f4475eda9dc0712c2bf36a573c953', name: "redo" })), index.h("div", { key: '7a463d5ac1f78017fb728abcd2c33061d8545978', class: "utility-separator" }), index.h("button", { key: '155c2bb50d70223e4f4d5377bacced56ffda68ad', 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: '47bd8469b9efe395e9185b3e7375c7375811c0aa', name: "delete" }))));
+        return (index.h(index.Host, { key: '57c1a6746e4d5b319bb368c9d0bfc52a31d8c8de' }, index.h("button", { key: '5fb00d62b68de41feda9fafb3eec46cc0b85ba0e', 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: '5ed2c36405ac7113ac697de9102aaf7067127e2a', name: "undo" })), index.h("button", { key: '0d58c8cbbb8e9547b9416dbf81a2c8011208dc6c', 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: '70264118cbe0f54335a02941fdc868f63476cd1c', name: "redo" })), index.h("div", { key: '6eed6a603b8bc62e55b1f6fe82e7d035d1f5833c', class: "utility-separator" }), index.h("button", { key: 'd11195da7a86496afcca26105a6a0f066b1b2340', 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: '5e4c731f90863b4db917c67ac7e87c2945c7bcaa', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -35974,7 +36112,7 @@ const KritzelWatermark = class {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (index.h(index.Host, { key: '0eccc75e51c7ac199e23d8f3a871593f1fb65a17' }, index.h("a", { key: '2029f8b56ba8609ca621447eac0df9d30ebfbbbe', 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: 'ae00d98f16912afcb7a90d47a9fc4d55fc7468f0' }, index.h("a", { key: '8781f94c9efe44b0e7a7a8c20a119160cb9feb8e', 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();
@@ -36162,7 +36300,7 @@ const KritzelZoomPanel = class {
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (index.h(index.Host, { key: '054e24893ed609c29b02cf574a68cf9311a3f025' }, index.h("div", { key: '42ad21dca9486ae350d5814b949e0c577a6ed996', class: { panel: true, visible: this.visible } }, index.h("button", { key: 'e360884e5a2edaada46d232cae8121f2c5f45bb6', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '8c8bb23c4ec4b78fd04aee5c0edd3371c4d14125', name: "minus" })), index.h("span", { key: '42ab93551c2fbb6d8d4ef076d66405277ba941bf', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: '232f0f74b748999c6892549978bbe085636ca189', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: '6f9b8ddd4c666573d9716d7bc455c2a3b1035ede', name: "plus" })))));
+        return (index.h(index.Host, { key: 'ac5b3f37fbc298b1522f0ff80c26734164b5358a' }, index.h("div", { key: '8ac3f3600c45c064d9c4c4c9efa78397790edf4b', class: { panel: true, visible: this.visible } }, index.h("button", { key: '63b2a3fce804a310146d95cc9c2a874707f9e265', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '86ebb85dfc2b746cedd0ed63cd2ae90378f6bbb8', name: "minus" })), index.h("span", { key: '5191cc1aa9966234c1634882af145403acd32211', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: '47a7ee5b6c1cf1c99cd1826877e0a1c4ce224442', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: '09782e094534fbc5bbcc612f24eea359568d6132', name: "plus" })))));
     }
 };
 KritzelZoomPanel.style = kritzelZoomPanelCss();