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

package/dist/components/ErrorScreen.svelte

@@ -18,7 +18,7 @@
 	const t = $derived(locale.messages);
 </script>
 
-<div class="p-4 flex min-h-screen items-center justify-center bg-background">
+<div class="p-4 flex min-h-dvh items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
 		<Card.Header>
 			<div class="gap-4 flex flex-col items-center text-center">

package/dist/components/compute/AppLayout.svelte

@@ -124,9 +124,14 @@
 	const isTwoPanelMode = $derived(!hasViewer && hasLeftPanel && hasRightPanel);
 
 	let isMobile = $state(false);
-	let drawerOpen = $state(false);
+	// Half keeps the model visible above the fields so a change can be watched as it solves;
+	// full is for long forms.
+	type DrawerState = 'closed' | 'half' | 'full';
+	let drawer = $state<DrawerState>('closed');
+	const DRAWER_STATES: DrawerState[] = ['closed', 'half', 'full'];
 
-	const activeLeftTabLabel = $derived(leftTabs[0]?.label ?? t.parametersTab);
+	// With several tabs the first tab's name would mislabel whichever one is showing.
+	const drawerLabel = $derived(leftTabs.length === 1 ? leftTabs[0].label : t.parametersTab);
 
 	$effect(() => {
 		const mqMobile = window.matchMedia('(max-width: 639px)');
@@ -154,19 +159,31 @@
 		await onLoadValues?.(loadedValues);
 	}
 
-	let _touchStartY = 0;
+	let touchStartY = 0;
+
+	function stepDrawer(by: number) {
+		const index = DRAWER_STATES.indexOf(drawer) + by;
+		drawer = DRAWER_STATES[Math.max(0, Math.min(DRAWER_STATES.length - 1, index))];
+	}
 
 	function onDrawerTouchStart(e: TouchEvent) {
-		_touchStartY = e.touches[0].clientY;
+		touchStartY = e.touches[0].clientY;
 	}
 
 	function onDrawerTouchEnd(e: TouchEvent) {
-		const deltaY = e.changedTouches[0].clientY - _touchStartY;
+		const deltaY = e.changedTouches[0].clientY - touchStartY;
 		const SWIPE_THRESHOLD = 40;
 		if (Math.abs(deltaY) > SWIPE_THRESHOLD) {
-			drawerOpen = deltaY < 0; // swipe up → open, swipe down → close
+			// Suppresses the click a short swipe can still end in, which would step the drawer twice.
+			e.preventDefault();
+			stepDrawer(deltaY < 0 ? 1 : -1);
 		}
 	}
+
+	// A tap walks closed → half → full → closed.
+	function onDrawerHandleClick() {
+		drawer = drawer === 'full' ? 'closed' : DRAWER_STATES[DRAWER_STATES.indexOf(drawer) + 1];
+	}
 </script>
 
 <!-- Everything but Calculate: saving and loading inputs, then the host's own actions. -->
@@ -279,16 +296,19 @@
 		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
+	class:mobile-root={isMobile}
 >
 	{#if isMobile}
 		{#if hasViewer}
-			<div class="min-h-0 flex flex-1 flex-col">
+			<!-- Ends above the drawer rather than behind it, so the model stays centred in what is
+			     visible. It jumps straight to its new size: animating it would resize the canvas,
+			     and its render targets, on every frame of the drawer's slide. -->
+			<div class="viewer-region" class:viewer-region-raised={drawer !== 'closed'}>
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
 					{isSolving}
-					isBlurred={drawerOpen}
-					{drawerOpen}
+					drawerOpen={drawer === 'full'}
 					{logoUrl}
 					{onViewerReady}
 					viewerConfig={{
@@ -300,31 +320,30 @@
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet"
-				class:drawer-open={drawerOpen}
-				class:drawer-closed={!drawerOpen}
+				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
-					class="drawer-handle-bar"
-					onclick={() => (drawerOpen = !drawerOpen)}
+					class="drawer-handle-bar touch-none"
+					onclick={onDrawerHandleClick}
 					ontouchstart={onDrawerTouchStart}
 					ontouchend={onDrawerTouchEnd}
-					aria-expanded={drawerOpen}
+					aria-expanded={drawer !== 'closed'}
 				>
 					<div class="drawer-pill"></div>
-					<span class="text-sm font-medium ml-2 text-foreground">{activeLeftTabLabel}</span>
+					<span class="text-sm font-medium ml-2 text-foreground">{drawerLabel}</span>
 					<ChevronUp
 						size={16}
-						class="ml-auto text-muted-foreground transition-transform duration-300 {drawerOpen
-							? ''
-							: 'rotate-180'}"
+						class="ml-auto text-muted-foreground transition-transform duration-300 {drawer ===
+						'full'
+							? 'rotate-180'
+							: ''}"
 					/>
 				</button>
 
 				<!-- Inert while closed: the fields are clipped out of view, and tabbing into them
 				     would scroll the drawer's insides around behind the handle. -->
-				<div class="drawer-content" inert={!drawerOpen}>
+				<div class="drawer-content" inert={drawer === 'closed'}>
 					<div class="px-3 pb-6">
 						{#if hasLeftPanel}
 							{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
@@ -343,7 +362,7 @@
 					</div>
 				</div>
 
-				{@render drawerFooter(!drawerOpen)}
+				{@render drawerFooter(drawer === 'closed')}
 			</div>
 		{:else}
 			<div class="flex flex-1 flex-col overflow-hidden">
@@ -534,6 +553,22 @@
 		gap: 0.5rem;
 	}
 
+	.mobile-root {
+		--drawer-closed-h: 60px;
+		--drawer-half-h: 50%;
+	}
+
+	.viewer-region {
+		position: absolute;
+		inset: 0 0 var(--drawer-closed-h) 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.viewer-region-raised {
+		bottom: var(--drawer-half-h);
+	}
+
 	.drawer-container {
 		position: absolute;
 		bottom: 0;
@@ -546,12 +581,14 @@
 	}
 
 	.drawer-closed {
-		height: 60px;
+		height: var(--drawer-closed-h);
+	}
+	.drawer-half {
+		height: var(--drawer-half-h);
 	}
-	/* The pinned footer takes a fixed slice, so a short phone opens the drawer further to leave
-	   room for the fields; a tall one keeps it at 60% of the screen. */
-	.drawer-open {
-		height: max(60svh, min(30rem, 100svh - 10rem));
+	/* Leaves a strip of the model showing, so the sheet still reads as sitting over the viewer. */
+	.drawer-full {
+		height: calc(100% - 3rem);
 	}
 
 	.drawer-handle-bar {

package/dist/components/layout/AppShell.svelte

@@ -74,14 +74,16 @@
 
 	const rootClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-col h-screen overflow-hidden bg-background ${className}`
-			: `flex flex-col min-h-screen bg-background ${className}`
+			? // dvh, not vh: iOS sizes 100vh to the viewport without its toolbar, which hides the
+				// footer and the phone drawer's handle behind the toolbar.
+				`flex flex-col h-dvh overflow-hidden bg-background ${className}`
+			: `flex flex-col min-h-dvh bg-background ${className}`
 	);
 
 	const bodyShellClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-1 min-h-0 ${sidenav ? 'flex-row' : 'flex-col'} ${bodyClass}`.trim()
-			: `flex-1 ${sidenav ? 'flex flex-row' : ''} ${bodyClass}`.trim()
+			? `flex flex-1 min-h-0 ${sidenav ? 'flex-col sm:flex-row' : 'flex-col'} ${bodyClass}`.trim()
+			: `flex-1 ${sidenav ? 'flex flex-col sm:flex-row' : ''} ${bodyClass}`.trim()
 	);
 
 	const bodyShellStyle = '';
@@ -92,13 +94,15 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 self-start sticky top-(--header-h) max-h-[calc(100svh-var(--header-h))]'
+			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-[calc(100svh-var(--header-h))]'
 	);
 
 	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
-		_mode === 'fixed' ? 'flex-1 overflow-y-auto' : 'flex-1 overflow-y-auto border-l border-border'
+		_mode === 'fixed'
+			? 'min-h-0 flex-1 overflow-y-auto'
+			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>
 

package/dist/components/layout/PageHeader.svelte

@@ -31,27 +31,31 @@
 <header
 	class={`top-0 backdrop-blur-sm sticky z-40 border-b border-border bg-background/90 ${className}`}
 >
-	<div class="gap-5 flex h-(--header-h) items-center px-(--page-px)">
+	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
-		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
+		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
+			<!-- On a phone the page title needs the room more than the brand does. -->
+			<span
+				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"
+				>{brandName}</span
+			>
 		</a>
 
 		{#if title !== undefined}
-			<span class="text-sm text-border">/</span>
-			<span class="text-sm font-medium text-muted-foreground">{title ?? ''}</span>
+			<span class="text-sm shrink-0 text-border">/</span>
+			<span class="text-sm font-medium min-w-0 truncate text-muted-foreground">{title ?? ''}</span>
 		{/if}
 
 		<!-- Primary nav next to logo -->
 		{#if navItems}
-			<nav class="ml-5 gap-1 flex">
+			<nav class="sm:ml-5 gap-1 flex shrink-0">
 				{@render navItems()}
 			</nav>
 		{/if}
 
 		<!-- Right cluster: identity + utilities, anchored flush-right -->
-		<div class="gap-2 ml-auto flex items-center">
+		<div class="gap-2 ml-auto flex shrink-0 items-center">
 			{#if rightContent}
 				{@render rightContent()}
 			{/if}

package/dist/components/layout/SectionHeader.svelte

@@ -18,7 +18,9 @@
 	}: SectionHeaderProps = $props();
 </script>
 
-<div class={`mb-6 gap-5 flex items-start justify-between ${className}`}>
+<div
+	class={`mb-6 gap-3 sm:gap-5 sm:flex-row sm:items-start sm:justify-between flex flex-col ${className}`}
+>
 	<div class="min-w-0">
 		{#if eyebrow}
 			<div class="mb-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase">
@@ -31,7 +33,7 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="gap-2 flex shrink-0 items-center">
+		<div class="gap-2 flex shrink-0 flex-wrap items-center">
 			{@render actions()}
 		</div>
 	{/if}

package/dist/components/layout/SideNav.svelte

@@ -43,13 +43,15 @@
 	}
 </script>
 
+<!-- On a phone a 240px column would leave the page ~150px, so the nav becomes a scrolling strip
+     above the content and the eyebrow, header and footer drop out. -->
 <aside
-	class={`w-60 flex h-full shrink-0 flex-col overflow-y-auto bg-background ${
-		border ? 'border-r border-border' : ''
+	class={`sm:h-full sm:w-60 sm:overflow-y-auto sm:border-b-0 flex w-full shrink-0 flex-col border-b border-border bg-background ${
+		border ? 'sm:border-r' : ''
 	} ${className}`}
 >
 	{#if eyebrow}
-		<div class="px-4 pt-5 pb-3">
+		<div class="px-4 pt-5 pb-3 sm:block hidden">
 			<span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
 				{eyebrow}
 			</span>
@@ -57,30 +59,36 @@
 	{/if}
 
 	{#if header}
-		<div class="px-3 pb-3">
+		<div class="px-3 pb-3 sm:block hidden">
 			{@render header()}
 		</div>
 	{/if}
 
-	<nav class="pb-4 pr-2 flex-1 space-y-px">
+	<nav
+		class="gap-1 py-2 sm:gap-0 sm:pt-0 sm:pb-4 sm:pr-2 sm:flex-1 sm:space-y-px sm:block sm:px-0 flex overflow-x-auto px-(--page-px)"
+	>
 		{#each items as item (item.href)}
 			{@const active = isActive(item)}
 			{@const Icon = item.icon}
 			<a
 				href={item.href}
-				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
+				class={`group gap-2 py-2 pr-2.5 sm:py-1.5 sm:w-full relative flex shrink-0 items-center text-left transition-colors ${
 					active
-						? 'pl-4 rounded-r-md bg-accent text-accent-foreground'
-						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-2.5 sm:pl-4 sm:rounded-l-none sm:rounded-r-md rounded-md bg-accent text-accent-foreground'
+						: 'sm:mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
 				}`}
 			>
 				{#if active}
-					<span class="left-0 top-0 bottom-0 w-0.75 absolute bg-primary" aria-hidden="true"></span>
+					<span
+						class="left-0 top-0 bottom-0 w-0.75 sm:block absolute hidden bg-primary"
+						aria-hidden="true"
+					></span>
 				{/if}
 				{#if Icon}
 					<Icon class="h-3.5 w-3.5 shrink-0 opacity-70" />
 				{/if}
-				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
+				<span class="text-sm font-medium sm:flex-1 sm:truncate whitespace-nowrap">{item.label}</span
+				>
 				{#if item.badge !== undefined}
 					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}
@@ -89,7 +97,7 @@
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
 			{@render footer()}
 		</div>
 	{/if}

package/dist/components/preview/ChartOutput.svelte

@@ -196,10 +196,10 @@
 		<!-- The layout hides this output while it has no data, so this is data that doesn't parse yet. -->
 		<div class="px-4 py-8 text-sm text-center text-muted-foreground">{t.chartReceiving}</div>
 	{:else}
-		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-screen' : 'h-95'}"></div>
+		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-dvh' : 'h-95'}"></div>
 
 		<div
-			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 {isFullscreen
+			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100 {isFullscreen
 				? 'opacity-100'
 				: ''}"
 		>

package/dist/components/preview/ImageOutput.svelte

@@ -302,7 +302,7 @@
 	<div
 		bind:this={wrapperEl}
 		class="rounded flex flex-col overflow-hidden border border-border bg-background {isFullscreen
-			? 'h-screen'
+			? 'h-dvh'
 			: ''}"
 	>
 		{#if error}

package/dist/components/preview/OutputDisplay.svelte

@@ -318,7 +318,7 @@
 					<div
 						class="right-2 top-2 absolute transition-opacity {copied
 							? 'opacity-100'
-							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}"
+							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100'}"
 					>
 						<Button onclick={copyToClipboard} size="sm">
 							{copied ? t.copied : t.copy}

package/dist/components/primitives/DataTable.svelte

@@ -3,6 +3,8 @@
 		label: string;
 		width?: string;
 		align?: 'left' | 'right';
+		/** Drop the column below 640px, where fixed widths would crush the flexible one. */
+		hideOnMobile?: boolean;
 	}
 </script>
 
@@ -19,20 +21,52 @@
 
 	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
 
-	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+	// `minmax(0, …)` so a long name truncates rather than widening its row past the others.
+	const toTemplate = (cols: DataTableColumn[]) =>
+		cols.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+	const gridTemplate = $derived(toTemplate(columns));
+	const mobileTemplate = $derived(toTemplate(columns.filter((c) => !c.hideOnMobile)));
+	// Cells come from the caller's snippet, so they're hidden by position.
+	const hiddenCols = $derived(
+		columns
+			.map((c, i) => (c.hideOnMobile ? `hide-col-${i + 1}` : ''))
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`} style:--table-cols={gridTemplate}>
+<div
+	class={`divide-y rounded-lg border ${className}`}
+	style:--table-cols={gridTemplate}
+	style:--table-cols-sm={mobileTemplate}
+>
 	<div
-		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid grid-cols-(--table-cols) bg-muted/40 text-muted-foreground uppercase"
+		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted/40 text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>
 		{/each}
 	</div>
 	{#each rows as item (getKey(item))}
-		<div class="gap-4 px-4 py-3 grid grid-cols-(--table-cols) items-center">
+		<div
+			class="data-table-row gap-4 px-4 py-3 sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) items-center {hiddenCols}"
+		>
 			{@render row(item)}
 		</div>
 	{/each}
 </div>
+
+<style>
+	@media (max-width: 639px) {
+		:global(.data-table-row.hide-col-1 > :nth-child(1)),
+		:global(.data-table-row.hide-col-2 > :nth-child(2)),
+		:global(.data-table-row.hide-col-3 > :nth-child(3)),
+		:global(.data-table-row.hide-col-4 > :nth-child(4)),
+		:global(.data-table-row.hide-col-5 > :nth-child(5)),
+		:global(.data-table-row.hide-col-6 > :nth-child(6)),
+		:global(.data-table-row.hide-col-7 > :nth-child(7)),
+		:global(.data-table-row.hide-col-8 > :nth-child(8)) {
+			display: none;
+		}
+	}
+</style>

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

@@ -2,6 +2,8 @@ export interface DataTableColumn {
     label: string;
     width?: string;
     align?: 'left' | 'right';
+    /** Drop the column below 640px, where fixed widths would crush the flexible one. */
+    hideOnMobile?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {

package/dist/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/dist/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/dist/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/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';
+
+	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/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;