@selvajs/ui 6.6.0-beta.12 → 6.6.0-beta.13

package/dist/components/viewer/SceneManager.svelte

@@ -33,9 +33,11 @@
 		 * repaint, so the row updates instantly and the geometry lags behind.
 		 */
 		onVisibilityChange?: () => void;
+		/** The entry under the pointer, or null once it leaves. Drives the viewport preview tint. */
+		onHover?: (entry: SceneEntry | null) => void;
 	}
 
-	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange, onHover }: Props = $props();
 
 	// A partially hidden layer hides the rest; only a fully hidden one comes back — the same rule
 	// `visibility.toggleLayer` applies to objects, restated over entries because a layer's rows are
@@ -51,6 +53,13 @@
 		onVisibilityChange?.();
 	};
 
+	// A solve or closing the panel removes the row without a mouseleave, which would leave the
+	// preview tint stuck on the viewport.
+	$effect(() => {
+		void sceneVersion;
+		return () => onHover?.(null);
+	});
+
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
@@ -331,6 +340,8 @@
 								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
 									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
 									{isHidden ? 'opacity-40' : ''}"
+								onmouseenter={() => onHover?.(entry)}
+								onmouseleave={() => onHover?.(null)}
 								onmousedown={(e) => {
 									e.stopPropagation();
 									if (e.shiftKey) e.preventDefault();

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

@@ -1,4 +1,4 @@
-import { type SceneOutliner } from '@selvajs/visualization/scene';
+import { type SceneEntry, type SceneOutliner } from '@selvajs/visualization/scene';
 interface Props {
     /**
      * Owned by `Viewer.svelte`, never built here: this panel unmounts when it closes, and hidden
@@ -13,6 +13,8 @@ interface Props {
      * repaint, so the row updates instantly and the geometry lags behind.
      */
     onVisibilityChange?: () => void;
+    /** The entry under the pointer, or null once it leaves. Drives the viewport preview tint. */
+    onHover?: (entry: SceneEntry | null) => void;
 }
 declare const SceneManager: import("svelte").Component<Props, {}, "">;
 type SceneManager = ReturnType<typeof SceneManager>;

package/dist/components/viewer/Viewer.svelte

@@ -129,6 +129,8 @@
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let clearSelection: (() => void) | null = null;
+	let selectEntries: ThreeViewer['selectEntries'] | null = null;
+	let setHover: ThreeViewer['setHover'] | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -203,8 +205,8 @@
 			events: {
 				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
 				// previous object's panel instead of leaving it describing the wrong thing.
-				onObjectSelected: closeMetadata,
-				onBackgroundClicked: closeMetadata,
+				onObjectSelected: dropPanelSelection,
+				onBackgroundClicked: dropPanelSelection,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -236,6 +238,8 @@
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
 		clearSelection = init.clearSelection;
+		selectEntries = init.selectEntries;
+		setHover = init.setHover;
 		projection = init.cameraController.getProjection();
 
 		// Untracked so the host reading `meshes` or config inside its setup can't re-run onMount's teardown.
@@ -389,6 +393,24 @@
 		selectedMeshName = null;
 	}
 
+	// A click on the canvas replaces whatever the panel selected: one selection at a time.
+	function dropPanelSelection() {
+		closeMetadata();
+		selectedObjects.clear();
+	}
+
+	// Mirrors the panel's selection into the viewport. The size check skips walking the entries for
+	// the common empty case, which also keeps `has()` from subscribing to every key.
+	$effect(() => {
+		if (selectedObjects.size === 0) {
+			selectEntries?.([]);
+			return;
+		}
+		const chosen = outliner?.entries().filter((entry) => selectedObjects.has(entry.key)) ?? [];
+		closeMetadata();
+		selectEntries?.(chosen);
+	});
+
 	function dismissMetadata() {
 		closeMetadata();
 		clearSelection?.();
@@ -655,7 +677,12 @@
 		{#if sceneManagerOpen && scene && outliner}
 			<Resizable.Handle withHandle />
 			<Resizable.Pane id="scene-manager" order={2} defaultSize={15} minSize={8} maxSize={30}>
-				<SceneManager {outliner} {sceneVersion} onVisibilityChange={() => invalidate?.()} />
+				<SceneManager
+					{outliner}
+					{sceneVersion}
+					onVisibilityChange={() => invalidate?.()}
+					onHover={(entry) => setHover?.(entry?.object ?? null, entry?.memberIndex ?? null)}
+				/>
 			</Resizable.Pane>
 		{/if}
 	</Resizable.PaneGroup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.12",
+  "version": "6.6.0-beta.13",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -64,9 +64,9 @@
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
     "@selvajs/compute": "^5.0.0-beta.8",
-    "@selvajs/solve": "^2.0.0-beta.10",
-    "@selvajs/visualization": "^1.6.0-beta.6",
-    "@selvajs/schemas": "^5.3.0-beta.1"
+    "@selvajs/schemas": "^5.3.0-beta.1",
+    "@selvajs/visualization": "^1.6.0-beta.7",
+    "@selvajs/solve": "^2.0.0-beta.10"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -97,7 +97,7 @@
     "@selvajs/compute": "5.0.0-beta.8",
     "@selvajs/config": "0.0.4",
     "@selvajs/schemas": "5.3.0-beta.1",
-    "@selvajs/visualization": "1.6.0-beta.6",
+    "@selvajs/visualization": "1.6.0-beta.7",
     "@selvajs/solve": "2.0.0-beta.10"
   },
   "scripts": {

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

@@ -33,9 +33,11 @@
 		 * repaint, so the row updates instantly and the geometry lags behind.
 		 */
 		onVisibilityChange?: () => void;
+		/** The entry under the pointer, or null once it leaves. Drives the viewport preview tint. */
+		onHover?: (entry: SceneEntry | null) => void;
 	}
 
-	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange, onHover }: Props = $props();
 
 	// A partially hidden layer hides the rest; only a fully hidden one comes back — the same rule
 	// `visibility.toggleLayer` applies to objects, restated over entries because a layer's rows are
@@ -51,6 +53,13 @@
 		onVisibilityChange?.();
 	};
 
+	// A solve or closing the panel removes the row without a mouseleave, which would leave the
+	// preview tint stuck on the viewport.
+	$effect(() => {
+		void sceneVersion;
+		return () => onHover?.(null);
+	});
+
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
@@ -331,6 +340,8 @@
 								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
 									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
 									{isHidden ? 'opacity-40' : ''}"
+								onmouseenter={() => onHover?.(entry)}
+								onmouseleave={() => onHover?.(null)}
 								onmousedown={(e) => {
 									e.stopPropagation();
 									if (e.shiftKey) e.preventDefault();

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

@@ -129,6 +129,8 @@
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let clearSelection: (() => void) | null = null;
+	let selectEntries: ThreeViewer['selectEntries'] | null = null;
+	let setHover: ThreeViewer['setHover'] | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -203,8 +205,8 @@
 			events: {
 				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
 				// previous object's panel instead of leaving it describing the wrong thing.
-				onObjectSelected: closeMetadata,
-				onBackgroundClicked: closeMetadata,
+				onObjectSelected: dropPanelSelection,
+				onBackgroundClicked: dropPanelSelection,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -236,6 +238,8 @@
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
 		clearSelection = init.clearSelection;
+		selectEntries = init.selectEntries;
+		setHover = init.setHover;
 		projection = init.cameraController.getProjection();
 
 		// Untracked so the host reading `meshes` or config inside its setup can't re-run onMount's teardown.
@@ -389,6 +393,24 @@
 		selectedMeshName = null;
 	}
 
+	// A click on the canvas replaces whatever the panel selected: one selection at a time.
+	function dropPanelSelection() {
+		closeMetadata();
+		selectedObjects.clear();
+	}
+
+	// Mirrors the panel's selection into the viewport. The size check skips walking the entries for
+	// the common empty case, which also keeps `has()` from subscribing to every key.
+	$effect(() => {
+		if (selectedObjects.size === 0) {
+			selectEntries?.([]);
+			return;
+		}
+		const chosen = outliner?.entries().filter((entry) => selectedObjects.has(entry.key)) ?? [];
+		closeMetadata();
+		selectEntries?.(chosen);
+	});
+
 	function dismissMetadata() {
 		closeMetadata();
 		clearSelection?.();
@@ -655,7 +677,12 @@
 		{#if sceneManagerOpen && scene && outliner}
 			<Resizable.Handle withHandle />
 			<Resizable.Pane id="scene-manager" order={2} defaultSize={15} minSize={8} maxSize={30}>
-				<SceneManager {outliner} {sceneVersion} onVisibilityChange={() => invalidate?.()} />
+				<SceneManager
+					{outliner}
+					{sceneVersion}
+					onVisibilityChange={() => invalidate?.()}
+					onHover={(entry) => setHover?.(entry?.object ?? null, entry?.memberIndex ?? null)}
+				/>
 			</Resizable.Pane>
 		{/if}
 	</Resizable.PaneGroup>