@selvajs/ui 4.2.0 → 4.4.0

package/dist/components/compute/AppLayout.svelte

@@ -44,7 +44,7 @@
 		hasNeverSolved = false,
 		isViewerFullscreen = $bindable(false),
 		oncalculate = () => {},
-		values = $bindable({}),
+		values,
 		onValueChange,
 		onLoadValues,
 		panelActions = [],

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

@@ -22,6 +22,6 @@ interface Props {
     presetLabels?: Partial<PresetLabels>;
     viewerConfig?: ViewerConfig;
 }
-declare const AppLayout: import("svelte").Component<Props, {}, "values" | "isViewerFullscreen">;
+declare const AppLayout: import("svelte").Component<Props, {}, "isViewerFullscreen">;
 type AppLayout = ReturnType<typeof AppLayout>;
 export default AppLayout;

package/dist/components/compute/ComputeApp.svelte

@@ -5,15 +5,17 @@
 	import type { ActionButton } from '../../types/actionButton';
 	import type { SolveFn } from '../../types/solveFn';
 	import type { PresetLabels } from '../../types/presetLabels';
-	import { getDefaultValue } from '../../schema/defaults';
-	import { createComputeThrottle } from '../../compute/computeThrottle.svelte';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
+	import {
+		createSolveSession,
+		createRequestResponseDriver
+	} from '../../compute/createSolveSession.svelte';
 	import { useFooterItem } from '../../composables/useFooterItem.svelte';
 	import { hexToOklch } from '../../utils/color';
 	import AppShell from '../layout/AppShell.svelte';
 	import AppLayout from './AppLayout.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
-	import { getExternalInputs, readExternalValue } from '../../external/storage';
+	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -46,17 +48,12 @@
 		footerItemPriority?: number;
 		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
 		headerRight?: Snippet;
-		/**
-		 * Bring-your-own header. When provided, replaces the built-in header inside
-		 * the standard-height sticky bar (so the fixed layout is unaffected).
-		 * Takes precedence over `headerRight`.
-		 */
+		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
-		/**
-		 * Stable identifier used to scope sessionStorage entries for external-input
-		 * values. If absent, falls back to definitionKey, then to schema.id.
-		 */
+		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
 		externalScopeKey?: string;
+		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, slotLabel, value }.
+		clientSlot?: ClientSlot;
 	}
 
 	let {
@@ -83,91 +80,36 @@
 		headerRight,
 		header,
 		onReady,
-		externalScopeKey
+		externalScopeKey,
+		clientSlot
 	}: Props = $props();
 
-	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
-
-	function createInitialValues(s: UISchema, scopeKey: string) {
-		const externalSet = new Set(getExternalInputs(s).map((e) => e.paramId));
-		const v: Record<string, unknown> = {};
-		for (const input of s.inputs) {
-			if (externalSet.has(input.id)) {
-				const stored = readExternalValue({ scopeKey, inputId: input.id });
-				if (stored !== undefined) v[input.id] = stored;
-				// else: leave undefined so the missing-inputs panel can detect it
-				continue;
-			}
-			v[input.id] = input.default ?? getDefaultValue(input.paramType);
-		}
-		for (const output of s.outputs) {
-			v[output.id] = null;
-		}
-		return v;
-	}
-
-	// svelte-ignore state_referenced_locally
-	let values = $state<Record<string, unknown>>(
-		createInitialValues(schema, externalScopeKey || definitionKey || schema?.id || '')
-	);
-	let error = $state('');
-	let computeErrors = $state<string[]>([]);
-	let computeWarnings = $state<string[]>([]);
-	let meshes = $state<any[]>([]);
-	let pendingValues = $state<Record<string, unknown>>({});
+	// Make the host's client-input slot available to InputControl deep in the tree.
 	// svelte-ignore state_referenced_locally
-	let hasPendingChanges = $state(schema?.instanceSolve === false);
-	// svelte-ignore state_referenced_locally
-	let hasNeverSolved = $state(schema?.instanceSolve === false);
-	let isViewerFullscreen = $state(false);
-
-	async function performSolveInternal(solveValues: Record<string, unknown>, signal: AbortSignal) {
-		try {
-			error = '';
-			computeErrors = [];
-			computeWarnings = [];
-
-			const result = await onSolve(solveValues, signal);
+	setClientSlot(clientSlot);
 
-			if (signal.aborted) return;
-
-			computeErrors = result.errors ?? [];
-			computeWarnings = result.warnings ?? [];
-			meshes = result.meshes ?? [];
-
-			Object.assign(values, result.outputs);
-			pendingValues = {};
-			hasPendingChanges = false;
-			hasNeverSolved = false;
-		} catch (err) {
-			if (err instanceof Error && err.name === 'AbortError') return;
-			error = err instanceof Error ? err.message : String(err);
-		}
-	}
+	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
+	// Solve Session owns the value/lifecycle state machine; the request/response driver
+	// gives it its transport (Rhino.Compute over HTTP via onSolve, throttled). The driver
+	// reads the reporter lazily so it can capture the session it's wired into.
 	// svelte-ignore state_referenced_locally
-	const computeThrottle = createComputeThrottle<Record<string, unknown>>(performSolveInternal, {
+	const driver = createRequestResponseDriver(onSolve, () => session, {
 		timeout: solveTimeoutMs
 	});
+	// svelte-ignore state_referenced_locally
+	const session = createSolveSession({
+		schema,
+		scopeKey: externalScopeKey || definitionKey || schema?.id || '',
+		driver
+	});
 
-	let solving = $derived(computeThrottle.isComputing);
-	const solvingIndicator = createSolvingIndicator(() => solving);
+	let isViewerFullscreen = $state(false);
 
-	function performSolve() {
-		computeThrottle.trigger($state.snapshot(values));
-	}
-
-	function loadValues(incoming: Record<string, unknown>) {
-		Object.assign(values, incoming);
-		if (schema?.instanceSolve !== false) {
-			performSolve();
-		} else {
-			hasPendingChanges = true;
-		}
-	}
+	const solvingIndicator = createSolvingIndicator(() => session.isSolving);
 
 	$effect(() => {
-		onReady?.({ loadValues });
+		onReady?.({ loadValues: (incoming) => session.loadValues(incoming) });
 	});
 
 	let previousDefinitionKey = $state('');
@@ -181,50 +123,35 @@
 				isInitialLoad = false;
 				previousDefinitionKey = definitionKey;
 				if (schema?.instanceSolve !== false) {
-					performSolve();
+					session.solve();
 				}
 			} else if (previousDefinitionKey !== definitionKey) {
-				meshes = [];
-				values = createInitialValues(schema, resolvedScopeKey);
-				error = '';
-				computeErrors = [];
-				computeWarnings = [];
-				if (schema && Object.keys(values).length > 0) {
-					performSolve();
-				}
+				// Host owns the WHEN (definitionKey changed); session owns the WHAT.
+				session.rebuild(schema, resolvedScopeKey);
 				previousDefinitionKey = definitionKey;
 			}
 		});
 	});
 
-	async function handleValueChange(id: string, val: unknown) {
-		values[id] = val;
-
-		if (schema?.instanceSolve === false) {
-			pendingValues[id] = val;
-			hasPendingChanges = true;
-			return;
-		}
-
-		performSolve();
+	function handleValueChange(id: string, val: unknown) {
+		session.setValue(id, val);
 	}
 
 	function handleCalculate() {
-		performSolve();
+		session.solve();
 	}
 
-	// Use untrack to read these static props without creating reactive dependencies.
-	// footerComponentProps is intentionally NOT untracked — it's a getter called every render.
-	const _footerItemId = untrack(() => footerItemId);
-	const _footerComponent = untrack(() => footerComponent);
-	const _footerItemPriority = untrack(() => footerItemPriority);
-	useFooterItem(
-		_footerItemId,
-		_footerComponent,
-		() => (_footerComponent ? (footerComponentProps?.() ?? {}) : {}),
-		'left',
-		_footerItemPriority
-	);
+	// Read static props without creating reactive dependencies (registration is fixed at
+	// mount). footerComponentProps is intentionally read live — it's a getter the renderer
+	// calls every render to keep the footer in sync. The composable no-ops when component
+	// is absent, so the hook itself stays unconditional.
+	useFooterItem({
+		id: untrack(() => footerItemId),
+		component: untrack(() => footerComponent),
+		getProps: () => footerComponentProps?.() ?? {},
+		position: 'left',
+		priority: untrack(() => footerItemPriority)
+	});
 
 	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
 	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
@@ -246,12 +173,12 @@
 		{footerText}
 		{header}
 		rightContent={headerRight}
-		errors={computeErrors}
-		warnings={computeWarnings}
+		errors={session.computeErrors}
+		warnings={session.computeWarnings}
 	>
-		{#if error}
+		{#if session.error}
 			<div class="min-h-100 p-8 flex items-center justify-center">
-				<StateDisplay type="error" size="medium" message={error} />
+				<StateDisplay type="error" size="medium" message={session.error} />
 			</div>
 		{:else if !schema}
 			<div class="min-h-100 flex items-center justify-center">
@@ -261,13 +188,13 @@
 			{#key definitionKey}
 				<AppLayout
 					{schema}
-					{meshes}
-					isSolving={solving}
+					meshes={session.meshes}
+					isSolving={session.isSolving}
 					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
-					{hasPendingChanges}
-					{hasNeverSolved}
+					hasPendingChanges={session.hasPendingChanges}
+					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
-					bind:values
+					values={session.values}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}
@@ -276,13 +203,7 @@
 					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
-					onLoadValues={() => {
-						if (schema?.instanceSolve !== false) {
-							performSolve();
-						} else {
-							hasPendingChanges = true;
-						}
-					}}
+					onLoadValues={() => session.loadValues({})}
 				/>
 			{/key}
 		{/if}

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

@@ -2,6 +2,7 @@ import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
 import type { SolveFn } from '../../types/solveFn';
 import type { PresetLabels } from '../../types/presetLabels';
+import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 import type { Snippet } from 'svelte';
 interface Props {
     schema: UISchema;
@@ -34,17 +35,9 @@ interface Props {
         loadValues: (values: Record<string, unknown>) => void;
     }) => void;
     headerRight?: Snippet;
-    /**
-     * Bring-your-own header. When provided, replaces the built-in header inside
-     * the standard-height sticky bar (so the fixed layout is unaffected).
-     * Takes precedence over `headerRight`.
-     */
     header?: Snippet;
-    /**
-     * Stable identifier used to scope sessionStorage entries for external-input
-     * values. If absent, falls back to definitionKey, then to schema.id.
-     */
     externalScopeKey?: string;
+    clientSlot?: ClientSlot;
 }
 declare const ComputeApp: import("svelte").Component<Props, {}, "">;
 type ComputeApp = ReturnType<typeof ComputeApp>;

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '../primitives/collapsible';
+	import * as Dialog from '../primitives/dialog';
+	import { groupMessages } from '../../utils/file-download';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+		/** Renders inside Dialog.Trigger. */
+		trigger: Snippet;
+	}
+
+	let { 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);
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger class="focus:outline-none">
+		{@render trigger()}
+	</Dialog.Trigger>
+
+	<Dialog.Content class="max-w-2xl max-h-[80vh]">
+		<Dialog.Header>
+			<Dialog.Title class="gap-2 flex items-center">
+				<CircleAlert class="h-5 w-5" />
+				Compute Messages
+			</Dialog.Title>
+			<Dialog.Description>
+				{totalCount}
+				{totalCount === 1 ? 'issue' : 'issues'} detected during solve
+			</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" />
+								{/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}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    errors?: string[];
+    warnings?: string[];
+    /** Renders inside Dialog.Trigger. */
+    trigger: Snippet;
+}
+declare const ComputeMessagesDialog: import("svelte").Component<Props, {}, "">;
+type ComputeMessagesDialog = ReturnType<typeof ComputeMessagesDialog>;
+export default ComputeMessagesDialog;

package/dist/components/compute/ParameterPresetManager.svelte

@@ -3,8 +3,8 @@
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import {
 		createSavedState,
-		validateSavedState,
-		extractLoadableValues,
+		loadPreset,
+		type PresetLoadResult,
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
@@ -52,8 +52,8 @@
 	// Import/validation state
 	let showValidationDialog = $state(false);
 	let showLoadDialog = $state(false);
-	let importedState = $state<ParameterPreset | null>(null);
-	let validationResult = $state<ReturnType<typeof validateSavedState> | null>(null);
+	let loadResult = $state<PresetLoadResult | null>(null);
+	let loadingPresetName = $state('');
 	let fileInputRef = $state<HTMLInputElement | null>(null);
 
 	// Listed states (when onListStates is provided)
@@ -90,15 +90,15 @@
 		showExportDialog = false;
 	}
 
-	// Validate a preset, then either load it directly (no issues) or open the
+	// Load a preset in one pass, then either apply it directly (no issues) or open the
 	// validation dialog (any errors or warnings). Shared by every load path.
 	function tryLoad(preset: ParameterPreset) {
-		const validation = validateSavedState(preset, schema);
-		if (validation.isValid) {
-			onLoadValues(extractLoadableValues(preset, schema, validation));
+		const result = loadPreset(preset, schema);
+		if (result.isValid) {
+			onLoadValues(result.values);
 		} else {
-			importedState = preset;
-			validationResult = validation;
+			loadResult = result;
+			loadingPresetName = preset.name;
 			showValidationDialog = true;
 		}
 	}
@@ -119,21 +119,16 @@
 	}
 
 	function confirmLoad() {
-		if (!importedState || !validationResult) return;
-
-		if (validationResult.canLoad) {
-			const values = extractLoadableValues(importedState, schema, validationResult);
-			onLoadValues(values);
-			showValidationDialog = false;
-			importedState = null;
-			validationResult = null;
-		}
+		if (!loadResult || !loadResult.canLoad) return;
+
+		onLoadValues(loadResult.values);
+		showValidationDialog = false;
+		loadResult = null;
 	}
 
 	function cancelImport() {
 		showValidationDialog = false;
-		importedState = null;
-		validationResult = null;
+		loadResult = null;
 	}
 
 	async function openLoadDialog() {
@@ -288,16 +283,16 @@
 		<Dialog.Header>
 			<Dialog.Title>{t.validationTitle}</Dialog.Title>
 			<Dialog.Description>
-				{#if importedState}
-					{t.validationValidatingPrefix}{importedState.name}
+				{#if loadingPresetName}
+					{t.validationValidatingPrefix}{loadingPresetName}
 				{/if}
 			</Dialog.Description>
 		</Dialog.Header>
 
-		{#if validationResult}
+		{#if loadResult}
 			<div class="gap-4 py-4 grid">
 				<!-- Summary Alert -->
-				{#if validationResult.isValid}
+				{#if loadResult.isValid}
 					<Card.Root class="p-4 border-success/30 bg-success/5">
 						<div class="gap-3 flex items-start">
 							<CheckCircle class="h-5 w-5 text-success" />
@@ -311,7 +306,7 @@
 							</div>
 						</div>
 					</Card.Root>
-				{:else if validationResult.canLoad}
+				{:else if loadResult.canLoad}
 					<Card.Root class="p-4 border-warning/30 bg-warning/5">
 						<div class="gap-3 flex items-start">
 							<AlertTriangle class="h-5 w-5 text-warning" />
@@ -320,10 +315,7 @@
 									{t.validationWarningsTitle}
 								</h4>
 								<p class="text-sm mt-1 text-warning-foreground/80">
-									{t.validationWarningsBody.replace(
-										'{count}',
-										String(validationResult.issues.length)
-									)}
+									{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
 								</p>
 							</div>
 						</div>
@@ -343,10 +335,10 @@
 				{/if}
 
 				<!-- Issues List -->
-				{#if !validationResult.isValid}
+				{#if !loadResult.isValid}
 					<div class="space-y-2">
 						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>
-						{#each validationResult.issues as issue (issue.message)}
+						{#each loadResult.issues as issue (issue.message)}
 							<div
 								class="p-3 rounded-lg border {issue.severity === 'error'
 									? 'border-destructive/30 bg-destructive/5'
@@ -378,7 +370,7 @@
 
 		<Dialog.Footer>
 			<Button variant="outline" onclick={cancelImport}>{t.cancelButton}</Button>
-			{#if validationResult?.canLoad}
+			{#if loadResult?.canLoad}
 				<Button onclick={confirmLoad}>{t.loadAnywayButton}</Button>
 			{/if}
 		</Dialog.Footer>