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

package/dist/components/compute/AppLayout.svelte.d.ts

@@ -1,17 +1,39 @@
+import type { Snippet } from 'svelte';
 import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
+import type { SolveSettlement } from '@selvajs/solve/client';
 import type { ActionButton } from '../../types/actionButton';
 import type { PresetLabels } from '../../types/presetLabels';
 import type { ThreeViewer } from '@selvajs/visualization/render';
 import { type ViewerConfig } from '../viewer/Viewer.svelte';
 interface Props {
     schema: UISchema;
+    /**
+     * Whether to draw the 3D viewer. Each host reads its own switch: the plugin's preview
+     * `viewerOptions.enableLocal`, a Rhino.Compute host `viewerOptions.enableRemote`.
+     */
+    showViewer: boolean;
     meshes?: any[];
     isSolving: boolean;
+    /**
+     * `createSolvingIndicator(...).show`, not `isSolving`: drives the solving chip and the
+     * viewer's progress bar, which would otherwise flash on every sub-second solve.
+     */
     showSolvingIndicator?: boolean;
+    /** `createSolvingIndicator(...).slow`: the viewer dims its result as stale. */
+    solveIsSlow?: boolean;
+    /** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+    solvingIndicatorPlacement?: 'floating' | 'inline';
+    /** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
+    solveMessages?: Snippet;
     hasPendingChanges?: boolean;
     hasNeverSolved?: boolean;
     isViewerFullscreen?: boolean;
     oncalculate?: () => void;
+    /**
+     * The result for the current inputs, solving if it must (`session.ensureSolved`). Needed
+     * by `solvesFirst` actions; without it they run straight away.
+     */
+    ensureSolved?: () => Promise<SolveSettlement>;
     values: Record<string, unknown>;
     onValueChange: (id: string, val: SupportedTypes, forceSolve?: boolean) => void | Promise<void>;
     onLoadValues?: (values: Record<string, unknown>) => void | Promise<void>;

package/dist/components/compute/CollapsedPanelStrip.svelte

@@ -20,12 +20,14 @@
 		[
 			'gap-1 py-2 lg:py-3 lg:flex-col lg:w-auto px-2 lg:px-0',
 			'flex w-full shrink-0 flex-row items-center',
-			'backdrop-blur-sm bg-background/90 cursor-pointer'
+			'backdrop-blur-sm bg-background/90 cursor-pointer',
+			side === 'left' ? 'lg:border-r' : 'lg:border-l',
+			'border-border'
 		].join(' ')
 	);
 
 	const tabButtonClass =
-		'w-8 h-8 rounded cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
+		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
 </script>
 
 <div

package/dist/components/compute/ComputeApp.svelte

@@ -7,7 +7,12 @@
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
 	import { createRequestResponseDriver } from '@selvajs/solve/client';
-	import type { RetainedSolveResult, SolveEventSource, SolveSession } from '@selvajs/solve/client';
+	import type {
+		RetainedSolveResult,
+		SolveEventSource,
+		SolveSession,
+		SolveSettlement
+	} from '@selvajs/solve/client';
 	import SolveMessages from './SolveMessages.svelte';
 	import { meshPolicy } from '@selvajs/visualization/parse';
 	import type { ThreeViewer } from '@selvajs/visualization/render';
@@ -19,8 +24,8 @@
 	import { type ViewerConfig } from '../viewer/Viewer.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
-	import type { Locale } from '../../i18n/messages';
-	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
+	import type { Locale, ViewerMessages } from '../../i18n/messages';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -34,8 +39,11 @@
 		isEmbedded?: boolean;
 		primaryColor?: string;
 		showModeToggle?: boolean;
+		/** Host actions, listed in the panel footer's ⋯ menu after saving and loading inputs. */
 		panelActions?: ActionButton[];
+		/** Lists "Save inputs…" in the footer menu. */
 		showSaveButton?: boolean;
+		/** Lists "Load inputs…" in the footer menu. */
 		showLoadButton?: boolean;
 		/** When set, persist saved states via this callback instead of downloading a .slvp file. */
 		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
@@ -74,6 +82,12 @@
 			 */
 			getSession: () => SolveSession;
 		}) => void;
+		/**
+		 * Once per settled solve: applied, discarded, blocked, aborted or failed. A result held
+		 * for review counts when the user accepts or rejects it, and one a queued solve replaces
+		 * never does. Auto-solves from input changes count too.
+		 */
+		onSolved?: (settlement: SolveSettlement) => void;
 		/** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
 		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
@@ -92,6 +106,14 @@
 		// Language for the app's own chrome, English when unset. Does not translate
 		// schema-authored labels or Grasshopper-sourced names/metadata.
 		lang?: Locale;
+		/**
+		 * Replaces individual strings of the app's own chrome, layered over the `lang` catalog
+		 * (`VIEWER_MESSAGES`): reword a label, or supply every string for a language with no
+		 * built-in catalog. Reaches every component inside, the viewer included. A `{name}`
+		 * placeholder in the default is filled the same way in an override. The preset manager's
+		 * strings come from `presetLabels` instead.
+		 */
+		messages?: Partial<ViewerMessages>;
 	}
 
 	let {
@@ -123,22 +145,26 @@
 		brandName,
 		header,
 		onReady,
+		onSolved,
 		onViewerReady,
 		viewerConfig = {},
 		externalScopeKey,
 		clientSlot,
-		lang
+		lang,
+		messages
 	}: Props = $props();
 
 	// Reaches InputControl deep in the tree.
 	// svelte-ignore state_referenced_locally
 	setClientSlot(clientSlot);
 
-	// Resolution: explicit `lang` → host-provided locale → English. Passed as a getter so
-	// switching `lang` updates the chrome live.
-	const hostLocale = getLocaleContext();
-	setLocaleContext(() => lang ?? hostLocale.locale);
-	const t = $derived(getLocaleContext().messages);
+	// Resolution: explicit `lang` → host-provided locale → English, with `messages` on top.
+	// Getters, so switching either updates the chrome live.
+	const locale = layerLocaleContext(
+		() => lang,
+		() => messages
+	);
+	const t = $derived(locale.messages);
 
 	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
@@ -168,6 +194,9 @@
 
 	const solvingIndicator = createSolvingIndicator(() => session.isSolving);
 
+	// Read at call time, so a host swapping the callback needs no resubscribe.
+	$effect(() => session.onSettled((settlement) => onSolved?.(settlement)));
+
 	$effect(() => {
 		onReady?.({
 			loadValues: (incoming) => session.loadValues(incoming),
@@ -217,14 +246,14 @@
 
 	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
 	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
-	let customStyle = $derived(
-		resolvedPrimaryColor ? `--primary: ${hexToOklch(resolvedPrimaryColor)}` : ''
+	let primaryOverride = $derived(
+		resolvedPrimaryColor ? hexToOklch(resolvedPrimaryColor) : undefined
 	);
 
 	let pageTitle = $derived(title ?? (schema?.description || schema.name));
 </script>
 
-<div style={customStyle} style:display="contents">
+<div class="contents" style:--primary={primaryOverride}>
 	<AppShell
 		mode="fixed"
 		showHeader={!resolvedIsEmbedded}
@@ -254,9 +283,11 @@
 			{#key definitionKey}
 				<AppLayout
 					{schema}
+					showViewer={!!schema.viewerOptions?.enableRemote}
 					meshes={session.meshes}
 					isSolving={session.isSolving}
-					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
+					showSolvingIndicator={solvingIndicator.show}
+					solveIsSlow={solvingIndicator.slow}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -272,6 +303,7 @@
 					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
+					ensureSolved={() => session.ensureSolved()}
 					onLoadValues={() => session.loadValues({})}
 				/>
 			{/key}
@@ -286,15 +318,4 @@
 	onabort={() => session.abort()}
 	onconfirm={() => session.acknowledge()}
 	ondiscard={() => session.discard()}
-	labels={{
-		solving: t.solveSolving,
-		blockedTitle: t.solveBlockedTitle,
-		messagesTitle: t.solveMessagesTitle,
-		blockedDescription: t.solveBlocked,
-		messagesDescription: t.solveMessagesDescription,
-		confirm: t.solveMessagesConfirm,
-		discard: t.solveMessagesDiscard,
-		abort: t.solveMessagesAbort,
-		dismiss: t.solveMessagesDismiss
-	}}
 />

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -2,11 +2,11 @@ import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
 import type { SolveFn } from '@selvajs/solve/shared';
 import type { PresetLabels } from '../../types/presetLabels';
-import type { RetainedSolveResult, SolveEventSource, SolveSession } from '@selvajs/solve/client';
+import type { RetainedSolveResult, SolveEventSource, SolveSession, SolveSettlement } from '@selvajs/solve/client';
 import type { ThreeViewer } from '@selvajs/visualization/render';
 import { type ViewerConfig } from '../viewer/Viewer.svelte';
 import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
-import type { Locale } from '../../i18n/messages';
+import type { Locale, ViewerMessages } from '../../i18n/messages';
 import type { Snippet } from 'svelte';
 interface Props {
     schema: UISchema;
@@ -18,8 +18,11 @@ interface Props {
     isEmbedded?: boolean;
     primaryColor?: string;
     showModeToggle?: boolean;
+    /** Host actions, listed in the panel footer's ⋯ menu after saving and loading inputs. */
     panelActions?: ActionButton[];
+    /** Lists "Save inputs…" in the footer menu. */
     showSaveButton?: boolean;
+    /** Lists "Load inputs…" in the footer menu. */
     showLoadButton?: boolean;
     /** When set, persist saved states via this callback instead of downloading a .slvp file. */
     onSaveState?: (state: ParameterPreset) => void | Promise<void>;
@@ -57,6 +60,12 @@ interface Props {
          */
         getSession: () => SolveSession;
     }) => void;
+    /**
+     * Once per settled solve: applied, discarded, blocked, aborted or failed. A result held
+     * for review counts when the user accepts or rejects it, and one a queued solve replaces
+     * never does. Auto-solves from input changes count too.
+     */
+    onSolved?: (settlement: SolveSettlement) => void;
     /** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
     onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
     /** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
@@ -69,6 +78,14 @@ interface Props {
     externalScopeKey?: string;
     clientSlot?: ClientSlot;
     lang?: Locale;
+    /**
+     * Replaces individual strings of the app's own chrome, layered over the `lang` catalog
+     * (`VIEWER_MESSAGES`): reword a label, or supply every string for a language with no
+     * built-in catalog. Reaches every component inside, the viewer included. A `{name}`
+     * placeholder in the default is filled the same way in an override. The preset manager's
+     * strings come from `presetLabels` instead.
+     */
+    messages?: Partial<ViewerMessages>;
 }
 declare const ComputeApp: import("svelte").Component<Props, {}, "">;
 type ComputeApp = ReturnType<typeof ComputeApp>;

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -3,14 +3,15 @@
 	//
 	// The counterpart to `SolveMessages`, which interrupts only for what the definition's author
 	// wrote. Everything else — Grasshopper complaining about its own components — lands here,
-	// where it is available without being in the way. One section per level, most severe first, with the
-	// component that raised each message shown as a label rather than spliced into its text.
+	// where it is available without being in the way. Most severe first, with the component that
+	// raised each message on its own line rather than spliced into its text.
 
 	import type { Snippet } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import * as Dialog from '../primitives/dialog';
-	import { Badge } from '../primitives/badge';
+	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatCount } from '../../i18n/messages';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */
@@ -24,6 +25,9 @@
 
 	let { diagnostics, errors = [], warnings = [], trigger }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let open = $state(false);
 
 	const rows = $derived<SolveDiagnostic[]>(
@@ -42,34 +46,11 @@
 		count: number;
 	}
 
-	// Tone classes are written out, never interpolated: Tailwind scans source text, so a
-	// constructed class name is not emitted and the icon would render colourless.
-	const LEVELS = [
-		{
-			level: 'error',
-			heading: 'Errors',
-			one: 'error',
-			many: 'errors',
-			icon: CircleAlert,
-			tone: 'text-destructive'
-		},
-		{
-			level: 'warning',
-			heading: 'Warnings',
-			one: 'warning',
-			many: 'warnings',
-			icon: TriangleAlert,
-			tone: 'text-amber-500'
-		},
-		{
-			level: 'remark',
-			heading: 'Notes',
-			one: 'note',
-			many: 'notes',
-			icon: Info,
-			tone: 'text-muted-foreground'
-		}
-	] as const;
+	const levels = $derived([
+		{ level: 'error', severity: 'error', one: t.errorCountOne, other: t.errorCountOther },
+		{ level: 'warning', severity: 'warning', one: t.warningCountOne, other: t.warningCountOther },
+		{ level: 'remark', severity: 'note', one: t.noteCountOne, other: t.noteCountOther }
+	] as const);
 
 	/**
 	 * One section per level that has messages, most severe first; within a level, the order the
@@ -77,72 +58,55 @@
 	 * branches raises the same warning 200 times, and an unstacked list buries every other message.
 	 */
 	const sections = $derived(
-		LEVELS.map((meta) => {
-			// A null-prototype object rather than a Map: a local built fresh on each derive, never
-			// reactive state, and the lint rule that steers Map → SvelteMap cannot tell them apart.
-			const byKey: Record<string, Item> = Object.create(null);
-			const items: Item[] = [];
-			for (const d of rows) {
-				if (d.level !== meta.level) continue;
-				const key = `${d.message} ${d.source ?? ''}`;
-				if (byKey[key]) {
-					byKey[key].count++;
-				} else {
-					byKey[key] = { level: d.level, message: d.message, source: d.source, count: 1 };
-					items.push(byKey[key]);
+		levels
+			.map((meta) => {
+				// A null-prototype object rather than a Map: a local built fresh on each derive, never
+				// reactive state, and the lint rule that steers Map → SvelteMap cannot tell them apart.
+				const byKey: Record<string, Item> = Object.create(null);
+				const items: Item[] = [];
+				for (const d of rows) {
+					if (d.level !== meta.level) continue;
+					const key = `${d.message} ${d.source ?? ''}`;
+					if (byKey[key]) {
+						byKey[key].count++;
+					} else {
+						byKey[key] = { level: d.level, message: d.message, source: d.source, count: 1 };
+						items.push(byKey[key]);
+					}
 				}
-			}
-			return { ...meta, items };
-		}).filter((section) => section.items.length > 0)
+				return { ...meta, items };
+			})
+			.filter((section) => section.items.length > 0)
+	);
+
+	const issues = $derived<Issue[]>(
+		sections.flatMap((section) =>
+			section.items.map((item) => ({
+				severity: section.severity,
+				message: item.message,
+				source: item.source,
+				count: item.count
+			}))
+		)
 	);
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Trigger class="focus:outline-none">
+	<Dialog.Trigger>
 		{@render trigger()}
 	</Dialog.Trigger>
 
-	<Dialog.Content class="max-w-lg gap-4">
+	<Dialog.Content class="max-w-lg">
 		<Dialog.Header>
-			<Dialog.Title>Messages</Dialog.Title>
+			<Dialog.Title>{t.messagesTitle}</Dialog.Title>
 			<Dialog.Description>
 				{#each sections as section, i (section.level)}
 					{#if i > 0}<span class="mx-1.5">·</span>{/if}
-					<span
-						>{section.items.length} {section.items.length === 1 ? section.one : section.many}</span
-					>
+					<span>{formatCount(section.items.length, section.one, section.other)}</span>
 				{/each}
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="space-y-4 max-h-[60vh] overflow-y-auto">
-			{#each sections as section (section.level)}
-				<section>
-					<h3 class="mb-1.5 gap-1.5 text-xs font-medium flex items-center text-muted-foreground">
-						<section.icon class="h-3.5 w-3.5 {section.tone}" />
-						{section.heading}
-					</h3>
-					<ul class="divide-y rounded-lg border">
-						{#each section.items as item (item.message + (item.source ?? ''))}
-							<li class="gap-3 px-3 py-2 text-sm flex items-start justify-between">
-								<p class="min-w-0 wrap-anywhere">
-									{item.message}
-									{#if item.count > 1}
-										<span class="ml-1 text-xs text-muted-foreground tabular-nums"
-											>×{item.count}</span
-										>
-									{/if}
-								</p>
-								{#if item.source}
-									<Badge variant="secondary" class="font-normal max-w-[40%] shrink-0 truncate">
-										{item.source}
-									</Badge>
-								{/if}
-							</li>
-						{/each}
-					</ul>
-				</section>
-			{/each}
-		</div>
+		<IssueList {issues} />
 	</Dialog.Content>
 </Dialog.Root>