@bergetai/ui 0.14.1 → 0.15.0

package/dist/components/neural-flow/NeuralFlow.mjs

@@ -0,0 +1,1032 @@
+"use client";
+import { MNIST_SAMPLES } from "./mnist-samples.mjs";
+import { SPARSE_WEIGHTS } from "./sparse-weights.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/neural-flow/NeuralFlow.tsx
+/**
+* NeuralFlow — AI inference, rendered live.
+*
+* An MLP in the shape of a classic MNIST classifier (784-256-128-64-10)
+* floats in the Berget green, layer plane after plane receding into the
+* depth. Tokens — signal packets — travel edge to edge through the net;
+* every hop a weight attenuates them (they fade) or amplifies them
+* (they swell bright), until a sample rolls the whole way through and
+* the predicted output node blooms white-green. A CPU sim drives the
+* state (1.2k nodes, ~1.8k live tokens is trivial arithmetic per
+* frame); three.js only paints points, lines and a fog plane — which
+* keeps this Safari-safe with zero float-FBO involvement.
+*
+* Props: every visual knob is a plain number prop read each frame —
+* exposure, focus/blurK depth-of-field, sim speed (a true timeline:
+* 0 pauses pixel-for-pixel, 0.2 is dream's pace), token intensity and
+* camera drift. Reduced motion paints one deterministic still.
+*/
+const LAYER_SIZES = [
+	784,
+	256,
+	128,
+	64,
+	10
+];
+const LAYER_GRID = [
+	[28, 28],
+	[16, 16],
+	[16, 8],
+	[8, 8],
+	[10, 1]
+];
+const LAYER_X = 1.35;
+const CELL = .05;
+const TOKEN_POOL = 1800;
+const SAMPLE_INTERVAL = 6.5;
+const SAMPLE_WINDOW = 2.6;
+const SAMPLE_RATE = 420;
+const TRICKLE_RATE = 40;
+const CLASSES = 10;
+/** Classic 5x7 numerals — the actual "images" the net sees per class. */
+const DIGITS = [
+	[
+		".###.",
+		"#...#",
+		"#..##",
+		"#.#.#",
+		"##..#",
+		"#...#",
+		".###."
+	],
+	[
+		"..#..",
+		".##..",
+		"..#..",
+		"..#..",
+		"..#..",
+		"..#..",
+		"#####"
+	],
+	[
+		".###.",
+		"#...#",
+		"....#",
+		"...#.",
+		"..#..",
+		".#...",
+		"#####"
+	],
+	[
+		"#####",
+		"...#.",
+		"..#..",
+		"...#.",
+		"....#",
+		"#...#",
+		".###."
+	],
+	[
+		"...#.",
+		"..##.",
+		".#.#.",
+		"#..#.",
+		"#####",
+		"...#.",
+		"...#."
+	],
+	[
+		"#####",
+		"#....",
+		"####.",
+		"....#",
+		"....#",
+		"#...#",
+		".###."
+	],
+	[
+		"..##.",
+		".#...",
+		"#....",
+		"####.",
+		"#...#",
+		"#...#",
+		".###."
+	],
+	[
+		"#####",
+		"....#",
+		"...#.",
+		"..#..",
+		".#...",
+		".#...",
+		".#..."
+	],
+	[
+		".###.",
+		"#...#",
+		"#...#",
+		".###.",
+		"#...#",
+		"#...#",
+		".###."
+	],
+	[
+		".###.",
+		"#...#",
+		"#...#",
+		".####",
+		"....#",
+		"...#.",
+		".##.."
+	]
+];
+const PALETTE = {
+	deep: [
+		.027,
+		.235,
+		.2
+	],
+	mid: [
+		.051,
+		.42,
+		.322
+	],
+	crest: [
+		.137,
+		.627,
+		.36
+	],
+	slate: [
+		.12,
+		.17,
+		.19
+	],
+	white: [
+		.85,
+		1,
+		.9
+	]
+};
+/** The dark well behind the fog plane, in brand tokens — the gradient
+the raw canvas painted under itself. Requires the package's
+styles (dist/styles/index.css), like every themed component here. */
+const BACKDROP = "radial-gradient(120% 95% at 28% 58%, var(--berget-brand-moss-900) 0%, var(--berget-brand-moss-950) 55%, var(--berget-brand-granite-950) 100%)";
+function mulberry32(seed) {
+	let a = seed >>> 0;
+	return () => {
+		a |= 0;
+		a = a + 1831565813 | 0;
+		let t = Math.imul(a ^ a >>> 15, 1 | a);
+		t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function buildNetwork(seed, orientation) {
+	const rng = mulberry32(seed);
+	const nodeCount = LAYER_SIZES.reduce((a, b) => a + b, 0);
+	const positions = new Float32Array(nodeCount * 3);
+	const layerStart = [];
+	let flat = 0;
+	LAYER_SIZES.forEach((size, li) => {
+		layerStart.push(flat);
+		const [rows, cols] = LAYER_GRID[li];
+		for (let i = 0; i < size; i++) {
+			const r = Math.floor(i / cols);
+			const c = i % cols;
+			const o = flat * 3;
+			if (orientation === "vertical") {
+				positions[o] = (c - (cols - 1) / 2) * CELL;
+				positions[o + 1] = li * LAYER_X;
+				positions[o + 2] = (r - (rows - 1) / 2) * CELL;
+			} else {
+				positions[o] = li * LAYER_X;
+				positions[o + 1] = (r - (rows - 1) / 2) * CELL;
+				positions[o + 2] = (c - (cols - 1) / 2) * CELL;
+			}
+			flat++;
+		}
+	});
+	const fanIn = [
+		0,
+		9,
+		10,
+		10,
+		7
+	];
+	const inEdges = [];
+	for (let i = 0; i < nodeCount; i++) inEdges.push([]);
+	for (let li = 1; li < LAYER_SIZES.length; li++) {
+		const srcBase = layerStart[li - 1];
+		const dstBase = layerStart[li];
+		for (let d = 0; d < LAYER_SIZES[li]; d++) {
+			const k = fanIn[li];
+			for (let e = 0; e < k; e++) {
+				const src = srcBase + Math.floor(rng() * LAYER_SIZES[li - 1]);
+				const w = rng() < .85 ? .75 + .9 * rng() : -(.35 + .35 * rng());
+				inEdges[dstBase + d].push({
+					src,
+					w
+				});
+			}
+		}
+	}
+	const out = [];
+	for (let i = 0; i < nodeCount; i++) out.push({
+		dst: [],
+		w: []
+	});
+	let edgeCount = 0;
+	for (let d = 0; d < nodeCount; d++) edgeCount += inEdges[d].length;
+	const edgePositions = new Float32Array(edgeCount * 2 * 3);
+	const edgeWeights = new Float32Array(edgeCount * 2);
+	let eo = 0;
+	for (let d = 0; d < nodeCount; d++) for (const e of inEdges[d]) {
+		out[e.src].dst.push(d);
+		out[e.src].w.push(e.w);
+		edgePositions[eo * 6] = positions[e.src * 3];
+		edgePositions[eo * 6 + 1] = positions[e.src * 3 + 1];
+		edgePositions[eo * 6 + 2] = positions[e.src * 3 + 2];
+		edgePositions[eo * 6 + 3] = positions[d * 3];
+		edgePositions[eo * 6 + 4] = positions[d * 3 + 1];
+		edgePositions[eo * 6 + 5] = positions[d * 3 + 2];
+		const a = Math.min(1, Math.abs(e.w) * 1.6);
+		edgeWeights[eo * 2] = a;
+		edgeWeights[eo * 2 + 1] = a;
+		eo++;
+	}
+	return {
+		positions,
+		nodeCount,
+		layerStart,
+		out,
+		inEdges,
+		edgePositions,
+		edgeWeights,
+		edgeCount
+	};
+}
+var FlowSim = class {
+	constructor(seed = 1337, orientation = "horizontal", blobs = glyphBlobs(), images = [], trained = decodeWeights()) {
+		this.predictedClass = 0;
+		this.rng = mulberry32(12648430);
+		this.tokens = [];
+		this.time = 0;
+		this.nextSample = .8;
+		this.sampleUntil = -10;
+		this.sampleClass = 0;
+		this.sampleVariant = 0;
+		this.emitAcc = 0;
+		this.net = buildNetwork(seed, orientation);
+		attachWeights(this.net, trained);
+		this.blobs = blobs;
+		this.images = images;
+		this.trained = trained;
+		this.energy = new Float32Array(this.net.nodeCount);
+		this.act = new Float32Array(this.net.nodeCount);
+		this.nodeAttr = new Float32Array(this.net.nodeCount);
+		this.tokenPos = new Float32Array(TOKEN_POOL * 3);
+		this.tokenGain = new Float32Array(TOKEN_POOL);
+		for (let i = 0; i < TOKEN_POOL; i++) this.tokens.push(null);
+	}
+	get network() {
+		return this.net;
+	}
+	/** Advance the whole inference world by dt seconds (clamped internally). */
+	step(dt, intensity) {
+		dt = Math.min(dt, .12);
+		this.time += dt;
+		const decay = Math.pow(.42, dt);
+		const inDecay = Math.pow(.6, dt);
+		const outDecay = Math.pow(.3, dt);
+		const inEnd = this.net.layerStart[1];
+		const outStart = this.net.layerStart[LAYER_SIZES.length - 1];
+		for (let i = 0; i < this.act.length; i++) this.act[i] = this.act[i] * (i >= outStart ? outDecay : i < inEnd ? inDecay : decay);
+		if (this.time >= this.nextSample) {
+			this.sampleClass = Math.floor(this.rng() * CLASSES);
+			const variants = this.blobs[this.sampleClass];
+			this.sampleVariant = Math.floor(this.rng() * variants.length);
+			this.sampleUntil = this.time + SAMPLE_WINDOW;
+			this.nextSample = this.time + SAMPLE_INTERVAL;
+			const { predicted, energy } = forwardPass(this.net, this.trained, this.imageOf(this.sampleClass, this.sampleVariant));
+			this.predictedClass = predicted;
+			this.energy = energy;
+		}
+		const fade = Math.pow(.55, dt);
+		if (this.time > this.sampleUntil) for (let i = 0; i < this.energy.length; i++) this.energy[i] = this.energy[i] * fade;
+		const inSample = this.time < this.sampleUntil;
+		const rate = (inSample ? SAMPLE_RATE : TRICKLE_RATE) * intensity;
+		this.emitAcc += rate * dt;
+		while (this.emitAcc >= 1) {
+			this.emitAcc -= 1;
+			this.inject(inSample);
+		}
+		for (let i = 0; i < TOKEN_POOL; i++) {
+			const tok = this.tokens[i];
+			if (!tok) continue;
+			tok.t += tok.rate * dt;
+			const p = this.net.positions;
+			const s3 = tok.src * 3;
+			const d3 = tok.dst * 3;
+			const t = Math.min(tok.t, 1);
+			tok.pos = [
+				p[s3] + (p[d3] - p[s3]) * t,
+				p[s3 + 1] + (p[d3 + 1] - p[s3 + 1]) * t,
+				p[s3 + 2] + (p[d3 + 2] - p[s3 + 2]) * t
+			];
+			if (tok.t < 1) continue;
+			const isFinal = tok.layer === LAYER_SIZES.length - 2;
+			let pulse = tok.gain * .55;
+			if (isFinal) {
+				if (tok.dst - this.net.layerStart[LAYER_SIZES.length - 1] === this.predictedClass) pulse *= 3.8;
+			}
+			this.act[tok.dst] = Math.min(2, Math.max(-2, this.act[tok.dst] + pulse));
+			const energyHere = this.energy[tok.dst];
+			if (inSample && !isFinal && energyHere < .1 && this.rng() < .7) {
+				this.tokens[i] = null;
+				continue;
+			}
+			const gain = Math.min(.25 + 1.6 * energyHere, 2.4);
+			if (isFinal) {
+				this.tokens[i] = null;
+				continue;
+			}
+			const outs = this.net.out[tok.dst];
+			if (outs.dst.length === 0) {
+				this.tokens[i] = null;
+				continue;
+			}
+			const pick = Math.floor(this.rng() * outs.dst.length);
+			tok.src = tok.dst;
+			tok.dst = outs.dst[pick];
+			tok.w = outs.w[pick];
+			tok.layer += 1;
+			tok.t = 0;
+			const len = edgeLen(this.net.positions, tok.src, tok.dst);
+			tok.rate = 1.35 / Math.max(len, .05) * (.75 + this.rng() * .5);
+			tok.gain = gain;
+		}
+		for (let i = 0; i < this.act.length; i++) this.nodeAttr[i] = this.act[i];
+	}
+	/** The 784-vector for a class variant: real image if we have one,
+	otherwise intensities derived from the blob shape. */
+	imageOf(cls, variant) {
+		const list = this.images[cls];
+		if (list && list.length > 0) return list[Math.min(variant, list.length - 1)];
+		const img = /* @__PURE__ */ new Float32Array(784);
+		const blob = this.blobs[cls][Math.min(variant, this.blobs[cls].length - 1)];
+		for (const c of blob) img[c.i] = Math.min(1, c.w + .25);
+		return img;
+	}
+	inject(fromBlob) {
+		const slot = this.tokens.indexOf(null);
+		if (slot < 0) return;
+		const rng = this.rng;
+		let src;
+		if (fromBlob) {
+			const variants = this.blobs[this.sampleClass];
+			const blob = variants[Math.min(this.sampleVariant, variants.length - 1)];
+			src = pickWeightedBlob(blob, rng());
+		} else src = Math.floor(rng() * LAYER_SIZES[0]);
+		const outs = this.net.out[src];
+		if (outs.dst.length === 0) return;
+		const pick = Math.floor(rng() * outs.dst.length);
+		const len = edgeLen(this.net.positions, src, outs.dst[pick]);
+		this.tokens[slot] = {
+			src,
+			dst: outs.dst[pick],
+			w: outs.w[pick],
+			layer: 0,
+			t: 0,
+			rate: 1.35 / Math.max(len, .05) * (.75 + rng() * .5),
+			gain: fromBlob ? 1 : .6,
+			pos: [
+				0,
+				0,
+				0
+			]
+		};
+		this.act[src] = Math.min(2, this.act[src] + (fromBlob ? .9 : .12));
+	}
+	/** Write live token rows into the point buffers (dead rows stay 0). */
+	writeTokenBuffers() {
+		for (let i = 0; i < TOKEN_POOL; i++) {
+			const tok = this.tokens[i];
+			const o = i * 3;
+			if (!tok) {
+				this.tokenGain[i] = 0;
+				this.tokenPos[o] = 0;
+				this.tokenPos[o + 1] = 0;
+				this.tokenPos[o + 2] = 0;
+				continue;
+			}
+			this.tokenPos[o] = tok.pos[0];
+			this.tokenPos[o + 1] = tok.pos[1];
+			this.tokenPos[o + 2] = tok.pos[2];
+			this.tokenGain[i] = tok.gain;
+		}
+	}
+};
+/** Procedural 5x7-glyph digits — fallback when no samples are given. */
+function glyphBlobs() {
+	const rng = mulberry32(857623);
+	const all = [];
+	for (let cls = 0; cls < CLASSES; cls++) {
+		const field = /* @__PURE__ */ new Float32Array(784);
+		const glyph = DIGITS[cls];
+		const dx = 4 + Math.floor(rng() * 3);
+		const dy = Math.floor(rng() * 3) - 1;
+		for (let gr = 0; gr < 7; gr++) {
+			const row = glyph[gr];
+			for (let gc = 0; gc < 5; gc++) {
+				if (row[gc] !== "#") continue;
+				for (let k = 0; k < 4; k++) for (let l = 0; l < 4; l++) {
+					const r = gr * 4 + l + dy;
+					const c = gc * 4 + k + dx;
+					if (r < 28 && c < 28) field[r * 28 + c] = 1;
+				}
+			}
+		}
+		const blob = [];
+		for (let i = 0; i < 784; i++) if (field[i] > 0) blob.push({
+			i,
+			w: 1
+		});
+		for (let k = 0; k < 8; k++) blob.push({
+			i: Math.floor(rng() * 784),
+			w: .15
+		});
+		all.push([blob]);
+	}
+	return all;
+}
+/** Decode base64url into raw bytes — shared by weights and samples. */
+function decodeB64(b64) {
+	const bin = atob(b64.replace(/-/g, "+").replace(/_/g, "/"));
+	const buf = new Uint8Array(bin.length);
+	for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+	return buf;
+}
+/** Decode packed FP32 little-endian base64url into a Float32Array. */
+function decodeF32(b64) {
+	return new Float32Array(decodeB64(b64).buffer);
+}
+/** The trained sparse weight set (see train-sparse.py). */
+function decodeWeights() {
+	return {
+		w: [
+			decodeF32(SPARSE_WEIGHTS.weights1),
+			decodeF32(SPARSE_WEIGHTS.weights2),
+			decodeF32(SPARSE_WEIGHTS.weights3),
+			decodeF32(SPARSE_WEIGHTS.weights4)
+		],
+		b: [
+			decodeF32(SPARSE_WEIGHTS.biases1),
+			decodeF32(SPARSE_WEIGHTS.biases2),
+			decodeF32(SPARSE_WEIGHTS.biases3),
+			decodeF32(SPARSE_WEIGHTS.biases4)
+		]
+	};
+}
+/**
+* Splice trained weights into the visible net: every rendered edge
+* gets its trained value, the edge-alpha map follows |w|, and `out`
+* is rebuilt with the trained magnitudes for the hop visuals.
+*/
+function attachWeights(net, trained) {
+	const layerStart = net.layerStart;
+	for (let li = 1; li < 5; li++) {
+		const base = layerStart[li];
+		const w = trained.w[li - 1];
+		let eo = 0;
+		const nextBase = li < 4 ? layerStart[li + 1] : net.nodeCount;
+		for (let dlocal = 0; dlocal < nextBase - base; dlocal++) {
+			const dst = base + dlocal;
+			const list = net.inEdges[dst];
+			for (const e of list) {
+				e.w = w[eo];
+				eo++;
+			}
+		}
+		if (eo !== w.length) throw new Error(`layer ${li}: expected ${w.length} edges, got ${eo}`);
+	}
+	for (const o of net.out) {
+		o.dst.length = 0;
+		o.w.length = 0;
+	}
+	let eo = 0;
+	for (let d = 0; d < net.nodeCount; d++) for (const e of net.inEdges[d]) {
+		net.out[e.src].dst.push(d);
+		net.out[e.src].w.push(e.w);
+		net.edgeWeights[eo * 2] = Math.min(1, Math.abs(e.w) * 1.7);
+		net.edgeWeights[eo * 2 + 1] = Math.min(1, Math.abs(e.w) * 1.7);
+		eo++;
+	}
+}
+/** Real forward pass through the visible, trained edges. */
+function forwardPass(net, trained, img) {
+	const act = new Float32Array(net.nodeCount);
+	act.set(img);
+	const layerStart = net.layerStart;
+	for (let li = 1; li < 5; li++) {
+		const base = layerStart[li];
+		const size = LAYER_SIZES[li];
+		const bias = trained.b[li - 1];
+		for (let dl = 0; dl < size; dl++) {
+			let z = bias[dl];
+			for (const e of net.inEdges[base + dl]) z += act[e.src] * e.w;
+			act[base + dl] = li < 4 ? Math.max(z, 0) : z;
+		}
+	}
+	const energy = new Float32Array(act.length);
+	for (let li = 0; li < 5; li++) {
+		const base = layerStart[li];
+		const size = LAYER_SIZES[li];
+		let max = 1e-4;
+		for (let i = base; i < base + size; i++) max = Math.max(max, act[i]);
+		for (let i = base; i < base + size; i++) energy[i] = Math.max(act[i], 0) / max;
+	}
+	const outBase = layerStart[4];
+	let predicted = 0;
+	let top = -1e9;
+	for (let c = 0; c < CLASSES; c++) if (act[outBase + c] > top) {
+		top = act[outBase + c];
+		predicted = c;
+	}
+	return {
+		predicted,
+		energy
+	};
+}
+function decodeAll(samples) {
+	const blobs = [];
+	const images = [];
+	for (let c = 0; c < CLASSES; c++) {
+		const cellList = [];
+		const imgList = [];
+		for (const b64 of samples[c] ?? []) {
+			const buf = decodeB64(b64);
+			const cells = [];
+			const img = /* @__PURE__ */ new Float32Array(784);
+			for (let n = 0; n < 784; n++) {
+				const byte = buf[n >> 1];
+				const v = n & 1 ? byte & 15 : byte >> 4;
+				if (v >= 5) cells.push({
+					i: n,
+					w: (v - 4) / 11
+				});
+				img[n] = v / 15;
+			}
+			cellList.push(cells);
+			imgList.push(img);
+		}
+		blobs.push(cellList);
+		images.push(imgList);
+	}
+	return {
+		blobs,
+		images
+	};
+}
+function pickWeightedBlob(blob, r) {
+	let total = 0;
+	for (const c of blob) total += c.w;
+	let acc = r * total;
+	for (const c of blob) {
+		acc -= c.w;
+		if (acc <= 0) return c.i;
+	}
+	return blob[blob.length - 1].i;
+}
+function edgeLen(p, a, b) {
+	const a3 = a * 3;
+	const b3 = b * 3;
+	const dx = p[b3] - p[a3];
+	const dy = p[b3 + 1] - p[a3 + 1];
+	const dz = p[b3 + 2] - p[a3 + 2];
+	return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+const POINT_VERT = `
+attribute float aAct; // node activation, or token gain for tokens
+uniform float uHeightPx, uFovTan, uDpr, uFocusDist, uBlurK;
+uniform float uBaseSize;
+varying float vAct;
+varying float vFade;
+void main() {
+  vec4 mv = modelViewMatrix * vec4(position, 1.0);
+  float dist = max(-mv.z, 0.001);
+  vAct = aAct;
+  float a = max(aAct, 0.0);
+  float worldSize = uBaseSize * (1.0 + clamp(a, 0.0, 2.0) * 0.9);
+  // uHeightPx is the drawing-buffer height (already device px), so the
+  // world-size term needs no uDpr; the pixel-space defocus offset does.
+  float px = worldSize * (uHeightPx * 0.5) / (uFovTan * dist);
+  float dz = dist - uFocusDist;
+  px += (dz < 0.0 ? -dz * 0.55 : dz * 0.8) * uBlurK * uDpr;
+  gl_PointSize = min(px, 90.0 * uDpr);
+  vFade = clamp(1.0 - abs(dz) * 0.16, 0.25, 1.0);
+  gl_Position = projectionMatrix * mv;
+}
+`;
+const NODE_FRAG = `
+uniform float uExposure;
+varying float vAct;
+varying float vFade;
+const vec3 DEEP = vec3(${PALETTE.deep.join(",")});
+const vec3 MID = vec3(${PALETTE.mid.join(",")});
+const vec3 CREST = vec3(${PALETTE.crest.join(",")});
+const vec3 SLATE = vec3(${PALETTE.slate.join(",")});
+const vec3 WHITE = vec3(${PALETTE.white.join(",")});
+void main() {
+  float d = length(gl_PointCoord - 0.5) * 2.0;
+  float disc = smoothstep(1.0, 0.35, d);
+  if (disc < 0.01) discard;
+  float a = vAct;
+  vec3 col;
+  float glow;
+  if (a >= 0.0) {
+    col = mix(MID, CREST, clamp(a, 0.0, 1.0));
+    // Overdriven nodes bloom toward the brand's crystal white-green.
+    float bloom = smoothstep(1.05, 1.9, a);
+    col = mix(col, WHITE, bloom);
+    glow = 0.36 + 0.64 * clamp(a, 0.0, 1.0) + bloom * 0.9;
+  } else {
+    col = mix(DEEP, SLATE, clamp(-a, 0.0, 1.0));
+    glow = 0.16 + 0.25 * clamp(-a, 0.0, 1.0);
+  }
+  gl_FragColor = vec4(col * uExposure, disc * 0.62 * glow * vFade);
+}
+`;
+const TOKEN_FRAG = `
+uniform float uExposure;
+varying float vAct;
+varying float vFade;
+const vec3 CREST = vec3(${PALETTE.crest.join(",")});
+const vec3 WHITE = vec3(${PALETTE.white.join(",")});
+void main() {
+  float g = vAct;
+  if (g < 0.004) discard;
+  float d = length(gl_PointCoord - 0.5) * 2.0;
+  float core = smoothstep(0.55, 0.05, d);
+  float halo = smoothstep(1.0, 0.3, d) * 0.45;
+  if (core + halo < 0.01) discard;
+  // Amplified tokens run hot toward white-green.
+  vec3 col = mix(CREST, WHITE, smoothstep(1.1, 2.1, g));
+  float b = (0.35 + 0.65 * clamp(g, 0.0, 1.6)) * (core + halo);
+  gl_FragColor = vec4(col * uExposure, b * 0.78 * vFade);
+}
+`;
+const EDGE_VERT = `
+attribute float aEdgeW;
+varying float vW;
+void main() {
+  vW = aEdgeW;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+const EDGE_FRAG = `
+varying float vW;
+const vec3 DEEP = vec3(${PALETTE.crest.join(",")});
+void main() {
+  gl_FragColor = vec4(DEEP, 0.02 + 0.05 * vW);
+}
+`;
+const FOG_VERT = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+const FOG_FRAG = `
+uniform float uTime;
+varying vec2 vUv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1, 0)), f.x),
+    mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x),
+    f.y
+  );
+}
+
+void main() {
+  vec2 c = vUv - 0.5;
+  float r = length(c) * 2.0;
+  // Soft brand-green well behind the stack, vignetted to darkness.
+  vec3 col = vec3(0.012, 0.05, 0.04) * max(1.0 - r, 0.0);
+  col += vec3(0.01, 0.06, 0.045) * max(1.5 - r * 1.25, 0.0);
+  // Slow drifting wisps crossing in front of the black.
+  float w = noise(vec2(vUv.x * 3.0 - uTime * 0.02, vUv.y * 6.0 + uTime * 0.013));
+  w = pow(w, 3.0) * 0.5;
+  col += vec3(0.05, 0.11, 0.09) * w * (1.0 - smoothstep(0.6, 1.2, r));
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+const DEFAULT_KNOBS = {
+	zoom: 1,
+	exposure: 1.45,
+	focus: 8,
+	blurK: 4,
+	speed: 1,
+	intensity: 1,
+	drift: 1,
+	spin: .02
+};
+const BASE_FOV = 36;
+function camFor(orientation) {
+	return orientation === "vertical" ? {
+		base: new THREE.Vector3(.7, 3.5, 9.6),
+		target: new THREE.Vector3(0, 2.45, 0),
+		center: new THREE.Vector3(0, 2.7, 0),
+		fogSize: [13, 15],
+		fogPos: new THREE.Vector3(1.5, 2.7, -6.5),
+		fogRot: 0
+	} : {
+		base: new THREE.Vector3(-.9, .88, 6.1),
+		target: new THREE.Vector3(2.35, -.08, -.2),
+		center: new THREE.Vector3(2.7, 0, 0),
+		fogSize: [14, 8],
+		fogPos: new THREE.Vector3(7.2, 0, 0),
+		fogRot: -Math.PI / 2
+	};
+}
+function SceneContent({ knobs: knobsRef, orientation, blobs, images }) {
+	const { invalidate } = useThree();
+	const trained = useMemo(() => decodeWeights(), []);
+	const sim = useMemo(() => new FlowSim(1337, orientation, blobs, images, trained), [
+		orientation,
+		blobs,
+		images,
+		trained
+	]);
+	const camCfg = useMemo(() => camFor(orientation), [orientation]);
+	const fogPlane = useMemo(() => new THREE.PlaneGeometry(camCfg.fogSize[0], camCfg.fogSize[1]), [camCfg]);
+	const geos = useMemo(() => {
+		const net = sim.network;
+		const nodes = new THREE.BufferGeometry();
+		nodes.setAttribute("position", new THREE.BufferAttribute(net.positions, 3));
+		const actAttr = new THREE.BufferAttribute(sim.nodeAttr, 1);
+		actAttr.setUsage(THREE.DynamicDrawUsage);
+		nodes.setAttribute("aAct", actAttr);
+		const tokens = new THREE.BufferGeometry();
+		const posAttr = new THREE.BufferAttribute(sim.tokenPos, 3);
+		posAttr.setUsage(THREE.DynamicDrawUsage);
+		tokens.setAttribute("position", posAttr);
+		const gainAttr = new THREE.BufferAttribute(sim.tokenGain, 1);
+		gainAttr.setUsage(THREE.DynamicDrawUsage);
+		tokens.setAttribute("aAct", gainAttr);
+		const b = 6;
+		nodes.boundingSphere = new THREE.Sphere(camCfg.center.clone(), b);
+		tokens.boundingSphere = new THREE.Sphere(camCfg.center.clone(), b);
+		const edges = new THREE.BufferGeometry();
+		edges.setAttribute("position", new THREE.BufferAttribute(net.edgePositions, 3));
+		edges.setAttribute("aEdgeW", new THREE.BufferAttribute(net.edgeWeights, 1));
+		edges.boundingSphere = new THREE.Sphere(camCfg.center.clone(), b);
+		return [
+			nodes,
+			tokens,
+			edges
+		];
+	}, [sim, camCfg]);
+	const nodeMat = useMemo(() => makePointMaterial(), []);
+	const tokenMat = useMemo(() => makeTokenMaterial(), []);
+	const edgeMat = useMemo(() => new THREE.ShaderMaterial({
+		vertexShader: EDGE_VERT,
+		fragmentShader: EDGE_FRAG,
+		transparent: true,
+		depthWrite: false,
+		blending: THREE.AdditiveBlending,
+		uniforms: {}
+	}), []);
+	const fogMat = useMemo(() => new THREE.ShaderMaterial({
+		vertexShader: FOG_VERT,
+		fragmentShader: FOG_FRAG,
+		depthWrite: false,
+		blending: THREE.NoBlending,
+		uniforms: { uTime: { value: 0 } }
+	}), []);
+	useEffect(() => () => {
+		for (const g of geos) g.dispose();
+		fogPlane.dispose();
+		nodeMat.dispose();
+		tokenMat.dispose();
+		edgeMat.dispose();
+		fogMat.dispose();
+	}, [
+		geos,
+		fogPlane,
+		nodeMat,
+		tokenMat,
+		edgeMat,
+		fogMat
+	]);
+	const worldTimeRef = useRef(0);
+	const lastElapsedRef = useRef(0);
+	const warmedSimRef = useRef(null);
+	const spinRef = useRef(null);
+	useFrame((state) => {
+		const speed = reduced() ? 0 : knobsRef.current.speed;
+		const dt = Math.min(state.clock.elapsedTime - lastElapsedRef.current, .25);
+		lastElapsedRef.current = state.clock.elapsedTime;
+		worldTimeRef.current += dt * Math.max(speed, 0);
+		const t = reduced() ? 8 : worldTimeRef.current;
+		const justWarmed = warmedSimRef.current !== sim;
+		if (justWarmed) {
+			for (let i = 0; i < 120; i++) sim.step(1 / 30, 1);
+			warmedSimRef.current = sim;
+		} else if (!reduced()) sim.step(dt * Math.max(speed, 0), knobsRef.current.intensity);
+		sim.writeTokenBuffers();
+		for (const [geo, attr] of [
+			[geos[0], "aAct"],
+			[geos[1], "position"],
+			[geos[1], "aAct"]
+		]) {
+			const a = geo.getAttribute(attr);
+			a.needsUpdate = true;
+		}
+		const cam = state.camera;
+		const fov = BASE_FOV / Math.max(knobsRef.current.zoom, .05);
+		if (Math.abs(cam.fov - fov) > .01) {
+			cam.fov = fov;
+			cam.updateProjectionMatrix();
+		}
+		const drift = knobsRef.current.drift;
+		cam.position.set(camCfg.base.x + Math.sin(t * .11) * .16 * drift, camCfg.base.y + Math.sin(t * .073 + 2) * .09 * drift, camCfg.base.z + Math.cos(t * .091) * .16 * drift);
+		cam.lookAt(camCfg.target);
+		const height = state.gl.domElement.height;
+		const fovTan = Math.tan(THREE.MathUtils.degToRad(cam.fov * .5));
+		for (const m of [nodeMat, tokenMat]) {
+			m.uniforms.uHeightPx.value = height;
+			m.uniforms.uFovTan.value = fovTan;
+			m.uniforms.uDpr.value = state.gl.getPixelRatio();
+			m.uniforms.uFocusDist.value = knobsRef.current.focus;
+			m.uniforms.uBlurK.value = knobsRef.current.blurK;
+			m.uniforms.uExposure.value = knobsRef.current.exposure;
+		}
+		if (spinRef.current) spinRef.current.rotation.y = t * knobsRef.current.spin;
+		fogMat.uniforms.uTime.value = t;
+		if (!reduced() || justWarmed) invalidate();
+	});
+	return /* @__PURE__ */ jsxs("group", { children: [/* @__PURE__ */ jsx("mesh", {
+		geometry: fogPlane,
+		material: fogMat,
+		position: camCfg.fogPos.toArray(),
+		rotation: [
+			0,
+			camCfg.fogRot,
+			0
+		],
+		renderOrder: 0
+	}, orientation), /* @__PURE__ */ jsx("group", {
+		ref: spinRef,
+		position: camCfg.center.toArray(),
+		children: /* @__PURE__ */ jsxs("group", {
+			position: camCfg.center.clone().negate().toArray(),
+			children: [
+				/* @__PURE__ */ jsx("lineSegments", {
+					geometry: geos[2],
+					material: edgeMat,
+					renderOrder: 1
+				}),
+				/* @__PURE__ */ jsx("points", {
+					geometry: geos[0],
+					material: nodeMat,
+					renderOrder: 2
+				}),
+				/* @__PURE__ */ jsx("points", {
+					geometry: geos[1],
+					material: tokenMat,
+					renderOrder: 3
+				})
+			]
+		})
+	})] });
+}
+function makePointMaterial() {
+	return new THREE.ShaderMaterial({
+		vertexShader: POINT_VERT,
+		fragmentShader: NODE_FRAG,
+		transparent: true,
+		depthWrite: false,
+		blending: THREE.AdditiveBlending,
+		uniforms: {
+			uHeightPx: { value: 600 },
+			uFovTan: { value: .3 },
+			uDpr: { value: 1 },
+			uFocusDist: { value: 8 },
+			uBlurK: { value: 4 },
+			uBaseSize: { value: .025 },
+			uExposure: { value: 1.45 }
+		}
+	});
+}
+function makeTokenMaterial() {
+	return new THREE.ShaderMaterial({
+		vertexShader: POINT_VERT,
+		fragmentShader: TOKEN_FRAG,
+		transparent: true,
+		depthWrite: false,
+		blending: THREE.AdditiveBlending,
+		uniforms: {
+			uHeightPx: { value: 600 },
+			uFovTan: { value: .3 },
+			uDpr: { value: 1 },
+			uFocusDist: { value: 8 },
+			uBlurK: { value: 4 },
+			uBaseSize: { value: .011 },
+			uExposure: { value: 1.35 }
+		}
+	});
+}
+function reduced() {
+	return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const NeuralFlow = ({ className, style, orientation = "horizontal", inputSamples, zoom, exposure, focus, blurK, speed, intensity, drift, spin }) => {
+	const noAtob = typeof atob === "undefined";
+	const { blobs, images } = useMemo(() => {
+		const src = inputSamples === void 0 ? MNIST_SAMPLES : inputSamples;
+		if (noAtob || Object.keys(src).length === 0) return {
+			blobs: glyphBlobs(),
+			images: []
+		};
+		const decoded = decodeAll(src);
+		return decoded.blobs.every((v) => v.length > 0) ? decoded : {
+			blobs: glyphBlobs(),
+			images: []
+		};
+	}, [inputSamples, noAtob]);
+	const knobs = useRef({ ...DEFAULT_KNOBS });
+	useEffect(() => {
+		knobs.current = {
+			zoom: zoom ?? DEFAULT_KNOBS.zoom,
+			exposure: exposure ?? DEFAULT_KNOBS.exposure,
+			focus: focus ?? DEFAULT_KNOBS.focus,
+			blurK: blurK ?? DEFAULT_KNOBS.blurK,
+			speed: speed ?? DEFAULT_KNOBS.speed,
+			intensity: intensity ?? DEFAULT_KNOBS.intensity,
+			drift: drift ?? DEFAULT_KNOBS.drift,
+			spin: spin ?? DEFAULT_KNOBS.spin
+		};
+	}, [
+		zoom,
+		exposure,
+		focus,
+		blurK,
+		speed,
+		intensity,
+		drift,
+		spin
+	]);
+	if (noAtob) return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className,
+		style: {
+			...style,
+			position: "absolute",
+			inset: 0,
+			background: BACKDROP
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			...style,
+			position: "absolute",
+			inset: 0,
+			background: BACKDROP
+		},
+		children: /* @__PURE__ */ jsx(Canvas, {
+			"aria-hidden": "true",
+			dpr: [1, 2],
+			frameloop: reduced() ? "demand" : "always",
+			camera: {
+				position: camFor(orientation).base.toArray(),
+				fov: BASE_FOV
+			},
+			gl: {
+				alpha: false,
+				antialias: true,
+				powerPreference: "high-performance",
+				preserveDrawingBuffer: true
+			},
+			onCreated: ({ gl }) => {
+				gl.setClearColor(67590, 1);
+			},
+			children: /* @__PURE__ */ jsx(SceneContent, {
+				knobs,
+				orientation,
+				blobs,
+				images
+			})
+		})
+	});
+};
+//#endregion
+export { FlowSim, NeuralFlow, decodeAll, decodeWeights, forwardPass };
+
+//# sourceMappingURL=NeuralFlow.mjs.map