Load the @moq worklets from /assets/ on every site

package.json

@@ -17,6 +17,7 @@
 		"moq/js/publish",
 		"moq/js/qmux",
 		"moq/js/signals",
+		"moq/js/ui",
 		"moq/js/video",
 		"moq/js/watch"
 	],
@@ -56,7 +57,6 @@
 		"tailwindcss": "^4.3.3",
 		"typescript": "^7.0.2",
 		"vite": "^8.3.4",
-		"vite-plugin-static-copy": "^4.1.1",
 		"wrangler": "^4.151.1"
 	},
 	"packageManager": "[email protected]"

quest/m0/README.md

@@ -2,9 +2,6 @@
 
 ## Goal
 
-The sites host the `@moq` player worklets and workers themselves, so the
-hosted path gets real traffic.
-
 The agent context is lean and the checks cover what they claim, passing on a
 developer's machine.
 
@@ -13,4 +10,3 @@ developer's machine.
 - [Lean AGENTS.md](/quest/m0/lean-agents-md.md) - agent context keeps only rules and conventions, no repo description
 - [Biome passes locally](/quest/m0/biome-local.md) - `just check` passes with Claude Code's local files present
 - [Type-check .astro files](/quest/m0/astro-typecheck.md) - `just check` covers `.astro` via the TypeScript 7.1 content mapper
-- [Dogfood hosted worklets](/quest/m0/dogfood-assets.md) - the sites serve the @moq worklets and workers themselves

sites/pub/src/main.ts

@@ -1,4 +1,5 @@
 // Publish an explicit broadcast, or mint a private try broadcast on a bare URL.
+import { assets } from "@moq/publish";
 import "@moq/publish/element";
 import "@moq/publish/ui";
 
@@ -7,6 +8,9 @@ import * as Try from "../../lib/try";
 
 const DEFAULT_RELAY = import.meta.env.PUBLIC_RELAY_URL ?? "https://cdn.moq.pro";
 
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+assets("/assets/");
+
 void start().catch((error) => {
 	document.body.textContent = error.message;
 });

sites/watch/src/main.ts

@@ -4,6 +4,7 @@
 //   ?relay=<url>          Relay server URL (default: the relay this site was built for)
 //   ?cloudflare=<label>  Shorthand for <label>.cloudflare.mediaoverquic.com
 //   ?jwt=<token>          Appended to the relay URL as ?jwt=<token>
+import { assets } from "@moq/watch";
 import "@moq/watch/element";
 import "@moq/watch/ui";
 
@@ -12,6 +13,9 @@ import * as Try from "../../lib/try";
 
 const DEFAULT_RELAY = import.meta.env.PUBLIC_RELAY_URL ?? "https://cdn.moq.pro";
 
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+assets("/assets/");
+
 const broadcast = Broadcast.parse(location.pathname);
 if (broadcast) {
 	void mount(broadcast).catch((error) => {

src/components/boy.tsx

@@ -1,6 +1,10 @@
 import "@moq/boy/element";
+import { assets } from "@moq/watch";
 import "@moq/watch/support/element";
 
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+assets("/assets/");
+
 export default function Boy() {
 	const url = new URL("/demo", import.meta.env.PUBLIC_RELAY_URL);
 

src/components/publish.tsx

@@ -4,7 +4,10 @@ import * as Try from "@/lib/try";
 import "@moq/publish/support/element";
 import "@moq/publish/element";
 import "@moq/publish/ui";
-import { Net } from "@moq/publish";
+import { assets, Net } from "@moq/publish";
+
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+assets("/assets/");
 
 export default function Publish() {
 	const [session] = createResource(Try.publish);

src/components/voice-demo.tsx

@@ -3,14 +3,19 @@
 // Pipecat client: <moq-publish> sends the mic, <moq-watch> plays the reply, and the page speaks
 // the slice of RTVI the agent needs over a `transcript.json.z` side track in each direction.
 import * as Json from "@moq/json";
-import { Clock, Net, Signals } from "@moq/publish";
+import { Clock, Net, assets as publishAssets, Signals } from "@moq/publish";
 import "@moq/publish/element";
 import type MoqPublish from "@moq/publish/element";
+import { assets as watchAssets } from "@moq/watch";
 import "@moq/watch/element";
 import type MoqWatch from "@moq/watch/element";
 import { createEffect, createSignal, For, Index, onCleanup, Show } from "solid-js";
 import Cat from "./voice/cat";
 
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+publishAssets("/assets/");
+watchAssets("/assets/");
+
 type Turnstile = {
 	render: (
 		container: HTMLElement,

src/components/watch.tsx

@@ -3,7 +3,10 @@ import * as Try from "@/lib/try";
 import "@moq/watch/support/element";
 import "@moq/watch/element";
 import "@moq/watch/ui";
-import { Clock, Net } from "@moq/watch";
+import { assets, Clock, Net } from "@moq/watch";
+
+// Load the worklets the build emits to /assets/ rather than blob: URLs.
+assets("/assets/");
 
 export default function Watch() {
 	const [session] = createResource(Try.watch);