kritzel-stencil 0.4.8 → 0.4.10

package/dist/components/{p-D8bHNNEm.js → p-C6e7eOEb.js}

@@ -1,19 +1,17 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as KritzelMouseButton, d as defineCustomElement$5 } from './p-Cm33td2O.js';
-import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$6 } from './p-0H4HOJjy.js';
+import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-Cm33td2O.js';
+import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$4 } from './p-bAacqNHq.js';
 import { c as commonjsGlobal } from './p-BFTU3MAI.js';
-import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-CURiiQfq.js';
+import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-7I4Uzjrw.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { K as KritzelFontRegistry, r as resolveTextToolAvailableFonts } from './p-DJkKlUyZ.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-CwuGA058.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-DtnMdWWB.js';
 import { K as KritzelWorkspace, W as WORKSPACE_EXPORT_VERSION } from './p-DAwPPDMS.js';
 import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
-import { O as ObjectHelper } from './p-Dd-pMvlr.js';
+import { O as ObjectHelper } from './p-DPONTran.js';
 import * as Y from 'yjs';
 import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
-import { K as KritzelIconRegistry, d as defineCustomElement$4 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$3 } from './p-BVEGQLBD.js';
-import { d as defineCustomElement$2 } from './p-CM1duewg.js';
+import { K as KritzelIconRegistry, d as defineCustomElement$2 } from './p-CdR76C4L.js';
 
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
@@ -15453,6 +15451,15 @@ class KritzelImage extends KritzelBaseObject {
         }
         return { scaledWidth, scaledHeight };
     }
+    getSupportedExportFormats() {
+        return ['png'];
+    }
+    async exportAs(format, context) {
+        if (format !== 'png') {
+            return null;
+        }
+        return context.getObjectAsPngDataUrl(this);
+    }
 }
 
 class KritzelClassHelper {
@@ -16660,6 +16667,15 @@ class KritzelShape extends KritzelBaseObject {
                 return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
         }
     }
+    getSupportedExportFormats() {
+        return ['svg'];
+    }
+    async exportAs(format, context) {
+        if (format !== 'svg') {
+            return null;
+        }
+        return context.getObjectAsSvgDataUrl(this);
+    }
 }
 
 const KRITZEL_RENDERER_REGISTRY_KEY = '__kritzelCustomElementRendererRegistry__';
@@ -23382,8 +23398,8 @@ const EN_LOCALE = {
         'toolConfig.expand': 'Expand',
         // More menu button
         'moreMenu.ariaLabel': 'More options',
-        // Engine
-        'engine.loading': 'Loading...',
+        // Editor
+        'editor.loading': 'Loading...',
         // Watermark
         'watermark.poweredBy': 'Powered by Kritzel',
     },
@@ -23502,8 +23518,8 @@ const DE_LOCALE = {
         'toolConfig.expand': 'Ausklappen',
         // More menu button
         'moreMenu.ariaLabel': 'Weitere Optionen',
-        // Engine
-        'engine.loading': 'Wird geladen...',
+        // Editor
+        'editor.loading': 'Wird geladen...',
         // Watermark
         'watermark.poweredBy': 'Bereitgestellt von Kritzel',
     },
@@ -23622,8 +23638,8 @@ const FR_LOCALE = {
         'toolConfig.expand': 'Développer',
         // More menu button
         'moreMenu.ariaLabel': "Plus d'options",
-        // Engine
-        'engine.loading': 'Chargement...',
+        // Editor
+        'editor.loading': 'Chargement...',
         // Watermark
         'watermark.poweredBy': 'Propulsé par Kritzel',
     },
@@ -47003,995 +47019,343 @@ 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 (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) => 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');
-        }
-        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);
+    catch (error) {
+        dataURL = options.imagePlaceholder || '';
+        let msg = `Failed to fetch resource: ${resourceUrl}`;
+        if (error) {
+            msg = typeof error === 'string' ? error : error.message;
         }
-        if (typeof btoa === 'function') {
-            return btoa(binary);
+        if (msg) {
+            console.warn(msg);
         }
-        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 (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 (KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
-            return this.pathToSvg(object, theme);
-        }
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
-            return this.lineToSvg(object, theme);
-        }
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
-            return this.shapeToSvg(object, theme);
-        }
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
-            return this.textToSvg(object, theme, rasterSafeForCanvas);
-        }
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
-            return this.imageToSvg(object, imageDataUrls);
-        }
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
-            return this.customElementToSvg(object, rasterSafeForCanvas);
-        }
-        if (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 = KritzelColorHelper.resolveThemeColor(path.fill, theme);
-        const stroke = 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 = 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 = KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
-        const stroke = 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 = 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 = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
-        const bgColor = 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 = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
-        const bgColor = 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);
-        }
-    }
-    cache[cacheKey] = dataURL;
-    return dataURL;
-}
-
-async function cloneCanvasElement(canvas) {
-    const dataURL = canvas.toDataURL();
-    if (dataURL === 'data:,') {
-        return canvas.cloneNode(false);
-    }
-    return createImage(dataURL);
-}
-async function cloneVideoElement(video, options) {
-    if (video.currentSrc) {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        canvas.width = video.clientWidth;
-        canvas.height = video.clientHeight;
-        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const dataURL = canvas.toDataURL();
-        return createImage(dataURL);
-    }
-    const poster = video.poster;
-    const contentType = getMimeType(poster);
-    const dataURL = await resourceToDataURL(poster, contentType, options);
-    return createImage(dataURL);
-}
-async function cloneIFrameElement(iframe, options) {
-    var _a;
-    try {
-        if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
-            return (await cloneNode(iframe.contentDocument.body, options, true));
+    cache[cacheKey] = dataURL;
+    return dataURL;
+}
+
+async function cloneCanvasElement(canvas) {
+    const dataURL = canvas.toDataURL();
+    if (dataURL === 'data:,') {
+        return canvas.cloneNode(false);
+    }
+    return createImage(dataURL);
+}
+async function cloneVideoElement(video, options) {
+    if (video.currentSrc) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = video.clientWidth;
+        canvas.height = video.clientHeight;
+        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const dataURL = canvas.toDataURL();
+        return createImage(dataURL);
+    }
+    const poster = video.poster;
+    const contentType = getMimeType(poster);
+    const dataURL = await resourceToDataURL(poster, contentType, options);
+    return createImage(dataURL);
+}
+async function cloneIFrameElement(iframe, options) {
+    var _a;
+    try {
+        if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
+            return (await cloneNode(iframe.contentDocument.body, options, true));
         }
     }
     catch (_b) {
@@ -48492,156 +47856,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 (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) => 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 (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 (KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
+            return this.pathToSvg(object, theme);
+        }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+            return this.lineToSvg(object, theme);
+        }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
+            return this.shapeToSvg(object, theme);
+        }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+            return this.textToSvg(object, theme, rasterSafeForCanvas);
+        }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+            return this.imageToSvg(object, imageDataUrls);
+        }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            return this.customElementToSvg(object, rasterSafeForCanvas);
+        }
+        if (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 = KritzelColorHelper.resolveThemeColor(path.fill, theme);
+        const stroke = 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 = 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 = KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
+        const stroke = 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 = 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 = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = 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 = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = 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;');
     }
 }
 
@@ -49838,10 +49854,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 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);
@@ -49863,129 +49876,57 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 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);
         }
     }
     /**
@@ -50180,6 +50121,73 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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 (!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;
@@ -51060,7 +51068,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 this.emitObjectsInViewportChange();
             }
         }
-        return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
+        return (h(Host, null, this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
                 color: 'var(--kritzel-global-text-primary)',
             } }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), 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})`,
@@ -51659,10 +51667,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "getScreenshot": [64],
         "exportViewportAsPng": [64],
         "exportViewportAsSvg": [64],
-        "getSelectedObjectsAsSvgString": [64],
-        "exportSelectedObjectsAsSvg": [64],
-        "getSelectedObjectsAsPngDataUrl": [64],
-        "exportSelectedObjectsAsPng": [64],
+        "getSelectedObjectSupportedExportFormats": [64],
+        "canExportSelectedObjectAs": [64],
+        "exportSelectedObject": [64],
         "exportAsJson": [64],
         "importFromJson": [64],
         "loadObjectsFromJson": [64],
@@ -51763,7 +51770,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-cursor-trail", "kritzel-icon", "kritzel-loading-overlay", "kritzel-sync-indicator", "kritzel-watermark"];
+    const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-cursor-trail", "kritzel-icon", "kritzel-watermark"];
     components.forEach(tagName => { switch (tagName) {
         case "kritzel-engine":
             if (!customElements.get(transformTag(tagName))) {
@@ -51771,26 +51778,16 @@ function defineCustomElement() {
             }
             break;
         case "kritzel-awareness-cursors":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "kritzel-cursor-trail":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "kritzel-icon":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
-        case "kritzel-loading-overlay":
+        case "kritzel-cursor-trail":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
-        case "kritzel-sync-indicator":
+        case "kritzel-icon":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }