kritzel-stencil 0.3.16 → 0.3.17

package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts

@@ -13,6 +13,7 @@ import { KritzelBaseTool } from '../../../classes/tools/base-tool.class';
 import { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig } from '../../../interfaces/toolbar-control.interface';
 import { ActiveWorkspaceChangeEvent, EditorIsReadyEvent, KritzelUndoState } from '../../..';
 import { ThemeName, KritzelTheme } from '../../../interfaces/theme.interface';
+import { KritzelLocale, KritzelTermKey, KritzelTermVars, LocaleCode } from '../../../interfaces/localization.interface';
 import { KritzelShortcut } from '../../../interfaces/shortcut.interface';
 import { KritzelViewportState } from '../../../interfaces/viewport-state.interface';
 import { ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent } from '../../../interfaces/object-change-event.interface';
@@ -29,7 +30,6 @@ export declare class KritzelEditor {
     viewportBoundaryRight: number;
     viewportBoundaryTop: number;
     viewportBoundaryBottom: number;
-    wheelEnabled: boolean;
     debugInfo: KritzelDebugInfo;
     user?: IKritzelUser;
     activeUsers?: IKritzelUser[];
@@ -38,11 +38,22 @@ export declare class KritzelEditor {
     objectContextMenuItems: ContextMenuItem[];
     themes?: KritzelTheme[];
     theme: ThemeName;
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey?: string;
+    /** The current locale (language) code applied to the editor, e.g. 'en', 'de', 'fr'. */
+    locale: LocaleCode;
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales?: KritzelLocale[];
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale: LocaleCode;
     customSvgIcons: Record<string, string>;
+    isPanningEnabled: boolean;
+    isZoomingEnabled: boolean;
     isControlsVisible: boolean;
     isUtilityPanelVisible: boolean;
     isWorkspaceManagerVisible: boolean;
     isMoreMenuVisible: boolean;
+    isZoomPanelVisible: boolean;
     isObjectDistanceFadingActive: boolean;
     syncConfig?: KritzelSyncConfig;
     assetStorageConfig?: KritzelAssetStorageConfig;
@@ -64,6 +75,7 @@ export declare class KritzelEditor {
     objectsUpdated: EventEmitter<ObjectsUpdatedEvent>;
     undoStateChange: EventEmitter<KritzelUndoState>;
     themeChange: EventEmitter<ThemeName>;
+    localeChange: EventEmitter<LocaleCode>;
     viewportChange: EventEmitter<KritzelViewportState>;
     logout: EventEmitter<void>;
     login: EventEmitter<LoginEvent>;
@@ -77,6 +89,14 @@ export declare class KritzelEditor {
     isVirtualKeyboardOpen: boolean;
     undoState: KritzelUndoState | null;
     isBackToContentButtonVisible: boolean;
+    /** Localized strings for editor-owned UI (e.g. the more menu), resolved from the active locale. */
+    resolvedTerms: Partial<Record<KritzelTermKey, string>>;
+    /** Available locales as `{ code, label }` options for the settings language selector. */
+    availableLocaleOptions: {
+        code: LocaleCode;
+        label: string;
+    }[];
+    currentZoomPercent: number;
     shortcuts: Omit<KritzelShortcut, 'action' | 'condition'>[];
     currentIsPublic: boolean;
     isEditorVisible: boolean;
@@ -87,6 +107,13 @@ export declare class KritzelEditor {
     onActiveWorkspaceIdChange(newId?: string): void;
     onCurrentThemeChange(): void;
     onThemesChange(): void;
+    onLocaleChange(newValue: LocaleCode): void;
+    /**
+     * 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.
+     */
+    private refreshLocalizedTerms;
     onTouchStart(event: MouseEvent): void;
     getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null>;
     addObject<T extends KritzelBaseObject>(object: T): Promise<T | null>;
@@ -191,6 +218,7 @@ export declare class KritzelEditor {
     handleUndoStateChange(event: CustomEvent<KritzelUndoState>): void;
     handleObjectsInViewportChange(event: CustomEvent<KritzelBaseObject<Element>[]>): Promise<void>;
     handleViewportChange(event: CustomEvent<KritzelViewportState>): void;
+    private getZoomPercentFromScale;
     handleAwarenessChange(event: CustomEvent<Map<number, Record<string, any>>>): void;
     handleSettingsChange(event: CustomEvent<KritzelSettingsConfig>): void;
     private get moreMenuItems();
@@ -203,6 +231,30 @@ export declare class KritzelEditor {
     private get isLoggedIn();
     openLoginDialog(): Promise<void>;
     setLoginLoading(provider: string | null): Promise<void>;
+    /**
+     * Sets the active locale (language) and re-renders the UI.
+     * @param code - The locale code to activate, e.g. 'de'.
+     */
+    setLocale(code: LocaleCode): Promise<void>;
+    /**
+     * Gets the currently active locale code.
+     */
+    getLocale(): Promise<LocaleCode>;
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    getAvailableLocales(): Promise<LocaleCode[]>;
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    registerLocales(locales: KritzelLocale[]): Promise<void>;
+    /**
+     * 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.
+     */
+    t(key: KritzelTermKey, vars?: KritzelTermVars): Promise<string>;
     private getSettingsStorageKey;
     private loadSettingsFromStorage;
     private loadShortcuts;

package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts

@@ -15,6 +15,7 @@ import { KritzelSyncConfig } from '../../../interfaces/sync-config.interface';
 import { KritzelAssetStorageConfig } from '../../../interfaces/asset-storage-config.interface';
 import { KritzelUndoState } from '../../../interfaces/undo-state.interface';
 import { KritzelTheme, ThemeName } from '../../../interfaces/theme.interface';
+import { KritzelLocale, KritzelTermKey, KritzelTermVars, LocaleCode } from '../../../interfaces/localization.interface';
 import { KritzelShortcut } from '../../../interfaces/shortcut.interface';
 import { KritzelAlignment } from '../../../enums/alignment.enum';
 import { KritzelViewportState } from '../../../interfaces/viewport-state.interface';
@@ -71,9 +72,21 @@ export declare class KritzelEngine {
     /** The current theme to apply to the editor */
     theme: ThemeName;
     onThemeChange(newValue: ThemeName): void;
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey?: string;
+    onLicenseKeyChange(newValue?: string): void;
     /** An array of available themes for the editor. */
     themes?: KritzelTheme[];
     onThemesChange(newValue?: KritzelTheme[]): void;
+    /** The current locale (language) code to apply to the editor, e.g. 'en', 'de', 'fr'. */
+    locale: LocaleCode;
+    onLocaleChange(newValue: LocaleCode): void;
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales?: KritzelLocale[];
+    onLocalesChange(newValue?: KritzelLocale[]): void;
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale: LocaleCode;
+    onFallbackLocaleChange(newValue: LocaleCode): void;
     /** Left boundary of the viewport in world coordinates. Objects beyond this X position cannot be panned to. */
     viewportBoundaryLeft: number;
     onViewportBoundaryLeftChange(newValue: number): void;
@@ -89,8 +102,10 @@ export declare class KritzelEngine {
     /** Debug info display options controlling which debug overlays are visible */
     debugInfo?: KritzelDebugInfo;
     onDebugInfoChange(newValue: KritzelDebugInfo): void;
-    /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
-    wheelEnabled: boolean;
+    /** When false, non-modified wheel events do not pan the viewport. */
+    isPanningEnabled: boolean;
+    /** When false, Ctrl+wheel events do not zoom the viewport. */
+    isZoomingEnabled: boolean;
     /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
     isLoading: boolean;
     onIsLoadingChange(): void;
@@ -434,12 +449,13 @@ export declare class KritzelEngine {
     /**
      * 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.
      */
     getSelectedObjectsAsSvgString(options?: {
         theme?: 'light' | 'dark';
         padding?: number;
+        rasterSafeForCanvas?: boolean;
     }): Promise<string | null>;
     /**
      * Exports the currently selected objects as an SVG file and triggers a browser download.
@@ -553,6 +569,42 @@ export declare class KritzelEngine {
      * @returns The stored settings, or null if nothing is stored or the value is invalid.
      */
     loadSettings(): Promise<Partial<KritzelSettingsConfig> | null>;
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    registerLocales(locales: KritzelLocale[]): Promise<void>;
+    /**
+     * Sets the active locale (language) and re-renders the UI.
+     * @param code - The locale code to activate, e.g. 'de'.
+     */
+    setLocale(code: LocaleCode): Promise<void>;
+    /**
+     * Gets the currently active locale code.
+     */
+    getLocale(): Promise<LocaleCode>;
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    getAvailableLocales(): Promise<LocaleCode[]>;
+    /**
+     * Gets the list of available locales as `{ code, label }` options for a selector.
+     */
+    getAvailableLocaleOptions(): Promise<{
+        code: LocaleCode;
+        label: string;
+    }[]>;
+    /**
+     * 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.
+     */
+    t(key: KritzelTermKey, vars?: KritzelTermVars): Promise<string>;
+    /**
+     * 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.
+     */
+    getResolvedTerms(): Promise<Partial<Record<KritzelTermKey, string>>>;
     core: KritzelCore;
     viewport: KritzelViewport;
     contextMenuHandler: KritzelContextMenuHandler;

package/dist/types/components/core/kritzel-watermark/kritzel-watermark.d.ts

@@ -0,0 +1,20 @@
+import { KritzelCore } from '../../../classes/core/core.class';
+/**
+ * "Powered by Kritzel" watermark shown in the bottom-right corner of the engine
+ * when the editor is not licensed.
+ *
+ * Rendered inside the engine's Shadow DOM and gated by the license manager on
+ * the engine's reactive render path, so removing the node simply causes it to
+ * reappear on the next render. The badge links to the Kritzel website.
+ */
+export declare class KritzelWatermark {
+    /** The core instance used to resolve localized terms. */
+    core: KritzelCore;
+    /**
+     * 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?: string;
+    render(): any;
+}

package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts

@@ -7,6 +7,7 @@ import { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfa
 import { KritzelUndoState } from '../../../interfaces/undo-state.interface';
 import { ToolDisplayValues } from '../../../interfaces/tool-config.interface';
 import { ThemeName } from '../../../interfaces/theme.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 type ToolConfig = Record<string, any>;
 export declare class KritzelControls {
     host: HTMLElement;
@@ -16,6 +17,8 @@ export declare class KritzelControls {
     isUtilityPanelVisible: boolean;
     undoState: KritzelUndoState;
     theme: ThemeName;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     isControlsReady: EventEmitter<void>;
     firstConfig: ToolConfig | null;
     isTouchDevice: boolean;

package/dist/types/components/ui/kritzel-current-user/kritzel-current-user.d.ts

@@ -1,4 +1,5 @@
 import { IKritzelUser } from '../../../interfaces/user.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelCurrentUser {
     host: HTMLElement;
     /**
@@ -9,6 +10,8 @@ export declare class KritzelCurrentUser {
      * Avatar size in pixels
      */
     avatarSize: number;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     private dialogRef;
     private handleAvatarClick;
     render(): any;

package/dist/types/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.d.ts

@@ -1,7 +1,10 @@
 import { IKritzelUser } from '../../../interfaces/user.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelCurrentUserDialog {
     host: HTMLElement;
     user?: IKritzelUser;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     isDialogOpen: boolean;
     open(): Promise<void>;
     close(): Promise<void>;

package/dist/types/components/ui/kritzel-export/kritzel-export.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 type ExportTab = 'viewport' | 'workspace';
 type ViewportExportFormat = 'png' | 'svg';
 export declare class KritzelExport {
@@ -6,6 +7,8 @@ export declare class KritzelExport {
      * The name of the current workspace, used as default filename
      */
     workspaceName: string;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     isDialogOpen: boolean;
     previewUrl: string;
     isLoading: boolean;
@@ -15,7 +18,7 @@ export declare class KritzelExport {
     exportPng: EventEmitter<void>;
     exportSvg: EventEmitter<void>;
     exportJson: EventEmitter<string>;
-    private tabs;
+    private get tabs();
     private viewportFormatOptions;
     open(previewUrl?: string): Promise<void>;
     private generateDefaultFilename;

package/dist/types/components/ui/kritzel-more-menu/kritzel-more-menu.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelMoreMenu {
     host: HTMLElement;
     /**
@@ -24,6 +25,8 @@ export declare class KritzelMoreMenu {
      * Offset Y for the portal positioning
      */
     offsetY: number;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     /**
      * Emitted when a menu item is selected
      */

package/dist/types/components/ui/kritzel-settings/kritzel-settings.d.ts

@@ -3,11 +3,19 @@ import { KritzelSettingsConfig } from '../../../interfaces/settings.interface';
 import { KritzelDebugInfo } from '../../../interfaces/debug-info.interface';
 import { ThemeName } from '../../../interfaces/theme.interface';
 import { KritzelShortcut } from '../../../interfaces/shortcut.interface';
+import { LocaleCode, KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelSettings {
     host: HTMLElement;
     /** Keyboard shortcuts to display in the settings dialog */
     availableThemes: string[];
+    /** Available locales as `{ code, label }` options for the language selector. */
+    availableLocales: {
+        code: LocaleCode;
+        label: string;
+    }[];
     shortcuts: Omit<KritzelShortcut, 'action' | 'condition'>[];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     /** Current settings values. Used to initialize and sync the component's internal state. */
     settings?: Partial<KritzelSettingsConfig>;
     onSettingsPropChange(newSettings?: Partial<KritzelSettingsConfig>): void;
@@ -17,6 +25,7 @@ export declare class KritzelSettings {
     scaleMax: number;
     lockDrawingScale: boolean;
     theme: ThemeName;
+    locale: LocaleCode;
     viewportBoundaryLeft: number;
     viewportBoundaryRight: number;
     viewportBoundaryTop: number;
@@ -31,6 +40,7 @@ export declare class KritzelSettings {
     private handleScaleMaxChange;
     private handleLockDrawingScaleChange;
     private handleThemeChange;
+    private handleLocaleChange;
     private handleViewportBoundaryLeftChange;
     private handleViewportBoundaryRightChange;
     private handleViewportBoundaryTopChange;
@@ -42,6 +52,12 @@ export declare class KritzelSettings {
     private formatKeyCombo;
     private formatKey;
     private groupShortcutsByCategory;
+    /**
+     * Resolves a localized string from the supplied {@link terms} map, falling
+     * back to the provided English default when the key is missing.
+     */
+    private t;
+    private get categories();
     private renderCategoryContent;
     render(): any;
 }

package/dist/types/components/ui/kritzel-share-dialog/kritzel-share-dialog.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 /**
  * Share dialog component for managing workspace link sharing.
  * This is a presentational component that emits events for all actions.
@@ -14,6 +15,8 @@ export declare class KritzelShareDialog {
      * The ID of the workspace being shared. Used to build the share URL.
      */
     workspaceId: string | undefined;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     onIsPublicChange(newValue: boolean): void;
     isDialogOpen: boolean;
     internalIsPublic: boolean;

package/dist/types/components/ui/kritzel-tool-config/kritzel-tool-config.d.ts

@@ -2,12 +2,15 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { ConfigurableTool, ToolConfigDefinition, ToolDisplayValues } from '../../../interfaces/tool-config.interface';
 import { ThemeAwareColor } from '../../../constants/color-palette.constants';
 import { ThemeName } from '../../../interfaces/theme.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelToolConfig {
     tool: ConfigurableTool;
     handleToolChange(newTool: ConfigurableTool, oldTool: ConfigurableTool): void;
     isExpanded: boolean;
     theme: ThemeName;
     engine: HTMLElement;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     private handleSelectionChangeBound;
     onThemeChange(): void;
     handleEngineChange(newEngine: HTMLElement, oldEngine: HTMLElement): void;

package/dist/types/components/ui/kritzel-utility-panel/kritzel-utility-panel.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { KritzelUndoState } from '../../../interfaces/undo-state.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 export declare class KritzelUtilityPanel {
     undoState: KritzelUndoState;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     undo: EventEmitter<void>;
     redo: EventEmitter<void>;
     delete: EventEmitter<void>;

package/dist/types/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.d.ts

@@ -1,5 +1,6 @@
 import { KritzelWorkspace } from '../../../classes/core/workspace.class';
 import { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class KritzelWorkspaceManager {
     host: HTMLElement;
@@ -9,6 +10,8 @@ export declare class KritzelWorkspaceManager {
     visible: boolean;
     activeWorkspace: KritzelWorkspace;
     workspaces: KritzelWorkspace[];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
     isWorkspaceManagerReady: EventEmitter<void>;
     workspaceChange: EventEmitter<KritzelWorkspace>;
     childMenuAnchor: HTMLElement;

package/dist/types/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { KritzelTermKey } from '../../../interfaces/localization.interface';
+export declare class KritzelZoomPanel {
+    /** Whether the zoom panel is visible. */
+    visible: boolean;
+    /** Whether both zoom buttons are disabled. */
+    disabled: boolean;
+    /** Current zoom level in percent. */
+    zoomPercent: number;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
+    /** Emitted when the zoom-in button is clicked. */
+    zoomIn: EventEmitter<void>;
+    /** Emitted when the zoom-out button is clicked. */
+    zoomOut: EventEmitter<void>;
+    private handleZoomIn;
+    private handleZoomOut;
+    private get normalizedZoomPercent();
+    render(): any;
+}