@selvajs/ui 6.2.0 → 6.3.0

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -13,7 +13,7 @@
 		isFullscreen?: boolean;
 	}
 
-	const EXCLUDED_KEYS = new Set(['name', 'layer', 'originalIndex', 'sourceComponentId']);
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
 
 	let {
 		open = $bindable(),

package/dist/components/viewer/SceneManager.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-	import * as THREE from 'three';
-	import { Eye, EyeOff, ChevronRight, Search, X } from '@lucide/svelte';
 	import {
-		getObjectLabel,
-		getTrackingKey,
+		Eye,
+		EyeOff,
+		ChevronRight,
+		ChevronsDownUp,
+		ChevronsUpDown,
+		Search,
+		X
+	} from '@lucide/svelte';
+	import {
+		getMemberKeys,
 		getTypeLabel,
+		type SceneEntry,
 		type SceneOutliner
 	} from '@selvajs/visualization/scene';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -30,13 +37,17 @@
 
 	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
 
-	const toggleLayer = (objects: THREE.Object3D[]) => {
-		outliner.visibility.toggleLayer(objects);
+	// A partially hidden layer hides the rest; only a fully hidden one comes back — the same rule
+	// `visibility.toggleLayer` applies to objects, restated over entries because a layer's rows are
+	// now members, not necessarily whole objects.
+	const toggleLayer = (entries: SceneEntry[]) => {
+		const show = entries.length > 0 && entries.every((entry) => isEntryHidden(entry));
+		for (const entry of entries) outliner.visibility.setEntryVisible(entry, show);
 		onVisibilityChange?.();
 	};
 
-	const toggleObject = (object: THREE.Object3D) => {
-		outliner.toggleObject(object);
+	const toggleEntry = (entry: SceneEntry) => {
+		outliner.toggleEntry(entry);
 		onVisibilityChange?.();
 	};
 
@@ -51,6 +62,11 @@
 	let searchQuery = $state('');
 	let anchor = $state<string | null>(null);
 
+	// Layers start collapsed: a solve can produce dozens, and an all-expanded list buries the
+	// layer names it exists to show. Only for the first batch of content — after that the user's
+	// collapse state is theirs, and re-collapsing on every solve would fight them.
+	let collapsedOnLoad = false;
+
 	$effect(() => outliner.onAnchorChange((next) => (anchor = next)));
 
 	// `scene.children` is a plain array the render layer mutates in place, so a solve bumping
@@ -60,19 +76,126 @@
 		return outliner.objects();
 	});
 
+	// Entries, not objects: a merged mesh renders as one THREE object but lists as one row per
+	// source object, so an imported model shows its building elements instead of the handful of
+	// meshes they were merged into.
 	const layerGroups = $derived.by(() => {
 		void sceneVersion;
-		return outliner.layerGroups(searchQuery);
+		return outliner.entryGroups(searchQuery);
+	});
+
+	const collapseAll = () => {
+		for (const layerName of outliner.entryGroups().keys()) collapsed.add(layerName);
+	};
+
+	$effect(() => {
+		void sceneVersion;
+		if (collapsedOnLoad || outliner.entryGroups().size === 0) return;
+		collapsedOnLoad = true;
+		collapseAll();
+	});
+
+	const expandAll = () => collapsed.clear();
+
+	const allCollapsed = $derived(
+		layerGroups.size > 0 && [...layerGroups.keys()].every((name) => collapsed.has(name))
+	);
+
+	// ============================================================================
+	// Windowing
+	// ============================================================================
+	//
+	// A scene can hold thousands of objects. Mounting a row per object makes expanding a layer,
+	// typing in the search box, and scrolling all pay for the whole list, so only the rows
+	// overlapping the viewport are rendered and the rest are replaced by spacer height.
+	//
+	// The two row types have different heights, so the flat model records each row's height and a
+	// running offset rather than assuming a single row size. Keep these in sync with the markup:
+	// a header is `py-1` around a 3.5-unit icon, an object row `py-0.5` around a 3-unit one.
+	const LAYER_ROW_HEIGHT = 30;
+	const OBJECT_ROW_HEIGHT = 24;
+	// Rows rendered beyond each edge of the viewport, so a fast scroll doesn't show blank space.
+	const OVERSCAN = 8;
+
+	type Row =
+		| {
+				kind: 'layer';
+				key: string;
+				top: number;
+				height: number;
+				layerName: string;
+				entries: SceneEntry[];
+		  }
+		| { kind: 'object'; key: string; top: number; height: number; entry: SceneEntry };
+
+	const rows = $derived.by(() => {
+		const flat: Row[] = [];
+		let top = 0;
+		for (const [layerName, entries] of layerGroups) {
+			flat.push({
+				kind: 'layer',
+				key: `layer:${layerName}`,
+				top,
+				height: LAYER_ROW_HEIGHT,
+				layerName,
+				entries
+			});
+			top += LAYER_ROW_HEIGHT;
+			if (collapsed.has(layerName)) continue;
+			for (const entry of entries) {
+				flat.push({
+					kind: 'object',
+					key: entry.key,
+					top,
+					height: OBJECT_ROW_HEIGHT,
+					entry
+				});
+				top += OBJECT_ROW_HEIGHT;
+			}
+		}
+		return flat;
+	});
+
+	const totalHeight = $derived(
+		rows.length === 0 ? 0 : rows[rows.length - 1]!.top + rows[rows.length - 1]!.height
+	);
+
+	let scrollTop = $state(0);
+	let viewportHeight = $state(0);
+
+	/** First row index whose bottom edge is at or past `offset`. Rows are ordered by `top`. */
+	const findRowAt = (offset: number) => {
+		let low = 0;
+		let high = rows.length - 1;
+		while (low < high) {
+			const mid = (low + high) >> 1;
+			if (rows[mid]!.top + rows[mid]!.height <= offset) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	};
+
+	const visibleRows = $derived.by(() => {
+		if (rows.length === 0) return [];
+		// Before the first measurement `viewportHeight` is 0; render a screenful so the list is
+		// never briefly empty.
+		const height = viewportHeight || 600;
+		const start = Math.max(0, findRowAt(scrollTop) - OVERSCAN);
+		const end = Math.min(rows.length, findRowAt(scrollTop + height) + 1 + OVERSCAN);
+		return rows.slice(start, end);
 	});
 
 	// `SvelteSet.has()` is the reactive read, so go through the set rather than calling
 	// `visibility.isHidden` — that reaches the set through a plain reference inside the outliner
 	// and returns a correct value that never re-renders this row.
-	const isObjectHidden = (object: THREE.Object3D) => hidden.has(getTrackingKey(object));
+	const isEntryHidden = (entry: SceneEntry) =>
+		entry.memberIndex === null
+			? getMemberKeys(entry.object).every((key) => hidden.has(key))
+			: hidden.has(entry.key);
 
-	// Same reason: count through the reactive set so the layer's tri-state eye tracks its objects.
-	const hiddenCount = (objects: THREE.Object3D[]) =>
-		objects.filter((object) => isObjectHidden(object)).length;
+	// Same reason: count through the reactive set so the layer's tri-state eye tracks its entries.
+	const hiddenCount = (entries: SceneEntry[]) =>
+		entries.filter((entry) => isEntryHidden(entry)).length;
 
 	// Reading `anchor` keeps the shift-range dependent on it; the outliner owns the value.
 	const selectObject = (uuid: string, event: MouseEvent) => {
@@ -104,110 +227,142 @@
 				/>
 			</button>
 		{/if}
+
+		<button
+			class="shrink-0"
+			onclick={() => (allCollapsed ? expandAll() : collapseAll())}
+			title={allCollapsed ? t.expandAll : t.collapseAll}
+			aria-label={allCollapsed ? t.expandAll : t.collapseAll}
+		>
+			{#if allCollapsed}
+				<ChevronsUpDown
+					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+				/>
+			{:else}
+				<ChevronsDownUp
+					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+				/>
+			{/if}
+		</button>
 	</div>
 
-	<div class="py-1 flex-1 overflow-y-auto">
-		{#each [...layerGroups] as [layerName, objects] (layerName)}
-			{@const numHidden = hiddenCount(objects)}
-			{@const layerHidden = objects.length > 0 && numHidden === objects.length}
-			{@const layerPartial = numHidden > 0 && numHidden < objects.length}
-			{@const isCollapsed = collapsed.has(layerName)}
-
-			<div class="gap-1 pl-1 pr-2 py-1 group flex items-center transition-colors hover:bg-muted">
-				<button
-					class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
-					onclick={() => outliner.toggleCollapsed(layerName)}
-					aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
-				>
-					<ChevronRight
-						class="h-3.5 w-3.5 transition-transform duration-150 {isCollapsed ? '' : 'rotate-90'}"
-					/>
-				</button>
-
-				<button
-					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-					onclick={() => toggleLayer(objects)}
-					title={layerHidden ? t.showLayer : t.hideLayer}
-					aria-label={layerHidden ? t.showLayer : t.hideLayer}
-				>
-					{#if layerHidden}
-						<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
-					{:else if layerPartial}
-						<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
-					{:else}
-						<Eye class="h-3.5 w-3.5 text-muted-foreground" />
-					{/if}
-				</button>
-
-				<span
-					class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
-						? 'text-muted-foreground/40 line-through'
-						: 'text-foreground'}"
-				>
-					{layerName}
-				</span>
-
-				<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
-					{objects.length}
-				</span>
-			</div>
+	<div
+		class="py-1 flex-1 overflow-y-auto"
+		bind:clientHeight={viewportHeight}
+		onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
+	>
+		<!-- Spacer sized to the full list; windowed rows are placed into it by offset. The listbox
+		     sits here rather than per layer: windowing renders one flat row list, so every option
+		     shares a single owner. -->
+		<div role="listbox" aria-multiselectable="true" class="relative" style:height="{totalHeight}px">
+			{#each visibleRows as row (row.key)}
+				<div class="inset-x-0 absolute" style:top="{row.top}px" style:height="{row.height}px">
+					{#if row.kind === 'layer'}
+						{@const entries = row.entries}
+						{@const numHidden = hiddenCount(entries)}
+						{@const layerHidden = entries.length > 0 && numHidden === entries.length}
+						{@const layerPartial = numHidden > 0 && numHidden < entries.length}
+						{@const isCollapsed = collapsed.has(row.layerName)}
 
-			{#if !isCollapsed}
-				<div role="listbox" aria-multiselectable="true" class="ml-3 border-l border-border">
-					{#each objects as object (object.uuid)}
-						<!-- Visibility is keyed by Grasshopper identity (so it survives a solve), selection
-						     by uuid (so it does not) — hence the two different lookups. -->
-						{@const isHidden = isObjectHidden(object)}
-						{@const isSelected = selected.has(object.uuid)}
 						<div
-							role="option"
-							aria-selected={isSelected}
-							tabindex="-1"
-							class="gap-1.5 pl-5 pr-2 py-0.5 flex cursor-pointer items-center transition-colors
-								{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
-								{isHidden ? 'opacity-40' : ''}"
-							onmousedown={(e) => {
-								e.stopPropagation();
-								if (e.shiftKey) e.preventDefault();
-							}}
-							onclick={(e) => selectObject(object.uuid, e)}
-							onkeydown={(e) =>
-								e.key === 'Enter' && selectObject(object.uuid, e as unknown as MouseEvent)}
+							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-muted"
 						>
+							<button
+								class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
+								onclick={() => outliner.toggleCollapsed(row.layerName)}
+								aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
+							>
+								<ChevronRight
+									class="h-3.5 w-3.5 transition-transform duration-150 {isCollapsed
+										? ''
+										: 'rotate-90'}"
+								/>
+							</button>
+
 							<button
 								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-								onclick={(e) => {
-									e.stopPropagation();
-									toggleObject(object);
-								}}
-								title={isHidden ? t.showObject : t.hideObject}
-								aria-label={isHidden ? t.showObject : t.hideObject}
+								onclick={() => toggleLayer(entries)}
+								title={layerHidden ? t.showLayer : t.hideLayer}
+								aria-label={layerHidden ? t.showLayer : t.hideLayer}
 							>
-								{#if isHidden}
-									<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+								{#if layerHidden}
+									<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
+								{:else if layerPartial}
+									<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
 								{:else}
-									<Eye class="h-3 w-3 text-muted-foreground" />
+									<Eye class="h-3.5 w-3.5 text-muted-foreground" />
 								{/if}
 							</button>
 
 							<span
-								class="min-w-0 text-xs flex-1 truncate {isHidden
-									? 'text-muted-foreground line-through'
-									: 'text-foreground/80'}"
+								class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
+									? 'text-muted-foreground/40 line-through'
+									: 'text-foreground'}"
 							>
-								{getObjectLabel(object)}
+								{row.layerName}
 							</span>
 
-							<span
-								class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
-							>
-								{getTypeLabel(object)}
+							<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
+								{entries.length}
 							</span>
 						</div>
-					{/each}
+					{:else}
+						{@const entry = row.entry}
+						<!-- Both keyed by the entry's stable identity: a merged mesh holds many entries, so
+						     the object's uuid cannot tell its members apart. -->
+						{@const isHidden = isEntryHidden(entry)}
+						{@const isSelected = selected.has(entry.key)}
+						<div class="ml-3 h-full border-l border-border">
+							<div
+								role="option"
+								aria-selected={isSelected}
+								tabindex="-1"
+								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
+									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
+									{isHidden ? 'opacity-40' : ''}"
+								onmousedown={(e) => {
+									e.stopPropagation();
+									if (e.shiftKey) e.preventDefault();
+								}}
+								onclick={(e) => selectObject(entry.key, e)}
+								onkeydown={(e) =>
+									e.key === 'Enter' && selectObject(entry.key, e as unknown as MouseEvent)}
+							>
+								<button
+									class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+									onclick={(e) => {
+										e.stopPropagation();
+										toggleEntry(entry);
+									}}
+									title={isHidden ? t.showObject : t.hideObject}
+									aria-label={isHidden ? t.showObject : t.hideObject}
+								>
+									{#if isHidden}
+										<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+									{:else}
+										<Eye class="h-3 w-3 text-muted-foreground" />
+									{/if}
+								</button>
+
+								<span
+									class="min-w-0 text-xs flex-1 truncate {isHidden
+										? 'text-muted-foreground line-through'
+										: 'text-foreground/80'}"
+								>
+									{entry.label}
+								</span>
+
+								<span
+									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
+								>
+									{getTypeLabel(entry.object)}
+								</span>
+							</div>
+						</div>
+					{/if}
 				</div>
-			{/if}
-		{/each}
+			{/each}
+		</div>
 
 		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">

package/dist/components/viewer/Viewer.svelte

@@ -5,6 +5,7 @@
 		initThree,
 		updateScene,
 		LOOKS,
+		LOOK_PRESETS,
 		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
@@ -118,12 +119,13 @@
 	let cameraController: CameraController | null = null;
 	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 applyEdges: ThreeViewer['applyEdges'] | null = null;
+	let clearEdges: ThreeViewer['clearEdges'] | null = null;
 	let invalidate: (() => void) | null = null;
 	let captureImage: ThreeViewer['captureImage'] | null = null;
 	let setLook: ((look: Look) => void) | null = null;
 	let updateGridScale: (() => void) | null = null;
+	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -145,10 +147,15 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit.
+	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit; the
+	// map only overrides the names that don't survive capitalisation ('xray' → 'X-Ray').
+	const LOOK_LABELS: Partial<Record<Look, string>> = {
+		xray: 'X-Ray',
+		lineart: 'Line Art'
+	};
 	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
 		look,
-		label: look.charAt(0).toUpperCase() + look.slice(1)
+		label: LOOK_LABELS[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
 	}));
 
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
@@ -176,12 +183,11 @@
 	onMount(() => {
 		if (!canvas) return;
 
-		// Only what differs from the library defaults. The sun and shadows are off because the
-		// technical look doesn't need them — flat ambient plus the HDR environment carry it.
+		// Only what differs from the library defaults. Sunlight, shadows and AO are left ON (the
+		// library default) and their strength comes from the look — with IBL alone every face of a
+		// box lights nearly equally and the model reads as a flat white silhouette.
 		const opts: ThreeInitializerOptions = {
 			look: renderStyle,
-			lighting: { enableSunlight: false },
-			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
@@ -214,6 +220,7 @@
 		captureImage = init.captureImage;
 		setLook = init.setLook;
 		updateGridScale = init.updateGridScale;
+		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -255,22 +262,84 @@
 		invalidate?.();
 	}
 
+	// Edges the lineart look switched on, so leaving it can put the user's own choice back rather
+	// than stranding them with overlays they never asked for.
+	let edgesBeforeLineDrawing: boolean | null = null;
+
 	function setRenderStyle(look: Look) {
 		if (!setLook || look === renderStyle) return;
+		const wasLineDrawing = LOOK_PRESETS[renderStyle].requiresEdges === true;
 		renderStyle = look;
 		setLook(look);
+
+		// A look never drives the overlay itself; honouring `requiresEdges` is the host's call. Without
+		// edges lineart is blank white shapes, so entering it forces them on.
+		if (LOOK_PRESETS[look].requiresEdges) {
+			if (!wasLineDrawing) edgesBeforeLineDrawing = edgesVisible;
+			if (!edgesVisible) {
+				edgesVisible = true;
+			} else if (!wasLineDrawing && scene) {
+				// Already-attached overlays carry the old fade setting, and addEdges skips a mesh that
+				// has one — so they have to go before the un-faded pass can replace them.
+				clearEdges?.(scene);
+			}
+			applyEdgeState();
+		} else if (wasLineDrawing && edgesBeforeLineDrawing !== null) {
+			edgesVisible = edgesBeforeLineDrawing;
+			// Rebuild either way: staying on means swapping the un-faded overlays back for faded ones.
+			if (edgesVisible && scene) clearEdges?.(scene);
+			applyEdgeState();
+			edgesBeforeLineDrawing = null;
+		} else if (edgesVisible && scene) {
+			// Neither look is a line drawing, but an overlay's colour is derived from its mesh's
+			// material — which `setLook` just repainted. addEdges skips meshes that already have an
+			// overlay, so without a rebuild the edges keep the previous look's colour.
+			clearEdges?.(scene);
+			applyEdgeState();
+		}
+	}
+
+	// Meshes past the overlay budget get the screen-space fallback instead, and that pass thresholds
+	// a depth/normal discontinuity to decide what is an edge — so a shallow crease sitting near the
+	// cutoff flips on and off as the camera turns a degree. Tolerable as a hint over a shaded model;
+	// in a line drawing it is the picture itself flickering. Raised far enough that a building model
+	// gets real overlays throughout: they cost draw calls, but they are stable under orbit.
+	const LINE_ART_MAX_OVERLAYS = 20_000;
+
+	// Edge colour is normally derived per mesh from that mesh's own material, darkened. lineart
+	// repaints every material near-white, so a derived edge lands at rgb(62,62,62) or lighter — and
+	// worse, `setLook` and `applyEdges` are independent, so whether the derivation sees the white
+	// override or the model's original colours depends on which ran last. That is the real source of
+	// the "edges look different every time" behaviour. Forcing a colour makes it deterministic.
+	const LINE_ART_EDGE_COLOR = 0x1a1d21;
+
+	// The density fade sets opacity per overlay, so a finely-detailed mesh fades as a whole and its
+	// long silhouette edges go with it — in a line drawing that erases the only thing on screen, and
+	// it recomputes per frame, so edges pop while orbiting. Shaded looks keep it: there it just
+	// softens outlines on a model you can still see.
+	function edgeOverrides() {
+		return LOOK_PRESETS[renderStyle].requiresEdges
+			? {
+					distanceFade: false,
+					maxOverlays: LINE_ART_MAX_OVERLAYS,
+					color: LINE_ART_EDGE_COLOR
+				}
+			: undefined;
 	}
 
 	// `applyEdges` is idempotent per mesh, so the repeated calls after each solve add no duplicate
 	// overlays; `clearEdges` is its inverse.
 	function applyEdgeState() {
 		if (!scene) return;
-		if (edgesVisible) applyEdges?.(scene);
+		if (edgesVisible) applyEdges?.(scene, edgeOverrides());
 		else clearEdges?.(scene);
 	}
 
 	function toggleEdges() {
 		edgesVisible = !edgesVisible;
+		// Toggling by hand inside lineart overrides what that look forced, so the pre-look value is
+		// stale — leaving the look must not undo the user's more recent explicit choice.
+		if (LOOK_PRESETS[renderStyle].requiresEdges) edgesBeforeLineDrawing = null;
 		applyEdgeState();
 	}
 
@@ -280,10 +349,16 @@
 			// Untracked because toggleEdges() already handles the toggle directly — reading
 			// `edgesVisible` tracked here would re-trigger a full solve.
 			untrack(() => {
+				// The new meshes carry the materials the parser built, so a look that overrides them
+				// (arctic, x-ray) has to be re-applied or the solve silently reverts to shaded.
+				setLook?.(renderStyle);
 				// updateScene discarded the previous solve's overlays along with its content.
-				if (edgesVisible) applyEdges?.(scene!);
+				if (edgesVisible) applyEdges?.(scene!, edgeOverrides());
 				// Rescale the grid so cells and fade match the new content's extent.
 				updateGridScale?.();
+				// The shadow frustum is sized to scene content, so it has to follow the new geometry —
+				// left at the old extent, shadows go blocky or fall outside the map entirely.
+				updateShadowBounds?.();
 				// The rebuild un-hid everything; the outliner keys hidden state on Grasshopper
 				// identity, not on the instances just discarded, so it can re-hide it.
 				outliner?.applyTo();
@@ -313,8 +388,7 @@
 		const EXCLUDED_KEYS = new Set([
 			'name',
 			'layer',
-			'originalIndex',
-			'sourceComponentId',
+			'id',
 			'vertexCount',
 			'faceCount',
 			'vertexOffset',
@@ -420,10 +494,10 @@
 									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
 										{#if projection === 'perspective'}
 											<Square class="h-4 w-4" />
-											{t.switchTo2D}
+											{t.switchToOrthographic}
 										{:else}
 											<Box class="h-4 w-4" />
-											{t.switchTo3D}
+											{t.switchToPerspective}
 										{/if}
 									</DropdownMenu.Item>
 

package/dist/i18n/messages.d.ts

@@ -1,8 +1,8 @@
 export type Locale = 'en' | 'de';
 export interface ViewerMessages {
     toolsMenu: string;
-    switchTo2D: string;
-    switchTo3D: string;
+    switchToOrthographic: string;
+    switchToPerspective: string;
     fitToView: string;
     views: string;
     measure: string;
@@ -24,6 +24,8 @@ export interface ViewerMessages {
     clearSearch: string;
     expandLayer: string;
     collapseLayer: string;
+    expandAll: string;
+    collapseAll: string;
     showLayer: string;
     hideLayer: string;
     showObject: string;

package/dist/i18n/messages.js

@@ -7,8 +7,8 @@
 // cannot be translated here.
 const en = {
     toolsMenu: 'Viewer tools',
-    switchTo2D: 'Switch to 2D',
-    switchTo3D: 'Switch to 3D',
+    switchToOrthographic: 'Orthographic camera',
+    switchToPerspective: 'Perspective camera',
     fitToView: 'Fit to view',
     views: 'Views',
     measure: 'Measure',
@@ -30,6 +30,8 @@ const en = {
     clearSearch: 'Clear search',
     expandLayer: 'Expand layer',
     collapseLayer: 'Collapse layer',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
     showLayer: 'Show layer',
     hideLayer: 'Hide layer',
     showObject: 'Show object',
@@ -56,8 +58,8 @@ const en = {
 };
 const de = {
     toolsMenu: 'Viewer-Werkzeuge',
-    switchTo2D: 'Zu 2D wechseln',
-    switchTo3D: 'Zu 3D wechseln',
+    switchToOrthographic: 'Orthografische Kamera',
+    switchToPerspective: 'Perspektivische Kamera',
     fitToView: 'Ansicht anpassen',
     views: 'Ansichten',
     measure: 'Messen',
@@ -79,6 +81,8 @@ const de = {
     clearSearch: 'Suche löschen',
     expandLayer: 'Ebene aufklappen',
     collapseLayer: 'Ebene zuklappen',
+    expandAll: 'Alle aufklappen',
+    collapseAll: 'Alle zuklappen',
     showLayer: 'Ebene einblenden',
     hideLayer: 'Ebene ausblenden',
     showObject: 'Objekt einblenden',