perf+fix: audit phase 0/1 — parallel textures, dead weight, two real bugs

Findings from a full frontend audit (static read + live instrumentation of
production). This covers the "bleeding" and performance phases.

Bug fixes:
- StatsPanel branch collapse/expand never re-rendered. Two Svelte 5 defects:
  $state(new Set()) is not proxied (proxy.js bails on non-object/array
  prototypes), so .add()/.delete() were untracked; and the Svelte 4
  `x = x` reactivity idiom is a no-op in runes mode, where sources use a
  strict `equals` comparator. Switched to SvelteSet and dropped the
  self-assignment. Verified: aria-expanded now flips and rows 28<->24.
- The closed stats panel's gold box-shadow (8px offset + 80px blur) bled
  ~88px past its right edge, painting a permanent olive stripe down the
  left of the viewport on every page view. Offset the closed transform
  past the shadow.
- data.ts shipped a placeholder repoUrl (github.com/yourusername/...), a
  live 404 on the node describing this very site. Also removed the
  "Tailwind CSS" techStack claim; it is not a dependency of this project.

Performance:
- nodes.ts awaited Assets.load() inside the node loop, serialising ~56 icon
  round-trips before the tree could render or accept input. Now one
  parallel batch. Measured: all 78 tree icon requests start at ~28ms and
  complete within ~618ms.
- isLoading was cleared right after app.init(), before a single texture
  existed, so the spinner resolved onto an empty screen. Moved to after
  the scene graph is built.
- Renderer left antialias on (costly, ~no benefit on soft glow circles)
  and resolution/autoDensity at defaults (blurry on HiDPI). Now
  antialias:false, resolution:min(dpr,2), autoDensity, high-performance.
- cacheAsTexture on the fully-static gradient (16 full-screen fills) and
  vignette (13); interactiveChildren:false on background containers.
- Dust ticker allocated a fresh closure per frame via forEach; replaced
  with a named function and an indexed loop.

Dead weight:
- static/{headshot,profile}.jpg.original (8.6MB, 83% of the static payload)
  were committed and deployed verbatim by adapter-static, publicly
  fetchable and referenced by nothing. Moved to a gitignored assets-src/
  so the full-res sources stay on disk without shipping.
- precompress:true so nginx gzip_static/brotli_static have siblings to
  serve (the origin currently sends everything uncompressed).

build/ 11.13MB -> 3.7MB. JS wire 727.6KB raw -> 232KB gzip / 202.7KB brotli.
svelte-check clean, 14/14 tests pass.

Note: the matching nginx change lives in the gitignored homelab/default.conf
and must be applied to the container separately.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lib/pixi/background.ts

@@ -209,18 +209,22 @@ export function createBackground(app: Application, isMobile: boolean): Backgroun
 		});
 	}
 
-	// Animate dust particles drifting
-	app.ticker.add(() => {
-		dustParticles.forEach((p) => {
-			p.graphics.x += p.vx;
-			p.graphics.y += p.vy;
+	// Animate dust particles drifting. Named function + indexed loop: `forEach`
+	// with an inline arrow allocated a fresh closure on every frame.
+	function driftDust() {
+		for (let i = 0; i < dustParticles.length; i++) {
+			const p = dustParticles[i];
+			const g = p.graphics;
+			g.x += p.vx;
+			g.y += p.vy;
 
-			if (p.graphics.x < -20) p.graphics.x = screenWidth + 20;
-			if (p.graphics.x > screenWidth + 20) p.graphics.x = -20;
-			if (p.graphics.y < -20) p.graphics.y = screenHeight + 20;
-			if (p.graphics.y > screenHeight + 20) p.graphics.y = -20;
-		});
-	});
+			if (g.x < -20) g.x = screenWidth + 20;
+			else if (g.x > screenWidth + 20) g.x = -20;
+			if (g.y < -20) g.y = screenHeight + 20;
+			else if (g.y > screenHeight + 20) g.y = -20;
+		}
+	}
+	app.ticker.add(driftDust);
 
 	// ========== VIGNETTE OVERLAY ==========
 	const vignette = new Graphics();
@@ -234,5 +238,16 @@ export function createBackground(app: Application, isMobile: boolean): Backgroun
 	}
 	app.stage.addChild(vignette);
 
+	// The gradient (16 fills) and vignette (13 fills) are near-full-screen and
+	// never change — bake them to a texture instead of recompositing every frame.
+	deepBackgroundContainer.cacheAsTexture(true);
+	vignette.cacheAsTexture(true);
+
+	// Nothing in the background is clickable; skip it during hit-testing.
+	deepBackgroundContainer.interactiveChildren = false;
+	nebulaContainer.interactiveChildren = false;
+	starContainer.interactiveChildren = false;
+	vignette.eventMode = 'none';
+
 	return { deepBackgroundContainer, nebulaContainer, starContainer };
 }

src/lib/pixi/nodes.ts

@@ -1,7 +1,7 @@
 // Tree node rendering: the origin profile node and regular icon nodes.
 // Nodes start non-interactive (eventMode 'none') until the entrance animation
 // enables them; see animation.ts.
-import { Graphics, Container, Assets, Sprite } from 'pixi.js';
+import { Graphics, Container, Assets, Sprite, type Texture } from 'pixi.js';
 import { gsap } from 'gsap';
 import { treeNodes, type TreeNode } from '$lib/data';
 import { categoryColors } from '$lib/theme';
@@ -51,7 +51,16 @@ export async function createNodes(treeContainer: Container, opts: NodeOpts): Pro
 	const { isMobile } = opts;
 	const nodeObjects: NodeObject[] = [];
 
-	const profileTexture = await Assets.load('/headshot.jpg');
+	// Load every texture in ONE parallel batch. Previously each icon was awaited
+	// inside the loop below, which serialised ~56 round-trips before the tree
+	// could render or accept input.
+	const iconUrls = [...new Set(treeNodes.map((n) => n.icon).filter((s): s is string => !!s))];
+
+	const [profileTexture, iconTextures] = await Promise.all([
+		Assets.load<Texture>('/headshot.jpg'),
+		// Array form resolves to a url -> Texture map and fetches concurrently.
+		iconUrls.length ? Assets.load<Texture>(iconUrls) : Promise.resolve({} as Record<string, Texture>)
+	]);
 
 	for (const node of treeNodes) {
 		const radius = getNodeRadius(node.size, isMobile);
@@ -107,21 +116,20 @@ export async function createNodes(treeContainer: Container, opts: NodeOpts): Pro
 			nodeGraphics.circle(0, 0, radius * 0.75).stroke({ width: 1, color, alpha: 0.2 });
 			nodeContainer.addChild(nodeGraphics);
 
-			if (node.icon) {
-				try {
-					const iconTexture = await Assets.load(node.icon);
-					const iconSprite = new Sprite(iconTexture);
+			const iconTexture = node.icon ? iconTextures[node.icon] : undefined;
+			if (node.icon && !iconTexture) {
+				console.warn(`Could not load icon for ${node.id}:`, node.icon);
+			}
+			if (iconTexture) {
+				const iconSprite = new Sprite(iconTexture);
 
-					const iconSize = radius * 1.4;
-					const scale = iconSize / Math.max(iconTexture.width, iconTexture.height);
-					iconSprite.scale.set(scale);
-					iconSprite.anchor.set(0.5);
-					iconSprite.tint = color;
+				const iconSize = radius * 1.4;
+				const scale = iconSize / Math.max(iconTexture.width, iconTexture.height);
+				iconSprite.scale.set(scale);
+				iconSprite.anchor.set(0.5);
+				iconSprite.tint = color;
 
-					nodeContainer.addChild(iconSprite);
-				} catch {
-					console.warn(`Could not load icon for ${node.id}:`, node.icon);
-				}
+				nodeContainer.addChild(iconSprite);
 			}
 
 			nodeContainer.alpha = 0;