@selvajs/ui 4.2.0 → 4.4.0

package/src/lib/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>

package/src/lib/components/layout/PageFooter.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import * as Dialog from '$lib/components/primitives/dialog';
-	import * as Collapsible from '$lib/components/primitives/collapsible';
-	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
-	import { SvelteMap } from 'svelte/reactivity';
+	import { CircleAlert, TriangleAlert } from '@lucide/svelte';
 	import { useFooter } from '$lib/contexts/footerContext.svelte';
+	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
 
 	interface Props {
@@ -48,31 +46,10 @@
 	);
 
 	let _currentYear = new Date().getFullYear();
-	let dialogOpen = $state(false);
-	let showErrors = $state(true);
-	let showWarnings = $state(false);
 
 	const hasMessages = $derived(errors.length > 0 || warnings.length > 0);
 	const totalCount = $derived(errors.length + warnings.length);
 
-	function groupMessages(messages: string[]): Array<{ message: string; count: number }> {
-		const grouped = new SvelteMap<string, number>();
-
-		for (const msg of messages) {
-			// Extract the base message without the component GUID
-			const baseMsg = msg.replace(/\([a-f0-9-]{36}\)$/i, '(...)').trim();
-			const currentCount = grouped.get(baseMsg) || 0;
-			grouped.set(baseMsg, currentCount + 1);
-		}
-
-		return Array.from(grouped.entries())
-			.map(([message, count]) => ({ message, count }))
-			.sort((a, b) => b.count - a.count);
-	}
-
-	const groupedErrors = $derived(groupMessages(errors));
-	const groupedWarnings = $derived(groupMessages(warnings));
-
 	const copyrightLine = $derived(
 		footerText
 			? footerText.replace('{name}', copyrightName).replace('{year}', String(_currentYear))
@@ -91,131 +68,32 @@
 		{/each}
 
 		{#if hasMessages}
-			<Dialog.Root bind:open={dialogOpen}>
-				<Dialog.Trigger
-					class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errors.length >
-					0
-						? 'text-destructive hover:bg-destructive/10'
-						: 'text-warning hover:bg-warning/10'}"
-					title={`${totalCount} ${totalCount === 1 ? 'issue' : 'issues'}`}
-				>
-					{#if errors.length > 0}
-						<CircleAlert class="h-3.5 w-3.5" />
-						<span class="font-medium">{errors.length} Error{errors.length !== 1 ? 's' : ''}</span>
-					{/if}
-
-					{#if warnings.length > 0}
+			<ComputeMessagesDialog {errors} {warnings}>
+				{#snippet trigger()}
+					<div
+						class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errors.length >
+						0
+							? 'text-destructive hover:bg-destructive/10'
+							: 'text-warning hover:bg-warning/10'}"
+						title={`${totalCount} ${totalCount === 1 ? 'issue' : 'issues'}`}
+					>
 						{#if errors.length > 0}
-							<span class="text-border">•</span>
+							<CircleAlert class="h-3.5 w-3.5" />
+							<span class="font-medium">{errors.length} Error{errors.length !== 1 ? 's' : ''}</span>
 						{/if}
-						<TriangleAlert class="h-3.5 w-3.5" />
-						<span class="font-medium"
-							>{warnings.length} Warning{warnings.length !== 1 ? 's' : ''}</span
-						>
-					{/if}
-				</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);">
-						<!-- Errors Section -->
-						{#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}
-
-						<!-- Warnings Section -->
 						{#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 errors.length > 0}
+								<span class="text-border">•</span>
+							{/if}
+							<TriangleAlert class="h-3.5 w-3.5" />
+							<span class="font-medium"
+								>{warnings.length} Warning{warnings.length !== 1 ? 's' : ''}</span
+							>
 						{/if}
 					</div>
-				</Dialog.Content>
-			</Dialog.Root>
+				{/snippet}
+			</ComputeMessagesDialog>
 		{/if}
 
 		{#if children}

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

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 	import * as Card from '$lib/components/primitives/card';
 	import { ChevronDown } from '@lucide/svelte';
-	import { evaluateVisibility } from '$lib/schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '$lib/schema/visibility-rules';
 
 	interface Props {
 		label: string;
@@ -44,6 +44,9 @@
 		}
 	}
 
+	// One visibility evaluation per item per render; columnStarts and gridItem both read it.
+	const visibilityMap = $derived(buildVisibilityMap(items, values));
+
 	/**
 	 * Compute the column position (0-indexed) where each item starts, accounting
 	 * for spans and linebreak resets. Items hidden by visibility don't consume
@@ -58,7 +61,7 @@
 				col = 0;
 				continue;
 			}
-			const visibility = evaluateVisibility(item, values);
+			const visibility = visibilityMap[itemKey(item)];
 			if (!visibility.visible) {
 				positions.push(0);
 				continue;
@@ -120,7 +123,7 @@
 	{#if layoutItem.type === 'linebreak'}
 		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
 	{:else}
-		{@const visibility = evaluateVisibility(layoutItem, values)}
+		{@const visibility = visibilityMap[itemKey(layoutItem)]}
 		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), cols)}
 		{#if visibility.visible}
 			{#if layoutItem.type === 'input'}

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

@@ -2,7 +2,7 @@
 	import type { OutputImageLayoutItem } from '@selvajs/schemas';
 	import type { FileData } from '@selvajs/compute';
 	import { Download, Maximize, Minimize } from '@lucide/svelte';
-	import { downloadFiles } from '$lib/utils/file-download';
+	import { downloadFiles, isFileData, MIME_BY_EXT } from '$lib/utils/file-download';
 
 	interface Props {
 		item: OutputImageLayoutItem;
@@ -12,18 +12,6 @@
 	let { item, value }: Props = $props();
 
 	const SUPPORTED_EXTS = new Set(['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg']);
-	const MIME_BY_EXT: Record<string, string> = {
-		'.png': 'image/png',
-		'.jpg': 'image/jpeg',
-		'.jpeg': 'image/jpeg',
-		'.webp': 'image/webp',
-		'.gif': 'image/gif',
-		'.svg': 'image/svg+xml'
-	};
-
-	function isFileData(x: unknown): x is FileData {
-		return !!x && typeof x === 'object' && 'fileName' in x && 'data' in x && 'fileType' in x;
-	}
 
 	const file = $derived.by<FileData | null>(() => {
 		if (Array.isArray(value)) return value.find(isFileData) ?? null;

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

@@ -20,6 +20,7 @@
 		NumberInput,
 		TextInput
 	} from '$lib/components/preview/inputs';
+	import { getClientSlot } from '$lib/contexts/clientSlotContext.svelte';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -40,6 +41,18 @@
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
 
+	// Client-sourced input set to render a host element in its place. The 'hidden'
+	// presentation never reaches here (visible:false filters it out upstream), so a
+	// client slot source means presentation === 'slot'.
+	const clientSlotConfig = $derived.by(() => {
+		const source = (
+			item as { source?: { kind?: string; client?: { presentation?: string; slotLabel?: string } } }
+		).source;
+		if (source?.kind !== 'client' || source.client?.presentation !== 'slot') return null;
+		return { slotLabel: source.client.slotLabel };
+	});
+	const clientSlot = getClientSlot();
+
 	// Number range hint — shown next to label for sliders, under the input for plain number fields.
 	const numberRangeHint = $derived.by(() => {
 		if (!isNumberWidget(item)) return null;
@@ -61,87 +74,98 @@
 	}
 </script>
 
-<Field.Field>
-	<Field.Label for={inputId} class="gap-2 flex items-center">
-		{label}
-		{#if item.description}
-			<Dialog.Root>
-				<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-					<HelpCircle size={16} />
-				</Dialog.Trigger>
-				<Dialog.Content class="sm:max-w-md">
-					<Dialog.Header>
-						<Dialog.Title>{label}</Dialog.Title>
-						<Dialog.Description>{item.description}</Dialog.Description>
-					</Dialog.Header>
-				</Dialog.Content>
-			</Dialog.Root>
-		{/if}
-		{#if showRangeInLabel}
-			<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
-		{/if}
-	</Field.Label>
+{#if clientSlotConfig}
+	{#if clientSlot}
+		{@render clientSlot({
+			inputId: item.paramId,
+			displayName: label,
+			slotLabel: clientSlotConfig.slotLabel,
+			value
+		})}
+	{/if}
+{:else}
+	<Field.Field>
+		<Field.Label for={inputId} class="gap-2 flex items-center">
+			{label}
+			{#if item.description}
+				<Dialog.Root>
+					<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
+						<HelpCircle size={16} />
+					</Dialog.Trigger>
+					<Dialog.Content class="sm:max-w-md">
+						<Dialog.Header>
+							<Dialog.Title>{label}</Dialog.Title>
+							<Dialog.Description>{item.description}</Dialog.Description>
+						</Dialog.Header>
+					</Dialog.Content>
+				</Dialog.Root>
+			{/if}
+			{#if showRangeInLabel}
+				<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
+			{/if}
+		</Field.Label>
 
-	{#if isNumberWidget(item)}
-		{@const config = item.config}
-		<NumberInput
-			{inputId}
-			value={typeof value === 'number' ? value : undefined}
-			{config}
-			onChange={commit}
-			{disabled}
-		/>
-	{:else if isCheckboxWidget(item)}
-		<CheckboxInput
-			{inputId}
-			value={typeof value === 'boolean' ? value : undefined}
-			onChange={commit}
-			{disabled}
-		/>
-	{:else if isTextWidget(item)}
-		{@const config = item.config}
-		<TextInput
-			{inputId}
-			value={typeof value === 'string' ? value : ''}
-			{config}
-			onChange={commit}
-			{disabled}
-		/>
-	{:else if isDropdownWidget(item)}
-		{@const config = item.config}
-		{#if config.displayAs === 'checklist'}
-			<ChecklistInput
+		{#if isNumberWidget(item)}
+			{@const config = item.config}
+			<NumberInput
 				{inputId}
-				value={Array.isArray(value)
-					? (value as string[])
-					: typeof value === 'string' && value
-						? [value]
-						: []}
+				value={typeof value === 'number' ? value : undefined}
 				{config}
 				onChange={commit}
 				{disabled}
 			/>
-		{:else}
-			<DropdownInput
+		{:else if isCheckboxWidget(item)}
+			<CheckboxInput
+				{inputId}
+				value={typeof value === 'boolean' ? value : undefined}
+				onChange={commit}
+				{disabled}
+			/>
+		{:else if isTextWidget(item)}
+			{@const config = item.config}
+			<TextInput
+				{inputId}
 				value={typeof value === 'string' ? value : ''}
 				{config}
 				onChange={commit}
 				{disabled}
 			/>
+		{:else if isDropdownWidget(item)}
+			{@const config = item.config}
+			{#if config.displayAs === 'checklist'}
+				<ChecklistInput
+					{inputId}
+					value={Array.isArray(value)
+						? (value as string[])
+						: typeof value === 'string' && value
+							? [value]
+							: []}
+					{config}
+					onChange={commit}
+					{disabled}
+				/>
+			{:else}
+				<DropdownInput
+					value={typeof value === 'string' ? value : ''}
+					{config}
+					onChange={commit}
+					{disabled}
+				/>
+			{/if}
+		{:else if isFileWidget(item)}
+			{@const config = item.config as FileInputWidgetConfig}
+			<FileInput
+				value={typeof value === 'string' ? value : ''}
+				acceptedFormats={config?.acceptedFormats ?? []}
+				onChange={(newValue) => commit(newValue)}
+				defaultInputMode={config?.defaultInputMode}
+				allowedInputModes={config?.allowedInputModes}
+			/>
+		{:else if isColorWidget(item)}
+			<ColorInput
+				value={typeof value === 'string' ? value : '#000000'}
+				onChange={(newValue) => commit(newValue)}
+			/>
 		{/if}
-	{:else if isFileWidget(item)}
-		{@const config = item.config as FileInputWidgetConfig}
-		<FileInput
-			value={typeof value === 'string' ? value : ''}
-			acceptedFormats={config?.acceptedFormats ?? []}
-			onChange={(newValue) => commit(newValue)}
-			defaultInputMode={config?.defaultInputMode}
-			allowedInputModes={config?.allowedInputModes}
-		/>
-	{:else if isColorWidget(item)}
-		<ColorInput
-			value={typeof value === 'string' ? value : '#000000'}
-			onChange={(newValue) => commit(newValue)}
-		/>
-	{/if}
-</Field.Field>
+	</Field.Field>
+{/if}

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

@@ -3,7 +3,12 @@
 	import type { FileData } from '@selvajs/compute';
 	import ChartOutput from './ChartOutput.svelte';
 	import ImageOutput from './ImageOutput.svelte';
-	import { downloadFiles, formatFileSize, getBase64FileSize } from '$lib/utils/file-download';
+	import {
+		downloadFiles,
+		formatFileSize,
+		getBase64FileSize,
+		isFileData
+	} from '$lib/utils/file-download';
 	import { Button } from '../primitives';
 	import * as Dialog from '$lib/components/primitives/dialog';
 	import { Info, Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
@@ -46,10 +51,6 @@
 	let downloading = $state(false);
 	let downloadError = $state<string | null>(null);
 
-	function isFileData(data: any): data is FileData {
-		return data && typeof data === 'object' && 'fileName' in data && 'data' in data;
-	}
-
 	const filesArray = $derived(
 		!value ? [] : Array.isArray(value) ? value.filter(isFileData) : isFileData(value) ? [value] : []
 	);
@@ -114,7 +115,6 @@
 	});
 	const hasDuplicates = $derived(duplicatePaths.length > 0);
 
-	// All folders expanded by default
 	let expandedFolders = new SvelteSet<string>();
 
 	$effect(() => {

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

@@ -4,7 +4,7 @@
 	import * as Tabs from '$lib/components/primitives/tabs';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { evaluateVisibility } from '$lib/schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '$lib/schema/visibility-rules';
 
 	interface Props {
 		schema: UISchema;
@@ -64,17 +64,18 @@
 		if (schema.layout.type !== 'tabbed') return;
 		const updates: Record<string, unknown> = {};
 		visibleTabs.forEach((tab) =>
-			tab.groups.forEach((group) =>
+			tab.groups.forEach((group) => {
+				const visibilityMap = buildVisibilityMap(group.items, values);
 				group.items.forEach((layoutItem) => {
 					if (layoutItem.type === 'linebreak') return;
-					const { visible, disabled, defaultValue } = evaluateVisibility(layoutItem, values);
+					const { visible, disabled, defaultValue } = visibilityMap[itemKey(layoutItem)];
 					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
 					if (!input || defaultValue === undefined) return;
 					if ((!visible || disabled) && values[input.id] !== defaultValue) {
 						updates[input.id] = defaultValue;
 					}
-				})
-			)
+				});
+			})
 		);
 		if (Object.keys(updates).length > 0) Object.assign(values, updates);
 	});