@selvajs/ui 4.2.0 → 4.4.0

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -41,7 +41,7 @@
 	let urlInput = $state('');
 	let isDragging = $state(false);
 	let isLoading = $state(false);
-	let urlError = $state<{ message: string; isCors: boolean } | null>(null);
+	let urlError = $state<{ message: string; isCors: boolean; hint?: string } | null>(null);
 	let urlSuccess = $state('');
 
 	// Parse existing value if it's JSON
@@ -88,26 +88,22 @@
 	async function handleUrlChange() {
 		if (!urlInput.trim()) return;
 
-		// Reset all state before starting a new fetch
 		isLoading = true;
 		urlError = null;
 		urlSuccess = '';
 		uploadedFileName = '';
 
 		try {
-			// Validate URL format first
 			let parsedUrl: URL;
 			try {
 				parsedUrl = new URL(urlInput);
 			} catch {
 				urlError = { message: 'Invalid URL — make sure it starts with https://', isCors: false };
-				isLoading = false;
 				return;
 			}
 
 			if (parsedUrl.protocol !== 'https:' && parsedUrl.protocol !== 'http:') {
 				urlError = { message: 'Only http:// and https:// URLs are supported.', isCors: false };
-				isLoading = false;
 				return;
 			}
 
@@ -117,7 +113,6 @@
 					message: `Server returned ${response.status} ${response.statusText}. Check the URL is correct and publicly accessible.`,
 					isCors: false
 				};
-				isLoading = false;
 				return;
 			}
 
@@ -129,7 +124,6 @@
 					message: `File format "${fileEnding}" is not accepted. Allowed: ${acceptedFormats.join(', ')}`,
 					isCors: false
 				};
-				isLoading = false;
 				return;
 			}
 
@@ -139,24 +133,22 @@
 					message: `File too large: ${(blob.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB). Download it and use Upload instead.`,
 					isCors: false
 				};
-				isLoading = false;
 				return;
 			}
 
-			await new Promise<void>((resolve, reject) => {
+			const base64Data = await new Promise<string>((resolve, reject) => {
 				const reader = new FileReader();
 				reader.onload = (e) => {
-					const base64 = e.target?.result as string;
-					const base64Data = base64.includes(',') ? base64.split(',')[1] : base64;
-					const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
-					value = data;
-					urlSuccess = `Loaded ${fileEnding} (${(blob.size / 1024).toFixed(0)} KB)`;
-					onChange(data);
-					resolve();
+					const result = e.target?.result as string;
+					resolve(result.includes(',') ? result.split(',')[1] : result);
 				};
 				reader.onerror = () => reject(new Error('Failed to read the downloaded file.'));
 				reader.readAsDataURL(blob);
 			});
+			const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
+			value = data;
+			urlSuccess = `Loaded ${fileEnding} (${(blob.size / 1024).toFixed(0)} KB)`;
+			onChange(data);
 		} catch (error) {
 			if (isCorsError(error)) {
 				const host = (() => {
@@ -184,7 +176,6 @@
 				urlError = {
 					message: `Could not reach "${host}" — the file may not exist, or the server does not allow browser access.`,
 					isCors: true,
-					// @ts-expect-error hint is properly typed at runtime
 					hint
 				};
 			} else {
@@ -328,8 +319,8 @@
 						<CircleAlert size={13} class="mt-0.5 shrink-0 text-destructive" />
 						<p class="text-xs leading-snug text-destructive">{urlError.message}</p>
 					</div>
-					{#if urlError.isCors && (urlError as any).hint}
-						<p class="text-xs leading-snug pl-5 text-muted-foreground">{(urlError as any).hint}</p>
+					{#if urlError.isCors && urlError.hint}
+						<p class="text-xs leading-snug pl-5 text-muted-foreground">{urlError.hint}</p>
 					{/if}
 				</div>
 			{/if}

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

@@ -1,40 +1,40 @@
-import { getContext, onMount, onDestroy } from 'svelte';
-import { type FooterStore, FOOTER_CONTEXT_KEY } from '$lib/contexts/footerContext.svelte';
+import { getContext, onMount, onDestroy, type Component } from 'svelte';
+import {
+	type FooterStore,
+	type FooterItem,
+	FOOTER_CONTEXT_KEY
+} from '$lib/contexts/footerContext.svelte';
+
+/** Config for a footer-item registration; generic over the component's props. */
+export type FooterItemConfig<P extends Record<string, unknown> = Record<string, unknown>> = Omit<
+	FooterItem<P>,
+	'position' | 'priority'
+> &
+	Partial<Pick<FooterItem<P>, 'position' | 'priority'>>;
 
 /**
- * Register a footer item component that reactively updates its props.
- * The `getProps` function is called on every render, so returning reactive state
- * (e.g. `() => ({ status: myState.status })`) will keep the footer in sync.
- *
- * Registration is deferred to onMount (client-side only) to avoid SSR context errors.
+ * Register a footer item for the lifetime of the calling component.
  *
- * @param id        - Unique identifier for this footer item
- * @param component - Svelte component to render
- * @param getProps  - Function returning current props (called reactively)
- * @param position  - Where to display ('left' or 'right'), defaults to 'left'
- * @param priority  - Higher values render first within their position
- * @param onClick   - Optional click handler (e.g. open a popup/dialog)
+ * Registration is deferred to onMount (client-side only) to avoid SSR context errors;
+ * it's unregistered on destroy. A no-op when no footer context is present (e.g. a
+ * component rendered outside the root layout) or no component is supplied.
  */
-export function useFooterItem(
-	id: string,
-	component: any,
-	getProps: () => Record<string, any>,
-	position: 'left' | 'right' = 'left',
-	priority: number = 0,
-	onClick?: () => void
-) {
+export function useFooterItem<P extends Record<string, unknown>>(config: FooterItemConfig<P>) {
 	onMount(() => {
 		const store = getContext<FooterStore | undefined>(FOOTER_CONTEXT_KEY);
-		if (!store || !component) return;
-		store.register(id, component, getProps, position, priority, onClick);
+		if (!store || !config.component) return;
+		store.register(config);
 	});
 
 	onDestroy(() => {
 		try {
 			const store = getContext<FooterStore | undefined>(FOOTER_CONTEXT_KEY);
-			store?.unregister(id);
+			store?.unregister(config.id);
 		} catch {
-			// Context may not exist during SSR cleanup — safe to ignore
+			// Context may not exist during SSR cleanup — safe to ignore.
 		}
 	});
 }
+
+// Re-export for callers that type their component prop explicitly.
+export type { Component };

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

@@ -55,8 +55,11 @@ export function createComputeThrottle<T>(
 		try {
 			await computeFn(values, signal);
 		} catch (err) {
-			if (!(err instanceof Error && err.name === 'AbortError')) {
-				throw err;
+			// AbortError is expected (timeout or cancel). Non-abort errors must be
+			// handled inside computeFn — re-throwing here would produce an unhandled
+			// rejection because executeCompute is always called fire-and-forget.
+			if (!(err instanceof Error) || (err.name !== 'AbortError' && err.name !== 'TimeoutError')) {
+				console.error('[computeThrottle] unhandled error in computeFn:', err);
 			}
 		} finally {
 			clearTimeout(timeoutId);

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

@@ -0,0 +1,106 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createComputeThrottle } from './computeThrottle.svelte';
+
+// Pins the throttle state machine: single-in-flight, latest-pending-wins, abort on
+// re-trigger, timeout -> abort, and cancel clearing the pending slot. These are the
+// non-obvious paths (the finally-block re-entry, the abort cleanup) where bugs hide.
+// `computeThrottle.svelte.ts` is a rune module, so these run under the svelte vitest
+// plugin (see vitest.config.ts).
+
+// A controllable computeFn: each call exposes a resolver so the test drives when a
+// solve "finishes", plus records the values and the signal it was given.
+function deferredComputeFn() {
+	const calls: { values: unknown; signal: AbortSignal; resolve: () => void }[] = [];
+	const fn = (values: unknown, signal: AbortSignal) =>
+		new Promise<void>((resolve) => {
+			calls.push({ values, signal, resolve });
+		});
+	return { fn, calls };
+}
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+describe('createComputeThrottle', () => {
+	it('runs immediately when idle and reports isComputing across the call', async () => {
+		const { fn, calls } = deferredComputeFn();
+		const t = createComputeThrottle<number>(fn);
+
+		expect(t.isComputing).toBe(false);
+		t.trigger(1);
+		expect(t.isComputing).toBe(true);
+		expect(calls).toHaveLength(1);
+		expect(calls[0].values).toBe(1);
+
+		calls[0].resolve();
+		await tick();
+		expect(t.isComputing).toBe(false);
+		expect(t.hasPending).toBe(false);
+	});
+
+	it('keeps only one in flight; latest pending value wins, intermediates dropped', async () => {
+		const { fn, calls } = deferredComputeFn();
+		const t = createComputeThrottle<number>(fn);
+
+		t.trigger(1); // runs
+		t.trigger(2); // queued
+		t.trigger(3); // overwrites the single pending slot — 2 is dropped
+		expect(calls).toHaveLength(1);
+		expect(t.hasPending).toBe(true);
+
+		calls[0].resolve(); // first finishes -> pending (3) runs
+		await tick();
+		expect(calls).toHaveLength(2);
+		expect(calls[1].values).toBe(3); // not 2
+		expect(t.hasPending).toBe(false);
+	});
+
+	it('aborts the in-flight request when a new one starts (after the pending re-entry)', async () => {
+		const { fn, calls } = deferredComputeFn();
+		const t = createComputeThrottle<number>(fn);
+
+		t.trigger(1);
+		t.trigger(2); // pending
+		const firstSignal = calls[0].signal;
+
+		calls[0].resolve(); // finishes -> re-enters executeCompute(2), which aborts the (already-cleared) prior
+		await tick();
+		// The second run gets a fresh, non-aborted signal.
+		expect(calls).toHaveLength(2);
+		expect(calls[1].signal.aborted).toBe(false);
+		expect(firstSignal).not.toBe(calls[1].signal);
+	});
+
+	it('cancel() clears the pending slot and aborts the in-flight signal', async () => {
+		const { fn, calls } = deferredComputeFn();
+		const t = createComputeThrottle<number>(fn);
+
+		t.trigger(1);
+		t.trigger(2); // pending
+		expect(t.hasPending).toBe(true);
+
+		t.cancel();
+		expect(t.hasPending).toBe(false);
+		expect(calls[0].signal.aborted).toBe(true);
+
+		// Resolving the aborted call must NOT start the (now-cleared) pending one.
+		calls[0].resolve();
+		await tick();
+		expect(calls).toHaveLength(1);
+	});
+
+	describe('timeout', () => {
+		beforeEach(() => vi.useFakeTimers());
+		afterEach(() => vi.useRealTimers());
+
+		it('aborts the in-flight request when the timeout elapses', async () => {
+			const { fn, calls } = deferredComputeFn();
+			const t = createComputeThrottle<number>(fn, { timeout: 1000 });
+
+			t.trigger(1);
+			expect(calls[0].signal.aborted).toBe(false);
+
+			vi.advanceTimersByTime(1000);
+			expect(calls[0].signal.aborted).toBe(true);
+		});
+	});
+});

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

@@ -0,0 +1,188 @@
+// Reactive Solve Session (see CONTEXT.md): the $state-backed shell over the pure
+// transition logic in solve-session-core.ts. It owns the live values/flags, delegates
+// every transition to the core, and drives solves through a transport-agnostic
+// SolveDriver. A completed solve re-enters via report().
+
+import type { UISchema } from '@selvajs/schemas';
+import { readExternalValue } from '../external/storage';
+import type { SolveFn, SolveResult } from '../types/solveFn';
+import { createComputeThrottle } from './computeThrottle.svelte';
+import {
+	buildInitialValues,
+	makeInitialFlags,
+	applyValueChange,
+	applySolveResult,
+	type SolveSessionState
+} from './solve-session-core';
+
+/**
+ * The transport behind a Solve Session. Knows how to start and cancel a solve and
+ * reports its in-flight state. It does NOT return outputs — those come back via the
+ * session's report() so push transports (WebSocket) fit without contortion.
+ */
+export interface SolveDriver {
+	solve(values: Record<string, unknown>): void;
+	cancel(): void;
+	readonly isSolving: boolean;
+}
+
+export interface SolveSession {
+	readonly values: Record<string, unknown>;
+	readonly error: string;
+	readonly computeErrors: string[];
+	readonly computeWarnings: string[];
+	readonly meshes: unknown[];
+	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;
+	/** Explicit "calculate" — dispatches a solve with the current values. */
+	solve(): void;
+	/** Merges incoming values, then solves (auto) or marks dirty (manual). */
+	loadValues(incoming: Record<string, unknown>): void;
+	/** Re-seed for a new active definition: rebuild values, clear outputs, gate the solve. */
+	rebuild(schema: UISchema, scopeKey: string): void;
+	/** Feed a completed solve result back into the session (called by the driver/host). */
+	report(result: SolveResult): void;
+	/** Report a solve failure (transport/solver error) — surfaces in `error`. */
+	reportError(message: string): void;
+}
+
+export interface SolveSessionArgs {
+	schema: UISchema;
+	scopeKey: string;
+	driver: SolveDriver;
+}
+
+export function createSolveSession(args: SolveSessionArgs): SolveSession {
+	let currentSchema = args.schema;
+
+	const flags = makeInitialFlags(currentSchema?.instanceSolve);
+	const state = $state<SolveSessionState>({
+		values: buildInitialValues(currentSchema, args.scopeKey, readExternalValue),
+		error: '',
+		computeErrors: [],
+		computeWarnings: [],
+		meshes: [],
+		pendingValues: {},
+		hasPendingChanges: flags.hasPendingChanges,
+		hasNeverSolved: flags.hasNeverSolved
+	});
+
+	function dispatch() {
+		args.driver.solve($state.snapshot(state.values));
+	}
+
+	return {
+		get values() {
+			return state.values;
+		},
+		get error() {
+			return state.error;
+		},
+		get computeErrors() {
+			return state.computeErrors;
+		},
+		get computeWarnings() {
+			return state.computeWarnings;
+		},
+		get meshes() {
+			return state.meshes;
+		},
+		get hasPendingChanges() {
+			return state.hasPendingChanges;
+		},
+		get hasNeverSolved() {
+			return state.hasNeverSolved;
+		},
+		get isSolving() {
+			return args.driver.isSolving;
+		},
+
+		setValue(id, value) {
+			const { shouldSolve } = applyValueChange(state, id, value, currentSchema?.instanceSolve);
+			if (shouldSolve) dispatch();
+		},
+
+		solve() {
+			dispatch();
+		},
+
+		loadValues(incoming) {
+			Object.assign(state.values, incoming);
+			if (currentSchema?.instanceSolve !== false) {
+				dispatch();
+			} else {
+				state.hasPendingChanges = true;
+			}
+		},
+
+		rebuild(schema, scopeKey) {
+			currentSchema = schema;
+			state.meshes = [];
+			state.error = '';
+			state.computeErrors = [];
+			state.computeWarnings = [];
+			state.pendingValues = {};
+			state.values = buildInitialValues(schema, scopeKey, readExternalValue);
+			const f = makeInitialFlags(schema?.instanceSolve);
+			state.hasPendingChanges = f.hasPendingChanges;
+			state.hasNeverSolved = f.hasNeverSolved;
+			if (schema && Object.keys(state.values).length > 0 && schema.instanceSolve !== false) {
+				dispatch();
+			}
+		},
+
+		report(result) {
+			applySolveResult(state, result);
+		},
+
+		reportError(message) {
+			state.error = message;
+		}
+	};
+}
+
+/** The slice of a SolveSession a driver feeds completed/failed solves back into. */
+export interface SolveReporter {
+	report(result: SolveResult): void;
+	reportError(message: string): void;
+}
+
+/**
+ * Request/response Solve Driver: wraps createComputeThrottle around a SolveFn and feeds
+ * the resolved result back through the reporter. One solve in flight at a time; the
+ * latest triggered values win. Used by ComputeApp (Rhino.Compute over HTTP).
+ *
+ * Because the session and driver reference each other, the host passes the reporter
+ * lazily (`() => session`) so it can construct the session with the driver in hand.
+ */
+export function createRequestResponseDriver(
+	onSolve: SolveFn,
+	getReporter: () => SolveReporter,
+	options: { timeout?: number } = {}
+): SolveDriver {
+	const throttle = createComputeThrottle<Record<string, unknown>>(async (values, signal) => {
+		try {
+			const result = await onSolve(values, signal);
+			if (signal.aborted) return;
+			getReporter().report(result);
+		} catch (err) {
+			if (signal.aborted) return;
+			getReporter().reportError(err instanceof Error ? err.message : String(err));
+		}
+	}, options);
+
+	return {
+		solve(values) {
+			throttle.trigger(values);
+		},
+		cancel() {
+			throttle.cancel();
+		},
+		get isSolving() {
+			return throttle.isComputing;
+		}
+	};
+}

package/src/lib/compute/solve-session-core.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'vitest';
+import {
+	buildInitialValues,
+	makeInitialFlags,
+	applyValueChange,
+	applySolveResult,
+	type SolveSessionState
+} from './solve-session-core';
+import type { UISchema } from '@selvajs/schemas';
+
+// These tests pin the lifecycle state machine that used to live inline in
+// ComputeApp.svelte: how values are seeded (incl. client-sourced hydration), when a
+// value change should dispatch a solve vs. defer it, and what a reported solve result
+// does to the flags. Reactivity is NOT exercised here — that's the thin rune wrapper's
+// job. This is the pure decision layer.
+
+// Minimal schema factory. `inputs`/`outputs` are the flat lists ComputeApp reads;
+// `layout` is what getExternalInputs walks for client-sourced inputs.
+function schema(partial: {
+	inputs?: { id: string; paramType: string; default?: unknown }[];
+	outputs?: { id: string }[];
+	clientInputs?: string[]; // ids that carry source.kind === 'client'
+	instanceSolve?: boolean;
+}): UISchema {
+	const clientSet = new Set(partial.clientInputs ?? []);
+	const items = (partial.inputs ?? []).map((i) => ({
+		type: 'input',
+		id: i.id,
+		paramId: i.id,
+		displayName: i.id,
+		...(clientSet.has(i.id) ? { source: { kind: 'client' } } : {})
+	}));
+	return {
+		id: 'test-schema',
+		name: 'Test',
+		instanceSolve: partial.instanceSolve,
+		inputs: partial.inputs ?? [],
+		outputs: partial.outputs ?? [],
+		layout: { type: 'flat', groups: [{ items }] }
+	} as unknown as UISchema;
+}
+
+describe('buildInitialValues', () => {
+	it('seeds non-client inputs from default, falling back to paramType default', () => {
+		const s = schema({
+			inputs: [
+				{ id: 'a', paramType: 'number', default: 5 },
+				{ id: 'b', paramType: 'text' } // no default -> getDefaultValue('text') === ''
+			],
+			outputs: [{ id: 'out' }]
+		});
+		const v = buildInitialValues(s, 'scope', () => undefined);
+		expect(v.a).toBe(5);
+		expect(v.b).toBe('');
+		expect(v.out).toBe(null); // outputs always seeded null
+	});
+
+	it('hydrates client-sourced inputs from the reader, leaving them undefined when absent', () => {
+		const s = schema({
+			inputs: [
+				{ id: 'c', paramType: 'text', default: 'should-be-ignored' },
+				{ id: 'd', paramType: 'text', default: 'also-ignored' }
+			],
+			clientInputs: ['c', 'd']
+		});
+		const read = (ref: { inputId: string }) => (ref.inputId === 'c' ? 'stored-c' : undefined);
+		const v = buildInitialValues(s, 'scope', read);
+		expect(v.c).toBe('stored-c');
+		// Absent client value stays undefined (NOT the default) so the missing-inputs
+		// panel can detect it.
+		expect('d' in v).toBe(false);
+	});
+});
+
+describe('makeInitialFlags', () => {
+	it('starts pending+never-solved when instanceSolve === false', () => {
+		expect(makeInitialFlags(false)).toEqual({ hasPendingChanges: true, hasNeverSolved: true });
+	});
+	it('starts clean when instanceSolve is true or absent', () => {
+		expect(makeInitialFlags(true)).toEqual({ hasPendingChanges: false, hasNeverSolved: false });
+		expect(makeInitialFlags(undefined)).toEqual({
+			hasPendingChanges: false,
+			hasNeverSolved: false
+		});
+	});
+});
+
+function state(overrides: Partial<SolveSessionState> = {}): SolveSessionState {
+	return {
+		values: {},
+		error: '',
+		computeErrors: [],
+		computeWarnings: [],
+		meshes: [],
+		pendingValues: {},
+		hasPendingChanges: false,
+		hasNeverSolved: false,
+		...overrides
+	};
+}
+
+describe('applyValueChange', () => {
+	it('in auto-solve mode, records the value and asks to dispatch', () => {
+		const s = state({ values: { a: 1 } });
+		const out = applyValueChange(s, 'a', 2, /* instanceSolve */ true);
+		expect(out.state.values.a).toBe(2);
+		expect(out.shouldSolve).toBe(true);
+		expect(out.state.hasPendingChanges).toBe(false);
+	});
+
+	it('in manual mode, defers: records pending + sets the flag, no dispatch', () => {
+		const s = state({ values: { a: 1 } });
+		const out = applyValueChange(s, 'a', 2, /* instanceSolve */ false);
+		expect(out.state.values.a).toBe(2);
+		expect(out.state.pendingValues.a).toBe(2);
+		expect(out.state.hasPendingChanges).toBe(true);
+		expect(out.shouldSolve).toBe(false);
+	});
+});
+
+describe('applySolveResult', () => {
+	it('merges outputs into values and clears the lifecycle flags', () => {
+		const s = state({
+			values: { a: 1, out: null },
+			pendingValues: { a: 1 },
+			hasPendingChanges: true,
+			hasNeverSolved: true,
+			error: 'stale'
+		});
+		const out = applySolveResult(s, {
+			outputs: { out: 42 },
+			errors: ['e'],
+			warnings: ['w'],
+			meshes: [{ id: 'm' }]
+		});
+		expect(out.values.out).toBe(42);
+		expect(out.values.a).toBe(1);
+		expect(out.computeErrors).toEqual(['e']);
+		expect(out.computeWarnings).toEqual(['w']);
+		expect(out.meshes).toEqual([{ id: 'm' }]);
+		expect(out.pendingValues).toEqual({});
+		expect(out.hasPendingChanges).toBe(false);
+		expect(out.hasNeverSolved).toBe(false);
+		expect(out.error).toBe('');
+	});
+
+	it('treats missing result arrays as empty', () => {
+		const out = applySolveResult(state(), { outputs: {} });
+		expect(out.computeErrors).toEqual([]);
+		expect(out.computeWarnings).toEqual([]);
+		expect(out.meshes).toEqual([]);
+	});
+});