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

package/dist/components/primitives/DataTable.svelte

@@ -3,6 +3,8 @@
 		label: string;
 		width?: string;
 		align?: 'left' | 'right';
+		/** Drop the column below 640px, where fixed widths would crush the flexible one. */
+		hideOnMobile?: boolean;
 	}
 </script>
 
@@ -19,21 +21,52 @@
 
 	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
 
-	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+	// `minmax(0, …)` so a long name truncates rather than widening its row past the others.
+	const toTemplate = (cols: DataTableColumn[]) =>
+		cols.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+	const gridTemplate = $derived(toTemplate(columns));
+	const mobileTemplate = $derived(toTemplate(columns.filter((c) => !c.hideOnMobile)));
+	// Cells come from the caller's snippet, so they're hidden by position.
+	const hiddenCols = $derived(
+		columns
+			.map((c, i) => (c.hideOnMobile ? `hide-col-${i + 1}` : ''))
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`}>
+<div
+	class={`divide-y rounded-lg border ${className}`}
+	style:--table-cols={gridTemplate}
+	style:--table-cols-sm={mobileTemplate}
+>
 	<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="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted/40 text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#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="data-table-row gap-4 px-4 py-3 sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) items-center {hiddenCols}"
+		>
 			{@render row(item)}
 		</div>
 	{/each}
 </div>
+
+<style>
+	@media (max-width: 639px) {
+		:global(.data-table-row.hide-col-1 > :nth-child(1)),
+		:global(.data-table-row.hide-col-2 > :nth-child(2)),
+		:global(.data-table-row.hide-col-3 > :nth-child(3)),
+		:global(.data-table-row.hide-col-4 > :nth-child(4)),
+		:global(.data-table-row.hide-col-5 > :nth-child(5)),
+		:global(.data-table-row.hide-col-6 > :nth-child(6)),
+		:global(.data-table-row.hide-col-7 > :nth-child(7)),
+		:global(.data-table-row.hide-col-8 > :nth-child(8)) {
+			display: none;
+		}
+	}
+</style>

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

@@ -2,6 +2,8 @@ export interface DataTableColumn {
     label: string;
     width?: string;
     align?: 'left' | 'right';
+    /** Drop the column below 640px, where fixed widths would crush the flexible one. */
+    hideOnMobile?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {

package/dist/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 '../../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>

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

@@ -4,7 +4,6 @@ export interface FilterableDropdownItem {
     label: string;
     icon?: Component;
     iconClass?: string;
-    iconStyle?: string;
 }
 interface Props {
     items: FilterableDropdownItem[];
@@ -14,6 +13,7 @@ interface Props {
     placeholder?: string;
     triggerIcon?: Component;
     searchPlaceholder?: string;
+    /** Above this many items the list gets a filter box. */
     searchThreshold?: number;
     disabled?: boolean;
     class?: string;

package/dist/components/primitives/IssueList.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	import type { Severity } from './severity';
+
+	export interface Issue {
+		severity: Severity;
+		message: string;
+		/** A second, quieter line: expected vs actual, a path, a hint. */
+		detail?: string;
+		/** What raised it, such as the component's nickname. */
+		source?: string;
+		/** How many times the same message came in; shown as ×n above 1. */
+		count?: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import SeverityIcon from './SeverityIcon.svelte';
+
+	interface Props {
+		issues: readonly Issue[];
+		/** `boxed` draws a bordered, divided list; `plain` is for surfaces that already have a frame. */
+		variant?: 'boxed' | 'plain';
+		class?: string;
+	}
+
+	let { issues, variant = 'boxed', class: className }: Props = $props();
+</script>
+
+<ul
+	class={cn(
+		'text-sm',
+		variant === 'boxed' ? 'divide-y rounded-lg border' : 'gap-2 flex flex-col',
+		className
+	)}
+>
+	{#each issues as issue, i (i)}
+		<li class={cn('gap-2 flex items-start', variant === 'boxed' && 'px-3 py-2')}>
+			<SeverityIcon severity={issue.severity} class="mt-0.5" />
+			<div class="min-w-0 flex-1">
+				<p class="wrap-anywhere">
+					{issue.message}
+					{#if issue.count && issue.count > 1}
+						<span class="ml-1 text-xs text-muted-foreground tabular-nums">×{issue.count}</span>
+					{/if}
+				</p>
+				{#if issue.source}
+					<p class="text-xs text-muted-foreground">{issue.source}</p>
+				{/if}
+				{#if issue.detail}
+					<p class="mt-0.5 text-xs wrap-anywhere text-muted-foreground">{issue.detail}</p>
+				{/if}
+			</div>
+		</li>
+	{/each}
+</ul>

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

@@ -0,0 +1,20 @@
+import type { Severity } from './severity';
+export interface Issue {
+    severity: Severity;
+    message: string;
+    /** A second, quieter line: expected vs actual, a path, a hint. */
+    detail?: string;
+    /** What raised it, such as the component's nickname. */
+    source?: string;
+    /** How many times the same message came in; shown as ×n above 1. */
+    count?: number;
+}
+interface Props {
+    issues: readonly Issue[];
+    /** `boxed` draws a bordered, divided list; `plain` is for surfaces that already have a frame. */
+    variant?: 'boxed' | 'plain';
+    class?: string;
+}
+declare const IssueList: import("svelte").Component<Props, {}, "">;
+type IssueList = ReturnType<typeof IssueList>;
+export default IssueList;

package/dist/components/primitives/SeverityIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import { SEVERITY_ICON, SEVERITY_TEXT, type Severity } from './severity';
+
+	interface Props {
+		severity: Severity;
+		class?: string;
+	}
+
+	let { severity, class: className }: Props = $props();
+
+	const Icon = $derived(SEVERITY_ICON[severity]);
+</script>
+
+<Icon class={cn('size-4 shrink-0', SEVERITY_TEXT[severity], className)} aria-hidden="true" />

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

@@ -0,0 +1,8 @@
+import { type Severity } from './severity';
+interface Props {
+    severity: Severity;
+    class?: string;
+}
+declare const SeverityIcon: import("svelte").Component<Props, {}, "">;
+type SeverityIcon = ReturnType<typeof SeverityIcon>;
+export default SeverityIcon;

package/dist/components/primitives/SolvingIndicator.svelte

@@ -3,57 +3,58 @@
 
 	interface Props {
 		show: boolean;
+		/**
+		 * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
+		 * icon button, for a narrow host whose corner holds its content and whose action row
+		 * already reserves the chip's place. Both say Esc aborts, as every host does.
+		 */
+		placement?: 'floating' | 'inline';
 	}
 
-	let { show }: Props = $props();
+	let { show, placement = 'floating' }: Props = $props();
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
 </script>
 
-{#if show}
-	<div
-		class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl fixed z-50 flex animate-[selva-slideInLeft_0.2s_ease-out] items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground"
-	>
-		<div class="h-5 w-5 relative flex shrink-0 items-center justify-center">
-			<div
-				class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
-			></div>
+<!-- The live region stays mounted: a screen reader only announces text that changes inside a
+     region it already knows about, so one created together with its text says nothing. -->
+<div
+	role="status"
+	aria-live="polite"
+	aria-atomic="true"
+	class={placement === 'inline' ? 'h-10 gap-3 min-w-0 flex items-center' : undefined}
+>
+	{#if show && placement === 'inline'}
+		<div
+			class="gap-2 px-3 h-10 text-sm font-semibold flex shrink-0 items-center rounded-md bg-primary text-primary-foreground"
+		>
 			<div
 				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+				aria-hidden="true"
 			></div>
+			{t.solvingEllipsis}
 		</div>
-		<div class="leading-tight flex flex-col">
-			<span class="text-sm font-semibold">{t.solving}</span>
-			<span class="text-xs opacity-70">{t.solvingSubtitle}</span>
+		<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
+			{t.solveMessagesEscHint}
+		</span>
+	{:else if show}
+		<div
+			class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl animate-in fade-in slide-in-from-left fixed z-50 flex items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground duration-200"
+		>
+			<div class="h-5 w-5 relative flex shrink-0 items-center justify-center" aria-hidden="true">
+				<div
+					class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
+				></div>
+				<div
+					class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+				></div>
+			</div>
+			<div class="leading-tight flex flex-col">
+				<span class="text-sm font-semibold">{t.solving}</span>
+				<span class="text-xs opacity-70" data-testid="solve-esc-hint">{t.solveMessagesEscHint}</span
+				>
+			</div>
 		</div>
-	</div>
-{/if}
-
-<style>
-	@keyframes selva-slideInLeft {
-		from {
-			transform: translateX(-110%);
-			opacity: 0;
-		}
-		to {
-			transform: translateX(0);
-			opacity: 1;
-		}
-	}
-
-	@keyframes selva-sweep {
-		0% {
-			width: 0%;
-			margin-left: 0%;
-		}
-		50% {
-			width: 60%;
-			margin-left: 20%;
-		}
-		100% {
-			width: 0%;
-			margin-left: 100%;
-		}
-	}
-</style>
+	{/if}
+</div>

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

@@ -1,5 +1,11 @@
 interface Props {
     show: boolean;
+    /**
+     * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
+     * icon button, for a narrow host whose corner holds its content and whose action row
+     * already reserves the chip's place. Both say Esc aborts, as every host does.
+     */
+    placement?: 'floating' | 'inline';
 }
 declare const SolvingIndicator: import("svelte").Component<Props, {}, "">;
 type SolvingIndicator = ReturnType<typeof SolvingIndicator>;

package/dist/components/primitives/StateDisplay.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
-	import { Loader, AlertCircle, AlertTriangle, Inbox } from '@lucide/svelte';
-	import * as Card from './card';
+	import { Inbox } from '@lucide/svelte';
+	import { cn } from '../../utils.js';
+	import * as Empty from './empty';
+	import { Spinner } from './spinner';
+	import SeverityIcon from './SeverityIcon.svelte';
 
 	interface StateDisplayProps {
 		type: 'loading' | 'error' | 'warning' | 'empty';
@@ -18,89 +21,26 @@
 		class: className = ''
 	}: StateDisplayProps = $props();
 
-	const sizeClasses = {
-		small: {
-			container: 'p-6 gap-3',
-			icon: 'w-8 h-8',
-			title: 'text-sm font-semibold',
-			message: 'text-xs'
-		},
-		medium: {
-			container: 'p-12 gap-4',
-			icon: 'w-12 h-12',
-			title: 'text-lg font-semibold',
-			message: 'text-sm'
-		},
-		large: {
-			container: 'p-16 gap-6',
-			icon: 'w-16 h-16',
-			title: 'text-2xl font-bold',
-			message: 'text-base'
-		}
-	};
-
-	/* Fully semantic, contrast-safe mappings */
-	const typeClasses = {
-		loading: {
-			icon: 'text-primary',
-			title: 'text-primary-foreground',
-			message: 'text-primary-foreground/80',
-			border: 'border-primary',
-			background: 'bg-primary/15'
-		},
-		error: {
-			icon: 'text-destructive',
-			title: 'text-destructive-foreground',
-			message: 'text-destructive-foreground/80',
-			border: 'border-destructive',
-			background: 'bg-destructive/15'
-		},
-		warning: {
-			icon: 'text-accent',
-			title: 'text-accent-foreground',
-			message: 'text-accent-foreground/80',
-			border: 'border-accent',
-			background: 'bg-accent/15'
-		},
-		empty: {
-			icon: 'text-neutral',
-			title: 'text-neutral-foreground',
-			message: 'text-neutral-foreground/80',
-			border: 'border-neutral',
-			background: 'bg-neutral/15'
-		}
-	};
-
-	const sizeConfig = $derived(sizeClasses[size]);
-	const typeConfig = $derived(typeClasses[type]);
+	// Size only changes the breathing room; the look comes from Empty and the severity tokens.
+	const PADDING = { small: 'p-4', medium: 'p-8', large: 'p-12' } as const;
 </script>
 
-<Card.Root class="rounded-lg border-2 {typeConfig.border} {typeConfig.background} {className}">
-	<Card.Content
-		class="flex flex-col items-center justify-center text-center {sizeConfig.container}"
-	>
-		<div class="{sizeConfig.icon} {typeConfig.icon}">
+<Empty.Root class={cn(PADDING[size], className)}>
+	<Empty.Header>
+		<Empty.Media variant="icon">
 			{#if type === 'loading'}
-				<Loader class="animate-spin h-full w-full" />
-			{:else if type === 'error'}
-				<AlertCircle class="h-full w-full" />
-			{:else if type === 'warning'}
-				<AlertTriangle class="h-full w-full" />
+				<Spinner />
 			{:else if type === 'empty'}
-				<Inbox class="h-full w-full" />
+				<Inbox />
+			{:else}
+				<SeverityIcon severity={type} />
 			{/if}
-		</div>
-
+		</Empty.Media>
 		{#if title}
-			<h3 class="{sizeConfig.title} {typeConfig.title} mt-1">
-				{title}
-			</h3>
+			<Empty.Title>{title}</Empty.Title>
 		{/if}
-
 		{#if message}
-			<p class="{sizeConfig.message} {typeConfig.message} max-w-md leading-relaxed">
-				{message}
-			</p>
+			<Empty.Description>{message}</Empty.Description>
 		{/if}
-	</Card.Content>
-</Card.Root>
+	</Empty.Header>
+</Empty.Root>