@selvajs/ui 0.9.0

package/dist/components/compute/ComputeApp.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { page } from '$app/state';
+	import type { UISchema } from '@selvajs/schemas';
+	import type { ActionButton } from '../../types/actionButton';
+	import type { SolveFn } from '../../types/solveFn';
+	import { getDefaultValue } from '../../schema/defaults';
+	import { createComputeThrottle } from '../../compute/computeThrottle.svelte';
+	import { createSolvingIndicator } from '../../compute/solving.svelte';
+	import { useFooterItem } from '../../composables/useFooterItem.svelte';
+	import { hexToOklch } from '../../utils/color';
+	import AppShell from '../layout/AppShell.svelte';
+	import AppLayout from './AppLayout.svelte';
+	import StateDisplay from '../primitives/StateDisplay.svelte';
+
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		schema: UISchema;
+		onSolve: SolveFn;
+		definitionKey?: string;
+		title?: string;
+		isEmbedded?: boolean;
+		primaryColor?: string;
+		showModeToggle?: boolean;
+		panelActions?: ActionButton[];
+		showSaveButton?: boolean;
+		showLoadButton?: boolean;
+		/** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
+		solveTimeoutMs?: number;
+		footerComponent?: any;
+		footerComponentProps?: () => Record<string, unknown>;
+		footerItemId?: string;
+		footerItemPriority?: number;
+		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
+		headerRight?: Snippet;
+	}
+
+	let {
+		schema,
+		onSolve,
+		definitionKey = '',
+		title,
+		isEmbedded,
+		primaryColor,
+		showModeToggle = false,
+		panelActions = [],
+		showSaveButton = true,
+		showLoadButton = true,
+		solveTimeoutMs,
+		footerComponent,
+		footerComponentProps,
+		footerItemId = 'footer-item',
+		footerItemPriority = 0,
+		headerRight,
+		onReady
+	}: Props = $props();
+
+	function createInitialValues(s: UISchema) {
+		const v: Record<string, unknown> = {};
+		for (const input of s.inputs) {
+			v[input.id] = input.default ?? getDefaultValue(input.paramType);
+		}
+		for (const output of s.outputs) {
+			v[output.id] = null;
+		}
+		return v;
+	}
+
+	// svelte-ignore state_referenced_locally
+	let values = $state<Record<string, unknown>>(createInitialValues(schema));
+	let error = $state('');
+	let computeErrors = $state<string[]>([]);
+	let computeWarnings = $state<string[]>([]);
+	let meshes = $state<any[]>([]);
+	let pendingValues = $state<Record<string, unknown>>({});
+	// svelte-ignore state_referenced_locally
+	let hasPendingChanges = $state(schema?.instanceSolve === false);
+	// svelte-ignore state_referenced_locally
+	let hasNeverSolved = $state(schema?.instanceSolve === false);
+	let isViewerFullscreen = $state(false);
+
+	async function performSolveInternal(solveValues: Record<string, unknown>, signal: AbortSignal) {
+		try {
+			error = '';
+			computeErrors = [];
+			computeWarnings = [];
+
+			const result = await onSolve(solveValues, signal);
+
+			if (signal.aborted) return;
+
+			computeErrors = result.errors ?? [];
+			computeWarnings = result.warnings ?? [];
+			meshes = result.meshes ?? [];
+
+			Object.assign(values, result.outputs);
+			pendingValues = {};
+			hasPendingChanges = false;
+			hasNeverSolved = false;
+		} catch (err) {
+			if (err instanceof Error && err.name === 'AbortError') return;
+			error = err instanceof Error ? err.message : String(err);
+		}
+	}
+
+	// svelte-ignore state_referenced_locally
+	const computeThrottle = createComputeThrottle<Record<string, unknown>>(performSolveInternal, {
+		timeout: solveTimeoutMs
+	});
+
+	let solving = $derived(computeThrottle.isComputing);
+	const solvingIndicator = createSolvingIndicator(() => solving);
+
+	function performSolve() {
+		computeThrottle.trigger($state.snapshot(values));
+	}
+
+	function loadValues(incoming: Record<string, unknown>) {
+		Object.assign(values, incoming);
+		if (schema?.instanceSolve !== false) {
+			performSolve();
+		} else {
+			hasPendingChanges = true;
+		}
+	}
+
+	$effect(() => {
+		onReady?.({ loadValues });
+	});
+
+	let previousDefinitionKey = $state('');
+	let isInitialLoad = $state(true);
+
+	$effect(() => {
+		const _ = definitionKey;
+
+		untrack(() => {
+			if (isInitialLoad) {
+				isInitialLoad = false;
+				previousDefinitionKey = definitionKey;
+				if (schema?.instanceSolve !== false) {
+					performSolve();
+				}
+			} else if (previousDefinitionKey !== definitionKey) {
+				meshes = [];
+				values = createInitialValues(schema);
+				error = '';
+				computeErrors = [];
+				computeWarnings = [];
+				if (schema && Object.keys(values).length > 0) {
+					performSolve();
+				}
+				previousDefinitionKey = definitionKey;
+			}
+		});
+	});
+
+	async function handleValueChange(id: string, val: unknown) {
+		values[id] = val;
+
+		if (schema?.instanceSolve === false) {
+			pendingValues[id] = val;
+			hasPendingChanges = true;
+			return;
+		}
+
+		performSolve();
+	}
+
+	function handleCalculate() {
+		performSolve();
+	}
+
+	// Use untrack to read these static props without creating reactive dependencies.
+	// footerComponentProps is intentionally NOT untracked — it's a getter called every render.
+	const _footerItemId = untrack(() => footerItemId);
+	const _footerComponent = untrack(() => footerComponent);
+	const _footerItemPriority = untrack(() => footerItemPriority);
+	useFooterItem(
+		_footerItemId,
+		_footerComponent,
+		() => (_footerComponent ? (footerComponentProps?.() ?? {}) : {}),
+		'left',
+		_footerItemPriority
+	);
+
+	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
+	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
+	let customStyle = $derived(
+		resolvedPrimaryColor ? `--primary: ${hexToOklch(resolvedPrimaryColor)}` : ''
+	);
+
+	let pageTitle = $derived(title ?? (schema?.description || schema.name));
+</script>
+
+<div style={customStyle} style:display="contents">
+	<AppShell
+		mode="fixed"
+		showHeader={!resolvedIsEmbedded}
+		showFooter
+		title={pageTitle}
+		{showModeToggle}
+		rightContent={headerRight}
+		errors={computeErrors}
+		warnings={computeWarnings}
+	>
+		{#if error}
+			<div class="min-h-100 p-8 flex items-center justify-center">
+				<StateDisplay type="error" size="medium" message={error} />
+			</div>
+		{:else if !schema}
+			<div class="min-h-100 flex items-center justify-center">
+				<StateDisplay type="loading" size="large" message="Loading schema..." />
+			</div>
+		{:else}
+			{#key definitionKey}
+				<AppLayout
+					{schema}
+					{meshes}
+					isSolving={solving}
+					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
+					{hasPendingChanges}
+					{hasNeverSolved}
+					bind:isViewerFullscreen
+					bind:values
+					{panelActions}
+					{showSaveButton}
+					{showLoadButton}
+					onValueChange={handleValueChange}
+					oncalculate={handleCalculate}
+					onLoadValues={() => {
+						if (schema?.instanceSolve !== false) {
+							performSolve();
+						} else {
+							hasPendingChanges = true;
+						}
+					}}
+				/>
+			{/key}
+		{/if}
+	</AppShell>
+</div>

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

@@ -0,0 +1,29 @@
+import type { UISchema } from '@selvajs/schemas';
+import type { ActionButton } from '../../types/actionButton';
+import type { SolveFn } from '../../types/solveFn';
+import type { Snippet } from 'svelte';
+interface Props {
+    schema: UISchema;
+    onSolve: SolveFn;
+    definitionKey?: string;
+    title?: string;
+    isEmbedded?: boolean;
+    primaryColor?: string;
+    showModeToggle?: boolean;
+    panelActions?: ActionButton[];
+    showSaveButton?: boolean;
+    showLoadButton?: boolean;
+    /** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
+    solveTimeoutMs?: number;
+    footerComponent?: any;
+    footerComponentProps?: () => Record<string, unknown>;
+    footerItemId?: string;
+    footerItemPriority?: number;
+    onReady?: (api: {
+        loadValues: (values: Record<string, unknown>) => void;
+    }) => void;
+    headerRight?: Snippet;
+}
+declare const ComputeApp: import("svelte").Component<Props, {}, "">;
+type ComputeApp = ReturnType<typeof ComputeApp>;
+export default ComputeApp;

package/dist/components/compute/ComputeMessages.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import * as Collapsible from '../primitives/collapsible';
+	import * as Dialog from '../primitives/dialog';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+	}
+
+	let { errors = [], warnings = [] }: Props = $props();
+
+	let open = $state(false);
+
+	let showErrors = $state(true);
+	let showWarnings = $state(false);
+
+	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 hasMessages = $derived(errors.length > 0 || warnings.length > 0);
+	const totalCount = $derived(errors.length + warnings.length);
+</script>
+
+{#if hasMessages}
+	<Dialog.Root bind:open>
+		<Dialog.Trigger
+			class="bottom-12 right-2 sm:bottom-4 sm:right-4 sm:block fixed z-100 hidden focus:outline-none"
+		>
+			<div
+				class="shadow-lg text-xs font-medium hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 flex cursor-pointer items-stretch overflow-hidden rounded-full border transition-all duration-150
+					{errors.length > 0
+					? 'text-destructive-foreground border-destructive/30 bg-destructive'
+					: 'border-warning/30 bg-warning/5 text-warning-foreground'}"
+			>
+				{#if errors.length > 0}
+					<span class="gap-1.5 px-3 py-1.5 flex items-center">
+						<CircleAlert class="h-3.5 w-3.5 shrink-0" />
+						{errors.length}
+					</span>
+				{/if}
+				{#if warnings.length > 0}
+					{#if errors.length > 0}
+						<span class="bg-destructive-foreground/20 w-px self-stretch"></span>
+						<span class="gap-1.5 px-3 py-1.5 flex items-center bg-destructive/80">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{:else}
+						<span class="gap-1.5 px-3 py-1.5 flex items-center">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{/if}
+				{/if}
+			</div>
+		</Dialog.Trigger>
+
+		<Dialog.Content class="max-w-2xl max-h-[80vh]">
+			<Dialog.Header>
+				<Dialog.Title class="gap-2 flex items-center">
+					<CircleAlert class="h-5 w-5" />
+					Compute Messages
+				</Dialog.Title>
+				<Dialog.Description>
+					{totalCount}
+					{totalCount === 1 ? 'issue' : 'issues'} detected during solve
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="space-y-3 pr-2 overflow-y-auto" style="max-height: calc(80vh - 180px);">
+				{#if errors.length > 0}
+					<Collapsible.Root bind:open={showErrors}>
+						<div class="overflow-hidden rounded-lg border border-destructive bg-card">
+							<div class="px-4 py-3 flex items-center">
+								<Collapsible.Trigger
+									class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-destructive/5"
+								>
+									{#if showErrors}
+										<ChevronDown class="h-4 w-4 shrink-0 text-destructive" />
+									{:else}
+										<ChevronRight class="h-4 w-4 shrink-0 text-destructive" />
+									{/if}
+									<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
+									<span class="text-sm font-medium text-destructive">
+										{errors.length === 1 ? '1 Error' : `${errors.length} Errors`}
+									</span>
+								</Collapsible.Trigger>
+							</div>
+
+							<Collapsible.Content class="space-y-0">
+								<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-destructive bg-card">
+									<ul class="space-y-2">
+										{#each groupedErrors as { message, count } (message)}
+											<li class="gap-2 text-sm flex text-destructive/90">
+												<span class="shrink-0">•</span>
+												<span class="flex-1">
+													{message}
+													{#if count > 1}
+														<span class="ml-1 font-medium text-destructive/70">×{count} </span>
+													{/if}
+												</span>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							</Collapsible.Content>
+						</div>
+					</Collapsible.Root>
+				{/if}
+
+				{#if warnings.length > 0}
+					<Collapsible.Root bind:open={showWarnings}>
+						<div class="overflow-hidden rounded-lg border border-warning/50 bg-card">
+							<div class="px-4 py-3 flex items-center">
+								<Collapsible.Trigger
+									class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-warning/5"
+								>
+									{#if showWarnings}
+										<ChevronDown class="h-4 w-4 shrink-0 text-warning" />
+									{:else}
+										<ChevronRight class="h-4 w-4 shrink-0 text-warning" />
+									{/if}
+									<TriangleAlert class="h-4 w-4 shrink-0 text-warning" />
+									<span class="text-sm font-medium text-warning">
+										{warnings.length === 1 ? '1 Warning' : `${warnings.length} Warnings`}
+									</span>
+								</Collapsible.Trigger>
+							</div>
+
+							<Collapsible.Content class="space-y-0">
+								<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-warning/50 bg-card">
+									<ul class="space-y-2">
+										{#each groupedWarnings as { message, count } (message)}
+											<li class="gap-2 text-sm flex text-muted-foreground">
+												<span class="shrink-0">•</span>
+												<span class="flex-1">
+													{message}
+													{#if count > 1}
+														<span class="ml-1 font-medium text-warning/70">×{count}</span>
+													{/if}
+												</span>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							</Collapsible.Content>
+						</div>
+					</Collapsible.Root>
+				{/if}
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+{/if}

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

@@ -0,0 +1,7 @@
+interface Props {
+    errors?: string[];
+    warnings?: string[];
+}
+declare const ComputeMessages: import("svelte").Component<Props, {}, "">;
+type ComputeMessages = ReturnType<typeof ComputeMessages>;
+export default ComputeMessages;