@selvajs/ui 6.6.0-beta.8 → 7.0.0

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

@@ -10,6 +10,7 @@
 	} from '../../schema/param-exporter';
 	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;
@@ -37,7 +38,6 @@
 	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);
@@ -69,7 +69,7 @@
 		});
 
 		if (onSaveState) await onSaveState(state);
-		else exportStateAsJson(state);
+		else await exportStateAsJson(state);
 		showExportDialog = false;
 	}
 
@@ -86,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() {
@@ -132,8 +129,8 @@
 	}
 
 	function handleLoadClick() {
-		fileInputRef?.click();
 		showLoadDialog = false;
+		void importFromFile();
 	}
 
 	function selectListedState(preset: ParameterPreset) {
@@ -142,15 +139,6 @@
 	}
 </script>
 
-<!-- .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>
@@ -215,7 +203,7 @@
 							<button
 								type="button"
 								onclick={() => selectListedState(preset)}
-								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-hover"
 							>
 								<div class="text-sm font-medium">{preset.name}</div>
 								{#if preset.description}

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

@@ -16,10 +16,11 @@
 	import { LoaderCircle } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
-	import { Button } from '$lib/components/primitives/button';
-	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
-	import SeverityIcon from '$lib/components/primitives/SeverityIcon.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import IssueList, { type Issue } from '#lib/components/primitives/IssueList.svelte';
+	import SeverityIcon from '#lib/components/primitives/SeverityIcon.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { createLiveProgress } from '#lib/compute/liveProgress.svelte.js';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -31,6 +32,18 @@
 		onabort: () => void;
 		onconfirm: () => void;
 		ondiscard: () => void;
+		/**
+		 * 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';
+		/**
+		 * The host shows progress and Abort itself (`AppLayout`'s solve status), so the live view
+		 * keeps only the messages that arrive mid-solve.
+		 */
+		progressShownByHost?: boolean;
 	}
 
 	let {
@@ -39,7 +52,10 @@
 		diagnostics = [],
 		onabort,
 		onconfirm,
-		ondiscard
+		ondiscard,
+		freezesDuringSolve = false,
+		placement = 'floating',
+		progressShownByHost = false
 	}: Props = $props();
 
 	const locale = getLocaleContext();
@@ -47,50 +63,10 @@
 
 	const REMARK_LINGER_MS = 6000;
 
-	const progress = $derived([...live.progress.values()]);
-
-	// A report only arrives when a step starts, so a bar that just shows `fraction` stands still
-	// through the step and then jumps. When the plugin knows how long the step took last time, the
-	// bar runs linearly to where the step will end, over that time. Steps are weighted by time, so
-	// linear gives one steady speed across the solve; any easing curve visibly speeds up and
-	// crawls within each step. A slower run waits at the step's end; a faster one snaps ahead.
-	let bars = $state.raw<Record<string, { width: number; ms: number }>>({});
-	// Any live event re-runs the effect below. Only a source with a new report may re-snap;
-	// the rest keep easing where they are.
-	let seen = new Map<string, unknown>();
-	let targets: Record<string, { width: number; ms: number }> = {};
-	$effect(() => {
-		const snapped: Record<string, { width: number; ms: number }> = {};
-		const eased: Record<string, { width: number; ms: number }> = {};
-		const current = untrack(() => bars);
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- bookkeeping for this effect; reactive reads here would re-trigger it
-		const nextSeen = new Map<string, unknown>();
-		for (const p of progress) {
-			if (p.fraction === undefined) continue;
-			const key = p.source ?? '';
-			nextSeen.set(key, p);
-			if (seen.get(key) === p && current[key]) {
-				snapped[key] = current[key];
-				// This run's cleanup cancelled the frame that would have started the ease.
-				if (targets[key] && current[key] !== targets[key]) eased[key] = targets[key];
-				continue;
-			}
-			snapped[key] = { width: p.fraction, ms: 150 };
-			if (p.nextFraction !== undefined && p.stepMs !== undefined) {
-				eased[key] = { width: p.nextFraction, ms: p.stepMs };
-			}
-		}
-		seen = nextSeen;
-		targets = eased;
-		bars = snapped;
-		if (Object.keys(eased).length === 0) return;
-		// Two frames: the snapped width must be painted before the eased one is set, or the
-		// browser folds both into one style change and there is nothing to transition from.
-		let frame = requestAnimationFrame(() => {
-			frame = requestAnimationFrame(() => (bars = { ...snapped, ...eased }));
-		});
-		return () => cancelAnimationFrame(frame);
-	});
+	const liveProgress = createLiveProgress(() => live);
+	const progress = $derived(liveProgress.progress);
+	const bars = $derived(liveProgress.bars);
+	const headline = $derived(liveProgress.headline);
 	// Grasshopper's own complaints stay in the footer log; this panel shows what the author wrote.
 	const authored = $derived(diagnostics.filter((d) => d.isGate));
 
@@ -117,16 +93,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);
@@ -145,6 +135,7 @@
 	$effect(() => {
 		if (phase === 'live') {
 			finishing = false;
+			if (freezesDuringSolve) return;
 			const timer = setTimeout(() => {
 				revealed = true;
 				revealedAt = performance.now();
@@ -171,7 +162,7 @@
 	// 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.
@@ -183,37 +174,11 @@
 		}))
 	);
 
-	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
-	// stays up for at least this long; steps that end sooner are skipped in the label but still
-	// count in the bar. The label and its step count move together so they never disagree.
-	const HEADLINE_MIN_MS = 200;
-	let headline = $state.raw<(typeof progress)[number] | undefined>(undefined);
-	let headlineAt = 0;
-	$effect(() => {
-		const next = progress[0];
-		const shown = untrack(() => headline);
-		if (next?.label === shown?.label && next?.done === shown?.done) {
-			headline = next;
-			return;
-		}
-		const show = () => {
-			headline = next;
-			headlineAt = performance.now();
-		};
-		const wait = HEADLINE_MIN_MS - (performance.now() - headlineAt);
-		if (!shown || wait <= 0) {
-			show();
-			return;
-		}
-		const timer = setTimeout(show, wait);
-		return () => clearTimeout(timer);
-	});
-
 	const visible = $derived(
 		view === 'review' || view === 'blocked'
 			? true
 			: view === 'live'
-				? revealed && (rows.length > 0 || progress.length > 0)
+				? revealed && (rows.length > 0 || (!progressShownByHost && progress.length > 0))
 				: rows.length > 0 && lingering
 	);
 
@@ -235,10 +200,14 @@
 	}
 
 	// 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>
@@ -247,17 +216,29 @@
 
 <div class="sr-only" role="status" aria-live="polite">{announcement}</div>
 
-{#if visible}
+{#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 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'
-			: ''}"
+		class={placement === 'inline'
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border'}`
+			: `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}
 	>
-		{#if view === 'live'}
+		{#if view === 'live' && !progressShownByHost}
 			{@const head = headline ?? progress[0]}
 			<div>
 				<div>
@@ -275,8 +256,13 @@
 							class="-my-1 shrink-0"
 							disabled={finishing}
 							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
 						>
 							{t.solveMessagesAbort}
+							<kbd class="px-1 rounded-sm border border-border font-sans text-2xs opacity-70">
+								Esc
+							</kbd>
 						</Button>
 					</div>
 					{#each progress as p, i (p.source ?? '')}
@@ -315,6 +301,30 @@
 					{/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">
@@ -333,12 +343,16 @@
 		{/if}
 
 		{#if rows.length > 0}
-			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+			<div
+				class="max-h-40 overflow-y-auto {view === 'live' && !progressShownByHost
+					? '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}>{t.solveMessagesDismiss}</Button>

package/src/lib/components/layout/AppShell.svelte

@@ -94,14 +94,14 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm: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'
-			? 'min-h-0 flex-1 overflow-y-auto'
+			? 'min-h-0 min-w-0 flex-1 overflow-y-auto'
 			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>

package/src/lib/components/layout/FooterItemRenderer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FooterItem } from '$lib/contexts/footerContext.svelte';
+	import type { FooterItem } from '#lib/contexts/footerContext.svelte.js';
 
 	let { item }: { item: FooterItem } = $props();
 
@@ -9,7 +9,7 @@
 {#if item.onClick}
 	<button
 		onclick={item.onClick}
-		class="gap-1.5 px-2 py-0.5 rounded flex cursor-pointer items-center transition-colors hover:bg-muted"
+		class="gap-1.5 px-2 py-0.5 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover"
 	>
 		<item.component {...itemProps} />
 	</button>

package/src/lib/components/layout/PageContent.svelte

@@ -7,6 +7,7 @@
 	let { class: className = '', children }: PageContentProps = $props();
 </script>
 
-<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+<!-- One content width for every page, so moving between pages doesn't change the frame. -->
+<div class={`max-w-6xl min-w-0 mx-auto w-full px-(--page-px) py-(--page-py) ${className}`}>
 	{@render children?.()}
-</main>
+</div>

package/src/lib/components/layout/PageFooter.svelte

@@ -2,11 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import { useFooter } from '$lib/contexts/footerContext.svelte';
+	import { useFooter } from '#lib/contexts/footerContext.svelte.js';
 	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '$lib/i18n/messages';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		errors?: string[];
@@ -88,12 +88,12 @@
 			<ComputeMessagesDialog {errors} {warnings} {diagnostics}>
 				{#snippet trigger()}
 					<div
-						class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errorCount >
+						class="gap-1.5 px-2 py-1 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover {errorCount >
 						0
 							? 'text-destructive hover:bg-destructive/10'
 							: warningCount > 0
 								? 'text-warning hover:bg-warning/10'
-								: 'hover:bg-muted'}"
+								: 'hover:bg-hover'}"
 						title={formatCount(totalCount, t.lastSolveMessagesOne, t.lastSolveMessagesOther)}
 					>
 						{#if errorCount > 0}
@@ -136,6 +136,8 @@
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p class="truncate">{copyrightLine}</p>
+		{#if copyrightLine}
+			<p class="truncate">{copyrightLine}</p>
+		{/if}
 	</div>
 </footer>

package/src/lib/components/layout/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { ModeToggle } from '$lib/components/primitives/mode-toggle';
+	import { ModeToggle } from '#lib/components/primitives/mode-toggle/index.js';
 
 	interface PageHeaderProps {
 		homeUrl?: string;
@@ -34,7 +34,7 @@
 	<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" aria-label={brandName}>
-			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
+			<img src={logo} alt="" aria-hidden="true" class="h-7 w-7" />
 			<!-- 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' : ''}"
@@ -66,7 +66,7 @@
 	</div>
 
 	{#if subnav}
-		<div class="h-10 flex items-center border-t border-border/60 px-(--page-px)">
+		<div class="h-10 flex items-center border-t border-border px-(--page-px)">
 			{@render subnav()}
 		</div>
 	{/if}

package/src/lib/components/layout/SideNav.svelte

@@ -13,6 +13,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { page } from '$app/state';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import Check from '@lucide/svelte/icons/check';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
 
 	interface SideNavProps {
 		items: SideNavItem[];
@@ -41,10 +44,12 @@
 		if (item.match === 'prefix') return path.startsWith(item.href);
 		return path === item.href;
 	}
+
+	const activeItem = $derived(items.find(isActive));
 </script>
 
-<!-- On a phone a 240px column would leave the page ~150px, so the nav becomes a scrolling strip
-     above the content and the eyebrow, header and footer drop out. -->
+<!-- On a phone a 240px column would leave the page ~150px, so the nav collapses to one switcher
+     naming the current section; the header and footer drop out. -->
 <aside
 	class={`sm:h-full sm:w-60 sm:overflow-y-auto sm:border-b-0 flex w-full shrink-0 flex-col border-b border-border bg-background ${
 		border ? 'sm:border-r' : ''
@@ -64,31 +69,67 @@
 		</div>
 	{/if}
 
-	<nav
-		class="gap-1 py-2 sm:gap-0 sm:pt-0 sm:pb-4 sm:pr-2 sm:flex-1 sm:space-y-px sm:block sm:px-0 flex overflow-x-auto px-(--page-px)"
-	>
+	<div class="py-2 sm:hidden px-(--page-px)">
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<button
+						{...props}
+						class="min-h-11 gap-3 px-3 text-sm font-medium flex w-full items-center rounded-md border border-border bg-card text-left"
+					>
+						{#if activeItem?.icon}
+							{@const Icon = activeItem.icon}
+							<Icon class="size-4 shrink-0 opacity-70" />
+						{/if}
+						<span class="min-w-0 flex-1 truncate">
+							{#if eyebrow}<span class="text-muted-foreground">{eyebrow} /</span>{/if}
+							{activeItem?.label ?? ''}
+						</span>
+						<ChevronsUpDown class="size-4 shrink-0 opacity-60" />
+					</button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content sideOffset={4}>
+				{#each items as item (item.href)}
+					{@const active = isActive(item)}
+					{@const Icon = item.icon}
+					<DropdownMenu.Item class="min-h-11">
+						{#snippet child({ props })}
+							<a href={item.href} aria-current={active ? 'page' : undefined} {...props}>
+								{#if Icon}<Icon class="size-4 opacity-70" />{/if}
+								<span class="flex-1">{item.label}</span>
+								{#if item.badge !== undefined}
+									<span class="font-mono text-2xs tabular-nums opacity-60">{item.badge}</span>
+								{/if}
+								{#if active}<Check class="size-4" aria-hidden="true" />{/if}
+							</a>
+						{/snippet}
+					</DropdownMenu.Item>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+
+	<nav class="pb-4 pr-2 sm:block hidden flex-1 space-y-px">
 		{#each items as item (item.href)}
 			{@const active = isActive(item)}
 			{@const Icon = item.icon}
 			<a
 				href={item.href}
-				class={`group gap-2 py-2 pr-2.5 sm:py-1.5 sm:w-full relative flex shrink-0 items-center text-left transition-colors ${
+				aria-current={active ? 'page' : undefined}
+				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
 					active
-						? 'pl-2.5 sm:pl-4 sm:rounded-l-none sm:rounded-r-md rounded-md bg-accent text-accent-foreground'
-						: 'sm:mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-4 rounded-r-md bg-selected text-foreground'
+						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-hover hover:text-foreground'
 				}`}
 			>
 				{#if active}
-					<span
-						class="left-0 top-0 bottom-0 w-0.75 sm:block absolute hidden bg-primary"
-						aria-hidden="true"
-					></span>
+					<span class="left-0 top-0 bottom-0 w-0.75 absolute bg-primary" aria-hidden="true"></span>
 				{/if}
 				{#if Icon}
 					<Icon class="h-3.5 w-3.5 shrink-0 opacity-70" />
 				{/if}
-				<span class="text-sm font-medium sm:flex-1 sm:truncate whitespace-nowrap">{item.label}</span
-				>
+				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
 				{#if item.badge !== undefined}
 					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}
@@ -97,7 +138,7 @@
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border">
 			{@render footer()}
 		</div>
 	{/if}

package/src/lib/components/layout/SubNav.svelte

@@ -31,8 +31,8 @@
 			class={[
 				'h-7 px-3 gap-1.5 text-sm font-medium flex items-center rounded-md transition-colors',
 				active
-					? 'bg-accent text-accent-foreground'
-					: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+					? 'bg-selected text-foreground'
+					: 'text-muted-foreground hover:bg-hover hover:text-foreground'
 			].join(' ')}
 		>
 			{#if item.icon}