@selvajs/ui 6.6.0-beta.4 → 6.6.0-beta.6

package/src/lib/components/preview/OutputDisplay.svelte

@@ -14,6 +14,8 @@
 	import HelpButton from './HelpButton.svelte';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { Label } from '$lib/components/primitives/label';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatCount, formatMessage } from '$lib/i18n/messages';
 
 	interface Props {
 		item: OutputLayoutItem;
@@ -23,6 +25,9 @@
 
 	let { item, value, displayName }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let copied = $state(false);
 	let copyTimeout: ReturnType<typeof setTimeout>;
 
@@ -142,7 +147,7 @@
 				await downloadFiles(filesArray, fileName);
 			}
 		} catch (err) {
-			downloadError = err instanceof Error ? err.message : 'Failed to download files';
+			downloadError = err instanceof Error ? err.message : t.downloadFailed;
 			console.error('[OutputDisplayWidget] Download error:', err);
 		} finally {
 			downloading = false;
@@ -160,7 +165,7 @@
 {/snippet}
 
 {#snippet placeholder()}
-	<span class="text-muted-foreground not-italic">Waiting for data...</span>
+	<span class="text-muted-foreground not-italic">{t.waitingForData}</span>
 {/snippet}
 
 {#snippet treeNodes(nodes: Map<string, TreeNode>, path: string)}
@@ -209,7 +214,7 @@
 {#snippet fileDisplay()}
 	{#if fileCount === 0}
 		<div class="rounded px-3 py-3 text-sm border border-border bg-muted text-muted-foreground">
-			Waiting for file data...
+			{t.waitingForFiles}
 		</div>
 	{:else}
 		<div class="gap-2 flex flex-col">
@@ -218,7 +223,7 @@
 					<span class="min-w-0 text-sm font-medium truncate text-foreground">
 						{fileCount === 1
 							? `${filesArray[0].fileName}${filesArray[0].fileType}`
-							: `${fileCount} files`}
+							: formatMessage(t.fileCount, { count: fileCount })}
 					</span>
 					<span class="text-xs shrink-0 text-muted-foreground">{formatFileSize(totalSize)}</span>
 				</div>
@@ -245,18 +250,16 @@
 				<div
 					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
 				>
-					<div class="font-medium">Duplicate file names detected</div>
+					<div class="font-medium">{t.duplicateFilesTitle}</div>
 					<div class="mt-1 text-xs">
-						The following {duplicatePaths.length === 1 ? 'path appears' : 'paths appear'} more than once:
+						{formatCount(duplicatePaths.length, t.duplicatePathsOne, t.duplicatePathsOther)}
 					</div>
 					<ul class="mt-1 ml-4 text-xs list-disc">
 						{#each duplicatePaths as path (path)}
 							<li class="truncate"><span class="font-mono">{path}</span></li>
 						{/each}
 					</ul>
-					<div class="mt-1 text-xs">
-						Rename outputs in your Grasshopper definition so each file has a unique name.
-					</div>
+					<div class="mt-1 text-xs">{t.duplicateFilesHint}</div>
 				</div>
 			{/if}
 			{#if downloadError}
@@ -268,8 +271,10 @@
 			{/if}
 			<Button onclick={handleDownload} disabled={downloading || hasDuplicates} class="w-full">
 				{downloading
-					? 'Downloading...'
-					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}
+					? t.downloading
+					: fileCount === 1
+						? t.downloadFile
+						: formatMessage(t.downloadFiles, { count: fileCount })}
 			</Button>
 		</div>
 	{/if}
@@ -316,7 +321,7 @@
 							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}"
 					>
 						<Button onclick={copyToClipboard} size="sm">
-							{copied ? 'Copied!' : 'Copy'}
+							{copied ? t.copied : t.copy}
 						</Button>
 					</div>
 				{/if}

package/src/lib/components/preview/TabContent.svelte

@@ -87,6 +87,9 @@
 	<div class="h-full bg-muted dark:bg-background">
 		<ScrollArea class="h-full" orientation="vertical">
 			<div class="px-3">
+				<!-- A heading per panel lets a screen reader jump between them; the tab, when shown,
+				     already names it on screen. -->
+				<h2 class="sr-only">{tab.label}</h2>
 				{#if visibleGroups.length === 0}
 					<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 				{:else}

package/src/lib/components/preview/inputs/ColorInput.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	interface Props {
+		inputId: string;
 		value?: string;
 		onChange: (value: string) => void;
 	}
 
-	let { value = '#000000', onChange }: Props = $props();
+	let { inputId, value = '#000000', onChange }: Props = $props();
 </script>
 
 <div class="gap-2 flex items-center">
 	<input
+		id={inputId}
 		type="color"
 		value={value || '#000000'}
 		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background dark:bg-input/30"

package/src/lib/components/preview/inputs/DropdownInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
 	import * as Select from '$lib/components/primitives/select';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
 
 	interface Props {
 		value?: string;
@@ -11,6 +12,8 @@
 
 	let { value, config, onChange, disabled = false }: Props = $props();
 
+	const locale = getLocaleContext();
+
 	const options = $derived(config?.options || {});
 	const currentValue = $derived(value || '');
 	const currentLabel = $derived(
@@ -30,7 +33,7 @@
 	{disabled}
 >
 	<Select.Trigger class="w-full" {disabled}>
-		{currentLabel || 'Select an option...'}
+		{currentLabel || locale.messages.selectOption}
 	</Select.Trigger>
 	<Select.Content>
 		{#each Object.entries(options) as [name, expr] (name)}

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -5,6 +5,8 @@
 	import { toast } from '$lib/components/primitives/sonner';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
 	import { APP_DEFAULTS } from '$lib/constants';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
 
 	interface Props {
 		value?: string;
@@ -22,6 +24,9 @@
 		onChange
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let effectiveModes = $derived(
 		allowedInputModes && allowedInputModes.length > 0
 			? allowedInputModes
@@ -52,9 +57,12 @@
 				if (parsed.type === 'base64') {
 					if (parsed._isMetadata && parsed._fileSize) {
 						const sizeMB = (parsed._fileSize / 1024 / 1024).toFixed(2);
-						uploadedFileName = `Uploaded file (${parsed.fileEnding}, ${sizeMB}MB)`;
+						uploadedFileName = formatMessage(t.uploadedFileSize, {
+							ext: parsed.fileEnding,
+							size: sizeMB
+						});
 					} else {
-						uploadedFileName = `Uploaded file (${parsed.fileEnding})`;
+						uploadedFileName = formatMessage(t.uploadedFile, { ext: parsed.fileEnding });
 					}
 				} else if (parsed.type === 'url') {
 					urlInput = parsed.file;
@@ -65,6 +73,20 @@
 		}
 	});
 
+	function formatNotAccepted(fileEnding: string): string {
+		return formatMessage(t.fileFormatNotAccepted, {
+			ext: fileEnding,
+			formats: acceptedFormats.join(', ')
+		});
+	}
+
+	function formatTooLarge(bytes: number): string {
+		return formatMessage(t.fileTooLarge, {
+			size: (bytes / 1024 / 1024).toFixed(2),
+			max: APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB
+		});
+	}
+
 	function getFileExtension(filename: string): string {
 		// Strip query strings before extracting extension
 		const cleanPath = filename.split('?')[0];
@@ -96,19 +118,21 @@
 			try {
 				parsedUrl = new URL(urlInput);
 			} catch {
-				urlError = { message: 'Invalid URL — make sure it starts with https://', isCors: false };
+				urlError = { message: t.urlInvalid, isCors: false };
 				return;
 			}
 
 			if (parsedUrl.protocol !== 'https:' && parsedUrl.protocol !== 'http:') {
-				urlError = { message: 'Only http:// and https:// URLs are supported.', isCors: false };
+				urlError = { message: t.urlProtocolUnsupported, isCors: false };
 				return;
 			}
 
 			const response = await fetch(urlInput);
 			if (!response.ok) {
 				urlError = {
-					message: `Server returned ${response.status} ${response.statusText}. Check the URL is correct and publicly accessible.`,
+					message: formatMessage(t.urlServerError, {
+						status: `${response.status} ${response.statusText}`.trim()
+					}),
 					isCors: false
 				};
 				return;
@@ -118,17 +142,14 @@
 			const fileEnding = getFileExtension(urlInput);
 
 			if (!isValidFileExtension(fileEnding)) {
-				urlError = {
-					message: `File format "${fileEnding}" is not accepted. Allowed: ${acceptedFormats.join(', ')}`,
-					isCors: false
-				};
+				urlError = { message: formatNotAccepted(fileEnding), isCors: false };
 				return;
 			}
 
 			const maxSize = APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES;
 			if (blob.size > maxSize) {
 				urlError = {
-					message: `File too large: ${(blob.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB). Download it and use Upload instead.`,
+					message: `${formatTooLarge(blob.size)} ${t.fileTooLargeUseUpload}`,
 					isCors: false
 				};
 				return;
@@ -140,12 +161,15 @@
 					const result = e.target?.result as string;
 					resolve(result.includes(',') ? result.split(',')[1] : result);
 				};
-				reader.onerror = () => reject(new Error('Failed to read the downloaded file.'));
+				reader.onerror = () => reject(new Error(t.fileReadFailed));
 				reader.readAsDataURL(blob);
 			});
 			const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
 			value = data;
-			urlSuccess = `Loaded ${fileEnding} (${(blob.size / 1024).toFixed(0)} KB)`;
+			urlSuccess = formatMessage(t.fileLoaded, {
+				ext: fileEnding,
+				size: (blob.size / 1024).toFixed(0)
+			});
 			onChange(data);
 		} catch (error) {
 			if (isCorsError(error)) {
@@ -158,26 +182,22 @@
 				})();
 				// The opaque TypeError hides CORS blocks and plain network failures (404, DNS)
 				// alike, so the message has to cover both.
-				let hint =
-					'Check that the URL is correct and the file is publicly accessible. If the server requires login, download the file and use the Upload option instead.';
+				let hint = t.urlUnreachableHint;
 				if (host.includes('sharepoint.com') || host.includes('onedrive.com')) {
-					hint =
-						'SharePoint/OneDrive blocks browser access. Open the file in SharePoint, use "Download" to save it locally, then upload it here.';
+					hint = t.urlHintSharePoint;
 				} else if (host.includes('drive.google.com')) {
-					hint =
-						'Google Drive blocks browser access. Use "Download" in Google Drive to save the file locally, then upload it here.';
+					hint = t.urlHintGoogleDrive;
 				} else if (host.includes('dropbox.com')) {
-					hint =
-						'Dropbox links may block browser access. Try changing "?dl=0" to "?dl=1" in the URL, or download and upload instead.';
+					hint = t.urlHintDropbox;
 				}
 				urlError = {
-					message: `Could not reach "${host}" — the file may not exist, or the server does not allow browser access.`,
+					message: formatMessage(t.urlUnreachable, { host }),
 					isCors: true,
 					hint
 				};
 			} else {
 				urlError = {
-					message: error instanceof Error ? error.message : 'Unknown error',
+					message: error instanceof Error ? error.message : t.unknownError,
 					isCors: false
 				};
 			}
@@ -194,7 +214,7 @@
 		const fileEnding = getFileExtension(file.name);
 
 		if (!isValidFileExtension(fileEnding)) {
-			toast.error(`File format not accepted: ${fileEnding}`);
+			toast.error(formatNotAccepted(fileEnding));
 			return;
 		}
 
@@ -204,9 +224,7 @@
 		// note in constants.ts) — some files pass here and still 413. The URL import
 		// path applies the same cap.
 		if (file.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
-			toast.error(
-				`File too large: ${(file.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB).`
-			);
+			toast.error(formatTooLarge(file.size));
 			return;
 		}
 
@@ -279,7 +297,7 @@
 							: 'text-muted-foreground hover:text-foreground'
 					}`}
 				>
-					{mode === 'upload' ? 'Upload' : 'URL'}
+					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}
 				</button>
 			{/each}
 		</div>
@@ -289,7 +307,7 @@
 		<div class="gap-2 flex flex-col">
 			<Label for="url-input">
 				<Link size={16} />
-				File URL
+				{t.fileUrlLabel}
 			</Label>
 			<div class="gap-2 flex">
 				<Input
@@ -310,7 +328,7 @@
 					disabled={isLoading || !urlInput.trim()}
 					onclick={handleUrlChange}
 				>
-					{isLoading ? 'Fetching...' : 'Fetch'}
+					{isLoading ? t.fetchingFile : t.fetchFile}
 				</Button>
 			</div>
 
@@ -336,9 +354,7 @@
 			{/if}
 
 			{#if !urlError && !urlSuccess}
-				<p class="text-xs text-muted-foreground">
-					URL must be publicly accessible (no login required).
-				</p>
+				<p class="text-xs text-muted-foreground">{t.fileUrlPublic}</p>
 			{/if}
 		</div>
 	{:else}
@@ -353,11 +369,11 @@
 				ondrop={handleDrop}
 			>
 				<FileUp size={16} />
-				{uploadedFileName || 'Choose File or Drag & Drop'}
+				{uploadedFileName || t.chooseFile}
 			</Button>
 			{#if acceptedFormats.length > 0}
 				<p class="text-xs text-muted-foreground">
-					Accepted formats: {acceptedFormats.join(', ')}
+					{formatMessage(t.acceptedFormats, { formats: acceptedFormats.join(', ') })}
 				</p>
 			{/if}
 		</div>

package/src/lib/components/preview/inputs/NumberInput.svelte

@@ -6,16 +6,30 @@
 	import * as InputGroup from '$lib/components/primitives/input-group';
 	import { Separator } from '$lib/components/primitives/separator';
 	import * as Field from '$lib/components/primitives/field';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
 
 	interface Props {
 		inputId: string;
+		/** Id of the field's label, which also names the slider thumb. */
+		labelId?: string;
 		value?: number;
 		config?: NumberWidgetConfig;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+	let {
+		inputId,
+		labelId,
+		value = $bindable(),
+		config,
+		onChange,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	let validationError = $state<string | null>(null);
 
@@ -29,9 +43,9 @@
 
 	function validateNumber(val: number): string | null {
 		if (config?.minimum !== undefined && val < config.minimum)
-			return `Minimum value is ${config.minimum}`;
+			return formatMessage(t.minValue, { min: config.minimum });
 		if (config?.maximum !== undefined && val > config.maximum)
-			return `Maximum value is ${config.maximum}`;
+			return formatMessage(t.maxValue, { max: config.maximum });
 		return null;
 	}
 
@@ -44,11 +58,69 @@
 		}
 	}
 
-	function handleSliderChange(newValue: number) {
+	// bits-ui builds an array of every step and rebuilds a tick object per step on each value
+	// change, so a fine-grained range freezes the drag. Past this many steps the track drives a
+	// coarse proxy scale instead; the number box next to it still sets any exact value.
+	const MAX_TRACK_STEPS = 1000;
+	const FINE_DRAG_FACTOR = 10;
+	const stepCount = $derived((max - min) / step);
+	const useProxyTrack = $derived(
+		step > 0 && Number.isFinite(stepCount) && stepCount > MAX_TRACK_STEPS
+	);
+	const trackMin = $derived(useProxyTrack ? 0 : min);
+	const trackMax = $derived(useProxyTrack ? MAX_TRACK_STEPS : max);
+	const stepPrecision = $derived((String(step).split('.')[1] ?? '').length);
+
+	let dragging = false;
+	let shiftHeld = false;
+	let lastTrack: number | null = null;
+	let fineAnchor: { track: number; value: number } | null = null;
+
+	function snapToStep(v: number): number {
+		const clamped = Math.min(max, Math.max(min, v));
+		if (!(step > 0)) return clamped;
+		const snapped = min + Math.round((clamped - min) / step) * step;
+		return Math.min(max, Number(snapped.toFixed(stepPrecision)));
+	}
+
+	function toTrack(v: number): number {
+		return useProxyTrack ? Math.round(((v - min) / (max - min)) * MAX_TRACK_STEPS) : v;
+	}
+
+	function trackSpanToValue(trackDelta: number): number {
+		return (trackDelta / (trackMax - trackMin)) * (max - min);
+	}
+
+	// bits-ui maps the pointer to an absolute track position, so fine drag works in deltas: the
+	// value moves FINE_DRAG_FACTOR times slower than the pointer from where Shift took effect.
+	function setFromTrack(track: number) {
+		if (max <= min) return;
+		let newValue: number;
+		if (dragging && shiftHeld) {
+			fineAnchor ??= { track: lastTrack ?? track, value: numValue };
+			newValue = snapToStep(
+				fineAnchor.value + trackSpanToValue(track - fineAnchor.track) / FINE_DRAG_FACTOR
+			);
+		} else {
+			fineAnchor = null;
+			newValue = snapToStep(min + trackSpanToValue(track - trackMin));
+		}
+		lastTrack = track;
 		value = newValue;
 		commitSliderDebounced(newValue);
 	}
 
+	function startDrag(e: PointerEvent) {
+		dragging = true;
+		shiftHeld = e.shiftKey;
+		lastTrack = null;
+		fineAnchor = null;
+	}
+
+	function setShift(e: KeyboardEvent) {
+		if (e.key === 'Shift') shiftHeld = e.type === 'keydown';
+	}
+
 	const decimals = $derived(Math.max(0, -Math.floor(Math.log10(step))));
 
 	function commitTypedValue(input: HTMLInputElement) {
@@ -65,6 +137,13 @@
 	}
 </script>
 
+<svelte:window
+	onkeydown={setShift}
+	onkeyup={setShift}
+	onpointerup={() => (dragging = false)}
+	onblur={() => (shiftHeld = dragging = false)}
+/>
+
 {#if config?.renderAsSlider}
 	<!-- Value and track share one box, the height of a number input, so mixed rows line up and
 	     a value can't be read as belonging to the neighbouring slider. -->
@@ -84,14 +163,17 @@
 			}}
 		/>
 		<Separator orientation="vertical" />
-		<div class="px-3.5 min-w-0 flex flex-1 items-center">
+		<div class="px-3.5 min-w-0 flex flex-1 items-center" onpointerdowncapture={startDrag}>
+			<!-- A function binding, not value + onValueChange: when a fine drag leaves the value
+			     unchanged, the thumb must stay put instead of following the pointer. -->
 			<Slider
 				type="single"
-				value={numValue}
-				{min}
-				{max}
-				{step}
-				onValueChange={handleSliderChange}
+				bind:value={() => toTrack(numValue), setFromTrack}
+				min={trackMin}
+				max={trackMax}
+				step={useProxyTrack ? 1 : step}
+				title={t.fineDragHint}
+				thumbLabelledby={labelId}
 				{disabled}
 			/>
 		</div>

package/src/lib/components/preview/inputs/TextInput.svelte

@@ -3,6 +3,8 @@
 	import { debounce } from '$lib/utils/debounce';
 	import { Input } from '$lib/components/primitives/input';
 	import * as Field from '$lib/components/primitives/field';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
 
 	interface Props {
 		inputId: string;
@@ -14,6 +16,9 @@
 
 	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let validationError = $state<string | null>(null);
 	let currentValue = $state(value || '');
 
@@ -21,13 +26,13 @@
 
 	function validateText(val: string): string | null {
 		if (config?.maxLength && val.length > config.maxLength)
-			return `Maximum ${config.maxLength} characters allowed`;
+			return formatMessage(t.maxLength, { max: config.maxLength });
 		if (config?.pattern) {
 			try {
 				if (!new RegExp(config.pattern).test(val))
-					return config.customErrorMessage || 'Invalid format';
+					return config.customErrorMessage || t.invalidFormat;
 			} catch {
-				return 'Invalid validation pattern configured';
+				return t.invalidPattern;
 			}
 		}
 		return null;

package/src/lib/components/primitives/CalculateButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
 	import { Zap, Check, Loader, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -11,34 +12,59 @@
 		hasNeverSolved?: boolean;
 		isSolving: boolean;
 		oncalculate: () => void;
+		/** Beside the button, sharing its row: the panel footer's actions menu. */
+		trailing?: Snippet;
 	}
 
-	let { hasPendingChanges, hasNeverSolved = false, isSolving, oncalculate }: Props = $props();
+	let {
+		hasPendingChanges,
+		hasNeverSolved = false,
+		isSolving,
+		oncalculate,
+		trailing
+	}: Props = $props();
+
+	// The label below changes too, but a screen reader doesn't read a label change on a button
+	// that has lost focus, so start and end of a solve go through a live region as well.
+	let announcement = $state('');
+	let wasSolving = false;
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) announcement = t.solvingEllipsis;
+			else if (wasSolving) announcement = hasPendingChanges ? '' : t.upToDate;
+			wasSolving = solving;
+		});
+	});
 </script>
 
 <div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
-	<Button
-		variant={hasPendingChanges ? 'default' : 'ghost'}
-		size="lg"
-		onclick={() => !isSolving && oncalculate()}
-		disabled={!hasPendingChanges && !isSolving}
-		aria-busy={isSolving}
-		class="gap-2 font-medium w-full transition-all duration-200
+	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
+	<div class="gap-2 flex">
+		<Button
+			variant={hasPendingChanges ? 'default' : 'ghost'}
+			size="lg"
+			onclick={() => !isSolving && oncalculate()}
+			disabled={!hasPendingChanges && !isSolving}
+			aria-busy={isSolving}
+			class="gap-2 font-medium min-w-0 flex-1 transition-all duration-200
 			{hasPendingChanges && !isSolving ? 'shadow-md' : ''}
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
-	>
-		{#if isSolving}
-			<Loader class="h-4 w-4 animate-spin" />
-			{t.solvingEllipsis}
-		{:else if hasNeverSolved}
-			<Play class="h-4 w-4" />
-			{t.pressToCalculate}
-		{:else if hasPendingChanges}
-			<Zap class="h-4 w-4" />
-			{t.calculate}
-		{:else}
-			<Check class="h-4 w-4" />
-			{t.upToDate}
-		{/if}
-	</Button>
+		>
+			{#if isSolving}
+				<Loader class="h-4 w-4 animate-spin" />
+				{t.solvingEllipsis}
+			{:else if hasNeverSolved}
+				<Play class="h-4 w-4" />
+				{t.pressToCalculate}
+			{:else if hasPendingChanges}
+				<Zap class="h-4 w-4" />
+				{t.calculate}
+			{:else}
+				<Check class="h-4 w-4" />
+				{t.upToDate}
+			{/if}
+		</Button>
+		{@render trailing?.()}
+	</div>
 </div>