@selvajs/ui 6.6.0-beta.6 → 6.6.0-beta.7

package/src/lib/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -19,7 +19,7 @@
 		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-1/2 top-1/2 z-50 grid w-full max-w-screen-inset -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background duration-200',
+			'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-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}

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

@@ -32,7 +32,7 @@
 		data-slot="dialog-content"
 		class={cn(
 			variant === 'flush' ? 'gap-0' : 'gap-4 p-6',
-			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-full max-w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
+			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}

package/src/lib/components/primitives/drawer/Drawer.svelte

@@ -26,7 +26,7 @@
 	onkeydown={handleKey}
 ></div>
 <div
-	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
+	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
 >
 	{@render children()}
 </div>

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/Viewer.svelte

@@ -34,7 +34,7 @@
 	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 	import { createSceneOutliner, type SceneOutliner } from '@selvajs/visualization/scene';
 	import SceneManager from './SceneManager.svelte';
-	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
+	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	import * as Resizable from '$lib/components/primitives/resizable/index.js';
 	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
 	import { Button } from '$lib/components/primitives/button/index.js';
@@ -122,6 +122,7 @@
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
+	let clearSelection: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -194,6 +195,10 @@
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
 			events: {
+				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
+				// previous object's panel instead of leaving it describing the wrong thing.
+				onObjectSelected: closeMetadata,
+				onBackgroundClicked: closeMetadata,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -224,6 +229,7 @@
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
+		clearSelection = init.clearSelection;
 		projection = init.cameraController.getProjection();
 
 		const renderer = init.renderer;
@@ -375,6 +381,29 @@
 		}
 	});
 
+	function closeMetadata() {
+		selectedMeshMetadata = null;
+		selectedMeshName = null;
+	}
+
+	function dismissMetadata() {
+		closeMetadata();
+		clearSelection?.();
+		invalidate?.();
+	}
+
+	// The panel describes an object from the previous solve once new meshes arrive.
+	$effect(() => {
+		void meshes;
+		untrack(closeMetadata);
+	});
+
+	// Dialogs portal to <body>, so one opened over the fullscreen viewer needs lifting above it.
+	$effect(() => {
+		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
+		return () => document.body.removeAttribute('data-viewer-fullscreen');
+	});
+
 	function toggleFullscreen() {
 		isFullscreen = !isFullscreen;
 	}
@@ -450,12 +479,9 @@
 				{/if}
 
 				{#if logoUrl}
-					<!-- Bottom offset matches the tools menu so it clears the mobile drawer handle.
-					     Always pointer-events:none so it never intercepts canvas drags. -->
+					<!-- pointer-events:none so it never intercepts canvas drags. -->
 					<div
-						class="right-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} pointer-events-none absolute z-20 {hideButton
+						class="right-4 bottom-4 pointer-events-none absolute z-20 {hideButton
 							? 'opacity-0'
 							: ''}"
 					>
@@ -467,11 +493,18 @@
 					</div>
 				{/if}
 
+				{#if selectedMeshMetadata}
+					<MeshMetadataPanel
+						metadata={selectedMeshMetadata}
+						meshName={selectedMeshName}
+						onClose={dismissMetadata}
+						class="top-3 right-3 left-3 sm:right-auto sm:max-h-2/3 sm:w-72 absolute z-30 max-h-1/2"
+					/>
+				{/if}
+
 				{#if config.showToolsMenu}
 					<div
-						class="left-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} shadow-lg absolute z-50 flex items-center rounded-lg {hideButton
+						class="left-4 bottom-4 gap-2 *:shadow-lg absolute z-50 flex items-center *:rounded-md {hideButton
 							? 'pointer-events-none opacity-0'
 							: ''}"
 					>
@@ -594,6 +627,18 @@
 								{/if}
 							</DropdownMenu.Content>
 						</DropdownMenu.Root>
+						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
+						<div class="hidden pointer-coarse:block">
+							<Button
+								variant="outline"
+								size="icon-lg"
+								title={t.fitToView}
+								aria-label={t.fitToView}
+								onclick={() => fitToView?.()}
+							>
+								<Frame />
+							</Button>
+						</div>
 					</div>
 				{/if}
 			</div>
@@ -608,22 +653,12 @@
 	</Resizable.PaneGroup>
 </div>
 
-<MeshMetadataDialog
-	open={selectedMeshMetadata !== null}
-	metadata={selectedMeshMetadata}
-	meshName={selectedMeshName}
-	{isFullscreen}
-	onOpenChange={(open: boolean) => {
-		if (!open) {
-			setTimeout(() => {
-				selectedMeshMetadata = null;
-				selectedMeshName = null;
-			}, 200);
-		}
-	}}
-/>
-
 <style>
+	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
+	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
+		z-index: 10001;
+	}
+
 	.fullscreen-viewer {
 		position: fixed;
 		inset: 0;

package/src/lib/styles/base.css

@@ -3,7 +3,7 @@
 :root {
 	--radius: 0.625rem;
 	--header-h: 3.5rem;
-	--page-px: 1.5rem;
+	--page-px: 1rem;
 	--page-py: 1.75rem;
 	--background: oklch(0.99 0 0);
 	--foreground: oklch(0.22 0 0);
@@ -180,6 +180,26 @@
 	border-radius: inherit;
 }
 
+/* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
+@media (min-width: 40rem) {
+	:root {
+		--page-px: 1.5rem;
+	}
+}
+
+/* A native select draws its arrow inside the right padding, so with the `px-2`/`px-3` every
+   caller uses it sits on the border. A drawn chevron with its own gutter fixes them all. Unlayered
+   on purpose: the gutter has to beat the callers' `px-*` utilities. Mid-grey reads on both themes,
+   since a data URI can't take `currentColor`. */
+select:not([multiple]):not([size]) {
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.625rem center;
+	background-size: 1.1em;
+	padding-inline-end: calc(1.1em + 1rem);
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring;

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import * as Dialog from '../primitives/dialog/index.js';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-
-	const locale = getLocaleContext();
-	const t = $derived(locale.messages);
-
-	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', 'id']);
-
-	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 variant="flush" class="min-w-60 max-w-xs w-auto">
-		{#if meshName}
-			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title size="sm">{meshName}</Dialog.Title>
-			</div>
-		{:else}
-			<Dialog.Title class="sr-only">{t.objectFallbackName}</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">{t.noMetadata}</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-success' : '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>

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

@@ -1,10 +0,0 @@
-interface Props {
-    open: boolean;
-    metadata: Record<string, any> | null;
-    meshName: string | null;
-    onOpenChange: (open: boolean) => void;
-    isFullscreen?: boolean;
-}
-declare const MeshMetadataDialog: import("svelte").Component<Props, {}, "open">;
-type MeshMetadataDialog = ReturnType<typeof MeshMetadataDialog>;
-export default MeshMetadataDialog;

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

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import * as Dialog from '../primitives/dialog/index.js';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-
-	const locale = getLocaleContext();
-	const t = $derived(locale.messages);
-
-	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', 'id']);
-
-	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 variant="flush" class="min-w-60 max-w-xs w-auto">
-		{#if meshName}
-			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title size="sm">{meshName}</Dialog.Title>
-			</div>
-		{:else}
-			<Dialog.Title class="sr-only">{t.objectFallbackName}</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">{t.noMetadata}</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-success' : '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>