kritzel-stencil 0.4.8 → 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;
@@ -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/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"
+            }];
+    }
 }

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

@@ -205,7 +205,7 @@ export class KritzelSettings {
         return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
     }
     render() {
-        return (h(Host, { key: '36bca8be04b34a37630d6aa5394595a8b394d180' }, h("kritzel-dialog", { key: '1e257904178fd9afa2bfbe4a758663fb366c8847', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'b7d9ad97d9b126ccf6e800e6c9032749635eb988', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: 'b8a899abd3dd55bc3493b7d124ac5505e2284036' }, h("kritzel-dialog", { key: '8d47f3548271e24a8a280a30139f04b2e4b4ec2b', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'a5213307761b84b8f5f67cb35409ab1c0c1fa57b', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,9 +123,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'd30a468b9443f76731b207cb5caec1911f378c15' }, h("kritzel-dialog", { key: '4a4ec0a2becba58a49a87fc411a82e26557d8232', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '0b2fec3db6c039752429768fb4bd6a2150a4345e', class: "share-content" }, h("div", { key: 'bd0b85f8418d0c46d14b718024ed62b9f72e4f52', class: "share-section" }, h("div", { key: 'bf62503a593454ffacd30d532fcd79dcbf938659', class: "share-row" }, h("div", { key: 'dfd9e83166b886d00fb5b097d0ccd77169c011bd', class: "share-label-group" }, h("label", { key: '67dba950ded47a08eb006c1628d14038b18171b5', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '926f8670b35dab1e3e2a6496f44b5d6e0ee46417', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: '75deaa66e6a6f640506985a8b3a2746892b5da07' }, h("kritzel-dialog", { key: '237413c9302e3756c5f7653e69326fac80d9e181', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '295394b851cc2210fece6f3e297dfbc0c516b0f7', class: "share-content" }, h("div", { key: 'df64d71f9c7a7064d36db6d0a196071f1e8835a9', class: "share-section" }, h("div", { key: '9db4902a5edd917efb5ad6c183f0862b12313635', class: "share-row" }, h("div", { key: '8ead1d363d3430a4e65fa3b5835401b0e20006db', class: "share-label-group" }, h("label", { key: '2f3c28a3909eab86a123ba6cf7386b79894717c5', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '3167ae1ed6ff52abc531eafdd905f1397807f551', class: "share-description" }, this.internalIsPublic
             ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
-            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'e42fabecb37fd21cc4907b966e2f50113b945eda', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '40afacc81e0bbcf4c404ae32491e5142a32bca66', class: "share-section" }, h("div", { key: '57b6952670b1cbc789770362b573623035b50cf3', class: "share-url-container" }, h("input", { key: '0ee836655ca26c1e073d5d86014322939527c74b', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '2d4661c1718bd8390dbe1146e8f9afe035934635', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: 'b43bde94601c352b6065c89c026807d7efb3bcc3', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'f4d657aa918abbb3cf3ed039332d8c67247b83e8', class: "share-qr-container" }, h("img", { key: 'b165a446df3fba87918a19928734d39af1e6bfcf', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '3ff608b262e2ff3fa779f7d1e9a4ee3c0b9a16c0', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '355261384b0ed386f3b48c041bcf0039db0534c1', class: "share-section" }, h("div", { key: 'ad3d975c650757d0b6dbd5317c9bac4f98029e0c', class: "share-url-container" }, h("input", { key: '0da2cc9cb30f1da8bcab3aa82c679b8d685641bd', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'aee232b7a70b524d52a4b4cf9074c099d29a5300', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: 'c151baf7b890dbf51c4f4831d60b0ebb1a5d05fa', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '63b43efe3dc5929054af9e5ee7f64d093864b3b0', class: "share-qr-container" }, h("img", { key: '9d3b0418eb80ff8c7e9106ad86d7cc211d017504', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
     }
     static get is() { return "kritzel-share-dialog"; }
     static get encapsulation() { return "shadow"; }