@selvajs/ui 4.7.1 → 4.8.0

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,38 @@
+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;
+}
+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;

package/dist/i18n/messages.js

@@ -0,0 +1,82 @@
+// ============================================================================
+// Viewer message catalog (library-owned strings)
+// ============================================================================
+//
+// These are the strings @selvajs/ui renders itself in the 3D viewer and its
+// panels — tool menu, view presets, scene manager, metadata dialog. They are
+// NOT the strings that come from a Grasshopper definition (mesh/layer/metadata
+// names): those live in the user's .gh file and can't be translated here.
+//
+// The library ships English + German. A host app can switch locale at runtime
+// via the locale context (see ./localeContext.svelte.ts) — e.g. selva feeds its
+// own Paraglide locale in. With no provider, components fall back to English.
+const en = {
+    toolsMenu: 'Viewer tools',
+    switchTo2D: 'Switch to 2D',
+    switchTo3D: 'Switch to 3D',
+    fitToView: 'Fit to view',
+    views: 'Views',
+    measure: 'Measure',
+    grid: 'Grid',
+    sceneManager: 'Scene manager',
+    screenshot: 'Screenshot',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    viewTop: 'Top',
+    viewFront: 'Front',
+    viewRight: 'Right',
+    viewBack: 'Back',
+    viewLeft: 'Left',
+    viewBottom: 'Bottom',
+    viewIso: 'Isometric',
+    searchObjects: 'Search objects...',
+    clearSearch: 'Clear search',
+    expandLayer: 'Expand layer',
+    collapseLayer: 'Collapse layer',
+    showLayer: 'Show layer',
+    hideLayer: 'Hide layer',
+    showObject: 'Show object',
+    hideObject: 'Hide object',
+    noObjects: 'No objects',
+    noResultsFor: 'No results for "{query}"',
+    objectFallbackName: 'Object',
+    noMetadata: 'No metadata'
+};
+const de = {
+    toolsMenu: 'Viewer-Werkzeuge',
+    switchTo2D: 'Zu 2D wechseln',
+    switchTo3D: 'Zu 3D wechseln',
+    fitToView: 'Ansicht anpassen',
+    views: 'Ansichten',
+    measure: 'Messen',
+    grid: 'Raster',
+    sceneManager: 'Szenen-Manager',
+    screenshot: 'Screenshot',
+    fullscreen: 'Vollbild',
+    exitFullscreen: 'Vollbild beenden',
+    viewTop: 'Oben',
+    viewFront: 'Vorne',
+    viewRight: 'Rechts',
+    viewBack: 'Hinten',
+    viewLeft: 'Links',
+    viewBottom: 'Unten',
+    viewIso: 'Isometrisch',
+    searchObjects: 'Objekte suchen...',
+    clearSearch: 'Suche löschen',
+    expandLayer: 'Ebene aufklappen',
+    collapseLayer: 'Ebene zuklappen',
+    showLayer: 'Ebene einblenden',
+    hideLayer: 'Ebene ausblenden',
+    showObject: 'Objekt einblenden',
+    hideObject: 'Objekt ausblenden',
+    noObjects: 'Keine Objekte',
+    noResultsFor: 'Keine Ergebnisse für „{query}“',
+    objectFallbackName: 'Objekt',
+    noMetadata: 'Keine Metadaten'
+};
+export const VIEWER_MESSAGES = { en, de };
+export const DEFAULT_LOCALE = 'en';
+/** Resolve a catalog for a locale, falling back to English for unknown locales. */
+export function messagesFor(locale) {
+    return VIEWER_MESSAGES[locale ?? DEFAULT_LOCALE] ?? VIEWER_MESSAGES[DEFAULT_LOCALE];
+}

package/dist/public.d.ts

@@ -1,6 +1,9 @@
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
 export { default as Viewer, type ViewerConfig } from './components/viewer/Viewer.svelte';
+export type { Locale, ViewerMessages } from './i18n/messages';
+export { VIEWER_MESSAGES, DEFAULT_LOCALE, messagesFor } from './i18n/messages';
+export { setLocaleContext, getLocaleContext, type LocaleContext } from './i18n/localeContext.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from './compute/createSolveSession.svelte';
 export type { ClientSlotArgs, ClientSlot } from './contexts/clientSlotContext.svelte';

package/dist/public.js

@@ -22,8 +22,11 @@ export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
 // Standalone 3D viewer. Render Grasshopper meshes on their own, outside a
 // ComputeApp host — external apps drive it directly with a `meshes` array and
-// an optional `viewerConfig`.
+// an optional `viewerConfig`. Pass `lang` to localize its chrome, or provide a
+// locale context (setLocaleContext) at the host root to drive it app-wide.
 export { default as Viewer } from './components/viewer/Viewer.svelte';
+export { VIEWER_MESSAGES, DEFAULT_LOCALE, messagesFor } from './i18n/messages';
+export { setLocaleContext, getLocaleContext } from './i18n/localeContext.svelte';
 // Full-screen states a host app renders
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Solve Session seam (transport-agnostic value/lifecycle state machine + its

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -72,8 +72,8 @@
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
     "vitest": "^3.2.6",
-    "@selvajs/config": "0.0.1",
-    "@selvajs/schemas": "4.5.0"
+    "@selvajs/schemas": "4.5.0",
+    "@selvajs/config": "0.0.1"
   },
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/viewer/MeshMetadataDialog.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import * as Dialog from '../primitives/dialog/index.js';
+	import { getLocaleContext } from '$lib/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/src/lib/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 '$lib/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/src/lib/components/viewer/Viewer.svelte

@@ -31,6 +31,8 @@
 	import SceneManager from './SceneManager.svelte';
 	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
 	import * as Resizable from '$lib/components/primitives/resizable/index.js';
+	import type { Locale } from '$lib/i18n/messages';
+	import { setLocaleContext, getLocaleContext } from '$lib/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/src/lib/i18n/localeContext.svelte.ts

@@ -0,0 +1,63 @@
+import { getContext, setContext } from 'svelte';
+import { type Locale, type ViewerMessages, 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');
+
+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 function setLocaleContext(getLocale: () => Locale | undefined): void {
+	const ctx: LocaleContext = {
+		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(): LocaleContext {
+	return (
+		getContext<LocaleContext | undefined>(LOCALE_CONTEXT_KEY) ?? {
+			get locale() {
+				return DEFAULT_LOCALE;
+			},
+			get messages() {
+				return messagesFor(DEFAULT_LOCALE);
+			}
+		}
+	);
+}

package/src/lib/i18n/messages.ts

@@ -0,0 +1,136 @@
+// ============================================================================
+// Viewer message catalog (library-owned strings)
+// ============================================================================
+//
+// These are the strings @selvajs/ui renders itself in the 3D viewer and its
+// panels — tool menu, view presets, scene manager, metadata dialog. They are
+// NOT the strings that come from a Grasshopper definition (mesh/layer/metadata
+// names): those live in the user's .gh file and can't be translated here.
+//
+// The library ships English + German. A host app can switch locale at runtime
+// via the locale context (see ./localeContext.svelte.ts) — e.g. selva feeds its
+// own Paraglide locale in. With no provider, components fall back to English.
+
+export type Locale = 'en' | 'de';
+
+export interface ViewerMessages {
+	// Tools menu
+	toolsMenu: string;
+	switchTo2D: string;
+	switchTo3D: string;
+	fitToView: string;
+	views: string;
+	measure: string;
+	grid: string;
+	sceneManager: string;
+	screenshot: string;
+	fullscreen: string;
+	exitFullscreen: string;
+
+	// View presets
+	viewTop: string;
+	viewFront: string;
+	viewRight: string;
+	viewBack: string;
+	viewLeft: string;
+	viewBottom: string;
+	viewIso: string;
+
+	// Scene manager
+	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;
+
+	// Metadata dialog
+	objectFallbackName: string;
+	noMetadata: string;
+}
+
+const en: ViewerMessages = {
+	toolsMenu: 'Viewer tools',
+	switchTo2D: 'Switch to 2D',
+	switchTo3D: 'Switch to 3D',
+	fitToView: 'Fit to view',
+	views: 'Views',
+	measure: 'Measure',
+	grid: 'Grid',
+	sceneManager: 'Scene manager',
+	screenshot: 'Screenshot',
+	fullscreen: 'Fullscreen',
+	exitFullscreen: 'Exit fullscreen',
+
+	viewTop: 'Top',
+	viewFront: 'Front',
+	viewRight: 'Right',
+	viewBack: 'Back',
+	viewLeft: 'Left',
+	viewBottom: 'Bottom',
+	viewIso: 'Isometric',
+
+	searchObjects: 'Search objects...',
+	clearSearch: 'Clear search',
+	expandLayer: 'Expand layer',
+	collapseLayer: 'Collapse layer',
+	showLayer: 'Show layer',
+	hideLayer: 'Hide layer',
+	showObject: 'Show object',
+	hideObject: 'Hide object',
+	noObjects: 'No objects',
+	noResultsFor: 'No results for "{query}"',
+
+	objectFallbackName: 'Object',
+	noMetadata: 'No metadata'
+};
+
+const de: ViewerMessages = {
+	toolsMenu: 'Viewer-Werkzeuge',
+	switchTo2D: 'Zu 2D wechseln',
+	switchTo3D: 'Zu 3D wechseln',
+	fitToView: 'Ansicht anpassen',
+	views: 'Ansichten',
+	measure: 'Messen',
+	grid: 'Raster',
+	sceneManager: 'Szenen-Manager',
+	screenshot: 'Screenshot',
+	fullscreen: 'Vollbild',
+	exitFullscreen: 'Vollbild beenden',
+
+	viewTop: 'Oben',
+	viewFront: 'Vorne',
+	viewRight: 'Rechts',
+	viewBack: 'Hinten',
+	viewLeft: 'Links',
+	viewBottom: 'Unten',
+	viewIso: 'Isometrisch',
+
+	searchObjects: 'Objekte suchen...',
+	clearSearch: 'Suche löschen',
+	expandLayer: 'Ebene aufklappen',
+	collapseLayer: 'Ebene zuklappen',
+	showLayer: 'Ebene einblenden',
+	hideLayer: 'Ebene ausblenden',
+	showObject: 'Objekt einblenden',
+	hideObject: 'Objekt ausblenden',
+	noObjects: 'Keine Objekte',
+	noResultsFor: 'Keine Ergebnisse für „{query}“',
+
+	objectFallbackName: 'Objekt',
+	noMetadata: 'Keine Metadaten'
+};
+
+export const VIEWER_MESSAGES: Record<Locale, ViewerMessages> = { en, de };
+
+export const DEFAULT_LOCALE: Locale = 'en';
+
+/** Resolve a catalog for a locale, falling back to English for unknown locales. */
+export function messagesFor(locale: Locale | undefined): ViewerMessages {
+	return VIEWER_MESSAGES[locale ?? DEFAULT_LOCALE] ?? VIEWER_MESSAGES[DEFAULT_LOCALE];
+}

package/src/lib/public.ts

@@ -24,9 +24,22 @@ export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
 
 // Standalone 3D viewer. Render Grasshopper meshes on their own, outside a
 // ComputeApp host — external apps drive it directly with a `meshes` array and
-// an optional `viewerConfig`.
+// an optional `viewerConfig`. Pass `lang` to localize its chrome, or provide a
+// locale context (setLocaleContext) at the host root to drive it app-wide.
 export { default as Viewer, type ViewerConfig } from './components/viewer/Viewer.svelte';
 
+// Viewer localization. The library renders English + German chrome; switch at
+// runtime by passing `lang` to <Viewer> or by setting a reactive locale context
+// once at the host root (e.g. feed in an app-wide Paraglide locale). Does not
+// translate Grasshopper-sourced names/metadata.
+export type { Locale, ViewerMessages } from './i18n/messages';
+export { VIEWER_MESSAGES, DEFAULT_LOCALE, messagesFor } from './i18n/messages';
+export {
+	setLocaleContext,
+	getLocaleContext,
+	type LocaleContext
+} from './i18n/localeContext.svelte';
+
 // Full-screen states a host app renders
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';