@selvajs/ui 0.9.6 → 2.0.0

package/dist/components/layout/AppShell.svelte

@@ -9,6 +9,8 @@
 		homeUrl?: string;
 		title?: string | null;
 		logo?: string;
+		brandName?: string;
+		copyrightName?: string;
 		showModeToggle?: boolean;
 		navItems?: Snippet;
 		rightContent?: Snippet;
@@ -40,6 +42,8 @@
 		homeUrl = '/',
 		title = undefined,
 		logo = '/favicon/favicon.svg',
+		brandName = 'Selva',
+		copyrightName = undefined,
 		showModeToggle = true,
 		navItems,
 		rightContent,
@@ -56,6 +60,10 @@
 		children
 	}: AppShellProps = $props();
 
+	// Default the footer's copyright owner to the header's brand name when the
+	// caller didn't specify one.
+	const _copyright = $derived(copyrightName ?? brandName);
+
 	// fixed: viewport-locked, no page scroll — body owns its own scroll internally.
 	// scroll: normal page flow, footer sticks to bottom via sticky positioning.
 	const rootClass = $derived(
@@ -79,6 +87,7 @@
 			{homeUrl}
 			{title}
 			{logo}
+			{brandName}
 			{showModeToggle}
 			{navItems}
 			{rightContent}
@@ -100,7 +109,7 @@
 
 	{#if showFooter}
 		<div class="bottom-0 sticky z-10 shrink-0">
-			<PageFooter {errors} {warnings}>
+			<PageFooter {errors} {warnings} copyrightName={_copyright}>
 				{#if footerChildren}
 					{@render footerChildren()}
 				{/if}

package/dist/components/layout/AppShell.svelte.d.ts

@@ -4,6 +4,8 @@ interface AppShellProps {
     homeUrl?: string;
     title?: string | null;
     logo?: string;
+    brandName?: string;
+    copyrightName?: string;
     showModeToggle?: boolean;
     navItems?: Snippet;
     rightContent?: Snippet;

package/dist/components/layout/PageFooter.svelte

@@ -10,10 +10,11 @@
 	interface Props {
 		errors?: string[];
 		warnings?: string[];
+		copyrightName?: string;
 		children?: Snippet;
 	}
 
-	let { errors = [], warnings = [], children }: Props = $props();
+	let { errors = [], warnings = [], copyrightName = 'Selva', children }: Props = $props();
 
 	let footerStore = (() => {
 		try {
@@ -217,6 +218,6 @@
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p>by Selva &copy; {_currentYear}</p>
+		<p>by {copyrightName} &copy; {_currentYear}</p>
 	</div>
 </footer>

package/dist/components/layout/PageFooter.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     errors?: string[];
     warnings?: string[];
+    copyrightName?: string;
     children?: Snippet;
 }
 declare const PageFooter: import("svelte").Component<Props, {}, "">;

package/dist/components/layout/PageHeader.svelte

@@ -6,6 +6,7 @@
 		homeUrl?: string;
 		title?: string | null;
 		logo?: string;
+		brandName?: string;
 		navItems?: Snippet;
 		rightContent?: Snippet;
 		subnav?: Snippet;
@@ -17,6 +18,7 @@
 		homeUrl = '/app',
 		title = undefined,
 		logo = '/favicon/favicon.svg',
+		brandName = 'Selva',
 		navItems,
 		rightContent,
 		subnav,
@@ -33,7 +35,7 @@
 		<!-- Logo -->
 		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">Selva</span>
+			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
 		</a>
 
 		{#if title !== undefined}

package/dist/components/layout/PageHeader.svelte.d.ts

@@ -3,6 +3,7 @@ interface PageHeaderProps {
     homeUrl?: string;
     title?: string | null;
     logo?: string;
+    brandName?: string;
     navItems?: Snippet;
     rightContent?: Snippet;
     subnav?: Snippet;

package/dist/components/preview/ChartOutput.svelte

@@ -9,7 +9,7 @@
 		value: string;
 	}
 
-	let { item, value }: Props = $props();
+	let { item: _item, value }: Props = $props();
 
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 
@@ -177,7 +177,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded border border-border {isFullscreen
+	class="group rounded relative overflow-hidden border border-border {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -200,7 +200,9 @@
 				: ''}"
 		>
 			{#if loading}
-				<div class="rounded p-1.5 flex items-center text-muted-foreground border border-border bg-background/80 backdrop-blur-sm">
+				<div
+					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-muted-foreground"
+				>
 					<Loader size={14} class="animate-spin" />
 				</div>
 			{/if}
@@ -209,7 +211,7 @@
 				onclick={toggleFullscreen}
 				disabled={loading}
 				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-				class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+				class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{#if isFullscreen}
 					<Minimize size={14} />

package/dist/components/preview/ImageOutput.svelte

@@ -93,7 +93,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded border border-border {isFullscreen
+	class="group rounded relative overflow-hidden border border-border {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -131,7 +131,7 @@
 						onclick={handleDownload}
 						disabled={downloading}
 						title="Download image"
-						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+						class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 					>
 						<Download size={14} />
 					</button>
@@ -141,7 +141,7 @@
 					<button
 						onclick={toggleFullscreen}
 						title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background"
+						class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background"
 					>
 						{#if isFullscreen}
 							<Minimize size={14} />

package/dist/components/preview/InputControl.svelte

@@ -37,7 +37,6 @@
 		disabled = false
 	}: Props = $props();
 
-	// Stable ID — not reactive, computed once at component creation
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
 

package/dist/components/preview/OutputDisplay.svelte

@@ -103,12 +103,12 @@
 	}
 
 	const duplicatePaths = $derived.by(() => {
-		const seen = new Map<string, number>();
+		const seen: Record<string, number> = {};
 		for (const f of filesArray) {
 			const key = fullPath(f);
-			seen.set(key, (seen.get(key) ?? 0) + 1);
+			seen[key] = (seen[key] ?? 0) + 1;
 		}
-		return Array.from(seen.entries())
+		return Object.entries(seen)
 			.filter(([, n]) => n > 1)
 			.map(([path]) => path);
 	});
@@ -279,11 +279,7 @@
 					{downloadError}
 				</div>
 			{/if}
-			<Button
-				onclick={handleDownload}
-				disabled={downloading || hasDuplicates}
-				class="w-full"
-			>
+			<Button onclick={handleDownload} disabled={downloading || hasDuplicates} class="w-full">
 				{downloading
 					? 'Downloading...'
 					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}

package/dist/components/primitives/FilterableDropdown.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Search, ChevronDown, Check } from '@lucide/svelte';
+	import { cn } from '../../utils.js';
+
+	export interface FilterableDropdownItem {
+		id: string;
+		label: string;
+		icon?: Component;
+		iconClass?: string;
+		iconStyle?: string;
+	}
+
+	interface Props {
+		items: FilterableDropdownItem[];
+		value: string | null | undefined;
+		onChange: (id: string) => void;
+		id?: string;
+		placeholder?: string;
+		triggerIcon?: Component;
+		searchPlaceholder?: string;
+		searchThreshold?: number;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		items,
+		value,
+		onChange,
+		id,
+		placeholder = 'Select...',
+		triggerIcon: TriggerIcon,
+		searchPlaceholder = 'Filter...',
+		searchThreshold = 4,
+		disabled = false,
+		class: className
+	}: Props = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let highlighted = $state(0);
+	let inputRef = $state<HTMLInputElement>();
+	let containerRef = $state<HTMLDivElement>();
+
+	const selected = $derived(items.find((item) => item.id === value) ?? null);
+	const showSearch = $derived(items.length > searchThreshold);
+
+	const matches = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return items;
+		return items.filter((item) => item.label.toLowerCase().includes(q));
+	});
+
+	$effect(() => {
+		void matches;
+		highlighted = 0;
+	});
+
+	$effect(() => {
+		if (open) {
+			queueMicrotask(() => inputRef?.focus());
+		} else {
+			query = '';
+		}
+	});
+
+	function pick(item: FilterableDropdownItem) {
+		onChange(item.id);
+		open = false;
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlighted = Math.min(highlighted + 1, matches.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlighted = Math.max(highlighted - 1, 0);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const m = matches[highlighted];
+			if (m) pick(m);
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			open = false;
+		}
+	}
+
+	function handleDocClick(e: MouseEvent) {
+		if (!open) return;
+		if (containerRef && !containerRef.contains(e.target as Node)) open = false;
+	}
+
+	$effect(() => {
+		if (!open) return;
+		document.addEventListener('mousedown', handleDocClick);
+		return () => document.removeEventListener('mousedown', handleDocClick);
+	});
+
+	const SelectedIcon = $derived(selected?.icon);
+</script>
+
+<div bind:this={containerRef} class={cn('relative', className)}>
+	<button
+		type="button"
+		{id}
+		{disabled}
+		onclick={() => (open = !open)}
+		class={cn(
+			'h-10 gap-2 px-3 text-sm flex w-full items-center rounded-md border bg-background text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-2 ring-ring/30' : 'border-input hover:bg-muted/40'
+		)}
+	>
+		{#if SelectedIcon}
+			<SelectedIcon
+				class={cn('h-3.5 w-3.5 shrink-0', selected?.iconClass ?? 'text-muted-foreground')}
+				style={selected?.iconStyle}
+			/>
+		{:else if TriggerIcon}
+			<TriggerIcon class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+		{/if}
+		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
+			{selected ? selected.label : placeholder}
+		</span>
+		<ChevronDown
+			class={cn(
+				'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform',
+				open ? 'rotate-180' : ''
+			)}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="right-0 left-0 mt-1 shadow-md absolute top-full z-50 overflow-hidden rounded-md border border-border bg-popover"
+		>
+			{#if showSearch}
+				<div class="relative border-b border-border">
+					<Search
+						class="left-3 h-3.5 w-3.5 pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground"
+					/>
+					<input
+						bind:this={inputRef}
+						bind:value={query}
+						onkeydown={handleKey}
+						placeholder={searchPlaceholder}
+						class="h-8 pr-3 pl-9 text-sm w-full bg-transparent outline-none placeholder:text-muted-foreground"
+					/>
+				</div>
+			{/if}
+
+			<div class="max-h-60 overflow-y-auto">
+				{#if matches.length === 0}
+					<p class="px-3 py-3 text-xs text-center text-muted-foreground">
+						No matches for "{query}"
+					</p>
+				{:else}
+					{#each matches as item, i (item.id)}
+						{@const ItemIcon = item.icon}
+						<button
+							type="button"
+							onclick={() => pick(item)}
+							onmouseenter={() => (highlighted = i)}
+							class={cn(
+								'gap-2 px-3 py-1.5 text-sm flex w-full items-center text-left transition-colors',
+								highlighted === i ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60'
+							)}
+						>
+							{#if ItemIcon}
+								<ItemIcon
+									class={cn('h-3.5 w-3.5 shrink-0', item.iconClass ?? 'text-muted-foreground')}
+									style={item.iconStyle}
+								/>
+							{/if}
+							<span class="flex-1 truncate">{item.label}</span>
+							{#if item.id === value}
+								<Check class="h-3.5 w-3.5 shrink-0 text-primary" />
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/primitives/FilterableDropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+export interface FilterableDropdownItem {
+    id: string;
+    label: string;
+    icon?: Component;
+    iconClass?: string;
+    iconStyle?: string;
+}
+interface Props {
+    items: FilterableDropdownItem[];
+    value: string | null | undefined;
+    onChange: (id: string) => void;
+    id?: string;
+    placeholder?: string;
+    triggerIcon?: Component;
+    searchPlaceholder?: string;
+    searchThreshold?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const FilterableDropdown: Component<Props, {}, "">;
+type FilterableDropdown = ReturnType<typeof FilterableDropdown>;
+export default FilterableDropdown;

package/dist/components/primitives/index.d.ts

@@ -27,3 +27,4 @@ export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable, type DataTableColumn } from './DataTable.svelte';
+export { default as FilterableDropdown, type FilterableDropdownItem } from './FilterableDropdown.svelte';

package/dist/components/primitives/index.js

@@ -30,3 +30,4 @@ export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable } from './DataTable.svelte';
+export { default as FilterableDropdown } from './FilterableDropdown.svelte';

package/dist/components/primitives/resizable/resizable-handle.svelte

@@ -23,7 +23,7 @@
 >
 	{#if withHandle}
 		<div
-			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:bg-foreground/40 group-hover/handle:scale-y-110 group-active/handle:bg-foreground/60"
+			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:scale-y-110 group-hover/handle:bg-foreground/40 group-active/handle:bg-foreground/60"
 		></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/components/viewer/Viewer.svelte

@@ -67,7 +67,7 @@
 		} else {
 			const timer = setTimeout(() => {
 				hideButton = false;
-			}, APP_DEFAULTS.TIMEOUTS.VIEWER_INIT_DELAY);
+			}, APP_DEFAULTS.TIMEOUTS.DRAWER_ANIMATION_MS);
 			return () => clearTimeout(timer);
 		}
 	});

package/dist/compute/computeThrottle.svelte.js

@@ -1,7 +1,7 @@
 /**
  * Fallback per-solve abort timeout (ms) when the caller doesn't pass one.
- * Used only by callers without a deployment-specific limit (e.g. builder-app
- * over WebSocket); compute-app supplies `MAX_SOLVE_DURATION_MS` from its
+ * Used only by callers without a deployment-specific limit (e.g. plugin-ui
+ * over WebSocket); the selva app supplies `MAX_SOLVE_DURATION_MS` from its
  * server config via `ComputeApp`'s `solveTimeoutMs` prop.
  */
 const DEFAULT_TIMEOUT_MS = 60_000;

package/dist/constants.d.ts

@@ -8,8 +8,8 @@ export declare const APP_DEFAULTS: {
         SOLVE_STATE_DURATION: number;
         /** Parameter export callback delay (ms) */
         PARAM_EXPORT_DELAY: number;
-        /** Viewer initialization delay (ms) */
-        VIEWER_INIT_DELAY: number;
+        /** Drawer open/close animation duration (ms) — matches the CSS transition. */
+        DRAWER_ANIMATION_MS: number;
     };
     SOLVING_INDICATOR: {
         /** If solve is faster than this, don't show indicator (ms) */

package/dist/constants.js

@@ -10,8 +10,8 @@ export const APP_DEFAULTS = {
         SOLVE_STATE_DURATION: 3500,
         /** Parameter export callback delay (ms) */
         PARAM_EXPORT_DELAY: 100,
-        /** Viewer initialization delay (ms) */
-        VIEWER_INIT_DELAY: 350
+        /** Drawer open/close animation duration (ms) — matches the CSS transition. */
+        DRAWER_ANIMATION_MS: 350
     },
     // Solving indicator adaptive thresholds
     SOLVING_INDICATOR: {

package/dist/external/storage.js

@@ -3,8 +3,8 @@
 // When an input has source.kind === 'external', a producer route writes the produced
 // value here, and the solver route reads it back. Scoped per (scopeKey, inputId) so
 // values for one solver/input don't bleed into another. The scope key is whatever
-// uniquely identifies the solver context — sessionId in builder-app/preview,
-// definition guid in compute-app/library, etc.
+// uniquely identifies the solver context — sessionId in plugin-ui/preview,
+// definition guid in selva/library, etc.
 //
 // inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
 const STORAGE_PREFIX = 'external';

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export * from './external/storage';
 export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';
 export * from './utils';
+export { randomId } from './utils/randomId';
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn } from './types/solveFn';

package/dist/index.js

@@ -20,3 +20,4 @@ export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';
 // Utils (cn function)
 export * from './utils';
+export { randomId } from './utils/randomId';

package/dist/schema/param-exporter.js

@@ -1,4 +1,5 @@
 import { APP_DEFAULTS } from '../constants';
+import { randomId } from '../utils/randomId';
 function getGroups(schema) {
     if (!schema.layout)
         return [];
@@ -29,7 +30,7 @@ export function createSavedState(schema, currentValues, metadata) {
         }
     }
     return {
-        id: crypto.randomUUID(),
+        id: randomId(),
         name: metadata.name,
         description: metadata.description,
         timestamp: new Date().toISOString(),

package/dist/utils/debounce.d.ts

@@ -3,7 +3,7 @@
  * has elapsed since the last time it was invoked.
  *
  * Use for text inputs, search boxes, etc. where you want to wait for the user
- * to finish typing before executing. For sliders, use throttle() instead.
+ * to finish typing before executing.
  *
  * @param func The function to debounce
  * @param wait The delay in milliseconds

package/dist/utils/debounce.js

@@ -3,7 +3,7 @@
  * has elapsed since the last time it was invoked.
  *
  * Use for text inputs, search boxes, etc. where you want to wait for the user
- * to finish typing before executing. For sliders, use throttle() instead.
+ * to finish typing before executing.
  *
  * @param func The function to debounce
  * @param wait The delay in milliseconds

package/dist/utils/randomId.d.ts

@@ -0,0 +1 @@
+export declare function randomId(): string;

package/dist/utils/randomId.js

@@ -0,0 +1,51 @@
+// 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.
+export function randomId() {
+    const c = typeof crypto !== 'undefined' ? crypto : undefined;
+    if (c?.randomUUID)
+        return c.randomUUID();
+    if (c?.getRandomValues)
+        return uuidFromBytes(c.getRandomValues(new Uint8Array(16)));
+    return uuidFromBytes(mathRandomBytes());
+}
+function mathRandomBytes() {
+    const out = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        out[i] = Math.floor(Math.random() * 256);
+    return out;
+}
+// Format 16 bytes as a UUIDv4 string with the version + variant bits set per
+// RFC 4122 §4.4. Same shape as crypto.randomUUID() returns.
+function uuidFromBytes(bytes) {
+    bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+    bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx
+    const hex = [];
+    for (let i = 0; i < 16; i++)
+        hex.push(bytes[i].toString(16).padStart(2, '0'));
+    return (hex.slice(0, 4).join('') +
+        '-' +
+        hex.slice(4, 6).join('') +
+        '-' +
+        hex.slice(6, 8).join('') +
+        '-' +
+        hex.slice(8, 10).join('') +
+        '-' +
+        hex.slice(10, 16).join(''));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "0.9.6",
+  "version": "2.0.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -58,7 +58,8 @@
     "bits-ui": "^2.15.4",
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
-    "three": "^0.184.0"
+    "three": "^0.184.0",
+    "@selvajs/schemas": "2.0.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -74,8 +75,7 @@
     "paneforge": "^1.0.2",
     "svelte-sonner": "^1.1.1",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0",
-    "@selvajs/schemas": "1.1.1"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.1",
@@ -84,11 +84,12 @@
     "bits-ui": "^2.18.0",
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
+    "@selvajs/schemas": "2.0.0",
     "@selvajs/config": "0.0.0"
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "rm -rf dist && vite build && pnpm prepack",
+    "build": "rm -rf dist && pnpm prepack",
     "build:fast": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",
     "preview": "vite preview",

package/src/lib/components/layout/AppShell.svelte

@@ -9,6 +9,8 @@
 		homeUrl?: string;
 		title?: string | null;
 		logo?: string;
+		brandName?: string;
+		copyrightName?: string;
 		showModeToggle?: boolean;
 		navItems?: Snippet;
 		rightContent?: Snippet;
@@ -40,6 +42,8 @@
 		homeUrl = '/',
 		title = undefined,
 		logo = '/favicon/favicon.svg',
+		brandName = 'Selva',
+		copyrightName = undefined,
 		showModeToggle = true,
 		navItems,
 		rightContent,
@@ -56,6 +60,10 @@
 		children
 	}: AppShellProps = $props();
 
+	// Default the footer's copyright owner to the header's brand name when the
+	// caller didn't specify one.
+	const _copyright = $derived(copyrightName ?? brandName);
+
 	// fixed: viewport-locked, no page scroll — body owns its own scroll internally.
 	// scroll: normal page flow, footer sticks to bottom via sticky positioning.
 	const rootClass = $derived(
@@ -79,6 +87,7 @@
 			{homeUrl}
 			{title}
 			{logo}
+			{brandName}
 			{showModeToggle}
 			{navItems}
 			{rightContent}
@@ -100,7 +109,7 @@
 
 	{#if showFooter}
 		<div class="bottom-0 sticky z-10 shrink-0">
-			<PageFooter {errors} {warnings}>
+			<PageFooter {errors} {warnings} copyrightName={_copyright}>
 				{#if footerChildren}
 					{@render footerChildren()}
 				{/if}

package/src/lib/components/layout/PageFooter.svelte

@@ -10,10 +10,11 @@
 	interface Props {
 		errors?: string[];
 		warnings?: string[];
+		copyrightName?: string;
 		children?: Snippet;
 	}
 
-	let { errors = [], warnings = [], children }: Props = $props();
+	let { errors = [], warnings = [], copyrightName = 'Selva', children }: Props = $props();
 
 	let footerStore = (() => {
 		try {
@@ -217,6 +218,6 @@
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p>by Selva &copy; {_currentYear}</p>
+		<p>by {copyrightName} &copy; {_currentYear}</p>
 	</div>
 </footer>

package/src/lib/components/layout/PageHeader.svelte

@@ -6,6 +6,7 @@
 		homeUrl?: string;
 		title?: string | null;
 		logo?: string;
+		brandName?: string;
 		navItems?: Snippet;
 		rightContent?: Snippet;
 		subnav?: Snippet;
@@ -17,6 +18,7 @@
 		homeUrl = '/app',
 		title = undefined,
 		logo = '/favicon/favicon.svg',
+		brandName = 'Selva',
 		navItems,
 		rightContent,
 		subnav,
@@ -33,7 +35,7 @@
 		<!-- Logo -->
 		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">Selva</span>
+			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
 		</a>
 
 		{#if title !== undefined}

package/src/lib/components/preview/ChartOutput.svelte

@@ -9,7 +9,7 @@
 		value: string;
 	}
 
-	let { item, value }: Props = $props();
+	let { item: _item, value }: Props = $props();
 
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 
@@ -177,7 +177,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded border border-border {isFullscreen
+	class="group rounded relative overflow-hidden border border-border {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -200,7 +200,9 @@
 				: ''}"
 		>
 			{#if loading}
-				<div class="rounded p-1.5 flex items-center text-muted-foreground border border-border bg-background/80 backdrop-blur-sm">
+				<div
+					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-muted-foreground"
+				>
 					<Loader size={14} class="animate-spin" />
 				</div>
 			{/if}
@@ -209,7 +211,7 @@
 				onclick={toggleFullscreen}
 				disabled={loading}
 				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-				class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+				class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{#if isFullscreen}
 					<Minimize size={14} />

package/src/lib/components/preview/ImageOutput.svelte

@@ -93,7 +93,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded border border-border {isFullscreen
+	class="group rounded relative overflow-hidden border border-border {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -131,7 +131,7 @@
 						onclick={handleDownload}
 						disabled={downloading}
 						title="Download image"
-						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+						class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 					>
 						<Download size={14} />
 					</button>
@@ -141,7 +141,7 @@
 					<button
 						onclick={toggleFullscreen}
 						title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background"
+						class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background"
 					>
 						{#if isFullscreen}
 							<Minimize size={14} />

package/src/lib/components/preview/InputControl.svelte

@@ -37,7 +37,6 @@
 		disabled = false
 	}: Props = $props();
 
-	// Stable ID — not reactive, computed once at component creation
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
 

package/src/lib/components/preview/OutputDisplay.svelte

@@ -103,12 +103,12 @@
 	}
 
 	const duplicatePaths = $derived.by(() => {
-		const seen = new Map<string, number>();
+		const seen: Record<string, number> = {};
 		for (const f of filesArray) {
 			const key = fullPath(f);
-			seen.set(key, (seen.get(key) ?? 0) + 1);
+			seen[key] = (seen[key] ?? 0) + 1;
 		}
-		return Array.from(seen.entries())
+		return Object.entries(seen)
 			.filter(([, n]) => n > 1)
 			.map(([path]) => path);
 	});
@@ -279,11 +279,7 @@
 					{downloadError}
 				</div>
 			{/if}
-			<Button
-				onclick={handleDownload}
-				disabled={downloading || hasDuplicates}
-				class="w-full"
-			>
+			<Button onclick={handleDownload} disabled={downloading || hasDuplicates} class="w-full">
 				{downloading
 					? 'Downloading...'
 					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}

package/src/lib/components/primitives/FilterableDropdown.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Search, ChevronDown, Check } from '@lucide/svelte';
+	import { cn } from '$lib/utils.js';
+
+	export interface FilterableDropdownItem {
+		id: string;
+		label: string;
+		icon?: Component;
+		iconClass?: string;
+		iconStyle?: string;
+	}
+
+	interface Props {
+		items: FilterableDropdownItem[];
+		value: string | null | undefined;
+		onChange: (id: string) => void;
+		id?: string;
+		placeholder?: string;
+		triggerIcon?: Component;
+		searchPlaceholder?: string;
+		searchThreshold?: number;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		items,
+		value,
+		onChange,
+		id,
+		placeholder = 'Select...',
+		triggerIcon: TriggerIcon,
+		searchPlaceholder = 'Filter...',
+		searchThreshold = 4,
+		disabled = false,
+		class: className
+	}: Props = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let highlighted = $state(0);
+	let inputRef = $state<HTMLInputElement>();
+	let containerRef = $state<HTMLDivElement>();
+
+	const selected = $derived(items.find((item) => item.id === value) ?? null);
+	const showSearch = $derived(items.length > searchThreshold);
+
+	const matches = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return items;
+		return items.filter((item) => item.label.toLowerCase().includes(q));
+	});
+
+	$effect(() => {
+		void matches;
+		highlighted = 0;
+	});
+
+	$effect(() => {
+		if (open) {
+			queueMicrotask(() => inputRef?.focus());
+		} else {
+			query = '';
+		}
+	});
+
+	function pick(item: FilterableDropdownItem) {
+		onChange(item.id);
+		open = false;
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlighted = Math.min(highlighted + 1, matches.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlighted = Math.max(highlighted - 1, 0);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const m = matches[highlighted];
+			if (m) pick(m);
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			open = false;
+		}
+	}
+
+	function handleDocClick(e: MouseEvent) {
+		if (!open) return;
+		if (containerRef && !containerRef.contains(e.target as Node)) open = false;
+	}
+
+	$effect(() => {
+		if (!open) return;
+		document.addEventListener('mousedown', handleDocClick);
+		return () => document.removeEventListener('mousedown', handleDocClick);
+	});
+
+	const SelectedIcon = $derived(selected?.icon);
+</script>
+
+<div bind:this={containerRef} class={cn('relative', className)}>
+	<button
+		type="button"
+		{id}
+		{disabled}
+		onclick={() => (open = !open)}
+		class={cn(
+			'h-10 gap-2 px-3 text-sm flex w-full items-center rounded-md border bg-background text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-2 ring-ring/30' : 'border-input hover:bg-muted/40'
+		)}
+	>
+		{#if SelectedIcon}
+			<SelectedIcon
+				class={cn('h-3.5 w-3.5 shrink-0', selected?.iconClass ?? 'text-muted-foreground')}
+				style={selected?.iconStyle}
+			/>
+		{:else if TriggerIcon}
+			<TriggerIcon class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+		{/if}
+		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
+			{selected ? selected.label : placeholder}
+		</span>
+		<ChevronDown
+			class={cn(
+				'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform',
+				open ? 'rotate-180' : ''
+			)}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="right-0 left-0 mt-1 shadow-md absolute top-full z-50 overflow-hidden rounded-md border border-border bg-popover"
+		>
+			{#if showSearch}
+				<div class="relative border-b border-border">
+					<Search
+						class="left-3 h-3.5 w-3.5 pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground"
+					/>
+					<input
+						bind:this={inputRef}
+						bind:value={query}
+						onkeydown={handleKey}
+						placeholder={searchPlaceholder}
+						class="h-8 pr-3 pl-9 text-sm w-full bg-transparent outline-none placeholder:text-muted-foreground"
+					/>
+				</div>
+			{/if}
+
+			<div class="max-h-60 overflow-y-auto">
+				{#if matches.length === 0}
+					<p class="px-3 py-3 text-xs text-center text-muted-foreground">
+						No matches for "{query}"
+					</p>
+				{:else}
+					{#each matches as item, i (item.id)}
+						{@const ItemIcon = item.icon}
+						<button
+							type="button"
+							onclick={() => pick(item)}
+							onmouseenter={() => (highlighted = i)}
+							class={cn(
+								'gap-2 px-3 py-1.5 text-sm flex w-full items-center text-left transition-colors',
+								highlighted === i ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60'
+							)}
+						>
+							{#if ItemIcon}
+								<ItemIcon
+									class={cn('h-3.5 w-3.5 shrink-0', item.iconClass ?? 'text-muted-foreground')}
+									style={item.iconStyle}
+								/>
+							{/if}
+							<span class="flex-1 truncate">{item.label}</span>
+							{#if item.id === value}
+								<Check class="h-3.5 w-3.5 shrink-0 text-primary" />
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/src/lib/components/primitives/index.ts

@@ -39,3 +39,7 @@ export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable, type DataTableColumn } from './DataTable.svelte';
+export {
+	default as FilterableDropdown,
+	type FilterableDropdownItem
+} from './FilterableDropdown.svelte';

package/src/lib/components/primitives/resizable/resizable-handle.svelte

@@ -23,7 +23,7 @@
 >
 	{#if withHandle}
 		<div
-			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:bg-foreground/40 group-hover/handle:scale-y-110 group-active/handle:bg-foreground/60"
+			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:scale-y-110 group-hover/handle:bg-foreground/40 group-active/handle:bg-foreground/60"
 		></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/src/lib/components/viewer/Viewer.svelte

@@ -67,7 +67,7 @@
 		} else {
 			const timer = setTimeout(() => {
 				hideButton = false;
-			}, APP_DEFAULTS.TIMEOUTS.VIEWER_INIT_DELAY);
+			}, APP_DEFAULTS.TIMEOUTS.DRAWER_ANIMATION_MS);
 			return () => clearTimeout(timer);
 		}
 	});

package/src/lib/compute/computeThrottle.svelte.ts

@@ -12,8 +12,8 @@ interface ComputeThrottleOptions {
 
 /**
  * Fallback per-solve abort timeout (ms) when the caller doesn't pass one.
- * Used only by callers without a deployment-specific limit (e.g. builder-app
- * over WebSocket); compute-app supplies `MAX_SOLVE_DURATION_MS` from its
+ * Used only by callers without a deployment-specific limit (e.g. plugin-ui
+ * over WebSocket); the selva app supplies `MAX_SOLVE_DURATION_MS` from its
  * server config via `ComputeApp`'s `solveTimeoutMs` prop.
  */
 const DEFAULT_TIMEOUT_MS = 60_000;

package/src/lib/constants.ts

@@ -11,8 +11,8 @@ export const APP_DEFAULTS = {
 		SOLVE_STATE_DURATION: 3500,
 		/** Parameter export callback delay (ms) */
 		PARAM_EXPORT_DELAY: 100,
-		/** Viewer initialization delay (ms) */
-		VIEWER_INIT_DELAY: 350
+		/** Drawer open/close animation duration (ms) — matches the CSS transition. */
+		DRAWER_ANIMATION_MS: 350
 	},
 
 	// Solving indicator adaptive thresholds

package/src/lib/external/storage.ts

@@ -3,8 +3,8 @@
 // When an input has source.kind === 'external', a producer route writes the produced
 // value here, and the solver route reads it back. Scoped per (scopeKey, inputId) so
 // values for one solver/input don't bleed into another. The scope key is whatever
-// uniquely identifies the solver context — sessionId in builder-app/preview,
-// definition guid in compute-app/library, etc.
+// uniquely identifies the solver context — sessionId in plugin-ui/preview,
+// definition guid in selva/library, etc.
 //
 // inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
 

package/src/lib/index.ts

@@ -28,6 +28,7 @@ export * from './composables/useFooterItem.svelte';
 
 // Utils (cn function)
 export * from './utils';
+export { randomId } from './utils/randomId';
 
 // UI-specific runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';

package/src/lib/schema/param-exporter.ts

@@ -1,4 +1,5 @@
 import { APP_DEFAULTS } from '../constants';
+import { randomId } from '../utils/randomId';
 import type {
 	UISchema,
 	ParameterPreset,
@@ -44,7 +45,7 @@ export function createSavedState(
 	}
 
 	return {
-		id: crypto.randomUUID(),
+		id: randomId(),
 		name: metadata.name,
 		description: metadata.description,
 		timestamp: new Date().toISOString(),

package/src/lib/utils/debounce.ts

@@ -3,7 +3,7 @@
  * has elapsed since the last time it was invoked.
  *
  * Use for text inputs, search boxes, etc. where you want to wait for the user
- * to finish typing before executing. For sliders, use throttle() instead.
+ * to finish typing before executing.
  *
  * @param func The function to debounce
  * @param wait The delay in milliseconds

package/src/lib/utils/randomId.ts

@@ -0,0 +1,52 @@
+// 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.
+export function randomId(): string {
+	const c = typeof crypto !== 'undefined' ? crypto : undefined;
+	if (c?.randomUUID) return c.randomUUID();
+	if (c?.getRandomValues) return uuidFromBytes(c.getRandomValues(new Uint8Array(16)));
+	return uuidFromBytes(mathRandomBytes());
+}
+
+function mathRandomBytes(): Uint8Array {
+	const out = new Uint8Array(16);
+	for (let i = 0; i < 16; i++) out[i] = Math.floor(Math.random() * 256);
+	return out;
+}
+
+// Format 16 bytes as a UUIDv4 string with the version + variant bits set per
+// RFC 4122 §4.4. Same shape as crypto.randomUUID() returns.
+function uuidFromBytes(bytes: Uint8Array): string {
+	bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+	bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx
+
+	const hex: string[] = [];
+	for (let i = 0; i < 16; i++) hex.push(bytes[i].toString(16).padStart(2, '0'));
+	return (
+		hex.slice(0, 4).join('') +
+		'-' +
+		hex.slice(4, 6).join('') +
+		'-' +
+		hex.slice(6, 8).join('') +
+		'-' +
+		hex.slice(8, 10).join('') +
+		'-' +
+		hex.slice(10, 16).join('')
+	);
+}