@selvajs/ui 5.0.0 → 6.0.0-beta.0

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

@@ -1,6 +1,6 @@
 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 ClientSlot } from '../../contexts/clientSlotContext.svelte';
 import type { Locale } from '../../i18n/messages';

package/dist/components/primitives/alert/alert.svelte.d.ts

@@ -1,20 +1,20 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
     };
 }, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
     };
-}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
+}, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';

package/dist/components/primitives/badge/badge.svelte.d.ts

@@ -1,26 +1,26 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
+}, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';

package/dist/components/primitives/button/button.svelte.d.ts

@@ -3,59 +3,59 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        dashed: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-sm': string;
-        'icon-lg': string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        dashed: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-sm': string;
-        'icon-lg': string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        dashed: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-sm': string;
-        'icon-lg': string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
+        'icon-sm': "size-8";
+        'icon-lg': "size-10";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/components/primitives/button-group/button-group.svelte.d.ts

@@ -1,20 +1,20 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
     };
 }, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
-        horizontal: string;
-        vertical: string;
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none";
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
     };
-}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
 import { type WithElementRef } from '../../../utils.js';
 import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/primitives/field/field.svelte.d.ts

@@ -1,23 +1,23 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const fieldVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
-        vertical: string;
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
         horizontal: string[];
         responsive: string[];
     };
 }, undefined, "group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
     orientation: {
-        vertical: string;
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
         horizontal: string[];
         responsive: string[];
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
-        vertical: string;
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
         horizontal: string[];
         responsive: string[];
     };
-}, undefined, "group/field data-[invalid=true]:text-destructive flex w-full gap-3", unknown, unknown, undefined>>;
+}, undefined>>;
 export type FieldOrientation = VariantProps<typeof fieldVariants>['orientation'];
 import { type WithElementRef } from '../../../utils.js';
 import type { HTMLAttributes } from 'svelte/elements';

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;