@selvajs/ui 5.0.1 → 6.0.0-beta.0

package/dist/index.js

@@ -15,12 +15,15 @@ export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
 export * from './compute/solving.svelte';
-// Solve Session seam (transport-agnostic value/lifecycle state machine + its driver
-// interface). Exported so transports outside this package — e.g. plugin-ui's WebSocket
+// Solve Session seam. The session itself now lives in `@selvajs/solve/client`
+// (framework-free); `useSolveSession` is this package's Svelte binding, which republishes
+// the session's subscribe() notifications as rune state so its getters read reactively in
+// markup. Re-exported so transports outside this package — e.g. plugin-ui's WebSocket
 // driver — can satisfy SolveDriver and drive a session. See CONTEXT.md.
-export { createSolveSession, createRequestResponseDriver } from './compute/createSolveSession.svelte';
+export { useSolveSession } from './compute/useSolveSession.svelte';
+export { createSolveSession, createRequestResponseDriver } from '@selvajs/solve/client';
 // External-input transit storage (used by routes that wire pre-step producers)
-export * from './external/storage';
+export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs } from '@selvajs/solve/client';
 // Contexts & Composables
 export * from './contexts/footerContext.svelte';
 export * from './contexts/clientSlotContext.svelte';

package/dist/public.d.ts

@@ -5,12 +5,13 @@ export type { Locale, ViewerMessages } from './i18n/messages';
 export { VIEWER_MESSAGES, DEFAULT_LOCALE, messagesFor } from './i18n/messages';
 export { setLocaleContext, getLocaleContext, type LocaleContext } from './i18n/localeContext.svelte';
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
-export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from './compute/createSolveSession.svelte';
+export { useSolveSession } from './compute/useSolveSession.svelte';
+export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveDriver, type SolveReporter } from '@selvajs/solve/client';
 export type { ClientSlotArgs, ClientSlot } from './contexts/clientSlotContext.svelte';
-export * from './external/storage';
+export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs, type ExternalValueRef, type ExternalInput } from '@selvajs/solve/client';
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
 export type { ActionButton } from './types/actionButton';
-export type { SolveFn, SolveResult } from './types/solveFn';
+export type { SolveFn, SolveResult } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/public.js

@@ -8,7 +8,8 @@
 // Scope: the compute-app SDK — everything an external host app needs to embed a
 // Grasshopper-driven app (ComputeApp), drive solves, and wire pre-step
 // producers. Verified against real external host apps: they import
-// ComputeApp + its types, the solve seam, and external/storage. Nothing else.
+// ComputeApp + its types, the solve seam, and the external-input storage
+// helpers. Nothing else.
 //
 // Deliberately NOT public: design-system primitives (Button, Card, Dialog, …),
 // page-chrome layout (AppShell, SideNav, …), toast/Toaster, ThemeSwitcher,
@@ -30,11 +31,14 @@ export { setLocaleContext, getLocaleContext } from './i18n/localeContext.svelte'
 // Full-screen states a host app renders
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Solve Session seam (transport-agnostic value/lifecycle state machine + its
-// driver interface). Exported so transports outside this package can satisfy
-// SolveDriver and drive a session. See CONTEXT.md.
-export { createSolveSession, createRequestResponseDriver } from './compute/createSolveSession.svelte';
+// driver interface). The session lives in `@selvajs/solve/client` and is
+// framework-free; `useSolveSession` is the Svelte binding that makes its getters
+// read reactively inside components. A host embedding <ComputeApp> needs neither —
+// both are re-exported for hosts driving a session themselves. See CONTEXT.md.
+export { useSolveSession } from './compute/useSolveSession.svelte';
+export { createSolveSession, createRequestResponseDriver } from '@selvajs/solve/client';
 // Pre-step producer transit storage (host apps wire producers via these).
-export * from './external/storage';
+export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs } from '@selvajs/solve/client';
 // Schema utilities a ComputeApp host reasonably needs to read/shape values.
 export * from './schema/defaults';
 export * from './schema/traversal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "5.0.1",
+  "version": "6.0.0-beta.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -60,8 +60,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.0",
     "three": "^0.185.1",
+    "@selvajs/compute": "^4.0.0-beta.0",
     "@selvajs/schemas": "^4.7.0",
-    "@selvajs/compute": "^3.1.1"
+    "@selvajs/solve": "^0.2.0-beta.0",
+    "@selvajs/visualization": "^1.0.0-beta.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -89,7 +91,7 @@
     "rimraf": "^6.0.1",
     "svelte": "5.56.8",
     "tailwind-variants": "^3.3.0",
-    "vitest": "^3.2.7",
+    "vitest": "^4.1.10",
     "@selvajs/config": "0.0.3",
     "@selvajs/schemas": "4.7.0"
   },

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

@@ -3,13 +3,12 @@
 	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 { 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';
@@ -115,10 +114,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
+		timeout: solveTimeoutMs,
+		// 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

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

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

package/src/lib/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 '$lib/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/src/lib/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 '$lib/components/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);
@@ -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/src/lib/compute/mesh-policy-wiring.test.ts

@@ -0,0 +1,72 @@
+import * as THREE from 'three';
+import { describe, expect, it } from 'vitest';
+
+import { createRequestResponseDriver, type SolveReporter } from '@selvajs/solve/client';
+import type { SolveResult } from '@selvajs/solve/shared';
+import { meshPolicy } from '@selvajs/visualization/parse';
+
+// The C1 seam test. `@selvajs/solve` keeps meshes opaque and `@selvajs/visualization` owns the
+// three.js clone/dispose rules; neither package can prove they compose, because neither may
+// import the other. This is the only place both are in scope — it exists to catch a
+// `ComputeApp` that forgets to pass `meshPolicy`, or a policy whose shape drifts from
+// `MeshPolicy`.
+
+function meshResult(tag: string): SolveResult<THREE.Object3D> {
+	const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial());
+	mesh.name = tag;
+	return { outputs: { out: tag }, meshes: [mesh] };
+}
+
+/** Mirrors the viewer's `clearScene`: it disposes the geometry of whatever it was handed. */
+function renderAndDispose(result: SolveResult<THREE.Object3D>): void {
+	result.meshes?.forEach((root) =>
+		root.traverse((child) => (child as Partial<THREE.Mesh>).geometry?.dispose())
+	);
+}
+
+function collectingReporter(): SolveReporter<THREE.Object3D> & {
+	reports: SolveResult<THREE.Object3D>[];
+} {
+	const reports: SolveResult<THREE.Object3D>[] = [];
+	return {
+		reports,
+		report: (result) => reports.push(result),
+		reportError: () => {}
+	};
+}
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('mesh policy wiring (audit C1)', () => {
+	it('a memo hit serves a live mesh after the viewer disposed the previous one', async () => {
+		const onSolve = async () => meshResult('a');
+		const reporter = collectingReporter();
+		const driver = createRequestResponseDriver(onSolve, () => reporter, { meshPolicy });
+
+		driver.solve({ a: 1 });
+		await flush();
+		renderAndDispose(reporter.reports[0]); // the viewer eats solve 1's meshes
+
+		driver.solve({ a: 1 }); // same inputs → memo hit, no onSolve call
+		await flush();
+
+		expect(reporter.reports).toHaveLength(2);
+		const served = reporter.reports[1].meshes![0] as THREE.Mesh;
+		expect(served).not.toBe(reporter.reports[0].meshes![0]);
+		expect(served.geometry.attributes.position).toBeDefined();
+	});
+
+	it('without a policy the same flow serves the disposed instance (why the wiring matters)', async () => {
+		// Pins the failure mode, so the assertion above is known to be testing something.
+		const onSolve = async () => meshResult('a');
+		const reporter = collectingReporter();
+		const driver = createRequestResponseDriver(onSolve, () => reporter); // no meshPolicy
+
+		driver.solve({ a: 1 });
+		await flush();
+		driver.solve({ a: 1 });
+		await flush();
+
+		expect(reporter.reports[1].meshes![0]).toBe(reporter.reports[0].meshes![0]);
+	});
+});