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

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/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

@@ -4,6 +4,9 @@
 	import {
 		initThree,
 		updateScene,
+		removeEdges,
+		LOOKS,
+		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
 		type CameraProjection,
@@ -23,7 +26,9 @@
 		Ruler,
 		Grid3x3,
 		Check,
-		ChevronRight
+		ChevronRight,
+		Palette,
+		Spline
 	} from '@lucide/svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import type * as THREE from 'three';
@@ -41,6 +46,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 +82,7 @@
 		showSceneManager: true,
 		showToolsMenu: true,
 		showGridToggle: true,
+		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -107,6 +118,9 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
+	let applyEdges: ((root: THREE.Object3D) => 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);
@@ -115,9 +129,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 },
@@ -143,12 +168,17 @@
 	onMount(() => {
 		if (!canvas) return;
 
+		// 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 },
-			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 +200,9 @@
 		measureTool = init.measureTool;
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
+		applyEdges = init.applyEdges;
+		setLook = init.setLook;
+		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -205,10 +238,37 @@
 		grid.setVisible(gridVisible);
 	}
 
+	function setRenderStyle(look: Look) {
+		if (!setLook || look === renderStyle) return;
+		renderStyle = look;
+		setLook(look);
+	}
+
+	// Add/remove crease-edge overlays on the current scene content. addEdges is idempotent per mesh, so
+	// a redundant apply is harmless; removeEdges is its refcounted inverse.
+	function applyEdgeState() {
+		if (!scene) return;
+		if (edgesVisible) applyEdges?.(scene);
+		else removeEdges(scene);
+	}
+
+	function toggleEdges() {
+		edgesVisible = !edgesVisible;
+		applyEdgeState();
+	}
+
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
-			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++;
+			});
 
 			if (!viewerInitialized && meshes.length > 0) {
 				viewerInitialized = true;
@@ -364,6 +424,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/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

@@ -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);
@@ -38,20 +89,35 @@ export function createSolveMemo(max = 16) {
             // Refresh recency: re-insert at the tail.
             entries.delete(key);
             entries.set(key, hit);
-            return hit;
+            // A memo hit skips the transport entirely, so no other log line fires —
+            // 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);
+                evict(oldest);
+                console.info(`[Compute/memo] evicted LRU entry (cap ${max})`);
             }
         },
         clear() {
+            if (entries.size > 0) {
+                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,19 @@
 {
   "name": "@selvajs/ui",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "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 +45,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.12",
     "@selvajs/schemas": "^4.7.0-beta.0"
   },
   "peerDependenciesMeta": {
@@ -64,19 +72,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",
+    "vitest": "^3.2.7",
     "@selvajs/config": "0.0.2",
     "@selvajs/schemas": "4.7.0-beta.0"
   },
   "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/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

@@ -4,6 +4,9 @@
 	import {
 		initThree,
 		updateScene,
+		removeEdges,
+		LOOKS,
+		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
 		type CameraProjection,
@@ -23,7 +26,9 @@
 		Ruler,
 		Grid3x3,
 		Check,
-		ChevronRight
+		ChevronRight,
+		Palette,
+		Spline
 	} from '@lucide/svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import type * as THREE from 'three';
@@ -41,6 +46,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 +82,7 @@
 		showSceneManager: true,
 		showToolsMenu: true,
 		showGridToggle: true,
+		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6'
 	};
@@ -107,6 +118,9 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
+	let applyEdges: ((root: THREE.Object3D) => 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);
@@ -115,9 +129,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 },
@@ -143,12 +168,17 @@
 	onMount(() => {
 		if (!canvas) return;
 
+		// 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 },
-			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 +200,9 @@
 		measureTool = init.measureTool;
 		grid = init.grid;
 		grid?.setVisible(gridVisible);
+		applyEdges = init.applyEdges;
+		setLook = init.setLook;
+		updateGridScale = init.updateGridScale;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -205,10 +238,37 @@
 		grid.setVisible(gridVisible);
 	}
 
+	function setRenderStyle(look: Look) {
+		if (!setLook || look === renderStyle) return;
+		renderStyle = look;
+		setLook(look);
+	}
+
+	// Add/remove crease-edge overlays on the current scene content. addEdges is idempotent per mesh, so
+	// a redundant apply is harmless; removeEdges is its refcounted inverse.
+	function applyEdgeState() {
+		if (!scene) return;
+		if (edgesVisible) applyEdges?.(scene);
+		else removeEdges(scene);
+	}
+
+	function toggleEdges() {
+		edgesVisible = !edgesVisible;
+		applyEdgeState();
+	}
+
 	$effect(() => {
 		if (scene && camera && controls) {
 			updateScene(scene, meshes, camera, controls, viewerInitialized);
-			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++;
+			});
 
 			if (!viewerInitialized && meshes.length > 0) {
 				viewerInitialized = true;
@@ -364,6 +424,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/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.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);
@@ -50,19 +104,36 @@ export function createSolveMemo(max = 16): SolveMemo {
 			// Refresh recency: re-insert at the tail.
 			entries.delete(key);
 			entries.set(key, hit);
-			return hit;
+			// A memo hit skips the transport entirely, so no other log line fires —
+			// 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);
+				evict(oldest);
+				console.info(`[Compute/memo] evicted LRU entry (cap ${max})`);
 			}
 		},
 		clear() {
+			if (entries.size > 0) {
+				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',