@selvajs/ui 4.8.0 → 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/i18n/messages.d.ts

@@ -31,6 +31,22 @@ export interface ViewerMessages {
     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;

package/dist/i18n/messages.js

@@ -40,7 +40,22 @@ const en = {
     noObjects: 'No objects',
     noResultsFor: 'No results for "{query}"',
     objectFallbackName: 'Object',
-    noMetadata: 'No metadata'
+    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 = {
     toolsMenu: 'Viewer-Werkzeuge',
@@ -72,7 +87,22 @@ const de = {
     noObjects: 'Keine Objekte',
     noResultsFor: 'Keine Ergebnisse für „{query}“',
     objectFallbackName: 'Objekt',
-    noMetadata: 'Keine Metadaten'
+    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 = { en, de };
 export const DEFAULT_LOCALE = 'en';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.8.0",
+  "version": "4.9.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/schemas": "4.5.0",
-    "@selvajs/config": "0.0.1"
+    "@selvajs/config": "0.0.1",
+    "@selvajs/schemas": "4.5.0"
   },
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/compute/AppLayout.svelte

@@ -11,6 +11,10 @@
 	import * as Resizable from '$lib/components/primitives/resizable';
 	import { Button } from '$lib';
 	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/src/lib/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/src/lib/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/src/lib/components/preview/TabContent.svelte

@@ -14,6 +14,10 @@
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
 	import { evaluateGroupVisibility } from '$lib/schema/visibility-rules';
+	import { getLocaleContext } from '$lib/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/src/lib/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/src/lib/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/src/lib/i18n/messages.ts

@@ -52,6 +52,26 @@ export interface ViewerMessages {
 	// 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 = {
@@ -87,7 +107,24 @@ const en: ViewerMessages = {
 	noResultsFor: 'No results for "{query}"',
 
 	objectFallbackName: 'Object',
-	noMetadata: 'No metadata'
+	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 = {
@@ -123,7 +160,24 @@ const de: ViewerMessages = {
 	noResultsFor: 'Keine Ergebnisse für „{query}“',
 
 	objectFallbackName: 'Objekt',
-	noMetadata: 'Keine Metadaten'
+	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 };