feat: add the CARLA driving demo at /car

package.json

@@ -4,8 +4,8 @@
 	"version": "0.0.1",
 	"private": true,
 	"workspaces": [
+		"moq/demo/carla/web",
 		"moq/js/clock",
-		"moq/js/flate",
 		"moq/js/hang",
 		"moq/js/json",
 		"moq/js/libav",
@@ -35,6 +35,7 @@
 	},
 	"dependencies": {
 		"@moq/boy": "workspace:*",
+		"@moq/demo-carla": "workspace:*",
 		"@moq/json": "workspace:*",
 		"@moq/publish": "workspace:*",
 		"@moq/watch": "workspace:*",

src/components/car.astro

@@ -0,0 +1,7 @@
+---
+import Car from "@/components/car.tsx";
+---
+
+<div class="not-prose w-screen max-w-6xl px-4" style="margin-inline: calc(50% - min(36rem, 50vw));">
+	<Car client:only="solid-js" />
+</div>

src/components/car.tsx

@@ -0,0 +1,16 @@
+import "@moq/demo-carla/element";
+import { assets } from "@moq/watch";
+import "@moq/watch/support/element";
+
+assets("/assets/");
+
+export default function Car() {
+	const url = new URL("/demo", import.meta.env.PUBLIC_RELAY_URL);
+
+	return (
+		<>
+			<moq-carla prop:url={url} />
+			<moq-watch-support prop:show="always" />
+		</>
+	);
+}

src/components/voice-demo.tsx

@@ -411,8 +411,7 @@ export default function VoiceDemo() {
 			const broadcast = effect.get(el.broadcast.net);
 			if (!broadcast) return;
 			const producer = new Json.Stream.Producer<Message>({
-				track: broadcast.createTrack(RTVI_TRACK),
-				compression: "deflate",
+				track: broadcast.createTrack(RTVI_TRACK, { compress: true }),
 			});
 			for (const record of call.messages) producer.append({ value: record });
 			call.producer = producer;
@@ -470,7 +469,7 @@ export default function VoiceDemo() {
 
 			const track = active.track(RTVI_TRACK).subscribe();
 			effect.cleanup(() => track.close());
-			const consumer = new Json.Stream.Consumer<Message>({ track, compression: "deflate" });
+			const consumer = new Json.Stream.Consumer<Message>({ track });
 			effect.spawn(async () => {
 				for await (const {
 					value: { seq, epoch, ...message },

src/lib/blog.test.ts

@@ -3,7 +3,11 @@ import { readdir, readFile } from "node:fs/promises";
 import { createServer } from "vite";
 
 test("the voice archive includes the complete source and URL of every blog post", async () => {
-	const vite = await createServer({ server: { middlewareMode: true }, appType: "custom" });
+	const vite = await createServer({
+		server: { middlewareMode: true, watch: null },
+		appType: "custom",
+		optimizeDeps: { noDiscovery: true },
+	});
 	try {
 		const { GET } = await vite.ssrLoadModule("/src/pages/blog.json.ts");
 		const response: Response = GET();

src/pages/car.mdx

@@ -0,0 +1,31 @@
+---
+layout: "@/layouts/global.astro"
+title: CARLA
+description: Steer simulated vehicles in CARLA over MoQ.
+---
+
+import Car from "@/components/car.astro";
+
+# CARLA
+
+<Car />
+
+Click a vehicle to watch its cameras and take control. Use **W/S** for throttle and brake,
+**A/D** to steer, and **Space** to change gear. **E** stops the vehicle, **R** resets
+the stop, and **Esc** releases control. A steering wheel works too.
+
+The vehicles run in [CARLA](https://carla.org) on a workstation. When it is offline,
+the player says so.
+
+## How it works
+
+- **Video on demand.** Hover a vehicle for a 240p preview; select it for 720p.
+  Cameras render and encode only while someone watches.
+- **Control and telemetry.** Steering commands and vehicle status use JSON tracks
+  on the same MoQ connection as the video. One driver holds control at a time;
+  releasing it returns the vehicle to autonomy.
+- **A shared world.** The vehicles can see each other, and their positions appear
+  on the map even while their cameras are idle.
+
+The [demo source and setup](https://github.com/moq-dev/moq/tree/main/demo/carla)
+include the player, simulator worker, and GPU video bridge.

src/pages/demo.mdx

@@ -17,6 +17,14 @@ Click on any of them. That's what they're here for. Everything is open source!
 		<div class="text-sm leading-relaxed text-slate-300">Multiplayer (anarchy) Game Boy emulation on a remote server, using MoQ tracks for everything. Emulation and encoding only run when at least one viewer is watching.</div>
 	</a>
 
+	<a href="/car" class="card group flex flex-col gap-4 p-5 text-white">
+		<div class="flex h-28 items-center justify-center rounded-xl bg-slate-900">
+			<img src="/icons/use-case/robotics.svg" class="max-h-20 max-w-[70%] object-contain" alt="CARLA" />
+		</div>
+		<div class="text-xl font-semibold group-hover:text-green-500">CARLA</div>
+		<div class="text-sm leading-relaxed text-slate-300">Steer simulated vehicles in CARLA over MoQ. Cameras stream on demand, with controls and telemetry on the same connection.</div>
+	</a>
+
 	<a href="/watch?project=demo&name=bbb.hang" class="card group flex flex-col gap-4 p-5 text-white">
 		<div class="flex h-28 items-center justify-center rounded-xl bg-slate-900">
 			<img src="/demo/bunny.png" class="max-h-20 max-w-[70%] object-contain" alt="BBB" />