kritzel-stencil 0.4.7 → 0.4.9

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

@@ -21,11 +21,11 @@ import { KritzelCore } from "../../../classes/core/core.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 import { throttle } from "lodash";
 import { KritzelColorHelper } from "../../../helpers/color.helper";
-import { KritzelSvgExportHelper } from "../../../helpers/svg-export.helper";
 import { toPng, toSvg } from "html-to-image";
 import { ObjectHelper } from "../../../helpers/object.helper";
 import { KritzelWheelHelper } from "../../../helpers/wheel.helper";
 import { resolveTextToolAvailableFonts } from "../../../constants/text-tool-fonts.constants";
+import { KritzelSvgExportHelper } from "../../../helpers/svg-export.helper";
 export class KritzelEngine {
     host;
     /** The workspace to load and display. Changing this prop switches the active workspace. */
@@ -1217,10 +1217,7 @@ export class KritzelEngine {
                 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);
@@ -1242,129 +1239,57 @@ export class KritzelEngine {
                 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);
         }
     }
     /**
@@ -1559,6 +1484,73 @@ export class KritzelEngine {
         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;
@@ -2416,7 +2408,9 @@ export class KritzelEngine {
                 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" }, 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: {
+        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: {
+                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})`,
                 opacity: this._sceneBootstrapOpacity.toString(),
                 transition: this._sceneBootstrapTransitionEnabled ? 'opacity 220ms ease-out' : 'none',
@@ -2599,6 +2593,7 @@ export class KritzelEngine {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
+                    color: 'var(--kritzel-global-text-primary)',
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
@@ -2799,8 +2794,12 @@ export class KritzelEngine {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: isActiveSnap ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))' : 'rgba(59, 130, 246, 0.18)',
-                    stroke: isActiveSnap ? 'var(--kritzel-snap-indicator-stroke, #007bff)' : 'rgba(59, 130, 246, 0.5)',
+                    fill: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))'
+                        : 'var(--kritzel-snap-indicator-fill-inactive, var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.18)))',
+                    stroke: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-stroke, #007bff)'
+                        : 'var(--kritzel-snap-indicator-stroke-inactive, var(--kritzel-snap-indicator-stroke, rgba(59, 130, 246, 0.5)))',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })(), (() => {
@@ -5446,106 +5445,81 @@ export class KritzelEngine {
                         }]
                 }
             },
-            "getSelectedObjectsAsSvgString": {
+            "getSelectedObjectSupportedExportFormats": {
                 "complexType": {
-                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; rasterSafeForCanvas?: boolean; }) => Promise<string | null>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; rasterSafeForCanvas?: boolean; }",
-                            "docs": "- Optional export settings (theme, padding, raster-safe mode for canvas export)."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Generates an SVG string from the currently selected objects.\nCreates clean, standards-compliant SVG markup by directly serializing object properties.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "options - Optional export settings (theme, padding, raster-safe mode for canvas export)."
-                        }, {
-                            "name": "returns",
-                            "text": "SVG markup string, or null if no objects are selected."
-                        }]
-                }
-            },
-            "exportSelectedObjectsAsSvg": {
-                "complexType": {
-                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; }) => Promise<void>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; }",
-                            "docs": "- Optional export settings (theme, padding)."
-                        }],
+                    "signature": "() => Promise<KritzelObjectExportFormat[]>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<KritzelObjectExportFormat[]>"
                 },
                 "docs": {
-                    "text": "Exports the currently selected objects as an SVG file and triggers a browser download.\nCreates clean, standards-compliant SVG markup suitable for import into vector editors.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "options - Optional export settings (theme, padding)."
-                        }]
+                    "text": "Returns export formats supported by the currently selected object.\nOnly returns formats when exactly one object is selected.",
+                    "tags": []
                 }
             },
-            "getSelectedObjectsAsPngDataUrl": {
+            "canExportSelectedObjectAs": {
                 "complexType": {
-                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; scale?: number; }) => Promise<string | null>",
+                    "signature": "(format: KritzelObjectExportFormat) => Promise<boolean>",
                     "parameters": [{
-                            "name": "options",
-                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; scale?: number; }",
-                            "docs": "- Optional export settings (theme, padding, scale for resolution)."
+                            "name": "format",
+                            "type": "\"svg\" | \"png\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
                         }
                     },
-                    "return": "Promise<string>"
+                    "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Generates a PNG data URL from the currently selected objects.\nConverts the SVG representation to a rasterized PNG image.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "options - Optional export settings (theme, padding, scale for resolution)."
-                        }, {
-                            "name": "returns",
-                            "text": "PNG data URL string, or null if no objects are selected."
-                        }]
+                    "text": "Checks whether the currently selected object supports a specific export format.\nReturns false when none or multiple objects are selected.",
+                    "tags": []
                 }
             },
-            "exportSelectedObjectsAsPng": {
+            "exportSelectedObject": {
                 "complexType": {
-                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; scale?: number; }) => Promise<void>",
+                    "signature": "(format: KritzelObjectExportFormat) => Promise<void>",
                     "parameters": [{
-                            "name": "options",
-                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; scale?: number; }",
-                            "docs": "- Optional export settings (theme, padding, scale for resolution)."
+                            "name": "format",
+                            "type": "\"svg\" | \"png\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KritzelObjectExportFormat": {
+                            "location": "import",
+                            "path": "../../../interfaces/object-export.interface",
+                            "id": "src/interfaces/object-export.interface.ts::KritzelObjectExportFormat",
+                            "referenceLocation": "KritzelObjectExportFormat"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Exports the currently selected objects as a PNG file and triggers a browser download.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "options - Optional export settings (theme, padding, scale for resolution)."
-                        }]
+                    "text": "Exports the currently selected object in the requested format and triggers a file download.\nOnly supports single selection.",
+                    "tags": []
                 }
             },
             "exportAsJson": {

package/dist/collection/components/ui/kritzel-export/kritzel-export.js

@@ -69,7 +69,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '0bc45e80716be4a7b19ae12a6464a641b5bd4550' }, h("kritzel-dialog", { key: 'f336f8b1e4ae10954d48ca67da88504faf06b295', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e2d1209652bb54fb7f623e50bc4bbbb703083b76', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd78430b78d1e8c4ac0a76e8a6a5d48bebf5e889', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: 'e06564889d991afc7a4ac43bb1e5504e98c94c52', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '0bc45e80716be4a7b19ae12a6464a641b5bd4550' }, h("kritzel-dialog", { key: 'f336f8b1e4ae10954d48ca67da88504faf06b295', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e2d1209652bb54fb7f623e50bc4bbbb703083b76', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd78430b78d1e8c4ac0a76e8a6a5d48bebf5e889', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'd04221d9f98a066d538f98f8c9409c558fdfa29f', slot: "footer" }, h("button", { key: '5cbb062756f29a897088d6647c6b8eae9f5781e2', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js

@@ -9,7 +9,7 @@ export class KritzelLoadingOverlay {
      */
     text = 'Loading...';
     render() {
-        return (h(Host, { key: '331e4c9eb30e6f7b98023c23218b3caf5093c34b' }, h("div", { key: 'f994fec0db325a2bd687e5acc68263752e7a6acd', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'b6087dc1e59845ab95946e654c7bb8e568b42dda', class: "loading-spinner" }), this.text)));
+        return (h(Host, { key: 'ce2edf698db335518979f597ad32fa259c3055b9' }, h("div", { key: '7cf019929b72d18fdd1cea55157dc5b5fc2ea151', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '86b7cb040bcfb1abb2161a38f9cff153d5aa6c18', class: "loading-spinner" }), this.text)));
     }
     static get is() { return "kritzel-loading-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'bcd7f30bbfeb07bbca732c5f1034bcabbd5e4f80' }, h("kritzel-dialog", { key: '61b5c5054d43433894747f37c571e68ecf08fc4c', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '3ddcb858b6148e8be4bd121b2bd8ca38c66e0505', class: "login-content" }, this.subtitle && (h("p", { key: '6f10f890af9f6025a3aa2d69f8f4d916821fd653', class: "login-subtitle" }, this.subtitle)), h("div", { key: '0d043ac1ac751dc3d0a561bc16e52a2cfaffc578', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '561b4e76017e71d99f05cd33ed9f6e3769bb9aec' }, h("kritzel-dialog", { key: '74b904f67496debebf7a1854e3e3dd193f14a445', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'dcc2a024349fcdfcad7c7c6d5b7754e5ae990ae3', class: "login-content" }, this.subtitle && (h("p", { key: 'fdc927c84294a2ac92aec90001c3da373cc5f082', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'a6e74ff9b3211df195b05edd2be0ce69d1b128df', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js

@@ -32,6 +32,14 @@ export class KritzelMoreMenu {
     itemSelect;
     menuAnchor = null;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    visibleItems = [];
+    visibilityResolveVersion = 0;
+    onItemsChange() {
+        void this.resolveVisibleItems();
+    }
+    componentWillLoad() {
+        void this.resolveVisibleItems();
+    }
     toggleMenu = (event) => {
         event.stopPropagation();
         if (this.menuAnchor) {
@@ -40,13 +48,84 @@ export class KritzelMoreMenu {
         else {
             window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
             this.menuAnchor = this.host;
+            this.visibleItems = this.filterVisibleItemsSync(this.items ?? []);
+            void this.resolveVisibleItems();
         }
     };
     closeMenu = () => {
         this.menuAnchor = null;
     };
-    get visibleItems() {
-        return this.items.filter(item => item.isVisible !== false);
+    async evaluateVisibility(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                return (await visibility()) !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    evaluateVisibilitySync(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                const result = visibility();
+                return result instanceof Promise ? null : result !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    filterVisibleItemsSync(items) {
+        return items.reduce((visibleItems, item) => {
+            const isVisible = this.evaluateVisibilitySync(item.isVisible);
+            if (isVisible === null || !isVisible) {
+                return visibleItems;
+            }
+            if (!item.children?.length) {
+                visibleItems.push(item);
+                return visibleItems;
+            }
+            visibleItems.push({
+                ...item,
+                children: this.filterVisibleItemsSync(item.children),
+            });
+            return visibleItems;
+        }, []);
+    }
+    async filterVisibleItems(items) {
+        const resolved = await Promise.all(items.map(async (item) => {
+            const isVisible = await this.evaluateVisibility(item.isVisible);
+            if (!isVisible) {
+                return null;
+            }
+            if (!item.children?.length) {
+                return item;
+            }
+            return {
+                ...item,
+                children: await this.filterVisibleItems(item.children),
+            };
+        }));
+        return resolved.filter((item) => !!item);
+    }
+    async resolveVisibleItems() {
+        const version = ++this.visibilityResolveVersion;
+        const items = this.items ?? [];
+        const resolvedItems = await this.filterVisibleItems(items);
+        if (version !== this.visibilityResolveVersion) {
+            return;
+        }
+        this.visibleItems = resolvedItems;
+    }
+    resolveMenuLabels(items) {
+        return items.map(item => ({
+            ...item,
+            label: this.terms[item.label] ?? item.label,
+            children: item.children ? this.resolveMenuLabels(item.children) : undefined,
+        }));
     }
     handleMenuItemSelect = (event) => {
         const { item, parent } = event.detail;
@@ -57,7 +136,7 @@ export class KritzelMoreMenu {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '96451062021ac2ebcb44b65384a7e9be67f1563b', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'e776398742284ea6984925d4a5a99e732674d640', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '4371b2e5cbf7d35fac09a06ee2e54cd49072929b', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: '076513ce393222b6f604036ec646a8309bc3a3ac', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'fde8071b3199735cc7827a2d6f2eaf79d0e1b997', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '2d49ad8a228c4b55a34c388b794bfdf500fec3c8', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: 'dbfe312eccd24901ffc68179ef93ba0a94a765c5', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '33bd535bb58ae32a32d44133a109fdd3667b4947', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '23dbae51d73b92b181721bdef4a44049ec6484c5', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'bda7c092b57af366b5d6b882cbab991cd9bb77ba', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '2959ac3e6e0a5598c735ce7a01619bda8753039f', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'a5481a1bc02dc059dc0ad188b93b9eaf9b56e98f', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
     }
     static get is() { return "kritzel-more-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -216,7 +295,8 @@ export class KritzelMoreMenu {
     static get states() {
         return {
             "menuAnchor": {},
-            "isTouchDevice": {}
+            "isTouchDevice": {},
+            "visibleItems": {}
         };
     }
     static get events() {
@@ -245,4 +325,10 @@ export class KritzelMoreMenu {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }];
+    }
 }