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

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

@@ -13,10 +13,13 @@
 	// anything, so it appears on its own after the solve and fades.
 
 	import { untrack } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info, LoaderCircle } from '@lucide/svelte';
+	import { LoaderCircle } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
 	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. */
@@ -28,33 +31,15 @@
 		onabort: () => void;
 		onconfirm: () => void;
 		ondiscard: () => void;
-		labels?: Labels;
+		/**
+		 * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+		 * an Esc hint stands in for it; the result's messages still show.
+		 */
+		freezesDuringSolve?: boolean;
+		/** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+		placement?: 'floating' | 'inline';
 	}
 
-	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,
@@ -62,9 +47,13 @@
 		onabort,
 		onconfirm,
 		ondiscard,
-		labels = DEFAULT_LABELS
+		freezesDuringSolve = false,
+		placement = 'floating'
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	const REMARK_LINGER_MS = 6000;
 
 	const progress = $derived([...live.progress.values()]);
@@ -137,16 +126,30 @@
 	// Keyed on the diagnostics array's identity, which every report renews, rather than on a
 	// solve id: only the live channel has one, and on the Compute path remarks arrive with the
 	// result. Once per array, so remarks that sat behind a review do not reappear after Continue.
+	//
+	// A remark is shown once while it stays raised, not after every solve. Every report repeats
+	// it: Grasshopper keeps runtime messages on a Message component an input change did not
+	// reach, and Compute re-solves the whole definition. It shows again once a solve stops
+	// raising it and a later one raises it anew.
 	let lingering = $state(false);
 	let lingeredFor: SolveDiagnostic[] | null = null;
+	let shownRemarks: ReadonlySet<string> = new Set();
+	let freshRemarks = $state.raw<SolveDiagnostic[]>([]);
+	const remarkKey = (d: SolveDiagnostic) => `${d.source ?? ''}\u0000${d.message}`;
 	$effect(() => {
 		if (phase === 'live') {
 			lingering = false;
 			return;
 		}
-		if (authoredRemarks.length === 0 || lingeredFor === diagnostics) return;
+		if (lingeredFor === diagnostics) return;
 		lingeredFor = diagnostics;
-		if (phase !== 'idle') return;
+		const raised = authoredRemarks.map(remarkKey);
+		const stillShown = raised.filter((k) => shownRemarks.has(k));
+		const fresh = authoredRemarks.filter((d) => !shownRemarks.has(remarkKey(d)));
+		const showNow = phase === 'idle' && fresh.length > 0;
+		shownRemarks = new Set(showNow ? [...stillShown, ...fresh.map(remarkKey)] : stillShown);
+		if (!showNow) return;
+		freshRemarks = fresh;
 		lingering = true;
 		const timer = setTimeout(() => (lingering = false), REMARK_LINGER_MS);
 		return () => clearTimeout(timer);
@@ -165,6 +168,7 @@
 	$effect(() => {
 		if (phase === 'live') {
 			finishing = false;
+			if (freezesDuringSolve) return;
 			const timer = setTimeout(() => {
 				revealed = true;
 				revealedAt = performance.now();
@@ -191,7 +195,16 @@
 	// While solving, the live channel is all there is. Once the result lands it is authoritative
 	// — it carries remarks too — so the live list is dropped entirely and nothing is shown twice.
 	const rows = $derived<SolveDiagnostic[]>(
-		view === 'live' ? [...live.diagnostics] : view === 'idle' ? authoredRemarks : authoredGating
+		view === 'live' ? [...live.diagnostics] : view === 'idle' ? freshRemarks : authoredGating
+	);
+
+	// A remark states something without asking anything, so it reads as a quiet note.
+	const issues = $derived<Issue[]>(
+		rows.map((d) => ({
+			severity: d.level === 'remark' ? 'note' : d.level,
+			message: d.message,
+			source: d.source
+		}))
 	);
 
 	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
@@ -228,28 +241,59 @@
 				: 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;
 	}
 
 	// Escape resolves to the safe side — discard, keeping what is on screen — never to silently
-	// applying a result the user has not accepted.
+	// applying a result the user has not accepted. A frozen host gets no keydown until the solve
+	// ends; there the plugin aborts on the key state, which only counts while Rhino is in front, so
+	// a browser tab (local or Compute) has to abort from the page.
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key !== 'Escape') return;
-		if (phase === 'review') ondiscard();
+		if (phase === 'live') {
+			if (!freezesDuringSolve) onabort();
+		} else if (phase === 'review') ondiscard();
 		else if (phase === 'blocked') dismiss();
 	}
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if visible}
+<div class="sr-only" role="status" aria-live="polite">{announcement}</div>
+
+{#if freezesDuringSolve && view === 'live'}
+	<!-- Painted before the solve takes the thread; Abort could not be clicked until it ends. Inline,
+	     the solving chip carries the hint instead: a line here would resize the footer mid-solve. -->
+	{#if placement === 'floating'}
+		<p
+			class="bottom-4 text-xs fixed left-1/2 z-50 -translate-x-1/2 text-muted-foreground"
+			data-testid="solve-esc-hint"
+		>
+			{t.solveMessagesEscHint}
+		</p>
+	{/if}
+{:else if visible}
+	<!-- Inline, it is a row of the host's footer like the Calculate row under it, not a card: a
+	     framed box inside an edge-to-edge column reads as a dialog glued into the page. -->
 	<div
-		class="bottom-4 p-3 shadow-lg fixed left-1/2 z-50 w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border bg-background {view ===
-		'blocked'
-			? 'border-destructive/50'
-			: ''}"
-		role={view === 'live' || view === 'idle' ? 'status' : 'alert'}
+		class={placement === 'inline'
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border/50'}`
+			: `p-3 bottom-4 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 === 'review' || view === 'blocked' ? 'alert' : undefined}
 		data-testid="solve-messages"
 		data-view={view}
 	>
@@ -259,7 +303,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}
@@ -267,12 +311,17 @@
 						{/if}
 						<Button
 							variant="secondary"
-							size="sm"
-							class="-my-1 h-7 px-3 text-xs shrink-0"
+							size="xs"
+							class="-my-1 shrink-0"
 							disabled={finishing}
 							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
 						>
-							{labels.abort}
+							{t.solveMessagesAbort}
+							<kbd class="px-1 font-sans rounded border border-border/60 text-2xs opacity-70">
+								Esc
+							</kbd>
 						</Button>
 					</div>
 					{#each progress as p, i (p.source ?? '')}
@@ -289,7 +338,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}
@@ -299,8 +348,9 @@
 										? { width: 1, ms: FINISH_MS }
 										: (bars[p.source ?? ''] ?? { width: p.fraction, ms: 150 })}
 									<div
-										class="h-full rounded-full bg-primary transition-[width] ease-linear"
-										style="width: {bar.width * 100}%; transition-duration: {bar.ms}ms"
+										class="h-full w-(--bar-width) rounded-full bg-primary transition-all duration-(--bar-ms) ease-linear"
+										style:--bar-width="{bar.width * 100}%"
+										style:--bar-ms="{bar.ms}ms"
 									></div>
 								{:else}
 									<div class="animate-pulse h-full w-1/3 rounded-full bg-primary/60"></div>
@@ -310,56 +360,60 @@
 					{/each}
 				</div>
 			</div>
+		{:else if (view === 'review' || view === 'blocked') && placement === 'inline'}
+			<!-- Each message carries its own icon, so the label goes without one; the buttons share
+			     its row rather than adding one under a single line of text. -->
+			<div class="mb-1.5 gap-2 flex items-center">
+				<span
+					class="min-w-0 text-xs font-medium flex-1 truncate {view === 'blocked'
+						? 'text-destructive'
+						: 'text-muted-foreground'}"
+				>
+					{view === 'blocked' ? t.solveBlockedTitle : t.solveMessagesTitle}
+				</span>
+				{#if view === 'blocked'}
+					<Button variant="ghost" size="xs" class="-my-1 shrink-0" onclick={dismiss}>
+						{t.solveMessagesDismiss}
+					</Button>
+				{:else}
+					<Button variant="ghost" size="xs" class="-my-1 shrink-0" onclick={ondiscard}>
+						{t.solveMessagesDiscard}
+					</Button>
+					<Button size="xs" class="-my-1 shrink-0" onclick={onconfirm}>
+						{t.solveMessagesConfirm}
+					</Button>
+				{/if}
+			</div>
 		{:else if view === 'review' || view === 'blocked'}
 			<div class="mb-2">
 				<div class="gap-2 text-sm font-medium flex items-center">
 					{#if view === 'blocked'}
-						<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
-						{labels.blockedTitle}
+						<SeverityIcon severity="error" />
+						{t.solveBlockedTitle}
 					{:else}
-						<TriangleAlert class="h-4 w-4 text-amber-500 shrink-0" />
-						{labels.messagesTitle}
+						<SeverityIcon severity="warning" />
+						{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}
 
 		{#if rows.length > 0}
-			<ul
-				class="max-h-40 space-y-2 text-sm overflow-y-auto {view === 'live'
-					? 'mt-3 pt-3 border-t'
-					: ''}"
-			>
-				{#each rows as row, i (i)}
-					<li class="gap-2 flex">
-						{#if row.level === 'error'}
-							<CircleAlert class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-						{:else if row.level === 'warning'}
-							<TriangleAlert class="mt-0.5 h-4 w-4 text-amber-500 shrink-0" />
-						{:else}
-							<Info class="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-						{/if}
-						<div class="min-w-0 flex-1">
-							<p class="wrap-anywhere">{row.message}</p>
-							{#if row.source}
-								<p class="text-xs text-muted-foreground">{row.source}</p>
-							{/if}
-						</div>
-					</li>
-				{/each}
-			</ul>
+			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+				<IssueList {issues} variant="plain" />
+			</div>
 		{/if}
 
-		{#if view === 'review' || view === 'blocked'}
+		{#if (view === 'review' || view === 'blocked') && placement === 'floating'}
 			<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,13 @@ interface Props {
     onabort: () => void;
     onconfirm: () => void;
     ondiscard: () => void;
-    labels?: Labels;
+    /**
+     * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+     * an Esc hint stands in for it; the result's messages still show.
+     */
+    freezesDuringSolve?: boolean;
+    /** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+    placement?: 'floating' | 'inline';
 }
 declare const SolveMessages: import("svelte").Component<Props, {}, "">;
 type SolveMessages = ReturnType<typeof SolveMessages>;

package/dist/components/layout/AppShell.svelte

@@ -74,14 +74,16 @@
 
 	const rootClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-col h-screen overflow-hidden bg-background ${className}`
-			: `flex flex-col min-h-screen bg-background ${className}`
+			? // dvh, not vh: iOS sizes 100vh to the viewport without its toolbar, which hides the
+				// footer and the phone drawer's handle behind the toolbar.
+				`flex flex-col h-dvh overflow-hidden bg-background ${className}`
+			: `flex flex-col min-h-dvh bg-background ${className}`
 	);
 
 	const bodyShellClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-1 min-h-0 ${sidenav ? 'flex-row' : 'flex-col'} ${bodyClass}`.trim()
-			: `flex-1 ${sidenav ? 'flex flex-row' : ''} ${bodyClass}`.trim()
+			? `flex flex-1 min-h-0 ${sidenav ? 'flex-col sm:flex-row' : 'flex-col'} ${bodyClass}`.trim()
+			: `flex-1 ${sidenav ? 'flex flex-col sm:flex-row' : ''} ${bodyClass}`.trim()
 	);
 
 	const bodyShellStyle = '';
@@ -92,13 +94,15 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 self-start sticky top-(--header-h) max-h-[calc(100svh-var(--header-h))]'
+			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-(--below-header-h)'
 	);
 
 	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
-		_mode === 'fixed' ? 'flex-1 overflow-y-auto' : 'flex-1 overflow-y-auto border-l border-border'
+		_mode === 'fixed'
+			? 'min-h-0 flex-1 overflow-y-auto'
+			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>
 

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,13 @@
 		{/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>
+		{#if copyrightLine}
+			<p class="truncate">{copyrightLine}</p>
+		{/if}
 	</div>
 </footer>

package/dist/components/layout/PageHeader.svelte

@@ -31,27 +31,31 @@
 <header
 	class={`top-0 backdrop-blur-sm sticky z-40 border-b border-border bg-background/90 ${className}`}
 >
-	<div class="gap-5 flex h-(--header-h) items-center px-(--page-px)">
+	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
-		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
+		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
+			<!-- On a phone the page title needs the room more than the brand does. -->
+			<span
+				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"
+				>{brandName}</span
+			>
 		</a>
 
 		{#if title !== undefined}
-			<span class="text-sm text-border">/</span>
-			<span class="text-sm font-medium text-muted-foreground">{title ?? ''}</span>
+			<span class="text-sm shrink-0 text-border">/</span>
+			<span class="text-sm font-medium min-w-0 truncate text-muted-foreground">{title ?? ''}</span>
 		{/if}
 
 		<!-- Primary nav next to logo -->
 		{#if navItems}
-			<nav class="ml-5 gap-1 flex">
+			<nav class="sm:ml-5 gap-1 flex shrink-0">
 				{@render navItems()}
 			</nav>
 		{/if}
 
 		<!-- Right cluster: identity + utilities, anchored flush-right -->
-		<div class="gap-2 ml-auto flex items-center">
+		<div class="gap-2 ml-auto flex shrink-0 items-center">
 			{#if rightContent}
 				{@render rightContent()}
 			{/if}

package/dist/components/layout/Pagination.svelte

@@ -40,23 +40,21 @@
 		</p>
 		<div class="gap-1 flex items-center">
 			<Button
-				size="sm"
+				size="icon-sm"
 				variant="outline"
 				disabled={page <= 1}
 				onclick={() => (page -= 1)}
 				aria-label="Previous page"
-				class="h-8 w-8 p-0"
 			>
 				<ChevronLeft class="h-4 w-4" />
 			</Button>
 			<span class="px-2 font-mono text-xs text-muted-foreground">{page} / {pageCount}</span>
 			<Button
-				size="sm"
+				size="icon-sm"
 				variant="outline"
 				disabled={page >= pageCount}
 				onclick={() => (page += 1)}
 				aria-label="Next page"
-				class="h-8 w-8 p-0"
 			>
 				<ChevronRight class="h-4 w-4" />
 			</Button>

package/dist/components/layout/SectionHeader.svelte

@@ -18,7 +18,9 @@
 	}: SectionHeaderProps = $props();
 </script>
 
-<div class={`mb-6 gap-5 flex items-start justify-between ${className}`}>
+<div
+	class={`mb-6 gap-3 sm:gap-5 sm:flex-row sm:items-start sm:justify-between flex flex-col ${className}`}
+>
 	<div class="min-w-0">
 		{#if eyebrow}
 			<div class="mb-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase">
@@ -31,7 +33,7 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="gap-2 flex shrink-0 items-center">
+		<div class="gap-2 flex shrink-0 flex-wrap items-center">
 			{@render actions()}
 		</div>
 	{/if}