@selvajs/ui 4.3.0 → 4.5.0

package/dist/utils/file-download.js

@@ -1,10 +1,7 @@
-/**
- * Wrapper utilities for file downloads from Grasshopper outputs
- * Uses the core package implementation for file handling
- */
 import { downloadFileData } from '@selvajs/compute';
+import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
-const MIME_BY_EXT = {
+export const MIME_BY_EXT = {
     '.png': 'image/png',
     '.jpg': 'image/jpeg',
     '.jpeg': 'image/jpeg',
@@ -41,10 +38,6 @@ function saveSingleFile(file) {
     a.click();
     URL.revokeObjectURL(a.href);
 }
-/**
- * Download file(s) from Grasshopper outputs
- * Single files are downloaded directly, multiple files are packaged as ZIP
- */
 export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
     try {
         const filesArray = Array.isArray(fileData) ? fileData : [fileData];
@@ -63,9 +56,6 @@ export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
         throw error;
     }
 }
-/**
- * Check if data is FileData
- */
 export function isFileData(data) {
     return (typeof data === 'object' &&
         data !== null &&
@@ -73,9 +63,16 @@ export function isFileData(data) {
         'data' in data &&
         'isBase64Encoded' in data);
 }
-/**
- * Format file size for display
- */
+export function groupMessages(messages) {
+    const grouped = new SvelteMap();
+    for (const msg of messages) {
+        const baseMsg = msg.replace(/\([a-f0-9-]{36}\)$/i, '(...)').trim();
+        grouped.set(baseMsg, (grouped.get(baseMsg) ?? 0) + 1);
+    }
+    return Array.from(grouped.entries())
+        .map(([message, count]) => ({ message, count }))
+        .sort((a, b) => b.count - a.count);
+}
 export function formatFileSize(bytes) {
     if (bytes === 0)
         return '0 Bytes';
@@ -84,10 +81,6 @@ export function formatFileSize(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
 }
-/**
- * Get approximate file size from base64 string
- */
 export function getBase64FileSize(base64) {
-    // Base64 encoded string is approximately 33% larger than original
     return Math.ceil((base64.length * 3) / 4);
 }

package/dist/utils/randomId.js

@@ -1,22 +1,6 @@
-// Generate a UUIDv4-shaped string in any browser context.
-//
-// `crypto.randomUUID()` requires a secure context (HTTPS or localhost).
-// Plain-HTTP deployments — common for first-time self-hosters trying things
-// out — get `crypto.randomUUID is not a function`, which is a confusing
-// browser-level error nobody can diagnose without devtools open.
-//
-// We try in order:
-//   1. crypto.randomUUID()         — fastest path, available in secure contexts
-//   2. crypto.getRandomValues()    — Web Crypto's lower-level entropy, works
-//                                    in any context that ships Web Crypto
-//   3. Math.random() fallback      — last resort; non-cryptographic, but the
-//                                    IDs we generate here are only used as
-//                                    collision-resistant keys for client-side
-//                                    form rows, not as security tokens.
-//
-// Callers that need cryptographic randomness (tokens, secrets) must NOT use
-// this — they should fail loudly in insecure contexts instead of silently
-// downgrading.
+// Falls back through crypto.randomUUID → crypto.getRandomValues → Math.random so
+// plain-HTTP deployments don't crash. Math.random IDs are non-cryptographic —
+// fine for collision-resistant UI keys, not for tokens or secrets.
 export function randomId() {
     const c = typeof crypto !== 'undefined' ? crypto : undefined;
     if (c?.randomUUID)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -14,29 +14,9 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
-    "./primitives": {
-      "types": "./dist/components/primitives/index.d.ts",
-      "svelte": "./dist/components/primitives/index.js"
-    },
-    "./layout": {
-      "types": "./dist/components/layout/index.d.ts",
-      "svelte": "./dist/components/layout/index.js"
-    },
-    "./compute": {
-      "types": "./dist/components/compute/index.d.ts",
-      "svelte": "./dist/components/compute/index.js"
-    },
-    "./viewer": {
-      "types": "./dist/components/viewer/index.d.ts",
-      "svelte": "./dist/components/viewer/index.js"
-    },
-    "./footer": {
-      "types": "./dist/contexts/footerContext.svelte.d.ts",
-      "svelte": "./dist/contexts/footerContext.svelte.js"
-    },
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.js"
+    "./external": {
+      "types": "./dist/external/storage.d.ts",
+      "svelte": "./dist/external/storage.js"
     },
     "./styles/base.css": "./src/lib/styles/base.css",
     "./styles/themes/*": "./src/lib/styles/themes/*"
@@ -59,7 +39,7 @@
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
     "three": "^0.184.0",
-    "@selvajs/schemas": "^4.3.0"
+    "@selvajs/schemas": "^4.4.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -80,12 +60,14 @@
   "devDependencies": {
     "@internationalized/date": "^3.12.1",
     "@sveltejs/kit": "2.58.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/three": "^0.184.0",
     "bits-ui": "^2.18.0",
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
+    "vitest": "^3.2.4",
     "@selvajs/config": "0.0.0",
-    "@selvajs/schemas": "4.3.0"
+    "@selvajs/schemas": "4.4.0"
   },
   "scripts": {
     "dev": "vite dev",
@@ -95,6 +77,8 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint ."
   }

package/src/lib/components/compute/AppLayout.svelte

@@ -25,7 +25,7 @@
 		oncalculate?: () => void;
 		values: Record<string, unknown>;
 		onValueChange: (id: string, val: SupportedTypes) => void | Promise<void>;
-		onLoadValues?: () => void | Promise<void>;
+		onLoadValues?: (values: Record<string, unknown>) => void | Promise<void>;
 		panelActions?: ActionButton[];
 		showSaveButton?: boolean;
 		showLoadButton?: boolean;
@@ -44,7 +44,7 @@
 		hasNeverSolved = false,
 		isViewerFullscreen = $bindable(false),
 		oncalculate = () => {},
-		values = $bindable({}),
+		values,
 		onValueChange,
 		onLoadValues,
 		panelActions = [],
@@ -99,7 +99,7 @@
 
 	async function handleLoadValues(loadedValues: Record<string, unknown>) {
 		Object.assign(values, loadedValues);
-		await onLoadValues?.();
+		await onLoadValues?.(loadedValues);
 	}
 
 	let _touchStartY = 0;

package/src/lib/components/compute/ComputeApp.svelte

@@ -5,15 +5,16 @@
 	import type { ActionButton } from '../../types/actionButton';
 	import type { SolveFn } from '../../types/solveFn';
 	import type { PresetLabels } from '../../types/presetLabels';
-	import { getDefaultValue } from '../../schema/defaults';
-	import { createComputeThrottle } from '../../compute/computeThrottle.svelte';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
+	import {
+		createSolveSession,
+		createRequestResponseDriver
+	} from '../../compute/createSolveSession.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 { getExternalInputs, readExternalValue } from '../../external/storage';
 	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 
 	import type { Snippet } from 'svelte';
@@ -47,24 +48,11 @@
 		footerItemPriority?: number;
 		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
 		headerRight?: Snippet;
-		/**
-		 * Bring-your-own header. When provided, replaces the built-in header inside
-		 * the standard-height sticky bar (so the fixed layout is unaffected).
-		 * Takes precedence over `headerRight`.
-		 */
+		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
-		/**
-		 * Stable identifier used to scope sessionStorage entries for external-input
-		 * values. If absent, falls back to definitionKey, then to schema.id.
-		 */
+		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
 		externalScopeKey?: string;
-		/**
-		 * Host-rendered element for client-sourced inputs whose schema sets
-		 * source.client.presentation === 'slot'. Selva reserves the input's cell and
-		 * invokes this snippet in its place, passing { inputId, displayName, slotLabel,
-		 * value }. Selva renders nothing itself and never interprets what the host puts
-		 * here (e.g. an "Edit JSON" button that navigates back to a producer page).
-		 */
+		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, slotLabel, value }.
 		clientSlot?: ClientSlot;
 	}
 
@@ -102,86 +90,26 @@
 
 	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
-	function createInitialValues(s: UISchema, scopeKey: string) {
-		const externalSet = new Set(getExternalInputs(s).map((e) => e.paramId));
-		const v: Record<string, unknown> = {};
-		for (const input of s.inputs) {
-			if (externalSet.has(input.id)) {
-				const stored = readExternalValue({ scopeKey, inputId: input.id });
-				if (stored !== undefined) v[input.id] = stored;
-				// else: leave undefined so the missing-inputs panel can detect it
-				continue;
-			}
-			v[input.id] = input.default ?? getDefaultValue(input.paramType);
-		}
-		for (const output of s.outputs) {
-			v[output.id] = null;
-		}
-		return v;
-	}
-
+	// Solve Session owns the value/lifecycle state machine; the request/response driver
+	// gives it its transport (Rhino.Compute over HTTP via onSolve, throttled). The driver
+	// reads the reporter lazily so it can capture the session it's wired into.
 	// svelte-ignore state_referenced_locally
-	let values = $state<Record<string, unknown>>(
-		createInitialValues(schema, externalScopeKey || definitionKey || schema?.id || '')
-	);
-	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, {
+	const driver = createRequestResponseDriver(onSolve, () => session, {
 		timeout: solveTimeoutMs
 	});
+	// svelte-ignore state_referenced_locally
+	const session = createSolveSession({
+		schema,
+		scopeKey: externalScopeKey || definitionKey || schema?.id || '',
+		driver
+	});
 
-	let solving = $derived(computeThrottle.isComputing);
-	const solvingIndicator = createSolvingIndicator(() => solving);
+	let isViewerFullscreen = $state(false);
 
-	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;
-		}
-	}
+	const solvingIndicator = createSolvingIndicator(() => session.isSolving);
 
 	$effect(() => {
-		onReady?.({ loadValues });
+		onReady?.({ loadValues: (incoming) => session.loadValues(incoming) });
 	});
 
 	let previousDefinitionKey = $state('');
@@ -195,50 +123,35 @@
 				isInitialLoad = false;
 				previousDefinitionKey = definitionKey;
 				if (schema?.instanceSolve !== false) {
-					performSolve();
+					session.solve();
 				}
 			} else if (previousDefinitionKey !== definitionKey) {
-				meshes = [];
-				values = createInitialValues(schema, resolvedScopeKey);
-				error = '';
-				computeErrors = [];
-				computeWarnings = [];
-				if (schema && Object.keys(values).length > 0) {
-					performSolve();
-				}
+				// Host owns the WHEN (definitionKey changed); session owns the WHAT.
+				session.rebuild(schema, resolvedScopeKey);
 				previousDefinitionKey = definitionKey;
 			}
 		});
 	});
 
-	async function handleValueChange(id: string, val: unknown) {
-		values[id] = val;
-
-		if (schema?.instanceSolve === false) {
-			pendingValues[id] = val;
-			hasPendingChanges = true;
-			return;
-		}
-
-		performSolve();
+	function handleValueChange(id: string, val: unknown) {
+		session.setValue(id, val);
 	}
 
 	function handleCalculate() {
-		performSolve();
+		session.solve();
 	}
 
-	// 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
-	);
+	// Read static props without creating reactive dependencies (registration is fixed at
+	// mount). footerComponentProps is intentionally read live — it's a getter the renderer
+	// calls every render to keep the footer in sync. The composable no-ops when component
+	// is absent, so the hook itself stays unconditional.
+	useFooterItem({
+		id: untrack(() => footerItemId),
+		component: untrack(() => footerComponent),
+		getProps: () => footerComponentProps?.() ?? {},
+		position: 'left',
+		priority: untrack(() => footerItemPriority)
+	});
 
 	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
 	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
@@ -260,12 +173,12 @@
 		{footerText}
 		{header}
 		rightContent={headerRight}
-		errors={computeErrors}
-		warnings={computeWarnings}
+		errors={session.computeErrors}
+		warnings={session.computeWarnings}
 	>
-		{#if error}
+		{#if session.error}
 			<div class="min-h-100 p-8 flex items-center justify-center">
-				<StateDisplay type="error" size="medium" message={error} />
+				<StateDisplay type="error" size="medium" message={session.error} />
 			</div>
 		{:else if !schema}
 			<div class="min-h-100 flex items-center justify-center">
@@ -275,13 +188,13 @@
 			{#key definitionKey}
 				<AppLayout
 					{schema}
-					{meshes}
-					isSolving={solving}
+					meshes={session.meshes}
+					isSolving={session.isSolving}
 					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
-					{hasPendingChanges}
-					{hasNeverSolved}
+					hasPendingChanges={session.hasPendingChanges}
+					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
-					bind:values
+					values={session.values}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}
@@ -290,13 +203,7 @@
 					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
-					onLoadValues={() => {
-						if (schema?.instanceSolve !== false) {
-							performSolve();
-						} else {
-							hasPendingChanges = true;
-						}
-					}}
+					onLoadValues={() => session.loadValues({})}
 				/>
 			{/key}
 		{/if}

package/src/lib/components/compute/ComputeMessagesDialog.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/primitives/collapsible';
+	import * as Dialog from '$lib/components/primitives/dialog';
+	import { groupMessages } from '$lib/utils/file-download';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+		/** Renders inside Dialog.Trigger. */
+		trigger: Snippet;
+	}
+
+	let { errors = [], warnings = [], trigger }: Props = $props();
+
+	let open = $state(false);
+	let showErrors = $state(true);
+	let showWarnings = $state(false);
+
+	const groupedErrors = $derived(groupMessages(errors));
+	const groupedWarnings = $derived(groupMessages(warnings));
+	const totalCount = $derived(errors.length + warnings.length);
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger class="focus:outline-none">
+		{@render trigger()}
+	</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>