@selvajs/ui 5.0.0 → 6.0.0-beta.0

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]);
+	});
+});

package/src/lib/compute/useSolveSession.svelte.ts

@@ -0,0 +1,83 @@
+// The Svelte binding for a Solve Session.
+//
+// The session itself lives in `@selvajs/solve/client` and is framework-free: it
+// exposes plain getters plus a `subscribe()` seam. That makes it usable headless, but a
+// plain getter read inside Svelte markup is NOT reactive — nothing tells the component to
+// re-run. This adapter closes that gap: it subscribes once, bumps a `$state` version
+// counter on every notification, and reads that counter inside each getter so any
+// component touching one re-runs when the session changes.
+//
+// The counter (rather than mirroring each field into its own `$state`) keeps this a pure
+// republish: no field list to keep in sync as the session grows, and no risk of a mirrored
+// copy drifting from the source of truth.
+
+import type { SolveSession, SolveSessionArgs } from '@selvajs/solve/client';
+import { createSolveSession } 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 function useSolveSession(args: SolveSessionArgs): SolveSession {
+	const session = createSolveSession(args);
+
+	// Bumped on every session notification. Reading it inside a getter is what registers
+	// the dependency; the value itself is never meaningful.
+	let version = $state(0);
+
+	$effect(() => {
+		// Re-read on mount and unsubscribe on teardown. The session outlives no component
+		// here — it is created alongside this adapter — so dropping the subscription is the
+		// whole cleanup.
+		return session.subscribe(() => {
+			version += 1;
+		});
+	});
+
+	/** Registers the reactive dependency, then returns the live value. */
+	function track<T>(read: () => T): T {
+		void version;
+		return read();
+	}
+
+	return {
+		get values() {
+			return track(() => session.values);
+		},
+		get error() {
+			return track(() => session.error);
+		},
+		get computeErrors() {
+			return track(() => session.computeErrors);
+		},
+		get computeWarnings() {
+			return track(() => session.computeWarnings);
+		},
+		get meshes() {
+			return track(() => session.meshes);
+		},
+		get hasPendingChanges() {
+			return track(() => session.hasPendingChanges);
+		},
+		get hasNeverSolved() {
+			return track(() => session.hasNeverSolved);
+		},
+		get isSolving() {
+			return track(() => session.isSolving);
+		},
+		setValue: (id, value, forceSolve) => session.setValue(id, value, forceSolve),
+		solve: () => session.solve(),
+		loadValues: (incoming) => session.loadValues(incoming),
+		rebuild: (schema, scopeKey) => session.rebuild(schema, scopeKey),
+		report: (result) => session.report(result),
+		reportError: (message) => session.reportError(message),
+		subscribe: (listener) => session.subscribe(listener),
+		notify: () => session.notify()
+	};
+}

package/src/lib/external/storage.ts

@@ -1,64 +1,12 @@
-// Client-supplied input transit storage.
-//
-// When an input has source.kind === 'client', a producer route writes the produced
-// value here, and the solver route reads it back. Scoped per (scopeKey, inputId) so
-// values for one solver/input don't bleed into another. The scope key is whatever
-// uniquely identifies the solver context — sessionId in plugin-ui/preview,
-// definition guid in selva/library, etc.
-//
-// inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
-
-import type { UISchema } from '@selvajs/schemas';
-import { getInputItems } from '@selvajs/schemas';
-
-const STORAGE_PREFIX = 'external';
-
-function makeKey(scopeKey: string, inputId: string): string {
-	return `${STORAGE_PREFIX}:${scopeKey}:${inputId}`;
-}
-
-export interface ExternalValueRef {
-	scopeKey: string;
-	inputId: string;
-}
-
-export function writeExternalValue(args: ExternalValueRef & { value: unknown }): void {
-	const { scopeKey, inputId, value } = args;
-	if (!scopeKey || !inputId) return;
-	if (typeof sessionStorage === 'undefined') return;
-	sessionStorage.setItem(makeKey(scopeKey, inputId), JSON.stringify(value));
-}
-
-export function readExternalValue(ref: ExternalValueRef): unknown | undefined {
-	const { scopeKey, inputId } = ref;
-	if (!scopeKey || !inputId) return undefined;
-	if (typeof sessionStorage === 'undefined') return undefined;
-	const raw = sessionStorage.getItem(makeKey(scopeKey, inputId));
-	if (raw === null) return undefined;
-	try {
-		return JSON.parse(raw);
-	} catch {
-		return undefined;
-	}
-}
-
-export function clearExternalValue(ref: ExternalValueRef): void {
-	const { scopeKey, inputId } = ref;
-	if (!scopeKey || !inputId) return;
-	if (typeof sessionStorage === 'undefined') return;
-	sessionStorage.removeItem(makeKey(scopeKey, inputId));
-}
-
-export interface ExternalInput {
-	paramId: string;
-	displayName: string;
-}
-
-export function getExternalInputs(schema: UISchema): ExternalInput[] {
-	return getInputItems(schema)
-		.filter((item) => item.source?.kind === 'client')
-		.map((item) => ({
-			paramId: item.paramId,
-			displayName: item.displayName ?? item.paramId
-		}));
-}
+// Moved to `@selvajs/solve/client`, where the Solve Session that hydrates from it
+// now lives. Re-exported here to keep the published `@selvajs/ui/external` sub-path — and
+// the pre-step producer routes that import it — working unchanged.
+
+export {
+	writeExternalValue,
+	readExternalValue,
+	clearExternalValue,
+	getExternalInputs,
+	type ExternalValueRef,
+	type ExternalInput
+} from '@selvajs/solve/client';

package/src/lib/index.ts

@@ -21,9 +21,12 @@ 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 { useSolveSession } from './compute/useSolveSession.svelte';
 export {
 	createSolveSession,
 	createRequestResponseDriver,
@@ -31,10 +34,17 @@ export {
 	type SolveSessionArgs,
 	type SolveDriver,
 	type SolveReporter
-} from './compute/createSolveSession.svelte';
+} 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,
+	type ExternalValueRef,
+	type ExternalInput
+} from '@selvajs/solve/client';
 
 // Contexts & Composables
 export * from './contexts/footerContext.svelte';
@@ -47,5 +57,5 @@ export { randomId } from './utils/randomId';
 
 // UI-specific runtime types (not from schema)
 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';