@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-editor/kritzel-editor.js

@@ -77,12 +77,12 @@ export class KritzelEditor {
             name: 'shape',
             type: 'tool',
             tool: KritzelShapeTool,
-            icon: 'shape-rectangle',
+            icon: 'shapeRectangle',
             config: DEFAULT_SHAPE_CONFIG,
             subOptions: [
-                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },
-                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },
-                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },
+                { id: 'rectangle', icon: 'shapeRectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },
+                { id: 'ellipse', icon: 'shapeEllipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },
+                { id: 'triangle', icon: 'shapeTriangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },
             ],
         },
         {
@@ -111,7 +111,7 @@ export class KritzelEditor {
         },
         {
             label: 'menu.selectAll',
-            icon: 'select-all',
+            icon: 'selectAll',
             action: () => this.selectAllObjectsInViewport(),
         },
     ];
@@ -142,10 +142,10 @@ export class KritzelEditor {
             icon: 'ordering',
             group: 'other',
             children: [
-                { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
-                { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
-                { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },
-                { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },
+                { label: 'menu.bringToFront', icon: 'bringToFront', action: () => this.engineRef.bringToFront() },
+                { label: 'menu.sendToBack', icon: 'sendToBack', action: () => this.engineRef.sendToBack() },
+                { label: 'menu.moveUp', icon: 'arrowUpFromDot', action: () => this.engineRef.bringForward() },
+                { label: 'menu.moveDown', icon: 'arrowDownFromDot', action: () => this.engineRef.sendBackward() },
             ],
         },
         {
@@ -153,12 +153,12 @@ export class KritzelEditor {
             icon: 'align',
             group: 'other',
             children: [
-                { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },
-                { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },
-                { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },
-                { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },
-                { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },
-                { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },
+                { label: 'menu.alignLeft', icon: 'alignStartVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },
+                { label: 'menu.alignCenterHorizontal', icon: 'alignCenterHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },
+                { label: 'menu.alignRight', icon: 'alignEndVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },
+                { label: 'menu.alignTop', icon: 'alignStartHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },
+                { label: 'menu.alignCenterVertical', icon: 'alignCenterVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },
+                { label: 'menu.alignBottom', icon: 'alignEndHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },
             ],
         },
         {
@@ -331,6 +331,9 @@ export class KritzelEditor {
     onCustomFontsChange(newValue) {
         void this.registerCustomFonts(newValue);
     }
+    onCustomSvgIconsChange(newValue) {
+        this.registerCustomSvgIcons(newValue);
+    }
     onMoreMenuItemsChange() {
         this.recomputeMoreMenuItems();
     }
@@ -503,12 +506,11 @@ export class KritzelEditor {
     async reinitSync() {
         return this.engineRef.reinitSync();
     }
-    // ── Tool management ─────────────────────────────────────────────────
     async registerTool(toolName, toolClass, toolConfig) {
         return this.engineRef.registerTool(toolName, toolClass, toolConfig);
     }
-    async changeActiveTool(toolName) {
-        return this.engineRef.changeActiveTool(toolName);
+    async setActiveTool(toolName) {
+        return this.engineRef.setActiveTool(toolName);
     }
     async disable() {
         return this.engineRef.disable();
@@ -747,15 +749,21 @@ export class KritzelEditor {
     loginDialogRef;
     currentUserDialogRef;
     componentWillLoad() {
+        this.registerCustomSvgIcons(this.customSvgIcons);
         this.recomputeMoreMenuItems();
         this.loadSettingsFromStorage();
         this.applyTheme();
     }
+    componentWillRender() {
+        this.registerCustomSvgIcons(this.customSvgIcons);
+    }
     isTextToolConfig(config) {
         return !!config && 'fontFamily' in config && 'size' in config && 'color' in config;
     }
     lastToolbarItemsRef = null;
     lastNormalizedToolbarItems = [];
+    lastToolsSource = null;
+    lastTools = [];
     getNormalizedToolbarItems() {
         if (this.toolbarItems !== this.lastToolbarItemsRef) {
             this.lastToolbarItemsRef = this.toolbarItems;
@@ -763,6 +771,16 @@ export class KritzelEditor {
         }
         return this.lastNormalizedToolbarItems;
     }
+    getTools() {
+        const normalizedToolbarItems = this.getNormalizedToolbarItems();
+        if (normalizedToolbarItems !== this.lastToolsSource) {
+            this.lastToolsSource = normalizedToolbarItems;
+            this.lastTools = normalizedToolbarItems
+                .filter(item => item.type === 'tool' && !!item.tool)
+                .map(item => ({ name: item.name, tool: item.tool, config: item.config }));
+        }
+        return this.lastTools;
+    }
     normalizeToolbar(toolbarItems) {
         return toolbarItems.map(control => {
             if (!this.isTextToolConfig(control.config)) {
@@ -791,7 +809,6 @@ export class KritzelEditor {
         return this.themes?.find(t => t.name === this.theme) ?? (this.theme === 'dark' ? darkTheme : lightTheme);
     }
     componentDidLoad() {
-        this.registerCustomSvgIcons();
         this.registerCustomFonts();
         this.listenForMobileKeyboard();
         this.setOsSpecificCssVariables();
@@ -1157,10 +1174,13 @@ export class KritzelEditor {
     getContentObjects(objects) {
         return objects.filter(obj => !(obj instanceof KritzelSelectionGroup) && !(obj instanceof KritzelSelectionBox));
     }
-    registerCustomSvgIcons() {
-        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
-            KritzelIconRegistry.register(name, svg);
+    lastCustomSvgIcons;
+    registerCustomSvgIcons(icons) {
+        if (icons === this.lastCustomSvgIcons) {
+            return;
         }
+        this.lastCustomSvgIcons = icons;
+        KritzelIconRegistry.registerIcons(icons ?? {});
     }
     async registerCustomFonts(fonts = this.customFonts) {
         KritzelFontRegistry.registerFonts(fonts);
@@ -1220,48 +1240,49 @@ export class KritzelEditor {
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
         const normalizedToolbarItems = this.getNormalizedToolbarItems();
-        return (h(Host, { key: '34f8001fb3d6ac1f52a51aa57eef893a41fb1c8c' }, h("div", { key: '61ae20a731ee495361bdd9cb0ed334cde2b3af42', class: "editor-content", style: {
+        const tools = this.getTools();
+        return (h(Host, { key: '939e4336009f65e1d1a3ec9b756de38a5fa942d6' }, h("div", { key: 'c216ac3097a8472ba74532b2c6c300efd90134cf', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '760c5f02ae80fba30fff328f307fa78e45531f13', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '4daf1b5fbc6523c46ce3c0b4bec206f1905cf1b7', ref: el => {
+            } }, h("div", { key: '6796a763912435553cde891847302746491f493b', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'e13510ec3f76f8aab2c3b0771c3363d92d93cc6a', ref: el => {
                 if (el) {
                     this.workspaceManagerRef = el;
                 }
-            }, visible: this.isWorkspaceManagerVisible, workspaces: this.availableWorkspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => this.handleWorkspaceManagerChange(event), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '72e7649d13e3f03bcb7cd7c0507d1bd15e2f4cb3', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '0651bba45fabb7342ea28e120bc930be5ee45de6', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'b4b0bf29824b7cb025ef168a7c7be31d5054c0ff', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '93c6f6b313a082f155eca9c60e623bcfbdd4119f', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '0ad85b0ee5e85fffa081f88cdc991b3233ddd5ad', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            }, visible: this.isWorkspaceManagerVisible, workspaces: this.availableWorkspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => this.handleWorkspaceManagerChange(event), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '9115ee23e578a66f46b202623c241277ef092544', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'd4379f4d0e4f8b3cf2693f34304b03b1e5a75255', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '01151742b1338423e669d2382ebe9ad55322c43b', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'e802c494bab6b2eae72d8fd4997d362006e63142', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '8141865c0beb036f28c135bc41054a68a7b05d01', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
                 position: 'absolute',
                 left: `${this.contextMenuState.position.x}px`,
                 top: `${this.contextMenuState.position.y}px`,
                 zIndex: '10002',
-            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: 'bf4a9e25c3f78633831bcfdaf580a45171b67fff', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '46bdfb77cddd106b7c6e8f7767520a331608592f', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: 'a4b6a7389387641c0fe0fe44b7c0948c66d8cdfc', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '0b3e551a97e2c40548d7dc479fca5f408035a8f4', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspaces: this.workspaces, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onObjectsSelectionChange: event => this.handleObjectsSelectionChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onIsLoadingChange: event => this.handleIsLoadingChange(event) }), h("kritzel-toolbar", { key: 'f19449a3b6aa08c51eb58ba53a37e133a6d1d1d5', visible: this.isToolbarVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspaces: this.workspaces, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, tools: tools, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onObjectsSelectionChange: event => this.handleObjectsSelectionChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onIsLoadingChange: event => this.handleIsLoadingChange(event) }), h("kritzel-toolbar", { key: '3240c2481021aa017a26e1e3e3618d346a3bf1b9', visible: this.isToolbarVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.toolbarRef = el;
                 }
-            }, toolbarItems: normalizedToolbarItems, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsToolbarReady: () => (this.isToolbarReady = true) }), h("div", { key: '3d7b417b286f9e003137d02a7520ef1d9b5563f2', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '1d366c23cb68e5e345a8cb8833cdc61c9a0c607b', visible: this.isZoomPanelVisible, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '1c27cd556dea88b7dcf1fb6960157cff37210260', class: "top-right-buttons" }, h("kritzel-settings", { key: '61be74fbd336e64236a618bc40c5a68c9e4ba2a9', ref: el => {
+            }, toolbarItems: normalizedToolbarItems, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsToolbarReady: () => (this.isToolbarReady = true) }), h("div", { key: 'ba83e4189b6ee8a6e060f3d26b4863ff1d5768d2', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '7725ee71671d68411c5f6bb5da6e2737338880f0', visible: this.isZoomPanelVisible, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '1a4f0c9f1c8acf2703e0d101d6e6288f976af7f7', class: "top-right-buttons" }, h("kritzel-settings", { key: 'd14c088c5ed85d4e63b7b478a742e4b01921dec9', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '4e84be18db6d1c1982bd6420d034f80876b22651', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '22b5848fd3c395c9c06f67f13b2de5ebe7f20ffe', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'a5c1b3de7e67ecddbac0a581a00585f796cd3dc3', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ff5f5668cb662f7275f714b3bad7ae7baff89eb4', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '18139a2382c60adec64fcb093e05904d3f37a639', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '7c60a610eb996640663331666691acec691128f0', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'aa53b3739c92cb01580a61e355ff22d4777ba11e', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'c709f948752f62122150ecef70788a527edd610e', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: 'c1d72827c6416efda9ba1f5576390135c8161665', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '6cf3f77fd2a1c5f9e04e3cf415e775dd60e94927', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: 'ed095c276f2a48e74c7c899d216891d2b1130759', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: 'cdd22f54afc7acdfd783afbcfa16813ac39f4352', ref: el => {
                 if (el) {
                     this.moreMenuRef = el;
                 }
-            }, items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '60de09f78488162b0739f0494cc52706ba0df58d', ref: el => {
+            }, items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '00d09340a36334aa29dde0e306598bb48b8360fc', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'ab05733b8c6985f3b3a3d327c4effd58e57b0a8f', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '1e4c79482b155a0da9dc664ae1f421773c6a452c', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1443,7 +1464,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    showViewportInfo: false,\r\n    showObjectInfo: false,\r\n    showSyncProviderInfo: true,\r\n    showMigrationInfo: true,\r\n    showAssetResolverInfo: false,\r\n  }"
+                "defaultValue": "{\n    showViewportInfo: false,\n    showObjectInfo: false,\n    showSyncProviderInfo: true,\n    showMigrationInfo: true,\n    showAssetResolverInfo: false,\n  }"
             },
             "user": {
                 "type": "unknown",
@@ -1516,7 +1537,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      isDefault: true,\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'line',\r\n      type: 'tool',\r\n      tool: KritzelLineTool,\r\n      icon: 'arrow',\r\n      config: DEFAULT_LINE_TOOL_CONFIG,\r\n    },\r\n    {\r\n      name: 'shape',\r\n      type: 'tool',\r\n      tool: KritzelShapeTool,\r\n      icon: 'shape-rectangle',\r\n      config: DEFAULT_SHAPE_CONFIG,\r\n      subOptions: [\r\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\r\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\r\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\r\n      ],\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      name: 'selection',\n      type: 'tool',\n      isDefault: true,\n      tool: KritzelSelectionTool,\n      icon: 'cursor',\n    },\n    {\n      name: 'brush',\n      type: 'tool',\n      tool: KritzelBrushTool,\n      icon: 'pen',\n      config: DEFAULT_BRUSH_CONFIG,\n    },\n    {\n      name: 'eraser',\n      type: 'tool',\n      tool: KritzelEraserTool,\n      icon: 'eraser',\n    },\n    {\n      name: 'line',\n      type: 'tool',\n      tool: KritzelLineTool,\n      icon: 'arrow',\n      config: DEFAULT_LINE_TOOL_CONFIG,\n    },\n    {\n      name: 'shape',\n      type: 'tool',\n      tool: KritzelShapeTool,\n      icon: 'shapeRectangle',\n      config: DEFAULT_SHAPE_CONFIG,\n      subOptions: [\n        { id: 'rectangle', icon: 'shapeRectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\n        { id: 'ellipse', icon: 'shapeEllipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\n        { id: 'triangle', icon: 'shapeTriangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\n      ],\n    },\n    {\n      name: 'text',\n      type: 'tool',\n      tool: KritzelTextTool,\n      icon: 'type',\n      config: DEFAULT_TEXT_CONFIG,\n    },\n    {\n      name: 'image',\n      type: 'tool',\n      tool: KritzelImageTool,\n      icon: 'image',\n    },\n    {\n      name: 'config',\n      type: 'config',\n    },\n  ]"
             },
             "globalContextMenuItems": {
                 "type": "unknown",
@@ -1541,7 +1562,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      label: 'menu.paste',\r\n      icon: 'paste',\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'menu.selectAll',\r\n      icon: 'select-all',\r\n      action: () => this.selectAllObjectsInViewport(),\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.selectAll',\n      icon: 'selectAll',\n      action: () => this.selectAllObjectsInViewport(),\n    },\n  ]"
             },
             "objectContextMenuItems": {
                 "type": "unknown",
@@ -1566,7 +1587,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\r\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\r\n    {\r\n      label: 'menu.paste',\r\n      icon: 'paste',\r\n      group: 'clipboard',\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'menu.export',\r\n      icon: 'upload',\r\n      group: 'clipboard',\r\n      isVisible: (_, objects) => this.canExportObjects(objects),\r\n      action: (_, objects) => {\r\n        const format = this.getPreferredExportFormat(objects);\r\n        if (!format) {\r\n          return;\r\n        }\r\n\r\n        void this.engineRef.exportSelectedObject(format);\r\n      },\r\n    },\r\n    {\r\n      label: 'menu.order',\r\n      icon: 'ordering',\r\n      group: 'other',\r\n      children: [\r\n        { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n        { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n        { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\r\n        { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\r\n      ],\r\n    },\r\n    {\r\n      label: 'menu.align',\r\n      icon: 'align',\r\n      group: 'other',\r\n      children: [\r\n        { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\r\n        { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\r\n        { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\r\n        { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\r\n        { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\r\n        { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\r\n      ],\r\n    },\r\n    {\r\n      label: 'menu.group',\r\n      icon: 'group',\r\n      group: 'other',\r\n      children: [\r\n        {\r\n          label: 'menu.group',\r\n          icon: 'group',\r\n          action: () => this.engineRef.group(),\r\n        },\r\n        {\r\n          label: 'menu.ungroup',\r\n          icon: 'ungroup',\r\n          action: () => this.engineRef.ungroup(),\r\n        },\r\n      ],\r\n    },\r\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\r\n  ]"
+                "defaultValue": "[\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      group: 'clipboard',\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.export',\n      icon: 'upload',\n      group: 'clipboard',\n      isVisible: (_, objects) => this.canExportObjects(objects),\n      action: (_, objects) => {\n        const format = this.getPreferredExportFormat(objects);\n        if (!format) {\n          return;\n        }\n\n        void this.engineRef.exportSelectedObject(format);\n      },\n    },\n    {\n      label: 'menu.order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'menu.bringToFront', icon: 'bringToFront', action: () => this.engineRef.bringToFront() },\n        { label: 'menu.sendToBack', icon: 'sendToBack', action: () => this.engineRef.sendToBack() },\n        { label: 'menu.moveUp', icon: 'arrowUpFromDot', action: () => this.engineRef.bringForward() },\n        { label: 'menu.moveDown', icon: 'arrowDownFromDot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'menu.align',\n      icon: 'align',\n      group: 'other',\n      children: [\n        { label: 'menu.alignLeft', icon: 'alignStartVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'menu.alignCenterHorizontal', icon: 'alignCenterHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'menu.alignRight', icon: 'alignEndVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'menu.alignTop', icon: 'alignStartHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'menu.alignCenterVertical', icon: 'alignCenterVertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'menu.alignBottom', icon: 'alignEndHorizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'menu.group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'menu.group',\n          icon: 'group',\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'menu.ungroup',\n          icon: 'ungroup',\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
             "moreMenuItems": {
                 "type": "unknown",
@@ -1591,7 +1612,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      id: 'share',\r\n      label: 'menu.share',\r\n      icon: 'share',\r\n      isVisible: async () => hasRemoteSyncProvider(this.syncConfig),\r\n      action: () => {\r\n        if (!this.isLoggedIn && this.loginConfig) {\r\n          this.openLoginDialog();\r\n          return;\r\n        }\r\n        this.shareDialogRef.open();\r\n      },\r\n    },\r\n    {\r\n      id: 'export',\r\n      label: 'menu.export',\r\n      icon: 'upload',\r\n      action: async () => {\r\n        const preview = await this.engineRef.getScreenshot('png');\r\n        this.exportRef.open(preview ?? undefined);\r\n      },\r\n    },\r\n    {\r\n      id: 'import',\r\n      label: 'menu.import',\r\n      icon: 'download',\r\n      action: () => this.engineRef.importFromFile(),\r\n    },\r\n    {\r\n      id: 'settings',\r\n      label: 'menu.settings',\r\n      icon: 'settings',\r\n      action: () => this.settingsRef.open(),\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      id: 'share',\n      label: 'menu.share',\n      icon: 'share',\n      isVisible: async () => hasRemoteSyncProvider(this.syncConfig),\n      action: () => {\n        if (!this.isLoggedIn && this.loginConfig) {\n          this.openLoginDialog();\n          return;\n        }\n        this.shareDialogRef.open();\n      },\n    },\n    {\n      id: 'export',\n      label: 'menu.export',\n      icon: 'upload',\n      action: async () => {\n        const preview = await this.engineRef.getScreenshot('png');\n        this.exportRef.open(preview ?? undefined);\n      },\n    },\n    {\n      id: 'import',\n      label: 'menu.import',\n      icon: 'download',\n      action: () => this.engineRef.importFromFile(),\n    },\n    {\n      id: 'settings',\n      label: 'menu.settings',\n      icon: 'settings',\n      action: () => this.settingsRef.open(),\n    },\n  ]"
             },
             "themes": {
                 "type": "unknown",
@@ -1745,12 +1766,14 @@ export class KritzelEditor {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Record<string, string>",
-                    "resolved": "string",
+                    "original": "KritzelSvgIconMap",
+                    "resolved": "Partial<Record<\"info\" | \"type\" | \"image\" | \"download\" | \"command\" | \"cursor\" | \"x\" | \"copy\" | \"eraser\" | \"pen\" | \"arrow\" | \"arrowUpFromDot\" | \"arrowDownFromDot\" | \"highlighter\" | \"shapes\" | \"shapeRectangle\" | \"shapeEllipse\" | \"shapeTriangle\" | \"imageOff\" | \"chevronDown\" | \"chevronUp\" | \"chevronLeft\" | \"chevronRight\" | \"chevronsLeft\" | \"paste\" | \"cut\" | \"delete\" | \"bringToFront\" | \"sendToBack\" | \"selectAll\" | \"upload\" | \"undo\" | \"redo\" | \"plus\" | \"minus\" | \"ellipsisVertical\" | \"check\" | \"group\" | \"ungroup\" | \"moveVertical\" | \"hand\" | \"handGrab\" | \"mousePointer\" | \"pointer\" | \"settings\" | \"share\" | \"palette\" | \"ordering\" | \"layoutTemplate\" | \"align\" | \"alignStartHorizontal\" | \"alignCenterHorizontal\" | \"alignEndHorizontal\" | \"alignStartVertical\" | \"alignCenterVertical\" | \"alignEndVertical\" | \"viewport\" | \"logOut\" | \"usersRound\" | \"google\" | \"facebook\" | \"github\" | \"braces\" | \"heart\", string>> & Record<string, string>",
                     "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
+                        "KritzelSvgIconMap": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelSvgIconMap",
+                            "referenceLocation": "KritzelSvgIconMap"
                         }
                     }
                 },
@@ -1783,7 +1806,7 @@ export class KritzelEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Registers fonts for runtime usage (for example custom object rendering).\r\nText-tool config tooltip options are controlled via toolbarItems[].config.availableFonts."
+                    "text": "Registers fonts for runtime usage (for example custom object rendering).\nText-tool config tooltip options are controlled via toolbarItems[].config.availableFonts."
                 },
                 "getter": false,
                 "setter": false,
@@ -3310,7 +3333,7 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
-            "changeActiveTool": {
+            "setActiveTool": {
                 "complexType": {
                     "signature": "(toolName: string) => Promise<void>",
                     "parameters": [{
@@ -4529,7 +4552,7 @@ export class KritzelEditor {
                             "text": "fonts - Mapping from font keys to family names or font definitions."
                         }, {
                             "name": "remarks",
-                            "text": "This no longer controls the text-tool config tooltip font options.\r\nConfigure tooltip fonts via toolbarItems[].config.availableFonts."
+                            "text": "This no longer controls the text-tool config tooltip font options.\nConfigure tooltip fonts via toolbarItems[].config.availableFonts."
                         }]
                 }
             },
@@ -4637,6 +4660,9 @@ export class KritzelEditor {
             }, {
                 "propName": "customFonts",
                 "methodName": "onCustomFontsChange"
+            }, {
+                "propName": "customSvgIcons",
+                "methodName": "onCustomSvgIconsChange"
             }, {
                 "propName": "moreMenuItems",
                 "methodName": "onMoreMenuItemsChange"

package/dist/collection/components/kritzel-export/kritzel-export.css

@@ -1,89 +1,89 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.export-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding:0;
-  flex: 1;
-}
-
-.export-content kritzel-pill-tabs {
-  align-self: center;
-}
-
-.export-tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 330px;
-}
-
-.format-selection {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.format-selection label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--kritzel-global-text-primary, #333);
-}
-
-.export-primary-button {
-  width: 100%;
-  padding: 12px 24px;
-  background-color: var(--kritzel-global-primary-color, #007AFF);
-  color: var(--kritzel-global-primary-text-color, #fff);
-  border: none;
-  border-radius: var(--kritzel-button-border-radius, 8px);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.export-primary-button:hover {
-  background-color: var(--kritzel-global-primary-hover-color, #0066d6);
-}
-
-.export-primary-button:focus-visible {
-  outline: revert;
-  outline-offset: revert;
-}
-
-.preview-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin-bottom: 8px; 
-}
-
-.preview-container img {
-  max-width: 100%;
-  max-height: 250px;
-  object-fit: contain;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  border: 1px solid var(--kritzel-global-border-color, #dbdbdb);
-}
-
-.export-content p {
-  margin: 0;
-  color: var(--kritzel-global-text-secondary, #666);
-}
-
-@media (max-width: 576px) {
-  .export-tab-content {
-    flex: 1;
-    min-height: 0;
-  }
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.export-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding:0;
+  flex: 1;
+}
+
+.export-content kritzel-pill-tabs {
+  align-self: center;
+}
+
+.export-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 330px;
+}
+
+.format-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.format-selection label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-global-text-primary, #333);
+}
+
+.export-primary-button {
+  width: 100%;
+  padding: 12px 24px;
+  background-color: var(--kritzel-global-primary-color, #007AFF);
+  color: var(--kritzel-global-primary-text-color, #fff);
+  border: none;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.export-primary-button:hover {
+  background-color: var(--kritzel-global-primary-hover-color, #0066d6);
+}
+
+.export-primary-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.preview-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: 8px; 
+}
+
+.preview-container img {
+  max-width: 100%;
+  max-height: 250px;
+  object-fit: contain;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid var(--kritzel-global-border-color, #dbdbdb);
+}
+
+.export-content p {
+  margin: 0;
+  color: var(--kritzel-global-text-secondary, #666);
+}
+
+@media (max-width: 576px) {
+  .export-tab-content {
+    flex: 1;
+    min-height: 0;
+  }
+}

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

@@ -72,7 +72,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: '60baf80591c9456aa32443a43f9af102ed711494' }, h("kritzel-dialog", { key: 'f8c744284000b356dc9c3de12252c0358909c9de', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '9f5f5e56302cc9c1d1c173757fe720871e085ca0', class: "export-content" }, h("kritzel-pill-tabs", { key: '3976ad59d19c90c8d1a605815cb7d90cebede5e3', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '992dad8deb946feebd453d452f0e7338dbdb2236', slot: "footer" }, h("button", { key: '8c9d907a82a45e9ad2b48618ff6e812c804d7252', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '94d55a7c75cdad6c8772180656016ef7a84ea937' }, h("kritzel-dialog", { key: '7564885a16e21f036e4943f9be923ef3db07ab77', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '40fceeacffc79d70ecea2c397f19852e85756d50', class: "export-content" }, h("kritzel-pill-tabs", { key: 'a2bb5be3df21f940d8e3f7d27fa9fbc956f16a55', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '29a0fcb85755577655401c96643a1956aedfa27d', slot: "footer" }, h("button", { key: 'f003963d407005c67740b6620b8983dcf3c8977a', 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/kritzel-font/kritzel-font.css

@@ -1,10 +1,10 @@
-:host {
-  display: block;
-}
-
-.font-preview {
-  color: var(--kritzel-font-size-text-color, #333333);
-  line-height: 1;
-  text-align: center;
-  font-weight: bold;
-}
+:host {
+  display: block;
+}
+
+.font-preview {
+  color: var(--kritzel-font-size-text-color, #333333);
+  line-height: 1;
+  text-align: center;
+  font-weight: bold;
+}

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

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: 'b594153b199a9ed859b0b74dccaa8f242f6e388d' }, h("div", { key: 'f1888af3f0342a38c3d5a887ef66adef63b35a87', class: "font-preview", style: {
+        return (h(Host, { key: '7ee5e56528fd93c5b00c930e0404b55aa6ba29f7' }, h("div", { key: '54111872192f8f6aa4a523c81fdcbacacde5facf', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color