@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/dist/components/primitives/tabs/tabs-list.svelte

@@ -5,8 +5,8 @@
 		base: 'inline-flex items-center text-muted-foreground',
 		variants: {
 			variant: {
-				default: 'h-9 w-fit justify-center rounded-lg bg-muted p-0.75',
-				line: 'gap-1 px-2 w-full justify-start'
+				default: 'h-9 w-fit justify-center rounded-md bg-muted p-0.5',
+				line: 'gap-1 px-1 w-full justify-start'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/tabs/tabs-list.svelte.d.ts

@@ -1,18 +1,18 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
-        line: "gap-1 px-2 w-full justify-start";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined, "inline-flex items-center text-muted-foreground", {
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
-        line: "gap-1 px-2 w-full justify-start";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
-        line: "gap-1 px-2 w-full justify-start";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined>>;
 export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];

package/dist/components/primitives/tabs/tabs-trigger.svelte

@@ -2,12 +2,12 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const tabsTriggerVariants = tv({
-		base: "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default:
-					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring 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',
-				line: 'px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
+					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground',
+				line: 'px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts

@@ -1,18 +1,18 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring 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";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
-}, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring 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";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring 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";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined>>;
 export type TabsTriggerVariant = VariantProps<typeof tabsTriggerVariants>['variant'];

package/dist/components/primitives/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	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 outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 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',
+		'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-field transition outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	bind:value

package/dist/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/50 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: {

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

@@ -2,32 +2,41 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
+        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";
+        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";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
-}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 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", {
+}, undefined, "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", {
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
+        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";
+        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";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
+        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";
+        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";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
 }, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];

package/dist/components/primitives/toggle-group/toggle-group-item.svelte

@@ -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-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-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/dist/components/primitives/toggle-group/toggle-group.svelte

@@ -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-vertical:flex-col data-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/dist/components/primitives/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+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/dist/components/primitives/tooltip/index.js

@@ -0,0 +1,8 @@
+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/dist/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 '../../../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/dist/components/primitives/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import TooltipPortal from './tooltip-portal.svelte';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/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/dist/components/primitives/tooltip/tooltip-portal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipPortal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+type TooltipPortal = ReturnType<typeof TooltipPortal>;
+export default TooltipPortal;

package/dist/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/dist/components/primitives/tooltip/tooltip-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipProvider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/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/dist/components/primitives/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/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/dist/components/primitives/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const Tooltip: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/viewer/MeshMetadataPanel.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '../primitives/button/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	interface Props {
+		metadata: Record<string, any>;
+		meshName: string | null;
+		onClose: () => void;
+		class?: string;
+	}
+
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
+
+	let { metadata, meshName, onClose, class: className = '' }: Props = $props();
+
+	const filteredMetadata = $derived.by(() => {
+		const result: Record<string, unknown> = {};
+		for (const [key, value] of Object.entries(metadata)) {
+			if (EXCLUDED_KEYS.has(key)) continue;
+			if (
+				key === 'metadata' &&
+				typeof value === 'object' &&
+				value !== null &&
+				!Array.isArray(value)
+			) {
+				Object.assign(result, value);
+			} else {
+				result[key] = value;
+			}
+		}
+		return result;
+	});
+</script>
+
+<!-- Not a modal: a modal locks the page, and on touch the tap that should dismiss it can race the
+     dialog's own dismiss handler, leaving the viewer frozen. A card lets the canvas keep orbiting. -->
+<section
+	aria-label={meshName ?? t.objectFallbackName}
+	class="min-h-0 shadow-lg backdrop-blur-sm flex flex-col overflow-hidden rounded-lg border bg-background/95 {className}"
+>
+	<header class="gap-2 py-1 pr-1 pl-4 flex items-center border-b">
+		<h2 class="text-sm font-semibold min-w-0 flex-1 truncate">
+			{meshName ?? t.objectFallbackName}
+		</h2>
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			class="pointer-coarse:size-10 shrink-0"
+			aria-label={t.close}
+			title={t.close}
+			onclick={onClose}
+		>
+			<X />
+		</Button>
+	</header>
+
+	<div class="min-h-0 overflow-y-auto overscroll-contain">
+		{#if Object.keys(filteredMetadata).length === 0}
+			<p class="px-4 py-3 text-xs text-muted-foreground">{t.noMetadata}</p>
+		{:else}
+			<table class="text-xs w-full border-collapse">
+				<tbody>
+					{#each Object.entries(filteredMetadata) as [key, value] (key)}
+						<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"
+								>{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-success' : 'text-muted-foreground'}
+										>{value ? 'true' : 'false'}</span
+									>
+								{:else}
+									<span class="break-all">{value}</span>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</section>

package/dist/components/viewer/MeshMetadataPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    metadata: Record<string, any>;
+    meshName: string | null;
+    onClose: () => void;
+    class?: string;
+}
+declare const MeshMetadataPanel: import("svelte").Component<Props, {}, "">;
+type MeshMetadataPanel = ReturnType<typeof MeshMetadataPanel>;
+export default MeshMetadataPanel;

package/dist/components/viewer/SceneManager.svelte

@@ -14,7 +14,7 @@
 		type SceneEntry,
 		type SceneOutliner
 	} from '@selvajs/visualization/scene';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../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>