@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

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

@@ -7,7 +7,12 @@
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
 	import { createRequestResponseDriver } from '@selvajs/solve/client';
-	import type { RetainedSolveResult, SolveEventSource, SolveSession } from '@selvajs/solve/client';
+	import type {
+		RetainedSolveResult,
+		SolveEventSource,
+		SolveSession,
+		SolveSettlement
+	} from '@selvajs/solve/client';
 	import SolveMessages from './SolveMessages.svelte';
 	import { meshPolicy } from '@selvajs/visualization/parse';
 	import type { ThreeViewer } from '@selvajs/visualization/render';
@@ -19,8 +24,8 @@
 	import { type ViewerConfig } from '../viewer/Viewer.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 { Locale, ViewerMessages } from '../../i18n/messages';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -34,8 +39,11 @@
 		isEmbedded?: boolean;
 		primaryColor?: string;
 		showModeToggle?: boolean;
+		/** Host actions, listed in the panel footer's ⋯ menu after saving and loading inputs. */
 		panelActions?: ActionButton[];
+		/** Lists "Save inputs…" in the footer menu. */
 		showSaveButton?: boolean;
+		/** Lists "Load inputs…" in the footer menu. */
 		showLoadButton?: boolean;
 		/** When set, persist saved states via this callback instead of downloading a .slvp file. */
 		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
@@ -49,7 +57,7 @@
 		footerText?: string;
 		/**
 		 * How long one solve may take before the client aborts it (ms). Pass the same value the
-		 * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+		 * server enforces for this definition's compute server, or the client aborts solves that would
 		 * have finished.
 		 */
 		solveDeadlineMs: number;
@@ -74,6 +82,12 @@
 			 */
 			getSession: () => SolveSession;
 		}) => void;
+		/**
+		 * Once per settled solve: applied, discarded, blocked, aborted or failed. A result held
+		 * for review counts when the user accepts or rejects it, and one a queued solve replaces
+		 * never does. Auto-solves from input changes count too.
+		 */
+		onSolved?: (settlement: SolveSettlement) => void;
 		/** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
 		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
@@ -92,6 +106,14 @@
 		// Language for the app's own chrome, English when unset. Does not translate
 		// schema-authored labels or Grasshopper-sourced names/metadata.
 		lang?: Locale;
+		/**
+		 * Replaces individual strings of the app's own chrome, layered over the `lang` catalog
+		 * (`VIEWER_MESSAGES`): reword a label, or supply every string for a language with no
+		 * built-in catalog. Reaches every component inside, the viewer included. A `{name}`
+		 * placeholder in the default is filled the same way in an override. The preset manager's
+		 * strings come from `presetLabels` instead.
+		 */
+		messages?: Partial<ViewerMessages>;
 	}
 
 	let {
@@ -123,22 +145,26 @@
 		brandName,
 		header,
 		onReady,
+		onSolved,
 		onViewerReady,
 		viewerConfig = {},
 		externalScopeKey,
 		clientSlot,
-		lang
+		lang,
+		messages
 	}: Props = $props();
 
 	// Reaches InputControl deep in the tree.
 	// svelte-ignore state_referenced_locally
 	setClientSlot(clientSlot);
 
-	// Resolution: explicit `lang` → host-provided locale → English. Passed as a getter so
-	// switching `lang` updates the chrome live.
-	const hostLocale = getLocaleContext();
-	setLocaleContext(() => lang ?? hostLocale.locale);
-	const t = $derived(getLocaleContext().messages);
+	// Resolution: explicit `lang` → host-provided locale → English, with `messages` on top.
+	// Getters, so switching either updates the chrome live.
+	const locale = layerLocaleContext(
+		() => lang,
+		() => messages
+	);
+	const t = $derived(locale.messages);
 
 	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
@@ -168,6 +194,9 @@
 
 	const solvingIndicator = createSolvingIndicator(() => session.isSolving);
 
+	// Read at call time, so a host swapping the callback needs no resubscribe.
+	$effect(() => session.onSettled((settlement) => onSolved?.(settlement)));
+
 	$effect(() => {
 		onReady?.({
 			loadValues: (incoming) => session.loadValues(incoming),
@@ -254,9 +283,13 @@
 			{#key definitionKey}
 				<AppLayout
 					{schema}
+					showViewer={!!schema.viewerOptions?.enableRemote}
 					meshes={session.meshes}
 					isSolving={session.isSolving}
-					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
+					showSolvingIndicator={solvingIndicator.show}
+					solveIsSlow={solvingIndicator.slow}
+					live={session.live}
+					onabort={() => session.abort()}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -272,6 +305,7 @@
 					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
+					ensureSolved={() => session.ensureSolved()}
 					onLoadValues={() => session.loadValues({})}
 				/>
 			{/key}
@@ -286,15 +320,5 @@
 	onabort={() => session.abort()}
 	onconfirm={() => session.acknowledge()}
 	ondiscard={() => session.discard()}
-	labels={{
-		solving: t.solveSolving,
-		blockedTitle: t.solveBlockedTitle,
-		messagesTitle: t.solveMessagesTitle,
-		blockedDescription: t.solveBlocked,
-		messagesDescription: t.solveMessagesDescription,
-		confirm: t.solveMessagesConfirm,
-		discard: t.solveMessagesDiscard,
-		abort: t.solveMessagesAbort,
-		dismiss: t.solveMessagesDismiss
-	}}
+	progressShownByHost={schema?.instanceSolve !== false}
 />

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

@@ -8,8 +8,10 @@
 
 	import type { Snippet } from 'svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import * as Dialog from '$lib/components/primitives/dialog';
-	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
+	import * as Dialog from '#lib/components/primitives/dialog/index.js';
+	import IssueList, { type Issue } from '#lib/components/primitives/IssueList.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatCount } from '#lib/i18n/messages.js';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */
@@ -23,6 +25,9 @@
 
 	let { diagnostics, errors = [], warnings = [], trigger }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let open = $state(false);
 
 	const rows = $derived<SolveDiagnostic[]>(
@@ -41,26 +46,11 @@
 		count: number;
 	}
 
-	const LEVELS = [
-		{
-			level: 'error',
-			severity: 'error',
-			one: 'error',
-			many: 'errors'
-		},
-		{
-			level: 'warning',
-			severity: 'warning',
-			one: 'warning',
-			many: 'warnings'
-		},
-		{
-			level: 'remark',
-			severity: 'note',
-			one: 'note',
-			many: 'notes'
-		}
-	] as const;
+	const levels = $derived([
+		{ level: 'error', severity: 'error', one: t.errorCountOne, other: t.errorCountOther },
+		{ level: 'warning', severity: 'warning', one: t.warningCountOne, other: t.warningCountOther },
+		{ level: 'remark', severity: 'note', one: t.noteCountOne, other: t.noteCountOther }
+	] as const);
 
 	/**
 	 * One section per level that has messages, most severe first; within a level, the order the
@@ -68,23 +58,25 @@
 	 * branches raises the same warning 200 times, and an unstacked list buries every other message.
 	 */
 	const sections = $derived(
-		LEVELS.map((meta) => {
-			// A null-prototype object rather than a Map: a local built fresh on each derive, never
-			// reactive state, and the lint rule that steers Map → SvelteMap cannot tell them apart.
-			const byKey: Record<string, Item> = Object.create(null);
-			const items: Item[] = [];
-			for (const d of rows) {
-				if (d.level !== meta.level) continue;
-				const key = `${d.message} ${d.source ?? ''}`;
-				if (byKey[key]) {
-					byKey[key].count++;
-				} else {
-					byKey[key] = { level: d.level, message: d.message, source: d.source, count: 1 };
-					items.push(byKey[key]);
+		levels
+			.map((meta) => {
+				// A null-prototype object rather than a Map: a local built fresh on each derive, never
+				// reactive state, and the lint rule that steers Map → SvelteMap cannot tell them apart.
+				const byKey: Record<string, Item> = Object.create(null);
+				const items: Item[] = [];
+				for (const d of rows) {
+					if (d.level !== meta.level) continue;
+					const key = `${d.message} ${d.source ?? ''}`;
+					if (byKey[key]) {
+						byKey[key].count++;
+					} else {
+						byKey[key] = { level: d.level, message: d.message, source: d.source, count: 1 };
+						items.push(byKey[key]);
+					}
 				}
-			}
-			return { ...meta, items };
-		}).filter((section) => section.items.length > 0)
+				return { ...meta, items };
+			})
+			.filter((section) => section.items.length > 0)
 	);
 
 	const issues = $derived<Issue[]>(
@@ -106,13 +98,11 @@
 
 	<Dialog.Content class="max-w-lg">
 		<Dialog.Header>
-			<Dialog.Title>Messages</Dialog.Title>
+			<Dialog.Title>{t.messagesTitle}</Dialog.Title>
 			<Dialog.Description>
 				{#each sections as section, i (section.level)}
 					{#if i > 0}<span class="mx-1.5">·</span>{/if}
-					<span
-						>{section.items.length} {section.items.length === 1 ? section.one : section.many}</span
-					>
+					<span>{formatCount(section.items.length, section.one, section.other)}</span>
 				{/each}
 			</Dialog.Description>
 		</Dialog.Header>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Download, Upload } from '@lucide/svelte';
+	import { Upload } from '@lucide/svelte';
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import {
 		createSavedState,
@@ -9,17 +9,13 @@
 		importStateFromJson
 	} from '../../schema/param-exporter';
 	import { Button, Input, Label, Textarea, Dialog, Callout, IssueList, toast } from '../primitives';
-
-	import type { ActionButton } from '../../types/actionButton';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
+	import { pickFile } from '../../utils/host-files';
 
 	interface Props {
 		schema: UISchema;
 		currentValues: Record<string, unknown>;
 		onLoadValues: (values: Record<string, unknown>) => void;
-		showSaveButton?: boolean;
-		showLoadButton?: boolean;
-		actions?: ActionButton[];
 		/** When set, persist saved states via this callback instead of downloading a .slvp file. */
 		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
 		/** When set, the Load dialog lists these states instead of showing a file input. */
@@ -28,17 +24,7 @@
 		labels?: Partial<PresetLabels>;
 	}
 
-	let {
-		schema,
-		currentValues,
-		onLoadValues,
-		showSaveButton = true,
-		showLoadButton = true,
-		actions = [],
-		onSaveState,
-		onListStates,
-		labels
-	}: Props = $props();
+	let { schema, currentValues, onLoadValues, onSaveState, onListStates, labels }: Props = $props();
 
 	const t = $derived({ ...DEFAULT_PRESET_LABELS, ...labels });
 
@@ -52,13 +38,13 @@
 	let showLoadDialog = $state(false);
 	let loadResult = $state<PresetLoadResult | null>(null);
 	let loadingPresetName = $state('');
-	let fileInputRef = $state<HTMLInputElement | null>(null);
 
 	let listedStates = $state<ParameterPreset[]>([]);
 	let isLoadingList = $state(false);
 	let listError = $state('');
 
-	function openExportDialog() {
+	/** Opens the save dialog. The panel footer's menu calls it. */
+	export function openSave() {
 		exportName = `State ${new Date().toLocaleDateString()}`;
 		exportDescription = '';
 		exportAuthor = schema.author || '';
@@ -83,7 +69,7 @@
 		});
 
 		if (onSaveState) await onSaveState(state);
-		else exportStateAsJson(state);
+		else await exportStateAsJson(state);
 		showExportDialog = false;
 	}
 
@@ -100,19 +86,16 @@
 		}
 	}
 
-	async function handleImport(event: Event) {
-		const input = event.target as HTMLInputElement;
-		if (!input.files || input.files.length === 0) return;
+	async function importFromFile() {
+		// .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it.
+		const file = await pickFile({ accept: '.slvp,.sps' });
+		if (!file) return;
 
 		try {
-			const imported = await importStateFromJson(input.files[0]);
-			tryLoad(imported);
+			tryLoad(await importStateFromJson(file));
 		} catch (error) {
 			toast.error(t.loadImportError + (error as Error).message);
 		}
-
-		// Reset so re-picking the same file fires `change` again.
-		input.value = '';
 	}
 
 	function confirmLoad() {
@@ -128,7 +111,8 @@
 		loadResult = null;
 	}
 
-	async function openLoadDialog() {
+	/** Opens the load dialog. The panel footer's menu calls it. */
+	export async function openLoad() {
 		showLoadDialog = true;
 		if (!onListStates) return;
 
@@ -145,8 +129,8 @@
 	}
 
 	function handleLoadClick() {
-		fileInputRef?.click();
 		showLoadDialog = false;
+		void importFromFile();
 	}
 
 	function selectListedState(preset: ParameterPreset) {
@@ -155,39 +139,6 @@
 	}
 </script>
 
-{#if showSaveButton}
-	<Button variant="outline" size="sm" onclick={openExportDialog}>
-		<Download class="mr-2 h-4 w-4" />
-		{t.saveButton}
-	</Button>
-{/if}
-
-{#if showLoadButton}
-	<Button variant="outline" size="sm" onclick={openLoadDialog}>
-		<Upload class="mr-2 h-4 w-4" />
-		{t.loadButton}
-	</Button>
-{/if}
-
-{#each actions as action (action.id)}
-	<Button variant={action.variant ?? 'outline'} size={action.size ?? 'sm'} onclick={action.onclick}>
-		{#if action.icon}
-			{@const IconComponent = action.icon}
-			<IconComponent class="mr-2 h-4 w-4" />
-		{/if}
-		{action.label}
-	</Button>
-{/each}
-
-<!-- .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it. -->
-<input
-	bind:this={fileInputRef}
-	type="file"
-	accept=".slvp,.sps"
-	onchange={handleImport}
-	class="hidden"
-/>
-
 <!-- Save Dialog -->
 <Dialog.Root bind:open={showExportDialog}>
 	<Dialog.Content>
@@ -225,7 +176,7 @@
 
 		<Dialog.Footer>
 			<Button variant="outline" onclick={() => (showExportDialog = false)}>{t.cancelButton}</Button>
-			<Button onclick={handleExport}>{t.saveButton}</Button>
+			<Button onclick={handleExport}>{t.saveConfirmButton}</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -252,7 +203,7 @@
 							<button
 								type="button"
 								onclick={() => selectListedState(preset)}
-								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-hover"
 							>
 								<div class="text-sm font-medium">{preset.name}</div>
 								{#if preset.description}