@selvajs/ui 6.3.1 → 6.4.0

package/dist/i18n/messages.js

@@ -41,6 +41,15 @@ const en = {
     objectFallbackName: 'Object',
     noMetadata: 'No metadata',
     loadingSchema: 'Loading schema...',
+    solveBlocked: 'The definition stopped this solve. No results were produced.',
+    solveBlockedTitle: 'Solve stopped',
+    solveMessagesTitle: 'Solve messages',
+    solveMessagesDescription: 'This solve reported the following. Continue to see the result.',
+    solveMessagesConfirm: 'Continue',
+    solveMessagesDiscard: 'Discard',
+    solveMessagesAbort: 'Abort',
+    solveMessagesDismiss: 'Dismiss',
+    solveSolving: 'Solving…',
     parametersTab: 'Parameters',
     moreTab: 'More',
     expandPanel: 'Expand panel',
@@ -92,6 +101,15 @@ const de = {
     objectFallbackName: 'Objekt',
     noMetadata: 'Keine Metadaten',
     loadingSchema: 'Schema wird geladen...',
+    solveBlocked: 'Die Definition hat diese Berechnung gestoppt. Es wurden keine Ergebnisse erzeugt.',
+    solveBlockedTitle: 'Berechnung gestoppt',
+    solveMessagesTitle: 'Meldungen zur Berechnung',
+    solveMessagesDescription: 'Diese Berechnung hat Folgendes gemeldet. Weiter, um das Ergebnis zu sehen.',
+    solveMessagesConfirm: 'Weiter',
+    solveMessagesDiscard: 'Verwerfen',
+    solveMessagesAbort: 'Abbrechen',
+    solveMessagesDismiss: 'Schliessen',
+    solveSolving: 'Berechnung läuft…',
     parametersTab: 'Parameter',
     moreTab: 'Mehr',
     expandPanel: 'Bereich aufklappen',

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/layout';
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
+export { default as SolveMessages } from './components/compute/SolveMessages.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 export * from './components/primitives';
 export { default as StateDisplay } from './components/primitives/StateDisplay.svelte';
@@ -10,7 +11,7 @@ export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
 export * from './compute/solving.svelte';
 export { useSolveSession } from './compute/useSolveSession.svelte';
-export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from '@selvajs/solve/client';
+export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter, type LiveSolveState, type SolvePhase, EMPTY_LIVE_SOLVE, decodeOutcome, finalizeResult, type SolveOutcome } from '@selvajs/solve/client';
 export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs, type ExternalValueRef, type ExternalInput } from '@selvajs/solve/client';
 export * from './contexts/footerContext.svelte';
 export * from './contexts/clientSlotContext.svelte';
@@ -18,5 +19,5 @@ export * from './composables/useFooterItem.svelte';
 export * from './utils';
 export { randomId } from './utils/randomId';
 export type { ActionButton } from './types/actionButton';
-export type { SolveFn, SolveResult } from '@selvajs/solve/shared';
+export type { SolveFn, SolveResult, SolveDiagnostic } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/index.js

@@ -4,6 +4,7 @@
 export * from './components/layout';
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
+export { default as SolveMessages } from './components/compute/SolveMessages.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Design-system primitives (shadcn-svelte + custom)
 export * from './components/primitives';
@@ -17,7 +18,9 @@ export * from './compute/solving.svelte';
 // plugin-ui's WebSocket driver — can satisfy SolveDriver and drive a session.
 // See CONTEXT.md.
 export { useSolveSession } from './compute/useSolveSession.svelte';
-export { createSolveSession, createRequestResponseDriver } from '@selvajs/solve/client';
+export { createSolveSession, createRequestResponseDriver, 
+// A push driver (plugin-ui's WebSocket) decodes the plugin's verdict with these.
+EMPTY_LIVE_SOLVE, decodeOutcome, finalizeResult } from '@selvajs/solve/client';
 // Pre-step producer transit storage
 export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs } from '@selvajs/solve/client';
 export * from './contexts/footerContext.svelte';

package/dist/public.d.ts

@@ -8,12 +8,12 @@ export { VIEWER_MESSAGES, DEFAULT_LOCALE, messagesFor } from './i18n/messages';
 export { setLocaleContext, getLocaleContext, type LocaleContext } from './i18n/localeContext.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 export { useSolveSession } from './compute/useSolveSession.svelte';
-export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from '@selvajs/solve/client';
+export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter, type LiveSolveState, type SolvePhase } from '@selvajs/solve/client';
 export type { ClientSlotArgs, ClientSlot } from './contexts/clientSlotContext.svelte';
 export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs, type ExternalValueRef, type ExternalInput } from '@selvajs/solve/client';
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
 export type { ActionButton } from './types/actionButton';
-export type { SolveFn, SolveResult } from '@selvajs/solve/shared';
+export type { SolveFn, SolveResult, SolveDiagnostic } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/schema/visibility-rules.d.ts

@@ -17,4 +17,10 @@ export declare function itemKey(item: LayoutItem): string;
 export declare function buildVisibilityMap(items: LayoutItem[], values: Record<string, unknown>): Record<string, VisibilityResult>;
 export declare function evaluateGroupVisibility(group: {
     visibilityCondition?: GroupVisibilityCondition;
+    items?: LayoutItem[];
 }, values: Record<string, unknown>): boolean;
+/**
+ * A linebreak is always "visible" but renders as a divider only, so a group left with
+ * nothing but separators counts as empty.
+ */
+export declare function hasVisibleItems(items: LayoutItem[], values: Record<string, unknown>): boolean;

package/dist/schema/visibility-rules.js

@@ -74,9 +74,18 @@ export function buildVisibilityMap(items, values) {
     return map;
 }
 export function evaluateGroupVisibility(group, values) {
+    if (group.items && !hasVisibleItems(group.items, values))
+        return false;
     if (!group.visibilityCondition?.rules)
         return true;
     const { action = 'show' } = group.visibilityCondition;
     const met = evaluateCondition(group.visibilityCondition, values);
     return action === 'hide' ? !met : met;
 }
+/**
+ * A linebreak is always "visible" but renders as a divider only, so a group left with
+ * nothing but separators counts as empty.
+ */
+export function hasVisibleItems(items, values) {
+    return items.some((item) => item.type !== 'linebreak' && evaluateVisibility(item, values).visible);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -58,11 +58,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.185.1",
-    "@selvajs/compute": "^4.1.1",
-    "@selvajs/schemas": "^5.0.2",
-    "@selvajs/visualization": "^1.3.0",
-    "@selvajs/solve": "^1.1.0"
+    "three": "^0.186.1",
+    "@selvajs/compute": "^4.2.0",
+    "@selvajs/schemas": "^5.1.0",
+    "@selvajs/solve": "^1.2.0",
+    "@selvajs/visualization": "^1.4.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -72,29 +72,29 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.35.0",
+    "@lucide/svelte": "^1.48.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
     "svelte-sonner": "^1.2.1",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@internationalized/date": "^3.12.3",
+    "@internationalized/date": "^3.12.4",
     "@sveltejs/kit": "2.70.3",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/three": "^0.185.4",
-    "bits-ui": "^2.19.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@types/three": "^0.186.0",
+    "bits-ui": "^2.19.3",
     "rimraf": "^6.1.3",
-    "svelte": "5.56.10",
+    "svelte": "5.57.1",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^4.1.11",
-    "@selvajs/compute": "4.1.1",
+    "vitest": "^5.0.2",
+    "@selvajs/compute": "4.2.0",
     "@selvajs/config": "0.0.4",
-    "@selvajs/visualization": "1.3.0",
-    "@selvajs/solve": "1.1.0",
-    "@selvajs/schemas": "5.0.2"
+    "@selvajs/visualization": "1.4.0",
+    "@selvajs/solve": "1.2.0",
+    "@selvajs/schemas": "5.1.0"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

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

@@ -7,7 +7,8 @@
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
 	import { createRequestResponseDriver } from '@selvajs/solve/client';
-	import type { RetainedSolveResult, SolveSession } from '@selvajs/solve/client';
+	import type { RetainedSolveResult, SolveEventSource, SolveSession } from '@selvajs/solve/client';
+	import SolveMessages from './SolveMessages.svelte';
 	import { meshPolicy } from '@selvajs/visualization/parse';
 	import type { ThreeViewer } from '@selvajs/visualization/render';
 	import { useSolveSession } from '../../compute/useSolveSession.svelte';
@@ -52,6 +53,12 @@
 		 * have finished.
 		 */
 		solveDeadlineMs: number;
+		/**
+		 * Live events for the solves this app runs (`createSolveEventStream`). Pair it with
+		 * `streamId` on the `createComputeFetchSolveFn` that backs `onSolve`, or the server has
+		 * no stream to route to. Without it the app works as before, just with no mid-solve news.
+		 */
+		events?: SolveEventSource;
 		footerComponent?: any;
 		footerComponentProps?: () => Record<string, unknown>;
 		footerItemId?: string;
@@ -105,6 +112,7 @@
 		copyrightName,
 		footerText,
 		solveDeadlineMs,
+		events,
 		footerComponent,
 		footerComponentProps,
 		footerItemId = 'footer-item',
@@ -146,7 +154,8 @@
 		meshPolicy,
 		// `isSolving` lives on the driver, which the session can't observe — republish so the
 		// spinner and disabled states track it.
-		onChange: () => session.notify()
+		onChange: () => session.notify(),
+		events
 	});
 	// svelte-ignore state_referenced_locally
 	const session = useSolveSession({
@@ -231,6 +240,7 @@
 		rightContent={headerRight}
 		errors={session.computeErrors}
 		warnings={session.computeWarnings}
+		diagnostics={session.diagnostics}
 	>
 		{#if session.error}
 			<div class="min-h-100 p-8 flex items-center justify-center">
@@ -268,3 +278,23 @@
 		{/if}
 	</AppShell>
 </div>
+
+<SolveMessages
+	live={session.live}
+	phase={session.phase}
+	diagnostics={session.diagnostics}
+	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/src/lib/components/compute/ComputeMessagesDialog.svelte

@@ -1,26 +1,100 @@
 <script lang="ts">
+	// The message centre: every message the last solve raised, reached from the footer badge.
+	//
+	// 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.
+
 	import type { Snippet } from 'svelte';
-	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
-	import * as Collapsible from '$lib/components/primitives/collapsible';
+	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
+	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import * as Dialog from '$lib/components/primitives/dialog';
-	import { groupMessages } from '$lib/utils/file-download';
+	import { Badge } from '$lib/components/primitives/badge';
 
 	interface Props {
+		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */
+		diagnostics?: SolveDiagnostic[];
+		/** Fallback for hosts that only have the flat text. */
 		errors?: string[];
 		warnings?: string[];
 		/** Renders inside Dialog.Trigger. */
 		trigger: Snippet;
 	}
 
-	let { errors = [], warnings = [], trigger }: Props = $props();
+	let { diagnostics, errors = [], warnings = [], trigger }: Props = $props();
 
 	let open = $state(false);
-	let showErrors = $state(true);
-	let showWarnings = $state(false);
 
-	const groupedErrors = $derived(groupMessages(errors));
-	const groupedWarnings = $derived(groupMessages(warnings));
-	const totalCount = $derived(errors.length + warnings.length);
+	const rows = $derived<SolveDiagnostic[]>(
+		diagnostics?.length
+			? diagnostics
+			: [
+					...errors.map((message) => ({ level: 'error' as const, message })),
+					...warnings.map((message) => ({ level: 'warning' as const, message }))
+				]
+	);
+
+	interface Item {
+		level: SolveDiagnostic['level'];
+		message: string;
+		source?: string;
+		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;
+
+	/**
+	 * One section per level that has messages, most severe first; within a level, the order the
+	 * solve raised them. Repeats collapse into one row with a count: a definition fanning over 200
+	 * 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]);
+				}
+			}
+			return { ...meta, items };
+		}).filter((section) => section.items.length > 0)
+	);
 </script>
 
 <Dialog.Root bind:open>
@@ -28,98 +102,47 @@
 		{@render trigger()}
 	</Dialog.Trigger>
 
-	<Dialog.Content class="max-w-2xl max-h-[80vh]">
+	<Dialog.Content class="max-w-lg gap-4">
 		<Dialog.Header>
-			<Dialog.Title class="gap-2 flex items-center">
-				<CircleAlert class="h-5 w-5" />
-				Compute Messages
-			</Dialog.Title>
+			<Dialog.Title>Messages</Dialog.Title>
 			<Dialog.Description>
-				{totalCount}
-				{totalCount === 1 ? 'issue' : 'issues'} detected during solve
+				{#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
+					>
+				{/each}
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="space-y-3 pr-2 overflow-y-auto" style="max-height: calc(80vh - 180px);">
-			{#if errors.length > 0}
-				<Collapsible.Root bind:open={showErrors}>
-					<div class="overflow-hidden rounded-lg border border-destructive bg-card">
-						<div class="px-4 py-3 flex items-center">
-							<Collapsible.Trigger
-								class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-destructive/5"
-							>
-								{#if showErrors}
-									<ChevronDown class="h-4 w-4 shrink-0 text-destructive" />
-								{:else}
-									<ChevronRight class="h-4 w-4 shrink-0 text-destructive" />
+		<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}
-								<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
-								<span class="text-sm font-medium text-destructive">
-									{errors.length === 1 ? '1 Error' : `${errors.length} Errors`}
-								</span>
-							</Collapsible.Trigger>
-						</div>
-
-						<Collapsible.Content class="space-y-0">
-							<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-destructive bg-card">
-								<ul class="space-y-2">
-									{#each groupedErrors as { message, count } (message)}
-										<li class="gap-2 text-sm flex text-destructive/90">
-											<span class="shrink-0">•</span>
-											<span class="flex-1">
-												{message}
-												{#if count > 1}
-													<span class="ml-1 font-medium text-destructive/70">×{count} </span>
-												{/if}
-											</span>
-										</li>
-									{/each}
-								</ul>
-							</div>
-						</Collapsible.Content>
-					</div>
-				</Collapsible.Root>
-			{/if}
-
-			{#if warnings.length > 0}
-				<Collapsible.Root bind:open={showWarnings}>
-					<div class="overflow-hidden rounded-lg border border-warning/50 bg-card">
-						<div class="px-4 py-3 flex items-center">
-							<Collapsible.Trigger
-								class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-warning/5"
-							>
-								{#if showWarnings}
-									<ChevronDown class="h-4 w-4 shrink-0 text-warning" />
-								{:else}
-									<ChevronRight class="h-4 w-4 shrink-0 text-warning" />
-								{/if}
-								<TriangleAlert class="h-4 w-4 shrink-0 text-warning" />
-								<span class="text-sm font-medium text-warning">
-									{warnings.length === 1 ? '1 Warning' : `${warnings.length} Warnings`}
-								</span>
-							</Collapsible.Trigger>
-						</div>
-
-						<Collapsible.Content class="space-y-0">
-							<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-warning/50 bg-card">
-								<ul class="space-y-2">
-									{#each groupedWarnings as { message, count } (message)}
-										<li class="gap-2 text-sm flex text-muted-foreground">
-											<span class="shrink-0">•</span>
-											<span class="flex-1">
-												{message}
-												{#if count > 1}
-													<span class="ml-1 font-medium text-warning/70">×{count}</span>
-												{/if}
-											</span>
-										</li>
-									{/each}
-								</ul>
-							</div>
-						</Collapsible.Content>
-					</div>
-				</Collapsible.Root>
-			{/if}
+							</li>
+						{/each}
+					</ul>
+				</section>
+			{/each}
 		</div>
 	</Dialog.Content>
 </Dialog.Root>