@selvajs/ui 4.7.0-beta.2 → 4.7.1

package/dist/components/compute/AppLayout.svelte

@@ -24,7 +24,7 @@
 		isViewerFullscreen?: boolean;
 		oncalculate?: () => void;
 		values: Record<string, unknown>;
-		onValueChange: (id: string, val: SupportedTypes) => void | Promise<void>;
+		onValueChange: (id: string, val: SupportedTypes, forceSolve?: boolean) => void | Promise<void>;
 		onLoadValues?: (values: Record<string, unknown>) => void | Promise<void>;
 		panelActions?: ActionButton[];
 		showSaveButton?: boolean;

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

@@ -12,7 +12,7 @@ interface Props {
     isViewerFullscreen?: boolean;
     oncalculate?: () => void;
     values: Record<string, unknown>;
-    onValueChange: (id: string, val: SupportedTypes) => void | Promise<void>;
+    onValueChange: (id: string, val: SupportedTypes, forceSolve?: boolean) => void | Promise<void>;
     onLoadValues?: (values: Record<string, unknown>) => void | Promise<void>;
     panelActions?: ActionButton[];
     showSaveButton?: boolean;

package/dist/components/compute/ComputeApp.svelte

@@ -133,8 +133,8 @@
 		});
 	});
 
-	function handleValueChange(id: string, val: unknown) {
-		session.setValue(id, val);
+	function handleValueChange(id: string, val: unknown, forceSolve?: boolean) {
+		session.setValue(id, val, forceSolve);
 	}
 
 	function handleCalculate() {

package/dist/components/preview/InputControl.svelte

@@ -33,7 +33,12 @@
 		item: InputLayoutItem;
 		value?: SupportedTypes;
 		displayName?: string;
-		onChange: (paramId: string, value: SupportedTypes) => void;
+		/**
+		 * Commit a value. `forceSolve` requests a solve even in manual-solve mode — used for
+		 * system-initiated reconciliation (e.g. pruning a vanished dynamic-list selection) where
+		 * leaving the previous output on screen would misrepresent the now-changed input.
+		 */
+		onChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		disabled?: boolean;
 		/** Runtime-computed options for a dynamic value list input (name -> value). */
 		dynamicOptions?: Record<string, string>;
@@ -108,7 +113,10 @@
 
 	// When a dynamic value list recomputes, a previously-selected value may no longer be an
 	// available option. Prune the stale selection so the control shows a valid option (or empty)
-	// instead of rendering the orphaned raw value as its own label.
+	// instead of rendering the orphaned raw value as its own label. This is a system-initiated
+	// change (the user didn't pick the new option), so force a solve — otherwise manual-solve
+	// schemas would keep the prior output on screen, making it look like the auto-picked option
+	// produced it.
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
@@ -116,9 +124,17 @@
 		// directly from an effect trips Svelte's binding-ownership check.
 		if (Array.isArray(value)) {
 			const pruned = value.filter((v) => typeof v === 'string' && validValues.has(v));
-			if (pruned.length !== value.length) onChange(item.paramId, pruned);
+			if (pruned.length !== value.length) {
+				// Fall back to first option when checklist becomes fully empty after pruning
+				onChange(
+					item.paramId,
+					pruned.length > 0 ? pruned : [Object.values(dynamicListOptions)[0]],
+					true
+				);
+			}
 		} else if (typeof value === 'string' && value && !validValues.has(value)) {
-			onChange(item.paramId, '');
+			// Fall back to first available option instead of clearing to empty
+			onChange(item.paramId, Object.values(dynamicListOptions)[0], true);
 		}
 	});
 

package/dist/components/preview/InputControl.svelte.d.ts

@@ -3,7 +3,12 @@ interface Props {
     item: InputLayoutItem;
     value?: SupportedTypes;
     displayName?: string;
-    onChange: (paramId: string, value: SupportedTypes) => void;
+    /**
+     * Commit a value. `forceSolve` requests a solve even in manual-solve mode — used for
+     * system-initiated reconciliation (e.g. pruning a vanished dynamic-list selection) where
+     * leaving the previous output on screen would misrepresent the now-changed input.
+     */
+    onChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
     disabled?: boolean;
     /** Runtime-computed options for a dynamic value list input (name -> value). */
     dynamicOptions?: Record<string, string>;

package/dist/components/preview/TabContent.svelte

@@ -20,7 +20,7 @@
 		values: Record<string, unknown>;
 		collapsedGroups: Record<string, boolean>;
 		onToggleGroup: (groupId: string) => void;
-		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		inputs: SchemaInput[];
 		outputs: DiscoveredOutput[];
 		/** Computed value list options keyed by the target dynamic-value-list input id. */

package/dist/components/preview/TabContent.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     values: Record<string, unknown>;
     collapsedGroups: Record<string, boolean>;
     onToggleGroup: (groupId: string) => void;
-    onValueChange: (paramId: string, value: SupportedTypes) => void;
+    onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
     inputs: SchemaInput[];
     outputs: DiscoveredOutput[];
     /** Computed value list options keyed by the target dynamic-value-list input id. */

package/dist/components/preview/TabLayout.svelte

@@ -10,7 +10,7 @@
 	interface Props {
 		schema: UISchema;
 		values: Record<string, unknown>;
-		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		/** Filter tabs by panel position. 'left' shows unpositioned + left tabs, 'right' shows right tabs only. */
 		panelFilter?: 'left' | 'right';
 		/** Externally request a specific tab to be active (e.g. from collapsed strip click) */

package/dist/components/preview/TabLayout.svelte.d.ts

@@ -2,7 +2,7 @@ import type { UISchema, SupportedTypes } from '@selvajs/schemas';
 interface Props {
     schema: UISchema;
     values: Record<string, unknown>;
-    onValueChange: (paramId: string, value: SupportedTypes) => void;
+    onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
     /** Filter tabs by panel position. 'left' shows unpositioned + left tabs, 'right' shows right tabs only. */
     panelFilter?: 'left' | 'right';
     /** Externally request a specific tab to be active (e.g. from collapsed strip click) */

package/dist/compute/createSolveSession.svelte.d.ts

@@ -19,8 +19,12 @@ export interface SolveSession {
     readonly hasPendingChanges: boolean;
     readonly hasNeverSolved: boolean;
     readonly isSolving: boolean;
-    /** Records a value change and dispatches a solve unless the schema is manual-solve. */
-    setValue(id: string, value: unknown): void;
+    /**
+     * Records a value change and dispatches a solve unless the schema is manual-solve.
+     * `forceSolve` overrides manual mode for system-initiated reconciliation (e.g. a dynamic
+     * value list pruning a vanished selection), so the output can't lag behind the new value.
+     */
+    setValue(id: string, value: unknown, forceSolve?: boolean): void;
     /** Explicit "calculate" — dispatches a solve with the current values. */
     solve(): void;
     /** Merges incoming values, then solves (auto) or marks dirty (manual). */

package/dist/compute/createSolveSession.svelte.js

@@ -46,10 +46,16 @@ export function createSolveSession(args) {
         get isSolving() {
             return args.driver.isSolving;
         },
-        setValue(id, value) {
+        setValue(id, value, forceSolve = false) {
             const { shouldSolve } = applyValueChange(state, id, value, currentSchema?.instanceSolve);
-            if (shouldSolve)
+            if (shouldSolve || forceSolve) {
+                // A forced solve reconciles the deferred output; clear the dirty flags it raised.
+                if (forceSolve && !shouldSolve) {
+                    state.pendingValues = {};
+                    state.hasPendingChanges = false;
+                }
                 dispatch();
+            }
         },
         solve() {
             dispatch();

package/dist/public.d.ts

@@ -1,5 +1,6 @@
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
+export { default as Viewer, type ViewerConfig } from './components/viewer/Viewer.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from './compute/createSolveSession.svelte';
 export type { ClientSlotArgs, ClientSlot } from './contexts/clientSlotContext.svelte';

package/dist/public.js

@@ -20,6 +20,10 @@
 // Compute app (schema + viewer + solve controls composed into a runnable app)
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
+// Standalone 3D viewer. Render Grasshopper meshes on their own, outside a
+// ComputeApp host — external apps drive it directly with a `meshes` array and
+// an optional `viewerConfig`.
+export { default as Viewer } from './components/viewer/Viewer.svelte';
 // Full-screen states a host app renders
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Solve Session seam (transport-agnostic value/lifecycle state machine + its

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.7.0-beta.2",
+  "version": "4.7.1",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -37,7 +37,7 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@selvajs/compute": "^2.1.0-beta.7",
+    "@selvajs/compute": "^2.1.0",
     "@sveltejs/kit": "^2",
     "bits-ui": "^2.18.0",
     "svelte": "^5",
@@ -71,8 +71,8 @@
     "rimraf": "^6.0.1",
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
-    "vitest": "^3.2.4",
-    "@selvajs/config": "0.0.0",
+    "vitest": "^3.2.6",
+    "@selvajs/config": "0.0.1",
     "@selvajs/schemas": "4.5.0"
   },
   "scripts": {

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

@@ -24,7 +24,7 @@
 		isViewerFullscreen?: boolean;
 		oncalculate?: () => void;
 		values: Record<string, unknown>;
-		onValueChange: (id: string, val: SupportedTypes) => void | Promise<void>;
+		onValueChange: (id: string, val: SupportedTypes, forceSolve?: boolean) => void | Promise<void>;
 		onLoadValues?: (values: Record<string, unknown>) => void | Promise<void>;
 		panelActions?: ActionButton[];
 		showSaveButton?: boolean;

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

@@ -133,8 +133,8 @@
 		});
 	});
 
-	function handleValueChange(id: string, val: unknown) {
-		session.setValue(id, val);
+	function handleValueChange(id: string, val: unknown, forceSolve?: boolean) {
+		session.setValue(id, val, forceSolve);
 	}
 
 	function handleCalculate() {

package/src/lib/components/preview/InputControl.svelte

@@ -33,7 +33,12 @@
 		item: InputLayoutItem;
 		value?: SupportedTypes;
 		displayName?: string;
-		onChange: (paramId: string, value: SupportedTypes) => void;
+		/**
+		 * Commit a value. `forceSolve` requests a solve even in manual-solve mode — used for
+		 * system-initiated reconciliation (e.g. pruning a vanished dynamic-list selection) where
+		 * leaving the previous output on screen would misrepresent the now-changed input.
+		 */
+		onChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		disabled?: boolean;
 		/** Runtime-computed options for a dynamic value list input (name -> value). */
 		dynamicOptions?: Record<string, string>;
@@ -108,7 +113,10 @@
 
 	// When a dynamic value list recomputes, a previously-selected value may no longer be an
 	// available option. Prune the stale selection so the control shows a valid option (or empty)
-	// instead of rendering the orphaned raw value as its own label.
+	// instead of rendering the orphaned raw value as its own label. This is a system-initiated
+	// change (the user didn't pick the new option), so force a solve — otherwise manual-solve
+	// schemas would keep the prior output on screen, making it look like the auto-picked option
+	// produced it.
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
@@ -116,9 +124,17 @@
 		// directly from an effect trips Svelte's binding-ownership check.
 		if (Array.isArray(value)) {
 			const pruned = value.filter((v) => typeof v === 'string' && validValues.has(v));
-			if (pruned.length !== value.length) onChange(item.paramId, pruned);
+			if (pruned.length !== value.length) {
+				// Fall back to first option when checklist becomes fully empty after pruning
+				onChange(
+					item.paramId,
+					pruned.length > 0 ? pruned : [Object.values(dynamicListOptions)[0]],
+					true
+				);
+			}
 		} else if (typeof value === 'string' && value && !validValues.has(value)) {
-			onChange(item.paramId, '');
+			// Fall back to first available option instead of clearing to empty
+			onChange(item.paramId, Object.values(dynamicListOptions)[0], true);
 		}
 	});
 

package/src/lib/components/preview/TabContent.svelte

@@ -20,7 +20,7 @@
 		values: Record<string, unknown>;
 		collapsedGroups: Record<string, boolean>;
 		onToggleGroup: (groupId: string) => void;
-		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		inputs: SchemaInput[];
 		outputs: DiscoveredOutput[];
 		/** Computed value list options keyed by the target dynamic-value-list input id. */

package/src/lib/components/preview/TabLayout.svelte

@@ -10,7 +10,7 @@
 	interface Props {
 		schema: UISchema;
 		values: Record<string, unknown>;
-		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		onValueChange: (paramId: string, value: SupportedTypes, forceSolve?: boolean) => void;
 		/** Filter tabs by panel position. 'left' shows unpositioned + left tabs, 'right' shows right tabs only. */
 		panelFilter?: 'left' | 'right';
 		/** Externally request a specific tab to be active (e.g. from collapsed strip click) */

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

@@ -35,8 +35,12 @@ export interface SolveSession {
 	readonly hasPendingChanges: boolean;
 	readonly hasNeverSolved: boolean;
 	readonly isSolving: boolean;
-	/** Records a value change and dispatches a solve unless the schema is manual-solve. */
-	setValue(id: string, value: unknown): void;
+	/**
+	 * Records a value change and dispatches a solve unless the schema is manual-solve.
+	 * `forceSolve` overrides manual mode for system-initiated reconciliation (e.g. a dynamic
+	 * value list pruning a vanished selection), so the output can't lag behind the new value.
+	 */
+	setValue(id: string, value: unknown, forceSolve?: boolean): void;
 	/** Explicit "calculate" — dispatches a solve with the current values. */
 	solve(): void;
 	/** Merges incoming values, then solves (auto) or marks dirty (manual). */
@@ -100,9 +104,16 @@ export function createSolveSession(args: SolveSessionArgs): SolveSession {
 			return args.driver.isSolving;
 		},
 
-		setValue(id, value) {
+		setValue(id, value, forceSolve = false) {
 			const { shouldSolve } = applyValueChange(state, id, value, currentSchema?.instanceSolve);
-			if (shouldSolve) dispatch();
+			if (shouldSolve || forceSolve) {
+				// A forced solve reconciles the deferred output; clear the dirty flags it raised.
+				if (forceSolve && !shouldSolve) {
+					state.pendingValues = {};
+					state.hasPendingChanges = false;
+				}
+				dispatch();
+			}
 		},
 
 		solve() {

package/src/lib/compute/createSolveSession.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { createSolveSession, type SolveDriver } from './createSolveSession.svelte';
+import type { UISchema } from '@selvajs/schemas';
+
+// Covers the reactive wrapper's dispatch decisions — specifically the `forceSolve` path
+// added for dynamic-value-list reconciliation. The pure transition logic is pinned in
+// solve-session-core.test.ts; this file pins how the rune shell turns those decisions into
+// driver.solve() calls. Rune module, so it runs under the svelte vitest plugin.
+
+function schema(instanceSolve?: boolean): UISchema {
+	return {
+		id: 'test',
+		name: 'Test',
+		instanceSolve,
+		inputs: [{ id: 'a', paramId: 'a', paramType: 'text', default: 'x' }],
+		outputs: [{ id: 'out' }],
+		layout: { type: 'flat', groups: [{ items: [] }] }
+	} as unknown as UISchema;
+}
+
+// Records every solve dispatch with the snapshot of values it received.
+function recordingDriver(): SolveDriver & { solves: Record<string, unknown>[] } {
+	const solves: Record<string, unknown>[] = [];
+	return {
+		solves,
+		solve(values) {
+			solves.push(values);
+		},
+		cancel() {},
+		get isSolving() {
+			return false;
+		}
+	};
+}
+
+describe('createSolveSession.setValue', () => {
+	it('auto-solve mode dispatches on every value change', () => {
+		const driver = recordingDriver();
+		const session = createSolveSession({ schema: schema(true), scopeKey: 's', driver });
+		session.setValue('a', 'y');
+		expect(driver.solves.length).toBe(1);
+		expect(driver.solves[0].a).toBe('y');
+	});
+
+	it('manual mode defers: marks pending, no dispatch', () => {
+		const driver = recordingDriver();
+		const session = createSolveSession({ schema: schema(false), scopeKey: 's', driver });
+		session.setValue('a', 'y');
+		expect(driver.solves.length).toBe(0);
+		expect(session.hasPendingChanges).toBe(true);
+	});
+
+	it('forceSolve dispatches even in manual mode and clears the dirty flags', () => {
+		const driver = recordingDriver();
+		const session = createSolveSession({ schema: schema(false), scopeKey: 's', driver });
+		// Reconcile a system-initiated change (e.g. a pruned dynamic-list selection).
+		session.setValue('a', 'reconciled', true);
+		expect(driver.solves.length).toBe(1);
+		expect(driver.solves[0].a).toBe('reconciled');
+		// The forced solve produces the matching output, so nothing is left pending.
+		expect(session.hasPendingChanges).toBe(false);
+	});
+
+	it('forceSolve in auto mode still dispatches exactly once', () => {
+		const driver = recordingDriver();
+		const session = createSolveSession({ schema: schema(true), scopeKey: 's', driver });
+		session.setValue('a', 'y', true);
+		expect(driver.solves.length).toBe(1);
+	});
+});

package/src/lib/public.ts

@@ -22,6 +22,11 @@
 export { default as AppLayout } from './components/compute/AppLayout.svelte';
 export { default as ComputeApp } from './components/compute/ComputeApp.svelte';
 
+// Standalone 3D viewer. Render Grasshopper meshes on their own, outside a
+// ComputeApp host — external apps drive it directly with a `meshes` array and
+// an optional `viewerConfig`.
+export { default as Viewer, type ViewerConfig } from './components/viewer/Viewer.svelte';
+
 // Full-screen states a host app renders
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';