kritzel-stencil 0.3.16 → 0.3.17

package/dist/esm/{kritzel-active-users_42.entry.js → kritzel-active-users_44.entry.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-Dhio9uis.js';
-import { c as KritzelPath, e as KritzelLine, G as KritzelColorHelper, J as KritzelDevicesHelper, o as KritzelSelectionTool, l as KritzelTextTool, L as KritzelMouseButton, M as DEFAULT_STROKE_SIZES, N as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, h as KritzelBrushTool, j as KritzelEraserTool, u as DEFAULT_LINE_TOOL_CONFIG, i as KritzelLineTool, m as KritzelShapeTool, t as DEFAULT_TEXT_CONFIG, k as KritzelImageTool, y as KritzelAlignment, v as DEFAULT_ASSET_STORAGE_CONFIG, T as ThemeHelper, x as darkTheme, w as lightTheme, O as KritzelSelectionGroup, P as KritzelSelectionBox, Q as KritzelIconRegistry, R as KritzelKeyboardHelper, U as KritzelBaseHandler, K as KritzelBaseObject, q as KritzelWorkspace, f as KritzelGroup, d as KritzelImage, g as KritzelShape, b as KritzelText, z as runMigrations, F as CURRENT_WORKSPACE_SCHEMA_VERSION, C as WORKSPACE_MIGRATIONS, E as CURRENT_APP_STATE_SCHEMA_VERSION, B as APP_STATE_MIGRATIONS, V as ObjectHelper, n as KritzelCursorHelper, r as KritzelAnchorManager, s as KritzelThemeManager, p as KritzelAssetResolver, X as KritzelClassHelper, Y as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION } from './schema.constants-DiCnmIYK.js';
+import { c as KritzelPath, e as KritzelLine, P as KritzelColorHelper, Q as KritzelDevicesHelper, p as KritzelSelectionTool, m as KritzelTextTool, R as KritzelMouseButton, T as DEFAULT_STROKE_SIZES, U as DEFAULT_COLOR_PALETTE, S as ShapeType, D as DEFAULT_BRUSH_CONFIG, i as KritzelBrushTool, k as KritzelEraserTool, x as DEFAULT_LINE_TOOL_CONFIG, j as KritzelLineTool, n as KritzelShapeTool, w as DEFAULT_TEXT_CONFIG, l as KritzelImageTool, G as KritzelAlignment, y as DEFAULT_ASSET_STORAGE_CONFIG, V as ThemeHelper, B as darkTheme, z as lightTheme, X as KritzelSelectionGroup, Y as KritzelSelectionBox, Z as KritzelIconRegistry, _ as KritzelKeyboardHelper, $ as KritzelBaseHandler, K as KritzelBaseObject, a0 as KritzelMathHelper, r as KritzelWorkspace, f as KritzelGroup, d as KritzelImage, g as KritzelShape, b as KritzelText, J as runMigrations, O as CURRENT_WORKSPACE_SCHEMA_VERSION, M as WORKSPACE_MIGRATIONS, N as CURRENT_APP_STATE_SCHEMA_VERSION, L as APP_STATE_MIGRATIONS, a1 as ObjectHelper, o as KritzelCursorHelper, s as KritzelAnchorManager, t as KritzelThemeManager, u as KritzelLocalizationManager, v as KritzelLicenseManager, q as KritzelAssetResolver, a2 as KritzelClassHelper, a3 as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION } from './schema.constants-DchTXG3V.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
@@ -132,16 +132,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '571bd5b92adc7c65b96ded37b8daf5ed79905361', style: containerStyles, class: {
+        return (h(Host, { key: '0d372a5443f41835c2e8e5b33b58bcb6c1292e89', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '1065850b4575fda4637ab61ce07c6dfc97f14a90', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'deb5f12115dd28b4b4ab2157cb2bbc9e48bb2a3f', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'a6d9c9dd2eac6e44c731a878e2460017da7fb0b7', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '9e9d33cdd213649071b76cb0875008562b30f6a1', class: "avatar-default" }, h("svg", { key: '5d0be5c503a8944b45de239f08e6f40378c2dc5e', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9264549c9b8abbdea74cd707d6f77bcfdde6459d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '6fc12f2d32923f33df5a8ec743d51434f67e6934', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd803b385f7eaa0659d7452231bfd46b1634f204d', class: "avatar-default" }, h("svg", { key: 'a3275ab33f58440abcd15c296d9c027dfab6495c', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31ac7e63fe6b1778c3d0cbd71b5c85791b79d084', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get watchers() { return {
         "user": [{
@@ -451,7 +451,7 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: 'b623a9a4e4b8fce50346771488a59c3a646c289e' }, h("button", { key: 'b2f6b257975639d33362f1038b61e5147963f189', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '22f34fc201a865b6d9b21775a349d0e185727d48', name: "chevrons-left" }))));
+        return (h(Host, { key: '5ef034156f28bdd1861d99343d51a237498db46b' }, h("button", { key: 'caa1c08d04f1a3a84d694b7df5d318a686d3a1fb', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '0c7cf5e18294ade600be3052ca7c57c8d933a736', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
@@ -478,11 +478,11 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'c915db75630392741de404f07265a391330e54ca' }, h("button", { key: '50248ee1ed5862c9ea72b4f7cf7d564d03b5b14e', type: this.type, class: {
+        return (h(Host, { key: 'aa366907b97e648ac73182a43d099baf457e0ba3' }, h("button", { key: 'e80875396a791606461b1a20e0f7e1c896f54073', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'd595cd819c7c0a3550e468ce65d4e2c28cc02164' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8f4e57a73837adfbf91f678c54558fe4c737aa91' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
@@ -530,13 +530,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'c4c1fe2559aca61557ff2e8154f4d46ce3511b30' }, h("div", { key: '158c243018763a9609e0a056229263864a5e4d13', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '21ce0ecb616266ec4953468ae9bbe0b72259c2da' }, h("div", { key: '02c8e8684b3b0819755efd1f160bdee662428ddd', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: 'afa21c72b17ab5fb4b16521b91dbe7e9162d05f8', class: {
+            } }, h("div", { key: '0063e9a701994869adbd3022b5ace542e85dfd95', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -592,7 +592,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'fc57d77d7c4cfd2aa2a02a70b8991858bb8cf61b' }, h("div", { key: '4fd10783609882f453ce95f5114acf799f21ec52', class: {
+        return (h(Host, { key: '9910a765816f45d420ad27c8fc7b02811380783b' }, h("div", { key: '91f3dae04338f55ab21831e4cac65f9d855c58c6', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -939,6 +939,8 @@ const KritzelControls = class {
     isUtilityPanelVisible = true;
     undoState = null;
     theme = 'light';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isControlsReady;
     firstConfig = null;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
@@ -1158,13 +1160,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 (h(Host, { key: '0f40a136a6a9556080d922d346318045794421a8', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: '7247a377d1cb75153e35f5308e81b2bd00d98578', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd543e7575cb30e54d9362eddf7c7221fb8cce5f5', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '075577cd15f3e577a1a216b5b1f1874e82e0d123', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1083380152e9d1b51c35da335533c20ca2ca8fcc', class: "kritzel-controls" }, h("div", { key: '11ef0fb76c30ffda0e30f01d43229ca2142a5854', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '269924a8859aece37ff31202307d4feaecbbde86', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '7fb1041763c7b64917e337d68bbb29b36ed86b9a', class: "kritzel-controls" }, h("div", { key: '8577ed9c6f43a667aaba7dce1da519456c8ad210', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '42f8f2b85055705674f9e319056bd48856dbd197', 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);
@@ -1194,10 +1196,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) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '8b97a5bba3ac4992482e8f433d7ba6197918a914', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '20007273e0f701193502320cf58099cbaedb834e', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'd9adef8c2acc8d9b9d745174050ce78960b89b58', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7605bbd2b6335c89c57aa68952293f26efad6b4b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '27b0f41442215e78b692fa44bb665444a4993b89', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1fb5979b1c531593acf5086861b22b7d78d03e8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '2901fc2507e5b02fbd603bd2d2a4e2b07e35c970', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '653e6a9b49146a2f297dbb5b9debe8709efd59ad', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '6fae38444dff1978647e111643ee6e29c9cc1653', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '951a52f625c929634de5102b83a14ad0cf1abc8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1206,7 +1208,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '3713ef344630f6b4d88df2e83992018859ddb18c', class: "color-container" }, h("kritzel-color", { key: 'c2679f68efae77c6daeb98be9e03d5320d51a73a', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'b8fff73b9055e86b312a9f0798fff4177cf85970', class: "color-container" }, h("kritzel-color", { key: 'fcd474e557d887f94383b7e583ab1c95a675ce23', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -1238,13 +1240,15 @@ const KritzelCurrentUser = class {
      * Avatar size in pixels
      */
     avatarSize = 40;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     dialogRef;
     handleAvatarClick = (event) => {
         event.stopPropagation();
         this.dialogRef?.open();
     };
     render() {
-        return (h(Host, { key: 'a735cb9f16f4898fde0b52573affa2d270a8f1de' }, h("kritzel-avatar", { key: 'd449a515182718ab4ef3b26b2277696bbc7ab46f', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '3542f6df43c9924218e344f70bdc398c74a8eae6', ref: el => (this.dialogRef = el), user: this.user })));
+        return (h(Host, { key: '7e45048e532db84347e2531de2df19f5537d62ca' }, h("kritzel-avatar", { key: '5a67d1dbae041e16cdaeaf4bc678b6b00c56f442', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '8e35219e282811b8bbafb058c02c8c0474574009', ref: el => (this.dialogRef = el), user: this.user, terms: this.terms })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1257,6 +1261,8 @@ const KritzelCurrentUserDialog = class {
     }
     get host() { return getElement(this); }
     user;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isDialogOpen = false;
     async open() {
         this.isDialogOpen = true;
@@ -1276,7 +1282,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: '40c1a1bed0ddf02f9835199b5f7d2363e4d1902b' }, h("kritzel-dialog", { key: 'a83c09eac66ddf51155591a32245e3f15e34943e', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '14f7100a881ee3c5ba6b672d509bf3a9161ccd62', class: "user-info" }, h("kritzel-avatar", { key: 'e3552a80db81db4c26f81c6cc699363afa6153ea', user: this.user, size: 80 }), displayName && h("div", { key: 'c54164be605ac2bd2fc8bac6bb4481f820119028', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'e6af7c44e45443eb24be0777768de96b0e3d249e', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: '7c9e5c19249d400e2d670c60f5d6716c742adc62' }, h("kritzel-dialog", { key: '811da6bff0ce03914f545dd289878ba04924e85c', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '03a101b04d61882732547d91e81a2bacb3aa4df8', class: "user-info" }, h("kritzel-avatar", { key: '4033d0e2322d7a25231f01115ec33f20e4fb0d4c', user: this.user, size: 80 }), displayName && h("div", { key: 'cf3a3aecb84152736c9de119f82a79f1b2b32f6f', class: "user-name" }, displayName), this.user?.email && h("div", { key: '5725d71dd80468c64a2b0bb1d9d967232513fb63', class: "user-email" }, this.user.email)))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -2155,6 +2161,8 @@ const DEFAULT_SHAPE_CONFIG = {
 
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
+/** Destination opened when the "Powered by Kritzel" watermark is clicked. */
+const KRITZEL_WEBSITE_URL = 'https://kritzel.io';
 
 /**
  * Default sync configuration - None
@@ -2163,7 +2171,7 @@ const DEFAULT_SYNC_CONFIG = {
     providers: [],
 };
 
-const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -2176,6 +2184,7 @@ const KritzelEditor = class {
         this.objectsUpdated = createEvent(this, "objectsUpdated");
         this.undoStateChange = createEvent(this, "undoStateChange");
         this.themeChange = createEvent(this, "themeChange");
+        this.localeChange = createEvent(this, "localeChange");
         this.viewportChange = createEvent(this, "viewportChange");
         this.logout = createEvent(this, "logout");
         this.login = createEvent(this, "login");
@@ -2190,7 +2199,6 @@ const KritzelEditor = class {
     viewportBoundaryRight = Infinity;
     viewportBoundaryTop = -Infinity;
     viewportBoundaryBottom = Infinity;
-    wheelEnabled = true;
     debugInfo = {
         showViewportInfo: false,
         showObjectInfo: false,
@@ -2259,66 +2267,66 @@ const KritzelEditor = class {
     ];
     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();
@@ -2329,23 +2337,34 @@ const KritzelEditor = class {
             ],
         },
         {
-            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;
@@ -2367,6 +2386,7 @@ const KritzelEditor = class {
     objectsUpdated;
     undoStateChange;
     themeChange;
+    localeChange;
     viewportChange;
     logout;
     login;
@@ -2380,6 +2400,11 @@ const KritzelEditor = class {
     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;
@@ -2443,6 +2468,25 @@ const KritzelEditor = class {
     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();
@@ -2701,6 +2745,9 @@ const KritzelEditor = class {
         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) {
@@ -2751,8 +2798,15 @@ const KritzelEditor = class {
     }
     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);
@@ -2762,6 +2816,10 @@ const KritzelEditor = class {
         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;
@@ -2776,7 +2834,7 @@ const KritzelEditor = class {
         return [
             {
                 id: 'share',
-                label: 'Share',
+                label: this.resolvedTerms['menu.share'] ?? 'Share',
                 icon: 'share',
                 action: () => {
                     if (!this.isLoggedIn && this.loginConfig) {
@@ -2788,7 +2846,7 @@ const KritzelEditor = class {
             },
             {
                 id: 'export',
-                label: 'Export',
+                label: this.resolvedTerms['menu.export'] ?? 'Export',
                 icon: 'upload',
                 action: async () => {
                     const preview = await this.engineRef.getScreenshot('png');
@@ -2797,19 +2855,19 @@ const KritzelEditor = class {
             },
             {
                 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,
@@ -2849,6 +2907,41 @@ const KritzelEditor = class {
     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';
     }
@@ -2869,6 +2962,9 @@ const KritzelEditor = class {
                 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;
                 }
@@ -2899,6 +2995,7 @@ const KritzelEditor = class {
             scaleMax: this.scaleMax,
             lockDrawingScale: this.lockDrawingScale,
             theme: this.theme,
+            locale: this.locale,
             viewportBoundaryLeft: this.viewportBoundaryLeft,
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
@@ -2952,35 +3049,35 @@ const KritzelEditor = class {
         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 watchers() { return {
         "isEngineReady": [{
@@ -3003,6 +3100,9 @@ const KritzelEditor = class {
             }],
         "themes": [{
                 "onThemesChange": 0
+            }],
+        "locale": [{
+                "onLocaleChange": 0
             }]
     }; }
 };
@@ -21257,6 +21357,28 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         this.globalContextMenuItems = globalContextMenuItems;
         this.objectContextMenuItems = objectContextMenuItems;
     }
+    /**
+     * Resolves the active context menu items for display, translating each item's
+     * `label` through the current locale. When the label is a known
+     * {@link KritzelTermKey} the translation is used; any other string is passed
+     * through unchanged. Runs at menu-open time so the labels reflect the locale
+     * active at that moment.
+     * @returns A new array of items with resolved labels.
+     */
+    resolveLabels(items) {
+        return items.map(item => ({
+            ...item,
+            label: this._core.localizationManager.translate(item.label),
+            children: item.children ? this.resolveLabels(item.children) : undefined,
+        }));
+    }
+    /**
+     * Gets the active context menu items (object or global) with localized labels.
+     */
+    getResolvedContextMenuItems() {
+        const items = this._core.store.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
+        return this.resolveLabels(items);
+    }
     /**
      * Handles the context menu event (typically triggered by right-click).
      * This method performs the following operations:
@@ -21300,7 +21422,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
             this._core.addSelectionGroup(selectionGroup);
             this._core.rerender();
         }
-        this._core.store.state.contextMenuItems = this._core.store.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
+        this._core.store.state.contextMenuItems = this.getResolvedContextMenuItems();
         const clickX = event.clientX - this._core.store.offsetX;
         const clickY = event.clientY - this._core.store.offsetY;
         const { translateX, translateY, scale } = this._core.store.state;
@@ -21356,7 +21478,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
                 this._core.addSelectionGroup(selectionGroup);
             }
         }
-        this._core.store.state.contextMenuItems = this._core.store.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
+        this._core.store.state.contextMenuItems = this.getResolvedContextMenuItems();
         this._core.store.state.contextMenuWorldX = x;
         this._core.store.state.contextMenuWorldY = y;
         const { translateX, translateY, scale } = this._core.store.state;
@@ -21403,6 +21525,7 @@ class KritzelCustomElement extends KritzelBaseObject {
         if (config) {
             this.translateX = config.translateX || 0;
             this.translateY = config.translateY || 0;
+            this.rotation = KritzelMathHelper.degreesToRadians(config.rotation ?? 0);
             this.scale = config.scale || 1;
             this.element = config.element;
             this.height = config.height || 0;
@@ -23969,6 +24092,10 @@ class KritzelCore {
     _cursorManager;
     /** Manager for theme styling */
     _themeManager;
+    /** Manager for localization / translated UI strings */
+    _localizationManager;
+    /** Manager for license validation and watermark gating */
+    _licenseManager;
     /** Per-core registry of drawing tools (one instance per editor). */
     _toolRegistry;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances */
@@ -24017,6 +24144,20 @@ class KritzelCore {
     get themeManager() {
         return this._themeManager;
     }
+    /**
+     * Gets the localization manager.
+     * @returns The KritzelLocalizationManager for resolving translated UI strings
+     */
+    get localizationManager() {
+        return this._localizationManager;
+    }
+    /**
+     * Gets the license manager.
+     * @returns The KritzelLicenseManager for validating licenses and gating the watermark
+     */
+    get licenseManager() {
+        return this._licenseManager;
+    }
     /**
      * Gets the tool registry scoped to this core instance.
      * @returns The KritzelToolRegistry owned by this core
@@ -24069,6 +24210,8 @@ class KritzelCore {
         this._anchorManager = new KritzelAnchorManager(this);
         this._cursorManager = new KritzelCursorManager(this);
         this._themeManager = new KritzelThemeManager(this);
+        this._localizationManager = new KritzelLocalizationManager(this);
+        this._licenseManager = new KritzelLicenseManager(this);
         this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new KritzelAssetResolver();
     }
@@ -24104,6 +24247,8 @@ class KritzelCore {
         this._editorId = editorId;
         // Re-create theme manager so it picks up the new storage key
         this._themeManager = new KritzelThemeManager(this);
+        // Re-create localization manager so it picks up the new storage key
+        this._localizationManager = new KritzelLocalizationManager(this);
     }
     /**
      * Initializes the Yjs document for collaborative editing.
@@ -25250,7 +25395,7 @@ class KritzelSvgExportHelper {
      * @returns SVG document string
      */
     static generateSvg(objects, options = {}) {
-        const { theme, padding = 0, includeXmlDeclaration = true } = options;
+        const { theme, padding = 0, includeXmlDeclaration = true, rasterSafeForCanvas = false, imageDataUrls } = options;
         if (!objects || objects.length === 0) {
             return '';
         }
@@ -25270,7 +25415,7 @@ class KritzelSvgExportHelper {
         // Generate SVG elements for each object
         const elements = objects
             .sort((a, b) => a.zIndex - b.zIndex)
-            .map(obj => this.objectToSvgElement(obj, theme))
+            .map(obj => this.objectToSvgElement(obj, theme, imageDataUrls, rasterSafeForCanvas))
             .filter(Boolean)
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
@@ -25296,6 +25441,102 @@ class KritzelSvgExportHelper {
         }
         return result;
     }
+    /**
+     * Resolves every image referenced by the given objects (including those
+     * nested inside groups) to an inlined `data:` URL, keyed by object id.
+     *
+     * This is required for export flows that rasterize the SVG (e.g. PNG
+     * export): an SVG loaded into an `<img>` element will NOT load external
+     * or `blob:` resources, so a `<image href="blob:...">` renders as a
+     * broken-image placeholder. Embedding the bytes as a base64 `data:` URL
+     * makes the image self-contained and survive rasterization.
+     *
+     * Resolution is best-effort: images that fail to resolve are simply
+     * omitted from the map, and the SVG falls back to whatever `href` the
+     * synchronous path would have produced.
+     * @param objects - Objects to inline images for
+     * @param assetResolver - Resolver used to fetch asset bytes; optional
+     * @returns Map of image object id -> inlined `data:` URL
+     */
+    static async resolveImageDataUrls(objects, assetResolver) {
+        const dataUrls = new Map();
+        if (!objects || objects.length === 0) {
+            return dataUrls;
+        }
+        const images = this.flattenObjects(objects).filter((obj) => KritzelClassHelper.isInstanceOf(obj, 'KritzelImage'));
+        await Promise.all(images.map(async (image) => {
+            // Legacy inline data URL is already embeddable as-is.
+            if (image.src?.startsWith('data:')) {
+                dataUrls.set(image.id, image.src);
+                return;
+            }
+            // A resolvedSrc that is itself a data URL can be embedded directly.
+            if (image.resolvedSrc?.startsWith('data:')) {
+                dataUrls.set(image.id, image.resolvedSrc);
+                return;
+            }
+            if (!image.assetId || !assetResolver) {
+                return;
+            }
+            try {
+                const blob = await assetResolver.fetchBlob(image.assetId);
+                dataUrls.set(image.id, await this.blobToDataUrl(blob));
+            }
+            catch (err) {
+                console.warn(`[KritzelSvgExportHelper] Failed to inline image asset ${image.assetId} for export:`, err);
+            }
+        }));
+        return dataUrls;
+    }
+    /**
+     * Reads a Blob into a base64 `data:` URL.
+     * @param blob - The blob to encode
+     * @returns Promise resolving to the data URL string
+     */
+    static async blobToDataUrl(blob) {
+        // Prefer FileReader in browser-like runtimes for efficiency.
+        const hasFileReader = typeof FileReader !== 'undefined';
+        if (hasFileReader) {
+            try {
+                return await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        if (typeof reader.result === 'string') {
+                            resolve(reader.result);
+                            return;
+                        }
+                        reject(new Error('FileReader result is not a string'));
+                    };
+                    reader.onerror = () => reject(reader.error ?? new Error('Failed to read blob as data URL'));
+                    reader.readAsDataURL(blob);
+                });
+            }
+            catch {
+                // Fall through to the ArrayBuffer-based encoder.
+            }
+        }
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        const mimeType = blob.type || 'application/octet-stream';
+        return `data:${mimeType};base64,${this.uint8ToBase64(bytes)}`;
+    }
+    /**
+     * Encodes a byte array to base64 across browser and Node-like runtimes.
+     */
+    static uint8ToBase64(bytes) {
+        if (typeof Buffer !== 'undefined') {
+            return Buffer.from(bytes).toString('base64');
+        }
+        let binary = '';
+        const chunkSize = 0x8000;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, Math.min(i + chunkSize, bytes.length));
+            binary += String.fromCharCode(...chunk);
+        }
+        if (typeof btoa === 'function') {
+            return btoa(binary);
+        }
+        throw new Error('No base64 encoder available in this runtime');
+    }
     /**
      * Collects SVG defs (markers, patterns, etc.) needed by the objects.
      * @param objects - Objects to collect defs for
@@ -25340,9 +25581,10 @@ class KritzelSvgExportHelper {
      * Converts a Kritzel object to its SVG element representation.
      * @param object - The object to convert
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string, or empty string if object type is not supported
      */
-    static objectToSvgElement(object, theme) {
+    static objectToSvgElement(object, theme, imageDataUrls, rasterSafeForCanvas = false) {
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
             return this.pathToSvg(object, theme);
         }
@@ -25353,13 +25595,13 @@ class KritzelSvgExportHelper {
             return this.shapeToSvg(object, theme);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
-            return this.textToSvg(object, theme);
+            return this.textToSvg(object, theme, rasterSafeForCanvas);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
-            return this.imageToSvg(object);
+            return this.imageToSvg(object, imageDataUrls);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
-            return this.groupToSvg(object, theme);
+            return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
         }
         return '';
     }
@@ -25374,9 +25616,10 @@ class KritzelSvgExportHelper {
         const fill = KritzelColorHelper.resolveThemeColor(path.fill, theme);
         const stroke = KritzelColorHelper.resolveThemeColor(path.stroke, theme);
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
+        const scale = this.getObjectScale(path);
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
         return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / path.scale}" height="${path.totalHeight / path.scale}" overflow="visible">
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
       <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
     </svg>
   </g>`;
@@ -25391,10 +25634,11 @@ class KritzelSvgExportHelper {
         const transform = this.buildTransform(line);
         const stroke = KritzelColorHelper.resolveThemeColor(line.stroke, theme);
         const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
+        const scale = this.getObjectScale(line);
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
         return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / line.scale}" height="${line.totalHeight / line.scale}" overflow="visible">
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
       <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
     </svg>
   </g>`;
@@ -25410,6 +25654,7 @@ class KritzelSvgExportHelper {
         const fill = KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
         const stroke = KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
         const opacity = shape.opacity !== 1 ? ` opacity="${shape.opacity}"` : '';
+        const scale = this.getObjectScale(shape);
         // Get the SVG path for the shape
         const pathD = shape.getSvgPath();
         // Handle text content if present
@@ -25428,7 +25673,7 @@ class KritzelSvgExportHelper {
             }
         }
         return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / shape.scale}" height="${shape.totalHeight / shape.scale}" overflow="visible" preserveAspectRatio="none">
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
       <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
     </svg>
   </g>`;
@@ -25439,45 +25684,85 @@ class KritzelSvgExportHelper {
      * @param theme - Theme for color resolution
      * @returns SVG element string
      */
-    static textToSvg(text, theme) {
+    static textToSvg(text, theme, rasterSafeForCanvas = false) {
+        if (rasterSafeForCanvas) {
+            return this.textToSvgRasterSafe(text, theme);
+        }
         const transform = this.buildTransform(text);
         const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
         const fontColor = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
         const bgColor = KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
         // Convert ProseMirror content to HTML
         const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
         // Calculate dimensions accounting for scale
-        const width = text.totalWidth / text.scale;
-        const height = text.totalHeight / text.scale;
+        const width = text.totalWidth / scale;
+        const height = text.totalHeight / scale;
         return `<g transform="${transform}"${opacity}>
     <foreignObject x="0" y="0" width="${width}" height="${height}">
       <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${text.fontSize}pt; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; transform: scale(${text.scaleFactor}); transform-origin: top left; white-space: pre-wrap; word-wrap: break-word;">
         ${htmlContent}
       </div>
     </foreignObject>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelText to SVG using pure SVG text primitives.
+     * This path avoids `<foreignObject>`, which taints canvases when the
+     * generated SVG is rasterized through `<img>` and `drawImage`.
+     */
+    static textToSvgRasterSafe(text, theme) {
+        const transform = this.buildTransform(text);
+        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
+        const fontColor = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
+        const width = text.totalWidth / scale;
+        const height = text.totalHeight / scale;
+        const lines = this.prosemirrorToPlainTextLines(text.content);
+        const resolvedLines = lines.length > 0 ? lines : [''];
+        const resolvedFontSize = Math.max(1, text.fontSize * (text.scaleFactor || 1));
+        const lineHeight = resolvedFontSize * 1.2;
+        const startY = resolvedFontSize;
+        const bgRect = bgColor && bgColor !== 'transparent'
+            ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
+            : '';
+        const tspans = resolvedLines
+            .map((line, index) => {
+            const y = startY + index * lineHeight;
+            return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
+        })
+            .join('');
+        return `<g transform="${transform}"${opacity}>
+    ${bgRect}
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSize}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
      * Converts a KritzelImage to SVG.
      *
-     * Uses `resolvedSrc` when available (populated by the renderer via the
-     * asset resolver), falling back to the legacy inline `src` field for
+     * Prefers an inlined `data:` URL from `imageDataUrls` (keyed by object
+     * id) when provided, so the embedded bytes survive rasterization to
+     * PNG. Falls back to `resolvedSrc` (populated by the renderer via the
+     * asset resolver) and finally the legacy inline `src` field for
      * documents persisted before the asset layer existed.
      *
-     * Note: SVG export is synchronous and cannot await asset bytes from a
-     * remote provider. Callers that need the fully rasterized image bytes
-     * embedded in the exported SVG should pre-resolve assets via
-     * `core.assetResolver.fetchBlob` and inline them as data URLs.
+     * Note: a `blob:` `resolvedSrc` renders correctly on-canvas but becomes
+     * a broken-image placeholder once the SVG is loaded into an `<img>` and
+     * drawn to a canvas. Callers that rasterize the SVG must pass
+     * `imageDataUrls` (see {@link KritzelSvgExportHelper.resolveImageDataUrls}).
      * @param image - The image object
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
-    static imageToSvg(image) {
+    static imageToSvg(image, imageDataUrls) {
         const transform = this.buildTransform(image);
         const opacity = image.opacity !== 1 ? ` opacity="${image.opacity}"` : '';
+        const scale = this.getObjectScale(image);
         // Calculate dimensions
-        const width = image.totalWidth / image.scale;
-        const height = image.totalHeight / image.scale;
-        const href = image.resolvedSrc || image.src || '';
+        const width = image.totalWidth / scale;
+        const height = image.totalHeight / scale;
+        const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
         return `<g transform="${transform}"${opacity}>
     <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
@@ -25486,12 +25771,13 @@ class KritzelSvgExportHelper {
      * Converts a KritzelGroup to SVG by recursively converting children.
      * @param group - The group object
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
-    static groupToSvg(group, theme) {
+    static groupToSvg(group, theme, imageDataUrls, rasterSafeForCanvas = false) {
         const children = group.children
             .sort((a, b) => a.zIndex - b.zIndex)
-            .map(child => this.objectToSvgElement(child, theme))
+            .map(child => this.objectToSvgElement(child, theme, imageDataUrls, rasterSafeForCanvas))
             .filter(Boolean)
             .join('\n    ');
         if (!children) {
@@ -25510,17 +25796,25 @@ class KritzelSvgExportHelper {
      */
     static buildTransform(object) {
         const transforms = [];
+        const scale = this.getObjectScale(object);
         // Translation
         transforms.push(`translate(${object.translateX}, ${object.translateY})`);
         // Rotation around center
         if (object.rotation !== 0) {
-            const centerX = object.totalWidth / 2 / object.scale;
-            const centerY = object.totalHeight / 2 / object.scale;
+            const centerX = object.totalWidth / 2 / scale;
+            const centerY = object.totalHeight / 2 / scale;
             const degrees = object.rotation * (180 / Math.PI);
             transforms.push(`rotate(${degrees}, ${centerX}, ${centerY})`);
         }
         return transforms.join(' ');
     }
+    /**
+     * Returns a safe non-zero scale for export geometry calculations.
+     */
+    static getObjectScale(object) {
+        const scale = object.scale ?? 1;
+        return scale === 0 ? 1 : scale;
+    }
     /**
      * Converts ProseMirror JSON content to HTML string.
      * @param content - ProseMirror document JSON
@@ -25576,6 +25870,54 @@ class KritzelSvgExportHelper {
                 return '';
         }
     }
+    /**
+     * Converts ProseMirror JSON content to plain-text lines.
+     * Used by raster-safe SVG export, which cannot depend on HTML/foreignObject.
+     */
+    static prosemirrorToPlainTextLines(content) {
+        if (!content || !Array.isArray(content.content)) {
+            return [];
+        }
+        const plainText = content.content
+            .map((node) => this.nodeToPlainText(node))
+            .join('')
+            .replace(/\r\n/g, '\n')
+            .replace(/\n+$/, '');
+        if (!plainText) {
+            return [];
+        }
+        return plainText.split('\n');
+    }
+    /**
+     * Converts a ProseMirror node tree into plain text.
+     */
+    static nodeToPlainText(node) {
+        if (!node) {
+            return '';
+        }
+        switch (node.type) {
+            case 'text':
+                return node.text || '';
+            case 'hard_break':
+                return '\n';
+            case 'paragraph': {
+                const paragraph = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `${paragraph}\n`;
+            }
+            case 'list_item': {
+                const item = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `- ${item.trim()}\n`;
+            }
+            default:
+                return Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+        }
+    }
     /**
      * Applies a ProseMirror mark to text.
      * @param text - The text to wrap
@@ -26626,6 +26968,11 @@ const KritzelEngine = class {
     onThemeChange(newValue) {
         this.core.themeManager.setTheme(newValue);
     }
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey;
+    onLicenseKeyChange(newValue) {
+        this.core.licenseManager.validate(newValue);
+    }
     /** An array of available themes for the editor. */
     themes;
     onThemesChange(newValue) {
@@ -26634,6 +26981,25 @@ const KritzelEngine = class {
             this.core.themeManager.applyTheme(this.core.themeManager.currentTheme);
         }
     }
+    /** The current locale (language) code to apply to the editor, e.g. 'en', 'de', 'fr'. */
+    locale = 'en';
+    onLocaleChange(newValue) {
+        this.core.localizationManager.setLocale(newValue);
+    }
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales;
+    onLocalesChange(newValue) {
+        if (newValue && newValue.length > 0) {
+            this.core.localizationManager.registerLocales(newValue);
+            this.core.localizationManager.setLocale(this.locale);
+        }
+    }
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale = 'en';
+    onFallbackLocaleChange(newValue) {
+        this.core.localizationManager.setFallbackLocale(newValue);
+        this.core.rerender();
+    }
     /** Left boundary of the viewport in world coordinates. Objects beyond this X position cannot be panned to. */
     viewportBoundaryLeft = -Infinity;
     onViewportBoundaryLeftChange(newValue) {
@@ -26661,8 +27027,10 @@ const KritzelEngine = class {
             this.core.store.state.debugInfo = newValue;
         }
     }
-    /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
-    wheelEnabled = true;
+    /** When false, non-modified wheel events do not pan the viewport. */
+    isPanningEnabled = true;
+    /** When false, Ctrl+wheel events do not zoom the viewport. */
+    isZoomingEnabled = true;
     /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
     isLoading = false;
     onIsLoadingChange() {
@@ -26705,13 +27073,19 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
-        if (!this.wheelEnabled) {
-            return;
-        }
         if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
-        this.viewport.handleWheel(ev);
+        if (ev.ctrlKey) {
+            if (this.isZoomingEnabled) {
+                this.viewport.handleWheel(ev);
+            }
+        }
+        else {
+            if (this.isPanningEnabled) {
+                this.viewport.handleWheel(ev);
+            }
+        }
         this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
@@ -27547,7 +27921,7 @@ const KritzelEngine = class {
     /**
      * Generates an SVG string from the currently selected objects.
      * Creates clean, standards-compliant SVG markup by directly serializing object properties.
-     * @param options - Optional export settings (theme, padding).
+     * @param options - Optional export settings (theme, padding, raster-safe mode for canvas export).
      * @returns SVG markup string, or null if no objects are selected.
      */
     async getSelectedObjectsAsSvgString(options) {
@@ -27556,10 +27930,16 @@ const KritzelEngine = class {
             return null;
         }
         const theme = options?.theme ?? this.core.themeManager.getStoredTheme();
+        // Inline image bytes as data URLs so they survive both standalone SVG
+        // files and rasterization to PNG (a `blob:` href is not loaded when an
+        // SVG is drawn into a canvas, which otherwise yields a broken image).
+        const imageDataUrls = await KritzelSvgExportHelper.resolveImageDataUrls(selectedObjects, this.core.assetResolver);
         return KritzelSvgExportHelper.generateSvg(selectedObjects, {
             theme,
             padding: options?.padding ?? 0,
             includeXmlDeclaration: true,
+            rasterSafeForCanvas: options?.rasterSafeForCanvas ?? false,
+            imageDataUrls,
         });
     }
     /**
@@ -27598,6 +27978,9 @@ const KritzelEngine = class {
         const svgString = await this.getSelectedObjectsAsSvgString({
             theme: options?.theme,
             padding: options?.padding,
+            // Avoid foreignObject-based text serialization, which taints the
+            // canvas in SVG->PNG conversion paths.
+            rasterSafeForCanvas: true,
         });
         if (!svgString) {
             return null;
@@ -27950,6 +28333,55 @@ const KritzelEngine = class {
             return null;
         }
     }
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    async registerLocales(locales) {
+        this.core.localizationManager.registerLocales(locales);
+        this.core.localizationManager.setLocale(this.core.localizationManager.currentLocale);
+    }
+    /**
+     * 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;
+        this.core.localizationManager.setLocale(code);
+    }
+    /**
+     * Gets the currently active locale code.
+     */
+    async getLocale() {
+        return this.core.localizationManager.currentLocale;
+    }
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    async getAvailableLocales() {
+        return this.core.localizationManager.getAvailableLocales();
+    }
+    /**
+     * Gets the list of available locales as `{ code, label }` options for a selector.
+     */
+    async getAvailableLocaleOptions() {
+        return this.core.localizationManager.getAvailableLocaleOptions();
+    }
+    /**
+     * 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.core.localizationManager.translate(key, vars);
+    }
+    /**
+     * Resolves every known term key for the active locale into a flat map.
+     * Useful for UI layers that need to localize many strings at once.
+     */
+    async getResolvedTerms() {
+        return this.core.localizationManager.getAllTerms();
+    }
     core;
     viewport;
     contextMenuHandler;
@@ -28040,6 +28472,7 @@ const KritzelEngine = class {
         // Clean up managers
         this.core.cursorManager.cleanup();
         this.core.themeManager.cleanup();
+        this.core.licenseManager.destroy();
     }
     componentWillLoad() {
         this.core.setEditorId(this.editorId);
@@ -28048,6 +28481,13 @@ const KritzelEngine = class {
         }
         const editorElement = this.host.closest('kritzel-editor');
         this.core.themeManager.injectThemeEarly(editorElement || this.host);
+        if (this.locales && this.locales.length > 0) {
+            this.core.localizationManager.registerLocales(this.locales);
+        }
+        this.core.localizationManager.setFallbackLocale(this.fallbackLocale);
+        this.core.localizationManager.setLocale(this.locale);
+        this.core.licenseManager.validate(this.licenseKey);
+        this.core.licenseManager.startPeriodicValidation();
         this.core.setUser(this.user);
         this.validateScaleMax(this.scaleMax);
         this.validateScaleMin(this.scaleMin);
@@ -28352,7 +28792,7 @@ const KritzelEngine = class {
     }
     render() {
         if (!this.viewport) {
-            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
+            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), this.core.localizationManager.translate('engine.loading')))));
         }
         const currentTheme = this.core.themeManager.getStoredTheme();
         const computedStyle = window.getComputedStyle(this.host);
@@ -28790,7 +29230,7 @@ const KritzelEngine = class {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && (h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') }))));
     }
     static get watchers() { return {
         "workspace": [{
@@ -28832,9 +29272,21 @@ const KritzelEngine = class {
         "theme": [{
                 "onThemeChange": 0
             }],
+        "licenseKey": [{
+                "onLicenseKeyChange": 0
+            }],
         "themes": [{
                 "onThemesChange": 0
             }],
+        "locale": [{
+                "onLocaleChange": 0
+            }],
+        "locales": [{
+                "onLocalesChange": 0
+            }],
+        "fallbackLocale": [{
+                "onFallbackLocaleChange": 0
+            }],
         "viewportBoundaryLeft": [{
                 "onViewportBoundaryLeftChange": 0
             }],
@@ -28870,6 +29322,8 @@ const KritzelExport = class {
      * The name of the current workspace, used as default filename
      */
     workspaceName = 'workspace';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isDialogOpen = false;
     previewUrl;
     isLoading = false;
@@ -28879,10 +29333,12 @@ const KritzelExport = class {
     exportPng;
     exportSvg;
     exportJson;
-    tabs = [
-        { id: 'viewport', label: 'Export Viewport' },
-        { id: 'workspace', label: 'Export Workspace' },
-    ];
+    get tabs() {
+        return [
+            { id: 'viewport', label: this.terms['export.tabs.viewport'] ?? 'Export Viewport' },
+            { id: 'workspace', label: this.terms['export.tabs.workspace'] ?? 'Export Workspace' },
+        ];
+    }
     viewportFormatOptions = [
         { value: 'png', label: 'PNG' },
         { value: 'svg', label: 'SVG' },
@@ -28925,13 +29381,13 @@ const KritzelExport = class {
         this.closeDialog();
     };
     renderViewportExport() {
-        return (h("div", { class: "export-tab-content" }, this.previewUrl && (h("div", { class: "preview-container" }, h("img", { src: this.previewUrl, alt: "Viewport Preview" }))), h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: `.${this.viewportExportFormat}`, onValueChange: this.handleFilenameChange }), h("div", { class: "format-selection" }, h("label", null, "Format"), h("kritzel-dropdown", { options: this.viewportFormatOptions, value: this.viewportExportFormat, forceOpenDirection: "up", onValueChanged: this.handleViewportFormatChange }))));
+        return (h("div", { class: "export-tab-content" }, this.previewUrl && (h("div", { class: "preview-container" }, h("img", { src: this.previewUrl, alt: "Viewport Preview" }))), h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: `.${this.viewportExportFormat}`, onValueChange: this.handleFilenameChange }), h("div", { class: "format-selection" }, h("label", null, this.terms['export.format.label'] ?? 'Format'), h("kritzel-dropdown", { options: this.viewportFormatOptions, value: this.viewportExportFormat, forceOpenDirection: "up", onValueChanged: this.handleViewportFormatChange }))));
     }
     renderWorkspaceExport() {
-        return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
+        return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: 'efeea781325e672e3f4c1579a50da1c928dc88b5' }, h("kritzel-dialog", { key: '60e27233f484e70fd12bcc0f8a72b89d2f72d596', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e58e1d9804fdc8cb3d4c053ead641e2301b99ea5', class: "export-content" }, h("kritzel-pill-tabs", { key: '409f4c2d64f5477dc57c72a8e32ae0a12dfb7eda', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '7166aee26e0dbbdf6e7348428f7a740614948e5e', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (h(Host, { key: 'ff6ce7e5d3a0a7a024148529f86bf3ec7ffb0333' }, h("kritzel-dialog", { key: '9051d262450af5fbe98959092f6bb0ac25ab43ce', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '21f404a2101d5cf1d24aeeee663d8fb1854b9574', class: "export-content" }, h("kritzel-pill-tabs", { key: '80db6cda288d1b7019387a2f1ade278475ad6e24', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '45809f91ddd63c74f5a4b3a2e266919f244c6109', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -28946,7 +29402,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '6eef9e7df004469faeeaf458d9b9967f94f8536d' }, h("div", { key: '9926c54a57245c40d605077e191f62cebf3700b1', class: "font-preview", style: {
+        return (h(Host, { key: '49c44f7fef61bd7116e63bbe9522b0a0e22de116' }, h("div", { key: '4d130682f67e9c0d758cb6194e6a95f15bceb2ee', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -29021,7 +29477,8 @@ const KritzelFontSize = class {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (h(Host, { key: 'efb5ad516a0ebfea0fee5c78a1d3b4d0af4a6bc9' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '2083b05b3fdc9940c26dd90dbf9e097564ee976d' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -29088,7 +29545,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: '3fd1f42a3ad5edfac752c05f70558ef73bbfebc3' }, h("div", { key: '78468652ce95508090495fefa9381af175415be8', class: "input-container" }, this.label && h("label", { key: 'f368e0370df4848fa9448ed53382152ad8cc8816', class: "input-label" }, this.label), h("div", { key: 'c775c0c0a9f4b6c78ba83ced6237a744b7d3cf20', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'aa5ce0bb5e3c56755bc6134a4328ce6294bda1ff', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '687cec4294e4cd10247db88caf157b33a3f16290', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: '8584ea0fa1a2cf0b9518ea978303837da5bfaf31' }, h("div", { key: 'e9f3ac340f17580221d1a86c8eb913fce2acdf49', class: "input-container" }, this.label && h("label", { key: 'b0d4c0250b07d83a3cd99e0ab18ed672a29de5f0', class: "input-label" }, this.label), h("div", { key: '5044bcff621d6c6850ef3d225608427401b75ebd', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'f8d057840e975d900c37a891268f39edb5128d49', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '4ae299b88798767b13e7126f88d3bd4703c91938', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -29228,7 +29685,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '8cac83db48fef2531f1669c3f601526b1e5cdefa' }, h("kritzel-dialog", { key: '34e7208c8c34550292c2b7503759bf103cfb49a6', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'b0a0d8e0f38adc8d9b9545a02c5fc879f64a24de', class: "login-content" }, this.subtitle && (h("p", { key: 'a51b5f0a8b402aaf979d4bf47c6f9c3ba7e14bfe', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'b6d8f8748eadf1462dd4161f089130b7ded31b59', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '443d817d6eba7b9fcd31cab652293d7c01fc5ffa' }, h("kritzel-dialog", { key: '55214d78abb10f7e2ba789e10d98bf7f3287ff6a', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '31806a7a7c98c2210b7f60d2e0816a8ebc14aff3', class: "login-content" }, this.subtitle && (h("p", { key: '7edb2bc7d25cb3c8589594791822e62d035cd3a6', class: "login-subtitle" }, this.subtitle)), h("div", { key: '3b7731d9cfb98915ebe07b54a07991e03716ce5c', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -29334,15 +29791,15 @@ const KritzelMasterDetail = class {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: '59479b50a3e79ee854c75d78e1a41c1cb0551dab' }, h("div", { key: '0fdfa2d5a28c8f5800b2eeb80c545bdfcd252f6b', class: {
+        return (h(Host, { key: '6429c72aaf47f08ba0bdf5e64829b133339dafab' }, h("div", { key: '02e4616c67843632d2291abe347ee6ef7a660b12', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: 'f055346bdaf528e27136dffc680a5e2c6ddb95a7', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: '35cf3e8f97819a313fa6c57cde0faf05677997eb', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '296ff692092eae9b73c673def66539aa4eb36053', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '72c65aa2825aa373daa3b1d6fd48d8dd84ab25f1', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '2241991dc0da3f53f77dc415e61f026a5734ad48', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '6ecdc24e462faf0d95e295d5536b44ea2f9181c9' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'cc7c69eb7ef02096fb76dbce310740d21019e72f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'd10898c7eb8ec6d993024c7833e1f765a7b93079', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '5395af1bce2b91ade970ad68b1bb87b59e771dff', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '7a5a1ef33081c117f1b16f1da887577bd97d3681' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -29415,7 +29872,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '2d6d46fc8135133ed3e42d65399c8549bc5f6bb5', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b5b3910cc82f7cb451730792fe6e3b3a254036f3', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '4e4e510d2b1b5834ba12739d95e7c33268c005a6', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'ee60d7f4ceefda5fcdcfb64956b20d42b703c231', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -29520,12 +29977,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (h(Host, { key: 'ae5057ce9101dc08e2365455c544914715be468e', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: 'ac91e3534c71074634ba053adc02f924e3fb5e14', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '973fc68404ea95c2f0459565b8a3d124d31ae090', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'f49cf8a96f7394e244ce53d3933137325221d578', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -29565,6 +30022,8 @@ const KritzelMoreMenu = class {
      * Offset Y for the portal positioning
      */
     offsetY = 4;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     /**
      * Emitted when a menu item is selected
      */
@@ -29596,7 +30055,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '93bee9fc14d532a74f1b077098fb0a470655d2fe', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '1783013acb533de9580698f29a7c8ae212b583fc', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '8dc2f098377e78db0bf6efc05daaf02496cef527', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": "More options" }, h("kritzel-icon", { key: '876a229226b0f79f1d5ef5d0b7793f362b884923', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '57f7a69408b00c1bb9e5a08d22e224c6e6bcdea4', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '73a2aacd1b7c0ec79d7fa1695fbc02b1a0bde1b5', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: '1fe90a065ac35d1c8d2e9159d006b09e104750a3', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '734234df7d24f712fa80c3871209142fed2b5ac2', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'a6a56bd5714a8780339390904f0469b395748ba9', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'a4405ef4b8219f28fec095d4a56ac0aa027a9564', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '99aa8a87844232ec079b48f95afab54cbfe51a0b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b6861ae2d553ebf5f5af7448c2b053576a380e8c', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -29694,7 +30153,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '18cd66a764c334a78e2dccd444f448235b41c38c' }, h("div", { key: '73305950e3e840e51466d720a2ef4f834a16adc1', class: "input-container" }, this.label && h("label", { key: 'f9521cb0137f5f8c676ced5c76989d8d03256f68', class: "input-label" }, this.label), h("div", { key: '07581a242db247a833cfa879b90c6da5dd06b116', class: "input-wrapper" }, h("input", { key: '7faa7a9a2c8923e2b2a24c435bc47a03998ac8ad', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'd3920c978a4d97032f5aec550e6ca7e74c9c2e94', class: "spinner-buttons" }, h("button", { key: 'ae27375f0ba66a9ca6cf53fe4a05fa219bf47711', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '8a6e40c12468bb44400c1ad015463c830d0af13e', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '70b8ee3cc3b00d7f83822078f73e0437e24a98aa', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'e26968c85480cbf4cd0f3bd9d6db59f1d6ade88c', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'a8c72dd2909b89ceb3797d0a77e531d0b5374e1d', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '16c95c8cbc90c9d49d081745384c3920620591fb', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '3679786121f22a0aacb1b57701764b0bd0bf02f5' }, h("div", { key: 'e88251c356332f29d93f6a3d82f5154188243e4c', class: "input-container" }, this.label && h("label", { key: 'cb4d64a5acf94794a5876bc61dc13dd8159ad055', class: "input-label" }, this.label), h("div", { key: '9faad300f263e871322b68635feefb08172bd15c', class: "input-wrapper" }, h("input", { key: 'dd58ade6fe8454a3e4f67fddbb135d279f1147a8', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'a959beb441fe2143dc9c1c69347194e024362927', class: "spinner-buttons" }, h("button", { key: '6e2129f36080317e68b6fe1c05e69ea4e655fd20', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '47b5e178f82ef4eb6f2c5d888496ed95683c2f6d', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '6d5eb31ac5829b1e024822786beaafd347081c7e', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5a897f0b29ce89d5bd94327d2055753d06148c89', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '19ff176c07e1c2a18f708debc7c7f3953f2219cb', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '0c1289eb009b62ea36f7397811f553a4e7e669f6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -29733,7 +30192,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '988ad7b9ee8d3825c8577d951c6f1d00efbb45eb' }, h("div", { key: '4dad6a7d422333fbcaff55b2b374550b496a3adc', class: "opacity-container" }, h("div", { key: '7a0ceedd10f2e939dbf189410cc7263c7df498db', class: "slider-wrapper" }, h("input", { key: '453e8fbae27023fcbf3c453445fcb8567cb5db00', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: '9b580f61b9113950b7dff5339879374f7882e1bd' }, h("div", { key: '80fb336580c49d4d7026993499b9c008ac2a4594', class: "opacity-container" }, h("div", { key: 'fcdd8e523d5f2ff4758a4839f2f43cbdabba4c5a', class: "slider-wrapper" }, h("input", { key: '914473676adc7cb8974c55b82ba1abf5b2787288', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));
@@ -30086,7 +30545,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: 'ea4b3c0bdaeb94a1aa03714537c3b68c972ad9c5', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'cd9060be1fbb801e3b72546d465576d5d79b3c82' })));
+        return (h(Host, { key: 'f4ee3156b094ff1126db417f8396ca6cd0eb9aa4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '87812f4ddd50a29c8a76938e8778500a4873a30c' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -30100,7 +30559,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.16';
+const KRITZEL_VERSION = '0.3.17';
 
 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)}`;
 
@@ -30117,13 +30576,7 @@ const DEFAULT_DEBUG_INFO = {
     showSyncProviderInfo: true,
     showMigrationInfo: true,
 };
-const SETTINGS_CATEGORIES = [
-    { id: 'general', label: 'General', icon: 'settings' },
-    { id: 'viewport', label: 'Viewport', icon: 'viewport' },
-    { id: 'shortcuts', label: 'Keyboard Shortcuts', icon: 'command' },
-    { id: 'developer', label: 'Developer Options', icon: 'braces' },
-    { id: 'about', label: 'About', icon: 'info' },
-];
+const SETTINGS_CATEGORY_IDS = ['general', 'viewport', 'shortcuts', 'developer', 'about'];
 const KritzelSettings = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30132,7 +30585,11 @@ const KritzelSettings = class {
     get host() { return getElement(this); }
     /** Keyboard shortcuts to display in the settings dialog */
     availableThemes = ['light', 'dark'];
+    /** Available locales as `{ code, label }` options for the language selector. */
+    availableLocales = [];
     shortcuts = [];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     /** Current settings values. Used to initialize and sync the component's internal state. */
     settings;
     onSettingsPropChange(newSettings) {
@@ -30141,11 +30598,12 @@ const KritzelSettings = class {
         }
     }
     isDialogOpen = false;
-    selectedCategoryId = SETTINGS_CATEGORIES[0].id;
+    selectedCategoryId = SETTINGS_CATEGORY_IDS[0];
     scaleMin = DEFAULT_SCALE_MIN;
     scaleMax = DEFAULT_SCALE_MAX;
     lockDrawingScale = DEFAULT_LOCK_DRAWING_SCALE;
     theme = 'light';
+    locale = 'en';
     viewportBoundaryLeft = DEFAULT_VIEWPORT_BOUNDARY_LEFT;
     viewportBoundaryRight = DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
     viewportBoundaryTop = DEFAULT_VIEWPORT_BOUNDARY_TOP;
@@ -30171,6 +30629,9 @@ const KritzelSettings = class {
         if (typeof settings.theme === 'string') {
             this.theme = settings.theme;
         }
+        if (typeof settings.locale === 'string') {
+            this.locale = settings.locale;
+        }
         if (typeof settings.viewportBoundaryLeft === 'number') {
             this.viewportBoundaryLeft = settings.viewportBoundaryLeft;
         }
@@ -30193,6 +30654,7 @@ const KritzelSettings = class {
             scaleMax: this.scaleMax,
             lockDrawingScale: this.lockDrawingScale,
             theme: this.theme,
+            locale: this.locale,
             viewportBoundaryLeft: this.viewportBoundaryLeft,
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
@@ -30217,6 +30679,10 @@ const KritzelSettings = class {
         this.theme = event.detail;
         this.emitSettings();
     };
+    handleLocaleChange = (event) => {
+        this.locale = event.detail;
+        this.emitSettings();
+    };
     handleViewportBoundaryLeftChange = (event) => {
         this.viewportBoundaryLeft = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_LEFT;
         this.emitSettings();
@@ -30272,24 +30738,52 @@ const KritzelSettings = class {
         }
         return grouped;
     }
+    /**
+     * Resolves a localized string from the supplied {@link terms} map, falling
+     * back to the provided English default when the key is missing.
+     */
+    t(key, fallback) {
+        return this.terms[key] ?? fallback;
+    }
+    get categories() {
+        const icons = {
+            general: 'settings',
+            viewport: 'viewport',
+            shortcuts: 'command',
+            developer: 'braces',
+            about: 'info',
+        };
+        const labels = {
+            general: { key: 'settings.categories.general', fallback: 'General' },
+            viewport: { key: 'settings.categories.viewport', fallback: 'Viewport' },
+            shortcuts: { key: 'settings.categories.shortcuts', fallback: 'Keyboard Shortcuts' },
+            developer: { key: 'settings.categories.developer', fallback: 'Developer Options' },
+            about: { key: 'settings.categories.about', fallback: 'About' },
+        };
+        return SETTINGS_CATEGORY_IDS.map(id => ({
+            id,
+            label: this.t(labels[id].key, labels[id].fallback),
+            icon: icons[id],
+        }));
+    }
     renderCategoryContent() {
         switch (this.selectedCategoryId) {
             case 'general':
-                return (h("div", { class: "settings-content" }, h("h3", null, "General Settings"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Theme"), h("p", { class: "settings-description" }, "Select a registered color theme for the editor interface."), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Lock Drawing Scale"), h("p", { class: "settings-description" }, "When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: "Lock Drawing Scale", onCheckedChange: this.handleLockDrawingScaleChange })))));
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange })))));
             case 'viewport':
-                return (h("div", { class: "settings-content" }, h("h3", null, "Viewport Settings"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Minimum Zoom Level"), h("p", { class: "settings-description" }, "Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Maximum Zoom Level"), h("p", { class: "settings-description" }, "Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Left"), h("p", { class: "settings-description" }, "Left boundary in world coordinates. Set to limit how far left the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Right"), h("p", { class: "settings-description" }, "Right boundary in world coordinates. Set to limit how far right the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Top"), h("p", { class: "settings-description" }, "Top boundary in world coordinates. Set to limit how far up the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Bottom"), h("p", { class: "settings-description" }, "Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryBottomChange })))));
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange })))));
             case 'shortcuts':
-                return (h("div", { class: "settings-content" }, h("h3", null, "Keyboard Shortcuts"), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut))))))))))));
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut))))))))))));
             case 'developer':
-                return (h("div", { class: "settings-content" }, h("h3", null, "Developer Options"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Show Viewport Info"), h("p", { class: "settings-description" }, "Display viewport debug information such as position, zoom level, and boundaries."), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: "Show Viewport Info", onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Show Object Info"), h("p", { class: "settings-description" }, "Display debug information about objects on the canvas."), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: "Show Object Info", onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Show Sync Provider Info"), h("p", { class: "settings-description" }, "Display debug information about the sync provider connection status."), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: "Show Sync Provider Info", onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Show Migration Info"), h("p", { class: "settings-description" }, "Display debug information about data migrations."), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: "Show Migration Info", onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') })))));
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') })))));
             case 'about':
-                return (h("div", { class: "settings-content" }, h("h3", null, "About"), h("p", null, "Kritzel - A drawing application"), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)));
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)));
             default:
                 return null;
         }
     }
     render() {
-        return (h(Host, { key: '46c6792ae9cdd932d3dc71526862c9281c0cefc1' }, h("kritzel-dialog", { key: '1cd288cdf8b26bea378665c54bfc14577597fe49', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '4d07e94ebb09035807356bab4bc7eaca57c36c6c', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '8dc22abaa2a19a14f3bbef10e34d133b16510498' }, h("kritzel-dialog", { key: '54072bf290e2d86bb7ec40d8d3e630be46fa3e1e', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '5be80411c943ab4b7b90129527c8a0d147306a5f', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{
@@ -30350,6 +30844,8 @@ const KritzelShareDialog = class {
      * The ID of the workspace being shared. Used to build the share URL.
      */
     workspaceId = undefined;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     onIsPublicChange(newValue) {
         this.internalIsPublic = newValue;
     }
@@ -30420,9 +30916,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'a104c14b2492d97f3ada98c9eaaa845d63074063' }, h("kritzel-dialog", { key: '1b12b27504153e54aeb0cb4e6b1030a0d43b9735', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '652f23e37876be356beb6f93abf5930e91d82cea', class: "share-content" }, h("div", { key: 'aaf336f2ac86fe23cac79cef920a9d67681046e2', class: "share-section" }, h("div", { key: '8075a7b3fff47c4b924d3b2d92b1377641920939', class: "share-row" }, h("div", { key: '41e98a74a5d4aede50fd75a7de62cbef9b5a5a31', class: "share-label-group" }, h("label", { key: '8a4f53e13d5a81497dd31316a49971c7245d82a2', class: "share-label" }, "Link sharing"), h("p", { key: '907a59d50e595734f03067f70830cf96defdf8d8', class: "share-description" }, this.internalIsPublic
-            ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: '0d75cfeeb63c33d20380ffe9a7e4c27148548ef9', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: 'a8a10c74fd326c5097e4a5f0ee165602c3606ade', class: "share-section" }, h("div", { key: '6261a9fc6cb2be2a50856fb8a990b9da3fee84bf', class: "share-url-container" }, h("input", { key: '26ee72eebfee88d06a50c338cccc9af296c8ba4c', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '4b1ec06fa27c95d9d0bb93f8cbb851a02fdd52cc', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: 'd9eea56b3523fcc3557d9868f3da7f28449a9447', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+        return (h(Host, { key: 'b364f891659d54623b5472fe4cd5a9a85bc2fafa' }, h("kritzel-dialog", { key: '7059a3ede84bc67f7661efc8c84eae9b0c401d43', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '1b0e7a9b5483a53f91e874075c0edb116b7474d6', class: "share-content" }, h("div", { key: '1568dc99224f0f7e2a370c22327dc313515e7d0f', class: "share-section" }, h("div", { key: 'a0032f6c870a448e817b013a715aadca1c455bb3', class: "share-row" }, h("div", { key: '3bd74cbebc122133354465163f9945dd207245b5', class: "share-label-group" }, h("label", { key: '0919fc24e5637c908c53b6914983833b6600e846', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'f87c9eae7112d284d7d917fae7c9c05fa6feb0ed', class: "share-description" }, this.internalIsPublic
+            ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '81ccfb76255d40da954cfdcbc486bdbb7dc4bff4', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'c72da3550416ebfef5c24690591b212df70cb4db', class: "share-section" }, h("div", { key: 'c3dd4bce7d57e60d09989bff6dd1d828a613b425', class: "share-url-container" }, h("input", { key: '67aab8a65f54ea67392a9874e949d6d1af519e0f', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'c31d48fe67cdd12aa517e20bac54ac74c05abd04', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: '08ed01ed081e955e28eaed577438cd0008eaacf4', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -30460,7 +30956,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (h(Host, { key: '8a1f816240f815905cc7def7cac92eb7ddac0df2', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: 'd5fa5091ad54032f81dad3879149c4d8ec7ea37b', class: "toggle-track" }, h("div", { key: 'cce0d61431ed65a26926b0a496a5c22eb4169577', class: "toggle-thumb" }))));
+        return (h(Host, { key: '92aefb30139abd512c02c99f5c532cb69daab8c3', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '53fc90f3a11055e0b16358be0e3beed2ed25bc48', class: "toggle-track" }, h("div", { key: 'e0a0cecb9ede9c8e932cbb6fa7cdc359c07be8db', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -30560,7 +31056,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '794fdb5cb4d110d93b6b2cb060fe34241f29db57', class: { mobile: this.isTouchDevice } }, h("button", { key: '7202a40f05bf6fc256996a05db55bcfa3baba615', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '3156c6c4e757d9ebbd3f5e3719ee1bf9bf81f71b', name: this.buttonIcon })), h("div", { key: '4c5a3a9791ecfd00d36fc0eb885c1d227200cfc7', class: "split-divider" }), h("button", { key: 'fe0ee44d11ddb34f7719b986406905c47bc1f152', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'b3d84e4599dc408ccc8afe17e487b501cbde89a4', name: this.dropdownIcon })), h("kritzel-portal", { key: '6800329ebe3c94a661e9ad852b6bf256defc291f', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0c98abe2327e0cc3182a55caf50c89316b526049', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: '39516b2486a27534273b6bf4def6b11790aa0ed5', class: { mobile: this.isTouchDevice } }, h("button", { key: '19c4a58deb3992857b0e42e4a035a15d0980da22', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '4c8e7e09e60717b1653251468c2a25d41c4b1921', name: this.buttonIcon })), h("div", { key: '53617db6b630dfb5320e7309dcbc9f7288ff8974', class: "split-divider" }), h("button", { key: '5134f88ed43558ff0cb11b8ef29cf2b370aad4ee', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '41f39a601ae91d4faaf54c1ca39c90e27e084d31', name: this.dropdownIcon })), h("kritzel-portal", { key: 'dcfe82f72a53e9346b48d2ff6da236c1f1344f3f', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '1208990bff47de642eafa6ca8cfaa76de46ca87c', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -30580,7 +31076,8 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '514d87732c9b15cddd5a905407ff7ce9069c06d7' }, h("div", { key: '170c9a8abfe8298116d8a269338da95fbc2aac7b', class: "size-grid" }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '20c11daaf60055262706b8177b1090bddd2d522c' }, h("div", { key: '1729e29d836f85fe3be984a5ee78a0debc0e6218', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -30629,6 +31126,8 @@ const KritzelToolConfig = class {
     isExpanded = false;
     theme;
     engine;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     handleSelectionChangeBound = this.handleSelectionChange.bind(this);
     onThemeChange() {
         this.emitDisplayValues();
@@ -30771,9 +31270,9 @@ const KritzelToolConfig = class {
         const value = this.tool[control.propertyName];
         switch (control.type) {
             case 'stroke-size':
-                return (h("kritzel-stroke-size", { key: control.type, sizes: this.sizes.length > 0 ? this.sizes : undefined, selectedSize: value, onSizeChange: this.handleSizeChange }));
+                return (h("kritzel-stroke-size", { key: control.type, sizes: this.sizes, selectedSize: value, onSizeChange: this.handleSizeChange }));
             case 'font-size':
-                return (h("kritzel-font-size", { key: control.type, sizes: this.sizes.length > 0 ? this.sizes : undefined, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+                return (h("kritzel-font-size", { key: control.type, sizes: this.sizes, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
             case 'line-endings':
                 return (h("kritzel-line-endings", { key: control.type, value: value, onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
             case 'shape-fill':
@@ -30808,7 +31307,7 @@ const KritzelToolConfig = class {
         ])), shouldShowExpandButton && (h("div", { style: {
                 display: 'flex',
                 alignItems: 'flex-start',
-            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
     }
     static get watchers() { return {
         "tool": [{
@@ -30959,14 +31458,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '10bff4d14ff1f724d59463afc059f254e9485175', style: {
+        return (h(Host, { key: '57c0c2ddbe3f88815b975b7cf5b02c7da389b7f9', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '6bfc8f2fe731d758c74319abeb82c4b84616f8b6', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '2a92ad23f4424b2d17035f86983be66a81fee81d' }))));
+            } }, h("div", { key: '3ab17ef4ba55ed39458814685574b0c00504a07d', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'b0aa1eb2c9363644939bcc59a80d0294787f0946' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -30989,6 +31488,8 @@ const KritzelUtilityPanel = class {
         this.delete = createEvent(this, "delete");
     }
     undoState = null;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     undo;
     redo;
     delete;
@@ -31005,11 +31506,32 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'b49f6db6c0e574dc8a5a733c749ecda6f24f9d25' }, h("button", { key: 'e6306e54c8f660c3e92d032527fad1ea45ca0cf8', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": "Undo" }, h("kritzel-icon", { key: '5bb1293049a1e3004504289d92ccc79958786f3f', name: "undo" })), h("button", { key: '8102b0403d7f328ce4bfeb79767d5bd99d879013', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": "Redo" }, h("kritzel-icon", { key: '5db3047bec5d8ab695a2dc67780a5dbecbae64d2', name: "redo" })), h("div", { key: 'e894d9f2aaa2cad7aa980d3b839eca05a8d9c9df', class: "utility-separator" }), h("button", { key: 'f0a7de5ab91f82a2e5e8df75cc1903ec647abdac', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": "Delete selected items" }, h("kritzel-icon", { key: '5b146375394299bae946a95545c3c42c2bf36766', name: "delete" }))));
+        return (h(Host, { key: '7738c225b6ec936e032770e0a7387b01718e94e0' }, h("button", { key: '8bc7346eb02e3c220ca9f9c06f1ae048e83667ee', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '3c7d87edc047113cac359f4782c7feeb53e18193', name: "undo" })), h("button", { key: '960dc7783cfe558f08749b9e71c6583c8d53c167', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'b5ac0b631c51b8e6c2762b4887dcdef899327e52', name: "redo" })), h("div", { key: '4075c8eb7d8c57d5e93afb18282c7a50ec8e050e', class: "utility-separator" }), h("button", { key: '4e7c53a0933c527e84e0ad78519983446f10d23c', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'f2d3d9817626c53e2e4c3d4c7c702705b25d7788', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
 
+const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
+
+const KritzelWatermark = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The core instance used to resolve localized terms. */
+    core;
+    /**
+     * Resolved "Powered by Kritzel" label. Passed in by the engine so the badge
+     * re-renders when the active locale changes. Falls back to resolving the term
+     * from the core when not provided.
+     */
+    label;
+    render() {
+        const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
+        return (h(Host, { key: '7ec2a304ac711a4d2a54edef317eef9f4aad1d47' }, h("a", { key: '365d588727bbc360fd47bc9a3fbd66155770d32f', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+    }
+};
+KritzelWatermark.style = kritzelWatermarkCss();
+
 const kritzelWorkspaceManagerCss = () => `:host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}`;
 
 const KritzelWorkspaceManager = class {
@@ -31025,6 +31547,8 @@ const KritzelWorkspaceManager = class {
     visible = false;
     activeWorkspace;
     workspaces = [];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isWorkspaceManagerReady;
     workspaceChange;
     childMenuAnchor = null;
@@ -31128,7 +31652,7 @@ const KritzelWorkspaceManager = class {
                 id: ws.id,
                 label: ws.name,
                 icon: ws.isPublic ? 'users-round' : undefined,
-                iconTooltip: ws.isPublic ? 'Shared workspace' : undefined,
+                iconTooltip: ws.isPublic ? (this.terms['workspace.sharedTooltip'] ?? 'Shared workspace') : undefined,
                 value: ws,
                 isEditing: this.editingItemId === ws.id,
                 isSelected: this.activeWorkspace?.id === ws.id,
@@ -31138,13 +31662,13 @@ const KritzelWorkspaceManager = class {
                 children: [
                     {
                         id: `${ws.id}-rename`,
-                        label: 'Rename',
+                        label: this.terms['workspace.rename'] ?? 'Rename',
                         value: 'rename',
                         action: (_item, parent) => this.edit(parent),
                     },
                     {
                         id: `${ws.id}-delete`,
-                        label: 'Delete',
+                        label: this.terms['workspace.delete'] ?? 'Delete',
                         value: 'delete',
                         isDisabled: this.sortedWorkspaces.length <= 1,
                         action: (_item, parent) => this.delete(parent),
@@ -31157,4 +31681,43 @@ const KritzelWorkspaceManager = class {
 };
 KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss();
 
-export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };
+const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelZoomPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.zoomIn = createEvent(this, "zoomIn");
+        this.zoomOut = createEvent(this, "zoomOut");
+    }
+    /** Whether the zoom panel is visible. */
+    visible = true;
+    /** Whether both zoom buttons are disabled. */
+    disabled = false;
+    /** Current zoom level in percent. */
+    zoomPercent = 100;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /** Emitted when the zoom-in button is clicked. */
+    zoomIn;
+    /** Emitted when the zoom-out button is clicked. */
+    zoomOut;
+    handleZoomIn = () => {
+        if (!this.disabled) {
+            this.zoomIn.emit();
+        }
+    };
+    handleZoomOut = () => {
+        if (!this.disabled) {
+            this.zoomOut.emit();
+        }
+    };
+    get normalizedZoomPercent() {
+        return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
+    }
+    render() {
+        return (h(Host, { key: '6c88ed18f63e1a4cfffef6ba3aa1772404908d59' }, h("div", { key: '18fcdf05a6822d2b9cf319059118b4851429283d', class: { panel: true, visible: this.visible } }, h("button", { key: 'df2c90912e091e4f2ca025dd246916e9fea6f7fa', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '293847a34220520592e74f50c89d57140d7f1cbe', name: "minus" })), h("span", { key: '575119b81e6d5d41f5802a29be1b586727968919', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '8cdd7100aaeb313f2504351204ff512142414815', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'b792164a29dd43ef601a4f469fed440ee1d72510', name: "plus" })))));
+    }
+};
+KritzelZoomPanel.style = kritzelZoomPanelCss();
+
+export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };