@selvajs/ui 0.9.6 → 0.10.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

@@ -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

@@ -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(
+			'bg-background flex h-10 w-full items-center gap-2 rounded-md border px-3 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-ring/30 ring-2' : '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="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+		{/if}
+		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
+			{selected ? selected.label : placeholder}
+		</span>
+		<ChevronDown
+			class={cn(
+				'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+				open ? 'rotate-180' : ''
+			)}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="border-border bg-popover absolute top-full right-0 left-0 z-50 mt-1 overflow-hidden rounded-md border shadow-md"
+		>
+			{#if showSearch}
+				<div class="border-border relative border-b">
+					<Search
+						class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2"
+					/>
+					<input
+						bind:this={inputRef}
+						bind:value={query}
+						onkeydown={handleKey}
+						placeholder={searchPlaceholder}
+						class="placeholder:text-muted-foreground h-8 w-full bg-transparent pr-3 pl-9 text-sm outline-none"
+					/>
+				</div>
+			{/if}
+
+			<div class="max-h-60 overflow-y-auto">
+				{#if matches.length === 0}
+					<p class="text-muted-foreground px-3 py-3 text-center text-xs">
+						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(
+								'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm 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="text-primary h-3.5 w-3.5 shrink-0" />
+							{/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "0.9.6",
+  "version": "0.10.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -75,7 +75,7 @@
     "svelte-sonner": "^1.1.1",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
-    "@selvajs/schemas": "1.1.1"
+    "@selvajs/schemas": "1.2.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.1",

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

@@ -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

@@ -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(
+			'bg-background flex h-10 w-full items-center gap-2 rounded-md border px-3 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-ring/30 ring-2' : '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="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+		{/if}
+		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
+			{selected ? selected.label : placeholder}
+		</span>
+		<ChevronDown
+			class={cn(
+				'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+				open ? 'rotate-180' : ''
+			)}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="border-border bg-popover absolute top-full right-0 left-0 z-50 mt-1 overflow-hidden rounded-md border shadow-md"
+		>
+			{#if showSearch}
+				<div class="border-border relative border-b">
+					<Search
+						class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2"
+					/>
+					<input
+						bind:this={inputRef}
+						bind:value={query}
+						onkeydown={handleKey}
+						placeholder={searchPlaceholder}
+						class="placeholder:text-muted-foreground h-8 w-full bg-transparent pr-3 pl-9 text-sm outline-none"
+					/>
+				</div>
+			{/if}
+
+			<div class="max-h-60 overflow-y-auto">
+				{#if matches.length === 0}
+					<p class="text-muted-foreground px-3 py-3 text-center text-xs">
+						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(
+								'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm 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="text-primary h-3.5 w-3.5 shrink-0" />
+							{/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/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/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