@selvajs/ui 6.1.2 → 6.2.0

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    pendingLabel?: string;
+    cancelLabel?: string;
+    variant?: 'default' | 'destructive';
+    onConfirm: () => void | Promise<void>;
+};
+declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

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

@@ -56,6 +56,9 @@ interface Props {
     /** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
     viewerConfig?: ViewerConfig;
     headerRight?: Snippet;
+    navItems?: Snippet;
+    homeUrl?: string;
+    brandName?: string;
     header?: Snippet;
     externalScopeKey?: string;
     clientSlot?: ClientSlot;

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

@@ -12,6 +12,11 @@ interface SideNavProps {
     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;
 }
 declare const SideNav: Component<SideNavProps, {}, "">;

package/dist/components/preview/inputs/FileInput.svelte

@@ -2,6 +2,7 @@
 	import { Input } from '../../primitives/input';
 	import { Button } from '../../primitives/button';
 	import { Label } from '../../primitives/label';
+	import { toast } from '../../primitives/sonner';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
 	import { APP_DEFAULTS } from '../../../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/dist/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 '../../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/dist/components/primitives/Callout.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { Component } from 'svelte';
+export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
+    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";
+    };
+}, undefined, "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm", {
+    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";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    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";
+    };
+}, undefined>>;
+export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+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;
+}
+declare const Callout: Component<Props, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/primitives/index.d.ts

@@ -22,9 +22,11 @@ export { Switch } from './switch';
 export { Toaster, toast } from './sonner';
 export { ThemeSwitcher } from './theme-switcher';
 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';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable, type DataTableColumn } from './DataTable.svelte';
 export { default as FilterableDropdown, type FilterableDropdownItem } from './FilterableDropdown.svelte';
+export { default as ConfirmDialog } from '../ConfirmDialog.svelte';

package/dist/components/primitives/index.js

@@ -24,9 +24,11 @@ export { Toaster, toast } from './sonner';
 export { ThemeSwitcher } from './theme-switcher';
 // Custom components (not replaced by shadcn)
 export { default as StateDisplay } from './StateDisplay.svelte';
+export { default as Callout, calloutVariants } from './Callout.svelte';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable } from './DataTable.svelte';
 export { default as FilterableDropdown } from './FilterableDropdown.svelte';
+export { default as ConfirmDialog } from '../ConfirmDialog.svelte';

package/dist/components/viewer/SceneManager.svelte

@@ -20,17 +20,34 @@
 		 */
 		outliner: SceneOutliner;
 		sceneVersion?: number;
+		/**
+		 * Request a viewer repaint. Toggling `.visible` mutates three objects directly, and the
+		 * render loop is on-demand — without this the canvas only catches up on its ~500ms idle
+		 * repaint, so the row updates instantly and the geometry lags behind.
+		 */
+		onVisibilityChange?: () => void;
 	}
 
-	let { outliner, sceneVersion = 0 }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+
+	const toggleLayer = (objects: THREE.Object3D[]) => {
+		outliner.visibility.toggleLayer(objects);
+		onVisibilityChange?.();
+	};
+
+	const toggleObject = (object: THREE.Object3D) => {
+		outliner.toggleObject(object);
+		onVisibilityChange?.();
+	};
 
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
 	const collapsed = $derived(outliner.collapsed);
 
-	// Mirrored into runes because the outliner holds these as plain fields, not sets. Both are panel
-	// state, so reopening clears them — unlike hiding and collapse, which the outliner outlives.
+	// Panel state, so reopening clears it — unlike hiding and collapse, which the outliner outlives.
+	// Owned here rather than on the outliner: writing it back from the derived below is what the
+	// Svelte 5 `state_unsafe_mutation` rule forbids.
 	let searchQuery = $state('');
 	let anchor = $state<string | null>(null);
 
@@ -45,9 +62,7 @@
 
 	const layerGroups = $derived.by(() => {
 		void sceneVersion;
-		void searchQuery;
-		outliner.searchQuery = searchQuery;
-		return outliner.layerGroups();
+		return outliner.layerGroups(searchQuery);
 	});
 
 	// `SvelteSet.has()` is the reactive read, so go through the set rather than calling
@@ -62,10 +77,11 @@
 	// Reading `anchor` keeps the shift-range dependent on it; the outliner owns the value.
 	const selectObject = (uuid: string, event: MouseEvent) => {
 		void anchor;
-		outliner.select(uuid, {
-			shiftKey: event.shiftKey,
-			toggleKey: event.ctrlKey || event.metaKey
-		});
+		outliner.select(
+			uuid,
+			{ shiftKey: event.shiftKey, toggleKey: event.ctrlKey || event.metaKey },
+			searchQuery
+		);
 	};
 </script>
 
@@ -110,7 +126,7 @@
 
 				<button
 					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-					onclick={() => outliner.visibility.toggleLayer(objects)}
+					onclick={() => toggleLayer(objects)}
 					title={layerHidden ? t.showLayer : t.hideLayer}
 					aria-label={layerHidden ? t.showLayer : t.hideLayer}
 				>
@@ -162,7 +178,7 @@
 								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
 								onclick={(e) => {
 									e.stopPropagation();
-									outliner.toggleObject(object);
+									toggleObject(object);
 								}}
 								title={isHidden ? t.showObject : t.hideObject}
 								aria-label={isHidden ? t.showObject : t.hideObject}

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

@@ -7,6 +7,12 @@ interface Props {
      */
     outliner: SceneOutliner;
     sceneVersion?: number;
+    /**
+     * Request a viewer repaint. Toggling `.visible` mutates three objects directly, and the
+     * render loop is on-demand — without this the canvas only catches up on its ~500ms idle
+     * repaint, so the row updates instantly and the geometry lags behind.
+     */
+    onVisibilityChange?: () => void;
 }
 declare const SceneManager: import("svelte").Component<Props, {}, "">;
 type SceneManager = ReturnType<typeof SceneManager>;

package/dist/components/viewer/Viewer.svelte

@@ -121,6 +121,7 @@
 	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
 	let clearEdges: ((root: THREE.Object3D) => void) | 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 fitToView: (() => void) | null = null;
@@ -210,6 +211,7 @@
 		applyEdges = init.applyEdges;
 		clearEdges = init.clearEdges;
 		invalidate = init.invalidate;
+		captureImage = init.captureImage;
 		setLook = init.setLook;
 		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
@@ -322,23 +324,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>
 
@@ -569,7 +567,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.1.2",
+  "version": "6.2.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/schemas": "^5.0.1",
+    "@selvajs/solve": "^1.0.5",
     "@selvajs/compute": "^4.0.2",
-    "@selvajs/solve": "^1.0.4",
-    "@selvajs/visualization": "^1.0.1",
-    "@selvajs/schemas": "^5.0.1"
+    "@selvajs/visualization": "^1.1.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -90,11 +90,11 @@
     "svelte": "5.56.9",
     "tailwind-variants": "^3.3.1",
     "vitest": "^4.1.10",
+    "@selvajs/compute": "4.0.2",
     "@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/solve": "1.0.5",
+    "@selvajs/visualization": "1.1.0"
   },
   "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/SceneManager.svelte

@@ -20,17 +20,34 @@
 		 */
 		outliner: SceneOutliner;
 		sceneVersion?: number;
+		/**
+		 * Request a viewer repaint. Toggling `.visible` mutates three objects directly, and the
+		 * render loop is on-demand — without this the canvas only catches up on its ~500ms idle
+		 * repaint, so the row updates instantly and the geometry lags behind.
+		 */
+		onVisibilityChange?: () => void;
 	}
 
-	let { outliner, sceneVersion = 0 }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+
+	const toggleLayer = (objects: THREE.Object3D[]) => {
+		outliner.visibility.toggleLayer(objects);
+		onVisibilityChange?.();
+	};
+
+	const toggleObject = (object: THREE.Object3D) => {
+		outliner.toggleObject(object);
+		onVisibilityChange?.();
+	};
 
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
 	const collapsed = $derived(outliner.collapsed);
 
-	// Mirrored into runes because the outliner holds these as plain fields, not sets. Both are panel
-	// state, so reopening clears them — unlike hiding and collapse, which the outliner outlives.
+	// Panel state, so reopening clears it — unlike hiding and collapse, which the outliner outlives.
+	// Owned here rather than on the outliner: writing it back from the derived below is what the
+	// Svelte 5 `state_unsafe_mutation` rule forbids.
 	let searchQuery = $state('');
 	let anchor = $state<string | null>(null);
 
@@ -45,9 +62,7 @@
 
 	const layerGroups = $derived.by(() => {
 		void sceneVersion;
-		void searchQuery;
-		outliner.searchQuery = searchQuery;
-		return outliner.layerGroups();
+		return outliner.layerGroups(searchQuery);
 	});
 
 	// `SvelteSet.has()` is the reactive read, so go through the set rather than calling
@@ -62,10 +77,11 @@
 	// Reading `anchor` keeps the shift-range dependent on it; the outliner owns the value.
 	const selectObject = (uuid: string, event: MouseEvent) => {
 		void anchor;
-		outliner.select(uuid, {
-			shiftKey: event.shiftKey,
-			toggleKey: event.ctrlKey || event.metaKey
-		});
+		outliner.select(
+			uuid,
+			{ shiftKey: event.shiftKey, toggleKey: event.ctrlKey || event.metaKey },
+			searchQuery
+		);
 	};
 </script>
 
@@ -110,7 +126,7 @@
 
 				<button
 					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-					onclick={() => outliner.visibility.toggleLayer(objects)}
+					onclick={() => toggleLayer(objects)}
 					title={layerHidden ? t.showLayer : t.hideLayer}
 					aria-label={layerHidden ? t.showLayer : t.hideLayer}
 				>
@@ -162,7 +178,7 @@
 								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
 								onclick={(e) => {
 									e.stopPropagation();
-									outliner.toggleObject(object);
+									toggleObject(object);
 								}}
 								title={isHidden ? t.showObject : t.hideObject}
 								aria-label={isHidden ? t.showObject : t.hideObject}

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

@@ -121,6 +121,7 @@
 	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
 	let clearEdges: ((root: THREE.Object3D) => void) | 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 fitToView: (() => void) | null = null;
@@ -210,6 +211,7 @@
 		applyEdges = init.applyEdges;
 		clearEdges = init.clearEdges;
 		invalidate = init.invalidate;
+		captureImage = init.captureImage;
 		setLook = init.setLook;
 		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
@@ -322,23 +324,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>
 
@@ -569,7 +567,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>