@selvajs/ui 6.6.0-beta.8 → 7.0.0

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

@@ -2,17 +2,25 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "hover:text-foreground aria-pressed:bg-selected focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-selected gap-1 rounded-md text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-hover focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent'
+				// Item inside a segmented track: the chosen value sits raised above the track.
+				segmented:
+					'rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong',
+				outline: 'border-input hover:bg-hover border bg-field',
+				// Filled accent for the active item; a bare bg-muted is too faint on a form.
+				accent:
+					'border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'
 			},
 			size: {
 				default:
 					'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
 				sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
+				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				// Icon over a short label, so a row of options still fits a phone-width column.
+				stacked: 'min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs'
 			}
 		},
 		defaultVariants: {
@@ -28,7 +36,7 @@
 
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/toggle-group/toggle-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
-	import { type ToggleVariants, toggleVariants } from '$lib/components/primitives/toggle/index.js';
-	import { cn } from '$lib/utils.js';
+	import { type ToggleVariants, toggleVariants } from '#lib/components/primitives/toggle/index.js';
+	import { cn } from '#lib/utils.js';
 	import { getToggleGroupCtx } from './toggle-group.svelte';
 
 	let {
@@ -23,7 +23,7 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-t group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { getContext, setContext } from 'svelte';
-	import { toggleVariants } from '$lib/components/primitives/toggle/index.js';
+	import { toggleVariants } from '#lib/components/primitives/toggle/index.js';
 	import type { VariantProps } from 'tailwind-variants';
 
 	type ToggleVariants = VariantProps<typeof toggleVariants>;
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style="--gap: calc(var(--spacing) * {spacing})"
 	class={cn(
-		'group/toggle-group flex w-fit flex-row items-center gap-(--gap) rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-md',
+		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:rounded-lg data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
 		className
 	)}
 	{...restProps}

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

@@ -0,0 +1,19 @@
+import Content from './tooltip-content.svelte';
+import Portal from './tooltip-portal.svelte';
+import Provider from './tooltip-provider.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Root from './tooltip.svelte';
+
+export {
+	Root,
+	Content,
+	Provider,
+	Portal,
+	Trigger,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+	Trigger as TooltipTrigger
+};

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 6,
+		side = 'top',
+		children,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 px-2.5 py-1.5 text-xs font-medium z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md bg-foreground text-balance text-background',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/src/lib/components/primitives/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/lib/components/primitives/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { X } from '@lucide/svelte';
 	import { Button } from '../primitives/button/index.js';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -65,7 +65,7 @@
 			<table class="text-xs w-full border-collapse">
 				<tbody>
 					{#each Object.entries(filteredMetadata) as [key, value] (key)}
-						<tr class="border-b border-border/60 last:border-b-0">
+						<tr class="border-b border-border last:border-b-0">
 							<th
 								scope="row"
 								class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"

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

@@ -14,7 +14,7 @@
 		type SceneEntry,
 		type SceneOutliner
 	} from '@selvajs/visualization/scene';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -33,9 +33,11 @@
 		 * repaint, so the row updates instantly and the geometry lags behind.
 		 */
 		onVisibilityChange?: () => void;
+		/** The entry under the pointer, or null once it leaves. Drives the viewport preview tint. */
+		onHover?: (entry: SceneEntry | null) => void;
 	}
 
-	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange, onHover }: Props = $props();
 
 	// A partially hidden layer hides the rest; only a fully hidden one comes back — the same rule
 	// `visibility.toggleLayer` applies to objects, restated over entries because a layer's rows are
@@ -51,6 +53,13 @@
 		onVisibilityChange?.();
 	};
 
+	// A solve or closing the panel removes the row without a mouseleave, which would leave the
+	// preview tint stuck on the viewport.
+	$effect(() => {
+		void sceneVersion;
+		return () => onHover?.(null);
+	});
+
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
@@ -216,16 +225,16 @@
 	onmousedown={() => outliner.selection.clear()}
 >
 	<div class="px-3 py-2 gap-2 flex items-center border-b border-border">
-		<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+		<Search class="h-3.5 w-3.5 shrink-0 text-faint-foreground" />
 		<input
-			class="min-w-0 text-xs flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground/50"
+			class="min-w-0 text-xs flex-1 bg-transparent text-foreground outline-none placeholder:text-faint-foreground"
 			placeholder={t.searchObjects}
 			bind:value={searchQuery}
 		/>
 		{#if searchQuery}
 			<button onclick={() => (searchQuery = '')} aria-label={t.clearSearch}>
 				<X
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			</button>
 		{/if}
@@ -238,11 +247,11 @@
 		>
 			{#if allCollapsed}
 				<ChevronsUpDown
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			{:else}
 				<ChevronsDownUp
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			{/if}
 		</button>
@@ -276,10 +285,10 @@
 						{@const isCollapsed = collapsed.has(row.layerName)}
 
 						<div
-							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-muted"
+							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-hover"
 						>
 							<button
-								class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
+								class="p-0.5 shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-muted-foreground"
 								onclick={() => outliner.toggleCollapsed(row.layerName)}
 								aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
 							>
@@ -291,15 +300,15 @@
 							</button>
 
 							<button
-								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+								class="p-1 shrink-0 rounded-sm transition-colors hover:bg-hover"
 								onclick={() => toggleLayer(entries)}
 								title={layerHidden ? t.showLayer : t.hideLayer}
 								aria-label={layerHidden ? t.showLayer : t.hideLayer}
 							>
 								{#if layerHidden}
-									<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
+									<EyeOff class="h-3.5 w-3.5 text-faint-foreground" />
 								{:else if layerPartial}
-									<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
+									<Eye class="h-3.5 w-3.5 text-faint-foreground" />
 								{:else}
 									<Eye class="h-3.5 w-3.5 text-muted-foreground" />
 								{/if}
@@ -307,13 +316,13 @@
 
 							<span
 								class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
-									? 'text-muted-foreground/40 line-through'
+									? 'text-faint-foreground line-through'
 									: 'text-foreground'}"
 							>
 								{row.layerName}
 							</span>
 
-							<span class="shrink-0 text-2xs text-muted-foreground/50 tabular-nums">
+							<span class="shrink-0 text-2xs text-faint-foreground tabular-nums">
 								{entries.length}
 							</span>
 						</div>
@@ -329,8 +338,10 @@
 								aria-selected={isSelected}
 								tabindex="-1"
 								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
-									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
+									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-hover'}
 									{isHidden ? 'opacity-40' : ''}"
+								onmouseenter={() => onHover?.(entry)}
+								onmouseleave={() => onHover?.(null)}
 								onmousedown={(e) => {
 									e.stopPropagation();
 									if (e.shiftKey) e.preventDefault();
@@ -340,7 +351,7 @@
 									e.key === 'Enter' && selectObject(entry.key, e as unknown as MouseEvent)}
 							>
 								<button
-									class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+									class="p-1 shrink-0 rounded-sm transition-colors hover:bg-hover"
 									onclick={(e) => {
 										e.stopPropagation();
 										toggleEntry(entry);
@@ -349,7 +360,7 @@
 									aria-label={isHidden ? t.showObject : t.hideObject}
 								>
 									{#if isHidden}
-										<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+										<EyeOff class="h-3 w-3 text-faint-foreground" />
 									{:else}
 										<Eye class="h-3 w-3 text-muted-foreground" />
 									{/if}
@@ -358,13 +369,13 @@
 								<span
 									class="min-w-0 text-xs flex-1 truncate {isHidden
 										? 'text-muted-foreground line-through'
-										: 'text-foreground/80'}"
+										: 'text-foreground'}"
 								>
 									{entry.label}
 								</span>
 
 								<span
-									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-2xs text-muted-foreground/70"
+									class="px-1 py-0.5 font-medium shrink-0 rounded-sm bg-muted text-2xs text-faint-foreground"
 								>
 									{getTypeLabel(entry.object)}
 								</span>
@@ -377,12 +388,12 @@
 
 		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
-				<EyeOff class="mb-2 h-5 w-5 text-muted-foreground/30" />
+				<EyeOff class="mb-2 h-5 w-5 text-faint-foreground" />
 				<p class="text-xs text-muted-foreground">{t.noObjects}</p>
 			</div>
 		{:else if layerGroups.size === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
-				<Search class="mb-2 h-5 w-5 text-muted-foreground/30" />
+				<Search class="mb-2 h-5 w-5 text-faint-foreground" />
 				<p class="text-xs text-muted-foreground">
 					{t.noResultsFor.replace('{query}', searchQuery)}
 				</p>