kritzel-stencil 0.4.0 → 0.4.1

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

@@ -24,6 +24,8 @@ import { darkTheme } from "../../../themes/dark-theme";
 import { KritzelSelectionGroup } from "../../../classes/objects/selection-group.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 import { ObjectHelper } from "../../../helpers/object.helper";
+import { KritzelFontRegistry } from "../../../classes/registries/font-registry.class";
+import { resolveTextToolAvailableFonts } from "../../../constants/text-tool-fonts.constants";
 export class KritzelEditor {
     host;
     scaleMax = ABSOLUTE_SCALE_MAX;
@@ -184,6 +186,11 @@ export class KritzelEditor {
     /** The locale used to resolve terms missing from the active locale. */
     fallbackLocale = 'en';
     customSvgIcons = {};
+    /**
+     * Registers fonts for runtime usage (for example custom object rendering).
+     * Text-tool config tooltip options are controlled via controls[].config.availableFonts.
+     */
+    customFonts = {};
     isPanningEnabled = true;
     isZoomingEnabled = true;
     isControlsVisible = true;
@@ -236,11 +243,14 @@ export class KritzelEditor {
     isEditorVisible = false;
     activeNotification;
     isNotificationDismissing = false;
+    normalizedControls = [];
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
     notificationDismissAnimationDurationMs = 180;
     isNotificationHovered = false;
+    customFontsLoadVersion = 0;
+    customFontsReady = Promise.resolve();
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -270,6 +280,12 @@ export class KritzelEditor {
     onActiveWorkspaceChange() {
         this.updateCurrentIsPublic();
     }
+    onCustomFontsChange(newValue) {
+        void this.registerCustomFonts(newValue);
+    }
+    onControlsChange(newValue) {
+        this.normalizedControls = this.normalizeControls(newValue);
+    }
     onActiveWorkspaceIdChange(newId) {
         // If no ID is provided, do nothing (allows other logic to control activeWorkspace)
         if (!newId) {
@@ -543,9 +559,27 @@ export class KritzelEditor {
     loginDialogRef;
     currentUserDialogRef;
     componentWillLoad() {
+        this.normalizedControls = this.normalizeControls(this.controls);
         this.loadSettingsFromStorage();
         this.applyTheme();
     }
+    isTextToolConfig(config) {
+        return !!config && 'fontFamily' in config && 'size' in config && 'color' in config;
+    }
+    normalizeControls(controls) {
+        return controls.map(control => {
+            if (!this.isTextToolConfig(control.config)) {
+                return control;
+            }
+            return {
+                ...control,
+                config: {
+                    ...control.config,
+                    availableFonts: resolveTextToolAvailableFonts(control.config.availableFonts),
+                },
+            };
+        });
+    }
     applyTheme() {
         const themeObj = this.resolveThemeObject();
         ThemeHelper.applyThemeToElement(this.host, themeObj);
@@ -556,6 +590,7 @@ export class KritzelEditor {
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
+        this.registerCustomFonts();
         this.listenForMobileKeyboard();
         this.setOsSpecificCssVariables();
     }
@@ -568,6 +603,7 @@ export class KritzelEditor {
         await customElements.whenDefined('kritzel-workspace-manager');
         await customElements.whenDefined('kritzel-controls');
         await customElements.whenDefined('kritzel-engine');
+        await this.waitForCustomFontsReady();
         if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady || !this.activeWorkspace) {
             return;
         }
@@ -831,6 +867,15 @@ export class KritzelEditor {
     async registerLocales(locales) {
         await this.engineRef?.registerLocales(locales);
     }
+    /**
+     * Registers custom fonts for the editor runtime.
+     * @param fonts - Mapping from font keys to family names or font definitions.
+     * @remarks This no longer controls the text-tool config tooltip font options.
+     * Configure tooltip fonts via controls[].config.availableFonts.
+     */
+    async registerFonts(fonts) {
+        await this.registerCustomFonts(fonts);
+    }
     /**
      * Resolves a term key to its translated string for the active locale.
      * @param key - The term key to resolve.
@@ -908,6 +953,25 @@ export class KritzelEditor {
             KritzelIconRegistry.register(name, svg);
         }
     }
+    async registerCustomFonts(fonts = this.customFonts) {
+        KritzelFontRegistry.registerFonts(fonts);
+        const currentVersion = ++this.customFontsLoadVersion;
+        const loadPromise = KritzelFontRegistry.waitForFonts(fonts);
+        this.customFontsReady = loadPromise;
+        await loadPromise;
+        if (currentVersion !== this.customFontsLoadVersion) {
+            await this.waitForCustomFontsReady();
+        }
+    }
+    async waitForCustomFontsReady() {
+        while (true) {
+            const version = this.customFontsLoadVersion;
+            await this.customFontsReady;
+            if (version === this.customFontsLoadVersion) {
+                return;
+            }
+        }
+    }
     listenForMobileKeyboard() {
         KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
             this.isVirtualKeyboardOpen = isOpen;
@@ -946,36 +1010,36 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '3128b38a04cd636abc1f2466f1ac1aa3dcea2262' }, h("div", { key: 'b1fbb051cb1144fd84f28cfea4ad824f92189dbd', class: "editor-content", style: {
+        return (h(Host, { key: '00d652c74feac7b4917772146368125da6deeb1c' }, h("div", { key: 'f8fb86b45b0cdabb5e3ad52de6d6ef31a71a09e4', 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: '2b896fa8bd00a7c68b74df7a9846e8c3e0f6efc4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '13244251aa8999d78d275eefe5583d592f3506fc', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '7d3015918e4af7ee435aee8da37ddfa206cdfd66', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '49f13f23698db9b804d139e0f35696be06569346', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '765aa6995398aca3c7738758bedb7d9a7c2f099a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fe0dfa30aa498a608f9167b01e0a2309dfa67162', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '5aeb7979faa8779653ff6a2930d288fd601cb0e9', ref: el => {
+            } }, h("div", { key: '2378c776d8eecf2614567bed11c6e93fb338e302', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'ce41192540169694482d6f8cca60701bc4427438', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'ec269d3e9f589362d8301370778f0c5e4252eead', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '847ed8149d556c934090424ff54b17b6721ccc76', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '61d8b8e91cda100ffa6620db26ba6dfb2232946a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b7e132773225ace38e447756110dd39e4661f5fc', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '3e4a6d0dbc015ec675fb21a59990c87e9eaa805f', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, 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), 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) }), h("kritzel-controls", { key: 'eda4dc93fe663c8472638190216bea5bf64d7153', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, 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), 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) }), h("kritzel-controls", { key: 'f84607a0a4d0762c1249400f85b7b8454d672c1e', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'ffdb548da8aac3498b1b3e9bfdc9a41f8c448675', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'af6f6a86212195fd3ee13bc33c16574e0a5236a6', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '0870c0e47838fc99b4041718a431535827e199cf', class: "top-right-buttons" }, h("kritzel-settings", { key: 'b95beb43dbe1a9c99454fc4ff74f0630aca7ad83', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e2691e7c730195e197511cb1e4d0fe707677b5ff', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'd0ac6624eab49af78d4761c3ad91842834717aad', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'ad3d386ab7e8ad9fdfbb12754db005bc85fa28ce', class: "top-right-buttons" }, h("kritzel-settings", { key: '566024ac6f3d8f7f20238cc1f83882b39dbf698e', 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: 'ef6fea2715ff99226fde937185a693efc2a7dd75', 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: '4a23ea0c6e070d424a90e9fc87de04e11cff7ade', 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: '872b7fa12d49410d1c370baed3386a34f89d3e2a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'da19825b4fba6a516803f8330cdfdfac6b6c9db1', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '9336ce611286d3ecf9318317ab4bedb8c3f79f05', 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: 'feef074b52e552fa2ef7e8258002571aca4c5abd', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '844c722545363eaf7eec69037a835eae943afeb9', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '8363c1d3230d111cf1ace0ccf805669e592bb533', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                     this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
                 }
-            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: 'a9e38ad3e13c785f6a4223ebde95f60451c6515f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'b8f63a63ae4e75a70d0069410170af902f2a362b', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '7a923fd51e8d2bd1e2833e0941622efadd55f881', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: '68ddf8c3aabc7634b4c1d88f3d2d584fa1f1b150', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '39b938f5792f7a36bbf21ed88a1a5c7717a785a6', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '61ed918499760d874d5d2ec140d3cf59ce94520b', 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: 'ac54c699a94bb2657a6817c37d6220b75d931cd3', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '5f6528a57884bd1494e45755609e710f69041a4d', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1453,6 +1517,31 @@ export class KritzelEditor {
                 "setter": false,
                 "defaultValue": "{}"
             },
+            "customFonts": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelFontMap",
+                    "resolved": "{ [x: string]: KritzelFontRegistration; }",
+                    "references": {
+                        "KritzelFontMap": {
+                            "location": "import",
+                            "path": "../../../interfaces/font.interface",
+                            "id": "src/interfaces/font.interface.ts::KritzelFontMap",
+                            "referenceLocation": "KritzelFontMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Registers fonts for runtime usage (for example custom object rendering).\nText-tool config tooltip options are controlled via controls[].config.availableFonts."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
             "isPanningEnabled": {
                 "type": "boolean",
                 "mutable": true,
@@ -1786,7 +1875,8 @@ export class KritzelEditor {
             "currentIsPublic": {},
             "isEditorVisible": {},
             "activeNotification": {},
-            "isNotificationDismissing": {}
+            "isNotificationDismissing": {},
+            "normalizedControls": {}
         };
     }
     static get events() {
@@ -3845,6 +3935,39 @@ export class KritzelEditor {
                         }]
                 }
             },
+            "registerFonts": {
+                "complexType": {
+                    "signature": "(fonts: KritzelFontMap) => Promise<void>",
+                    "parameters": [{
+                            "name": "fonts",
+                            "type": "{ [x: string]: KritzelFontRegistration; }",
+                            "docs": "- Mapping from font keys to family names or font definitions."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelFontMap": {
+                            "location": "import",
+                            "path": "../../../interfaces/font.interface",
+                            "id": "src/interfaces/font.interface.ts::KritzelFontMap",
+                            "referenceLocation": "KritzelFontMap"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Registers custom fonts for the editor runtime.",
+                    "tags": [{
+                            "name": "param",
+                            "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.\nConfigure tooltip fonts via controls[].config.availableFonts."
+                        }]
+                }
+            },
             "t": {
                 "complexType": {
                     "signature": "(key: KritzelTermKey, vars?: KritzelTermVars) => Promise<string>",
@@ -3904,6 +4027,12 @@ export class KritzelEditor {
             }, {
                 "propName": "activeWorkspace",
                 "methodName": "onActiveWorkspaceChange"
+            }, {
+                "propName": "customFonts",
+                "methodName": "onCustomFontsChange"
+            }, {
+                "propName": "controls",
+                "methodName": "onControlsChange"
             }, {
                 "propName": "activeWorkspaceId",
                 "methodName": "onActiveWorkspaceIdChange"

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

@@ -3,8 +3,12 @@ import { KritzelViewport } from "../../../classes/core/viewport.class";
 import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
 import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
 import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
+import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
+import { KritzelLineTool } from "../../../classes/tools/line-tool.class";
+import { KritzelImageTool } from "../../../classes/tools/image-tool.class";
 import { KritzelSelectionBox } from "../../../classes/objects/selection-box.class";
 import { KritzelKeyHandler } from "../../../classes/handlers/key.handler";
+import { KritzelBaseTool } from "../../../classes/tools/base-tool.class";
 import { KritzelEraserTool } from "../../../classes/tools/eraser-tool.class";
 import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
 import { KritzelContextMenuHandler } from "../../../classes/handlers/context-menu.handler";
@@ -21,6 +25,7 @@ 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";
 export class KritzelEngine {
     host;
     /** The workspace to load and display. Changing this prop switches the active workspace. */
@@ -539,7 +544,7 @@ export class KritzelEngine {
             }
             return existingTool;
         }
-        const registeredTool = this.core.toolRegistry.registerTool(toolName, toolClass);
+        const registeredTool = this.core.toolRegistry.registerTool(toolName, this.resolveToolClass(toolClass));
         if (toolConfig) {
             this.applyToolConfig(registeredTool, toolConfig);
         }
@@ -1720,31 +1725,71 @@ export class KritzelEngine {
         this.syncingChange.emit(isSyncing);
     }
     applyToolConfig(tool, toolConfig) {
-        Object.entries(toolConfig).forEach(([key, value]) => {
+        const normalizedToolConfig = this.normalizeToolConfig(toolConfig);
+        Object.entries(normalizedToolConfig).forEach(([key, value]) => {
             tool[key] = value;
         });
         // Resolve palettes map into the flat palette array the UI reads
-        if ('palettes' in toolConfig && 'type' in toolConfig) {
-            const brushConfig = toolConfig;
+        if ('palettes' in normalizedToolConfig && 'type' in normalizedToolConfig) {
+            const brushConfig = normalizedToolConfig;
             const resolvedPalette = brushConfig.palettes[brushConfig.type];
             if (resolvedPalette) {
                 tool['palette'] = resolvedPalette;
             }
         }
         // Resolve sizes map into the flat sizes array the UI reads (brush tool uses a map keyed by type)
-        if ('sizes' in toolConfig && toolConfig.sizes != null && 'type' in toolConfig) {
-            const brushConfig = toolConfig;
+        if ('sizes' in normalizedToolConfig && normalizedToolConfig.sizes != null && 'type' in normalizedToolConfig) {
+            const brushConfig = normalizedToolConfig;
             const resolvedSizes = brushConfig.sizes?.[brushConfig.type];
             if (resolvedSizes) {
                 tool['sizes'] = resolvedSizes;
             }
         }
     }
+    normalizeToolConfig(toolConfig) {
+        if (!this.isTextToolConfig(toolConfig)) {
+            return toolConfig;
+        }
+        return {
+            ...toolConfig,
+            availableFonts: resolveTextToolAvailableFonts(toolConfig.availableFonts),
+        };
+    }
+    isTextToolConfig(toolConfig) {
+        return 'fontFamily' in toolConfig && 'size' in toolConfig && 'color' in toolConfig;
+    }
+    /** Built-in tool classes of this bundle keyed by their tool type. */
+    static BUILT_IN_TOOL_CLASSES = {
+        selection: KritzelSelectionTool,
+        brush: KritzelBrushTool,
+        eraser: KritzelEraserTool,
+        line: KritzelLineTool,
+        shape: KritzelShapeTool,
+        text: KritzelTextTool,
+        image: KritzelImageTool,
+    };
+    /**
+     * Resolves a tool class to the internal built-in class when a foreign copy is passed.
+     * Classes from another compiled copy of the library (dual-package hazard, e.g. built-ins
+     * re-exported by a framework wrapper) would otherwise break `instanceof` checks.
+     */
+    resolveToolClass(toolClass) {
+        if (toolClass.prototype instanceof KritzelBaseTool) {
+            return toolClass;
+        }
+        try {
+            const probe = new toolClass(this.core);
+            return KritzelEngine.BUILT_IN_TOOL_CLASSES[probe.toolType] ?? toolClass;
+        }
+        catch {
+            return toolClass;
+        }
+    }
     get isSelecting() {
-        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
+        return this.core.store.state.activeTool?.toolType === 'selection' && this.core.store.state.isSelecting;
     }
     get isSelectionActive() {
-        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.selectionGroup !== null;
+        return this.core.store.state.activeTool?.toolType === 'selection' && this.core.store.selectionGroup !== null;
     }
     constructor() {
         this.core = new KritzelCore(this);
@@ -2043,7 +2088,7 @@ export class KritzelEngine {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof KritzelSelectionTool)) {
+        if (activeTool?.toolType !== 'selection') {
             this.core.clearSelection();
             this.core.store.objects?.remove(o => o instanceof KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
@@ -2052,10 +2097,10 @@ export class KritzelEngine {
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
         }
-        if (!(activeTool instanceof KritzelTextTool)) {
+        if (activeTool?.toolType !== 'text') {
             this.core.resetActiveText();
         }
-        if (!(activeTool instanceof KritzelShapeTool)) {
+        if (activeTool?.toolType !== 'shape') {
             this.core.resetActiveShape();
         }
         this.core.store.state.skipContextMenu = false;
@@ -2289,7 +2334,7 @@ export class KritzelEngine {
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
-                    overflow: 'hidden',
+                    overflow: 'visible',
                     display: 'block',
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
@@ -2639,7 +2684,7 @@ export class KritzelEngine {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool?.toolType === 'eraser' && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,37 +1,40 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFontFamily {
-    fontOptions = [
-        { value: 'arial', label: 'Arial' },
-        { value: 'verdana', label: 'Verdana' },
-        { value: 'helvetica', label: 'Helvetica' },
-        { value: 'tahoma', label: 'Tahoma' },
-        { value: 'trebuchet ms', label: 'Trebuchet MS' },
-        { value: 'times new roman', label: 'Times New Roman' },
-        { value: 'georgia', label: 'Georgia' },
-        { value: 'garamond', label: 'Garamond' },
-        { value: 'courier new', label: 'Courier New' },
-        { value: 'brush script mt', label: 'Brush Script MT' },
-    ];
+    fontOptions = [];
     selectedFontFamily;
     fontFamilyChange;
+    handleFontOptionsChange() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
     componentWillLoad() {
-        if (this.fontOptions && this.fontOptions.length > 0) {
-            const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
-            if (!this.selectedFontFamily || !isValidCurrentFont) {
-                this.selectedFontFamily = this.fontOptions[0].value;
-            }
-        }
+        this.ensureValidSelectedFont(this.resolveFontOptions());
     }
     handleDropdownValueChange = (event) => {
         this.fontFamilyChange.emit(event.detail);
     };
+    ensureValidSelectedFont(options) {
+        if (options.length === 0) {
+            return;
+        }
+        const normalizedSelected = this.selectedFontFamily?.trim().toLocaleLowerCase();
+        const isValidCurrentFont = options.some(opt => opt.value.trim().toLocaleLowerCase() === normalizedSelected);
+        if (!normalizedSelected || !isValidCurrentFont) {
+            this.selectedFontFamily = options[0].value;
+        }
+    }
+    resolveFontOptions() {
+        return this.fontOptions;
+    }
     render() {
-        const dropdownOptions = this.fontOptions.map(option => ({
+        const fontOptions = this.resolveFontOptions();
+        const selectedOption = fontOptions.find(option => option.value === this.selectedFontFamily);
+        const selectedFontFamily = selectedOption?.cssFontFamily ?? this.selectedFontFamily;
+        const dropdownOptions = fontOptions.map(option => ({
             value: option.value,
             label: option.label,
-            style: { fontFamily: option.value },
+            style: { fontFamily: option.cssFontFamily ?? option.value },
         }));
-        return (h(Host, { key: '0123dbdff9b7051d2ebc9dcf8d1f9c7c4c161dc4' }, h("kritzel-dropdown", { key: '5d4e289161502ecc60cef3d0c6d546a64817a12a', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
+        return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
     }
     static get is() { return "kritzel-font-family"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +72,7 @@ export class KritzelFontFamily {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { value: 'arial', label: 'Arial' },\n    { value: 'verdana', label: 'Verdana' },\n    { value: 'helvetica', label: 'Helvetica' },\n    { value: 'tahoma', label: 'Tahoma' },\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\n    { value: 'times new roman', label: 'Times New Roman' },\n    { value: 'georgia', label: 'Georgia' },\n    { value: 'garamond', label: 'Garamond' },\n    { value: 'courier new', label: 'Courier New' },\n    { value: 'brush script mt', label: 'Brush Script MT' },\n  ]"
+                "defaultValue": "[]"
             },
             "selectedFontFamily": {
                 "type": "string",
@@ -110,4 +113,10 @@ export class KritzelFontFamily {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "fontOptions",
+                "methodName": "handleFontOptionsChange"
+            }];
+    }
 }

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

@@ -1,6 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
-import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 import { KritzelToolConfigHelper } from "../../../helpers/tool-config.helper";
 import { KritzelColorHelper } from "../../../helpers/color.helper";
@@ -40,8 +38,9 @@ export class KritzelControls {
         this.closeTooltip();
     }
     handleSelectionChange() {
-        if (this.activeControl?.tool instanceof KritzelSelectionTool) {
-            this.updateDisplayValues(this.activeControl.tool);
+        const tool = this.activeControl?.tool;
+        if (tool && typeof tool !== 'function' && tool.toolType === 'selection') {
+            this.updateDisplayValues(tool);
         }
     }
     async onControlsChange() {
@@ -92,7 +91,7 @@ export class KritzelControls {
             color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
             size,
         };
-        if (tool instanceof KritzelTextTool) {
+        if (tool.toolType === 'text') {
             displayValues.fontFamily = tool.fontFamily;
         }
         // Check for equality implementation to prevent unnecessary re-renders
@@ -233,13 +232,13 @@ export class KritzelControls {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '5a23a0a1baa407097b18b9bc43f41186c0c333b2', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: 'a526bd337a6b75933ec4be89c3edded0a9c39e7c', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '6d3878904bd13266be79cef0e0d1ee55d760b3da', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '5314f067c5a22425690e3b6f26c836962ac528a2', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '5e066964eba04ad9b0d1abf36f61b93464254f48', class: "kritzel-controls" }, h("div", { key: '76e49fd459e0a312837ec0b5e552355395b8814e', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'd4cffe56418dae5c569a47fe2ffc3f810f221455', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '7cf0cd164d723b5901f54a6671395f63dd8bad29', class: "kritzel-controls" }, h("div", { key: 'b7169122686a0a67c37d96751291fc43f4c45e4a', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '6e3c4f30900e4722abdfaf3cfdc68cf1a07b9292', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -269,10 +268,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '49806e8e06b8756a097eeec53203a55586214a4a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: 'bc8d79e0512f30fe150c6d2ac7f81206fc47c1a5', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'da0ec9cf776dee0872bbb7f0369a6a5a56ebb955', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'c848a63392d4ed9a30f467512421fbea3096d876', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'c7ed50fbdfbdab1847fb8c5c6e73d0e743b45706', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'de6c9801d3e9e89674b60b1c4e270b8520014aae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '671431a9c388080fb917d4e8c596d17e92eaba08', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '394e8e2c07b191b3fb93645d68d7eae67761167a', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'b8479fba2afdb51fe0ef965e18b1ae45ba8a7da6', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '8fac81d682dbdec6b5247154fd20d553dfe6f1a7', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -281,7 +280,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '140bbf567b0bbd2a2fe878536e93d8646a58b209', class: "color-container" }, h("kritzel-color", { key: 'eeb1d94fa41bbc177d39b4158ae3c4c1d692c0ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '6aa1daed9425d069c7d0405a04e65b4c4e88291f', class: "color-container" }, h("kritzel-color", { key: '7b54461769bf4aec3e39d1fbe21c015b7d7a85bb', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));