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

package/src/lib/components/primitives/SolvingIndicator.svelte

@@ -1,60 +1,261 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { Check, LoaderCircle } from '@lucide/svelte';
+	import { EMPTY_LIVE_SOLVE, type LiveSolveState } from '@selvajs/solve/client';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { createLiveProgress } from '#lib/compute/liveProgress.svelte.js';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
+	// The solve status in a panel's action row. It grows only as far as the solve needs: a quiet
+	// "up to date" row, a pill once a solve is visible, a card with progress and Abort once it is
+	// slow. It grows upward over the fields, so the footer never changes height.
 	interface Props {
+		/** The raw flag: times the solve, and acknowledges one too short to show. */
+		isSolving: boolean;
+		/** `createSolvingIndicator(...).show`. */
 		show: boolean;
+		/** `createSolvingIndicator(...).slow`. */
+		slow?: boolean;
+		/** Live progress for the card. Without it the card's bar is indeterminate. */
+		live?: LiveSolveState;
+		/** Without it the card has no Abort button; Esc still works where the host handles it. */
+		onabort?: () => void;
 		/**
-		 * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
-		 * icon button, for a narrow host whose corner holds its content and whose action row
-		 * already reserves the chip's place. Both say Esc aborts, as every host does.
+		 * The page can't repaint mid-solve (see `createSolvingIndicator`): the pill says Esc aborts
+		 * instead of counting seconds, and never grows into the card.
 		 */
-		placement?: 'floating' | 'inline';
+		freezesDuringSolve?: boolean;
 	}
 
-	let { show, placement = 'floating' }: Props = $props();
+	let {
+		isSolving,
+		show,
+		slow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false
+	}: Props = $props();
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
+
+	const DONE_VISIBLE_MS = 1400;
+	// A drag fires a solve per step; one acknowledgement per this many ms is enough.
+	const PING_EVERY_MS = 500;
+
+	const progress = createLiveProgress(() => live ?? EMPTY_LIVE_SOLVE);
+	const head = $derived(progress.headline ?? progress.progress[0]);
+	const bar = $derived(
+		head?.fraction === undefined
+			? undefined
+			: (progress.bars[head.source ?? ''] ?? { width: head.fraction, ms: 150 })
+	);
+
+	let startedAt = 0;
+	let elapsed = $state(0);
+	let finished = $state<{ ms: number; aborted: boolean } | null>(null);
+	let ping = $state(0);
+	let lastPingAt = 0;
+	// Not `show` itself at the solve's end: the host's indicator may already have dropped it.
+	let shownThisSolve = false;
+
+	$effect(() => {
+		if (show) shownThisSolve = true;
+	});
+
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) {
+				startedAt = performance.now();
+				shownThisSolve = show;
+				elapsed = 0;
+				finished = null;
+				return;
+			}
+			if (!startedAt) return;
+			const ms = performance.now() - startedAt;
+			startedAt = 0;
+			if (shownThisSolve) {
+				finished = { ms, aborted: live?.ended?.kind === 'aborted' };
+			} else if (performance.now() - lastPingAt > PING_EVERY_MS) {
+				lastPingAt = performance.now();
+				ping++;
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!finished) return;
+		const timer = setTimeout(() => (finished = null), DONE_VISIBLE_MS);
+		return () => clearTimeout(timer);
+	});
+
+	$effect(() => {
+		if (!isSolving || !show || freezesDuringSolve) return;
+		const tick = () => (elapsed = performance.now() - startedAt);
+		tick();
+		const id = setInterval(tick, 100);
+		return () => clearInterval(id);
+	});
+
+	// Done wins over a held `show`: the indicator outlives the solve by up to its minimum time,
+	// and saying "Solving" over a result that has already landed would be wrong.
+	const mode = $derived<'idle' | 'work' | 'card' | 'done'>(
+		finished ? 'done' : show ? (slow && !freezesDuringSolve ? 'card' : 'work') : 'idle'
+	);
+
+	const seconds = $derived(
+		new Intl.NumberFormat(locale.locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+	);
+	const fmt = (ms: number) => `${seconds.format(ms / 1000)} s`;
+
+	const announcement = $derived(
+		mode === 'work' || mode === 'card'
+			? t.solvingEllipsis
+			: mode === 'done'
+				? finished?.aborted
+					? t.solveStopped
+					: t.solveDone
+				: ''
+	);
 </script>
 
-<!-- The live region stays mounted: a screen reader only announces text that changes inside a
-     region it already knows about, so one created together with its text says nothing. -->
-<div
-	role="status"
-	aria-live="polite"
-	aria-atomic="true"
-	class={placement === 'inline' ? 'h-10 gap-3 min-w-0 flex items-center' : undefined}
->
-	{#if show && placement === 'inline'}
-		<div
-			class="gap-2 px-3 h-10 text-sm font-semibold flex shrink-0 items-center rounded-md bg-primary text-primary-foreground"
-		>
+<div class="h-9 min-w-0 relative flex-1">
+	<!-- The live region stays mounted: a screen reader only announces text that changes inside a
+	     region it already knows about, so one created together with its text says nothing. -->
+	<div role="status" aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
+
+	<div
+		class="inset-x-0 bottom-0 backdrop-blur-md ease-out absolute z-10 overflow-hidden border border-border-strong transition-all duration-300 motion-reduce:transition-none {mode ===
+		'card'
+			? 'h-24 shadow-md rounded-lg bg-card/75'
+			: mode === 'idle'
+				? 'h-9 shadow-sm rounded-md bg-card/90'
+				: 'h-9 shadow-md rounded-md bg-card/75'}"
+		data-testid="solve-status"
+		data-state={mode}
+	>
+		{#if mode === 'card'}
 			<div
-				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-				aria-hidden="true"
-			></div>
-			{t.solvingEllipsis}
-		</div>
-		<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
-			{t.solveMessagesEscHint}
-		</span>
-	{:else if show}
-		<div
-			class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl animate-in fade-in slide-in-from-left fixed z-50 flex items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground duration-200"
-		>
-			<div class="h-5 w-5 relative flex shrink-0 items-center justify-center" aria-hidden="true">
+				class="px-3 gap-2 flex h-full flex-col justify-center"
+				in:fade={{ duration: 150, delay: 80 }}
+			>
+				<div class="gap-2 min-w-0 flex items-center">
+					<LoaderCircle
+						class="size-4 animate-spin shrink-0 text-muted-foreground"
+						aria-hidden="true"
+					/>
+					<span class="text-sm font-medium min-w-0 flex-1 truncate">{head?.label ?? t.solving}</span
+					>
+					{#if head?.done !== undefined && head?.total !== undefined}
+						<span class="text-xs shrink-0 text-muted-foreground tabular-nums">
+							{head.done} / {head.total}
+						</span>
+					{/if}
+				</div>
 				<div
-					class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
-				></div>
-				<div
-					class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-				></div>
-			</div>
-			<div class="leading-tight flex flex-col">
-				<span class="text-sm font-semibold">{t.solving}</span>
-				<span class="text-xs opacity-70" data-testid="solve-esc-hint">{t.solveMessagesEscHint}</span
+					class="h-1 overflow-hidden rounded-full bg-muted"
+					role="progressbar"
+					aria-label={head?.label ?? t.solving}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={bar ? Math.round(bar.width * 100) : undefined}
 				>
+					{#if bar}
+						<div
+							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>
+					{/if}
+				</div>
+				<div class="gap-2 flex items-center">
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+					{#if onabort}
+						<Button
+							variant="outline"
+							size="xs"
+							class="ml-auto shrink-0"
+							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
+						>
+							{t.solveMessagesAbort}
+							<kbd
+								class="px-1 rounded-sm border border-border font-sans text-2xs text-muted-foreground"
+							>
+								Esc
+							</kbd>
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else if mode === 'work'}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				<LoaderCircle
+					class="size-4 animate-spin shrink-0 text-muted-foreground"
+					aria-hidden="true"
+				/>
+				{#if freezesDuringSolve}
+					<span class="text-sm font-medium shrink-0">{t.solvingEllipsis}</span>
+					<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
+						{t.solveMessagesEscHint}
+					</span>
+				{:else}
+					<span class="text-sm font-medium shrink-0">{t.solving}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+				{/if}
 			</div>
-		</div>
-	{/if}
+		{:else if mode === 'done' && finished}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				{#if finished.aborted}
+					<span class="text-sm font-medium min-w-0 truncate">{t.solveStopped}</span>
+				{:else}
+					<Check class="size-4 shrink-0 text-success" aria-hidden="true" />
+					<span class="text-sm font-medium shrink-0">{t.solveDone}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(finished.ms)}</span>
+				{/if}
+			</div>
+		{:else}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150 }}>
+				<span class="size-1.5 relative shrink-0 rounded-full bg-success">
+					{#key ping}
+						{#if ping > 0}
+							<span class="solve-ping inset-0 absolute rounded-full border-2 border-success"></span>
+						{/if}
+					{/key}
+				</span>
+				<span class="text-sm min-w-0 truncate text-muted-foreground">{t.upToDate}</span>
+			</div>
+		{/if}
+	</div>
 </div>
+
+<style>
+	/* One ring that grows and fades: the result landed faster than an indicator could show. */
+	.solve-ping {
+		animation: solve-ping 0.6s ease-out forwards;
+	}
+
+	@keyframes solve-ping {
+		from {
+			transform: scale(1);
+			opacity: 0.9;
+		}
+		to {
+			transform: scale(3.2);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.solve-ping {
+			animation: none;
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -46,9 +46,9 @@
 	interface Props {
 		meshes: any[];
 		isFullscreen?: boolean;
-		/** Shows a progress bar along the top edge. Pass a delayed flag (`createSolvingIndicator`). */
+		/** @deprecated Ignored: the panel's solve status shows a running solve. */
 		isSolving?: boolean;
-		/** Dims the stale result while a long solve runs. */
+		/** @deprecated Ignored, like `isSolving`. */
 		isSlow?: boolean;
 		isBlurred?: boolean;
 		drawerOpen?: boolean;
@@ -85,7 +85,6 @@
 	let {
 		meshes,
 		isFullscreen = $bindable(false),
-		isSlow = false,
 		isBlurred = false,
 		drawerOpen = false,
 		viewerConfig = {},
@@ -166,6 +165,7 @@
 		}))
 	);
 	const nightOn = $derived(renderStyle === 'night');
+
 	// What the night toggle returns to.
 	let dayLook: Look = $state(openingLook === 'night' ? defaultViewerConfig.look : openingLook);
 
@@ -524,12 +524,6 @@
 						: 'blur-overlay-inactive'}"
 				></div>
 
-				{#if isSlow}
-					<div
-						class="inset-0 animate-in fade-in pointer-events-none absolute z-10 bg-background/25 duration-500"
-					></div>
-				{/if}
-
 				{#if logoUrl}
 					<!-- pointer-events:none so it never intercepts canvas drags. -->
 					<div

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/features/chart/plotly-compat.ts

@@ -0,0 +1,141 @@
+import { hsvToRgb } from '#lib/utils/color-space.js';
+
+// ============================================================================
+// Plotly 3 → 4 figure compatibility
+// ============================================================================
+//
+// Chart outputs come from whatever plugin version solved them, often one written against
+// Plotly 3. This rewrites the parts Plotly 4 draws differently or rejects, so those figures
+// keep their look. Figures that are already compatible pass through unchanged.
+
+type Json = Record<string, unknown>;
+
+export interface PlotlyFigure {
+	data: Json[];
+	layout?: Json;
+	config?: Json;
+	frames?: Json[];
+}
+
+const REMOVED_MAP_TRACES: Record<string, string> = {
+	scattermapbox: 'scattermap',
+	choroplethmapbox: 'choroplethmap',
+	densitymapbox: 'densitymap'
+};
+
+const MAPBOX_SUBPLOT = /^mapbox(\d*)$/;
+const BARE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const HSV_FUNCTION =
+	/^hsva?[\s(]+([-+\d.]+)%?[\s,]+([\d.]+)(%?)[\s,]+([\d.]+)(%?)(?:[\s,/]+([\d.]+)(%?))?[\s)]*$/i;
+
+const isObject = (v: unknown): v is Json =>
+	typeof v === 'object' && v !== null && !Array.isArray(v);
+
+/** Returns a rewritten copy; the input is not modified. */
+export function upgradePlotlyFigure(figure: PlotlyFigure): PlotlyFigure {
+	const out = structuredClone(figure);
+	const layout = out.layout ?? {};
+	normalizeColors(layout);
+
+	let migratedMaps = false;
+	for (const trace of out.data ?? []) {
+		if (!isObject(trace)) continue;
+		normalizeColors(trace);
+
+		const replacement = REMOVED_MAP_TRACES[trace.type as string];
+		if (replacement) {
+			trace.type = replacement;
+			if (typeof trace.subplot === 'string')
+				trace.subplot = trace.subplot.replace(MAPBOX_SUBPLOT, 'map$1');
+			migratedMaps = true;
+		} else if (trace.type === 'splom') {
+			keepSplomAxesUnlinked(trace);
+		}
+	}
+
+	if (migratedMaps) migrateMapLayout(layout);
+	// Frame data replaces trace data during playback, so it needs the same colour fixes.
+	for (const frame of out.frames ?? []) if (isObject(frame)) normalizeColors(frame);
+	return { ...out, layout };
+}
+
+// Plotly 4 links each dimension's x and y axes by default.
+function keepSplomAxesUnlinked(trace: Json) {
+	if (!Array.isArray(trace.dimensions)) return;
+	for (const dim of trace.dimensions) {
+		if (!isObject(dim)) continue;
+		const axis = isObject(dim.axis) ? dim.axis : (dim.axis = {});
+		if (!('matches' in axis)) axis.matches = false;
+	}
+}
+
+function migrateMapLayout(layout: Json) {
+	for (const key of Object.keys(layout)) {
+		const match = MAPBOX_SUBPLOT.exec(key);
+		if (!match) continue;
+
+		const map = layout[key];
+		delete layout[key];
+		const newKey = `map${match[1]}`;
+		if (newKey in layout || !isObject(map)) continue;
+
+		delete map.accesstoken;
+		// Stamen and mapbox:// styles have no map equivalent.
+		if (typeof map.style === 'string' && /^(stamen|mapbox:\/\/)/.test(map.style))
+			map.style = 'open-street-map';
+		layout[newKey] = map;
+	}
+}
+
+// Plotly attributes that hold colours: *color, colorway, colorscale and pie's marker.colors.
+const isColorKey = (key: string) =>
+	key.toLowerCase().endsWith('color') ||
+	key === 'colors' ||
+	key === 'colorway' ||
+	key === 'colorscale';
+
+function normalizeColors(props: Json) {
+	for (const [key, value] of Object.entries(props)) {
+		if (isColorKey(key)) props[key] = normalizeColorValue(value, false);
+		else if (isObject(value)) normalizeColors(value);
+		else if (Array.isArray(value))
+			for (const item of value) if (isObject(item)) normalizeColors(item);
+	}
+}
+
+// Covers a single colour, a per-point list and colorscale stops ([[0, "ff0000"], ...]).
+function normalizeColorValue(value: unknown, inList: boolean): unknown {
+	if (Array.isArray(value)) return value.map((v) => normalizeColorValue(v, true));
+	if (typeof value !== 'string') return value;
+	// Plotly reads numeric strings in a per-point list as numbers for the colorscale.
+	if (inList && /^\s*\d+\s*$/.test(value)) return value;
+	return normalizePlotlyColor(value);
+}
+
+/**
+ * Rewrites colour spellings Plotly 3 accepted but Plotly 4 rejects (hex without `#`, `hsv()`)
+ * into valid CSS. Anything else is returned unchanged.
+ */
+export function normalizePlotlyColor(color: string): string {
+	const value = color.trim();
+	if (BARE_HEX.test(value)) return `#${value}`;
+
+	const hsv = HSV_FUNCTION.exec(value);
+	if (!hsv) return color;
+
+	const { r, g, b } = hsvToRgb({
+		h: Number(hsv[1]),
+		s: unit(hsv[2], hsv[3] === '%'),
+		v: unit(hsv[4], hsv[5] === '%')
+	});
+	const rgb = `${Math.round(r)},${Math.round(g)},${Math.round(b)}`;
+	if (hsv[6] === undefined) return `rgb(${rgb})`;
+	return `rgba(${rgb},${+unit(hsv[6], hsv[7] === '%').toFixed(3)})`;
+}
+
+// Plotly 3 (TinyColor) read 0..1 as a fraction and anything above 1 as a percentage.
+function unit(s: string, percent: boolean): number {
+	let x = Number(s);
+	if (percent || x > 1) x /= 100;
+	return Math.min(1, Math.max(0, x));
+}

package/src/lib/i18n/messages.ts

@@ -79,6 +79,10 @@ export interface ViewerMessages {
 	solveMessagesEscHint: string;
 	solveMessagesDismiss: string;
 	solveSolving: string;
+	/** A visible solve has landed; followed by how long it took. */
+	solveDone: string;
+	/** A visible solve was aborted; the previous result stays. */
+	solveStopped: string;
 	parametersTab: string;
 	moreTab: string;
 	scrollTabsBack: string;
@@ -314,6 +318,8 @@ const en: ViewerMessages = {
 	solveMessagesEscHint: 'Esc aborts the solve',
 	solveMessagesDismiss: 'Dismiss',
 	solveSolving: 'Solving…',
+	solveDone: 'Done',
+	solveStopped: 'Stopped',
 	parametersTab: 'Parameters',
 	moreTab: 'More',
 	scrollTabsBack: 'Previous tabs',
@@ -518,6 +524,8 @@ const de: ViewerMessages = {
 	solveMessagesEscHint: 'Esc bricht die Berechnung ab',
 	solveMessagesDismiss: 'Schliessen',
 	solveSolving: 'Berechnung läuft…',
+	solveDone: 'Fertig',
+	solveStopped: 'Abgebrochen',
 	parametersTab: 'Parameter',
 	moreTab: 'Mehr',
 	scrollTabsBack: 'Vorherige Tabs',