kritzel-stencil 0.3.46 → 0.4.1

package/dist/cjs/kritzel-active-users_47.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-fuAsi56H.js');
+var schema_constants = require('./schema.constants-IAt9YXDZ.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -196,23 +196,38 @@ const KritzelAwarenessCursors = class {
     objectVersion = 0;
     cleanupIntervalId;
     objectChangeRafId = null;
+    removeAwarenessChangeListener;
+    removeObjectsChangeListener;
     componentDidLoad() {
-        this.core.store.objects?.onAwarenessChange(states => {
+        this.removeAwarenessChangeListener = this.core.store.objects?.onAwarenessChange(states => {
             this.handleAwarenessChange(states);
         });
-        this.core.store.objects?.onObjectsChange(() => {
+        this.removeObjectsChangeListener = this.core.store.objects?.onObjectsChange(() => {
             this.handleRemoteObjectChange();
         });
         this.cleanupIntervalId = setInterval(() => {
             this.cleanupStaleCursors();
         }, CLEANUP_INTERVAL_MS);
+        if (this.cleanupIntervalId && typeof this.cleanupIntervalId.unref === 'function') {
+            this.cleanupIntervalId.unref();
+        }
     }
     disconnectedCallback() {
-        if (this.cleanupIntervalId) {
-            clearInterval(this.cleanupIntervalId);
+        if (this.removeAwarenessChangeListener) {
+            this.removeAwarenessChangeListener();
+            this.removeAwarenessChangeListener = undefined;
+        }
+        if (this.removeObjectsChangeListener) {
+            this.removeObjectsChangeListener();
+            this.removeObjectsChangeListener = undefined;
         }
-        if (this.objectChangeRafId !== null) {
-            cancelAnimationFrame(this.objectChangeRafId);
+        if (this.cleanupIntervalId && typeof globalThis.clearInterval === 'function') {
+            globalThis.clearInterval(this.cleanupIntervalId);
+            this.cleanupIntervalId = undefined;
+        }
+        if (this.objectChangeRafId !== null && typeof globalThis.cancelAnimationFrame === 'function') {
+            globalThis.cancelAnimationFrame(this.objectChangeRafId);
+            this.objectChangeRafId = null;
         }
     }
     handleAwarenessChange(states) {
@@ -370,7 +385,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: '5c695e3c5a012767b31bb1b756ef03e2a174f46e' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -993,8 +1008,9 @@ const KritzelControls = class {
         this.closeTooltip();
     }
     handleSelectionChange() {
-        if (this.activeControl?.tool instanceof schema_constants.KritzelSelectionTool) {
-            this.updateDisplayValues(this.activeControl.tool);
+        const tool = this.activeControl?.tool;
+        if (tool && typeof tool !== 'function' && tool.toolType === 'selection') {
+            this.updateDisplayValues(tool);
         }
     }
     async onControlsChange() {
@@ -1045,7 +1061,7 @@ const KritzelControls = class {
             color: schema_constants.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
             size,
         };
-        if (tool instanceof schema_constants.KritzelTextTool) {
+        if (tool.toolType === 'text') {
             displayValues.fontFamily = tool.fontFamily;
         }
         // Check for equality implementation to prevent unnecessary re-renders
@@ -1186,13 +1202,13 @@ const KritzelControls = class {
         // 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 (index.h(index.Host, { key: '5a23a0a1baa407097b18b9bc43f41186c0c333b2', style: { display: this.visible ? '' : 'none' }, class: {
+        return (index.h(index.Host, { key: 'a526bd337a6b75933ec4be89c3edded0a9c39e7c', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '6d3878904bd13266be79cef0e0d1ee55d760b3da', style: {
+            } }, this.isUtilityPanelVisible && (index.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() })), index.h("div", { key: '5e066964eba04ad9b0d1abf36f61b93464254f48', class: "kritzel-controls" }, index.h("div", { key: '76e49fd459e0a312837ec0b5e552355395b8814e', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.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() })), index.h("div", { key: '7cf0cd164d723b5901f54a6671395f63dd8bad29', class: "kritzel-controls" }, index.h("div", { key: 'b7169122686a0a67c37d96751291fc43f4c45e4a', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.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);
@@ -1222,10 +1238,10 @@ const KritzelControls = class {
                     '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) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: '49806e8e06b8756a097eeec53203a55586214a4a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: 'bc8d79e0512f30fe150c6d2ac7f81206fc47c1a5', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: 'da0ec9cf776dee0872bbb7f0369a6a5a56ebb955', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'c848a63392d4ed9a30f467512421fbea3096d876', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.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%' } })), index.h("div", { key: 'de6c9801d3e9e89674b60b1c4e270b8520014aae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '671431a9c388080fb917d4e8c596d17e92eaba08', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '394e8e2c07b191b3fb93645d68d7eae67761167a', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.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%' } })), index.h("div", { key: '8fac81d682dbdec6b5247154fd20d553dfe6f1a7', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1234,7 +1250,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: '140bbf567b0bbd2a2fe878536e93d8646a58b209', class: "color-container" }, index.h("kritzel-color", { key: 'eeb1d94fa41bbc177d39b4158ae3c4c1d692c0ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: '6aa1daed9425d069c7d0405a04e65b4c4e88291f', class: "color-container" }, index.h("kritzel-color", { key: '7b54461769bf4aec3e39d1fbe21c015b7d7a85bb', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -2312,6 +2328,11 @@ const KritzelEditor = class {
     /** 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;
@@ -2364,11 +2385,14 @@ const KritzelEditor = class {
     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();
@@ -2398,6 +2422,12 @@ const KritzelEditor = class {
     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) {
@@ -2671,9 +2701,27 @@ const KritzelEditor = class {
     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: schema_constants.resolveTextToolAvailableFonts(control.config.availableFonts),
+                },
+            };
+        });
+    }
     applyTheme() {
         const themeObj = this.resolveThemeObject();
         schema_constants.ThemeHelper.applyThemeToElement(this.host, themeObj);
@@ -2684,6 +2732,7 @@ const KritzelEditor = class {
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
+        this.registerCustomFonts();
         this.listenForMobileKeyboard();
         this.setOsSpecificCssVariables();
     }
@@ -2696,6 +2745,7 @@ const KritzelEditor = class {
         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;
         }
@@ -2959,6 +3009,15 @@ const KritzelEditor = class {
     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.
@@ -3036,6 +3095,25 @@ const KritzelEditor = class {
             schema_constants.KritzelIconRegistry.register(name, svg);
         }
     }
+    async registerCustomFonts(fonts = this.customFonts) {
+        schema_constants.KritzelFontRegistry.registerFonts(fonts);
+        const currentVersion = ++this.customFontsLoadVersion;
+        const loadPromise = schema_constants.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() {
         schema_constants.KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
             this.isVirtualKeyboardOpen = isOpen;
@@ -3074,36 +3152,36 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '3128b38a04cd636abc1f2466f1ac1aa3dcea2262' }, index.h("div", { key: 'b1fbb051cb1144fd84f28cfea4ad824f92189dbd', class: "editor-content", style: {
+        return (index.h(index.Host, { key: '00d652c74feac7b4917772146368125da6deeb1c' }, index.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',
-            } }, index.h("div", { key: '2b896fa8bd00a7c68b74df7a9846e8c3e0f6efc4', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: '7d3015918e4af7ee435aee8da37ddfa206cdfd66', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '49f13f23698db9b804d139e0f35696be06569346', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '765aa6995398aca3c7738758bedb7d9a7c2f099a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'fe0dfa30aa498a608f9167b01e0a2309dfa67162', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.h("kritzel-engine", { key: '5aeb7979faa8779653ff6a2930d288fd601cb0e9', ref: el => {
+            } }, index.h("div", { key: '2378c776d8eecf2614567bed11c6e93fb338e302', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: 'ec269d3e9f589362d8301370778f0c5e4252eead', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '847ed8149d556c934090424ff54b17b6721ccc76', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '61d8b8e91cda100ffa6620db26ba6dfb2232946a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'b7e132773225ace38e447756110dd39e4661f5fc', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.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) }), index.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) }), index.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) }), index.h("div", { key: 'ffdb548da8aac3498b1b3e9bfdc9a41f8c448675', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: 'af6f6a86212195fd3ee13bc33c16574e0a5236a6', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '0870c0e47838fc99b4041718a431535827e199cf', class: "top-right-buttons" }, index.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) }), index.h("div", { key: 'e2691e7c730195e197511cb1e4d0fe707677b5ff', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: 'd0ac6624eab49af78d4761c3ad91842834717aad', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: 'ad3d386ab7e8ad9fdfbb12754db005bc85fa28ce', class: "top-right-buttons" }, index.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) }), index.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) }), index.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) }), index.h("kritzel-active-users", { key: '872b7fa12d49410d1c370baed3386a34f89d3e2a', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'da19825b4fba6a516803f8330cdfdfac6b6c9db1', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.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) }), index.h("kritzel-active-users", { key: 'feef074b52e552fa2ef7e8258002571aca4c5abd', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '844c722545363eaf7eec69037a835eae943afeb9', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.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 && (index.h("kritzel-button", { key: 'a9e38ad3e13c785f6a4223ebde95f60451c6515f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: 'b8f63a63ae4e75a70d0069410170af902f2a362b', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '7a923fd51e8d2bd1e2833e0941622efadd55f881', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (index.h("kritzel-button", { key: '68ddf8c3aabc7634b4c1d88f3d2d584fa1f1b150', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '39b938f5792f7a36bbf21ed88a1a5c7717a785a6', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.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 && (index.h("kritzel-login-dialog", { key: 'ac54c699a94bb2657a6817c37d6220b75d931cd3', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '5f6528a57884bd1494e45755609e710f69041a4d', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -3122,6 +3200,12 @@ const KritzelEditor = class {
         "activeWorkspace": [{
                 "onActiveWorkspaceChange": 0
             }],
+        "customFonts": [{
+                "onCustomFontsChange": 0
+            }],
+        "controls": [{
+                "onControlsChange": 0
+            }],
         "activeWorkspaceId": [{
                 "onActiveWorkspaceIdChange": 0
             }],
@@ -21403,7 +21487,7 @@ class KritzelContextMenuHandler extends schema_constants.KritzelBaseHandler {
      * @returns void - This method does not return a value; it updates state and triggers a rerender.
      */
     handleContextMenu(event) {
-        if (!(this._core.store.state.activeTool instanceof schema_constants.KritzelSelectionTool)) {
+        if (this._core.store.state.activeTool?.toolType !== 'selection') {
             return;
         }
         if (this._core.store.state.skipContextMenu) {
@@ -21463,7 +21547,7 @@ class KritzelContextMenuHandler extends schema_constants.KritzelBaseHandler {
      */
     open(options) {
         const { x, y, objectId } = options;
-        if (this._core.store.state.activeTool instanceof schema_constants.KritzelSelectionTool) {
+        if (this._core.store.state.activeTool?.toolType === 'selection') {
             const selectionTool = this._core.store.state.activeTool;
             selectionTool?.moveHandler?.cancelPendingDrag();
         }
@@ -22278,6 +22362,9 @@ class KritzelObjectMap {
      */
     onAwarenessChange(callback) {
         this._awarenessChangeCallbacks.push(callback);
+        return () => {
+            this._awarenessChangeCallbacks = this._awarenessChangeCallbacks.filter(existingCallback => existingCallback !== callback);
+        };
     }
     /**
      * Registers a callback to be invoked when remote object changes are received.
@@ -22286,6 +22373,9 @@ class KritzelObjectMap {
      */
     onObjectsChange(callback) {
         this._objectsChangeCallbacks.push(callback);
+        return () => {
+            this._objectsChangeCallbacks = this._objectsChangeCallbacks.filter(existingCallback => existingCallback !== callback);
+        };
     }
     /**
      * Returns the Yjs UndoManager instance for managing undo/redo operations.
@@ -22482,6 +22572,9 @@ class KritzelObjectMap {
                             callback(states);
                         }
                     }, delayMs);
+                    if (typeof this._awarenessEmitTimeout.unref === 'function') {
+                        this._awarenessEmitTimeout.unref();
+                    }
                 }
             };
             this._awareness.on('change', this._awarenessChangeHandler);
@@ -24472,9 +24565,8 @@ class KritzelClipboardManager {
             const scale = this._core.store.state.scale;
             const offset = 25 / scale;
             const preparePromises = intent.files.map(async (file, index) => {
-                // Use the default image compression size of 1200
-                const compressed = await schema_constants.imageCompression(file, { maxWidthOrHeight: 1200 });
-                return schema_constants.KritzelImage.fromBlob(this._core, compressed, {
+                const preparedFile = await this.prepareImageFile(file);
+                return schema_constants.KritzelImage.fromBlob(this._core, preparedFile, {
                     translateX: index * offset,
                     translateY: index * offset,
                 });
@@ -24486,6 +24578,12 @@ class KritzelClipboardManager {
             return null;
         }
     }
+    async prepareImageFile(file) {
+        if (schema_constants.KritzelImageFileHelper.isGifFile(file)) {
+            return file;
+        }
+        return schema_constants.imageCompression(file, { maxWidthOrHeight: 1200 });
+    }
     async materializePlainText(intent) {
         const textObject = schema_constants.KritzelText.create(this._core);
         const paragraphs = intent.text.split('\n').map(line => {
@@ -27953,7 +28051,7 @@ const KritzelEngine = class {
             }
             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);
         }
@@ -29134,31 +29232,71 @@ const KritzelEngine = class {
         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: schema_constants.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: schema_constants.KritzelSelectionTool,
+        brush: schema_constants.KritzelBrushTool,
+        eraser: schema_constants.KritzelEraserTool,
+        line: schema_constants.KritzelLineTool,
+        shape: schema_constants.KritzelShapeTool,
+        text: schema_constants.KritzelTextTool,
+        image: schema_constants.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 schema_constants.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 schema_constants.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 schema_constants.KritzelSelectionTool && this.core.store.selectionGroup !== null;
+        return this.core.store.state.activeTool?.toolType === 'selection' && this.core.store.selectionGroup !== null;
     }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -29475,7 +29613,7 @@ const KritzelEngine = class {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof schema_constants.KritzelSelectionTool)) {
+        if (activeTool?.toolType !== 'selection') {
             this.core.clearSelection();
             this.core.store.objects?.remove(o => o instanceof schema_constants.KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
@@ -29484,10 +29622,10 @@ const KritzelEngine = class {
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
         }
-        if (!(activeTool instanceof schema_constants.KritzelTextTool)) {
+        if (activeTool?.toolType !== 'text') {
             this.core.resetActiveText();
         }
-        if (!(activeTool instanceof schema_constants.KritzelShapeTool)) {
+        if (activeTool?.toolType !== 'shape') {
             this.core.resetActiveShape();
         }
         this.core.store.state.skipContextMenu = false;
@@ -29721,7 +29859,7 @@ const KritzelEngine = class {
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
-                    overflow: 'hidden',
+                    overflow: 'visible',
                     display: 'block',
                 } })), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
@@ -30071,7 +30209,7 @@ const KritzelEngine = class {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && index.h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof schema_constants.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && index.h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && index.h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool?.toolType === 'eraser' && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && index.h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -30259,39 +30397,47 @@ const KritzelFontFamily = class {
         index.registerInstance(this, hostRef);
         this.fontFamilyChange = index.createEvent(this, "fontFamilyChange");
     }
-    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 (index.h(index.Host, { key: '0123dbdff9b7051d2ebc9dcf8d1f9c7c4c161dc4' }, index.h("kritzel-dropdown", { key: '5d4e289161502ecc60cef3d0c6d546a64817a12a', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
+        return (index.h(index.Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, index.h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
     }
+    static get watchers() { return {
+        "fontOptions": [{
+                "handleFontOptionsChange": 0
+            }]
+    }; }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss();
 
@@ -31489,7 +31635,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.46';
+const KRITZEL_VERSION = '0.4.1';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 
@@ -35204,8 +35350,43 @@ const KritzelToolConfig = class {
     sizes = [];
     currentOpacity = 1;
     updateTrigger = 0;
+    getFontOptionsFromTool() {
+        const configuredFonts = schema_constants.resolveTextToolAvailableFonts(this.tool.availableFonts).map(font => {
+            const registeredFont = typeof font === 'string'
+                ? {
+                    family: font,
+                    label: font,
+                    cssFontFamily: font,
+                }
+                : {
+                    family: font.family,
+                    label: font.label ?? font.family,
+                    cssFontFamily: font.cssFontFamily ?? font.family,
+                };
+            return {
+                value: registeredFont.family,
+                label: registeredFont.label,
+                cssFontFamily: registeredFont.cssFontFamily,
+            };
+        });
+        const mergedFonts = [...configuredFonts];
+        const seenFonts = new Set(mergedFonts.map(font => font.value.trim().toLocaleLowerCase()));
+        for (const font of schema_constants.KritzelFontRegistry.list()) {
+            const normalizedValue = font.family.trim().toLocaleLowerCase();
+            if (seenFonts.has(normalizedValue)) {
+                continue;
+            }
+            seenFonts.add(normalizedValue);
+            mergedFonts.push({
+                value: font.family,
+                label: font.label,
+                cssFontFamily: font.cssFontFamily,
+            });
+        }
+        return mergedFonts;
+    }
     handleSelectionChange() {
-        if (this.tool instanceof schema_constants.KritzelSelectionTool) {
+        if (this.tool?.toolType === 'selection') {
             this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
             if (this.config) {
                 this.updatePalette();
@@ -35242,7 +35423,7 @@ const KritzelToolConfig = class {
             color: schema_constants.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
             size,
         };
-        if (this.tool instanceof schema_constants.KritzelTextTool) {
+        if (this.tool.toolType === 'text') {
             displayValues.fontFamily = this.tool.fontFamily;
         }
         this.displayValuesChange.emit(displayValues);
@@ -35335,7 +35516,7 @@ const KritzelToolConfig = class {
             case 'shape-fill':
                 return (index.h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
             case 'font-family':
-                return (index.h("kritzel-font-family", { key: control.type, selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+                return (index.h("kritzel-font-family", { key: control.type, fontOptions: this.getFontOptionsFromTool(), selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
             default:
                 return null;
         }