@selvajs/ui 6.6.0-beta.3 → 6.6.0-beta.5

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -10,6 +10,8 @@
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import * as Dialog from '../primitives/dialog';
 	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. */
@@ -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/dist/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,12 @@
 		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';
 
 	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 +23,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 });
 
@@ -58,7 +43,8 @@
 	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 || '';
@@ -128,7 +114,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;
 
@@ -155,30 +142,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}
@@ -225,7 +188,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>

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

@@ -1,13 +1,9 @@
 import type { UISchema, ParameterPreset } from '@selvajs/schemas';
-import type { ActionButton } from '../../types/actionButton';
 import { type PresetLabels } from '../../types/presetLabels';
 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. */
@@ -15,6 +11,9 @@ interface Props {
     /** Overrides merged over `DEFAULT_PRESET_LABELS`. */
     labels?: Partial<PresetLabels>;
 }
-declare const ParameterPresetManager: import("svelte").Component<Props, {}, "">;
+declare const ParameterPresetManager: import("svelte").Component<Props, {
+    openSave: () => void;
+    openLoad: () => Promise<void>;
+}, "">;
 type ParameterPresetManager = ReturnType<typeof ParameterPresetManager>;
 export default ParameterPresetManager;

package/dist/components/compute/SolveMessages.svelte

@@ -19,6 +19,7 @@
 	import { Button } from '../primitives/button';
 	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
 	import SeverityIcon from '../primitives/SeverityIcon.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -30,43 +31,20 @@
 		onabort: () => void;
 		onconfirm: () => void;
 		ondiscard: () => void;
-		labels?: Labels;
 	}
 
-	interface Labels {
-		solving: string;
-		blockedTitle: string;
-		messagesTitle: string;
-		blockedDescription: string;
-		messagesDescription: string;
-		confirm: string;
-		discard: string;
-		abort: string;
-		dismiss: string;
-	}
-
-	const DEFAULT_LABELS: Labels = {
-		solving: 'Solving…',
-		blockedTitle: 'Solve stopped',
-		messagesTitle: 'Solve messages',
-		blockedDescription: 'The definition stopped this solve. No results were produced.',
-		messagesDescription: 'This solve reported the following. Continue to see the result.',
-		confirm: 'Continue',
-		discard: 'Discard',
-		abort: 'Abort',
-		dismiss: 'Dismiss'
-	};
-
 	let {
 		live,
 		phase: sessionPhase,
 		diagnostics = [],
 		onabort,
 		onconfirm,
-		ondiscard,
-		labels = DEFAULT_LABELS
+		ondiscard
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	const REMARK_LINGER_MS = 6000;
 
 	const progress = $derived([...live.progress.values()]);
@@ -239,6 +217,19 @@
 				: rows.length > 0 && lingering
 	);
 
+	// What a screen reader hears of the passive views, through a region that outlives the panel: one
+	// created together with its text is not announced. The step name, not its counter, so a long
+	// solve announces each step rather than every tick. Review and blocked are alerts of their own.
+	const announcement = $derived(
+		!visible
+			? ''
+			: view === 'live'
+				? ((headline ?? progress[0])?.label ?? t.solveSolving)
+				: view === 'idle'
+					? rows.map((d) => d.message).join(' ')
+					: ''
+	);
+
 	function dismiss() {
 		dismissedFor = diagnostics;
 	}
@@ -254,13 +245,15 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
+<div class="sr-only" role="status" aria-live="polite">{announcement}</div>
+
 {#if visible}
 	<div
 		class="bottom-4 p-3 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background {view ===
 		'blocked'
 			? 'border-destructive/50'
 			: ''}"
-		role={view === 'live' || view === 'idle' ? 'status' : 'alert'}
+		role={view === 'review' || view === 'blocked' ? 'alert' : undefined}
 		data-testid="solve-messages"
 		data-view={view}
 	>
@@ -270,7 +263,7 @@
 				<div>
 					<div class="gap-2 flex items-center">
 						<LoaderCircle class="h-4 w-4 animate-spin shrink-0 text-muted-foreground" />
-						<span class="min-w-0 text-sm flex-1 truncate">{head?.label ?? labels.solving}</span>
+						<span class="min-w-0 text-sm flex-1 truncate">{head?.label ?? t.solveSolving}</span>
 						{#if head?.done !== undefined && head?.total !== undefined}
 							<span class="text-xs shrink-0 text-muted-foreground tabular-nums">
 								{head.done} / {head.total}
@@ -283,7 +276,7 @@
 							disabled={finishing}
 							onclick={onabort}
 						>
-							{labels.abort}
+							{t.solveMessagesAbort}
 						</Button>
 					</div>
 					{#each progress as p, i (p.source ?? '')}
@@ -300,7 +293,7 @@
 							<div
 								class="h-1 overflow-hidden rounded-full bg-muted"
 								role="progressbar"
-								aria-label={p.label ?? p.source ?? labels.solving}
+								aria-label={p.label ?? p.source ?? t.solveSolving}
 								aria-valuemin={0}
 								aria-valuemax={100}
 								aria-valuenow={p.fraction !== undefined ? Math.round(p.fraction * 100) : undefined}
@@ -327,14 +320,14 @@
 				<div class="gap-2 text-sm font-medium flex items-center">
 					{#if view === 'blocked'}
 						<SeverityIcon severity="error" />
-						{labels.blockedTitle}
+						{t.solveBlockedTitle}
 					{:else}
 						<SeverityIcon severity="warning" />
-						{labels.messagesTitle}
+						{t.solveMessagesTitle}
 					{/if}
 				</div>
 				<p class="text-xs text-muted-foreground">
-					{view === 'blocked' ? labels.blockedDescription : labels.messagesDescription}
+					{view === 'blocked' ? t.solveBlocked : t.solveMessagesDescription}
 				</p>
 			</div>
 		{/if}
@@ -348,10 +341,10 @@
 		{#if view === 'review' || view === 'blocked'}
 			<div class="mt-3 gap-2 flex justify-end">
 				{#if view === 'blocked'}
-					<Button variant="outline" size="sm" onclick={dismiss}>{labels.dismiss}</Button>
+					<Button variant="outline" size="sm" onclick={dismiss}>{t.solveMessagesDismiss}</Button>
 				{:else}
-					<Button variant="outline" size="sm" onclick={ondiscard}>{labels.discard}</Button>
-					<Button size="sm" onclick={onconfirm}>{labels.confirm}</Button>
+					<Button variant="outline" size="sm" onclick={ondiscard}>{t.solveMessagesDiscard}</Button>
+					<Button size="sm" onclick={onconfirm}>{t.solveMessagesConfirm}</Button>
 				{/if}
 			</div>
 		{/if}

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

@@ -1,16 +1,5 @@
 import type { SolveDiagnostic } from '@selvajs/solve/shared';
 import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
-interface Labels {
-    solving: string;
-    blockedTitle: string;
-    messagesTitle: string;
-    blockedDescription: string;
-    messagesDescription: string;
-    confirm: string;
-    discard: string;
-    abort: string;
-    dismiss: string;
-}
 interface Props {
     /** What the running (or most recent) solve has said over the live channel. */
     live: LiveSolveState;
@@ -21,7 +10,6 @@ interface Props {
     onabort: () => void;
     onconfirm: () => void;
     ondiscard: () => void;
-    labels?: Labels;
 }
 declare const SolveMessages: import("svelte").Component<Props, {}, "">;
 type SolveMessages = ReturnType<typeof SolveMessages>;

package/dist/components/layout/PageFooter.svelte

@@ -5,6 +5,8 @@
 	import { useFooter } from '../../contexts/footerContext.svelte';
 	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatCount, formatMessage } from '../../i18n/messages';
 
 	interface Props {
 		errors?: string[];
@@ -26,6 +28,9 @@
 		children
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let footerStore = (() => {
 		try {
 			return useFooter();
@@ -66,16 +71,15 @@
 	const hasMessages = $derived(totalCount > 0);
 
 	const copyrightLine = $derived(
-		footerText
-			? footerText.replace('{name}', copyrightName).replace('{year}', String(_currentYear))
-			: `by ${copyrightName} © ${_currentYear}`
+		formatMessage(footerText ?? t.copyright, { name: copyrightName, year: _currentYear })
 	);
 </script>
 
+<!-- One line at any width: the message counts keep their size and the copyright truncates. -->
 <footer
-	class="px-4 gap-4 text-xs h-7 flex shrink-0 items-center justify-between border-t border-border bg-background text-muted-foreground select-none"
+	class="px-4 gap-4 text-xs h-7 flex shrink-0 items-center justify-between border-t border-border bg-background whitespace-nowrap text-muted-foreground select-none"
 >
-	<div class="gap-4 flex items-center">
+	<div class="gap-4 flex shrink-0 items-center">
 		{#each leftItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}
@@ -90,11 +94,13 @@
 							: warningCount > 0
 								? 'text-warning hover:bg-warning/10'
 								: 'hover:bg-muted'}"
-						title={`${totalCount} ${totalCount === 1 ? 'message' : 'messages'} from the last solve`}
+						title={formatCount(totalCount, t.lastSolveMessagesOne, t.lastSolveMessagesOther)}
 					>
 						{#if errorCount > 0}
 							<CircleAlert class="h-3.5 w-3.5" />
-							<span class="font-medium">{errorCount} Error{errorCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(errorCount, t.errorCountOne, t.errorCountOther)}</span
+							>
 						{/if}
 
 						{#if warningCount > 0}
@@ -102,12 +108,16 @@
 								<span class="text-border">•</span>
 							{/if}
 							<TriangleAlert class="h-3.5 w-3.5" />
-							<span class="font-medium">{warningCount} Warning{warningCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(warningCount, t.warningCountOne, t.warningCountOther)}</span
+							>
 						{/if}
 
 						{#if errorCount === 0 && warningCount === 0}
 							<Info class="h-3.5 w-3.5" />
-							<span class="font-medium">{remarkCount} Note{remarkCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(remarkCount, t.noteCountOne, t.noteCountOther)}</span
+							>
 						{/if}
 					</div>
 				{/snippet}
@@ -121,11 +131,11 @@
 		{/if}
 	</div>
 
-	<div class="gap-4 ml-auto flex items-center">
+	<div class="gap-4 min-w-0 ml-auto flex items-center">
 		{#each rightItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p>{copyrightLine}</p>
+		<p class="truncate">{copyrightLine}</p>
 	</div>
 </footer>

package/dist/components/preview/ChartOutput.svelte

@@ -3,6 +3,8 @@
 	import { onMount } from 'svelte';
 	import { Loader, Maximize, Minimize } from '@lucide/svelte';
 	import { loadScript } from '../../utils/loadScript';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatMessage } from '../../i18n/messages';
 
 	interface Props {
 		item: OutputChartLayoutItem;
@@ -11,6 +13,9 @@
 
 	let { item: _item, value }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 
 	type PlotlyTrace = Record<string, unknown>;
@@ -49,11 +54,11 @@
 		if (!wrapperEl) return;
 		if (!document.fullscreenElement) {
 			wrapperEl.requestFullscreen().catch((err) => {
-				error = `Fullscreen unavailable: ${err.message}`;
+				error = formatMessage(t.fullscreenUnavailable, { error: err.message });
 			});
 		} else {
 			document.exitFullscreen().catch((err) => {
-				error = `Exit fullscreen failed: ${err.message}`;
+				error = formatMessage(t.exitFullscreenFailed, { error: err.message });
 			});
 		}
 	}
@@ -129,7 +134,7 @@
 				...figData.config
 			});
 		} catch (e) {
-			error = e instanceof Error ? e.message : 'Failed to render chart';
+			error = e instanceof Error ? e.message : t.chartRenderFailed;
 		} finally {
 			loading = false;
 		}
@@ -183,10 +188,9 @@
 >
 	{#if error}
 		<div class="px-4 py-3 text-sm text-destructive">{error}</div>
-	{:else if !figData && value}
-		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Receiving chart data...</div>
 	{:else if !figData}
-		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Waiting for chart data...</div>
+		<!-- The layout hides this output while it has no data, so this is data that doesn't parse yet. -->
+		<div class="px-4 py-8 text-sm text-center text-muted-foreground">{t.chartReceiving}</div>
 	{:else}
 		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-screen' : 'h-95'}"></div>
 
@@ -206,7 +210,8 @@
 			<button
 				onclick={toggleFullscreen}
 				disabled={loading}
-				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+				title={isFullscreen ? t.exitFullscreen : t.fullscreen}
+				aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
 				class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{#if isFullscreen}

package/dist/components/preview/Group.svelte

@@ -38,6 +38,9 @@
 
 	const visibilityMap = $derived(buildVisibilityMap(items, values));
 
+	const uid = $props.id();
+	const descriptionId = `${uid}-description`;
+
 	// Below this a label and its control stop fitting side by side, so a wide group
 	// sheds columns as its panel narrows instead of squeezing every input.
 	const MIN_COLUMN_WIDTH = 160;
@@ -72,24 +75,36 @@
 			{@render grid()}
 		</div>
 	{:else}
-		<button
-			type="button"
-			class="gap-3 px-4 py-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-			aria-expanded={!collapsed}
-			onclick={onToggle}
-		>
-			<span class="min-w-0 flex-1">
-				<span class="text-base font-semibold leading-snug block text-foreground">{label}</span>
-				{#if description}
-					<span class="text-xs mt-0.5 leading-snug block text-muted-foreground">{description}</span>
-				{/if}
-			</span>
-			<ChevronDown
-				class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
-					? '-rotate-90'
-					: ''}"
-			/>
-		</button>
+		<!-- The host's page owns the h1 and the panel holds the h2. The description sits outside the
+		     heading's button, so the heading and the button are named by the label alone. -->
+		<h3>
+			<button
+				type="button"
+				class="gap-3 px-4 pt-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
+					? 'pb-0'
+					: 'pb-3.5'}"
+				aria-expanded={!collapsed}
+				aria-describedby={description ? descriptionId : undefined}
+				onclick={onToggle}
+			>
+				<span class="min-w-0 text-base font-semibold leading-snug flex-1 text-foreground"
+					>{label}</span
+				>
+				<ChevronDown
+					class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+						? '-rotate-90'
+						: ''}"
+				/>
+			</button>
+		</h3>
+		{#if description}
+			<p
+				id={descriptionId}
+				class="pl-4 pr-11 pt-0.5 pb-3.5 text-xs leading-snug text-muted-foreground"
+			>
+				{description}
+			</p>
+		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
 				<div class="px-4 pt-1 pb-5">

package/dist/components/preview/HelpButton.svelte

@@ -12,13 +12,15 @@
 </script>
 
 <!-- Every field has one, so a column of them is noise. Where a fine pointer can hover, it shows
-     only while the pointer or focus is inside the enclosing `group/field`; touch keeps it visible. -->
+     only while the pointer or focus is inside the enclosing `group/field`; touch keeps it visible.
+     The box is 24px, touch gets a 44px hit area, and the negative margin keeps the label row from
+     growing. -->
 <Dialog.Root>
 	<Dialog.Trigger>
 		{#snippet child({ props })}
 			<button
 				{...props}
-				class="-m-1 p-1 shrink-0 cursor-help rounded-sm text-muted-foreground transition hover:text-foreground pointer-fine:opacity-0 pointer-fine:group-focus-within/field:opacity-100 pointer-fine:group-hover/field:opacity-100 pointer-fine:focus-visible:opacity-100"
+				class="-m-1 size-6 pointer-coarse:after:-inset-2.5 relative flex shrink-0 cursor-help items-center justify-center rounded-sm text-muted-foreground transition hover:text-foreground pointer-coarse:after:absolute pointer-fine:opacity-0 pointer-fine:group-focus-within/field:opacity-100 pointer-fine:group-hover/field:opacity-100 pointer-fine:focus-visible:opacity-100"
 				aria-label={label}
 			>
 				<HelpCircle class="size-3.5" />