@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.11

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

@@ -0,0 +1,13 @@
+import Root from './toggle.svelte';
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants
+} from './toggle.svelte';
+
+export {
+	Root,
+	//
+	Root as Toggle
+};

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

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	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",
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-input hover:bg-muted border bg-transparent'
+			},
+			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',
+				// 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: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Item from './toggle-group-item.svelte';
+import Root from './toggle-group.svelte';
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem
+};

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

@@ -0,0 +1,35 @@
+<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 { getToggleGroupCtx } from './toggle-group.svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	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',
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>

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

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import { toggleVariants } from '$lib/components/primitives/toggle/index.js';
+	import type { VariantProps } from 'tailwind-variants';
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext('toggleGroup', props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>('toggleGroup');
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		spacing = 0,
+		orientation = 'horizontal',
+		variant = 'default',
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: 'horizontal' | 'vertical';
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		}
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	{orientation}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	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',
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/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 '$lib/i18n/localeContext.svelte';
+
+	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/60 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/src/lib/components/viewer/SceneManager.svelte

@@ -256,9 +256,18 @@
 		<!-- Spacer sized to the full list; windowed rows are placed into it by offset. The listbox
 		     sits here rather than per layer: windowing renders one flat row list, so every option
 		     shares a single owner. -->
-		<div role="listbox" aria-multiselectable="true" class="relative" style:height="{totalHeight}px">
+		<div
+			role="listbox"
+			aria-multiselectable="true"
+			class="relative h-(--list-h)"
+			style:--list-h="{totalHeight}px"
+		>
 			{#each visibleRows as row (row.key)}
-				<div class="inset-x-0 absolute" style:top="{row.top}px" style:height="{row.height}px">
+				<div
+					class="inset-x-0 absolute top-(--row-top) h-(--row-h)"
+					style:--row-top="{row.top}px"
+					style:--row-h="{row.height}px"
+				>
 					{#if row.kind === 'layer'}
 						{@const entries = row.entries}
 						{@const numHidden = hiddenCount(entries)}
@@ -304,7 +313,7 @@
 								{row.layerName}
 							</span>
 
-							<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
+							<span class="shrink-0 text-2xs text-muted-foreground/50 tabular-nums">
 								{entries.length}
 							</span>
 						</div>
@@ -355,7 +364,7 @@
 								</span>
 
 								<span
-									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
+									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-2xs text-muted-foreground/70"
 								>
 									{getTypeLabel(entry.object)}
 								</span>
@@ -390,7 +399,7 @@
 		background: transparent;
 	}
 	div::-webkit-scrollbar-thumb {
-		background: hsl(var(--muted-foreground) / 0.15);
+		background: color-mix(in oklch, var(--muted-foreground) 15%, transparent);
 		border-radius: 2px;
 	}
 </style>