@selvajs/ui 4.7.1 → 4.9.0

package/dist/components/compute/AppLayout.svelte

@@ -11,6 +11,10 @@
 	import * as Resizable from '../primitives/resizable';
 	import { Button } from '../..';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	const COLLAPSED_WIDTH = 48;
 
@@ -74,7 +78,7 @@
 	let isMobile = $state(false);
 	let drawerOpen = $state(false);
 
-	const activeLeftTabLabel = $derived(leftTabs[0]?.label ?? 'Parameters');
+	const activeLeftTabLabel = $derived(leftTabs[0]?.label ?? t.parametersTab);
 
 	$effect(() => {
 		const mqMobile = window.matchMedia('(max-width: 639px)');
@@ -200,7 +204,7 @@
 					onclick={() => (drawerOpen = !drawerOpen)}
 					ontouchstart={onDrawerTouchStart}
 					ontouchend={onDrawerTouchEnd}
-					aria-label={drawerOpen ? 'Collapse panel' : 'Expand panel'}
+					aria-label={drawerOpen ? t.collapsePanel : t.expandPanel}
 					aria-expanded={drawerOpen}
 				>
 					<div class="drawer-pill"></div>
@@ -227,7 +231,7 @@
 							<div class="my-4 gap-2 flex items-center">
 								<div class="h-px flex-1 bg-border"></div>
 								<span class="text-xs font-medium px-1 text-muted-foreground">
-									{rightTabs[0]?.label ?? 'More'}
+									{rightTabs[0]?.label ?? t.moreTab}
 								</span>
 								<div class="h-px flex-1 bg-border"></div>
 							</div>
@@ -257,7 +261,7 @@
 						<div class="my-4 gap-2 flex items-center">
 							<div class="h-px flex-1 bg-border"></div>
 							<span class="text-xs font-medium px-1 text-muted-foreground">
-								{rightTabs[0]?.label ?? 'More'}
+								{rightTabs[0]?.label ?? t.moreTab}
 							</span>
 							<div class="h-px flex-1 bg-border"></div>
 						</div>

package/dist/components/compute/CollapsedPanelStrip.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
 	import Icon from '@iconify/svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		side: 'left' | 'right';
@@ -29,7 +33,10 @@
 	style="--collapsed-w: {collapsedWidth}px;"
 	role="button"
 	tabindex="0"
-	aria-label="Expand {side} panel"
+	aria-label={t.expandSidePanel.replace(
+		'{side}',
+		side === 'left' ? t.panelSideLeft : t.panelSideRight
+	)}
 	onclick={onExpand}
 	onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && onExpand()}
 >

package/dist/components/compute/ComputeApp.svelte

@@ -16,6 +16,8 @@
 	import AppLayout from './AppLayout.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
+	import type { Locale } from '../../i18n/messages';
+	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -54,6 +56,13 @@
 		externalScopeKey?: string;
 		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, slotLabel, value }.
 		clientSlot?: ClientSlot;
+		/**
+		 * UI language for the app's own chrome (viewer, panels, status text).
+		 * Provided once here and read by every descendant via locale context.
+		 * Defaults to English when unset. Does not translate schema-authored labels
+		 * or Grasshopper-sourced names/metadata.
+		 */
+		lang?: Locale;
 	}
 
 	let {
@@ -81,13 +90,21 @@
 		header,
 		onReady,
 		externalScopeKey,
-		clientSlot
+		clientSlot,
+		lang
 	}: Props = $props();
 
 	// Make the host's client-input slot available to InputControl deep in the tree.
 	// svelte-ignore state_referenced_locally
 	setClientSlot(clientSlot);
 
+	// Provide the UI locale once for the whole app subtree (viewer, panels, status
+	// text). Resolution: explicit `lang` → any host-provided locale → English. The
+	// getter is re-read reactively, so switching `lang` updates the chrome live.
+	const hostLocale = getLocaleContext();
+	setLocaleContext(() => lang ?? hostLocale.locale);
+	const t = $derived(getLocaleContext().messages);
+
 	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
 	// Solve Session owns the value/lifecycle state machine; the request/response driver
@@ -182,7 +199,7 @@
 			</div>
 		{:else if !schema}
 			<div class="min-h-100 flex items-center justify-center">
-				<StateDisplay type="loading" size="large" message="Loading schema..." />
+				<StateDisplay type="loading" size="large" message={t.loadingSchema} />
 			</div>
 		{:else}
 			{#key definitionKey}

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ActionButton } from '../../types/actionButton';
 import type { SolveFn } from '../../types/solveFn';
 import type { PresetLabels } from '../../types/presetLabels';
 import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
+import type { Locale } from '../../i18n/messages';
 import type { Snippet } from 'svelte';
 interface Props {
     schema: UISchema;
@@ -38,6 +39,13 @@ interface Props {
     header?: Snippet;
     externalScopeKey?: string;
     clientSlot?: ClientSlot;
+    /**
+     * UI language for the app's own chrome (viewer, panels, status text).
+     * Provided once here and read by every descendant via locale context.
+     * Defaults to English when unset. Does not translate schema-authored labels
+     * or Grasshopper-sourced names/metadata.
+     */
+    lang?: Locale;
 }
 declare const ComputeApp: import("svelte").Component<Props, {}, "">;
 type ComputeApp = ReturnType<typeof ComputeApp>;

package/dist/components/preview/TabContent.svelte

@@ -14,6 +14,10 @@
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
 	import { evaluateGroupVisibility } from '../../schema/visibility-rules';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		tab: TabConfig;
@@ -79,7 +83,7 @@
 	<ScrollArea class="h-full" orientation="vertical">
 		<div class="p-4 tab-content-container">
 			{#if tab.groups.length === 0}
-				<StateDisplay type="empty" size="medium" message="This tab has no groups configured." />
+				<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 			{:else}
 				<div class="gap-8 flex flex-col">
 					{#each tab.groups as group (group.id)}

package/dist/components/primitives/CalculateButton.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { Button } from './button';
 	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		hasPendingChanges: boolean;
@@ -25,16 +29,16 @@
 	>
 		{#if isSolving}
 			<Loader class="h-4 w-4 animate-spin" />
-			Solving...
+			{t.solvingEllipsis}
 		{:else if hasNeverSolved}
 			<Play class="h-4 w-4" />
-			Press to calculate
+			{t.pressToCalculate}
 		{:else if hasPendingChanges}
 			<Zap class="h-4 w-4" />
-			Calculate
+			{t.calculate}
 		{:else}
 			<Check class="h-4 w-4" />
-			Up to date
+			{t.upToDate}
 		{/if}
 	</Button>
 </div>

package/dist/components/primitives/SolvingIndicator.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
 	interface Props {
 		show: boolean;
 	}
 
 	let { show }: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 </script>
 
 {#if show}
@@ -19,8 +24,8 @@
 			></div>
 		</div>
 		<div class="leading-tight flex flex-col">
-			<span class="text-sm font-semibold">Solving</span>
-			<span class="text-xs opacity-70">Grasshopper is calculating...</span>
+			<span class="text-sm font-semibold">{t.solving}</span>
+			<span class="text-xs opacity-70">{t.solvingSubtitle}</span>
 		</div>
 	</div>
 {/if}

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import * as Dialog from '../primitives/dialog/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		open: boolean;
@@ -50,12 +54,12 @@
 				<Dialog.Title class="text-sm font-semibold">{meshName}</Dialog.Title>
 			</div>
 		{:else}
-			<Dialog.Title class="sr-only">Object</Dialog.Title>
+			<Dialog.Title class="sr-only">{t.objectFallbackName}</Dialog.Title>
 		{/if}
 
 		<div class="max-h-80 overflow-y-auto">
 			{#if !metadata || Object.keys(getFilteredMetadata()).length === 0}
-				<p class="px-4 py-3 text-xs text-muted-foreground">No metadata</p>
+				<p class="px-4 py-3 text-xs text-muted-foreground">{t.noMetadata}</p>
 			{:else}
 				<table class="text-xs w-full border-collapse">
 					<tbody>

package/dist/components/viewer/SceneManager.svelte

@@ -2,6 +2,10 @@
 	import * as THREE from 'three';
 	import { Eye, EyeOff, ChevronRight, Search, X } from '@lucide/svelte';
 	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		scene: THREE.Scene;
@@ -165,11 +169,11 @@
 		<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
 		<input
 			class="min-w-0 text-xs flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground/50"
-			placeholder="Search objects..."
+			placeholder={t.searchObjects}
 			bind:value={searchQuery}
 		/>
 		{#if searchQuery}
-			<button onclick={() => (searchQuery = '')} aria-label="Clear search">
+			<button onclick={() => (searchQuery = '')} aria-label={t.clearSearch}>
 				<X
 					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
 				/>
@@ -187,7 +191,7 @@
 				<button
 					class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
 					onclick={() => toggleLayerCollapsed(layerName)}
-					aria-label={collapsed ? 'Expand layer' : 'Collapse layer'}
+					aria-label={collapsed ? t.expandLayer : t.collapseLayer}
 				>
 					<ChevronRight
 						class="h-3.5 w-3.5 transition-transform duration-150 {collapsed ? '' : 'rotate-90'}"
@@ -197,8 +201,8 @@
 				<button
 					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
 					onclick={() => toggleLayer(layerName, objects)}
-					title={layerHidden ? 'Show layer' : 'Hide layer'}
-					aria-label={layerHidden ? 'Show layer' : 'Hide layer'}
+					title={layerHidden ? t.showLayer : t.hideLayer}
+					aria-label={layerHidden ? t.showLayer : t.hideLayer}
 				>
 					{#if layerHidden}
 						<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
@@ -249,8 +253,8 @@
 									e.stopPropagation();
 									toggleObject(object);
 								}}
-								title={hidden ? 'Show' : 'Hide'}
-								aria-label={hidden ? 'Show object' : 'Hide object'}
+								title={hidden ? t.showObject : t.hideObject}
+								aria-label={hidden ? t.showObject : t.hideObject}
 							>
 								{#if hidden}
 									<EyeOff class="h-3 w-3 text-muted-foreground/60" />
@@ -284,12 +288,14 @@
 		{#if getSceneObjects().length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
 				<EyeOff class="mb-2 h-5 w-5 text-muted-foreground/30" />
-				<p class="text-xs text-muted-foreground">No objects</p>
+				<p class="text-xs text-muted-foreground">{t.noObjects}</p>
 			</div>
 		{:else if getFilteredLayerGroups().size === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
 				<Search class="mb-2 h-5 w-5 text-muted-foreground/30" />
-				<p class="text-xs text-muted-foreground">No results for "{searchQuery}"</p>
+				<p class="text-xs text-muted-foreground">
+					{t.noResultsFor.replace('{query}', searchQuery)}
+				</p>
 			</div>
 		{/if}
 	</div>

package/dist/components/viewer/Viewer.svelte

@@ -31,6 +31,8 @@
 	import SceneManager from './SceneManager.svelte';
 	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
+	import type { Locale } from '../../i18n/messages';
+	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -50,6 +52,13 @@
 		isBlurred?: boolean;
 		drawerOpen?: boolean;
 		viewerConfig?: ViewerConfig;
+		/**
+		 * UI language for the viewer's own chrome (tools menu, panels, dialogs).
+		 * When set, the viewer provides it to its subtree. When omitted, the viewer
+		 * reads the nearest locale context (set by the host app), defaulting to
+		 * English. Does not translate Grasshopper-sourced names/metadata.
+		 */
+		lang?: Locale;
 	}
 
 	const defaultViewerConfig: Required<ViewerConfig> = {
@@ -68,11 +77,23 @@
 		isSolving = false,
 		isBlurred = false,
 		drawerOpen = false,
-		viewerConfig = {}
+		viewerConfig = {},
+		lang
 	}: Props = $props();
 
 	const config = $derived({ ...defaultViewerConfig, ...viewerConfig });
 
+	// Read any host-provided locale before we (maybe) override it for our subtree.
+	const hostLocale = getLocaleContext();
+
+	// Resolution order: explicit `lang` prop → host locale context → default.
+	// Provide the resolved value to our subtree so the scene manager and metadata
+	// dialog read the same locale. The getter is re-read reactively, so switching
+	// the `lang` prop (or the host's locale) updates the chrome live.
+	setLocaleContext(() => lang ?? hostLocale.locale);
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let canvas: HTMLCanvasElement;
 	let scene: THREE.Scene | null = $state(null);
 	let camera: THREE.PerspectiveCamera | null = null;
@@ -91,14 +112,14 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	const VIEW_PRESETS: { preset: ViewPreset; label: string }[] = [
-		{ preset: 'top', label: 'Top' },
-		{ preset: 'front', label: 'Front' },
-		{ preset: 'right', label: 'Right' },
-		{ preset: 'back', label: 'Back' },
-		{ preset: 'left', label: 'Left' },
-		{ preset: 'bottom', label: 'Bottom' },
-		{ preset: 'iso', label: 'Isometric' }
+	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
+		{ preset: 'top', label: () => t.viewTop },
+		{ preset: 'front', label: () => t.viewFront },
+		{ preset: 'right', label: () => t.viewRight },
+		{ preset: 'back', label: () => t.viewBack },
+		{ preset: 'left', label: () => t.viewLeft },
+		{ preset: 'bottom', label: () => t.viewBottom },
+		{ preset: 'iso', label: () => t.viewIso }
 	];
 
 	// Hide button instantly when expanding, show after animation when collapsing
@@ -128,7 +149,7 @@
 					? (metadata: Record<string, string>) => {
 							if (hasUsefulMetadata(metadata)) {
 								selectedMeshMetadata = metadata;
-								selectedMeshName = metadata?.name || 'Object';
+								selectedMeshName = metadata?.name || t.objectFallbackName;
 							}
 						}
 					: undefined
@@ -265,8 +286,8 @@
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger
 								class="h-10 w-10 shadow-lg hover:shadow-xl flex items-center justify-center rounded-lg border border-border bg-card/90 transition-all hover:bg-card active:scale-95 data-[state=open]:bg-secondary/60"
-								title="Viewer tools"
-								aria-label="Viewer tools"
+								title={t.toolsMenu}
+								aria-label={t.toolsMenu}
 							>
 								<Settings2 class="h-5 w-5 text-card-foreground" />
 							</DropdownMenu.Trigger>
@@ -280,22 +301,22 @@
 									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
 										{#if projection === 'perspective'}
 											<Square class="h-4 w-4" />
-											Switch to 2D
+											{t.switchTo2D}
 										{:else}
 											<Box class="h-4 w-4" />
-											Switch to 3D
+											{t.switchTo3D}
 										{/if}
 									</DropdownMenu.Item>
 
 									<DropdownMenu.Item class={itemClass} onSelect={() => fitToView?.()}>
 										<Frame class="h-4 w-4" />
-										Fit to view
+										{t.fitToView}
 									</DropdownMenu.Item>
 
 									<DropdownMenu.Sub>
 										<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
 											<Box class="h-4 w-4" />
-											<span class="flex-1">Views</span>
+											<span class="flex-1">{t.views}</span>
 											<ChevronRight class="h-4 w-4 text-muted-foreground" />
 										</DropdownMenu.SubTrigger>
 										<DropdownMenu.SubContent
@@ -307,7 +328,7 @@
 													class="px-2 py-1.5 text-sm flex cursor-pointer items-center rounded-sm transition-colors outline-none select-none hover:bg-muted focus:bg-muted"
 													onSelect={() => setView(preset)}
 												>
-													{label}
+													{label()}
 												</DropdownMenu.Item>
 											{/each}
 										</DropdownMenu.SubContent>
@@ -319,7 +340,7 @@
 										onSelect={toggleMeasure}
 									>
 										<Ruler class="h-4 w-4" />
-										<span class="flex-1">Measure</span>
+										<span class="flex-1">{t.measure}</span>
 										{#if measureActive}
 											<Check class="h-4 w-4" />
 										{/if}
@@ -332,7 +353,7 @@
 											onSelect={toggleGrid}
 										>
 											<Grid3x3 class="h-4 w-4" />
-											<span class="flex-1">Grid</span>
+											<span class="flex-1">{t.grid}</span>
 											{#if gridVisible}
 												<Check class="h-4 w-4" />
 											{/if}
@@ -351,7 +372,7 @@
 											onSelect={() => (sceneManagerOpen = !sceneManagerOpen)}
 										>
 											<Layers class="h-4 w-4" />
-											<span class="flex-1">Scene manager</span>
+											<span class="flex-1">{t.sceneManager}</span>
 											{#if sceneManagerOpen}
 												<Check class="h-4 w-4" />
 											{/if}
@@ -361,7 +382,7 @@
 									{#if config.showScreenshotButton}
 										<DropdownMenu.Item class={itemClass} onSelect={downloadScreenshot}>
 											<Camera class="h-4 w-4" />
-											Screenshot
+											{t.screenshot}
 										</DropdownMenu.Item>
 									{/if}
 
@@ -369,10 +390,10 @@
 										<DropdownMenu.Item class={itemClass} onSelect={toggleFullscreen}>
 											{#if isFullscreen}
 												<Minimize class="h-4 w-4" />
-												Exit fullscreen
+												{t.exitFullscreen}
 											{:else}
 												<Maximize class="h-4 w-4" />
-												Fullscreen
+												{t.fullscreen}
 											{/if}
 										</DropdownMenu.Item>
 									{/if}

package/dist/components/viewer/Viewer.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Locale } from '../../i18n/messages';
 export interface ViewerConfig {
     showScreenshotButton?: boolean;
     showFullscreenButton?: boolean;
@@ -15,6 +16,13 @@ interface Props {
     isBlurred?: boolean;
     drawerOpen?: boolean;
     viewerConfig?: ViewerConfig;
+    /**
+     * UI language for the viewer's own chrome (tools menu, panels, dialogs).
+     * When set, the viewer provides it to its subtree. When omitted, the viewer
+     * reads the nearest locale context (set by the host app), defaulting to
+     * English. Does not translate Grasshopper-sourced names/metadata.
+     */
+    lang?: Locale;
 }
 declare const Viewer: import("svelte").Component<Props, {}, "isFullscreen">;
 type Viewer = ReturnType<typeof Viewer>;

package/dist/i18n/localeContext.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Locale, type ViewerMessages } from './messages';
+export interface LocaleContext {
+    /** Current locale. Called reactively — return reactive state to enable live switching. */
+    readonly locale: Locale;
+    /** Resolved message catalog for the current locale. */
+    readonly messages: ViewerMessages;
+}
+/**
+ * Provide the locale to descendants. Pass a getter so a reactive source (a
+ * `$state`, a store, the app's Paraglide locale) keeps consumers in sync.
+ */
+export declare function setLocaleContext(getLocale: () => Locale | undefined): void;
+/**
+ * Read the locale context. Falls back to an English-only context when no
+ * provider exists (e.g. a primitive used in isolation), so consumers never
+ * need a null check.
+ */
+export declare function getLocaleContext(): LocaleContext;

package/dist/i18n/localeContext.svelte.js

@@ -0,0 +1,50 @@
+import { getContext, setContext } from 'svelte';
+import { messagesFor, DEFAULT_LOCALE } from './messages';
+// ============================================================================
+// Viewer locale context
+// ============================================================================
+//
+// Carries the current UI locale down to the viewer and its panels without
+// threading a `lang` prop through every layer. The value is a getter so the
+// host can back it with reactive state — flip the language and the viewer
+// re-renders live.
+//
+// Resolution order for any consuming component:
+//   explicit `lang` prop  →  nearest locale context  →  English default
+//
+// Two ways to provide it:
+//   - Standalone: <Viewer lang="de" /> — Viewer provides the context itself.
+//   - In an app: call setLocaleContext(() => app.locale) once at the root; the
+//     viewer (and anything else) reads it. selva later wires its Paraglide
+//     locale in here.
+const LOCALE_CONTEXT_KEY = Symbol('viewer-locale-context');
+/**
+ * Provide the locale to descendants. Pass a getter so a reactive source (a
+ * `$state`, a store, the app's Paraglide locale) keeps consumers in sync.
+ */
+export function setLocaleContext(getLocale) {
+    const ctx = {
+        get locale() {
+            return getLocale() ?? DEFAULT_LOCALE;
+        },
+        get messages() {
+            return messagesFor(getLocale());
+        }
+    };
+    setContext(LOCALE_CONTEXT_KEY, ctx);
+}
+/**
+ * Read the locale context. Falls back to an English-only context when no
+ * provider exists (e.g. a primitive used in isolation), so consumers never
+ * need a null check.
+ */
+export function getLocaleContext() {
+    return (getContext(LOCALE_CONTEXT_KEY) ?? {
+        get locale() {
+            return DEFAULT_LOCALE;
+        },
+        get messages() {
+            return messagesFor(DEFAULT_LOCALE);
+        }
+    });
+}

package/dist/i18n/messages.d.ts

@@ -0,0 +1,54 @@
+export type Locale = 'en' | 'de';
+export interface ViewerMessages {
+    toolsMenu: string;
+    switchTo2D: string;
+    switchTo3D: string;
+    fitToView: string;
+    views: string;
+    measure: string;
+    grid: string;
+    sceneManager: string;
+    screenshot: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    viewTop: string;
+    viewFront: string;
+    viewRight: string;
+    viewBack: string;
+    viewLeft: string;
+    viewBottom: string;
+    viewIso: string;
+    searchObjects: string;
+    clearSearch: string;
+    expandLayer: string;
+    collapseLayer: string;
+    showLayer: string;
+    hideLayer: string;
+    showObject: string;
+    hideObject: string;
+    noObjects: string;
+    /** `{query}` is replaced with the current search text. */
+    noResultsFor: string;
+    objectFallbackName: string;
+    noMetadata: string;
+    loadingSchema: string;
+    parametersTab: string;
+    moreTab: string;
+    expandPanel: string;
+    collapsePanel: string;
+    /** `{side}` is replaced with `panelSideLeft` / `panelSideRight`. */
+    expandSidePanel: string;
+    panelSideLeft: string;
+    panelSideRight: string;
+    tabNoGroups: string;
+    solving: string;
+    solvingEllipsis: string;
+    solvingSubtitle: string;
+    pressToCalculate: string;
+    calculate: string;
+    upToDate: string;
+}
+export declare const VIEWER_MESSAGES: Record<Locale, ViewerMessages>;
+export declare const DEFAULT_LOCALE: Locale;
+/** Resolve a catalog for a locale, falling back to English for unknown locales. */
+export declare function messagesFor(locale: Locale | undefined): ViewerMessages;