@selvajs/ui 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/components/viewer/SceneManager.svelte

@@ -18,7 +18,11 @@
 	// @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 = () => {
+	// 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.
+	const sceneObjects = $derived.by(() => {
 		void sceneVersion;
 		return scene.children.filter(
 			(obj) =>
@@ -26,20 +30,19 @@
 				!(obj instanceof THREE.Light) &&
 				!HELPER_IDS.has(obj.userData?.id)
 		);
-	};
+	});
 
-	const getLayerGroups = () => {
-		const objects = getSceneObjects();
+	// 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 objects) {
+		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>();
 
@@ -59,8 +62,7 @@
 
 	const toggleObject = (object: THREE.Object3D) => {
 		if (selectedUuids.has(object.uuid) && selectedUuids.size > 1) {
-			const allObjects = getSceneObjects();
-			const selected = allObjects.filter((o) => selectedUuids.has(o.uuid));
+			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 {
@@ -104,23 +106,25 @@
 
 	let searchQuery = $state('');
 
-	const getFilteredLayerGroups = () => {
-		const groups = getLayerGroups();
-		if (!searchQuery.trim()) return groups;
+	// 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 groups) {
+		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;
-	};
+	});
 
 	const getFlatVisibleUuids = (): string[] => {
 		const result: string[] = [];
-		for (const [layerName, objects] of getFilteredLayerGroups()) {
+		for (const [layerName, objects] of filteredLayerGroups) {
 			if (!collapsedLayers.has(layerName)) {
 				for (const obj of objects) result.push(obj.uuid);
 			}
@@ -182,7 +186,7 @@
 	</div>
 
 	<div class="py-1 flex-1 overflow-y-auto">
-		{#each [...getFilteredLayerGroups()] as [layerName, objects] (layerName)}
+		{#each [...filteredLayerGroups] as [layerName, objects] (layerName)}
 			{@const layerHidden = isLayerHidden(objects)}
 			{@const layerPartial = isLayerPartial(objects)}
 			{@const collapsed = collapsedLayers.has(layerName)}
@@ -285,12 +289,12 @@
 		{/each}
 
 		<!-- Empty state -->
-		{#if getSceneObjects().length === 0}
+		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
 				<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 getFilteredLayerGroups().size === 0}
+		{:else if filteredLayerGroups.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/Viewer.svelte

@@ -107,6 +107,7 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
+	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -143,12 +144,15 @@
 	onMount(() => {
 		if (!canvas) return;
 
+		// Only options that differ from the library defaults. The default look is already 'technical'
+		// (flat ambient + HDR image-based lighting; baseHDR loads by default), so we just switch off the
+		// sun and shadows it doesn't need — and turn on the grid/measure/edges/click this viewer uses.
 		const opts: ThreeInitializerOptions = {
+			lighting: { enableSunlight: false },
+			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
-			controls: {},
 			// 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: {
 				onMeshMetadataClicked: config.enableMeshClick
@@ -170,6 +174,7 @@
 		measureTool = init.measureTool;
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
+		applyEdges = init.applyEdges;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -208,6 +213,9 @@
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
+			// Attach crease edges to the freshly-loaded meshes. updateScene clears and re-adds content
+			// each solve, so re-run over the scene root every time; addEdges is idempotent per mesh.
+			applyEdges?.(scene);
 			untrack(() => sceneVersion++);
 
 			if (!viewerInitialized && meshes.length > 0) {

package/dist/compute/computeThrottle.svelte.js

@@ -24,7 +24,12 @@ export function createComputeThrottle(computeFn, options = {}) {
         abortCurrent();
         currentAbortController = new AbortController();
         const { signal } = currentAbortController;
-        const timeoutId = setTimeout(() => currentAbortController?.abort(), timeout);
+        const timeoutId = setTimeout(() => {
+            // Cleared in `finally` on every other path, so firing means a genuine
+            // timeout — the only signal for it (the abort itself is swallowed below).
+            console.warn(`[Compute/throttle] solve exceeded ${timeout}ms — aborting`);
+            currentAbortController?.abort();
+        }, timeout);
         isComputing = true;
         try {
             await computeFn(values, signal);
@@ -50,6 +55,10 @@ export function createComputeThrottle(computeFn, options = {}) {
     }
     function trigger(values) {
         if (isComputing) {
+            if (pendingValues !== null) {
+                // Latest-wins: the previously-queued values are dropped, not solved.
+                console.debug('[Compute/throttle] superseded pending solve (latest-wins)');
+            }
             pendingValues = values;
         }
         else {

package/dist/compute/createSolveSession.svelte.js

@@ -123,14 +123,22 @@ export function createRequestResponseDriver(onSolve, getReporter, options = {})
         }
         try {
             const result = await onSolve(values, signal);
-            if (signal.aborted)
+            if (signal.aborted) {
+                // Discarded on purpose (superseded/cancelled) — never memoized or reported.
+                console.debug('[Compute/session] solve completed after abort — result discarded');
                 return;
+            }
             memo.set(values, result);
             getReporter().report(result);
         }
         catch (err) {
-            if (signal.aborted)
+            if (signal.aborted) {
+                console.debug('[Compute/session] solve aborted (superseded, cancelled, or timed out)');
                 return;
+            }
+            // reportError only sets reactive state; without this line a transport
+            // failure leaves no console trace at all.
+            console.warn('[Compute/session] solve failed:', err);
             getReporter().reportError(err instanceof Error ? err.message : String(err));
         }
     }, options);

package/dist/compute/solveMemo.js

@@ -38,6 +38,9 @@ export function createSolveMemo(max = 16) {
             // Refresh recency: re-insert at the tail.
             entries.delete(key);
             entries.set(key, hit);
+            // A memo hit skips the transport entirely, so no other log line fires —
+            // this debug line is the only trace it wasn't a fresh solve.
+            console.debug(`[Compute/memo] HIT — served from client memo (${entries.size}/${max})`);
             return hit;
         },
         set(values, result) {
@@ -49,9 +52,13 @@ export function createSolveMemo(max = 16) {
                 if (oldest === undefined)
                     break;
                 entries.delete(oldest);
+                console.debug(`[Compute/memo] evicted LRU entry (cap ${max})`);
             }
         },
         clear() {
+            if (entries.size > 0) {
+                console.debug(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
+            }
             entries.clear();
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {

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

@@ -18,7 +18,11 @@
 	// @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 = () => {
+	// 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.
+	const sceneObjects = $derived.by(() => {
 		void sceneVersion;
 		return scene.children.filter(
 			(obj) =>
@@ -26,20 +30,19 @@
 				!(obj instanceof THREE.Light) &&
 				!HELPER_IDS.has(obj.userData?.id)
 		);
-	};
+	});
 
-	const getLayerGroups = () => {
-		const objects = getSceneObjects();
+	// 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 objects) {
+		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>();
 
@@ -59,8 +62,7 @@
 
 	const toggleObject = (object: THREE.Object3D) => {
 		if (selectedUuids.has(object.uuid) && selectedUuids.size > 1) {
-			const allObjects = getSceneObjects();
-			const selected = allObjects.filter((o) => selectedUuids.has(o.uuid));
+			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 {
@@ -104,23 +106,25 @@
 
 	let searchQuery = $state('');
 
-	const getFilteredLayerGroups = () => {
-		const groups = getLayerGroups();
-		if (!searchQuery.trim()) return groups;
+	// 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 groups) {
+		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;
-	};
+	});
 
 	const getFlatVisibleUuids = (): string[] => {
 		const result: string[] = [];
-		for (const [layerName, objects] of getFilteredLayerGroups()) {
+		for (const [layerName, objects] of filteredLayerGroups) {
 			if (!collapsedLayers.has(layerName)) {
 				for (const obj of objects) result.push(obj.uuid);
 			}
@@ -182,7 +186,7 @@
 	</div>
 
 	<div class="py-1 flex-1 overflow-y-auto">
-		{#each [...getFilteredLayerGroups()] as [layerName, objects] (layerName)}
+		{#each [...filteredLayerGroups] as [layerName, objects] (layerName)}
 			{@const layerHidden = isLayerHidden(objects)}
 			{@const layerPartial = isLayerPartial(objects)}
 			{@const collapsed = collapsedLayers.has(layerName)}
@@ -285,12 +289,12 @@
 		{/each}
 
 		<!-- Empty state -->
-		{#if getSceneObjects().length === 0}
+		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
 				<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 getFilteredLayerGroups().size === 0}
+		{:else if filteredLayerGroups.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

@@ -107,6 +107,7 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
+	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -143,12 +144,15 @@
 	onMount(() => {
 		if (!canvas) return;
 
+		// Only options that differ from the library defaults. The default look is already 'technical'
+		// (flat ambient + HDR image-based lighting; baseHDR loads by default), so we just switch off the
+		// sun and shadows it doesn't need — and turn on the grid/measure/edges/click this viewer uses.
 		const opts: ThreeInitializerOptions = {
+			lighting: { enableSunlight: false },
+			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
-			controls: {},
 			// 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: {
 				onMeshMetadataClicked: config.enableMeshClick
@@ -170,6 +174,7 @@
 		measureTool = init.measureTool;
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
+		applyEdges = init.applyEdges;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -208,6 +213,9 @@
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
+			// Attach crease edges to the freshly-loaded meshes. updateScene clears and re-adds content
+			// each solve, so re-run over the scene root every time; addEdges is idempotent per mesh.
+			applyEdges?.(scene);
 			untrack(() => sceneVersion++);
 
 			if (!viewerInitialized && meshes.length > 0) {

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

@@ -49,7 +49,12 @@ export function createComputeThrottle<T>(
 
 		currentAbortController = new AbortController();
 		const { signal } = currentAbortController;
-		const timeoutId = setTimeout(() => currentAbortController?.abort(), timeout);
+		const timeoutId = setTimeout(() => {
+			// Cleared in `finally` on every other path, so firing means a genuine
+			// timeout — the only signal for it (the abort itself is swallowed below).
+			console.warn(`[Compute/throttle] solve exceeded ${timeout}ms — aborting`);
+			currentAbortController?.abort();
+		}, timeout);
 
 		isComputing = true;
 		try {
@@ -76,6 +81,10 @@ export function createComputeThrottle<T>(
 
 	function trigger(values: T) {
 		if (isComputing) {
+			if (pendingValues !== null) {
+				// Latest-wins: the previously-queued values are dropped, not solved.
+				console.debug('[Compute/throttle] superseded pending solve (latest-wins)');
+			}
 			pendingValues = values;
 		} else {
 			executeCompute(values);

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

@@ -203,11 +203,21 @@ export function createRequestResponseDriver(
 		}
 		try {
 			const result = await onSolve(values, signal);
-			if (signal.aborted) return;
+			if (signal.aborted) {
+				// Discarded on purpose (superseded/cancelled) — never memoized or reported.
+				console.debug('[Compute/session] solve completed after abort — result discarded');
+				return;
+			}
 			memo.set(values, result);
 			getReporter().report(result);
 		} catch (err) {
-			if (signal.aborted) return;
+			if (signal.aborted) {
+				console.debug('[Compute/session] solve aborted (superseded, cancelled, or timed out)');
+				return;
+			}
+			// reportError only sets reactive state; without this line a transport
+			// failure leaves no console trace at all.
+			console.warn('[Compute/session] solve failed:', err);
 			getReporter().reportError(err instanceof Error ? err.message : String(err));
 		}
 	}, options);

package/src/lib/compute/solveMemo.ts

@@ -50,6 +50,9 @@ export function createSolveMemo(max = 16): SolveMemo {
 			// Refresh recency: re-insert at the tail.
 			entries.delete(key);
 			entries.set(key, hit);
+			// A memo hit skips the transport entirely, so no other log line fires —
+			// this debug line is the only trace it wasn't a fresh solve.
+			console.debug(`[Compute/memo] HIT — served from client memo (${entries.size}/${max})`);
 			return hit;
 		},
 		set(values, result) {
@@ -60,9 +63,13 @@ export function createSolveMemo(max = 16): SolveMemo {
 				const oldest = entries.keys().next().value;
 				if (oldest === undefined) break;
 				entries.delete(oldest);
+				console.debug(`[Compute/memo] evicted LRU entry (cap ${max})`);
 			}
 		},
 		clear() {
+			if (entries.size > 0) {
+				console.debug(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
+			}
 			entries.clear();
 		}
 	};