@selvajs/ui 0.9.0

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

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	export interface DataTableColumn {
+		label: string;
+		width?: string;
+		align?: 'left' | 'right';
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		rows: T[];
+		columns: DataTableColumn[];
+		getKey: (row: T) => string;
+		row: Snippet<[T]>;
+		class?: string;
+	}
+
+	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
+
+	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+</script>
+
+<div class={`divide-y rounded-lg border ${className}`}>
+	<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}
+	>
+		{#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}>
+			{@render row(item)}
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { Button } from './button';
+	import { Input } from './input';
+	import { Upload } from '@lucide/svelte';
+
+	interface Props {
+		mode?: 'url' | 'upload';
+		value?: string;
+		disabled?: boolean;
+		isUploading?: boolean;
+		hasFile?: boolean;
+		onModeChange?: (mode: 'url' | 'upload') => void;
+		onUpload?: () => void;
+		onUrlChange?: (url: string) => void;
+		onFileSelected?: () => void;
+		inputRef?: HTMLInputElement;
+	}
+
+	let {
+		mode = 'url',
+		value = '',
+		disabled = false,
+		isUploading = false,
+		hasFile = false,
+		onModeChange,
+		onUpload,
+		onUrlChange,
+		onFileSelected,
+		inputRef = $bindable()
+	}: Props = $props();
+</script>
+
+<div class="space-y-2">
+	<!-- Mode toggle -->
+	<div class="gap-1 p-0.5 flex rounded-md border">
+		<Button
+			size="sm"
+			variant={mode !== 'upload' ? 'default' : 'ghost'}
+			onclick={() => onModeChange?.('url')}
+			class="h-7 text-xs flex-1"
+		>
+			URL
+		</Button>
+		<Button
+			size="sm"
+			variant={mode === 'upload' ? 'default' : 'ghost'}
+			onclick={() => onModeChange?.('upload')}
+			class="h-7 text-xs flex-1"
+		>
+			Upload File
+		</Button>
+	</div>
+
+	<!-- Content -->
+	{#if mode === 'upload'}
+		<div class="gap-2 sm:flex-row sm:items-center flex flex-col">
+			<input
+				type="file"
+				bind:this={inputRef}
+				accept="image/*"
+				{disabled}
+				onchange={onFileSelected}
+				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-background file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
+			/>
+			<Button
+				size="sm"
+				disabled={disabled || !hasFile || isUploading}
+				onclick={onUpload}
+				class="shrink-0"
+			>
+				<Upload class="mr-2 h-4 w-4" />
+				<span class="sm:inline hidden">{isUploading ? 'Uploading…' : 'Upload'}</span>
+			</Button>
+		</div>
+	{:else}
+		<Input
+			type="text"
+			{value}
+			{disabled}
+			oninput={(e) => onUrlChange?.((e.target as HTMLInputElement).value)}
+			placeholder="https://..."
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	interface Props {
+		show: boolean;
+	}
+
+	let { show }: Props = $props();
+</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>
+			<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">Solving</span>
+			<span class="text-xs opacity-70">Grasshopper is calculating...</span>
+		</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>

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Loader, AlertCircle, AlertTriangle, Inbox } from '@lucide/svelte';
+	import * as Card from '$lib/components/primitives/card';
+
+	interface StateDisplayProps {
+		type: 'loading' | 'error' | 'warning' | 'empty';
+		message?: string;
+		title?: string;
+		size?: 'small' | 'medium' | 'large';
+		class?: string;
+	}
+
+	let {
+		type,
+		message = '',
+		title,
+		size = 'medium',
+		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]);
+</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}">
+			{#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" />
+			{:else if type === 'empty'}
+				<Inbox class="h-full w-full" />
+			{/if}
+		</div>
+
+		{#if title}
+			<h3 class="{sizeConfig.title} {typeConfig.title} mt-1">
+				{title}
+			</h3>
+		{/if}
+
+		{#if message}
+			<p class="{sizeConfig.message} {typeConfig.message} max-w-md leading-relaxed">
+				{message}
+			</p>
+		{/if}
+	</Card.Content>
+</Card.Root>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Grid2x2, List } from '@lucide/svelte';
+
+	type ViewMode = 'grid' | 'list';
+
+	interface Props {
+		mode: ViewMode;
+		onChange: (mode: ViewMode) => void;
+		size?: 'sm' | 'md';
+	}
+
+	let { mode, onChange, size = 'md' }: Props = $props();
+
+	const btnClass = $derived(
+		size === 'sm'
+			? 'flex h-7 w-7 items-center justify-center rounded-md transition-colors'
+			: 'flex h-8 w-8 items-center justify-center rounded-md transition-colors'
+	);
+	const iconClass = $derived(size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4');
+</script>
+
+<div class="gap-0.5 p-0.5 inline-flex rounded-md border border-border bg-card">
+	<button
+		type="button"
+		title="Grid view"
+		aria-label="Grid view"
+		aria-pressed={mode === 'grid'}
+		onclick={() => onChange('grid')}
+		class="{btnClass} {mode === 'grid'
+			? 'bg-muted text-foreground'
+			: 'text-muted-foreground hover:text-foreground'}"
+	>
+		<Grid2x2 class={iconClass} />
+	</button>
+	<button
+		type="button"
+		title="List view"
+		aria-label="List view"
+		aria-pressed={mode === 'list'}
+		onclick={() => onChange('list')}
+		class="{btnClass} {mode === 'list'
+			? 'bg-muted text-foreground'
+			: 'text-muted-foreground hover:text-foreground'}"
+	>
+		<List class={iconClass} />
+	</button>
+</div>

package/src/lib/components/primitives/alert/alert-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		'gap-1 text-sm [&_p]:leading-relaxed col-start-2 grid justify-items-start text-muted-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/alert/alert-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn('min-h-4 font-medium tracking-tight col-start-2 line-clamp-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const alertVariants = tv({
+		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,14 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};

package/src/lib/components/primitives/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/primitives/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/primitives/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: 'outline' }), className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background duration-200',
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

package/src/lib/components/primitives/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn('gap-2 sm:flex-row sm:justify-end flex flex-col-reverse', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn('gap-2 sm:text-start flex flex-col text-center', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 inset-0 bg-black/50 fixed z-50',
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/primitives/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn('text-lg font-semibold', className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/src/lib/components/primitives/alert-dialog/index.ts

@@ -0,0 +1,39 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+
+const Root = AlertDialogPrimitive.Root;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription
+};