@selvajs/ui 5.0.1 → 6.0.0-beta.1

package/README.md

@@ -1,6 +1,14 @@
 # @selvajs/ui
 
-Shared Svelte components, utilities, and theme system for Selva applications.
+The Svelte layer over Selva's framework-free cores. Its npm surface is the **compute-app SDK**:
+everything an external host app needs to embed a Grasshopper-driven app, drive solves, and wire
+pre-step producers.
+
+The design system (`Button`, `Card`, `Dialog`, `AppShell`, …) lives here too, but is **internal to
+the monorepo** — it is reachable from the full barrel via the `@selvajs/source` export condition and
+never ships to npm. [`src/lib/public.ts`](./src/lib/public.ts) is the authoritative list of what a
+published consumer can import; promote a primitive there explicitly rather than assuming it is
+available.
 
 ## Installation
 
@@ -8,20 +16,41 @@ Shared Svelte components, utilities, and theme system for Selva applications.
 pnpm add @selvajs/ui
 ```
 
-Peer dependencies required: `svelte ^5`, `@sveltejs/kit ^2`, `bits-ui ^2`, `tailwind-variants ^3`, `@selvajs/compute ^1`
+Peer dependencies: `svelte ^5`, `@sveltejs/kit ^2`, `bits-ui ^2`, `tailwind-variants ^3`, plus the
+Selva cores this package wraps — `@selvajs/compute`, `@selvajs/schemas`, `@selvajs/solve`, and
+`@selvajs/visualization`.
+
+`three` is an **optional** peer: install it only if you use `Viewer`, the part that wraps
+`@selvajs/visualization`.
 
 ## Usage
 
+Embed a whole Grasshopper-driven app:
+
+```svelte
+<script lang="ts">
+	import { ComputeApp } from '@selvajs/ui';
+</script>
+```
+
+Or render meshes on their own, outside a `ComputeApp` host:
+
 ```svelte
 <script lang="ts">
-	import { Button, Card, Input } from '@selvajs/ui';
+	import { Viewer, type ViewerConfig } from '@selvajs/ui';
 </script>
 ```
 
+To drive a solve session yourself rather than letting `ComputeApp` own it:
+
 ```typescript
-import { cn, debounce, themeStore } from '@selvajs/ui';
+import { useSolveSession } from '@selvajs/ui';
 ```
 
+The session itself lives in `@selvajs/solve/client` and is framework-free. Inside a Svelte
+component always use `useSolveSession` — the raw `createSolveSession` factory returns correct
+values that never re-render.
+
 ## Styles
 
 In your `app.css`:
@@ -30,16 +59,20 @@ In your `app.css`:
 @import '@selvajs/ui/styles/base.css';
 ```
 
-Themes are available under `@selvajs/ui/styles/themes/*`.
+Themes are available under `@selvajs/ui/styles/themes/*` — `selva`, `neutral`, `ocean`, and
+`cyberpunk`.
+
+## Schema types
 
-## Generated Types
+Types generated from `packages/schemas/ui-schema.json` are published by `@selvajs/schemas`, not
+re-exported here:
 
 ```typescript
-import type { UISchema } from '@selvajs/ui';
+import type { SelvaUISchema } from '@selvajs/schemas';
 ```
 
-Types are generated from `packages/schemas/ui-schema.json`. After modifying the schema, run:
+After modifying the schema, run:
 
 ```bash
-cd packages/schemas && pnpm run generate:all
+cd packages/schemas && pnpm run generate
 ```

package/dist/components/compute/ComputeApp.svelte

@@ -3,13 +3,13 @@
 	import { page } from '$app/state';
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import type { ActionButton } from '../../types/actionButton';
-	import type { SolveFn } from '../../types/solveFn';
+	import type { SolveFn } from '@selvajs/solve/shared';
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
-	import {
-		createSolveSession,
-		createRequestResponseDriver
-	} from '../../compute/createSolveSession.svelte';
+	import { createRequestResponseDriver } from '@selvajs/solve/client';
+	import type { RetainedSolveResult } from '@selvajs/solve/client';
+	import { meshPolicy } from '@selvajs/visualization/parse';
+	import { useSolveSession } from '../../compute/useSolveSession.svelte';
 	import { useFooterItem } from '../../composables/useFooterItem.svelte';
 	import { hexToOklch } from '../../utils/color';
 	import AppShell from '../layout/AppShell.svelte';
@@ -44,13 +44,25 @@
 		copyrightName?: string;
 		/** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
 		footerText?: string;
-		/** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
-		solveTimeoutMs?: number;
+		/**
+		 * How long one solve may take before the client aborts it (ms). Required: pass
+		 * the same value the server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), so the client
+		 * doesn't abort a solve that would have finished.
+		 */
+		solveDeadlineMs: number;
 		footerComponent?: any;
 		footerComponentProps?: () => Record<string, unknown>;
 		footerItemId?: string;
 		footerItemPriority?: number;
-		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
+		onReady?: (api: {
+			loadValues: (values: Record<string, unknown>) => void;
+			/**
+			 * The last result reported to the session — the one the viewer is showing, carrying
+			 * `source`/`values` even when a memo hit served it. Null before the first solve.
+			 * A getter, not a snapshot: `onReady` fires once.
+			 */
+			getLastResult: () => RetainedSolveResult | null;
+		}) => void;
 		headerRight?: Snippet;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
@@ -84,7 +96,7 @@
 		presetLabels,
 		copyrightName,
 		footerText,
-		solveTimeoutMs,
+		solveDeadlineMs,
 		footerComponent,
 		footerComponentProps,
 		footerItemId = 'footer-item',
@@ -115,10 +127,19 @@
 	// reads the reporter lazily so it can capture the session it's wired into.
 	// svelte-ignore state_referenced_locally
 	const driver = createRequestResponseDriver(onSolve, () => session, {
-		timeout: solveTimeoutMs
+		solveDeadlineMs,
+		// The driver's result memo caches whole solve results, meshes included — and the viewer
+		// disposes what it renders on the next scene update. `@selvajs/solve` keeps meshes opaque,
+		// so the three.js clone/dispose rules are injected from the renderer that owns them
+		// (audit C1). Without this a memo hit serves an already-disposed mesh.
+		meshPolicy,
+		// `session.isSolving` forwards to the driver, which the session can't observe on its
+		// own — republish so the spinner and disabled states track it. Deferred into a
+		// callback, so it reads `session` after initialization rather than during it.
+		onChange: () => session.notify()
 	});
 	// svelte-ignore state_referenced_locally
-	const session = createSolveSession({
+	const session = useSolveSession({
 		schema,
 		scopeKey: externalScopeKey || definitionKey || schema?.id || '',
 		driver
@@ -129,7 +150,10 @@
 	const solvingIndicator = createSolvingIndicator(() => session.isSolving);
 
 	$effect(() => {
-		onReady?.({ loadValues: (incoming) => session.loadValues(incoming) });
+		onReady?.({
+			loadValues: (incoming) => session.loadValues(incoming),
+			getLastResult: () => session.lastResult
+		});
 	});
 
 	let previousDefinitionKey = $state('');

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
-import type { SolveFn } from '../../types/solveFn';
+import type { SolveFn } from '@selvajs/solve/shared';
 import type { PresetLabels } from '../../types/presetLabels';
+import type { RetainedSolveResult } from '@selvajs/solve/client';
 import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 import type { Locale } from '../../i18n/messages';
 import type { Snippet } from 'svelte';
@@ -28,14 +29,24 @@ interface Props {
     copyrightName?: string;
     /** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
     footerText?: string;
-    /** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
-    solveTimeoutMs?: number;
+    /**
+     * How long one solve may take before the client aborts it (ms). Required: pass
+     * the same value the server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), so the client
+     * doesn't abort a solve that would have finished.
+     */
+    solveDeadlineMs: number;
     footerComponent?: any;
     footerComponentProps?: () => Record<string, unknown>;
     footerItemId?: string;
     footerItemPriority?: number;
     onReady?: (api: {
         loadValues: (values: Record<string, unknown>) => void;
+        /**
+         * The last result reported to the session — the one the viewer is showing, carrying
+         * `source`/`values` even when a memo hit served it. Null before the first solve.
+         * A getter, not a snapshot: `onReady` fires once.
+         */
+        getLastResult: () => RetainedSolveResult | null;
     }) => void;
     headerRight?: Snippet;
     header?: Snippet;

package/dist/components/primitives/textarea/textarea.svelte

@@ -19,5 +19,4 @@
 		className
 	)}
 	bind:value
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>

package/dist/components/viewer/SceneManager.svelte

@@ -1,173 +1,85 @@
 <script lang="ts">
 	import * as THREE from 'three';
 	import { Eye, EyeOff, ChevronRight, Search, X } from '@lucide/svelte';
-	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+	import {
+		getObjectLabel,
+		getTrackingKey,
+		getTypeLabel,
+		type SceneOutliner
+	} from '@selvajs/visualization/scene';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
 
 	interface Props {
-		scene: THREE.Scene;
+		/**
+		 * Owned by `Viewer.svelte`, not built here: this panel unmounts when it is closed, and
+		 * hidden objects have to stay hidden — and keep being re-hidden after each solve — while it
+		 * is. Its state is backed by SvelteSets, so mutating one re-renders this list.
+		 */
+		outliner: SceneOutliner;
 		sceneVersion?: number;
 	}
 
-	let { scene = $bindable(), sceneVersion = 0 }: Props = $props();
+	let { outliner, sceneVersion = 0 }: Props = $props();
 
-	// Viewer aids (grid, floor, measurement overlay, CSS2D label layer) are tagged with these ids by
-	// @selvajs/compute. They aren't scene content, so they're hidden from the object list.
-	const HELPER_IDS = new Set(['grid', 'floor', 'label-layer', 'measure']);
+	// All list logic (content filtering, layer grouping, search, visibility, selection) lives in
+	// @selvajs/visualization/scene. This component only renders it and forwards clicks.
+	// 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);
 
-	// Content objects of the scene, recomputed only when a solve bumps `sceneVersion` (scene.children is
-	// a plain array the library mutates in place, so that counter is the sole reactive trigger). Derived
-	// — not a function — so the several template sites that read it share one walk per solve instead of
-	// re-filtering scene.children on every render.
+	// Mirrored into runes because the outliner holds them as plain fields, not sets. Both start
+	// fresh: the search box and the shift-anchor are panel state, so reopening the panel clears
+	// them, while hiding and collapse persist in the outliner that outlives it.
+	let searchQuery = $state('');
+	let anchor = $state<string | null>(null);
+
+	$effect(() => outliner.onAnchorChange((next) => (anchor = next)));
+
+	// `scene.children` is a plain array the render layer mutates in place, so a solve bumping
+	// `sceneVersion` is the only signal that content changed. Both derivations below read it, which
+	// is what makes one walk per solve serve every template site that needs the list.
 	const sceneObjects = $derived.by(() => {
 		void sceneVersion;
-		return scene.children.filter(
-			(obj) =>
-				!(obj instanceof THREE.Camera) &&
-				!(obj instanceof THREE.Light) &&
-				!HELPER_IDS.has(obj.userData?.id)
-		);
+		return outliner.objects();
 	});
 
-	// Content grouped by layer. Derived from `sceneObjects`, so the grouping map is rebuilt once per
-	// solve rather than every time the list renders.
 	const layerGroups = $derived.by(() => {
-		const groups = new SvelteMap<string, THREE.Object3D[]>();
-		for (const obj of sceneObjects) {
-			const layer: string = obj.userData?.layer || obj.userData?.category || 'Default';
-			if (!groups.has(layer)) groups.set(layer, []);
-			groups.get(layer)!.push(obj);
-		}
-		return groups;
-	});
-
-	let hiddenUuids = new SvelteSet<string>();
-
-	let collapsedLayers = new SvelteSet<string>();
-
-	const setObjectVisible = (object: THREE.Object3D, visible: boolean) => {
-		object.visible = visible;
-		object.traverse((child) => {
-			child.visible = visible;
-		});
-		if (visible) {
-			hiddenUuids.delete(object.uuid);
-		} else {
-			hiddenUuids.add(object.uuid);
-		}
-	};
-
-	const toggleObject = (object: THREE.Object3D) => {
-		if (selectedUuids.has(object.uuid) && selectedUuids.size > 1) {
-			const selected = sceneObjects.filter((o) => selectedUuids.has(o.uuid));
-			const allHidden = selected.every((o) => hiddenUuids.has(o.uuid));
-			for (const o of selected) setObjectVisible(o, allHidden);
-		} else {
-			setObjectVisible(object, hiddenUuids.has(object.uuid));
-		}
-	};
-
-	const isLayerHidden = (objects: THREE.Object3D[]) =>
-		objects.every((obj) => hiddenUuids.has(obj.uuid));
-
-	const isLayerPartial = (objects: THREE.Object3D[]) => {
-		const hidden = objects.filter((obj) => hiddenUuids.has(obj.uuid)).length;
-		return hidden > 0 && hidden < objects.length;
-	};
-
-	const toggleLayer = (_layerName: string, objects: THREE.Object3D[]) => {
-		const allHidden = isLayerHidden(objects);
-		for (const obj of objects) {
-			setObjectVisible(obj, allHidden);
-		}
-	};
-
-	const toggleLayerCollapsed = (layerName: string) => {
-		if (collapsedLayers.has(layerName)) {
-			collapsedLayers.delete(layerName);
-		} else {
-			collapsedLayers.add(layerName);
-		}
-	};
-
-	const prettyType = (type: string) =>
-		type
-			.replace(/^Line(Segments)?2$/, 'Curve')
-			.replace('Mesh', '')
-			.replace('Object3D', 'Obj') || type;
-
-	const getObjectLabel = (object: THREE.Object3D) =>
-		object.userData?.name || object.userData?.fileName || object.name || prettyType(object.type);
-
-	const getTypeLabel = (object: THREE.Object3D) => prettyType(object.type);
-
-	let searchQuery = $state('');
-
-	// Layer groups after the search filter. Derived from `layerGroups` + `searchQuery`, so filtering
-	// runs once per search keystroke — not twice per render (it's read by both the list and the
-	// empty-state check below).
-	const filteredLayerGroups = $derived.by(() => {
-		if (!searchQuery.trim()) return layerGroups;
-		const q = searchQuery.toLowerCase();
-		const filtered = new SvelteMap<string, THREE.Object3D[]>();
-		for (const [layerName, objects] of layerGroups) {
-			const matchingObjects = layerName.toLowerCase().includes(q)
-				? objects
-				: objects.filter((obj) => getObjectLabel(obj).toLowerCase().includes(q));
-			if (matchingObjects.length > 0) filtered.set(layerName, matchingObjects);
-		}
-		return filtered;
+		void sceneVersion;
+		void searchQuery;
+		outliner.searchQuery = searchQuery;
+		return outliner.layerGroups();
 	});
 
-	const getFlatVisibleUuids = (): string[] => {
-		const result: string[] = [];
-		for (const [layerName, objects] of filteredLayerGroups) {
-			if (!collapsedLayers.has(layerName)) {
-				for (const obj of objects) result.push(obj.uuid);
-			}
-		}
-		return result;
-	};
+	// Hidden state is keyed by Grasshopper identity, not by uuid, so ask the outliner rather than
+	// looking the object up in the set directly. Touching `hidden` registers the reactive read that
+	// re-renders this row when the eye is clicked.
+	// `SvelteSet.has()` is itself the reactive read, so go through the set rather than calling
+	// `visibility.isHidden` — that reads the set through a plain reference inside the outliner and
+	// would not re-render this row.
+	const isObjectHidden = (object: THREE.Object3D) => hidden.has(getTrackingKey(object));
 
-	let selectedUuids = new SvelteSet<string>();
-	let lastSelectedUuid = $state<string | null>(null);
+	// Same reason: count through the reactive set so the layer's tri-state eye tracks its objects.
+	const hiddenCount = (objects: THREE.Object3D[]) =>
+		objects.filter((object) => isObjectHidden(object)).length;
 
+	// Reading `anchor` keeps the shift-range dependent on it; the outliner owns the value.
 	const selectObject = (uuid: string, event: MouseEvent) => {
-		if (event.shiftKey && lastSelectedUuid) {
-			const flat = getFlatVisibleUuids();
-			const a = flat.indexOf(lastSelectedUuid);
-			const b = flat.indexOf(uuid);
-			if (a !== -1 && b !== -1) {
-				const [lo, hi] = a < b ? [a, b] : [b, a];
-				if (!event.ctrlKey && !event.metaKey) selectedUuids.clear();
-				for (let i = lo; i <= hi; i++) selectedUuids.add(flat[i]);
-			}
-		} else if (event.ctrlKey || event.metaKey) {
-			if (selectedUuids.has(uuid)) {
-				selectedUuids.delete(uuid);
-			} else {
-				selectedUuids.add(uuid);
-				lastSelectedUuid = uuid;
-			}
-		} else {
-			selectedUuids.clear();
-			selectedUuids.add(uuid);
-			lastSelectedUuid = uuid;
-		}
-		if (!event.shiftKey) lastSelectedUuid = uuid;
+		void anchor;
+		outliner.select(uuid, {
+			shiftKey: event.shiftKey,
+			toggleKey: event.ctrlKey || event.metaKey
+		});
 	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex h-full flex-col bg-card text-card-foreground"
-	onmousedown={() => {
-		selectedUuids.clear();
-		lastSelectedUuid = null;
-	}}
+	onmousedown={() => outliner.selection.clear()}
 >
 	<div class="px-3 py-2 gap-2 flex items-center border-b border-border">
 		<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
@@ -186,25 +98,26 @@
 	</div>
 
 	<div class="py-1 flex-1 overflow-y-auto">
-		{#each [...filteredLayerGroups] as [layerName, objects] (layerName)}
-			{@const layerHidden = isLayerHidden(objects)}
-			{@const layerPartial = isLayerPartial(objects)}
-			{@const collapsed = collapsedLayers.has(layerName)}
+		{#each [...layerGroups] as [layerName, objects] (layerName)}
+			{@const numHidden = hiddenCount(objects)}
+			{@const layerHidden = objects.length > 0 && numHidden === objects.length}
+			{@const layerPartial = numHidden > 0 && numHidden < objects.length}
+			{@const isCollapsed = collapsed.has(layerName)}
 
 			<div class="gap-1 pl-1 pr-2 py-1 group flex items-center transition-colors hover:bg-muted">
 				<button
 					class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
-					onclick={() => toggleLayerCollapsed(layerName)}
-					aria-label={collapsed ? t.expandLayer : t.collapseLayer}
+					onclick={() => outliner.toggleCollapsed(layerName)}
+					aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
 				>
 					<ChevronRight
-						class="h-3.5 w-3.5 transition-transform duration-150 {collapsed ? '' : 'rotate-90'}"
+						class="h-3.5 w-3.5 transition-transform duration-150 {isCollapsed ? '' : 'rotate-90'}"
 					/>
 				</button>
 
 				<button
 					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-					onclick={() => toggleLayer(layerName, objects)}
+					onclick={() => outliner.visibility.toggleLayer(objects)}
 					title={layerHidden ? t.showLayer : t.hideLayer}
 					aria-label={layerHidden ? t.showLayer : t.hideLayer}
 				>
@@ -230,18 +143,20 @@
 				</span>
 			</div>
 
-			{#if !collapsed}
+			{#if !isCollapsed}
 				<div role="listbox" aria-multiselectable="true" class="ml-3 border-l border-border">
 					{#each objects as object (object.uuid)}
-						{@const hidden = hiddenUuids.has(object.uuid)}
-						{@const selected = selectedUuids.has(object.uuid)}
+						<!-- Visibility is keyed by Grasshopper identity (so it survives a solve), selection
+						     by uuid (so it does not) — hence the two different lookups. -->
+						{@const isHidden = isObjectHidden(object)}
+						{@const isSelected = selected.has(object.uuid)}
 						<div
 							role="option"
-							aria-selected={selected}
+							aria-selected={isSelected}
 							tabindex="-1"
 							class="gap-1.5 pl-5 pr-2 py-0.5 flex cursor-pointer items-center transition-colors
-								{selected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
-								{hidden ? 'opacity-40' : ''}"
+								{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
+								{isHidden ? 'opacity-40' : ''}"
 							onmousedown={(e) => {
 								e.stopPropagation();
 								if (e.shiftKey) e.preventDefault();
@@ -255,12 +170,12 @@
 								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
 								onclick={(e) => {
 									e.stopPropagation();
-									toggleObject(object);
+									outliner.toggleObject(object);
 								}}
-								title={hidden ? t.showObject : t.hideObject}
-								aria-label={hidden ? t.showObject : t.hideObject}
+								title={isHidden ? t.showObject : t.hideObject}
+								aria-label={isHidden ? t.showObject : t.hideObject}
 							>
-								{#if hidden}
+								{#if isHidden}
 									<EyeOff class="h-3 w-3 text-muted-foreground/60" />
 								{:else}
 									<Eye class="h-3 w-3 text-muted-foreground" />
@@ -269,7 +184,7 @@
 
 							<!-- Object name -->
 							<span
-								class="min-w-0 text-xs flex-1 truncate {hidden
+								class="min-w-0 text-xs flex-1 truncate {isHidden
 									? 'text-muted-foreground line-through'
 									: 'text-foreground/80'}"
 							>
@@ -294,7 +209,7 @@
 				<EyeOff class="mb-2 h-5 w-5 text-muted-foreground/30" />
 				<p class="text-xs text-muted-foreground">{t.noObjects}</p>
 			</div>
-		{:else if filteredLayerGroups.size === 0}
+		{:else if layerGroups.size === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
 				<Search class="mb-2 h-5 w-5 text-muted-foreground/30" />
 				<p class="text-xs text-muted-foreground">

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

@@ -1,8 +1,13 @@
-import * as THREE from 'three';
+import { type SceneOutliner } from '@selvajs/visualization/scene';
 interface Props {
-    scene: THREE.Scene;
+    /**
+     * Owned by `Viewer.svelte`, not built here: this panel unmounts when it is closed, and
+     * hidden objects have to stay hidden — and keep being re-hidden after each solve — while it
+     * is. Its state is backed by SvelteSets, so mutating one re-renders this list.
+     */
+    outliner: SceneOutliner;
     sceneVersion?: number;
 }
-declare const SceneManager: import("svelte").Component<Props, {}, "scene">;
+declare const SceneManager: import("svelte").Component<Props, {}, "">;
 type SceneManager = ReturnType<typeof SceneManager>;
 export default SceneManager;

package/dist/components/viewer/Viewer.svelte

@@ -12,7 +12,7 @@
 		type MeasureTool,
 		type ViewPreset,
 		type Grid
-	} from '@selvajs/compute/visualization';
+	} from '@selvajs/visualization/render';
 	import {
 		Maximize,
 		Minimize,
@@ -30,8 +30,10 @@
 		Spline
 	} from '@lucide/svelte';
 	import { DropdownMenu } from 'bits-ui';
+	import { SvelteSet } from 'svelte/reactivity';
 	import type * as THREE from 'three';
 	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 * as Resizable from '../primitives/resizable/index.js';
@@ -127,6 +129,15 @@
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
 	let sceneManagerOpen = $state(false);
+
+	// The scene outliner lives here rather than inside <SceneManager> because that component is
+	// mounted only while its panel is open. Hidden objects must stay hidden when the panel is
+	// closed — and must be re-hidden after each solve, which nothing would do if the state
+	// unmounted with the panel.
+	const hiddenObjects = new SvelteSet<string>();
+	const selectedObjects = new SvelteSet<string>();
+	const collapsedLayers = new SvelteSet<string>();
+	let outliner: SceneOutliner | null = $state(null);
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
@@ -183,10 +194,10 @@
 			measure: { enabled: config.showToolsMenu },
 			events: {
 				onMeshMetadataClicked: config.enableMeshClick
-					? (metadata: Record<string, string>) => {
+					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
 								selectedMeshMetadata = metadata;
-								selectedMeshName = metadata?.name || t.objectFallbackName;
+								selectedMeshName = String(metadata?.name ?? '') || t.objectFallbackName;
 							}
 						}
 					: undefined
@@ -195,6 +206,9 @@
 
 		const init = initThree(canvas, opts);
 		scene = init.scene;
+		outliner = createSceneOutliner(init.scene, {
+			sets: { hidden: hiddenObjects, selected: selectedObjects, collapsed: collapsedLayers }
+		});
 		camera = init.camera;
 		controls = init.controls;
 		cameraController = init.cameraController;
@@ -272,6 +286,9 @@
 				if (edgesVisible) applyEdges?.(scene!);
 				// Rescale the grid to the new content's extent so cells and fade match the part size.
 				updateGridScale?.();
+				// The rebuild above also un-hid everything the user had hidden. Re-hide it: the outliner
+				// keys that state on Grasshopper identity, not on the instances just discarded.
+				outliner?.applyTo();
 				sceneVersion++;
 				// New solve content — repaint now rather than on the render loop's safety interval.
 				invalidate?.();
@@ -546,10 +563,10 @@
 		</Resizable.Pane>
 
 		<!-- Scene Manager Pane -->
-		{#if sceneManagerOpen && scene}
+		{#if sceneManagerOpen && scene && outliner}
 			<Resizable.Handle withHandle />
 			<Resizable.Pane defaultSize={15} minSize={8} maxSize={30}>
-				<SceneManager {scene} {sceneVersion} />
+				<SceneManager {outliner} {sceneVersion} />
 			</Resizable.Pane>
 		{/if}
 	</Resizable.PaneGroup>

package/dist/compute/useSolveSession.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SolveSession, SolveSessionArgs } from '@selvajs/solve/client';
+/**
+ * Wraps a Solve Session so its state reads reactively inside Svelte components.
+ *
+ * Returns the same `SolveSession` surface — every method delegates untouched, and every
+ * getter additionally depends on the version counter. Callers use it exactly like the
+ * session it wraps.
+ *
+ * Must be called during component initialization (it uses `$effect` to manage the
+ * subscription, so teardown follows the owning component's lifecycle).
+ */
+export declare function useSolveSession(args: SolveSessionArgs): SolveSession;