@selvajs/ui 4.3.0 → 4.5.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/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);
 	});

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);