@selvajs/ui 6.6.0-beta.13 → 6.6.0-beta.15

package/dist/components/compute/AppLayout.svelte

@@ -347,7 +347,8 @@
 					{onViewerReady}
 					viewerConfig={{
 						...viewerConfig,
-						backgroundColor: schema?.viewerOptions?.backgroundColor,
+						backgroundColor: schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+						look: schema?.viewerOptions?.look ?? viewerConfig.look,
 						showSceneManager: false
 					}}
 				/>
@@ -490,7 +491,9 @@
 							{onViewerReady}
 							viewerConfig={{
 								...viewerConfig,
-								backgroundColor: schema?.viewerOptions?.backgroundColor
+								backgroundColor:
+									schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+								look: schema?.viewerOptions?.look ?? viewerConfig.look
 							}}
 						/>
 					</Resizable.Pane>

package/dist/components/preview/inputs/SegmentedInput.svelte

@@ -23,7 +23,7 @@
 
 <ToggleGroup.Root
 	type="single"
-	variant="outline"
+	variant="accent"
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

package/dist/components/preview/inputs/TileInput.svelte

@@ -45,6 +45,7 @@
 			bind:this={tiles[index]}
 			type="button"
 			role="radio"
+			title={option.name}
 			aria-checked={selected}
 			tabindex={index === focusIndex ? 0 : -1}
 			{disabled}
@@ -65,7 +66,7 @@
 					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
 				{/if}
 			</span>
-			<span class="px-0.5 text-xs leading-tight truncate" class:font-medium={selected}>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
 				{option.name}
 			</span>
 		</button>

package/dist/components/primitives/toggle/toggle.svelte

@@ -6,7 +6,10 @@
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent'
+				outline: 'border-input hover:bg-muted border bg-transparent',
+				// Filled accent for the active item; a bare bg-muted is too faint on a form.
+				accent:
+					'border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'
 			},
 			size: {
 				default:

package/dist/components/primitives/toggle/toggle.svelte.d.ts

@@ -3,6 +3,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         outline: "border-input hover:bg-muted border bg-transparent";
+        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
@@ -14,6 +15,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         outline: "border-input hover:bg-muted border bg-transparent";
+        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
@@ -25,6 +27,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         outline: "border-input hover:bg-muted border bg-transparent";
+        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";

package/dist/components/primitives/toggle-group/toggle-group-item.svelte

@@ -23,7 +23,7 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-t group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size

package/dist/components/viewer/Viewer.svelte

@@ -52,6 +52,8 @@
 		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
+		/** The look to open in. Default `technical`. */
+		look?: Look;
 		/** Initial state of the edge overlay and its display-menu checkmark. Default false. */
 		showEdges?: boolean;
 	}
@@ -91,6 +93,7 @@
 		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6',
+		look: 'technical',
 		showEdges: false
 	};
 
@@ -124,7 +127,8 @@
 	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 setLook: ThreeViewer['setLook'] | null = null;
+	let syncEmissiveLights: (() => void) | null = null;
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
@@ -145,9 +149,16 @@
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
-	let renderStyle: Look = $state('technical');
+	// A saved schema can name a look this build doesn't have, and an unknown look throws on mount.
+	const openingLook = untrack(() => {
+		const look = viewerConfig.look;
+		return look && LOOKS.includes(look) ? look : defaultViewerConfig.look;
+	});
+	const opensAsLineDrawing = LOOK_PRESETS[openingLook].requiresEdges === true;
+	const configuredEdges = untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges;
+	let renderStyle: Look = $state(openingLook);
 	// Seeded once, then owned by the menu toggle.
-	let edgesVisible = $state(untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges);
+	let edgesVisible = $state(opensAsLineDrawing || configuredEdges);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -160,7 +171,8 @@
 		arctic: t.lookArctic,
 		xray: t.lookXray,
 		lineart: t.lookLineart,
-		wireframe: t.lookWireframe
+		wireframe: t.lookWireframe,
+		night: t.lookNight
 	});
 	const styleOptions = $derived<{ look: Look; label: string }[]>(
 		LOOKS.map((look) => ({
@@ -234,6 +246,7 @@
 		invalidate = init.invalidate;
 		captureImage = init.captureImage;
 		setLook = init.setLook;
+		syncEmissiveLights = init.syncEmissiveLights;
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
@@ -279,7 +292,7 @@
 
 	// 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;
+	let edgesBeforeLineDrawing: boolean | null = opensAsLineDrawing ? configuredEdges : null;
 
 	function setRenderStyle(look: Look) {
 		if (!setLook || look === renderStyle) return;
@@ -366,7 +379,8 @@
 			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);
+				// Emissive lights wait for `applyTo` below, or a hidden lamp would count as lit.
+				setLook?.(renderStyle, { deferEmissiveLights: true });
 				// updateScene discarded the previous solve's overlays along with its content.
 				if (edgesVisible) applyEdges?.(scene!, edgeOverrides());
 				// Rescale the grid so cells and fade match the new content's extent.
@@ -377,6 +391,7 @@
 				// 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();
+				syncEmissiveLights?.();
 				sceneVersion++;
 				// Repaint now rather than on the render loop's safety interval.
 				invalidate?.();
@@ -680,7 +695,7 @@
 				<SceneManager
 					{outliner}
 					{sceneVersion}
-					onVisibilityChange={() => invalidate?.()}
+					onVisibilityChange={() => syncEmissiveLights?.()}
 					onHover={(entry) => setHover?.(entry?.object ?? null, entry?.memberIndex ?? null)}
 				/>
 			</Resizable.Pane>

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

@@ -1,4 +1,4 @@
-import { type ThreeViewer } from '@selvajs/visualization/render';
+import { type Look, type ThreeViewer } from '@selvajs/visualization/render';
 import type { Locale } from '../../i18n/messages';
 export interface ViewerConfig {
     showScreenshotButton?: boolean;
@@ -9,6 +9,8 @@ export interface ViewerConfig {
     showDisplayMenu?: boolean;
     enableMeshClick?: boolean;
     backgroundColor?: string;
+    /** The look to open in. Default `technical`. */
+    look?: Look;
     /** Initial state of the edge overlay and its display-menu checkmark. Default false. */
     showEdges?: boolean;
 }

package/dist/i18n/messages.d.ts

@@ -23,6 +23,7 @@ export interface ViewerMessages {
     lookTechnical: string;
     lookStudio: string;
     lookShowcase: string;
+    lookNight: string;
     lookArctic: string;
     lookXray: string;
     lookLineart: string;

package/dist/i18n/messages.js

@@ -32,6 +32,7 @@ const en = {
     lookTechnical: 'Technical',
     lookStudio: 'Studio',
     lookShowcase: 'Showcase',
+    lookNight: 'Night',
     lookArctic: 'Arctic',
     lookXray: 'X-Ray',
     lookLineart: 'Line Art',
@@ -206,6 +207,7 @@ const de = {
     lookTechnical: 'Technisch',
     lookStudio: 'Studio',
     lookShowcase: 'Präsentation',
+    lookNight: 'Nacht',
     lookArctic: 'Arktis',
     lookXray: 'Röntgen',
     lookLineart: 'Strichzeichnung',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.13",
+  "version": "6.6.0-beta.15",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -63,10 +63,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
-    "@selvajs/compute": "^5.0.0-beta.8",
-    "@selvajs/schemas": "^5.3.0-beta.1",
-    "@selvajs/visualization": "^1.6.0-beta.7",
-    "@selvajs/solve": "^2.0.0-beta.10"
+    "@selvajs/compute": "^5.0.0-beta.9",
+    "@selvajs/visualization": "^1.6.0-beta.9",
+    "@selvajs/schemas": "^5.3.0-beta.2",
+    "@selvajs/solve": "^2.0.0-beta.12"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -94,11 +94,11 @@
     "svelte": "5.57.2",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.5",
-    "@selvajs/compute": "5.0.0-beta.8",
+    "@selvajs/compute": "5.0.0-beta.9",
+    "@selvajs/visualization": "1.6.0-beta.9",
+    "@selvajs/solve": "2.0.0-beta.12",
     "@selvajs/config": "0.0.4",
-    "@selvajs/schemas": "5.3.0-beta.1",
-    "@selvajs/visualization": "1.6.0-beta.7",
-    "@selvajs/solve": "2.0.0-beta.10"
+    "@selvajs/schemas": "5.3.0-beta.2"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/compute/AppLayout.svelte

@@ -347,7 +347,8 @@
 					{onViewerReady}
 					viewerConfig={{
 						...viewerConfig,
-						backgroundColor: schema?.viewerOptions?.backgroundColor,
+						backgroundColor: schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+						look: schema?.viewerOptions?.look ?? viewerConfig.look,
 						showSceneManager: false
 					}}
 				/>
@@ -490,7 +491,9 @@
 							{onViewerReady}
 							viewerConfig={{
 								...viewerConfig,
-								backgroundColor: schema?.viewerOptions?.backgroundColor
+								backgroundColor:
+									schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+								look: schema?.viewerOptions?.look ?? viewerConfig.look
 							}}
 						/>
 					</Resizable.Pane>

package/src/lib/components/preview/inputs/SegmentedInput.svelte

@@ -23,7 +23,7 @@
 
 <ToggleGroup.Root
 	type="single"
-	variant="outline"
+	variant="accent"
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

package/src/lib/components/preview/inputs/TileInput.svelte

@@ -45,6 +45,7 @@
 			bind:this={tiles[index]}
 			type="button"
 			role="radio"
+			title={option.name}
 			aria-checked={selected}
 			tabindex={index === focusIndex ? 0 : -1}
 			{disabled}
@@ -65,7 +66,7 @@
 					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
 				{/if}
 			</span>
-			<span class="px-0.5 text-xs leading-tight truncate" class:font-medium={selected}>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
 				{option.name}
 			</span>
 		</button>

package/src/lib/components/primitives/toggle/toggle.svelte

@@ -6,7 +6,10 @@
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent'
+				outline: 'border-input hover:bg-muted border bg-transparent',
+				// Filled accent for the active item; a bare bg-muted is too faint on a form.
+				accent:
+					'border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'
 			},
 			size: {
 				default:

package/src/lib/components/primitives/toggle-group/toggle-group-item.svelte

@@ -23,7 +23,7 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-t group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size

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

@@ -52,6 +52,8 @@
 		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
+		/** The look to open in. Default `technical`. */
+		look?: Look;
 		/** Initial state of the edge overlay and its display-menu checkmark. Default false. */
 		showEdges?: boolean;
 	}
@@ -91,6 +93,7 @@
 		showDisplayMenu: true,
 		enableMeshClick: true,
 		backgroundColor: '#E6E6E6',
+		look: 'technical',
 		showEdges: false
 	};
 
@@ -124,7 +127,8 @@
 	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 setLook: ThreeViewer['setLook'] | null = null;
+	let syncEmissiveLights: (() => void) | null = null;
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
@@ -145,9 +149,16 @@
 	let projection: CameraProjection = $state('perspective');
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
-	let renderStyle: Look = $state('technical');
+	// A saved schema can name a look this build doesn't have, and an unknown look throws on mount.
+	const openingLook = untrack(() => {
+		const look = viewerConfig.look;
+		return look && LOOKS.includes(look) ? look : defaultViewerConfig.look;
+	});
+	const opensAsLineDrawing = LOOK_PRESETS[openingLook].requiresEdges === true;
+	const configuredEdges = untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges;
+	let renderStyle: Look = $state(openingLook);
 	// Seeded once, then owned by the menu toggle.
-	let edgesVisible = $state(untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges);
+	let edgesVisible = $state(opensAsLineDrawing || configuredEdges);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -160,7 +171,8 @@
 		arctic: t.lookArctic,
 		xray: t.lookXray,
 		lineart: t.lookLineart,
-		wireframe: t.lookWireframe
+		wireframe: t.lookWireframe,
+		night: t.lookNight
 	});
 	const styleOptions = $derived<{ look: Look; label: string }[]>(
 		LOOKS.map((look) => ({
@@ -234,6 +246,7 @@
 		invalidate = init.invalidate;
 		captureImage = init.captureImage;
 		setLook = init.setLook;
+		syncEmissiveLights = init.syncEmissiveLights;
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
@@ -279,7 +292,7 @@
 
 	// 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;
+	let edgesBeforeLineDrawing: boolean | null = opensAsLineDrawing ? configuredEdges : null;
 
 	function setRenderStyle(look: Look) {
 		if (!setLook || look === renderStyle) return;
@@ -366,7 +379,8 @@
 			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);
+				// Emissive lights wait for `applyTo` below, or a hidden lamp would count as lit.
+				setLook?.(renderStyle, { deferEmissiveLights: true });
 				// updateScene discarded the previous solve's overlays along with its content.
 				if (edgesVisible) applyEdges?.(scene!, edgeOverrides());
 				// Rescale the grid so cells and fade match the new content's extent.
@@ -377,6 +391,7 @@
 				// 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();
+				syncEmissiveLights?.();
 				sceneVersion++;
 				// Repaint now rather than on the render loop's safety interval.
 				invalidate?.();
@@ -680,7 +695,7 @@
 				<SceneManager
 					{outliner}
 					{sceneVersion}
-					onVisibilityChange={() => invalidate?.()}
+					onVisibilityChange={() => syncEmissiveLights?.()}
 					onHover={(entry) => setHover?.(entry?.object ?? null, entry?.memberIndex ?? null)}
 				/>
 			</Resizable.Pane>

package/src/lib/i18n/messages.ts

@@ -40,6 +40,7 @@ export interface ViewerMessages {
 	lookTechnical: string;
 	lookStudio: string;
 	lookShowcase: string;
+	lookNight: string;
 	lookArctic: string;
 	lookXray: string;
 	lookLineart: string;
@@ -268,6 +269,7 @@ const en: ViewerMessages = {
 	lookTechnical: 'Technical',
 	lookStudio: 'Studio',
 	lookShowcase: 'Showcase',
+	lookNight: 'Night',
 	lookArctic: 'Arctic',
 	lookXray: 'X-Ray',
 	lookLineart: 'Line Art',
@@ -461,6 +463,7 @@ const de: ViewerMessages = {
 	lookTechnical: 'Technisch',
 	lookStudio: 'Studio',
 	lookShowcase: 'Präsentation',
+	lookNight: 'Nacht',
 	lookArctic: 'Arktis',
 	lookXray: 'Röntgen',
 	lookLineart: 'Strichzeichnung',