@selvajs/ui 4.2.0 → 4.4.0

package/dist/components/layout/PageFooter.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import * as Dialog from '../primitives/dialog';
-	import * as Collapsible from '../primitives/collapsible';
-	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
-	import { SvelteMap } from 'svelte/reactivity';
+	import { CircleAlert, TriangleAlert } from '@lucide/svelte';
 	import { useFooter } from '../../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/dist/components/preview/Group.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 	import * as Card from '../primitives/card';
 	import { ChevronDown } from '@lucide/svelte';
-	import { evaluateVisibility } from '../../schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '../../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/dist/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 '../../utils/file-download';
+	import { downloadFiles, isFileData, MIME_BY_EXT } from '../../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/dist/components/preview/InputControl.svelte

@@ -20,6 +20,7 @@
 		NumberInput,
 		TextInput
 	} from './inputs';
+	import { getClientSlot } from '../../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/dist/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 '../../utils/file-download';
+	import {
+		downloadFiles,
+		formatFileSize,
+		getBase64FileSize,
+		isFileData
+	} from '../../utils/file-download';
 	import { Button } from '../primitives';
 	import * as Dialog from '../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/dist/components/preview/TabLayout.svelte

@@ -4,7 +4,7 @@
 	import * as Tabs from '../primitives/tabs';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { evaluateVisibility } from '../../schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '../../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/dist/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/dist/composables/useFooterItem.svelte.d.ts

@@ -1,15 +1,13 @@
+import { type Component } from 'svelte';
+import { type FooterItem } from '../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.
+ * Register a footer item for the lifetime of the calling component.
  *
- * Registration is deferred to onMount (client-side only) to avoid SSR context errors.
- *
- * @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 declare function useFooterItem(id: string, component: any, getProps: () => Record<string, any>, position?: 'left' | 'right', priority?: number, onClick?: () => void): void;
+export declare function useFooterItem<P extends Record<string, unknown>>(config: FooterItemConfig<P>): void;
+export type { Component };