kritzel-stencil 0.4.8 → 0.4.10

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,7 @@ 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", 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})`,
@@ -5453,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/core/kritzel-watermark/kritzel-watermark.js

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

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

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
+        return (h(Host, { key: '90ce966bb2a374e68c544906c8c746df6cc01038', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '6799f4ad45c7d40ebaf640f191171ed6a5f14ae9', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31548a495a86f033325c98cfcc0ae398b6bb8281', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '98cdcda64b900994b61a03179be9f2af17c489e8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '64e6a6ee67017c927dce0b51810a5bb02fc0d6d1', class: "avatar-default" }, h("svg", { key: '42f99637a3c23aaf10fa7c99753347ede1d518c0', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '28b52a68b36e98b0e14891fd225457be65f1bb46', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
+        return (h(Host, { key: '51621006f6b085db2b43accf52192f0674d2c50c' }, h("button", { key: '01ab2d96abe5ad34285e59f6fec66f6b21e91849', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '4b085139ea85ad9f836059f4cf2dde15b948e0e2' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'e39c77c55942b9c615e404efabf4939b2cf05a34' }, h("div", { key: 'ac343295592ea80ca7d3da61ca1244dd1aaa50db', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'e797bfa6a2aed82d1913ec2f02f8b25a063564e5' }, h("div", { key: '5b62fcdbb2985b90fe0d7c7b65b507ec1c55e240', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '4c87934b3febd4c41874cd290d86a9a9a557e3e5', class: {
+            } }, h("div", { key: '2d62717ebf81be93219ebda7071c0ba992d7441a', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

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

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
+        return (h(Host, { key: '9a637b3a6946384a889f54dc3a635da7ff014439' }, h("div", { key: '4db8bbc7a234bfed26b60ed306a5f999875e2195', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {

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

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '054371cac30a2433611139a670406b0a1e3b99ff' }, h("div", { key: 'b4f2142b3cb31d067f39952a38b6f665f28f63bf', class: "font-preview", style: {
+        return (h(Host, { key: '42f058426e2afcc49c788f2385e23a5ff153e77c' }, h("div", { key: '962dfc48ba84c5f5d2b98eb2464c69c04764ab0f', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js

@@ -17,7 +17,7 @@ export class KritzelFontSize {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '9d6592f049c25e9dfa2f6f3a270feb2440aa7f35' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));

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

@@ -28,7 +28,7 @@ export class KritzelInput {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: '46a0a48902a06ad85edcbaad3679ce3fe9ba850c' }, h("div", { key: 'a6beaf920614aa959d2fbd68b7268afba8637358', class: "input-container" }, this.label && h("label", { key: 'ca6d3fb3c22f1540795dbb0695ddd9b87cc05eee', class: "input-label" }, this.label), h("div", { key: '78d116e82531a9cca996d594792245449bcaf9c8', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '0d10d6356dea3a11338172bbe8c3c878eefcc708', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '0e6166ba8728efc1035302d7fb048306efbe5a68', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: 'a4d86101322da32c87a62ac8bb05edb7015ede2a' }, h("div", { key: 'abc5b007af0f6f9353e0b680636c92813ee1ef49', class: "input-container" }, this.label && h("label", { key: 'f79e02a925aa6bd1b6cd48fc4225e441695ff893', class: "input-label" }, this.label), h("div", { key: 'e2937d2ad1def996e1937a9dd711578a3f9b6494', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '8bc45cc6f2603bec30f2299286d03beacd8c07fb', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '917fb6fa6c5fe62ab0f1e5c83f09aedd22623353', class: "input-suffix" }, this.suffix)))));
     }
     static get is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js

@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
+        return (h(Host, { key: '0166376f16ebb098049cd2ef5539a86086a5570e' }, h("div", { key: 'f5091fe672bc4751c8f66d43baa5c1fc86fca034', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: '66f5c61ea0308ea9ae1339526e86dcf1ee51fc0a', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'e8f762ad87fdcf401ec717538bf1e979b22a9f15', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '958360d57a1fad0953bc3865503e86c1d8aa24e3', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c65eb947f80aafec99b367dae7ea72b1a77acdac', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '44557fddf513fffd86c7a1b28b71a41fef7701f1' })))));
     }
     static get is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class KritzelMenu {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '27a90a3a8549517a2d6e341a5da13496bf714970', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c0c2351fac389f6676b38481eaacee553ca6867a', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '804ed34eb5340ecc1611ada01f608f7a0cf2f619', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '6de5954a05b7f28961fa33cf8d34df3a81aae5f8', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -90,12 +90,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: '9d6653a630da5a3da38291d89d6d7d59d6994e02', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '9b35e5631cfa14aca391636f06598ef6f2f26550', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '48a1678296e672c6c03fb3e1473c42d3a246d481', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '175258699f76fdad5dcf3c7481e7882c6765bf33', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js

@@ -86,7 +86,7 @@ export class KritzelNumericInput {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '8901e0b56ccbc344420483a4a56663f7cd74d9e8' }, h("div", { key: '5f3d6b5c56007e11383aa69f60f22031b0e8f332', class: "input-container" }, this.label && h("label", { key: '2cb102a5b6c16d068f4f304fbcc6241f79fc0ce8', class: "input-label" }, this.label), h("div", { key: '96441095acc3d9a8e77b6d2bac2ceda683c9c976', class: "input-wrapper" }, h("input", { key: '523a5485111077e20faded235df6362e5ea9cfd4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '2071e98125a8d014513e93052bd8c1fee17932a5', class: "spinner-buttons" }, h("button", { key: '12422e5285dfb532dbbb6eb1a36dbcb3de50f2bc', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '49ad5625c80fae6706ba4ab91f47bd550481ef74', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ff7d19b61baeb5ba58bb60f2cc629bcec6eb4411', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'e4fec28e4fc997e007127f2b30b00cc752433221', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '27bf06cde8de11f4a97090911afd6b8993463112', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ed7071dd79bfe509ebb319ce43ecb3e982dd4157', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '68e6fecd79c3c970d1742b1a0bb8667ca2d31729' }, h("div", { key: 'efcf623186d221690bbb956088ec51343de07f3a', class: "input-container" }, this.label && h("label", { key: '300de793f02008ad037da021003b46fc34fc5239', class: "input-label" }, this.label), h("div", { key: '9ff424901fddfcbdac4835e2b2089df2e0966d0f', class: "input-wrapper" }, h("input", { key: 'fc77e6ad1c0b15e3dd3f960b6448ddab1a9beeb1', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'c286606fa0617cc3acbbe40a27e40b154002e01d', class: "spinner-buttons" }, h("button", { key: 'e3a65a327975918fe604cd196ffb087fc4d3ca47', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '62b2ff4ed67ca8b6fc220ff9c63ceca90f75baea', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '803d5c30826d40d95f282071f3f88356366a9faf', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '3c54a48e7082f5aaa9ed923357d0cc4a722018b5', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '9f6cb5f34bbb0e70b5773aecec519b7d8b742712', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '6539b0d4f4bd26e463fa9152cf58757497355cf6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "kritzel-numeric-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '2dadd8a7c4d1af748e91a6005433288ab231f2e8' }, h("div", { key: '65ae90d95bffff244d97329754cf0cb8f73331fa', class: "opacity-container" }, h("div", { key: '90e95347f7015882112f0653a25347e715233227', class: "slider-wrapper" }, h("input", { key: '15836bc089c1725062016677d3b95384d1958431', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: '895ae10ad71e846a1bc62b794751332816650727' }, h("div", { key: '22ea167ce0d6eb17c733d789cde10477c48a2a0e', class: "opacity-container" }, h("div", { key: '2be4fbf8c1f8ddb1fde8f9da727ed0947d21646c', class: "slider-wrapper" }, h("input", { key: 'ed3621baf0adc54aa513a0296ede2f413378a06f', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));