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

package/dist/composables/useFooterItem.svelte.js

@@ -1,33 +1,26 @@
 import { getContext, onMount, onDestroy } from 'svelte';
 import { FOOTER_CONTEXT_KEY } from '../contexts/footerContext.svelte';
 /**
- * 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 function useFooterItem(id, component, getProps, position = 'left', priority = 0, onClick) {
+export function useFooterItem(config) {
     onMount(() => {
         const store = getContext(FOOTER_CONTEXT_KEY);
-        if (!store || !component)
+        if (!store || !config.component)
             return;
-        store.register(id, component, getProps, position, priority, onClick);
+        store.register(config);
     });
     onDestroy(() => {
         try {
             const store = getContext(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.
         }
     });
 }

package/dist/compute/computeThrottle.svelte.js

@@ -30,8 +30,11 @@ export function createComputeThrottle(computeFn, options = {}) {
             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 {

package/dist/compute/createSolveSession.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { UISchema } from '@selvajs/schemas';
+import type { SolveFn, SolveResult } from '../types/solveFn';
+/**
+ * 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 declare function createSolveSession(args: SolveSessionArgs): SolveSession;
+/** 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 declare function createRequestResponseDriver(onSolve: SolveFn, getReporter: () => SolveReporter, options?: {
+    timeout?: number;
+}): SolveDriver;