@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.2

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

@@ -83,60 +83,31 @@
 	{/if}
 {/snippet}
 
-<Tabs.Content value={tab.id} class="min-h-0 p-0 flex-1">
-	<ScrollArea class="h-full" orientation="vertical">
-		<div class="p-4 tab-content-container">
-			{#if visibleGroups.length === 0}
-				<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
-			{:else}
-				<div class="gap-8 flex flex-col">
-					{#each visibleGroups as group (group.id)}
-						<Group
-							label={group.label}
-							description={group.description}
-							items={group.items}
-							columns={group.columns ?? 1}
-							collapsed={collapsedGroups[group.id] ?? false}
-							{values}
-							onToggle={() => onToggleGroup(group.id)}
-							inputSnippet={renderInput}
-							outputSnippet={renderOutput}
-							flat={visibleGroups.length === 1}
-						/>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	</ScrollArea>
+<Tabs.Content value={tab.id} class="min-h-0">
+	<div class="h-full bg-muted dark:bg-background">
+		<ScrollArea class="h-full" orientation="vertical">
+			<div class="px-3">
+				{#if visibleGroups.length === 0}
+					<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
+				{:else}
+					<div class="gap-3 py-3 flex flex-col">
+						{#each visibleGroups as group (group.id)}
+							<Group
+								label={group.label}
+								description={group.description}
+								items={group.items}
+								columns={group.columns ?? 1}
+								collapsed={collapsedGroups[group.id] ?? false}
+								{values}
+								onToggle={() => onToggleGroup(group.id)}
+								inputSnippet={renderInput}
+								outputSnippet={renderOutput}
+								flat={visibleGroups.length === 1}
+							/>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</ScrollArea>
+	</div>
 </Tabs.Content>
-
-<style>
-	.tab-content-container {
-		container-type: inline-size;
-	}
-
-	@container (max-width: 320px) {
-		:global(.schema-grid) {
-			grid-template-columns: 1fr;
-		}
-	}
-	@container (min-width: 321px) and (max-width: 560px) {
-		:global(.schema-grid) {
-			grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
-		}
-	}
-
-	/* Fallback for browsers without container query support */
-	@supports not (container-type: inline-size) {
-		@media (max-width: 639px) {
-			:global(.schema-grid) {
-				grid-template-columns: 1fr;
-			}
-		}
-		@media (min-width: 640px) and (max-width: 1023px) {
-			:global(.schema-grid) {
-				grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
-			}
-		}
-	}
-</style>

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

@@ -66,10 +66,10 @@
 	}
 </script>
 
-<Card.Root class="pt-1 min-h-0 mx-1 flex flex-1 flex-col overflow-hidden">
-	<Tabs.Root value={activeTabId} class="gap-0 min-h-0 flex flex-1 flex-col">
+<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+	<Tabs.Root value={activeTabId} variant="line" class="min-h-0 flex-1">
 		{#if showTabBar}
-			<TabBar tabs={visibleTabs} onTabChange={handleTabChange} />
+			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} />
 		{/if}
 
 		{#each visibleTabs as tab (tab.id)}

package/src/lib/components/preview/inputs/CheckboxInput.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SupportedTypes } from '@selvajs/schemas';
 	import { Checkbox } from '$lib/components/primitives/checkbox';
-	import * as Field from '$lib/components/primitives/field';
 
 	interface Props {
 		inputId: string;
 		value?: boolean;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
+		/** Rendered beside the box; must contain a label pointing at `inputId`. */
+		children?: Snippet;
 	}
 
-	let { inputId, value = $bindable(), onChange, disabled = false }: Props = $props();
+	let { inputId, value = $bindable(), onChange, disabled = false, children }: Props = $props();
 </script>
 
-<Field.Field orientation="horizontal">
+<div class="gap-2.5 min-h-6 min-w-0 flex items-center">
 	<Checkbox
 		id={inputId}
 		checked={typeof value === 'boolean' ? value : false}
@@ -23,7 +25,5 @@
 		}}
 		{disabled}
 	/>
-	<Field.Label for={inputId} class="font-normal cursor-pointer text-muted-foreground">
-		Enabled
-	</Field.Label>
-</Field.Field>
+	{@render children?.()}
+</div>

package/src/lib/components/preview/inputs/ColorInput.svelte

@@ -11,7 +11,7 @@
 	<input
 		type="color"
 		value={value || '#000000'}
-		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background"
+		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background dark:bg-input/30"
 		onchange={(e) => {
 			const newValue = (e.currentTarget as HTMLInputElement).value;
 			onChange(newValue);

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -257,7 +257,7 @@
 	const acceptAttribute = $derived(acceptedFormats.length > 0 ? acceptedFormats.join(',') : '*');
 </script>
 
-<div class="gap-4 flex w-full flex-col">
+<div class="gap-2.5 flex w-full flex-col">
 	<input
 		bind:this={fileInput}
 		type="file"
@@ -267,15 +267,16 @@
 	/>
 
 	{#if showToggle}
-		<div class="rounded text-xs flex overflow-hidden border">
+		<div class="p-0.5 text-xs flex rounded-md bg-muted">
 			{#each effectiveModes as mode (mode)}
 				<button
 					type="button"
 					onclick={() => (activeMode = mode)}
-					class={`px-3 py-1 flex-1 transition-colors ${
+					aria-pressed={activeMode === mode}
+					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
 						activeMode === mode
-							? 'bg-primary text-primary-foreground'
-							: 'text-muted-foreground hover:bg-accent'
+							? 'shadow-xs bg-background text-foreground'
+							: 'text-muted-foreground hover:text-foreground'
 					}`}
 				>
 					{mode === 'upload' ? 'Upload' : 'URL'}
@@ -286,7 +287,7 @@
 
 	{#if activeMode === 'url'}
 		<div class="gap-2 flex flex-col">
-			<Label for="url-input" class="gap-2 flex items-center">
+			<Label for="url-input">
 				<Link size={16} />
 				File URL
 			</Label>
@@ -297,7 +298,7 @@
 					bind:value={urlInput}
 					placeholder="https://example.com/model.3dm"
 					disabled={isLoading}
-					class={urlError ? 'border-destructive focus-visible:ring-destructive' : ''}
+					aria-invalid={urlError ? true : undefined}
 					oninput={() => {
 						urlError = null;
 						urlSuccess = '';
@@ -342,14 +343,10 @@
 		</div>
 	{:else}
 		<div class="gap-2 flex flex-col">
-			<Label for="file-upload" class="gap-2 flex items-center">
-				<FileUp size={16} />
-				Upload File
-			</Label>
 			<Button
 				type="button"
-				variant="outline"
-				class="gap-2 w-full {isDragging ? 'border-primary' : ''}"
+				variant={isDragging ? 'secondary' : 'outline'}
+				class="w-full"
 				onclick={openFilePicker}
 				ondragover={handleDragOver}
 				ondragleave={handleDragLeave}

package/src/lib/components/preview/inputs/NumberInput.svelte

@@ -3,6 +3,8 @@
 	import { debounce } from '$lib/utils/debounce';
 	import { Input } from '$lib/components/primitives/input';
 	import { Slider } from '$lib/components/primitives/slider';
+	import * as InputGroup from '$lib/components/primitives/input-group';
+	import { Separator } from '$lib/components/primitives/separator';
 	import * as Field from '$lib/components/primitives/field';
 
 	interface Props {
@@ -16,8 +18,6 @@
 	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
 
 	let validationError = $state<string | null>(null);
-	let sliderEditing = $state(false);
-	let sliderInputValue = $state('');
 
 	const min = $derived(config?.minimum ?? 0);
 	const max = $derived(config?.maximum ?? 100);
@@ -49,72 +49,53 @@
 		commitSliderDebounced(newValue);
 	}
 
-	function focusSliderInput(node: HTMLInputElement) {
-		node.focus();
-		node.select();
-	}
+	const decimals = $derived(Math.max(0, -Math.floor(Math.log10(step))));
 
-	function decimalPlaces(stepSize: number): number {
-		return Math.max(0, -Math.floor(Math.log10(stepSize)));
+	function commitTypedValue(input: HTMLInputElement) {
+		const parsed = parseFloat(input.value);
+		if (isNaN(parsed)) {
+			input.value = numValue.toFixed(decimals);
+			return;
+		}
+		const clamped = Math.min(max, Math.max(min, parsed));
+		input.value = clamped.toFixed(decimals);
+		if (clamped === value) return;
+		value = clamped;
+		onChange(clamped);
 	}
 </script>
 
 {#if config?.renderAsSlider}
-	{@const dp = decimalPlaces(step)}
-	<div class="gap-4 flex items-center">
-		<Slider
-			type="single"
-			value={numValue}
+	<!-- Value and track share one box, the height of a number input, so mixed rows line up and
+	     a value can't be read as belonging to the neighbouring slider. -->
+	<InputGroup.Root>
+		<InputGroup.Input
+			id={inputId}
+			type="number"
+			class="w-18 flex-none"
+			value={numValue.toFixed(decimals)}
 			{min}
 			{max}
 			{step}
-			class="flex-1"
-			onValueChange={handleSliderChange}
 			{disabled}
+			onchange={(e) => commitTypedValue(e.currentTarget)}
+			onkeydown={(e) => {
+				if (e.key === 'Enter') e.currentTarget.blur();
+			}}
 		/>
-		{#if sliderEditing}
-			<input
-				use:focusSliderInput
-				type="number"
+		<Separator orientation="vertical" />
+		<div class="px-3.5 min-w-0 flex flex-1 items-center">
+			<Slider
+				type="single"
+				value={numValue}
+				{min}
+				{max}
 				{step}
-				class="min-w-12 w-16 text-sm border-b border-border bg-transparent text-right outline-none focus:border-foreground"
-				bind:value={sliderInputValue}
-				onblur={() => {
-					const parsed = parseFloat(sliderInputValue);
-					if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
-					sliderEditing = false;
-				}}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') {
-						const parsed = parseFloat(sliderInputValue);
-						if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
-						sliderEditing = false;
-					} else if (e.key === 'Escape') {
-						sliderEditing = false;
-					}
-				}}
+				onValueChange={handleSliderChange}
+				{disabled}
 			/>
-		{:else}
-			<span
-				role="button"
-				tabindex={0}
-				class="min-w-12 text-sm cursor-text text-right text-muted-foreground select-none"
-				title="Double-click to edit"
-				ondblclick={() => {
-					sliderInputValue = numValue.toFixed(dp);
-					sliderEditing = true;
-				}}
-				onkeydown={(e) => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						sliderInputValue = numValue.toFixed(dp);
-						sliderEditing = true;
-					}
-				}}
-			>
-				{numValue.toFixed(dp)}
-			</span>
-		{/if}
-	</div>
+		</div>
+	</InputGroup.Root>
 {:else}
 	<Input
 		id={inputId}
@@ -126,7 +107,6 @@
 		placeholder={config?.placeholder}
 		data-invalid={validationError ? true : undefined}
 		aria-invalid={validationError ? true : undefined}
-		class={validationError ? 'border-destructive' : ''}
 		{disabled}
 		oninput={() => (validationError = null)}
 		onchange={(e) => {

package/src/lib/components/preview/inputs/TextInput.svelte

@@ -51,7 +51,6 @@
 	maxlength={config?.maxLength}
 	data-invalid={validationError ? true : undefined}
 	aria-invalid={validationError ? true : undefined}
-	class={validationError ? 'border-destructive' : ''}
 	{disabled}
 	oninput={() => {
 		validationError = null;

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

@@ -24,7 +24,7 @@
 		disabled={!hasPendingChanges && !isSolving}
 		aria-busy={isSolving}
 		class="gap-2 font-medium w-full transition-all duration-200
-			{hasPendingChanges && !isSolving ? 'selva-pending-pulse shadow-md' : ''}
+			{hasPendingChanges && !isSolving ? 'shadow-md' : ''}
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
 	>
 		{#if isSolving}

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { type VariantProps, tv } from 'tailwind-variants';
-	import { Info, TriangleAlert, CircleCheck, CircleX, Lightbulb } from '@lucide/svelte';
 	import type { Component } from 'svelte';
+	import { SEVERITY_ICON, SEVERITY_TEXT, type Severity } from './severity';
 
 	export const calloutVariants = tv({
 		base: 'flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm',
@@ -19,20 +19,12 @@
 
 	export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
 
-	const TONE_ICON: Record<CalloutTone, Component> = {
-		info: Info,
-		tip: Lightbulb,
-		success: CircleCheck,
-		warning: TriangleAlert,
-		danger: CircleX
-	};
-
-	const TONE_ACCENT: Record<CalloutTone, string> = {
-		info: 'text-info',
-		tip: 'text-muted-foreground',
-		success: 'text-success',
-		warning: 'text-warning',
-		danger: 'text-destructive'
+	const TONE_SEVERITY: Record<CalloutTone, Severity> = {
+		info: 'info',
+		tip: 'note',
+		success: 'success',
+		warning: 'warning',
+		danger: 'error'
 	};
 </script>
 
@@ -51,7 +43,8 @@
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
 
-	const Icon = $derived(icon === undefined ? TONE_ICON[tone] : icon);
+	const Icon = $derived(icon === undefined ? SEVERITY_ICON[TONE_SEVERITY[tone]] : icon);
+	const accent = $derived(SEVERITY_TEXT[TONE_SEVERITY[tone]]);
 </script>
 
 <div
@@ -60,11 +53,11 @@
 	{...restProps}
 >
 	{#if Icon}
-		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', TONE_ACCENT[tone])} />
+		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
 	<div class="min-w-0 space-y-1">
 		{#if title}
-			<p class={cn('leading-tight font-medium', TONE_ACCENT[tone])}>{title}</p>
+			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
 		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
 			{@render children()}

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

@@ -22,17 +22,16 @@
 	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`}>
+<div class={`divide-y rounded-lg border ${className}`} style:--table-cols={gridTemplate}>
 	<div
-		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid bg-muted/40 text-muted-foreground uppercase"
-		style:grid-template-columns={gridTemplate}
+		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid grid-cols-(--table-cols) bg-muted/40 text-muted-foreground uppercase"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>
 		{/each}
 	</div>
 	{#each rows as item (getKey(item))}
-		<div class="gap-4 px-4 py-3 grid items-center" style:grid-template-columns={gridTemplate}>
+		<div class="gap-4 px-4 py-3 grid grid-cols-(--table-cols) items-center">
 			{@render row(item)}
 		</div>
 	{/each}

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

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
-	import { Search, ChevronDown, Check } from '@lucide/svelte';
+	import { ChevronDown } from '@lucide/svelte';
 	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from './button';
+	import * as Popover from './popover';
+	import * as Command from './command';
 
 	export interface FilterableDropdownItem {
 		id: string;
 		label: string;
 		icon?: Component;
 		iconClass?: string;
-		iconStyle?: string;
 	}
 
 	interface Props {
@@ -19,6 +21,7 @@
 		placeholder?: string;
 		triggerIcon?: Component;
 		searchPlaceholder?: string;
+		/** Above this many items the list gets a filter box. */
 		searchThreshold?: number;
 		disabled?: boolean;
 		class?: string;
@@ -38,149 +41,59 @@
 	}: 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 = '';
-		}
-	});
+	const SelectedIcon = $derived(selected?.icon ?? TriggerIcon);
 
 	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"
+<Popover.Root bind:open>
+	<Popover.Trigger
 		{id}
 		{disabled}
-		onclick={() => (open = !open)}
+		role="combobox"
+		aria-expanded={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'
+			buttonVariants({ variant: 'outline' }),
+			'font-normal w-full justify-start',
+			className
 		)}
 	>
 		{#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" />
+			<SelectedIcon class={cn('size-3.5', selected?.iconClass ?? 'text-muted-foreground')} />
 		{/if}
-		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
+		<span class={cn('min-w-0 flex-1 truncate text-left', !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>
+		<ChevronDown class="size-3.5 text-muted-foreground" />
+	</Popover.Trigger>
+	<Popover.Content align="start" class="p-0 w-(--bits-popover-anchor-width)">
+		<Command.Root>
+			{#if items.length > searchThreshold}
+				<Command.Input placeholder={searchPlaceholder} />
 			{/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>
+			<Command.List>
+				<Command.Empty>No matches.</Command.Empty>
+				{#each items as item (item.id)}
+					{@const ItemIcon = item.icon}
+					<!-- Filter on the label; the id is only the key. -->
+					<Command.Item
+						value={item.id}
+						keywords={[item.label]}
+						data-checked={item.id === value}
+						onSelect={() => pick(item)}
+					>
+						{#if ItemIcon}
+							<ItemIcon class={cn('size-3.5', item.iconClass ?? 'text-muted-foreground')} />
+						{/if}
+						<span class="truncate">{item.label}</span>
+					</Command.Item>
+				{/each}
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>