selva-shared 0.8.1

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Button } from './button';
+	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+
+	interface Props {
+		hasPendingChanges: boolean;
+		hasNeverSolved?: boolean;
+		isSolving: boolean;
+		oncalculate: () => void;
+	}
+
+	let { hasPendingChanges, hasNeverSolved = false, isSolving, oncalculate }: Props = $props();
+</script>
+
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+	<Button
+		variant={hasPendingChanges ? 'default' : 'ghost'}
+		size="lg"
+		onclick={() => !isSolving && oncalculate()}
+		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 ? 'text-muted-foreground' : ''}"
+	>
+		{#if isSolving}
+			<Loader class="h-4 w-4 animate-spin" />
+			Solving...
+		{:else if hasNeverSolved}
+			<Play class="h-4 w-4" />
+			Press to calculate
+		{:else if hasPendingChanges}
+			<Zap class="h-4 w-4" />
+			Calculate
+		{:else}
+			<Check class="h-4 w-4" />
+			Up to date
+		{/if}
+	</Button>
+</div>
+
+<style>
+	:global(.selva-pending-pulse) {
+		animation: selva-pending-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes selva-pending-pulse {
+		0%,
+		100% {
+			box-shadow: 0 0 0 0 hsl(var(--primary) / 0.35);
+		}
+		50% {
+			box-shadow: 0 0 0 5px hsl(var(--primary) / 0);
+		}
+	}
+</style>

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	interface Props {
+		show: boolean;
+	}
+
+	let { show }: Props = $props();
+</script>
+
+{#if show}
+	<!-- Prominent toast in bottom-left -->
+	<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/ui/StateDisplay.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Loader, AlertCircle, AlertTriangle, Inbox } from '@lucide/svelte';
+	import * as Card from '$lib/components/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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
+};

package/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+				outline:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				dashed:
+					'border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		data-sveltekit-reload
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}