@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

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. */
@@ -38,6 +39,11 @@
 		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 {
@@ -48,7 +54,8 @@
 		onconfirm,
 		ondiscard,
 		freezesDuringSolve = false,
-		placement = 'floating'
+		placement = 'floating',
+		progressShownByHost = false
 	}: Props = $props();
 
 	const locale = getLocaleContext();
@@ -56,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));
 
@@ -126,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);
@@ -181,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.
@@ -193,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
 	);
 
@@ -245,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>
@@ -269,18 +228,17 @@
 		</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="p-3 border {placement === 'inline'
-			? 'mt-3 rounded-md bg-muted/40'
-			: 'bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg 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>
@@ -298,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 ?? '')}
@@ -338,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">
@@ -356,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}
@@ -137,7 +137,10 @@
 		{/each}
 
 		{#if copyrightLine}
-			<p class="truncate">{copyrightLine}</p>
+			<!-- On a phone, upright or on its side, the row is for status and messages. -->
+			<p class="max-sm:hidden truncate [@media(pointer:coarse)_and_(max-height:500px)]:hidden">
+				{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

@@ -15,7 +15,7 @@
 	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';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
 
 	interface SideNavProps {
 		items: SideNavItem[];
@@ -119,8 +119,8 @@
 				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-4 rounded-r-md bg-accent text-accent-foreground'
-						: '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}
@@ -138,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}