kritzel-stencil 0.4.0 → 0.4.2

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);
         }
@@ -1341,8 +1346,25 @@ export class KritzelEngine {
         if (!workspace) {
             throw new Error('Cannot export workspace: no active workspace is loaded');
         }
+        await this.core.initializeAssetStorage();
         const serialized = workspace.serialize({ includeObjects: true });
-        return JSON.stringify(serialized, null, 2);
+        const exportMode = this.getWorkspaceExportMode();
+        const { objects, ...workspaceWithoutObjects } = serialized;
+        const payload = {
+            ...workspaceWithoutObjects,
+            exportMode,
+            ...(objects !== undefined ? { objects } : {}),
+        };
+        if (exportMode === 'portable') {
+            const portableAssets = await this.collectPortableAssets(payload.objects);
+            if (Object.keys(portableAssets).length > 0) {
+                payload.assets = portableAssets;
+            }
+        }
+        else {
+            delete payload.assets;
+        }
+        return JSON.stringify(payload, null, 2);
     }
     /**
      * Imports a workspace from a JSON string into a new workspace.
@@ -1356,22 +1378,15 @@ export class KritzelEngine {
         if (!data.__class__ || data.__class__ !== 'KritzelWorkspace') {
             throw new Error('Invalid workspace data: missing or incorrect __class__ identifier');
         }
+        await this.core.initializeAssetStorage();
+        await this.restorePortableAssets(data);
         if (data.version && data.version !== WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
         // Create a new workspace with a fresh ID but use the imported name
         const newWorkspaceId = ObjectHelper.generateUUID();
-        const importedName = data.name || 'Imported Workspace';
-        let importedViewport = data.viewport || { centerWorldX: 0, centerWorldY: 0, scale: 1 };
-        // Backward compatibility: convert legacy translateX/translateY to centerWorldX/centerWorldY
-        if ('translateX' in importedViewport && !('centerWorldX' in importedViewport)) {
-            const scale = importedViewport.scale ?? 1;
-            importedViewport = {
-                centerWorldX: -(importedViewport.translateX ?? 0) / scale,
-                centerWorldY: -(importedViewport.translateY ?? 0) / scale,
-                scale,
-            };
-        }
+        const importedName = this.getImportedWorkspaceName(data.name);
+        const importedViewport = this.getImportedWorkspaceViewport(data.viewport);
         const newWorkspace = new KritzelWorkspace(newWorkspaceId, importedName, importedViewport);
         // Save the new workspace
         this.core.createWorkspace(newWorkspace);
@@ -1410,6 +1425,8 @@ export class KritzelEngine {
         if (!data.__class__ || data.__class__ !== 'KritzelWorkspace') {
             throw new Error('Invalid workspace data: missing or incorrect __class__ identifier');
         }
+        await this.core.initializeAssetStorage();
+        await this.restorePortableAssets(data);
         if (data.version && data.version !== WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
@@ -1436,6 +1453,98 @@ export class KritzelEngine {
         this.core.rerender();
         return loadedCount;
     }
+    getWorkspaceExportMode() {
+        return this.core.assetResolver.hasRemoteProvider ? 'lightweight' : 'portable';
+    }
+    async collectPortableAssets(serializedObjects) {
+        if (!Array.isArray(serializedObjects) || serializedObjects.length === 0) {
+            return {};
+        }
+        const assetIds = new Set();
+        for (const serializedObject of serializedObjects) {
+            if (!serializedObject || typeof serializedObject !== 'object') {
+                continue;
+            }
+            const maybeImage = serializedObject;
+            if (maybeImage.__class__ === 'KritzelImage' && typeof maybeImage.assetId === 'string' && maybeImage.assetId.length > 0) {
+                assetIds.add(maybeImage.assetId);
+            }
+        }
+        const assets = {};
+        for (const assetId of assetIds) {
+            try {
+                const blob = await this.core.assetResolver.fetchBlob(assetId);
+                assets[assetId] = await this.blobToDataUrl(blob);
+            }
+            catch (error) {
+                console.warn(`[Kritzel] Failed to embed asset ${assetId} in portable workspace export:`, error);
+            }
+        }
+        return assets;
+    }
+    async restorePortableAssets(data) {
+        const assets = data.assets;
+        if (!assets || typeof assets !== 'object') {
+            return;
+        }
+        for (const [assetId, dataUrl] of Object.entries(assets)) {
+            if (!assetId || typeof dataUrl !== 'string' || !dataUrl.startsWith('data:')) {
+                continue;
+            }
+            try {
+                const blob = await this.dataUrlToBlob(dataUrl);
+                await this.core.assetResolver.put(blob, {
+                    id: assetId,
+                    mimeType: blob.type || 'application/octet-stream',
+                    kind: 'image',
+                });
+            }
+            catch (error) {
+                console.warn(`[Kritzel] Failed to restore embedded asset ${assetId} from portable workspace import:`, error);
+            }
+        }
+    }
+    blobToDataUrl(blob) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(reader.error ?? new Error('Failed to read blob as data URL'));
+            reader.readAsDataURL(blob);
+        });
+    }
+    async dataUrlToBlob(dataUrl) {
+        const response = await fetch(dataUrl);
+        return response.blob();
+    }
+    getImportedWorkspaceName(rawName) {
+        if (typeof rawName === 'string' && rawName.trim().length > 0) {
+            return rawName;
+        }
+        return 'Imported Workspace';
+    }
+    getImportedWorkspaceViewport(rawViewport) {
+        if (!rawViewport || typeof rawViewport !== 'object') {
+            return { centerWorldX: 0, centerWorldY: 0, scale: 1 };
+        }
+        const viewport = rawViewport;
+        if (typeof viewport.centerWorldX === 'number' && typeof viewport.centerWorldY === 'number') {
+            const scale = typeof viewport.scale === 'number' && viewport.scale > 0 ? viewport.scale : 1;
+            return {
+                centerWorldX: viewport.centerWorldX,
+                centerWorldY: viewport.centerWorldY,
+                scale,
+            };
+        }
+        if (typeof viewport.translateX === 'number' || typeof viewport.translateY === 'number') {
+            const scale = typeof viewport.scale === 'number' && viewport.scale > 0 ? viewport.scale : 1;
+            return {
+                centerWorldX: -(typeof viewport.translateX === 'number' ? viewport.translateX : 0) / scale,
+                centerWorldY: -(typeof viewport.translateY === 'number' ? viewport.translateY : 0) / scale,
+                scale,
+            };
+        }
+        return { centerWorldX: 0, centerWorldY: 0, scale: 1 };
+    }
     /**
      * Exports the current workspace as a JSON file and triggers a browser download.
      * @param filename - Optional custom filename (without extension). Defaults to workspace name with timestamp.
@@ -1720,31 +1829,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 +2192,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 +2201,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 +2438,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 +2788,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"; }
@@ -5292,6 +5441,10 @@ export class KritzelEngine {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "WorkspaceJsonExportPayload": {
+                            "location": "global",
+                            "id": "global::WorkspaceJsonExportPayload"
                         }
                     },
                     "return": "Promise<string>"
@@ -5317,6 +5470,10 @@ export class KritzelEngine {
                             "location": "global",
                             "id": "global::Promise"
                         },
+                        "WorkspaceJsonExportPayload": {
+                            "location": "global",
+                            "id": "global::WorkspaceJsonExportPayload"
+                        },
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
@@ -5350,6 +5507,10 @@ export class KritzelEngine {
                             "location": "global",
                             "id": "global::Promise"
                         },
+                        "WorkspaceJsonExportPayload": {
+                            "location": "global",
+                            "id": "global::WorkspaceJsonExportPayload"
+                        },
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",