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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Selva FelixBrunold VektorNode
+Copyright (c) 2025 Selva VektorNode AG
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/components/viewer/Viewer.svelte

@@ -4,6 +4,8 @@
 	import {
 		initThree,
 		updateScene,
+		LOOKS,
+		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
 		type CameraProjection,
@@ -23,7 +25,9 @@
 		Ruler,
 		Grid3x3,
 		Check,
-		ChevronRight
+		ChevronRight,
+		Palette,
+		Spline
 	} from '@lucide/svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import type * as THREE from 'three';
@@ -41,6 +45,11 @@
 		showToolsMenu?: boolean;
 		/** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
 		showGridToggle?: boolean;
+		/**
+		 * Expose the "Display" submenu (render style picker + edges toggle) in the tools menu.
+		 * Defaults on. Starts on the 'technical' style with edges shown.
+		 */
+		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
 	}
@@ -72,6 +81,7 @@
 		showSceneManager: true,
 		showToolsMenu: true,
 		showGridToggle: true,
+		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -108,6 +118,10 @@
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
 	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
+	let clearEdges: ((root: THREE.Object3D) => void) | null = null;
+	let invalidate: (() => void) | null = null;
+	let setLook: ((look: Look) => void) | null = null;
+	let updateGridScale: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -116,9 +130,20 @@
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
+	// Render style + edge overlays. 'technical' is the default look; edges (crease lines) start on so
+	// the technical look reads as a CAD shaded view — both are user-switchable via the Display submenu.
+	let renderStyle: Look = $state('technical');
+	let edgesVisible = $state(true);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
+	// Render-style options for the Display submenu, derived from the library's LOOKS array — adding or
+	// renaming a look in @selvajs/compute updates this automatically. Label is the value capitalized.
+	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
+		look,
+		label: look.charAt(0).toUpperCase() + look.slice(1)
+	}));
+
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
 		{ preset: 'top', label: () => t.viewTop },
 		{ preset: 'front', label: () => t.viewFront },
@@ -144,10 +169,12 @@
 	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.
+		// Only options that differ from the library defaults. Seed the initial render style (also the
+		// library default, but stated explicitly since it's user-switchable via the Display menu) and
+		// switch off the sun/shadows the technical look doesn't need — flat ambient + HDR image-based
+		// lighting (baseHDR loads by default) carry it. Grid/measure/click are the tools this viewer uses.
 		const opts: ThreeInitializerOptions = {
+			look: renderStyle,
 			lighting: { enableSunlight: false },
 			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
@@ -175,6 +202,10 @@
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
 		applyEdges = init.applyEdges;
+		clearEdges = init.clearEdges;
+		invalidate = init.invalidate;
+		setLook = init.setLook;
+		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -208,15 +239,43 @@
 		if (!grid) return;
 		gridVisible = !gridVisible;
 		grid.setVisible(gridVisible);
+		invalidate?.();
+	}
+
+	function setRenderStyle(look: Look) {
+		if (!setLook || look === renderStyle) return;
+		renderStyle = look;
+		setLook(look);
+	}
+
+	// Add/remove crease-edge overlays on the current scene content. applyEdges is idempotent per mesh
+	// (and attaches large meshes' overlays async, off the main thread); clearEdges is its inverse —
+	// it also cancels in-flight attaches and stands down the screen-space fallback for capped meshes.
+	function applyEdgeState() {
+		if (!scene) return;
+		if (edgesVisible) applyEdges?.(scene);
+		else clearEdges?.(scene);
+	}
+
+	function toggleEdges() {
+		edgesVisible = !edgesVisible;
+		applyEdgeState();
 	}
 
 	$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++);
+			// updateScene clears and re-adds all content each solve, so the previous solve's edge
+			// overlays are gone — re-attach them if edges are currently shown. Read the flag untracked:
+			// toggling edges is handled directly by toggleEdges(), so it must not re-trigger a full solve.
+			untrack(() => {
+				if (edgesVisible) applyEdges?.(scene!);
+				// Rescale the grid to the new content's extent so cells and fade match the part size.
+				updateGridScale?.();
+				sceneVersion++;
+				// New solve content — repaint now rather than on the render loop's safety interval.
+				invalidate?.();
+			});
 
 			if (!viewerInitialized && meshes.length > 0) {
 				viewerInitialized = true;
@@ -372,6 +431,49 @@
 										</DropdownMenu.SubContent>
 									</DropdownMenu.Sub>
 
+									{#if config.showDisplayMenu}
+										<DropdownMenu.Sub>
+											<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
+												<Palette class="h-4 w-4" />
+												<span class="flex-1">{t.display}</span>
+												<ChevronRight class="h-4 w-4 text-muted-foreground" />
+											</DropdownMenu.SubTrigger>
+											<DropdownMenu.SubContent
+												sideOffset={4}
+												class="min-w-40 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
+											>
+												<!-- Render style: single-choice, current one checked. -->
+												{#each STYLE_OPTIONS as { look, label } (look)}
+													<DropdownMenu.Item
+														closeOnSelect={false}
+														class="{itemClass} {renderStyle === look ? 'text-primary' : ''}"
+														onSelect={() => setRenderStyle(look)}
+													>
+														<span class="flex-1">{label}</span>
+														{#if renderStyle === look}
+															<Check class="h-4 w-4" />
+														{/if}
+													</DropdownMenu.Item>
+												{/each}
+
+												<DropdownMenu.Separator class="my-1 h-px bg-border" />
+
+												<!-- Edges overlay toggle. -->
+												<DropdownMenu.Item
+													closeOnSelect={false}
+													class="{itemClass} {edgesVisible ? 'text-primary' : ''}"
+													onSelect={toggleEdges}
+												>
+													<Spline class="h-4 w-4" />
+													<span class="flex-1">{t.edges}</span>
+													{#if edgesVisible}
+														<Check class="h-4 w-4" />
+													{/if}
+												</DropdownMenu.Item>
+											</DropdownMenu.SubContent>
+										</DropdownMenu.Sub>
+									{/if}
+
 									<DropdownMenu.Item
 										closeOnSelect={false}
 										class="{itemClass} {measureActive ? 'text-primary' : ''}"

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

@@ -6,6 +6,11 @@ export interface ViewerConfig {
     showToolsMenu?: boolean;
     /** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
     showGridToggle?: boolean;
+    /**
+     * Expose the "Display" submenu (render style picker + edges toggle) in the tools menu.
+     * Defaults on. Starts on the 'technical' style with edges shown.
+     */
+    showDisplayMenu?: boolean;
     enableMeshClick?: boolean;
     backgroundColor?: string;
 }

package/dist/compute/solveMemo.js

@@ -4,6 +4,14 @@
 // round-trip — killing slider-scrub storms before they leave the browser. It pairs with
 // the throttle's latest-wins abort: the memo only serves values that fully solved, so a
 // hit is always a complete result.
+//
+// GPU ownership (audit C1): a SolveResult carries live three.js objects, and the viewer
+// takes ownership of every mesh array it renders — `updateScene` disposes the previous
+// content on the next update. So the memo can neither hand out its own instances (they'd
+// be disposed under it, then re-added dead on the next hit) nor drop entries silently
+// (their GPU buffers would leak). It therefore keeps private copies, serves a fresh clone
+// per hit, and disposes an entry whenever it leaves the map.
+import * as THREE from 'three';
 /**
  * Deterministic string key for a set of input values. Object keys are sorted at every
  * level so two logically-equal inputs (built in different key order) collide, matching
@@ -22,6 +30,41 @@ function serialize(value) {
     const keys = Object.keys(obj).sort();
     return `{${keys.map((k) => `${JSON.stringify(k)}:${serialize(obj[k])}`).join(',')}}`;
 }
+/**
+ * Deep-clone a solve's scene objects so the caller owns them outright.
+ *
+ * `Object3D.clone()` copies the transform hierarchy but SHARES `geometry` and `material`
+ * by reference — which is exactly the aliasing that makes a naive clone useless here, so
+ * geometry is copied explicitly. Materials are deliberately left shared: the viewer's
+ * `clearScene` skips disposing anything in its SHARED_MATERIALS set (module-scope
+ * singletons reused across solves), and per-mesh materials are cheap to recreate but
+ * expensive to re-compile as new shader programs.
+ */
+function cloneSceneObjects(meshes) {
+    return meshes.map((root) => {
+        const copy = root.clone(true);
+        const sources = [];
+        root.traverse((child) => sources.push(child));
+        let i = 0;
+        copy.traverse((child) => {
+            const source = sources[i++];
+            const target = child;
+            if (source.geometry)
+                target.geometry = source.geometry.clone();
+        });
+        return copy;
+    });
+}
+/**
+ * Release an entry's GPU buffers. Mirrors `clearScene`'s traversal, minus materials —
+ * the memo never owns those (see {@link cloneSceneObjects}), so disposing one here would
+ * free a singleton still referenced by live scene content.
+ */
+function disposeSceneObjects(result) {
+    result.meshes?.forEach((root) => root.traverse((child) => {
+        child.geometry?.dispose();
+    }));
+}
 /**
  * A bounded LRU memo. `max` caps entries (not bytes); solve results can be large, so the
  * default is deliberately small — this targets the tight slider-scrub loop, not a durable
@@ -29,6 +72,14 @@ function serialize(value) {
  */
 export function createSolveMemo(max = 16) {
     const entries = new Map();
+    /** Drop an entry and release its GPU buffers. No-op when the key is absent. */
+    function evict(key) {
+        const entry = entries.get(key);
+        if (entry === undefined)
+            return;
+        entries.delete(key);
+        disposeSceneObjects(entry);
+    }
     return {
         get(values) {
             const key = stableInputKey(values);
@@ -39,26 +90,34 @@ export function createSolveMemo(max = 16) {
             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;
+            // this line is the only trace it wasn't a fresh solve.
+            console.info(`[Compute/memo] HIT — served from client memo (${entries.size}/${max})`);
+            // Clone on the way out: the viewer disposes what it renders, so the retained
+            // entry must never be the instance handed to it (audit C1).
+            if (!hit.meshes?.length)
+                return hit;
+            return { ...hit, meshes: cloneSceneObjects(hit.meshes) };
         },
         set(values, result) {
             const key = stableInputKey(values);
-            entries.delete(key);
-            entries.set(key, result);
+            // Overwriting a key strands the old value's buffers unless it's disposed first.
+            evict(key);
+            // Store a private copy for the same reason `get` clones: the caller reports this
+            // same object to the viewer, which will dispose it on the next scene update.
+            entries.set(key, result.meshes?.length ? { ...result, meshes: cloneSceneObjects(result.meshes) } : result);
             while (entries.size > max) {
                 const oldest = entries.keys().next().value;
                 if (oldest === undefined)
                     break;
-                entries.delete(oldest);
-                console.debug(`[Compute/memo] evicted LRU entry (cap ${max})`);
+                evict(oldest);
+                console.info(`[Compute/memo] evicted LRU entry (cap ${max})`);
             }
         },
         clear() {
             if (entries.size > 0) {
-                console.debug(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
+                console.info(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
             }
+            entries.forEach(disposeSceneObjects);
             entries.clear();
         }
     };

package/dist/i18n/messages.d.ts

@@ -7,6 +7,10 @@ export interface ViewerMessages {
     views: string;
     measure: string;
     grid: string;
+    /** "Display" submenu label — groups render style + edges. */
+    display: string;
+    /** Edges show/hide toggle label. */
+    edges: string;
     sceneManager: string;
     screenshot: string;
     fullscreen: string;

package/dist/i18n/messages.js

@@ -18,6 +18,8 @@ const en = {
     views: 'Views',
     measure: 'Measure',
     grid: 'Grid',
+    display: 'Display',
+    edges: 'Edges',
     sceneManager: 'Scene manager',
     screenshot: 'Screenshot',
     fullscreen: 'Fullscreen',
@@ -65,6 +67,8 @@ const de = {
     views: 'Ansichten',
     measure: 'Messen',
     grid: 'Raster',
+    display: 'Darstellung',
+    edges: 'Kanten',
     sceneManager: 'Szenen-Manager',
     screenshot: 'Screenshot',
     fullscreen: 'Vollbild',

package/package.json

@@ -1,11 +1,29 @@
 {
   "name": "@selvajs/ui",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.4",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
+  "author": "VektorNode",
+  "homepage": "https://github.com/VektorNode/selva#readme",
+  "bugs": "https://github.com/VektorNode/selva/issues",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "components",
+    "ui",
+    "selva"
+  ],
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VektorNode/selva.git",
+    "directory": "packages/ui"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "type": "module",
   "svelte": "./dist/public.js",
   "types": "./dist/public.d.ts",
@@ -37,12 +55,12 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@selvajs/compute": "^3.1.0-beta.6",
     "@sveltejs/kit": "^2",
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
     "three": "^0.184.0",
+    "@selvajs/compute": "^3.1.0-beta.13",
     "@selvajs/schemas": "^4.7.0-beta.0"
   },
   "peerDependenciesMeta": {
@@ -64,19 +82,21 @@
   "devDependencies": {
     "@internationalized/date": "^3.12.1",
     "@sveltejs/kit": "2.69.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@types/three": "^0.184.0",
     "bits-ui": "^2.18.0",
     "rhino3dm": "8.17.0",
     "rimraf": "^6.0.1",
     "svelte": "5.56.4",
     "tailwind-variants": "^3.2.2",
-    "vitest": "^3.2.6",
-    "@selvajs/config": "0.0.2",
-    "@selvajs/schemas": "4.7.0-beta.0"
+    "vitest": "^3.2.7",
+    "@selvajs/schemas": "4.7.0-beta.0",
+    "@selvajs/config": "0.0.2"
   },
   "scripts": {
+    "predev": "node ../../scripts/sync-shared-assets.js",
     "dev": "vite dev",
+    "prebuild": "node ../../scripts/sync-shared-assets.js",
     "build": "rimraf dist && pnpm prepack",
     "build:fast": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",

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

@@ -4,6 +4,8 @@
 	import {
 		initThree,
 		updateScene,
+		LOOKS,
+		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
 		type CameraProjection,
@@ -23,7 +25,9 @@
 		Ruler,
 		Grid3x3,
 		Check,
-		ChevronRight
+		ChevronRight,
+		Palette,
+		Spline
 	} from '@lucide/svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import type * as THREE from 'three';
@@ -41,6 +45,11 @@
 		showToolsMenu?: boolean;
 		/** Expose the grid show/hide toggle in the tools menu. Grid starts hidden. */
 		showGridToggle?: boolean;
+		/**
+		 * Expose the "Display" submenu (render style picker + edges toggle) in the tools menu.
+		 * Defaults on. Starts on the 'technical' style with edges shown.
+		 */
+		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
 	}
@@ -72,6 +81,7 @@
 		showSceneManager: true,
 		showToolsMenu: true,
 		showGridToggle: true,
+		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -108,6 +118,10 @@
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
 	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
+	let clearEdges: ((root: THREE.Object3D) => void) | null = null;
+	let invalidate: (() => void) | null = null;
+	let setLook: ((look: Look) => void) | null = null;
+	let updateGridScale: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -116,9 +130,20 @@
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
+	// Render style + edge overlays. 'technical' is the default look; edges (crease lines) start on so
+	// the technical look reads as a CAD shaded view — both are user-switchable via the Display submenu.
+	let renderStyle: Look = $state('technical');
+	let edgesVisible = $state(true);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
+	// Render-style options for the Display submenu, derived from the library's LOOKS array — adding or
+	// renaming a look in @selvajs/compute updates this automatically. Label is the value capitalized.
+	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
+		look,
+		label: look.charAt(0).toUpperCase() + look.slice(1)
+	}));
+
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
 		{ preset: 'top', label: () => t.viewTop },
 		{ preset: 'front', label: () => t.viewFront },
@@ -144,10 +169,12 @@
 	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.
+		// Only options that differ from the library defaults. Seed the initial render style (also the
+		// library default, but stated explicitly since it's user-switchable via the Display menu) and
+		// switch off the sun/shadows the technical look doesn't need — flat ambient + HDR image-based
+		// lighting (baseHDR loads by default) carry it. Grid/measure/click are the tools this viewer uses.
 		const opts: ThreeInitializerOptions = {
+			look: renderStyle,
 			lighting: { enableSunlight: false },
 			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
@@ -175,6 +202,10 @@
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
 		applyEdges = init.applyEdges;
+		clearEdges = init.clearEdges;
+		invalidate = init.invalidate;
+		setLook = init.setLook;
+		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -208,15 +239,43 @@
 		if (!grid) return;
 		gridVisible = !gridVisible;
 		grid.setVisible(gridVisible);
+		invalidate?.();
+	}
+
+	function setRenderStyle(look: Look) {
+		if (!setLook || look === renderStyle) return;
+		renderStyle = look;
+		setLook(look);
+	}
+
+	// Add/remove crease-edge overlays on the current scene content. applyEdges is idempotent per mesh
+	// (and attaches large meshes' overlays async, off the main thread); clearEdges is its inverse —
+	// it also cancels in-flight attaches and stands down the screen-space fallback for capped meshes.
+	function applyEdgeState() {
+		if (!scene) return;
+		if (edgesVisible) applyEdges?.(scene);
+		else clearEdges?.(scene);
+	}
+
+	function toggleEdges() {
+		edgesVisible = !edgesVisible;
+		applyEdgeState();
 	}
 
 	$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++);
+			// updateScene clears and re-adds all content each solve, so the previous solve's edge
+			// overlays are gone — re-attach them if edges are currently shown. Read the flag untracked:
+			// toggling edges is handled directly by toggleEdges(), so it must not re-trigger a full solve.
+			untrack(() => {
+				if (edgesVisible) applyEdges?.(scene!);
+				// Rescale the grid to the new content's extent so cells and fade match the part size.
+				updateGridScale?.();
+				sceneVersion++;
+				// New solve content — repaint now rather than on the render loop's safety interval.
+				invalidate?.();
+			});
 
 			if (!viewerInitialized && meshes.length > 0) {
 				viewerInitialized = true;
@@ -372,6 +431,49 @@
 										</DropdownMenu.SubContent>
 									</DropdownMenu.Sub>
 
+									{#if config.showDisplayMenu}
+										<DropdownMenu.Sub>
+											<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
+												<Palette class="h-4 w-4" />
+												<span class="flex-1">{t.display}</span>
+												<ChevronRight class="h-4 w-4 text-muted-foreground" />
+											</DropdownMenu.SubTrigger>
+											<DropdownMenu.SubContent
+												sideOffset={4}
+												class="min-w-40 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
+											>
+												<!-- Render style: single-choice, current one checked. -->
+												{#each STYLE_OPTIONS as { look, label } (look)}
+													<DropdownMenu.Item
+														closeOnSelect={false}
+														class="{itemClass} {renderStyle === look ? 'text-primary' : ''}"
+														onSelect={() => setRenderStyle(look)}
+													>
+														<span class="flex-1">{label}</span>
+														{#if renderStyle === look}
+															<Check class="h-4 w-4" />
+														{/if}
+													</DropdownMenu.Item>
+												{/each}
+
+												<DropdownMenu.Separator class="my-1 h-px bg-border" />
+
+												<!-- Edges overlay toggle. -->
+												<DropdownMenu.Item
+													closeOnSelect={false}
+													class="{itemClass} {edgesVisible ? 'text-primary' : ''}"
+													onSelect={toggleEdges}
+												>
+													<Spline class="h-4 w-4" />
+													<span class="flex-1">{t.edges}</span>
+													{#if edgesVisible}
+														<Check class="h-4 w-4" />
+													{/if}
+												</DropdownMenu.Item>
+											</DropdownMenu.SubContent>
+										</DropdownMenu.Sub>
+									{/if}
+
 									<DropdownMenu.Item
 										closeOnSelect={false}
 										class="{itemClass} {measureActive ? 'text-primary' : ''}"

package/src/lib/compute/solveMemo.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest';
+import * as THREE from 'three';
 import { createSolveMemo, stableInputKey } from './solveMemo';
 import type { SolveResult } from '../types/solveFn';
 
@@ -8,6 +9,49 @@ import type { SolveResult } from '../types/solveFn';
 
 const result = (tag: string): SolveResult => ({ outputs: { out: tag } });
 
+/** A mesh-bearing result — the shape that exposed audit C1. */
+function meshResult(tag: string): SolveResult {
+	const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial());
+	mesh.name = tag;
+	return { outputs: { out: tag }, meshes: [mesh] };
+}
+
+/** Mirrors `clearScene`'s disposal of whatever the viewer currently holds. */
+function disposeLikeViewer(res: SolveResult | undefined): void {
+	res?.meshes?.forEach((m: THREE.Object3D) =>
+		m.traverse((child) => {
+			const r = child as Partial<THREE.Mesh> & THREE.Object3D;
+			r.geometry?.dispose();
+			const mat = r.material;
+			if (!mat) return;
+			(Array.isArray(mat) ? mat : [mat]).forEach((m) => m.dispose());
+		})
+	);
+}
+
+/**
+ * Count `dispose()` calls across ALL geometries for the duration of a test.
+ *
+ * The memo stores a private clone, so watching the object handed to `set` would prove
+ * nothing — the retained copy is deliberately unreachable. Spying the prototype observes
+ * disposal of whichever instance the memo actually owns, which is the real invariant:
+ * an entry leaving the map must release its buffers.
+ */
+function countDisposals(): { count: () => number; restore: () => void } {
+	const original = THREE.BufferGeometry.prototype.dispose;
+	let n = 0;
+	THREE.BufferGeometry.prototype.dispose = function (this: THREE.BufferGeometry) {
+		n++;
+		return original.call(this);
+	};
+	return {
+		count: () => n,
+		restore: () => {
+			THREE.BufferGeometry.prototype.dispose = original;
+		}
+	};
+}
+
 describe('stableInputKey', () => {
 	it('is insensitive to object key order', () => {
 		expect(stableInputKey({ a: 1, b: 2 })).toBe(stableInputKey({ b: 2, a: 1 }));
@@ -85,3 +129,92 @@ describe('createSolveMemo', () => {
 		expect(memo.get({ a: 1 })).toBeUndefined();
 	});
 });
+
+// Audit C1. The memo caches whole SolveResults, including live three.js objects, but the
+// viewer's `clearScene` disposes the meshes it is handed on the next scene update. Every
+// pre-existing test above used mesh-free results, so nothing caught it.
+describe('createSolveMemo — GPU object ownership (audit C1)', () => {
+	it('serves a usable mesh after the viewer disposed the one it was given', () => {
+		const memo = createSolveMemo();
+		const stored = meshResult('a');
+		memo.set({ k: 1 }, stored);
+
+		// Solve 1 renders: the viewer owns and (on the next update) disposes these meshes.
+		const first = memo.get({ k: 1 })!;
+		disposeLikeViewer(first);
+
+		// Slider returns to the same value → memo hit. The served mesh must be renderable,
+		// not the corpse the viewer just disposed.
+		const second = memo.get({ k: 1 })!;
+		const geo = (second.meshes![0] as THREE.Mesh).geometry;
+		expect(geo.attributes.position).toBeDefined();
+		expect(second.meshes![0]).not.toBe(first.meshes![0]);
+	});
+
+	it('never hands the same mesh instance to two consumers', () => {
+		// The scene takes ownership of what it is given (updateScene → scene.add), so two
+		// hits handing out one instance means a double-add and a shared disposal fate.
+		const memo = createSolveMemo();
+		memo.set({ k: 1 }, meshResult('a'));
+		expect(memo.get({ k: 1 })!.meshes![0]).not.toBe(memo.get({ k: 1 })!.meshes![0]);
+	});
+
+	it('preserves non-mesh result fields on a hit', () => {
+		const memo = createSolveMemo();
+		const stored: SolveResult = { ...meshResult('a'), errors: ['e'], warnings: ['w'] };
+		memo.set({ k: 1 }, stored);
+		const hit = memo.get({ k: 1 })!;
+		expect(hit.outputs).toEqual({ out: 'a' });
+		expect(hit.errors).toEqual(['e']);
+		expect(hit.warnings).toEqual(['w']);
+	});
+
+	it('releases GPU memory when an entry is evicted', () => {
+		const memo = createSolveMemo(1);
+		memo.set({ k: 1 }, meshResult('a'));
+
+		const spy = countDisposals();
+		try {
+			memo.set({ k: 2 }, meshResult('b')); // evicts k:1
+			expect(spy.count()).toBe(1);
+		} finally {
+			spy.restore();
+		}
+		expect(memo.get({ k: 1 })).toBeUndefined();
+	});
+
+	it('releases GPU memory on clear() (definition switch)', () => {
+		const memo = createSolveMemo();
+		memo.set({ k: 1 }, meshResult('a'));
+		memo.set({ k: 2 }, meshResult('b'));
+
+		const spy = countDisposals();
+		try {
+			memo.clear();
+			expect(spy.count()).toBe(2);
+		} finally {
+			spy.restore();
+		}
+	});
+
+	it('releases the old value when a key is overwritten', () => {
+		const memo = createSolveMemo();
+		memo.set({ k: 1 }, meshResult('old'));
+
+		const spy = countDisposals();
+		try {
+			memo.set({ k: 1 }, meshResult('new'));
+			expect(spy.count()).toBe(1);
+		} finally {
+			spy.restore();
+		}
+		expect(memo.get({ k: 1 })!.outputs).toEqual({ out: 'new' });
+	});
+
+	it('handles mesh-free results without touching disposal paths', () => {
+		const memo = createSolveMemo(1);
+		memo.set({ k: 1 }, result('1'));
+		memo.set({ k: 2 }, result('2')); // evicts k:1 — must not throw
+		expect(memo.get({ k: 2 })).toEqual(result('2'));
+	});
+});

package/src/lib/compute/solveMemo.ts

@@ -4,7 +4,15 @@
 // round-trip — killing slider-scrub storms before they leave the browser. It pairs with
 // the throttle's latest-wins abort: the memo only serves values that fully solved, so a
 // hit is always a complete result.
+//
+// GPU ownership (audit C1): a SolveResult carries live three.js objects, and the viewer
+// takes ownership of every mesh array it renders — `updateScene` disposes the previous
+// content on the next update. So the memo can neither hand out its own instances (they'd
+// be disposed under it, then re-added dead on the next hit) nor drop entries silently
+// (their GPU buffers would leak). It therefore keeps private copies, serves a fresh clone
+// per hit, and disposes an entry whenever it leaves the map.
 
+import * as THREE from 'three';
 import type { SolveResult } from '../types/solveFn';
 
 /**
@@ -25,6 +33,44 @@ function serialize(value: unknown): string {
 	return `{${keys.map((k) => `${JSON.stringify(k)}:${serialize(obj[k])}`).join(',')}}`;
 }
 
+/**
+ * Deep-clone a solve's scene objects so the caller owns them outright.
+ *
+ * `Object3D.clone()` copies the transform hierarchy but SHARES `geometry` and `material`
+ * by reference — which is exactly the aliasing that makes a naive clone useless here, so
+ * geometry is copied explicitly. Materials are deliberately left shared: the viewer's
+ * `clearScene` skips disposing anything in its SHARED_MATERIALS set (module-scope
+ * singletons reused across solves), and per-mesh materials are cheap to recreate but
+ * expensive to re-compile as new shader programs.
+ */
+function cloneSceneObjects(meshes: THREE.Object3D[]): THREE.Object3D[] {
+	return meshes.map((root) => {
+		const copy = root.clone(true);
+		const sources: THREE.Object3D[] = [];
+		root.traverse((child) => sources.push(child));
+		let i = 0;
+		copy.traverse((child) => {
+			const source = sources[i++] as Partial<THREE.Mesh> & THREE.Object3D;
+			const target = child as Partial<THREE.Mesh> & THREE.Object3D;
+			if (source.geometry) target.geometry = source.geometry.clone();
+		});
+		return copy;
+	});
+}
+
+/**
+ * Release an entry's GPU buffers. Mirrors `clearScene`'s traversal, minus materials —
+ * the memo never owns those (see {@link cloneSceneObjects}), so disposing one here would
+ * free a singleton still referenced by live scene content.
+ */
+function disposeSceneObjects(result: SolveResult): void {
+	result.meshes?.forEach((root: THREE.Object3D) =>
+		root.traverse((child) => {
+			(child as Partial<THREE.Mesh>).geometry?.dispose();
+		})
+	);
+}
+
 export interface SolveMemo {
 	/** Returns a previously stored result for these inputs, or undefined on a miss. */
 	get(values: Record<string, unknown>): SolveResult | undefined;
@@ -42,6 +88,14 @@ export interface SolveMemo {
 export function createSolveMemo(max = 16): SolveMemo {
 	const entries = new Map<string, SolveResult>();
 
+	/** Drop an entry and release its GPU buffers. No-op when the key is absent. */
+	function evict(key: string): void {
+		const entry = entries.get(key);
+		if (entry === undefined) return;
+		entries.delete(key);
+		disposeSceneObjects(entry);
+	}
+
 	return {
 		get(values) {
 			const key = stableInputKey(values);
@@ -51,25 +105,35 @@ export function createSolveMemo(max = 16): SolveMemo {
 			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;
+			// this line is the only trace it wasn't a fresh solve.
+			console.info(`[Compute/memo] HIT — served from client memo (${entries.size}/${max})`);
+			// Clone on the way out: the viewer disposes what it renders, so the retained
+			// entry must never be the instance handed to it (audit C1).
+			if (!hit.meshes?.length) return hit;
+			return { ...hit, meshes: cloneSceneObjects(hit.meshes) };
 		},
 		set(values, result) {
 			const key = stableInputKey(values);
-			entries.delete(key);
-			entries.set(key, result);
+			// Overwriting a key strands the old value's buffers unless it's disposed first.
+			evict(key);
+			// Store a private copy for the same reason `get` clones: the caller reports this
+			// same object to the viewer, which will dispose it on the next scene update.
+			entries.set(
+				key,
+				result.meshes?.length ? { ...result, meshes: cloneSceneObjects(result.meshes) } : result
+			);
 			while (entries.size > max) {
 				const oldest = entries.keys().next().value;
 				if (oldest === undefined) break;
-				entries.delete(oldest);
-				console.debug(`[Compute/memo] evicted LRU entry (cap ${max})`);
+				evict(oldest);
+				console.info(`[Compute/memo] evicted LRU entry (cap ${max})`);
 			}
 		},
 		clear() {
 			if (entries.size > 0) {
-				console.debug(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
+				console.info(`[Compute/memo] cleared ${entries.size} entries (definition changed)`);
 			}
+			entries.forEach(disposeSceneObjects);
 			entries.clear();
 		}
 	};

package/src/lib/i18n/messages.ts

@@ -22,6 +22,10 @@ export interface ViewerMessages {
 	views: string;
 	measure: string;
 	grid: string;
+	/** "Display" submenu label — groups render style + edges. */
+	display: string;
+	/** Edges show/hide toggle label. */
+	edges: string;
 	sceneManager: string;
 	screenshot: string;
 	fullscreen: string;
@@ -82,6 +86,8 @@ const en: ViewerMessages = {
 	views: 'Views',
 	measure: 'Measure',
 	grid: 'Grid',
+	display: 'Display',
+	edges: 'Edges',
 	sceneManager: 'Scene manager',
 	screenshot: 'Screenshot',
 	fullscreen: 'Fullscreen',
@@ -135,6 +141,8 @@ const de: ViewerMessages = {
 	views: 'Ansichten',
 	measure: 'Messen',
 	grid: 'Raster',
+	display: 'Darstellung',
+	edges: 'Kanten',
 	sceneManager: 'Szenen-Manager',
 	screenshot: 'Screenshot',
 	fullscreen: 'Vollbild',