@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.11

package/dist/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>;
@@ -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),
@@ -217,14 +246,14 @@
 
 	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
 	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
-	let customStyle = $derived(
-		resolvedPrimaryColor ? `--primary: ${hexToOklch(resolvedPrimaryColor)}` : ''
+	let primaryOverride = $derived(
+		resolvedPrimaryColor ? hexToOklch(resolvedPrimaryColor) : undefined
 	);
 
 	let pageTitle = $derived(title ?? (schema?.description || schema.name));
 </script>
 
-<div style={customStyle} style:display="contents">
+<div class="contents" style:--primary={primaryOverride}>
 	<AppShell
 		mode="fixed"
 		showHeader={!resolvedIsEmbedded}
@@ -254,9 +283,11 @@
 			{#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}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -272,6 +303,7 @@
 					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
+					ensureSolved={() => session.ensureSolved()}
 					onLoadValues={() => session.loadValues({})}
 				/>
 			{/key}
@@ -286,15 +318,4 @@
 	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
-	}}
 />

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -2,11 +2,11 @@ import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
 import type { SolveFn } from '@selvajs/solve/shared';
 import type { PresetLabels } from '../../types/presetLabels';
-import type { RetainedSolveResult, SolveEventSource, SolveSession } from '@selvajs/solve/client';
+import type { RetainedSolveResult, SolveEventSource, SolveSession, SolveSettlement } from '@selvajs/solve/client';
 import type { ThreeViewer } from '@selvajs/visualization/render';
 import { type ViewerConfig } from '../viewer/Viewer.svelte';
 import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
-import type { Locale } from '../../i18n/messages';
+import type { Locale, ViewerMessages } from '../../i18n/messages';
 import type { Snippet } from 'svelte';
 interface Props {
     schema: UISchema;
@@ -18,8 +18,11 @@ interface Props {
     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>;
@@ -57,6 +60,12 @@ interface Props {
          */
         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. */
@@ -69,6 +78,14 @@ interface Props {
     externalScopeKey?: string;
     clientSlot?: ClientSlot;
     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>;
 }
 declare const ComputeApp: import("svelte").Component<Props, {}, "">;
 type ComputeApp = ReturnType<typeof ComputeApp>;

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -3,14 +3,15 @@
 	//
 	// The counterpart to `SolveMessages`, which interrupts only for what the definition's author
 	// wrote. Everything else — Grasshopper complaining about its own components — lands here,
-	// where it is available without being in the way. One section per level, most severe first, with the
-	// component that raised each message shown as a label rather than spliced into its text.
+	// where it is available without being in the way. Most severe first, with the component that
+	// raised each message on its own line rather than spliced into its text.
 
 	import type { Snippet } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import * as Dialog from '../primitives/dialog';
-	import { Badge } from '../primitives/badge';
+	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatCount } from '../../i18n/messages';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */
@@ -24,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[]>(
@@ -42,34 +46,11 @@
 		count: number;
 	}
 
-	// Tone classes are written out, never interpolated: Tailwind scans source text, so a
-	// constructed class name is not emitted and the icon would render colourless.
-	const LEVELS = [
-		{
-			level: 'error',
-			heading: 'Errors',
-			one: 'error',
-			many: 'errors',
-			icon: CircleAlert,
-			tone: 'text-destructive'
-		},
-		{
-			level: 'warning',
-			heading: 'Warnings',
-			one: 'warning',
-			many: 'warnings',
-			icon: TriangleAlert,
-			tone: 'text-amber-500'
-		},
-		{
-			level: 'remark',
-			heading: 'Notes',
-			one: 'note',
-			many: 'notes',
-			icon: Info,
-			tone: 'text-muted-foreground'
-		}
-	] 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
@@ -77,72 +58,55 @@
 	 * 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[]>(
+		sections.flatMap((section) =>
+			section.items.map((item) => ({
+				severity: section.severity,
+				message: item.message,
+				source: item.source,
+				count: item.count
+			}))
+		)
 	);
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Trigger class="focus:outline-none">
+	<Dialog.Trigger>
 		{@render trigger()}
 	</Dialog.Trigger>
 
-	<Dialog.Content class="max-w-lg gap-4">
+	<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>
 
-		<div class="space-y-4 max-h-[60vh] overflow-y-auto">
-			{#each sections as section (section.level)}
-				<section>
-					<h3 class="mb-1.5 gap-1.5 text-xs font-medium flex items-center text-muted-foreground">
-						<section.icon class="h-3.5 w-3.5 {section.tone}" />
-						{section.heading}
-					</h3>
-					<ul class="divide-y rounded-lg border">
-						{#each section.items as item (item.message + (item.source ?? ''))}
-							<li class="gap-3 px-3 py-2 text-sm flex items-start justify-between">
-								<p class="min-w-0 wrap-anywhere">
-									{item.message}
-									{#if item.count > 1}
-										<span class="ml-1 text-xs text-muted-foreground tabular-nums"
-											>×{item.count}</span
-										>
-									{/if}
-								</p>
-								{#if item.source}
-									<Badge variant="secondary" class="font-normal max-w-[40%] shrink-0 truncate">
-										{item.source}
-									</Badge>
-								{/if}
-							</li>
-						{/each}
-					</ul>
-				</section>
-			{/each}
-		</div>
+		<IssueList {issues} />
 	</Dialog.Content>
 </Dialog.Root>

package/dist/components/compute/ParameterPresetManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Download, Upload, AlertTriangle, CheckCircle } from '@lucide/svelte';
+	import { Upload } from '@lucide/svelte';
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import {
 		createSavedState,
@@ -8,18 +8,14 @@
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
-	import { Button, Input, Label, Textarea, Dialog, Card, toast } from '../primitives';
-
-	import type { ActionButton } from '../../types/actionButton';
+	import { Button, Input, Label, Textarea, Dialog, Callout, IssueList, toast } from '../primitives';
 	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="default" 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>
@@ -239,7 +190,7 @@
 		</Dialog.Header>
 
 		{#if onListStates}
-			<div class="py-4 max-h-[60vh] overflow-y-auto">
+			<div class="py-4">
 				{#if isLoadingList}
 					<p class="text-sm py-8 text-center text-muted-foreground">…</p>
 				{:else if listError}
@@ -283,7 +234,7 @@
 
 <!-- Validation Dialog -->
 <Dialog.Root bind:open={showValidationDialog}>
-	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
+	<Dialog.Content class="max-w-2xl">
 		<Dialog.Header>
 			<Dialog.Title>{t.validationTitle}</Dialog.Title>
 			<Dialog.Description>
@@ -296,75 +247,31 @@
 		{#if loadResult}
 			<div class="gap-4 py-4 grid">
 				{#if loadResult.isValid}
-					<Card.Root class="p-4 border-success/30 bg-success/5">
-						<div class="gap-3 flex items-start">
-							<CheckCircle class="h-5 w-5 text-success" />
-							<div>
-								<h4 class="text-sm font-semibold text-success-foreground">
-									{t.validationNoIssuesTitle}
-								</h4>
-								<p class="text-sm mt-1 text-success-foreground/80">
-									{t.validationNoIssuesBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="success" title={t.validationNoIssuesTitle}>
+						{t.validationNoIssuesBody}
+					</Callout>
 				{:else if loadResult.canLoad}
-					<Card.Root class="p-4 border-warning/30 bg-warning/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-warning" />
-							<div>
-								<h4 class="text-sm font-semibold text-warning-foreground">
-									{t.validationWarningsTitle}
-								</h4>
-								<p class="text-sm mt-1 text-warning-foreground/80">
-									{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="warning" title={t.validationWarningsTitle}>
+						{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
+					</Callout>
 				{:else}
-					<Card.Root class="p-4 border-destructive/30 bg-destructive/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-destructive" />
-							<div>
-								<h4 class="text-sm font-semibold text-destructive">{t.validationErrorsTitle}</h4>
-								<p class="text-sm mt-1 text-destructive/80">
-									{t.validationErrorsBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="danger" title={t.validationErrorsTitle}>
+						{t.validationErrorsBody}
+					</Callout>
 				{/if}
 
 				{#if !loadResult.isValid}
-					<div class="space-y-2">
+					<div class="gap-2 flex flex-col">
 						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>
-						{#each loadResult.issues as issue (issue.message)}
-							<div
-								class="p-3 rounded-lg border {issue.severity === 'error'
-									? 'border-destructive/30 bg-destructive/5'
-									: 'border-warning/30 bg-warning/5'}"
-							>
-								<div class="gap-2 flex items-start">
-									<AlertTriangle
-										class="h-4 w-4 mt-0.5 {issue.severity === 'error'
-											? 'text-destructive'
-											: 'text-warning'}"
-									/>
-									<div class="flex-1">
-										<p class="text-sm font-medium">{issue.message}</p>
-										{#if issue.details}
-											<p class="text-xs mt-1 text-muted-foreground">
-												{t.validationExpected}
-												{issue.details.expected} → {t.validationActual}
-												{issue.details.actual}
-											</p>
-										{/if}
-									</div>
-								</div>
-							</div>
-						{/each}
+						<IssueList
+							issues={loadResult.issues.map((issue) => ({
+								severity: issue.severity === 'error' ? 'error' : 'warning',
+								message: issue.message,
+								detail: issue.details
+									? `${t.validationExpected} ${issue.details.expected} → ${t.validationActual} ${issue.details.actual}`
+									: undefined
+							}))}
+						/>
 					</div>
 				{/if}
 			</div>