@selvajs/ui 0.9.0

package/src/lib/components/primitives/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />

package/src/lib/components/primitives/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"gap-2 py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center rounded-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="right-2 size-3.5 absolute flex items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/src/lib/components/primitives/select/select-label.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="select-label"
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn('py-1 flex cursor-default items-center justify-center', className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/src/lib/components/primitives/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn('py-1 flex cursor-default items-center justify-center', className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/src/lib/components/primitives/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '$lib/components/primitives/separator/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn('-mx-1 my-1 pointer-events-none h-px bg-border', className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: 'sm' | 'default';
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+	Root,
+	//
+	Root as Separator
+};

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		'data-slot': dataSlot = 'separator',
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px',
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import Root from './slider.svelte';
+
+export {
+	Root,
+	//
+	Root as Slider
+};

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = 'horizontal',
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="slider"
+	{orientation}
+	class={cn(
+		'data-[orientation=vertical]:min-h-44 relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbs })}
+		<span
+			data-orientation={orientation}
+			data-slot="slider-track"
+			class={cn(
+				'bg-neutral-200 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full dark:bg-muted'
+			)}
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				class={cn(
+					'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+				)}
+			/>
+		</span>
+		{#each thumbs as thumb (thumb)}
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				index={thumb}
+				class="size-4 shadow-sm block shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

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

@@ -0,0 +1,2 @@
+export { default as Toaster } from './sonner.svelte';
+export { toast } from 'svelte-sonner';

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+	Root,
+	//
+	Root as Switch
+};

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'peer w-8 shadow-xs inline-flex h-[1.15rem] shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'size-4 data-[state=unchecked]:translate-x-0 pointer-events-none block rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
+		)}
+	/>
+</SwitchPrimitive.Root>

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

@@ -0,0 +1,16 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger
+};

package/src/lib/components/primitives/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('flex-1 outline-none', className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/tabs/tabs-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'h-9 inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/primitives/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 px-2 py-1 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center rounded-md border border-transparent whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('gap-2 flex flex-col', className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/src/lib/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { themeStore, type Theme } from '$lib/theme/themeStore.svelte';
+	import * as Select from '$lib/components/primitives/select';
+	import { Palette } from '@lucide/svelte';
+
+	const themes: { value: Theme; label: string; description: string }[] = [
+		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
+		{ value: 'selva', label: 'Selva', description: 'Forest green' },
+		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
+		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
+	];
+
+	let value = $state(themeStore.current);
+
+	$effect(() => {
+		if (value) {
+			themeStore.set(value as Theme);
+		}
+	});
+
+	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
+</script>
+
+<Select.Root type="single" bind:value>
+	<Select.Trigger class="gap-2 w-[140px]">
+		<Palette size={14} />
+		<span>{triggerContent}</span>
+	</Select.Trigger>
+	<Select.Content>
+		{#each themes as theme (theme.value)}
+			<Select.Item value={theme.value} label={theme.label}>
+				<div class="flex flex-col items-start">
+					<span class="font-medium text-sm">{theme.label}</span>
+					<span class="text-xs text-muted-foreground">{theme.description}</span>
+				</div>
+			</Select.Item>
+		{/each}
+	</Select.Content>
+</Select.Root>

package/src/lib/components/primitives/theme-switcher/index.ts

@@ -0,0 +1 @@
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/src/lib/components/viewer/MeshMetadataDialog.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import * as Dialog from '../primitives/dialog/index.js';
+
+	interface Props {
+		open: boolean;
+		metadata: Record<string, any> | null;
+		meshName: string | null;
+		onOpenChange: (open: boolean) => void;
+		isFullscreen?: boolean;
+	}
+
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'originalIndex', 'sourceComponentId']);
+
+	let {
+		open = $bindable(),
+		metadata,
+		meshName,
+		onOpenChange,
+		isFullscreen = false
+	}: Props = $props();
+
+	$effect(() => {
+		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
+	});
+
+	const getFilteredMetadata = () => {
+		if (!metadata) return {};
+		const entries = Object.entries(metadata).filter(([key]) => !EXCLUDED_KEYS.has(key));
+		const result: Record<string, unknown> = {};
+		for (const [key, value] of entries) {
+			if (
+				key === 'metadata' &&
+				typeof value === 'object' &&
+				value !== null &&
+				!Array.isArray(value)
+			) {
+				Object.assign(result, value);
+			} else {
+				result[key] = value;
+			}
+		}
+		return result;
+	};
+</script>
+
+<Dialog.Root bind:open {onOpenChange}>
+	<Dialog.Content class="min-w-60 max-w-xs p-0 gap-0 w-auto overflow-hidden">
+		{#if meshName}
+			<div class="px-4 pt-3 pb-2 border-b">
+				<Dialog.Title class="text-sm font-semibold">{meshName}</Dialog.Title>
+			</div>
+		{:else}
+			<Dialog.Title class="sr-only">Object</Dialog.Title>
+		{/if}
+
+		<div class="max-h-80 overflow-y-auto">
+			{#if !metadata || Object.keys(getFilteredMetadata()).length === 0}
+				<p class="px-4 py-3 text-xs text-muted-foreground">No metadata</p>
+			{:else}
+				<table class="text-xs w-full border-collapse">
+					<tbody>
+						{#each Object.entries(getFilteredMetadata()) as [key, value] (key)}
+							<tr class="border-b border-border/60 transition-colors hover:bg-muted/40">
+								<th
+									scope="row"
+									class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"
+									>{key}</th
+								>
+								<td class="px-4 py-2 text-right align-top text-foreground">
+									{#if typeof value === 'object' && value !== null}
+										{#if Array.isArray(value)}
+											<div class="space-y-1 text-left">
+												{#each value as item, index (index)}
+													{#if typeof item === 'object'}
+														<div class="space-y-0.5">
+															{#each Object.entries(item) as [k, v] (k)}
+																<div class="gap-2 flex">
+																	<span class="shrink-0 text-muted-foreground">{k}:</span>
+																	<span>{v}</span>
+																</div>
+															{/each}
+														</div>
+													{:else}
+														<div>{item}</div>
+													{/if}
+												{/each}
+											</div>
+										{:else}
+											<div class="space-y-0.5 text-left">
+												{#each Object.entries(value) as [k, v] (k)}
+													<div class="gap-2 flex">
+														<span class="shrink-0 text-muted-foreground">{k}:</span>
+														<span>{v}</span>
+													</div>
+												{/each}
+											</div>
+										{/if}
+									{:else if typeof value === 'number'}
+										<span class="font-mono">{value}</span>
+									{:else if typeof value === 'boolean'}
+										<span class={value ? 'text-green-500' : 'text-muted-foreground'}
+											>{value ? 'true' : 'false'}</span
+										>
+									{:else}
+										<span class="break-all">{value}</span>
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
+
+<style>
+	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
+	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
+		z-index: 10001;
+	}
+</style>