thrunium 1.2.0-rc.2 → 1.2.0-rc.4

package/dist/cli.mjs

@@ -117,6 +117,112 @@ var init_engine = __esm({
   }
 });
 
+// cli/fonts.ts
+import { createHash as createHash2 } from "node:crypto";
+import { existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, renameSync, writeFileSync } from "node:fs";
+import { join as join2 } from "node:path";
+function findGoogleFontUrls(js) {
+  const urls = /* @__PURE__ */ new Set();
+  for (const m of js.matchAll(/(["'`])(https:\/\/fonts\.googleapis\.com\/css2?\?[^"'`\\\s]*)\1(?=\s*(\+)?)/g)) {
+    const url = m[2];
+    const concatenated = m[3] === "+";
+    const unfinished = /[=@&?]$/.test(url) || url.includes("${");
+    if (!concatenated && !unfinished) urls.add(url);
+  }
+  return [...urls];
+}
+function parseFontFaces(css) {
+  const faces = [];
+  for (const [, body] of css.matchAll(/@font-face\s*\{([^}]*)\}/g)) {
+    const prop = (name) => new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(body)?.[1].trim();
+    const family = prop("font-family");
+    const src = /url\(\s*([^)]+?)\s*\)/.exec(prop("src") ?? "")?.[1];
+    if (!family || !src) continue;
+    const face = { family: unquote(family), src: unquote(src) };
+    const weight = prop("font-weight");
+    const style = prop("font-style");
+    const unicodeRange = prop("unicode-range");
+    if (weight) face.weight = weight;
+    if (style) face.style = style;
+    if (unicodeRange) face.unicodeRange = unicodeRange;
+    faces.push(face);
+  }
+  return faces;
+}
+function fontsCacheDir(root) {
+  return join2(root, "node_modules/.cache/thrunium/fonts");
+}
+function manifestScript(manifest) {
+  return `<script>window.THRUNIUM_FONTS = ${JSON.stringify(manifest).replace(/</g, "\\u003c")};</script>`;
+}
+function writeAtomic(file, data) {
+  writeFileSync(file + ".tmp", data);
+  renameSync(file + ".tmp", file);
+}
+async function download(url, fetchImpl) {
+  const res = await fetchImpl(url, { headers: { "user-agent": USER_AGENT }, signal: AbortSignal.timeout(TIMEOUT_MS) });
+  if (!res.ok) throw new Error(`${url} answered ${res.status}`);
+  return res;
+}
+function readCache(dir) {
+  try {
+    const stored = JSON.parse(readFileSync2(join2(dir, INDEX_FILE), "utf8"));
+    const fonts = stored.map((f) => ({ ...f, file: join2(dir, f.file) }));
+    return fonts.every((f) => existsSync2(f.file)) ? fonts : null;
+  } catch {
+    return null;
+  }
+}
+async function fetchOne(url, dir, fetchImpl) {
+  const cached = readCache(dir);
+  if (cached) return cached;
+  try {
+    const faces = parseFontFaces(await (await download(url, fetchImpl)).text());
+    if (faces.length === 0) throw new Error("the stylesheet has no @font-face blocks");
+    const names = /* @__PURE__ */ new Map();
+    for (const face of faces) {
+      const abs = new URL(face.src, url).href;
+      if (names.has(abs)) continue;
+      let name = (new URL(abs).pathname.split("/").pop() || "font").replace(/[^\w.-]/g, "_").replace(/^\./, "_");
+      if ([...names.values()].includes(name)) name = `${names.size}-${name}`;
+      names.set(abs, name);
+    }
+    mkdirSync(dir, { recursive: true });
+    const hashes = /* @__PURE__ */ new Map();
+    await Promise.all(
+      [...names].map(async ([abs, name]) => {
+        const bytes = new Uint8Array(await (await download(abs, fetchImpl)).arrayBuffer());
+        writeAtomic(join2(dir, name), bytes);
+        hashes.set(name, sha256(bytes));
+      })
+    );
+    const stored = faces.map((face) => {
+      const name = names.get(new URL(face.src, url).href);
+      return { ...face, file: name, hash: hashes.get(name) };
+    });
+    writeAtomic(join2(dir, INDEX_FILE), JSON.stringify(stored));
+    return stored.map((f) => ({ ...f, file: join2(dir, f.file) }));
+  } catch (err) {
+    throw new UserError(`Could not download the Google Font ${url}: ${err instanceof Error ? err.message : String(err)}`);
+  }
+}
+async function fetchFonts(urls, cacheDir, fetchImpl) {
+  const results = await Promise.all(urls.map((url) => fetchOne(url, join2(cacheDir, sha256(url).slice(0, 16)), fetchImpl)));
+  return new Map(urls.map((url, i) => [url, results[i]]));
+}
+var USER_AGENT, TIMEOUT_MS, INDEX_FILE, unquote, sha256;
+var init_fonts = __esm({
+  "cli/fonts.ts"() {
+    "use strict";
+    init_errors();
+    USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36";
+    TIMEOUT_MS = 3e4;
+    INDEX_FILE = "faces.json";
+    unquote = (s) => s.trim().replace(/^(["'])(.*)\1$/, "$2");
+    sha256 = (data) => createHash2("sha256").update(data).digest("hex");
+  }
+});
+
 // cli/html.ts
 function parseAttributes(tag) {
   const attrs = /* @__PURE__ */ new Map();
@@ -155,20 +261,28 @@ function hasEngineTag(html) {
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function generatePage(title, entry) {
+function generatePage(title, entry, opts = {}) {
+  const head = (opts.headTags ?? []).map((tag) => `	${tag}
+`).join("") + (opts.headExtra ? `${HEAD_PLACEHOLDER}
+` : "");
+  const body = opts.bodyExtra ? `${BODY_PLACEHOLDER}
+` : "";
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="${escapeHtml(opts.lang ?? "en")}">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>${escapeHtml(title)}</title>
-</head>
+${head}</head>
 <body style="margin: 0; padding: 0;">
-	<script type="module" src="${escapeHtml(entry)}"></script>
+${body}	<script type="module" src="${escapeHtml(entry)}"></script>
 </body>
 </html>
 `;
 }
+function fillExtras(html, extras) {
+  return html.replace(HEAD_PLACEHOLDER, () => extras.head).replace(BODY_PLACEHOLDER, () => extras.body);
+}
 function transformHtml(html, opts) {
   let out = html;
   const hasHead = /<\/head\s*>/i.test(html);
@@ -198,26 +312,101 @@ function transformHtml(html, opts) {
   }
   return out;
 }
-var SCRIPT_TAG, ATTRIBUTE, ENGINE_SRC;
+var SCRIPT_TAG, ATTRIBUTE, ENGINE_SRC, HEAD_PLACEHOLDER, BODY_PLACEHOLDER;
 var init_html = __esm({
   "cli/html.ts"() {
     "use strict";
     SCRIPT_TAG = /<script\b[^>]*>/gi;
     ATTRIBUTE = /([^\s"'<>\/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
     ENGINE_SRC = /(^|\/)thrunium(\.min)?\.js([?#]|$)/;
+    HEAD_PLACEHOLDER = "<!--thrunium:head-->";
+    BODY_PLACEHOLDER = "<!--thrunium:body-->";
+  }
+});
+
+// cli/page.ts
+import { existsSync as existsSync3, statSync } from "node:fs";
+import { isAbsolute, join as join3, normalize } from "node:path";
+function checkAsset(root, field, value) {
+  if (HTTP_URL.test(value)) return value;
+  const problem = (why) => new UserError(`"page.${field}" in game.json must be an http(s) URL or a relative path to a file in the project (${why}): ${value}`);
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value) || value.startsWith("//")) throw problem("unsupported address");
+  if (/[?#]/.test(value)) throw problem("no ? or # suffix");
+  if (isAbsolute(value) || normalize(value).split(/[\\/]/).includes("..")) throw problem("outside the project");
+  const path = join3(root, value);
+  if (!existsSync3(path) || !statSync(path).isFile()) throw problem("file not found");
+  return value.replace(/^(\.\/)+/, "");
+}
+function readPageSettings(root, value) {
+  if (value === void 0) return {};
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throw new UserError('"page" in game.json must be an object.');
+  }
+  const raw = value;
+  const settings = {};
+  for (const field of FIELDS) {
+    const v = raw[field];
+    if (v === void 0) continue;
+    if (typeof v !== "string") throw new UserError(`"page.${field}" in game.json must be a string.`);
+    if (v !== "") settings[field] = v;
+  }
+  if (settings.icon !== void 0) settings.icon = checkAsset(root, "icon", settings.icon);
+  if (settings.image !== void 0) settings.image = checkAsset(root, "image", settings.image);
+  if (settings.url !== void 0 && !(HTTP_URL.test(settings.url) && URL.canParse(settings.url))) {
+    throw new UserError(`"page.url" in game.json must be an absolute http(s) URL: ${settings.url}`);
+  }
+  return settings;
+}
+function pageHeadTags(settings, title) {
+  const { description, icon, url } = settings;
+  const image = settings.image !== void 0 && url !== void 0 && !HTTP_URL.test(settings.image) ? new URL(settings.image, url).href : settings.image;
+  const attr = escapeHtml;
+  const tags = [];
+  if (description !== void 0) tags.push(`<meta name="description" content="${attr(description)}">`);
+  if (url !== void 0) tags.push(`<link rel="canonical" href="${attr(url)}">`);
+  if (icon !== void 0) {
+    const ext = /\.[^./?#]+$/.exec(icon)?.[0].toLowerCase() ?? "";
+    const type = ICON_TYPES[ext];
+    tags.push(`<link rel="icon" href="${attr(icon)}"${type ? ` type="${type}"` : ""}>`);
+  }
+  if (description !== void 0 || image !== void 0 || url !== void 0) {
+    tags.push('<meta property="og:type" content="website">');
+    tags.push(`<meta property="og:title" content="${attr(title)}">`);
+    if (description !== void 0) tags.push(`<meta property="og:description" content="${attr(description)}">`);
+    if (image !== void 0) tags.push(`<meta property="og:image" content="${attr(image)}">`);
+    if (url !== void 0) tags.push(`<meta property="og:url" content="${attr(url)}">`);
+    tags.push(`<meta name="twitter:card" content="${image !== void 0 ? "summary_large_image" : "summary"}">`);
+  }
+  return tags;
+}
+var FIELDS, HTTP_URL, ICON_TYPES;
+var init_page = __esm({
+  "cli/page.ts"() {
+    "use strict";
+    init_errors();
+    init_html();
+    FIELDS = ["title", "description", "icon", "image", "url", "lang"];
+    HTTP_URL = /^https?:\/\//i;
+    ICON_TYPES = {
+      ".png": "image/png",
+      ".svg": "image/svg+xml",
+      ".ico": "image/x-icon",
+      ".gif": "image/gif",
+      ".webp": "image/webp"
+    };
   }
 });
 
 // cli/project.ts
-import { existsSync as existsSync2, readFileSync as readFileSync2, statSync } from "node:fs";
-import { basename, isAbsolute, join as join2, normalize, resolve } from "node:path";
+import { existsSync as existsSync4, readFileSync as readFileSync3, statSync as statSync2 } from "node:fs";
+import { basename, isAbsolute as isAbsolute2, join as join4, normalize as normalize2, resolve } from "node:path";
 function resolveEngineMode(root, flag) {
   if (flag) return flag;
-  const manifest = join2(root, "package.json");
-  if (!existsSync2(manifest)) return "cdn";
+  const manifest = join4(root, "package.json");
+  if (!existsSync4(manifest)) return "cdn";
   let pkg;
   try {
-    pkg = JSON.parse(readFileSync2(manifest, "utf8"));
+    pkg = JSON.parse(readFileSync3(manifest, "utf8"));
   } catch {
     throw new UserError("package.json is not valid JSON.");
   }
@@ -227,65 +416,91 @@ function resolveEngineMode(root, flag) {
   throw new UserError(`Invalid "thrunium.engine" in package.json: ${JSON.stringify(value)}. Use "cdn" or "bundle".`);
 }
 function isFile(path) {
-  return existsSync2(path) && statSync(path).isFile();
+  return existsSync4(path) && statSync2(path).isFile();
 }
 function readGameJson(root) {
-  const file = join2(root, "game.json");
-  if (!existsSync2(file)) return null;
+  const file = join4(root, "game.json");
+  if (!existsSync4(file)) return null;
   let json;
   try {
-    json = JSON.parse(readFileSync2(file, "utf8"));
+    json = JSON.parse(readFileSync3(file, "utf8"));
   } catch {
     throw new UserError("game.json is not valid JSON.");
   }
   if (typeof json !== "object" || json === null || Array.isArray(json)) {
     throw new UserError("game.json must contain a JSON object.");
   }
-  const { name, entry } = json;
+  const { name, entry, page } = json;
   if (name !== void 0 && typeof name !== "string") throw new UserError('"name" in game.json must be a string.');
   if (entry !== void 0 && typeof entry !== "string") throw new UserError('"entry" in game.json must be a string.');
-  return { name, entry };
+  return { name, entry, page };
 }
 function validateEntry(root, entry) {
-  const inside = !isAbsolute(entry) && !normalize(entry).split(/[\\/]/).includes("..");
+  const inside = !isAbsolute2(entry) && !normalize2(entry).split(/[\\/]/).includes("..");
   if (!inside) throw new UserError(`"entry" in game.json must be a relative path inside the project: ${entry}`);
   if (!ENTRY_EXTENSIONS.test(entry)) {
     throw new UserError(`"entry" in game.json must end in .ts, .js, .mts or .mjs: ${entry}`);
   }
-  if (!isFile(join2(root, entry))) throw new UserError(`"entry" in game.json points to ${entry}, which does not exist.`);
+  if (!isFile(join4(root, entry))) throw new UserError(`"entry" in game.json points to ${entry}, which does not exist.`);
 }
-function hasEntryKey(file) {
+function hasKey(file, key) {
   try {
-    const json = JSON.parse(readFileSync2(file, "utf8"));
-    return typeof json === "object" && json !== null && !Array.isArray(json) && "entry" in json;
+    const json = JSON.parse(readFileSync3(file, "utf8"));
+    return typeof json === "object" && json !== null && !Array.isArray(json) && key in json;
   } catch {
     return false;
   }
 }
+function readExtra(root, file) {
+  const path = join4(root, file);
+  return isFile(path) ? readFileSync3(path, "utf8").replace(/^\uFEFF/, "").trimEnd() : "";
+}
 function resolvePage(root) {
-  const indexPath = join2(root, "index.html");
-  if (existsSync2(indexPath)) {
-    if (hasEntryKey(join2(root, "game.json"))) {
+  const indexPath = join4(root, "index.html");
+  if (existsSync4(indexPath)) {
+    const gameJson = join4(root, "game.json");
+    if (hasKey(gameJson, "entry")) {
       throw new UserError('game.json has "entry", but index.html also exists and is used instead. Remove one of them.');
     }
-    return { html: readFileSync2(indexPath, "utf8"), htmlSource: "file" };
+    if (hasKey(gameJson, "page")) {
+      throw new UserError(
+        'game.json has "page", but index.html also exists and is used instead. Move the settings into index.html or delete it.'
+      );
+    }
+    for (const file of ["head.html", "body.html"]) {
+      if (isFile(join4(root, file))) {
+        throw new UserError(
+          `${file} exists, but index.html also exists and is used instead. Move its contents into index.html or delete it.`
+        );
+      }
+    }
+    return { html: readFileSync3(indexPath, "utf8"), htmlSource: "file", extras: { head: "", body: "" } };
   }
   const game = readGameJson(root);
   let entry = game?.entry;
   if (entry !== void 0) validateEntry(root, entry);
-  else entry = DEFAULT_ENTRIES.find((candidate) => isFile(join2(root, candidate)));
+  else entry = DEFAULT_ENTRIES.find((candidate) => isFile(join4(root, candidate)));
   if (entry === void 0) {
     throw new UserError(
       `No game found: add game.ts or game.js (or set "entry" in game.json), or an index.html. Looked for: ${DEFAULT_ENTRIES.join(", ")}.`
     );
   }
-  return { html: generatePage(game?.name ?? basename(resolve(root)), entry), htmlSource: "generated" };
+  const settings = readPageSettings(root, game?.page);
+  const title = settings.title ?? game?.name ?? basename(resolve(root));
+  const extras = { head: readExtra(root, "head.html"), body: readExtra(root, "body.html") };
+  const html = generatePage(title, entry, {
+    lang: settings.lang,
+    headTags: pageHeadTags(settings, title),
+    headExtra: extras.head !== "",
+    bodyExtra: extras.body !== ""
+  });
+  return { html, htmlSource: "generated", extras };
 }
 function loadProject(root, engineFlag) {
-  const { html, htmlSource } = resolvePage(root);
+  const { html, htmlSource, extras } = resolvePage(root);
   const entries = findModuleEntries(html);
   for (const entry of entries) {
-    if (!existsSync2(join2(root, entry))) {
+    if (!existsSync4(join4(root, entry))) {
       throw new UserError(`Entry file ${entry} (from ${htmlSource === "file" ? "index.html" : "game.json"}) does not exist.`);
     }
   }
@@ -293,7 +508,7 @@ function loadProject(root, engineFlag) {
   if (usesModules && hasEngineTag(html)) {
     throw new UserError("Remove the Thrunium <script> tag from index.html; thrunium adds it for you.");
   }
-  return { root, html, htmlSource, entries, usesModules, engineMode: resolveEngineMode(root, engineFlag) };
+  return { root, html, htmlSource, extras, entries, usesModules, engineMode: resolveEngineMode(root, engineFlag) };
 }
 function thruniumPlugin() {
   return {
@@ -334,6 +549,7 @@ var init_project = __esm({
     init_engine();
     init_errors();
     init_html();
+    init_page();
     DEFAULT_ENTRIES = ["game.ts", "game.js", "src/game.ts", "src/game.js"];
     ENTRY_EXTENSIONS = /\.(ts|js|mts|mjs)$/;
     ASSET_EXTENSIONS = [".woff", ".woff2", ".ttf", ".otf", ".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"];
@@ -346,6 +562,7 @@ var init_reload_client = __esm({
   "cli/reload-client.ts"() {
     "use strict";
     RELOAD_CLIENT = `<script>
+window.THRUNIUM_DEV = true;
 (function () {
   var overlay = null;
   function clearOverlay() {
@@ -381,11 +598,11 @@ __export(dev_exports, {
   startDev: () => startDev
 });
 import { spawn } from "node:child_process";
-import { existsSync as existsSync3, readdirSync, realpathSync, statSync as statSync2, watch } from "node:fs";
+import { existsSync as existsSync5, readdirSync, realpathSync, statSync as statSync3, watch } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { createServer } from "node:http";
 import { isIP } from "node:net";
-import { basename as basename2, extname, isAbsolute as isAbsolute2, join as join3, normalize as normalize2, relative, resolve as resolve2, sep } from "node:path";
+import { basename as basename2, dirname as dirname2, extname, isAbsolute as isAbsolute3, join as join5, normalize as normalize3, relative, resolve as resolve2, sep } from "node:path";
 import { parseArgs } from "node:util";
 import { context as esbuildContext, formatMessages } from "esbuild";
 function openBrowser(url) {
@@ -423,10 +640,10 @@ async function listen(server, port, host) {
 async function startDev(opts) {
   const root = resolve2(opts.root);
   const host = opts.host ?? "localhost";
-  const outDir = join3(root, "dist");
+  const outDir = join5(root, "dist");
   const realRoot = realpathSync(root);
   const outTmp = outDir + ".tmp";
-  const virtualOut = join3(root, ".thrunium-dev");
+  const virtualOut = join5(root, ".thrunium-dev");
   loadProject(root);
   const clients = /* @__PURE__ */ new Set();
   let lastError = null;
@@ -447,6 +664,25 @@ data: ${JSON.stringify(data)}
   let owned = /* @__PURE__ */ new Set();
   let entries = [];
   let ctx = null;
+  let fonts = /* @__PURE__ */ new Map();
+  const failedFonts = /* @__PURE__ */ new Set();
+  const fontUrl = (font) => `${FONTS_PREFIX}${basename2(dirname2(font.file))}/${basename2(font.file)}`;
+  async function refreshFonts(outputs) {
+    const urls = [...new Set([...outputs].flatMap(([name, contents]) => name.endsWith(".js") ? findGoogleFontUrls(Buffer.from(contents).toString("utf8")) : []))];
+    const next = /* @__PURE__ */ new Map();
+    await Promise.all(
+      urls.map(async (url2) => {
+        try {
+          next.set(url2, (await fetchFonts([url2], fontsCacheDir(root), opts.fetchImpl ?? fetch)).get(url2));
+          failedFonts.delete(url2);
+        } catch (err) {
+          if (!failedFonts.has(url2)) console.warn(`thrunium: ${err instanceof Error ? err.message : String(err)}. It loads from Google instead.`);
+          failedFonts.add(url2);
+        }
+      })
+    );
+    fonts = new Map(urls.flatMap((url2) => next.has(url2) ? [[url2, next.get(url2)]] : []));
+  }
   const formatErrors = async (errors) => (await formatMessages(errors, { kind: "error", color: false })).join("\n").trim();
   async function startBundler(newEntries) {
     await ctx?.dispose();
@@ -454,6 +690,7 @@ data: ${JSON.stringify(data)}
     entries = newEntries;
     buildError = null;
     bundles.clear();
+    fonts = /* @__PURE__ */ new Map();
     owned = new Set(entries.map((e) => resolve2(root, e)));
     if (entries.length === 0) return;
     let first = true;
@@ -486,6 +723,7 @@ data: ${JSON.stringify(data)}
                 const changed = next.size !== bundles.size || [...next].some(([k, v]) => !Buffer.from(v).equals(bundles.get(k) ?? new Uint8Array()));
                 bundles.clear();
                 for (const [k, v] of next) bundles.set(k, v);
+                await refreshFonts(next);
                 owned = new Set(Object.keys(result.metafile?.inputs ?? {}).map((p) => resolve2(root, p)));
                 for (const e of entries) owned.add(resolve2(root, e));
                 if (!wasFirst && (changed || lastError !== null)) broadcastReload();
@@ -541,12 +779,23 @@ data: ${JSON.stringify(data)}
       const project = loadProject(root);
       const entryMap = new Map(project.entries.map((e, i) => [e, `${BUNDLE_PREFIX}${i}.js`]));
       const styles = project.entries.flatMap((_, i) => bundles.has(`${i}.css`) ? [`${BUNDLE_PREFIX}${i}.css`] : []);
-      const html = transformHtml(project.html, {
-        engineTag: project.usesModules ? ENGINE_TAG : null,
-        entryMap,
-        inject: RELOAD_CLIENT,
-        styles
-      });
+      const manifest = {};
+      for (const [googleUrl, files] of fonts) {
+        manifest[googleUrl] = files.map((font) => {
+          const { file: _file, hash: _hash, ...face } = font;
+          return { ...face, src: fontUrl(font) };
+        });
+      }
+      const engineTag = (fonts.size > 0 ? manifestScript(manifest) : "") + ENGINE_TAG;
+      const html = fillExtras(
+        transformHtml(project.html, {
+          engineTag: project.usesModules ? engineTag : null,
+          entryMap,
+          inject: RELOAD_CLIENT,
+          styles
+        }),
+        project.extras
+      );
       res.writeHead(200, { ...noCache, "content-type": MIME[".html"] }).end(html);
       return;
     }
@@ -565,15 +814,25 @@ data: ${JSON.stringify(data)}
       res.writeHead(200, { ...noCache, "content-type": type }).end(contents);
       return;
     }
-    const file = normalize2(join3(root, pathname));
+    if (pathname.startsWith(FONTS_PREFIX)) {
+      const font = [...fonts.values()].flat().find((f) => fontUrl(f) === pathname);
+      if (!font) {
+        res.writeHead(404).end();
+        return;
+      }
+      const type = MIME[extname(font.file).toLowerCase()] ?? "application/octet-stream";
+      res.writeHead(200, { ...noCache, "content-type": type }).end(await readFile(font.file));
+      return;
+    }
+    const file = normalize3(join5(root, pathname));
     const rel = relative(root, file);
     if (/[\\\0]/.test(pathname) || // backslashes act as separators on Windows; NUL is never valid
-    rel.split(/[\\/]/).some((part) => part.startsWith(".")) || rel === "" || rel === ".." || rel.startsWith(".." + sep) || isAbsolute2(rel) || !existsSync3(file) || !statSync2(file).isFile()) {
+    rel.split(/[\\/]/).some((part) => part.startsWith(".")) || rel === "" || rel === ".." || rel.startsWith(".." + sep) || isAbsolute3(rel) || !existsSync5(file) || !statSync3(file).isFile()) {
       res.writeHead(404).end();
       return;
     }
     const realRel = relative(realRoot, realpathSync(file));
-    if (realRel === ".." || realRel.startsWith(".." + sep) || isAbsolute2(realRel)) {
+    if (realRel === ".." || realRel.startsWith(".." + sep) || isAbsolute3(realRel)) {
       res.writeHead(404).end();
       return;
     }
@@ -585,7 +844,7 @@ data: ${JSON.stringify(data)}
     for (const dir of [outDir, outTmp]) if (abs === dir || abs.startsWith(dir + sep)) return true;
     if (owned.has(abs)) return true;
     try {
-      return statSync2(abs).isDirectory();
+      return statSync3(abs).isDirectory();
     } catch {
       return false;
     }
@@ -593,15 +852,10 @@ data: ${JSON.stringify(data)}
   let timer;
   let closed = false;
   let pending = Promise.resolve();
-  let indexChanged = false;
   const flush = async () => {
-    const checkEntries = indexChanged;
-    indexChanged = false;
     try {
-      if (checkEntries) {
-        const next = findModuleEntries(loadProject(root).html);
-        if (next.join("\n") !== entries.join("\n")) await startBundler(next);
-      }
+      const next = findModuleEntries(loadProject(root).html);
+      if (next.join("\n") !== entries.join("\n")) await startBundler(next);
     } catch (err) {
       broadcastError(err instanceof Error ? err.message : String(err));
       return;
@@ -620,20 +874,20 @@ data: ${JSON.stringify(data)}
   };
   const watchers = /* @__PURE__ */ new Map();
   const skippedTop = (name) => {
-    const abs = join3(root, name);
+    const abs = join5(root, name);
     return name === "node_modules" || name.startsWith(".") || abs === outDir || abs === outTmp;
   };
   const onWatchError = (path) => (err) => {
     watchers.get(path)?.close();
     watchers.delete(path);
-    if (existsSync3(path)) console.error(`thrunium: file watching stopped for ${path}: ${err.message}`);
+    if (existsSync5(path)) console.error(`thrunium: file watching stopped for ${path}: ${err.message}`);
   };
   const rescan = () => {
     if (closed) return;
     const dirs = /* @__PURE__ */ new Set();
     try {
       for (const entry of readdirSync(root, { withFileTypes: true })) {
-        if (entry.isDirectory() && !skippedTop(entry.name)) dirs.add(join3(root, entry.name));
+        if (entry.isDirectory() && !skippedTop(entry.name)) dirs.add(join5(root, entry.name));
       }
     } catch {
       return;
@@ -650,7 +904,7 @@ data: ${JSON.stringify(data)}
         const w = watch(dir, { recursive: true }, (_event, filename) => {
           if (!filename) return schedule();
           const name = filename.toString();
-          if (name === basename2(dir) && !existsSync3(join3(dir, name))) return;
+          if (name === basename2(dir) && !existsSync5(join5(dir, name))) return;
           if (!ignored(resolve2(dir, name))) schedule();
         });
         w.on("error", onWatchError(dir));
@@ -662,9 +916,8 @@ data: ${JSON.stringify(data)}
   const rootWatcher = watch(root, (event, filename) => {
     if (event === "rename") rescan();
     const abs = filename ? resolve2(root, filename.toString()) : root;
-    const pageInput = !filename || abs === join3(root, "index.html") || abs === join3(root, "game.json");
+    const pageInput = !filename || PAGE_INPUTS.some((file) => abs === join5(root, file));
     if (!pageInput && ignored(abs)) return;
-    if (pageInput) indexChanged = true;
     schedule();
   });
   rootWatcher.on("error", onWatchError(root));
@@ -741,12 +994,13 @@ ${USAGE}`);
   });
   await server.close();
 }
-var USAGE, MIME, ENGINE_TAG, BUNDLE_PREFIX, WATCH_DEBOUNCE_MS, PORT_ATTEMPTS;
+var USAGE, MIME, ENGINE_TAG, BUNDLE_PREFIX, FONTS_PREFIX, PAGE_INPUTS, WATCH_DEBOUNCE_MS, PORT_ATTEMPTS;
 var init_dev = __esm({
   "cli/dev.ts"() {
     "use strict";
     init_engine();
     init_errors();
+    init_fonts();
     init_html();
     init_project();
     init_reload_client();
@@ -781,6 +1035,8 @@ Options:
     };
     ENGINE_TAG = '<script src="/__thrunium/engine/thrunium.js"></script>';
     BUNDLE_PREFIX = "/__thrunium/bundle/";
+    FONTS_PREFIX = "/__thrunium/fonts/";
+    PAGE_INPUTS = ["index.html", "game.json", "head.html", "body.html"];
     WATCH_DEBOUNCE_MS = 50;
     PORT_ATTEMPTS = 11;
   }
@@ -792,14 +1048,14 @@ __export(build_exports, {
   build: () => build,
   runBuild: () => runBuild
 });
-import { existsSync as existsSync4, mkdirSync, readdirSync as readdirSync2, readFileSync as readFileSync3, renameSync, rmSync, statSync as statSync3, writeFileSync, copyFileSync } from "node:fs";
-import { dirname as dirname2, isAbsolute as isAbsolute3, join as join4, relative as relative2, resolve as resolve3, sep as sep2 } from "node:path";
+import { existsSync as existsSync6, mkdirSync as mkdirSync2, readdirSync as readdirSync2, readFileSync as readFileSync4, renameSync as renameSync2, rmSync, statSync as statSync4, writeFileSync as writeFileSync2, copyFileSync } from "node:fs";
+import { basename as basename3, dirname as dirname3, extname as extname2, isAbsolute as isAbsolute4, join as join6, relative as relative2, resolve as resolve3, sep as sep2 } from "node:path";
 import { parseArgs as parseArgs2 } from "node:util";
 import { build as esbuild, formatMessages as formatMessages2 } from "esbuild";
 function listFiles(root, dir, skipDirs) {
   const files = [];
   for (const entry of readdirSync2(dir, { withFileTypes: true })) {
-    const abs = join4(dir, entry.name);
+    const abs = join6(dir, entry.name);
     if (entry.name.startsWith(".") || entry.name === "node_modules" || skipDirs.has(abs)) continue;
     if (entry.isDirectory()) files.push(...listFiles(root, abs, skipDirs));
     else if (entry.isFile() && !SKIPPED_NAMES.test(entry.name)) files.push(relative2(root, abs));
@@ -810,7 +1066,7 @@ async function runBuild(opts) {
   const root = resolve3(opts.root);
   const outDir = resolve3(root, opts.outDir ?? "dist");
   const rel = relative2(root, outDir);
-  if (rel === "" || rel === ".." || rel.startsWith(".." + sep2) || isAbsolute3(rel)) {
+  if (rel === "" || rel === ".." || rel.startsWith(".." + sep2) || isAbsolute4(rel)) {
     throw new UserError(`The output folder must be inside the project and not the project itself: ${outDir}`);
   }
   const project = loadProject(root, opts.engine);
@@ -827,7 +1083,7 @@ async function runBuild(opts) {
   const entryMap = /* @__PURE__ */ new Map();
   const styles = [];
   if (project.usesModules) {
-    const outAbs = join4(root, ".thrunium-out");
+    const outAbs = join6(root, ".thrunium-out");
     const result = await esbuild({
       ...baseBuildOptions(root),
       entryPoints: project.entries,
@@ -862,43 +1118,57 @@ async function runBuild(opts) {
   if (project.usesModules) {
     if (bundled) {
       engineTag = '<script src="thrunium.min.js"></script>';
-      written.set("thrunium.min.js", readFileSync3(engineFile("thrunium.min.js")));
+      written.set("thrunium.min.js", readFileSync4(engineFile("thrunium.min.js")));
       const map = engineFile("thrunium.min.js") + ".map";
-      if (existsSync4(map)) written.set("thrunium.min.js.map", readFileSync3(map));
+      if (existsSync6(map)) written.set("thrunium.min.js.map", readFileSync4(map));
     } else {
       engineTag = cdnScriptTag(engineVersion(), integrity);
     }
+    const urls = [...new Set([...written].flatMap(([file, contents]) => file.endsWith(".js") ? findGoogleFontUrls(Buffer.from(contents).toString("utf8")) : []))];
+    if (urls.length > 0) {
+      const manifest = {};
+      for (const [url, fonts] of await fetchFonts(urls, fontsCacheDir(root), opts.fetchImpl ?? fetch)) {
+        manifest[url] = fonts.map(({ file, hash, ...face }) => {
+          const ext = extname2(file);
+          const src = `fonts/${basename3(file, ext)}-${hash.slice(0, 8)}${ext}`;
+          written.set(src, readFileSync4(file));
+          return { ...face, src };
+        });
+      }
+      engineTag = manifestScript(manifest) + engineTag;
+    }
   }
   const tmp = outDir + ".tmp";
-  written.set("index.html", transformHtml(project.html, { engineTag, entryMap, inject: null, styles }));
+  written.set("index.html", fillExtras(transformHtml(project.html, { engineTag, entryMap, inject: null, styles }), project.extras));
   rmSync(tmp, { recursive: true, force: true });
   try {
     const skipDirs = /* @__PURE__ */ new Set([outDir, tmp]);
     for (const file of listFiles(root, root, skipDirs)) {
       const key = file.split(sep2).join("/");
       if (written.has(key) || consumed.has(resolve3(root, file))) continue;
-      const dest = join4(tmp, file);
-      mkdirSync(dirname2(dest), { recursive: true });
-      copyFileSync(join4(root, file), dest);
+      if (project.htmlSource === "generated" && PAGE_PARTS.has(key)) continue;
+      const dest = join6(tmp, file);
+      mkdirSync2(dirname3(dest), { recursive: true });
+      copyFileSync(join6(root, file), dest);
     }
     for (const [file, contents] of written) {
-      const dest = join4(tmp, file);
-      mkdirSync(dirname2(dest), { recursive: true });
-      writeFileSync(dest, contents);
+      const dest = join6(tmp, file);
+      mkdirSync2(dirname3(dest), { recursive: true });
+      writeFileSync2(dest, contents);
     }
     rmSync(outDir, { recursive: true, force: true });
-    renameSync(tmp, outDir);
+    renameSync2(tmp, outDir);
   } catch (err) {
     rmSync(tmp, { recursive: true, force: true });
     throw err;
   }
   const files = listAll(outDir, outDir).sort();
-  for (const f of files) console.log(`  ${f}  ${formatSize(statSync3(join4(outDir, f)).size)}`);
+  for (const f of files) console.log(`  ${f}  ${formatSize(statSync4(join6(outDir, f)).size)}`);
   return { outDir, files };
 }
 function listAll(base, dir) {
   return readdirSync2(dir, { withFileTypes: true }).flatMap(
-    (e) => e.isDirectory() ? listAll(base, join4(dir, e.name)) : [relative2(base, join4(dir, e.name)).split(sep2).join("/")]
+    (e) => e.isDirectory() ? listAll(base, join6(dir, e.name)) : [relative2(base, join6(dir, e.name)).split(sep2).join("/")]
   );
 }
 function formatSize(bytes) {
@@ -930,12 +1200,13 @@ ${USAGE2}`);
   }
   await runBuild({ root: process.cwd(), outDir: values.out, engine: values.engine });
 }
-var USAGE2, SKIPPED_NAMES;
+var USAGE2, SKIPPED_NAMES, PAGE_PARTS;
 var init_build = __esm({
   "cli/build.ts"() {
     "use strict";
     init_engine();
     init_errors();
+    init_fonts();
     init_html();
     init_project();
     USAGE2 = `Usage: thrunium build [options]
@@ -946,6 +1217,7 @@ Options:
   --help, -h              Show this help
 `;
     SKIPPED_NAMES = /^(package\.json|package-lock\.json|npm-shrinkwrap\.json|pnpm-lock\.yaml|pnpm-workspace\.yaml|yarn\.lock|bun\.lockb?|bunfig\.toml|tsconfig.*\.json|.*\.ts)$/;
+    PAGE_PARTS = /* @__PURE__ */ new Set(["head.html", "body.html"]);
   }
 });
 
@@ -960,8 +1232,8 @@ __export(init_exports, {
   spawnInstall: () => spawnInstall
 });
 import { spawn as spawn2 } from "node:child_process";
-import { cpSync, existsSync as existsSync5, mkdirSync as mkdirSync2, readdirSync as readdirSync3, readFileSync as readFileSync4, renameSync as renameSync2, statSync as statSync4, writeFileSync as writeFileSync2 } from "node:fs";
-import { basename as basename3, join as join5, resolve as resolve4 } from "node:path";
+import { cpSync, existsSync as existsSync7, mkdirSync as mkdirSync3, readdirSync as readdirSync3, readFileSync as readFileSync5, renameSync as renameSync3, rmdirSync, statSync as statSync5, writeFileSync as writeFileSync3 } from "node:fs";
+import { basename as basename4, join as join7, resolve as resolve4 } from "node:path";
 import { parseArgs as parseArgs3 } from "node:util";
 function detectPackageManager(userAgent) {
   const [name, version] = (userAgent?.split(" ")[0] ?? "").split("/");
@@ -983,31 +1255,36 @@ function spawnInstall(cmd, args, cwd) {
 }
 async function runInit(opts) {
   const dir = resolve4(opts.dir);
-  if (existsSync5(dir)) {
-    if (!statSync4(dir).isDirectory() || readdirSync3(dir).length > 0) {
+  if (existsSync7(dir)) {
+    if (!statSync5(dir).isDirectory() || readdirSync3(dir).length > 0) {
       throw new UserError(`${dir} already exists and is not an empty folder.`);
     }
   } else {
-    mkdirSync2(dir, { recursive: true });
+    mkdirSync3(dir, { recursive: true });
   }
-  cpSync(join5(packageRoot(), "templates", opts.template), dir, { recursive: true });
-  if (opts.pm.name === "pnpm") cpSync(join5(packageRoot(), "templates", "pnpm"), dir, { recursive: true });
-  renameSync2(join5(dir, "gitignore"), join5(dir, ".gitignore"));
-  const name = basename3(dir).toLowerCase().replace(/[^a-z0-9-]/g, "-");
+  cpSync(join7(packageRoot(), "templates", opts.template), dir, { recursive: true });
+  if (opts.pm.name === "pnpm") cpSync(join7(packageRoot(), "templates", "pnpm"), dir, { recursive: true });
+  renameSync3(join7(dir, "gitignore"), join7(dir, ".gitignore"));
+  const name = basename4(dir).toLowerCase().replace(/[^a-z0-9-]/g, "-");
   for (const file of TEXT_FILES) {
-    const path = join5(dir, file);
-    const text = readFileSync4(path, "utf8").replace(/\{\{name\}\}/g, name).replace(/\{\{version\}\}/g, engineVersion());
-    writeFileSync2(path, text);
+    const path = join7(dir, file);
+    const text = readFileSync5(path, "utf8").replace(/\{\{name\}\}/g, name).replace(/\{\{version\}\}/g, engineVersion());
+    writeFileSync3(path, text);
   }
   const pinPnpm = opts.pm.name === "pnpm" && opts.pm.version;
   if (pinPnpm || opts.pm.name === "npm") {
-    const path = join5(dir, "package.json");
-    const pkg = JSON.parse(readFileSync4(path, "utf8"));
+    const path = join7(dir, "package.json");
+    const pkg = JSON.parse(readFileSync5(path, "utf8"));
     if (pinPnpm) pkg.packageManager = `pnpm@${opts.pm.version}`;
     if (opts.pm.name === "npm") pkg.allowScripts = { esbuild: true };
-    writeFileSync2(path, `${JSON.stringify(pkg, null, 2)}
+    writeFileSync3(path, `${JSON.stringify(pkg, null, 2)}
 `);
   }
+  if (opts.src === false) {
+    const file = opts.template === "ts" ? "game.ts" : "game.js";
+    renameSync3(join7(dir, "src", file), join7(dir, file));
+    rmdirSync(join7(dir, "src"));
+  }
   if (!opts.install) return;
   const { cmd, args } = installCommand(opts.pm.name);
   const ok = await (opts.runInstall ?? spawnInstall)(cmd, args, dir);
@@ -1024,6 +1301,7 @@ async function init(args) {
         js: { type: "boolean" },
         pm: { type: "string" },
         install: { type: "boolean", default: true },
+        src: { type: "boolean", default: true },
         help: { type: "boolean", short: "h" }
       },
       allowPositionals: true,
@@ -1052,7 +1330,7 @@ ${USAGE3}`);
     }
     pm = values.pm === pm.name ? pm : { name: values.pm, version: null };
   }
-  await runInit({ dir, template: values.js ? "js" : "ts", pm, install: values.install });
+  await runInit({ dir, template: values.js ? "js" : "ts", pm, install: values.install, src: values.src });
   console.log(`Created ${dir === "." ? "the project" : dir}. Next:
 
 ${dir === "." ? "" : `  cd ${dir}
@@ -1074,6 +1352,7 @@ Options:
   --pm <name>     Package manager: npm, pnpm, yarn or bun
                   (default: the one that ran this command, else npm)
   --no-install    Do not install dependencies
+  --no-src        Put game.ts (or game.js) in the project root instead of src/
   --help, -h      Show this help
 `;
     PACKAGE_MANAGERS = ["npm", "pnpm", "yarn", "bun"];
@@ -1083,7 +1362,7 @@ Options:
 
 // cli/main.ts
 init_errors();
-import { readFileSync as readFileSync5 } from "node:fs";
+import { readFileSync as readFileSync6 } from "node:fs";
 import { parseArgs as parseArgs4 } from "node:util";
 var USAGE4 = `Usage: thrunium <command>
 
@@ -1098,7 +1377,7 @@ Options:
 `;
 function packageVersion() {
   const url = new URL("../package.json", import.meta.url);
-  return JSON.parse(readFileSync5(url, "utf8")).version;
+  return JSON.parse(readFileSync6(url, "utf8")).version;
 }
 async function main(argv) {
   try {