@selvajs/ui 6.1.2 → 6.3.0

package/dist/components/viewer/Viewer.svelte

@@ -5,6 +5,7 @@
 		initThree,
 		updateScene,
 		LOOKS,
+		LOOK_PRESETS,
 		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
@@ -118,11 +119,13 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
-	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
-	let clearEdges: ((root: THREE.Object3D) => void) | null = null;
+	let applyEdges: ThreeViewer['applyEdges'] | null = null;
+	let clearEdges: ThreeViewer['clearEdges'] | null = null;
 	let invalidate: (() => void) | null = null;
+	let captureImage: ThreeViewer['captureImage'] | null = null;
 	let setLook: ((look: Look) => void) | null = null;
 	let updateGridScale: (() => void) | null = null;
+	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -144,10 +147,15 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit.
+	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit; the
+	// map only overrides the names that don't survive capitalisation ('xray' → 'X-Ray').
+	const LOOK_LABELS: Partial<Record<Look, string>> = {
+		xray: 'X-Ray',
+		lineart: 'Line Art'
+	};
 	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
 		look,
-		label: look.charAt(0).toUpperCase() + look.slice(1)
+		label: LOOK_LABELS[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
 	}));
 
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
@@ -175,12 +183,11 @@
 	onMount(() => {
 		if (!canvas) return;
 
-		// Only what differs from the library defaults. The sun and shadows are off because the
-		// technical look doesn't need them — flat ambient plus the HDR environment carry it.
+		// Only what differs from the library defaults. Sunlight, shadows and AO are left ON (the
+		// library default) and their strength comes from the look — with IBL alone every face of a
+		// box lights nearly equally and the model reads as a flat white silhouette.
 		const opts: ThreeInitializerOptions = {
 			look: renderStyle,
-			lighting: { enableSunlight: false },
-			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
@@ -210,8 +217,10 @@
 		applyEdges = init.applyEdges;
 		clearEdges = init.clearEdges;
 		invalidate = init.invalidate;
+		captureImage = init.captureImage;
 		setLook = init.setLook;
 		updateGridScale = init.updateGridScale;
+		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -253,22 +262,84 @@
 		invalidate?.();
 	}
 
+	// Edges the lineart look switched on, so leaving it can put the user's own choice back rather
+	// than stranding them with overlays they never asked for.
+	let edgesBeforeLineDrawing: boolean | null = null;
+
 	function setRenderStyle(look: Look) {
 		if (!setLook || look === renderStyle) return;
+		const wasLineDrawing = LOOK_PRESETS[renderStyle].requiresEdges === true;
 		renderStyle = look;
 		setLook(look);
+
+		// A look never drives the overlay itself; honouring `requiresEdges` is the host's call. Without
+		// edges lineart is blank white shapes, so entering it forces them on.
+		if (LOOK_PRESETS[look].requiresEdges) {
+			if (!wasLineDrawing) edgesBeforeLineDrawing = edgesVisible;
+			if (!edgesVisible) {
+				edgesVisible = true;
+			} else if (!wasLineDrawing && scene) {
+				// Already-attached overlays carry the old fade setting, and addEdges skips a mesh that
+				// has one — so they have to go before the un-faded pass can replace them.
+				clearEdges?.(scene);
+			}
+			applyEdgeState();
+		} else if (wasLineDrawing && edgesBeforeLineDrawing !== null) {
+			edgesVisible = edgesBeforeLineDrawing;
+			// Rebuild either way: staying on means swapping the un-faded overlays back for faded ones.
+			if (edgesVisible && scene) clearEdges?.(scene);
+			applyEdgeState();
+			edgesBeforeLineDrawing = null;
+		} else if (edgesVisible && scene) {
+			// Neither look is a line drawing, but an overlay's colour is derived from its mesh's
+			// material — which `setLook` just repainted. addEdges skips meshes that already have an
+			// overlay, so without a rebuild the edges keep the previous look's colour.
+			clearEdges?.(scene);
+			applyEdgeState();
+		}
+	}
+
+	// Meshes past the overlay budget get the screen-space fallback instead, and that pass thresholds
+	// a depth/normal discontinuity to decide what is an edge — so a shallow crease sitting near the
+	// cutoff flips on and off as the camera turns a degree. Tolerable as a hint over a shaded model;
+	// in a line drawing it is the picture itself flickering. Raised far enough that a building model
+	// gets real overlays throughout: they cost draw calls, but they are stable under orbit.
+	const LINE_ART_MAX_OVERLAYS = 20_000;
+
+	// Edge colour is normally derived per mesh from that mesh's own material, darkened. lineart
+	// repaints every material near-white, so a derived edge lands at rgb(62,62,62) or lighter — and
+	// worse, `setLook` and `applyEdges` are independent, so whether the derivation sees the white
+	// override or the model's original colours depends on which ran last. That is the real source of
+	// the "edges look different every time" behaviour. Forcing a colour makes it deterministic.
+	const LINE_ART_EDGE_COLOR = 0x1a1d21;
+
+	// The density fade sets opacity per overlay, so a finely-detailed mesh fades as a whole and its
+	// long silhouette edges go with it — in a line drawing that erases the only thing on screen, and
+	// it recomputes per frame, so edges pop while orbiting. Shaded looks keep it: there it just
+	// softens outlines on a model you can still see.
+	function edgeOverrides() {
+		return LOOK_PRESETS[renderStyle].requiresEdges
+			? {
+					distanceFade: false,
+					maxOverlays: LINE_ART_MAX_OVERLAYS,
+					color: LINE_ART_EDGE_COLOR
+				}
+			: undefined;
 	}
 
 	// `applyEdges` is idempotent per mesh, so the repeated calls after each solve add no duplicate
 	// overlays; `clearEdges` is its inverse.
 	function applyEdgeState() {
 		if (!scene) return;
-		if (edgesVisible) applyEdges?.(scene);
+		if (edgesVisible) applyEdges?.(scene, edgeOverrides());
 		else clearEdges?.(scene);
 	}
 
 	function toggleEdges() {
 		edgesVisible = !edgesVisible;
+		// Toggling by hand inside lineart overrides what that look forced, so the pre-look value is
+		// stale — leaving the look must not undo the user's more recent explicit choice.
+		if (LOOK_PRESETS[renderStyle].requiresEdges) edgesBeforeLineDrawing = null;
 		applyEdgeState();
 	}
 
@@ -278,10 +349,16 @@
 			// Untracked because toggleEdges() already handles the toggle directly — reading
 			// `edgesVisible` tracked here would re-trigger a full solve.
 			untrack(() => {
+				// The new meshes carry the materials the parser built, so a look that overrides them
+				// (arctic, x-ray) has to be re-applied or the solve silently reverts to shaded.
+				setLook?.(renderStyle);
 				// updateScene discarded the previous solve's overlays along with its content.
-				if (edgesVisible) applyEdges?.(scene!);
+				if (edgesVisible) applyEdges?.(scene!, edgeOverrides());
 				// Rescale the grid so cells and fade match the new content's extent.
 				updateGridScale?.();
+				// The shadow frustum is sized to scene content, so it has to follow the new geometry —
+				// left at the old extent, shadows go blocky or fall outside the map entirely.
+				updateShadowBounds?.();
 				// The rebuild un-hid everything; the outliner keys hidden state on Grasshopper
 				// identity, not on the instances just discarded, so it can re-hide it.
 				outliner?.applyTo();
@@ -311,8 +388,7 @@
 		const EXCLUDED_KEYS = new Set([
 			'name',
 			'layer',
-			'originalIndex',
-			'sourceComponentId',
+			'id',
 			'vertexCount',
 			'faceCount',
 			'vertexOffset',
@@ -322,23 +398,19 @@
 		return usefulEntries.length > 0;
 	}
 
-	function downloadScreenshot() {
-		if (!canvas) return;
-
-		requestAnimationFrame(() => {
-			canvas.toBlob((blob) => {
-				if (!blob) return;
-				const url = URL.createObjectURL(blob);
-				const link = document.createElement('a');
-				const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-				link.href = url;
-				link.download = `viewer-${timestamp}.png`;
-				document.body.appendChild(link);
-				link.click();
-				document.body.removeChild(link);
-				URL.revokeObjectURL(url);
-			});
-		});
+	async function downloadScreenshot() {
+		const blob = await captureImage?.();
+		if (!blob) return;
+
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+		link.href = url;
+		link.download = `viewer-${timestamp}.png`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
 	}
 </script>
 
@@ -422,10 +494,10 @@
 									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
 										{#if projection === 'perspective'}
 											<Square class="h-4 w-4" />
-											{t.switchTo2D}
+											{t.switchToOrthographic}
 										{:else}
 											<Box class="h-4 w-4" />
-											{t.switchTo3D}
+											{t.switchToPerspective}
 										{/if}
 									</DropdownMenu.Item>
 
@@ -569,7 +641,7 @@
 		{#if sceneManagerOpen && scene && outliner}
 			<Resizable.Handle withHandle />
 			<Resizable.Pane id="scene-manager" order={2} defaultSize={15} minSize={8} maxSize={30}>
-				<SceneManager {outliner} {sceneVersion} />
+				<SceneManager {outliner} {sceneVersion} onVisibilityChange={() => invalidate?.()} />
 			</Resizable.Pane>
 		{/if}
 	</Resizable.PaneGroup>

package/dist/i18n/messages.d.ts

@@ -1,8 +1,8 @@
 export type Locale = 'en' | 'de';
 export interface ViewerMessages {
     toolsMenu: string;
-    switchTo2D: string;
-    switchTo3D: string;
+    switchToOrthographic: string;
+    switchToPerspective: string;
     fitToView: string;
     views: string;
     measure: string;
@@ -24,6 +24,8 @@ export interface ViewerMessages {
     clearSearch: string;
     expandLayer: string;
     collapseLayer: string;
+    expandAll: string;
+    collapseAll: string;
     showLayer: string;
     hideLayer: string;
     showObject: string;

package/dist/i18n/messages.js

@@ -7,8 +7,8 @@
 // cannot be translated here.
 const en = {
     toolsMenu: 'Viewer tools',
-    switchTo2D: 'Switch to 2D',
-    switchTo3D: 'Switch to 3D',
+    switchToOrthographic: 'Orthographic camera',
+    switchToPerspective: 'Perspective camera',
     fitToView: 'Fit to view',
     views: 'Views',
     measure: 'Measure',
@@ -30,6 +30,8 @@ const en = {
     clearSearch: 'Clear search',
     expandLayer: 'Expand layer',
     collapseLayer: 'Collapse layer',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
     showLayer: 'Show layer',
     hideLayer: 'Hide layer',
     showObject: 'Show object',
@@ -56,8 +58,8 @@ const en = {
 };
 const de = {
     toolsMenu: 'Viewer-Werkzeuge',
-    switchTo2D: 'Zu 2D wechseln',
-    switchTo3D: 'Zu 3D wechseln',
+    switchToOrthographic: 'Orthografische Kamera',
+    switchToPerspective: 'Perspektivische Kamera',
     fitToView: 'Ansicht anpassen',
     views: 'Ansichten',
     measure: 'Messen',
@@ -79,6 +81,8 @@ const de = {
     clearSearch: 'Suche löschen',
     expandLayer: 'Ebene aufklappen',
     collapseLayer: 'Ebene zuklappen',
+    expandAll: 'Alle aufklappen',
+    collapseAll: 'Alle zuklappen',
     showLayer: 'Ebene einblenden',
     hideLayer: 'Ebene ausblenden',
     showObject: 'Objekt einblenden',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.1.2",
+  "version": "6.3.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -59,10 +59,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.185.1",
-    "@selvajs/compute": "^4.0.2",
-    "@selvajs/solve": "^1.0.4",
-    "@selvajs/visualization": "^1.0.1",
-    "@selvajs/schemas": "^5.0.1"
+    "@selvajs/compute": "^4.1.1",
+    "@selvajs/visualization": "^1.2.0",
+    "@selvajs/schemas": "^5.0.2",
+    "@selvajs/solve": "^1.0.8"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -72,7 +72,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.30.0",
+    "@lucide/svelte": "^1.35.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
@@ -82,19 +82,19 @@
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.3",
-    "@sveltejs/kit": "2.70.2",
+    "@sveltejs/kit": "2.70.3",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/three": "^0.185.4",
-    "bits-ui": "^2.18.0",
+    "bits-ui": "^2.19.0",
     "rimraf": "^6.1.3",
-    "svelte": "5.56.9",
+    "svelte": "5.56.10",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
+    "@selvajs/compute": "4.1.1",
     "@selvajs/config": "0.0.4",
-    "@selvajs/schemas": "5.0.1",
-    "@selvajs/visualization": "1.0.1",
-    "@selvajs/solve": "1.0.4",
-    "@selvajs/compute": "4.0.2"
+    "@selvajs/visualization": "1.2.0",
+    "@selvajs/schemas": "5.0.2",
+    "@selvajs/solve": "1.0.8"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as AlertDialog from './primitives/alert-dialog/index.js';
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel = 'Continue',
+		pendingLabel,
+		cancelLabel = 'Cancel',
+		variant = 'default',
+		onConfirm
+	}: {
+		open?: boolean;
+		title: string;
+		description?: string;
+		confirmLabel?: string;
+		pendingLabel?: string;
+		cancelLabel?: string;
+		variant?: 'default' | 'destructive';
+		onConfirm: () => void | Promise<void>;
+	} = $props();
+
+	let pending = $state(false);
+
+	async function handleConfirm() {
+		pending = true;
+		try {
+			await onConfirm();
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={(next) => !pending && (open = next)}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{title}</AlertDialog.Title>
+			{#if description}
+				<AlertDialog.Description class={variant === 'destructive' ? 'text-destructive' : undefined}>
+					{description}
+				</AlertDialog.Description>
+			{/if}
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={pending}>{cancelLabel}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleConfirm}
+				disabled={pending}
+				class={variant === 'destructive'
+					? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
+					: undefined}
+			>
+				{pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/src/lib/components/compute/ComputeApp.svelte

@@ -72,6 +72,10 @@
 		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
 		viewerConfig?: ViewerConfig;
 		headerRight?: Snippet;
+		// Primary nav rendered next to the brand, so the viewer keeps the app-wide nav.
+		navItems?: Snippet;
+		homeUrl?: string;
+		brandName?: string;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
 		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
@@ -106,6 +110,9 @@
 		footerItemId = 'footer-item',
 		footerItemPriority = 0,
 		headerRight,
+		navItems,
+		homeUrl,
+		brandName,
 		header,
 		onReady,
 		onViewerReady,
@@ -215,6 +222,9 @@
 		showFooter
 		title={pageTitle}
 		{showModeToggle}
+		{navItems}
+		{homeUrl}
+		{brandName}
 		{copyrightName}
 		{footerText}
 		{header}

package/src/lib/components/compute/ParameterPresetManager.svelte

@@ -8,7 +8,7 @@
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
-	import { Button, Input, Label, Textarea, Dialog, Card } from '../primitives';
+	import { Button, Input, Label, Textarea, Dialog, Card, toast } from '../primitives';
 
 	import type { ActionButton } from '../../types/actionButton';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
@@ -68,7 +68,7 @@
 
 	async function handleExport() {
 		if (!exportName.trim()) {
-			alert(t.saveNameRequired);
+			toast.error(t.saveNameRequired);
 			return;
 		}
 
@@ -108,7 +108,7 @@
 			const imported = await importStateFromJson(input.files[0]);
 			tryLoad(imported);
 		} catch (error) {
-			alert(t.loadImportError + (error as Error).message);
+			toast.error(t.loadImportError + (error as Error).message);
 		}
 
 		// Reset so re-picking the same file fires `change` again.

package/src/lib/components/layout/AppShell.svelte

@@ -81,6 +81,21 @@
 	);
 
 	const bodyShellStyle = '';
+
+	// In scroll mode the page itself scrolls, so the sidenav has to be pinned below the
+	// header or it scrolls away with the content. Fixed mode already gives the row its own
+	// height and the aside its own scroll — sticky there would only shrink it to content.
+	const sidenavWrapClass = $derived(
+		_mode === 'fixed'
+			? 'flex shrink-0'
+			: 'flex shrink-0 self-start sticky top-(--header-h) 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'
+	);
 </script>
 
 <div class={rootClass}>
@@ -110,8 +125,10 @@
 
 	<div class={bodyShellClass} style={bodyShellStyle}>
 		{#if sidenav}
-			{@render sidenav()}
-			<main class="flex-1 overflow-y-auto">
+			<div class={sidenavWrapClass}>
+				{@render sidenav()}
+			</div>
+			<main class={mainClass}>
 				{@render children()}
 			</main>
 		{:else}

package/src/lib/components/layout/SideNav.svelte

@@ -19,10 +19,22 @@
 		eyebrow?: string;
 		header?: Snippet;
 		footer?: Snippet;
+		/**
+		 * Off when the divider is drawn by the surrounding layout instead — a sticky sidenav
+		 * only reaches as far as its own content, so its border would stop mid-page.
+		 */
+		border?: boolean;
 		class?: string;
 	}
 
-	let { items, eyebrow, header, footer, class: className = '' }: SideNavProps = $props();
+	let {
+		items,
+		eyebrow,
+		header,
+		footer,
+		border = true,
+		class: className = ''
+	}: SideNavProps = $props();
 
 	function isActive(item: SideNavItem): boolean {
 		const path = page.url.pathname;
@@ -32,7 +44,9 @@
 </script>
 
 <aside
-	class={`w-60 flex shrink-0 flex-col overflow-y-auto border-r border-border bg-background ${className}`}
+	class={`w-60 flex h-full shrink-0 flex-col overflow-y-auto bg-background ${
+		border ? 'border-r border-border' : ''
+	} ${className}`}
 >
 	{#if eyebrow}
 		<div class="px-4 pt-5 pb-3">

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -2,6 +2,7 @@
 	import { Input } from '$lib/components/primitives/input';
 	import { Button } from '$lib/components/primitives/button';
 	import { Label } from '$lib/components/primitives/label';
+	import { toast } from '$lib/components/primitives/sonner';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
 	import { APP_DEFAULTS } from '$lib/constants';
 
@@ -193,7 +194,7 @@
 		const fileEnding = getFileExtension(file.name);
 
 		if (!isValidFileExtension(fileEnding)) {
-			alert(`File format not accepted: ${fileEnding}`);
+			toast.error(`File format not accepted: ${fileEnding}`);
 			return;
 		}
 
@@ -203,7 +204,7 @@
 		// note in constants.ts) — some files pass here and still 413. The URL import
 		// path applies the same cap.
 		if (file.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
-			alert(
+			toast.error(
 				`File too large: ${(file.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB).`
 			);
 			return;

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

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { Info, TriangleAlert, CircleCheck, CircleX, Lightbulb } from '@lucide/svelte';
+	import type { Component } from 'svelte';
+
+	export const calloutVariants = tv({
+		base: 'flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm',
+		variants: {
+			tone: {
+				info: 'border-info/40 bg-info/10',
+				tip: 'border-border bg-muted/40',
+				success: 'border-success/40 bg-success/10',
+				warning: 'border-warning/40 bg-warning/10',
+				danger: 'border-destructive/40 bg-destructive/10'
+			}
+		},
+		defaultVariants: { tone: 'info' }
+	});
+
+	export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
+
+	const TONE_ICON: Record<CalloutTone, Component> = {
+		info: Info,
+		tip: Lightbulb,
+		success: CircleCheck,
+		warning: TriangleAlert,
+		danger: CircleX
+	};
+
+	const TONE_ACCENT: Record<CalloutTone, string> = {
+		info: 'text-info',
+		tip: 'text-muted-foreground',
+		success: 'text-success',
+		warning: 'text-warning',
+		danger: 'text-destructive'
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '$lib/utils.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		tone?: CalloutTone;
+		title?: string;
+		/** Replaces the tone's default icon. `null` drops the icon entirely. */
+		icon?: Component | null;
+		children: Snippet;
+	}
+
+	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
+
+	const Icon = $derived(icon === undefined ? TONE_ICON[tone] : icon);
+</script>
+
+<div
+	class={cn(calloutVariants({ tone }), className)}
+	role={tone === 'warning' || tone === 'danger' ? 'alert' : undefined}
+	{...restProps}
+>
+	{#if Icon}
+		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', TONE_ACCENT[tone])} />
+	{/if}
+	<div class="min-w-0 space-y-1">
+		{#if title}
+			<p class={cn('leading-tight font-medium', TONE_ACCENT[tone])}>{title}</p>
+		{/if}
+		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+			{@render children()}
+		</div>
+	</div>
+</div>

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

@@ -32,6 +32,7 @@ export { ThemeSwitcher } from './theme-switcher';
 
 // Custom components (not replaced by shadcn)
 export { default as StateDisplay } from './StateDisplay.svelte';
+export { default as Callout, calloutVariants, type CalloutTone } from './Callout.svelte';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
@@ -41,3 +42,4 @@ export {
 	default as FilterableDropdown,
 	type FilterableDropdownItem
 } from './FilterableDropdown.svelte';
+export { default as ConfirmDialog } from '../ConfirmDialog.svelte';

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

@@ -13,7 +13,7 @@
 		isFullscreen?: boolean;
 	}
 
-	const EXCLUDED_KEYS = new Set(['name', 'layer', 'originalIndex', 'sourceComponentId']);
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
 
 	let {
 		open = $bindable(),