@selvajs/ui 4.7.1 → 4.9.0

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,190 @@
+// ============================================================================
+// 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;
+
+	// App layout / compute shell
+	loadingSchema: string;
+	parametersTab: string;
+	moreTab: string;
+	expandPanel: string;
+	collapsePanel: string;
+	/** `{side}` is replaced with `panelSideLeft` / `panelSideRight`. */
+	expandSidePanel: string;
+	panelSideLeft: string;
+	panelSideRight: string;
+	tabNoGroups: string;
+
+	// Solve controls
+	solving: string;
+	solvingEllipsis: string;
+	solvingSubtitle: string;
+	pressToCalculate: string;
+	calculate: string;
+	upToDate: 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',
+
+	loadingSchema: 'Loading schema...',
+	parametersTab: 'Parameters',
+	moreTab: 'More',
+	expandPanel: 'Expand panel',
+	collapsePanel: 'Collapse panel',
+	expandSidePanel: 'Expand {side} panel',
+	panelSideLeft: 'left',
+	panelSideRight: 'right',
+	tabNoGroups: 'This tab has no groups configured.',
+
+	solving: 'Solving',
+	solvingEllipsis: 'Solving...',
+	solvingSubtitle: 'Grasshopper is calculating...',
+	pressToCalculate: 'Press to calculate',
+	calculate: 'Calculate',
+	upToDate: 'Up to date'
+};
+
+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',
+
+	loadingSchema: 'Schema wird geladen...',
+	parametersTab: 'Parameter',
+	moreTab: 'Mehr',
+	expandPanel: 'Bereich aufklappen',
+	collapsePanel: 'Bereich zuklappen',
+	expandSidePanel: '{side} Bereich aufklappen',
+	panelSideLeft: 'Linken',
+	panelSideRight: 'Rechten',
+	tabNoGroups: 'Für diesen Tab sind keine Gruppen konfiguriert.',
+
+	solving: 'Berechnung läuft',
+	solvingEllipsis: 'Berechnung läuft...',
+	solvingSubtitle: 'Grasshopper berechnet...',
+	pressToCalculate: 'Zum Berechnen klicken',
+	calculate: 'Berechnen',
+	upToDate: 'Aktuell'
+};
+
+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';