kritzel-stencil 0.3.16 → 0.3.18

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

@@ -32,7 +32,6 @@ export class KritzelEditor {
     viewportBoundaryRight = Infinity;
     viewportBoundaryTop = -Infinity;
     viewportBoundaryBottom = Infinity;
-    wheelEnabled = true;
     debugInfo = {
         showViewportInfo: false,
         showObjectInfo: false,
@@ -101,66 +100,66 @@ export class KritzelEditor {
     ];
     globalContextMenuItems = [
         {
-            label: 'Paste',
+            label: 'menu.paste',
             icon: 'paste',
             disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
             action: menu => this.engineRef.paste(menu.x, menu.y),
         },
         {
-            label: 'Select All',
+            label: 'menu.selectAll',
             icon: 'select-all',
             disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,
             action: () => this.selectAllObjectsInViewport(),
         },
     ];
     objectContextMenuItems = [
-        { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },
-        { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },
+        { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },
+        { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },
         {
-            label: 'Paste',
+            label: 'menu.paste',
             icon: 'paste',
             group: 'clipboard',
             disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
             action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
         },
         {
-            label: 'Order',
+            label: 'menu.order',
             icon: 'ordering',
             group: 'other',
             children: [
-                { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
-                { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
-                { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },
-                { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },
+                { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
+                { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+                { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },
+                { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },
             ],
         },
         {
-            label: 'Align',
+            label: 'menu.align',
             icon: 'align',
             group: 'other',
             disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
             children: [
-                { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },
-                { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },
-                { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },
-                { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },
-                { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },
-                { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },
+                { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },
+                { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },
+                { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },
+                { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },
+                { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },
+                { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },
             ],
         },
         {
-            label: 'Group',
+            label: 'menu.group',
             icon: 'group',
             group: 'other',
             children: [
                 {
-                    label: 'Group',
+                    label: 'menu.group',
                     icon: 'group',
                     disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
                     action: () => this.engineRef.group(),
                 },
                 {
-                    label: 'Ungroup',
+                    label: 'menu.ungroup',
                     icon: 'ungroup',
                     disabled: async () => {
                         const selectedObjects = await this.engineRef.getSelectedObjects();
@@ -171,23 +170,34 @@ export class KritzelEditor {
             ],
         },
         {
-            label: 'Export',
+            label: 'menu.export',
             icon: 'download',
             group: 'export',
             children: [
-                { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },
-                { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },
+                { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },
+                { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },
             ],
         },
-        { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
+        { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },
     ];
     themes;
     theme = 'light';
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey;
+    /** The current locale (language) code applied to the editor, e.g. 'en', 'de', 'fr'. */
+    locale = 'en';
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales;
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale = 'en';
     customSvgIcons = {};
+    isPanningEnabled = true;
+    isZoomingEnabled = true;
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     isWorkspaceManagerVisible = true;
     isMoreMenuVisible = true;
+    isZoomPanelVisible = true;
     isObjectDistanceFadingActive = false;
     syncConfig = DEFAULT_SYNC_CONFIG;
     assetStorageConfig = DEFAULT_ASSET_STORAGE_CONFIG;
@@ -209,6 +219,7 @@ export class KritzelEditor {
     objectsUpdated;
     undoStateChange;
     themeChange;
+    localeChange;
     viewportChange;
     logout;
     login;
@@ -222,6 +233,11 @@ export class KritzelEditor {
     isVirtualKeyboardOpen = false;
     undoState = null;
     isBackToContentButtonVisible = false;
+    /** Localized strings for editor-owned UI (e.g. the more menu), resolved from the active locale. */
+    resolvedTerms = {};
+    /** Available locales as `{ code, label }` options for the settings language selector. */
+    availableLocaleOptions = [];
+    currentZoomPercent = 100;
     shortcuts = [];
     currentIsPublic = false;
     isEditorVisible = false;
@@ -285,6 +301,25 @@ export class KritzelEditor {
     onThemesChange() {
         this.applyTheme();
     }
+    onLocaleChange(newValue) {
+        if (this.engineRef) {
+            this.engineRef.setLocale(newValue);
+            this.engineRef.saveSettings(this.currentSettingsConfig);
+            void this.refreshLocalizedTerms();
+        }
+    }
+    /**
+     * Refreshes the editor-owned localized strings (e.g. the more menu and the
+     * strings forwarded to child UI components) from the engine's localization
+     * manager for the active locale.
+     */
+    async refreshLocalizedTerms() {
+        if (!this.engineRef) {
+            return;
+        }
+        this.resolvedTerms = await this.engineRef.getResolvedTerms();
+        this.availableLocaleOptions = await this.engineRef.getAvailableLocaleOptions();
+    }
     onTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -543,6 +578,9 @@ export class KritzelEditor {
         this.activeWorkspace = event.detail.activeWorkspace;
         this.workspaces = event.detail.workspaces;
         this.currentIsPublic = await this.engineRef.getIsPublic();
+        await this.refreshLocalizedTerms();
+        const viewport = await this.engineRef.getViewport();
+        this.currentZoomPercent = this.getZoomPercentFromScale(viewport.scale);
         this.loadShortcuts();
     }
     handleWorkspacesChange(event) {
@@ -593,8 +631,15 @@ export class KritzelEditor {
     }
     handleViewportChange(event) {
         event.stopPropagation();
+        this.currentZoomPercent = this.getZoomPercentFromScale(event.detail.scale);
         this.viewportChange.emit(event.detail);
     }
+    getZoomPercentFromScale(scale) {
+        if (!Number.isFinite(scale) || scale <= 0) {
+            return 100;
+        }
+        return Math.round(scale * 100);
+    }
     handleAwarenessChange(event) {
         event.stopPropagation();
         this.awarenessChange.emit(event.detail);
@@ -604,6 +649,10 @@ export class KritzelEditor {
         this.scaleMax = event.detail.scaleMax;
         this.lockDrawingScale = event.detail.lockDrawingScale;
         this.theme = event.detail.theme;
+        if (typeof event.detail.locale === 'string' && event.detail.locale !== this.locale) {
+            this.locale = event.detail.locale;
+            this.localeChange.emit(event.detail.locale);
+        }
         this.viewportBoundaryLeft = event.detail.viewportBoundaryLeft ?? -Infinity;
         this.viewportBoundaryRight = event.detail.viewportBoundaryRight ?? Infinity;
         this.viewportBoundaryTop = event.detail.viewportBoundaryTop ?? -Infinity;
@@ -618,7 +667,7 @@ export class KritzelEditor {
         return [
             {
                 id: 'share',
-                label: 'Share',
+                label: this.resolvedTerms['menu.share'] ?? 'Share',
                 icon: 'share',
                 action: () => {
                     if (!this.isLoggedIn && this.loginConfig) {
@@ -630,7 +679,7 @@ export class KritzelEditor {
             },
             {
                 id: 'export',
-                label: 'Export',
+                label: this.resolvedTerms['menu.export'] ?? 'Export',
                 icon: 'upload',
                 action: async () => {
                     const preview = await this.engineRef.getScreenshot('png');
@@ -639,19 +688,19 @@ export class KritzelEditor {
             },
             {
                 id: 'import',
-                label: 'Import',
+                label: this.resolvedTerms['menu.import'] ?? 'Import',
                 icon: 'download',
                 action: () => this.engineRef.importFromFile(),
             },
             {
                 id: 'settings',
-                label: 'Settings',
+                label: this.resolvedTerms['menu.settings'] ?? 'Settings',
                 icon: 'settings',
                 action: () => this.settingsRef.open(),
             },
             {
                 id: 'logout',
-                label: 'Logout',
+                label: this.resolvedTerms['menu.logout'] ?? 'Logout',
                 icon: 'log-out',
                 color: '#ff3b30',
                 isVisible: this.isLoggedIn,
@@ -691,6 +740,41 @@ export class KritzelEditor {
     async setLoginLoading(provider) {
         this.loginDialogRef?.setLoading(provider);
     }
+    /**
+     * Sets the active locale (language) and re-renders the UI.
+     * @param code - The locale code to activate, e.g. 'de'.
+     */
+    async setLocale(code) {
+        this.locale = code;
+        await this.engineRef?.setLocale(code);
+    }
+    /**
+     * Gets the currently active locale code.
+     */
+    async getLocale() {
+        return this.engineRef ? this.engineRef.getLocale() : this.locale;
+    }
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    async getAvailableLocales() {
+        return this.engineRef ? this.engineRef.getAvailableLocales() : [];
+    }
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    async registerLocales(locales) {
+        await this.engineRef?.registerLocales(locales);
+    }
+    /**
+     * Resolves a term key to its translated string for the active locale.
+     * @param key - The term key to resolve.
+     * @param vars - Optional values for `{placeholder}` interpolation.
+     */
+    async t(key, vars) {
+        return this.engineRef ? this.engineRef.t(key, vars) : key;
+    }
     getSettingsStorageKey() {
         return this.editorId ? `kritzel-settings-${this.editorId}` : 'kritzel-settings';
     }
@@ -711,6 +795,9 @@ export class KritzelEditor {
                 if (typeof parsed.theme === 'string') {
                     this.theme = parsed.theme;
                 }
+                if (typeof parsed.locale === 'string') {
+                    this.locale = parsed.locale;
+                }
                 if (typeof parsed.viewportBoundaryLeft === 'number') {
                     this.viewportBoundaryLeft = parsed.viewportBoundaryLeft;
                 }
@@ -741,6 +828,7 @@ export class KritzelEditor {
             scaleMax: this.scaleMax,
             lockDrawingScale: this.lockDrawingScale,
             theme: this.theme,
+            locale: this.locale,
             viewportBoundaryLeft: this.viewportBoundaryLeft,
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
@@ -794,35 +882,35 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: 'ffacaea5d3df12a3a8b448d31db3c5949053156c', style: {
+        return (h(Host, { key: '72238560a0f0275c506f59220277fdff7ab92c13', 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: '669eafee25b4f84c39469738a1337c21ab03e388', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'd6feb4a71c3286830fbe53a533f283c8af9a0385', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '5bd0e6263d51119b197292b69879c1ae437f92fc', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '468f17137c51c90fd61c9179d13c449b1ac8feb9', ref: el => {
+            } }, h("div", { key: '14fd50ad857199f3b6be708fc4263aa2e69067de', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '8788631c804770c67110c7e7906fe2034438ef9b', 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: '1840374d7353af2b050822dcd9c54be46e326278', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'cdde0b65c811ee28fb4266afb96005c1fed24323', 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, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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) }), h("kritzel-controls", { key: '848c30b27fb916c8480b41745bd6ec844e0b23a2', 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) }), h("kritzel-controls", { key: '9b91d0cc3b3afba8894bd852bac911178c0ca82d', 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, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e998d60679c767d15617bd7ecde5ee77e781a92f', class: "top-right-buttons" }, h("kritzel-settings", { key: '43b9cdb2d10de789cc03d2a9ef5df870b8ca7bfe', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '01f63c615eec68696532926b6d1efe2443e2d46a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '73a1fc5b0892b88d6c0a7c5debb42b7bb3f03a84', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '94776978ba9dd68b2c5f62b141c074852585a1cd', class: "top-right-buttons" }, h("kritzel-settings", { key: '665a74511f8e511602d4d3437927e03af2c3c01c', 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'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '74669624a1e5177125ef00e1667c880ce47cbce4', 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: '6b52127d4634d92c3e7410a084f37970bd8c84e7', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '18d925f32d021ff6713accb22d0594d259d70f2e', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bddd5c29c5f17cced47276c237c04cfdb711da38', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '4eb6c85459f59863d6e644ecf21c2295da71bafc', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'a5a323ec248bebc7bc07898f344e0926fac8db17', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '8cb3ddad95d36f5b7ad59d8c4f057df93cb2bfe3', 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: '002a01d361137f867efc2a0c91a6c0e9619d4359', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '6a9e0ad77997cbb10981d58afb176a7f7f4938aa', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (h("kritzel-button", { key: '5ba13725105d0af68c51fec455569ac7bbeaecde', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'f392a518fef108b395eb6d6681af9e06827e3780', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '845a3153f5fd9b419f7d0b81be85f5e1ea0051cc', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '35395d0faadcfeb021fba685aa46e180e47d2be2', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '5a7b149d8e2c2acbda3d7818d8576d8ad249ef23', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
-            }, providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+            }, providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title ?? this.resolvedTerms['login.dialogTitle'] ?? 'Sign in', subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -977,26 +1065,6 @@ export class KritzelEditor {
                 "attribute": "viewport-boundary-bottom",
                 "defaultValue": "Infinity"
             },
-            "wheelEnabled": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "wheel-enabled",
-                "defaultValue": "true"
-            },
             "debugInfo": {
                 "type": "unknown",
                 "mutable": true,
@@ -1118,7 +1186,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    {\n      label: 'Paste',\n      icon: 'paste',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Select All',\n      icon: 'select-all',\n      disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,\n      action: () => this.selectAllObjectsInViewport(),\n    },\n  ]"
+                "defaultValue": "[\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.selectAll',\n      icon: 'select-all',\n      disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,\n      action: () => this.selectAllObjectsInViewport(),\n    },\n  ]"
             },
             "objectContextMenuItems": {
                 "type": "unknown",
@@ -1143,7 +1211,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'Paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'Align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'Group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'Group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'Ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'Export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
+                "defaultValue": "[\n    { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },\n    {\n      label: 'menu.paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'menu.order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'menu.align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'menu.group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'menu.group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'menu.ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'menu.export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
             "themes": {
                 "type": "unknown",
@@ -1196,6 +1264,103 @@ export class KritzelEditor {
                 "attribute": "theme",
                 "defaultValue": "'light'"
             },
+            "licenseKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "License key that, when valid, removes the \"Powered by Kritzel\" watermark."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "license-key"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "LocaleCode",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | string & {}",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current locale (language) code applied to the editor, e.g. 'en', 'de', 'fr'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en'"
+            },
+            "locales": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelLocale[]",
+                    "resolved": "KritzelLocale[]",
+                    "references": {
+                        "KritzelLocale": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelLocale",
+                            "referenceLocation": "KritzelLocale"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of available locale definitions (with optional partial term overrides)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fallbackLocale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LocaleCode",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | string & {}",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The locale used to resolve terms missing from the active locale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-locale",
+                "defaultValue": "'en'"
+            },
             "customSvgIcons": {
                 "type": "unknown",
                 "mutable": false,
@@ -1219,6 +1384,46 @@ export class KritzelEditor {
                 "setter": false,
                 "defaultValue": "{}"
             },
+            "isPanningEnabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-panning-enabled",
+                "defaultValue": "true"
+            },
+            "isZoomingEnabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-zooming-enabled",
+                "defaultValue": "true"
+            },
             "isControlsVisible": {
                 "type": "boolean",
                 "mutable": false,
@@ -1299,6 +1504,26 @@ export class KritzelEditor {
                 "attribute": "is-more-menu-visible",
                 "defaultValue": "true"
             },
+            "isZoomPanelVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-zoom-panel-visible",
+                "defaultValue": "true"
+            },
             "isObjectDistanceFadingActive": {
                 "type": "boolean",
                 "mutable": false,
@@ -1485,6 +1710,9 @@ export class KritzelEditor {
             "isVirtualKeyboardOpen": {},
             "undoState": {},
             "isBackToContentButtonVisible": {},
+            "resolvedTerms": {},
+            "availableLocaleOptions": {},
+            "currentZoomPercent": {},
             "shortcuts": {},
             "currentIsPublic": {},
             "isEditorVisible": {}
@@ -1667,6 +1895,28 @@ export class KritzelEditor {
                         }
                     }
                 }
+            }, {
+                "method": "localeChange",
+                "name": "localeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LocaleCode",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | string & {}",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                }
             }, {
                 "method": "viewportChange",
                 "name": "viewportChange",
@@ -3406,6 +3656,155 @@ export class KritzelEditor {
                     "text": "",
                     "tags": []
                 }
+            },
+            "setLocale": {
+                "complexType": {
+                    "signature": "(code: LocaleCode) => Promise<void>",
+                    "parameters": [{
+                            "name": "code",
+                            "type": "(string & {}) | \"en\" | \"de\" | \"fr\"",
+                            "docs": "- The locale code to activate, e.g. 'de'."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the active locale (language) and re-renders the UI.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "code - The locale code to activate, e.g. 'de'."
+                        }]
+                }
+            },
+            "getLocale": {
+                "complexType": {
+                    "signature": "() => Promise<LocaleCode>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<LocaleCode>"
+                },
+                "docs": {
+                    "text": "Gets the currently active locale code.",
+                    "tags": []
+                }
+            },
+            "getAvailableLocales": {
+                "complexType": {
+                    "signature": "() => Promise<LocaleCode[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<LocaleCode[]>"
+                },
+                "docs": {
+                    "text": "Gets the list of available locale codes (built-in and registered).",
+                    "tags": []
+                }
+            },
+            "registerLocales": {
+                "complexType": {
+                    "signature": "(locales: KritzelLocale[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "locales",
+                            "type": "KritzelLocale[]",
+                            "docs": "- The locale definitions to register."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelLocale": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelLocale",
+                            "referenceLocation": "KritzelLocale"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Registers additional locale definitions (with optional partial term overrides).",
+                    "tags": [{
+                            "name": "param",
+                            "text": "locales - The locale definitions to register."
+                        }]
+                }
+            },
+            "t": {
+                "complexType": {
+                    "signature": "(key: KritzelTermKey, vars?: KritzelTermVars) => Promise<string>",
+                    "parameters": [{
+                            "name": "key",
+                            "type": "keyof KritzelTerms",
+                            "docs": "- The term key to resolve."
+                        }, {
+                            "name": "vars",
+                            "type": "{ [x: string]: string | number; }",
+                            "docs": "- Optional values for `{placeholder}` interpolation."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        },
+                        "KritzelTermVars": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermVars",
+                            "referenceLocation": "KritzelTermVars"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Resolves a term key to its translated string for the active locale.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "key - The term key to resolve."
+                        }, {
+                            "name": "param",
+                            "text": "vars - Optional values for `{placeholder}` interpolation."
+                        }]
+                }
             }
         };
     }
@@ -3432,6 +3831,9 @@ export class KritzelEditor {
             }, {
                 "propName": "themes",
                 "methodName": "onThemesChange"
+            }, {
+                "propName": "locale",
+                "methodName": "onLocaleChange"
             }];
     }
     static get listeners() {