@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/src/lib/components/viewer/ViewerDock.svelte

@@ -0,0 +1,404 @@
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import {
+		Camera,
+		Grid3x3,
+		Layers,
+		LocateFixed,
+		Maximize,
+		Minimize,
+		Moon,
+		Ellipsis,
+		Palette,
+		Ruler,
+		Settings2,
+		Spline,
+		Cuboid
+	} from '@lucide/svelte';
+	import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
+	import type { ViewerMessages } from '#lib/i18n/messages.js';
+
+	interface Props {
+		t: ViewerMessages;
+		/** Fades the dock out while a host drawer covers the viewer. */
+		hidden?: boolean;
+		showDisplay: boolean;
+		showGrid: boolean;
+		showSceneManager: boolean;
+		showScreenshot: boolean;
+		showFullscreen: boolean;
+		styleOptions: { look: Look; label: string }[];
+		viewPresets: { preset: ViewPreset; label: string }[];
+		renderStyle: Look;
+		nightOn: boolean;
+		edgesVisible: boolean;
+		measureActive: boolean;
+		gridVisible: boolean;
+		sceneManagerOpen: boolean;
+		projection: CameraProjection;
+		isFullscreen: boolean;
+		onSetLook: (look: Look) => void;
+		onToggleNight: () => void;
+		onToggleEdges: () => void;
+		onToggleMeasure: () => void;
+		onToggleGrid: () => void;
+		onToggleSceneManager: () => void;
+		onToggleProjection: () => void;
+		onSetView: (preset: ViewPreset) => void;
+		onFit: () => void;
+		onScreenshot: () => void;
+		onToggleFullscreen: () => void;
+	}
+
+	let {
+		t,
+		hidden = false,
+		showDisplay,
+		showGrid,
+		showSceneManager,
+		showScreenshot,
+		showFullscreen,
+		styleOptions,
+		viewPresets,
+		renderStyle,
+		nightOn,
+		edgesVisible,
+		measureActive,
+		gridVisible,
+		sceneManagerOpen,
+		projection,
+		isFullscreen,
+		onSetLook,
+		onToggleNight,
+		onToggleEdges,
+		onToggleMeasure,
+		onToggleGrid,
+		onToggleSceneManager,
+		onToggleProjection,
+		onSetView,
+		onFit,
+		onScreenshot,
+		onToggleFullscreen
+	}: Props = $props();
+
+	// A hairline pill at the bottom edge is the iOS home indicator on a phone, and swiping it leaves
+	// the app. Touch gets a visible round button instead.
+	const touch = new MediaQuery('(pointer: coarse)');
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
+
+	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 56, h: 5 });
+	const EXPANDED_H = $derived(touch.current ? 54 : 42);
+	const PAD = 4;
+
+	let dockEl: HTMLDivElement | undefined = $state();
+	let rowWidth = $state(0);
+	let engaged = $state(false);
+	// Set by an outside press: the dock was dismissed, so it shrinks faster.
+	let dismissed = $state(false);
+	let menusOpen = $state(0);
+	let focusWithin = $state(false);
+	let idleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const wantOpen = $derived(engaged || menusOpen > 0 || focusWithin);
+
+	// Opening leads: the pill grows first and the buttons pop in behind it. Closing mirrors it: the
+	// buttons fade first, then the pill shrinks. Without the delay on close the row is clipped mid-fade.
+	const EASE = 'cubic-bezier(0.32, 0.72, 0, 1)';
+	const containerStyle = $derived.by(() => {
+		const bottom = touch.current ? 'max(1rem,env(safe-area-inset-bottom))' : '0.75rem';
+		const geometry = wantOpen
+			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:12px;padding:${PAD}px`
+			: `width:${COLLAPSED.w}px;height:${COLLAPSED.h}px;border-radius:${touch.current ? 22 : 99}px;padding:0px`;
+		const size = `bottom:${bottom};${geometry}`;
+		if (reducedMotion.current) return size;
+		const ms = wantOpen ? 420 : dismissed ? 130 : 170;
+		const delay = wantOpen || dismissed ? 0 : 20;
+		const props = ['width', 'height', 'border-radius', 'padding'];
+		return `${size};transition:${props.map((p) => `${p} ${ms}ms ${EASE} ${delay}ms`).join(',')},opacity 200ms ease`;
+	});
+	const itemStyle = (index: number) => {
+		if (reducedMotion.current) return `opacity:${wantOpen ? 1 : 0}`;
+		const delay = 110 + index * 35;
+		return wantOpen
+			? `opacity:1;transform:none;transition:opacity 240ms ease ${delay}ms,transform 420ms cubic-bezier(0.34,1.45,0.5,1) ${delay}ms`
+			: 'opacity:0;transform:translateY(6px) scale(0.85);transition:opacity 100ms ease,transform 100ms ease';
+	};
+	// The touch button's settings glyph hands over to the row.
+	const glyphStyle = $derived(
+		`opacity:${touch.current && !wantOpen ? 1 : 0};${reducedMotion.current ? '' : `transition:opacity ${wantOpen ? 100 : 100}ms ease ${wantOpen || dismissed ? 0 : 60}ms`}`
+	);
+
+	function scheduleCollapse(delay = touch.current ? 3500 : 150) {
+		clearTimeout(idleTimer);
+		idleTimer = setTimeout(() => (engaged = false), delay);
+	}
+
+	function engage() {
+		engaged = true;
+		dismissed = false;
+		clearTimeout(idleTimer);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!dockEl || touch.current || event.pointerType === 'touch') return;
+		// Orbiting or box-dragging with the button down should never pop the dock open.
+		if (event.buttons) return;
+		const host = dockEl.offsetParent;
+		if (!host || !(event.target instanceof Node) || !host.contains(event.target)) {
+			if (engaged) scheduleCollapse();
+			return;
+		}
+		const r = dockEl.getBoundingClientRect();
+		const near =
+			event.clientY > r.top - 36 && Math.abs(event.clientX - (r.left + r.width / 2)) < 110;
+		if (near) engage();
+		else if (engaged) scheduleCollapse();
+	}
+
+	function handleWindowPointerDown(event: PointerEvent) {
+		if (!engaged || !dockEl || !(event.target instanceof Node)) return;
+		if (!dockEl.contains(event.target)) {
+			clearTimeout(idleTimer);
+			dismissed = true;
+			engaged = false;
+		}
+	}
+
+	function openFromCollapsed() {
+		if (wantOpen) return;
+		engage();
+		if (touch.current) scheduleCollapse();
+	}
+
+	// Any use of the open dock on touch pushes the idle collapse back.
+	function keepAlive() {
+		if (touch.current && engaged) scheduleCollapse();
+	}
+
+	function trackMenu(open: boolean) {
+		menusOpen += open ? 1 : -1;
+		if (!open && !touch.current) scheduleCollapse(250);
+	}
+
+	// Buttons in the row, in order, so the stagger index stays right when some are hidden.
+	const buttons = $derived(
+		[
+			showDisplay && 'look',
+			showSceneManager && 'scene',
+			'measure',
+			'fit',
+			showFullscreen && 'full',
+			'more'
+		].filter(Boolean) as string[]
+	);
+	const idx = (id: string) => buttons.indexOf(id);
+
+	const BTN =
+		'relative grid size-8.5 shrink-0 place-items-center rounded-lg text-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
+	const DOT =
+		'aria-pressed:after:absolute aria-pressed:after:bottom-0.5 aria-pressed:after:size-1 aria-pressed:after:rounded-full aria-pressed:after:bg-primary';
+</script>
+
+<!-- eslint-disable shadcn/no-inline-styles -- the pill animates between measured pixel sizes and staggered per-item delays; no class can express those -->
+
+<svelte:window onpointermove={handlePointerMove} onpointerdown={handleWindowPointerDown} />
+
+<!-- Resting state is a pill; it grows into the row. Only the container is clickable while collapsed. -->
+<div
+	bind:this={dockEl}
+	role="toolbar"
+	aria-label={t.toolsMenu}
+	tabindex="-1"
+	class="backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden transition-colors {hidden
+		? 'pointer-events-none opacity-0'
+		: ''} {wantOpen
+		? 'shadow-md border border-border-strong bg-card/75'
+		: touch.current
+			? 'shadow-lg cursor-pointer border border-border bg-background/90'
+			: nightOn
+				? 'border-white/25 bg-white/35 hover:bg-white/70 cursor-pointer border'
+				: 'shadow-sm cursor-pointer border border-border-strong bg-card/90 hover:bg-card'}"
+	style={containerStyle}
+	onclick={openFromCollapsed}
+	onkeydown={(e) => (e.key === 'Escape' ? (engaged = false) : undefined)}
+	onfocusin={() => (focusWithin = true)}
+	onfocusout={(e) => {
+		if (!dockEl?.contains(e.relatedTarget as Node | null)) focusWithin = false;
+	}}
+	onpointerdown={keepAlive}
+>
+	{#if touch.current}
+		<span
+			class="inset-0 pointer-events-none absolute grid place-items-center text-foreground"
+			style={glyphStyle}
+			aria-hidden="true"
+		>
+			<Settings2 class="size-5" />
+		</span>
+	{/if}
+
+	<div
+		bind:offsetWidth={rowWidth}
+		class="gap-0.5 mx-auto flex w-max items-center"
+		inert={!wantOpen}
+	>
+		{#if showDisplay}
+			<div style={itemStyle(idx('look'))}>
+				<DropdownMenu.Root onOpenChange={trackMenu}>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<button {...props} class={BTN} title={t.display} aria-label={t.display}>
+								<Palette class="size-4.5" />
+							</button>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content
+						side="top"
+						align="center"
+						sideOffset={12}
+						variant="glass"
+						class="min-w-52 z-10001 w-auto whitespace-nowrap"
+					>
+						<DropdownMenu.RadioGroup
+							value={renderStyle}
+							onValueChange={(look) => onSetLook(look as Look)}
+						>
+							{#each styleOptions as { look, label } (look)}
+								<DropdownMenu.RadioItem value={look} closeOnSelect={false}>
+									{label}
+								</DropdownMenu.RadioItem>
+							{/each}
+						</DropdownMenu.RadioGroup>
+						<DropdownMenu.Separator />
+						<DropdownMenu.CheckboxItem
+							switch
+							checked={edgesVisible}
+							onCheckedChange={onToggleEdges}
+						>
+							<Spline />
+							{t.edges}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">E</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		{/if}
+
+		{#if showSceneManager}
+			<div style={itemStyle(idx('scene'))}>
+				<button
+					class="{BTN} {DOT}"
+					title="{t.sceneManager} (S)"
+					aria-label={t.sceneManager}
+					aria-pressed={sceneManagerOpen}
+					onclick={onToggleSceneManager}
+				>
+					<Layers class="size-4.5" />
+				</button>
+			</div>
+		{/if}
+
+		<div style={itemStyle(idx('measure'))}>
+			<button
+				class="{BTN} {DOT}"
+				title="{t.measure} (M)"
+				aria-label={t.measure}
+				aria-pressed={measureActive}
+				onclick={onToggleMeasure}
+			>
+				<Ruler class="size-4.5" />
+			</button>
+		</div>
+
+		<div style={itemStyle(idx('fit'))}>
+			<button class={BTN} title="{t.fitToView} (F)" aria-label="{t.fitToView} (F)" onclick={onFit}>
+				<LocateFixed class="size-4.5" />
+			</button>
+		</div>
+
+		{#if showFullscreen}
+			<div style={itemStyle(idx('full'))}>
+				<button
+					class={BTN}
+					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					onclick={onToggleFullscreen}
+				>
+					{#if isFullscreen}<Minimize class="size-4.5" />{:else}<Maximize class="size-4.5" />{/if}
+				</button>
+			</div>
+		{/if}
+
+		<div style={itemStyle(idx('more'))}>
+			<DropdownMenu.Root onOpenChange={trackMenu}>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<button {...props} class={BTN} title={t.toolsMenu} aria-label={t.toolsMenu}>
+							<Ellipsis class="size-4.5" />
+						</button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content
+					side="top"
+					align="end"
+					sideOffset={12}
+					variant="glass"
+					class="min-w-60 z-10001 w-auto whitespace-nowrap"
+				>
+					<DropdownMenu.Label>{t.views}</DropdownMenu.Label>
+					<div class="gap-1 px-1 pb-1 grid grid-cols-4">
+						{#each viewPresets as { preset, label } (preset)}
+							<DropdownMenu.Item
+								closeOnSelect={false}
+								onSelect={() => onSetView(preset)}
+								variant="chip"
+							>
+								{label}
+							</DropdownMenu.Item>
+						{/each}
+					</div>
+
+					<DropdownMenu.Separator />
+
+					<DropdownMenu.CheckboxItem
+						switch
+						checked={projection === 'orthographic'}
+						onCheckedChange={onToggleProjection}
+					>
+						<Cuboid />
+						{t.switchToOrthographic}
+						<DropdownMenu.Shortcut class="pointer-coarse:hidden">O</DropdownMenu.Shortcut>
+					</DropdownMenu.CheckboxItem>
+
+					{#if showGrid}
+						<DropdownMenu.CheckboxItem switch checked={gridVisible} onCheckedChange={onToggleGrid}>
+							<Grid3x3 />
+							{t.grid}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">G</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					{/if}
+
+					{#if showDisplay}
+						<DropdownMenu.CheckboxItem switch checked={nightOn} onCheckedChange={onToggleNight}>
+							<Moon />
+							{t.nightMode}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">N</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					{/if}
+
+					{#if showScreenshot}
+						<DropdownMenu.Separator />
+					{/if}
+
+					{#if showScreenshot}
+						<DropdownMenu.Item onSelect={onScreenshot}>
+							<Camera />
+							{t.screenshot}
+						</DropdownMenu.Item>
+					{/if}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	</div>
+</div>

package/src/lib/composables/useFooterItem.svelte.ts

@@ -3,7 +3,7 @@ import {
 	type FooterStore,
 	type FooterItem,
 	FOOTER_CONTEXT_KEY
-} from '$lib/contexts/footerContext.svelte';
+} from '#lib/contexts/footerContext.svelte.js';
 
 export type FooterItemConfig<P extends Record<string, unknown> = Record<string, unknown>> = Omit<
 	FooterItem<P>,

package/src/lib/compute/liveProgress.svelte.ts

@@ -0,0 +1,103 @@
+import { untrack } from 'svelte';
+import type { ProgressPayload } from '@selvajs/schemas';
+import type { LiveSolveState } from '@selvajs/solve/client';
+
+/** A progress bar's width (0–1) and how long its transition to that width runs. */
+export interface ProgressBar {
+	width: number;
+	ms: number;
+}
+
+/**
+ * The live channel's progress reports, smoothed for display. `headline` is the first source's
+ * report, held long enough to read; `bars` is the width each source's bar should animate to.
+ */
+export function createLiveProgress(getLive: () => LiveSolveState): {
+	readonly progress: ProgressPayload[];
+	readonly headline: ProgressPayload | undefined;
+	readonly bars: Readonly<Record<string, ProgressBar>>;
+} {
+	const progress = $derived([...getLive().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, ProgressBar>>({});
+	// 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.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- bookkeeping for the effect below, never rendered
+	let seen = new Map<string, unknown>();
+	let targets: Record<string, ProgressBar> = {};
+	$effect(() => {
+		const snapped: Record<string, ProgressBar> = {};
+		const eased: Record<string, ProgressBar> = {};
+		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);
+	});
+
+	// 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<ProgressPayload | 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);
+	});
+
+	return {
+		get progress() {
+			return progress;
+		},
+		get headline() {
+			return headline;
+		},
+		get bars() {
+			return bars;
+		}
+	};
+}

package/src/lib/compute/run-panel-action.ts

@@ -0,0 +1,16 @@
+import type { SolveSettlement } from '@selvajs/solve/client';
+import type { ActionButton } from '../types/actionButton';
+
+/**
+ * Runs a footer-menu action. A `solvesFirst` action waits for the result for the current
+ * inputs and runs only on an applied one; a refused or failed solve has already shown the user
+ * why. A host that can't solve (`ensureSolved` undefined) runs it straight away.
+ */
+export async function runPanelAction(
+	action: ActionButton,
+	ensureSolved: (() => Promise<SolveSettlement>) | undefined
+): Promise<void> {
+	if (!action.solvesFirst || !ensureSolved) return action.onclick();
+	const settled = await ensureSolved();
+	if (settled.status === 'applied') await action.onclick(settled);
+}

package/src/lib/compute/solving.svelte.ts

@@ -2,76 +2,92 @@ import { untrack } from 'svelte';
 import { APP_DEFAULTS } from '../constants';
 
 /**
- * Adaptive solving indicator: measures solve durations and adjusts its
- * visibility delay from the running average.
+ * When to show that a solve is running. A solve that ends within `SHOW_AFTER_MS` shows nothing:
+ * the result updating is feedback enough, and a spinner that flashes for a frame reads as jank.
+ * Once shown, the indicator stays `MIN_VISIBLE_MS` for the same reason. `slow` turns on past
+ * `SLOW_AFTER_MS`, the case of a Rhino.Compute round trip or a heavy definition.
  *
- * - Average under FAST_THRESHOLD_MS: never shown, so quick solves don't flicker
- * - Average over SLOW_THRESHOLD_MS: shown immediately
- * - Between the two: shown after a proportional slice of ANIMATION_DELAY
- * - First solve: shown immediately, there is no history yet
+ * `freezesDuringSolve` is for a host that can't paint while it solves (an embedded WebView on
+ * the solver's thread). A delay can't run there, so the indicator shows on every solve, before
+ * the solve takes the thread: it is the only place that host can say Esc aborts.
  */
-export function createSolvingIndicator(isSolving: () => boolean): { readonly show: boolean } {
-	const { FAST_THRESHOLD_MS, SLOW_THRESHOLD_MS, HISTORY_SIZE, ANIMATION_DELAY } =
-		APP_DEFAULTS.SOLVING_INDICATOR;
+export function createSolvingIndicator(
+	isSolving: () => boolean,
+	options: { freezesDuringSolve?: boolean } = {}
+): { readonly show: boolean; readonly slow: boolean } {
+	const { SHOW_AFTER_MS, MIN_VISIBLE_MS, SLOW_AFTER_MS } = APP_DEFAULTS.SOLVING_INDICATOR;
+
+	if (options.freezesDuringSolve) {
+		return {
+			// Read straight from `isSolving`, not through an effect: an effect would run a tick
+			// later, after the solve has already frozen the page.
+			get show() {
+				return isSolving();
+			},
+			slow: false
+		};
+	}
 
 	let show = $state(false);
-	let timeout: ReturnType<typeof setTimeout> | null = null;
-	let solveStartTime: number | null = null;
-	const solveHistory: number[] = [];
+	let slow = $state(false);
+	let shownAt = 0;
+	let showTimer: ReturnType<typeof setTimeout> | null = null;
+	let slowTimer: ReturnType<typeof setTimeout> | null = null;
+	let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clear(timer: ReturnType<typeof setTimeout> | null) {
+		if (timer) clearTimeout(timer);
+		return null;
+	}
+
+	function hide() {
+		hideTimer = null;
+		show = false;
+		slow = false;
+	}
 
 	$effect(() => {
 		const solving = isSolving();
-
 		untrack(() => {
 			if (solving) {
-				solveStartTime = performance.now();
-
-				const avg =
-					solveHistory.length === 0
-						? Infinity
-						: solveHistory.reduce((a, b) => a + b, 0) / solveHistory.length;
-
-				if (solveHistory.length > 0 && avg < FAST_THRESHOLD_MS) return;
-
-				const delay =
-					avg === Infinity || avg >= SLOW_THRESHOLD_MS
-						? 0
-						: ((avg - FAST_THRESHOLD_MS) / (SLOW_THRESHOLD_MS - FAST_THRESHOLD_MS)) *
-							ANIMATION_DELAY;
-
-				if (!timeout) {
-					if (delay === 0) {
+				// A solve that starts while the last one's indicator is held keeps it up.
+				hideTimer = clear(hideTimer);
+				if (!show) {
+					showTimer ??= setTimeout(() => {
+						showTimer = null;
 						show = true;
-					} else {
-						timeout = setTimeout(() => {
-							show = true;
-							timeout = null;
-						}, delay);
-					}
+						shownAt = performance.now();
+					}, SHOW_AFTER_MS);
 				}
+				slowTimer ??= setTimeout(() => {
+					slowTimer = null;
+					slow = true;
+				}, SLOW_AFTER_MS);
 			} else {
-				if (solveStartTime !== null) {
-					solveHistory.push(performance.now() - solveStartTime);
-					if (solveHistory.length > HISTORY_SIZE) solveHistory.shift();
-					solveStartTime = null;
-				}
-
-				if (timeout) {
-					clearTimeout(timeout);
-					timeout = null;
-				}
-				show = false;
+				showTimer = clear(showTimer);
+				slowTimer = clear(slowTimer);
+				if (!show) return;
+				const remaining = MIN_VISIBLE_MS - (performance.now() - shownAt);
+				if (remaining > 0) hideTimer ??= setTimeout(hide, remaining);
+				else hide();
 			}
 		});
+	});
 
-		return () => {
-			if (timeout) clearTimeout(timeout);
-		};
+	// Separate from the effect above: a cleanup there would run on every `isSolving` flip and
+	// cancel the timers it just set.
+	$effect(() => () => {
+		clear(showTimer);
+		clear(slowTimer);
+		clear(hideTimer);
 	});
 
 	return {
 		get show() {
 			return show;
+		},
+		get slow() {
+			return slow;
 		}
 	};
 }

package/src/lib/compute/useSolveSession.svelte.ts

@@ -86,10 +86,13 @@ export function useSolveSession(args: SolveSessionArgs): SolveSession {
 		discard: () => session.discard(),
 		setValue: (id, value, forceSolve) => session.setValue(id, value, forceSolve),
 		solve: () => session.solve(),
+		ensureSolved: () => session.ensureSolved(),
+		onSettled: (listener) => session.onSettled(listener),
 		loadValues: (incoming) => session.loadValues(incoming),
 		rebuild: (schema, scopeKey) => session.rebuild(schema, scopeKey),
 		report: (result) => session.report(result),
 		reportError: (message) => session.reportError(message),
+		reportAborted: () => session.reportAborted(),
 		subscribe: (listener) => session.subscribe(listener),
 		notify: () => session.notify(),
 		dispose: () => session.dispose()