@selvajs/ui 4.6.2-beta.1 → 4.7.0-beta.2

package/dist/components/viewer/SceneManager.svelte

@@ -10,10 +10,17 @@
 
 	let { scene = $bindable(), 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']);
+
 	const getSceneObjects = () => {
 		void sceneVersion;
 		return scene.children.filter(
-			(obj) => !(obj instanceof THREE.Camera) && !(obj instanceof THREE.Light)
+			(obj) =>
+				!(obj instanceof THREE.Camera) &&
+				!(obj instanceof THREE.Light) &&
+				!HELPER_IDS.has(obj.userData?.id)
 		);
 	};
 

package/dist/components/viewer/Viewer.svelte

@@ -8,7 +8,8 @@
 		type CameraController,
 		type CameraProjection,
 		type MeasureTool,
-		type ViewPreset
+		type ViewPreset,
+		type Grid
 	} from '@selvajs/compute/visualization';
 	import {
 		Maximize,
@@ -20,6 +21,7 @@
 		Square,
 		Frame,
 		Ruler,
+		Grid3x3,
 		Check,
 		ChevronRight
 	} from '@lucide/svelte';
@@ -35,6 +37,8 @@
 		showFullscreenButton?: boolean;
 		showSceneManager?: boolean;
 		showToolsMenu?: boolean;
+		/** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
+		showGridToggle?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
 	}
@@ -53,6 +57,7 @@
 		showFullscreenButton: true,
 		showSceneManager: true,
 		showToolsMenu: true,
+		showGridToggle: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -74,6 +79,7 @@
 	let controls: OrbitControls | null = null;
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
+	let grid: Grid | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -81,6 +87,7 @@
 	let sceneManagerOpen = $state(false);
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
+	let gridVisible = $state(false);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -112,7 +119,8 @@
 		const opts: ThreeInitializerOptions = {
 			environment: { backgroundColor: config.backgroundColor },
 			controls: {},
-			grid: { enabled: config.showToolsMenu },
+			// Build the grid so it can be toggled at runtime, but start hidden (off by default).
+			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			gizmo: { enabled: false },
 			measure: { enabled: config.showToolsMenu },
 			events: {
@@ -133,6 +141,8 @@
 		controls = init.controls;
 		cameraController = init.cameraController;
 		measureTool = init.measureTool;
+		grid = init.grid;
+		grid?.setVisible(gridVisible);
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -156,6 +166,12 @@
 		measureTool.setEnabled(measureActive);
 	}
 
+	function toggleGrid() {
+		if (!grid) return;
+		gridVisible = !gridVisible;
+		grid.setVisible(gridVisible);
+	}
+
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
@@ -309,6 +325,20 @@
 										{/if}
 									</DropdownMenu.Item>
 
+									{#if config.showGridToggle}
+										<DropdownMenu.Item
+											closeOnSelect={false}
+											class="{itemClass} {gridVisible ? 'text-primary' : ''}"
+											onSelect={toggleGrid}
+										>
+											<Grid3x3 class="h-4 w-4" />
+											<span class="flex-1">Grid</span>
+											{#if gridVisible}
+												<Check class="h-4 w-4" />
+											{/if}
+										</DropdownMenu.Item>
+									{/if}
+
 									<!-- Scene tools -->
 									{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
 										<DropdownMenu.Separator class="my-1 h-px bg-border" />

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

@@ -3,6 +3,8 @@ export interface ViewerConfig {
     showFullscreenButton?: boolean;
     showSceneManager?: boolean;
     showToolsMenu?: boolean;
+    /** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
+    showGridToggle?: boolean;
     enableMeshClick?: boolean;
     backgroundColor?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.6.2-beta.1",
+  "version": "4.7.0-beta.2",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -72,8 +72,8 @@
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
     "vitest": "^3.2.4",
-    "@selvajs/schemas": "4.5.0",
-    "@selvajs/config": "0.0.0"
+    "@selvajs/config": "0.0.0",
+    "@selvajs/schemas": "4.5.0"
   },
   "scripts": {
     "dev": "vite dev",

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

@@ -10,10 +10,17 @@
 
 	let { scene = $bindable(), 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']);
+
 	const getSceneObjects = () => {
 		void sceneVersion;
 		return scene.children.filter(
-			(obj) => !(obj instanceof THREE.Camera) && !(obj instanceof THREE.Light)
+			(obj) =>
+				!(obj instanceof THREE.Camera) &&
+				!(obj instanceof THREE.Light) &&
+				!HELPER_IDS.has(obj.userData?.id)
 		);
 	};
 

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

@@ -8,7 +8,8 @@
 		type CameraController,
 		type CameraProjection,
 		type MeasureTool,
-		type ViewPreset
+		type ViewPreset,
+		type Grid
 	} from '@selvajs/compute/visualization';
 	import {
 		Maximize,
@@ -20,6 +21,7 @@
 		Square,
 		Frame,
 		Ruler,
+		Grid3x3,
 		Check,
 		ChevronRight
 	} from '@lucide/svelte';
@@ -35,6 +37,8 @@
 		showFullscreenButton?: boolean;
 		showSceneManager?: boolean;
 		showToolsMenu?: boolean;
+		/** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
+		showGridToggle?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
 	}
@@ -53,6 +57,7 @@
 		showFullscreenButton: true,
 		showSceneManager: true,
 		showToolsMenu: true,
+		showGridToggle: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -74,6 +79,7 @@
 	let controls: OrbitControls | null = null;
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
+	let grid: Grid | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -81,6 +87,7 @@
 	let sceneManagerOpen = $state(false);
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
+	let gridVisible = $state(false);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -112,7 +119,8 @@
 		const opts: ThreeInitializerOptions = {
 			environment: { backgroundColor: config.backgroundColor },
 			controls: {},
-			grid: { enabled: config.showToolsMenu },
+			// Build the grid so it can be toggled at runtime, but start hidden (off by default).
+			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			gizmo: { enabled: false },
 			measure: { enabled: config.showToolsMenu },
 			events: {
@@ -133,6 +141,8 @@
 		controls = init.controls;
 		cameraController = init.cameraController;
 		measureTool = init.measureTool;
+		grid = init.grid;
+		grid?.setVisible(gridVisible);
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -156,6 +166,12 @@
 		measureTool.setEnabled(measureActive);
 	}
 
+	function toggleGrid() {
+		if (!grid) return;
+		gridVisible = !gridVisible;
+		grid.setVisible(gridVisible);
+	}
+
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
@@ -309,6 +325,20 @@
 										{/if}
 									</DropdownMenu.Item>
 
+									{#if config.showGridToggle}
+										<DropdownMenu.Item
+											closeOnSelect={false}
+											class="{itemClass} {gridVisible ? 'text-primary' : ''}"
+											onSelect={toggleGrid}
+										>
+											<Grid3x3 class="h-4 w-4" />
+											<span class="flex-1">Grid</span>
+											{#if gridVisible}
+												<Check class="h-4 w-4" />
+											{/if}
+										</DropdownMenu.Item>
+									{/if}
+
 									<!-- Scene tools -->
 									{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
 										<DropdownMenu.Separator class="my-1 h-px bg-border" />