Deploy static space build

README.md

@@ -1,10 +1,61 @@
 ---
-title: Mesmer Video Benchmark
-emoji: 🏢
-colorFrom: indigo
-colorTo: purple
+title: AI Video Generation Benchmark — Which LLM Codes the Best Video?
+emoji: 🏁
+colorFrom: yellow
+colorTo: red
 sdk: static
 pinned: false
+short_description: 12 AI models, same briefs, rendered to video. See which LLM
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Video Generation Benchmark — Which LLM Codes the Best Video?
+
+An **AI video generation benchmark** that pits 12 LLMs against the same creative
+briefs. Each model is asked to generate motion-graphics animation code, which is
+then compiled and rendered to a real video — same pipeline for every model, no
+hand-fixing in between. The result is a side-by-side **leaderboard** plus a
+gallery of every rendered clip, so you can judge the **best LLM for video** with
+your own eyes.
+
+This is a free, no-signup mirror of the full
+**[AI Video Generation Benchmark on MesmerTools](https://mesmer.tools/benchmarks/ai-video-generation)**.
+
+## What's inside
+
+- **The leaderboard** — every model ranked by output quality, with videos
+  rendered, average generation time, average code size, total cost, and retry
+  count. A clean read on which model is the **best LLM for motion graphics**.
+- **Every result, brief by brief** — seven prompts (YouTube intro, SaaS teaser,
+  Instagram story, app walkthrough, smartwatch reveal, music "wrapped" recap,
+  sneaker drop) with each model's rendered video, plus the failures shown
+  honestly.
+- **Claude vs Gemini vs GPT video**, head to head — Claude Fable 5, Claude Opus
+  4.8, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, Gemini 3.5 Flash, DeepSeek V4,
+  Kimi K2.6, GLM 5.1 / 5.2, and MiMo V2.5 Pro.
+
+## How it works
+
+The page fetches a single generated JSON
+(`https://mesmer.tools/benchmarks/ai-video-generation.json`) directly in your
+browser and renders the leaderboard and video gallery. The data is regenerated
+whenever MesmerTools redeploys, so the benchmark stays current with no backend.
+
+Want the lightbox, **side-by-side compare**, and the raw generated code for each
+model? Open the full interactive version:
+**[mesmer.tools/benchmarks/ai-video-generation](https://mesmer.tools/benchmarks/ai-video-generation)**.
+
+## More free tools on MesmerTools
+
+- [AI Logo Maker](https://mesmer.tools/free-tools/ai-logo-maker) — generate a brand logo from a prompt.
+- [Text to Speech](https://mesmer.tools/api-tools/tts) — natural AI voices, free.
+- [Website Screenshot API](https://mesmer.tools/api-tools/screenshot) — capture any URL as an image.
+- [Site Logo / Favicon](https://mesmer.tools/api-tools/site-logo) — fetch any website's logo.
+- [Token Price Calculator](https://mesmer.tools/free-tools/token-price-calculator) — estimate LLM API costs.
+
+Browse everything at **[mesmer.tools](https://mesmer.tools)** — free developer & AI tools.
+
+---
+
+**Keywords:** ai video generation benchmark, best llm for video, llm motion
+graphics benchmark, claude vs gemini vs gpt video, ai video model comparison,
+best ai model for motion design.

app.js

@@ -0,0 +1,259 @@
+/**
+ * AI Video Generation Benchmark — a static "display" space.
+ *
+ * Fetches the canonical benchmark JSON from mesmer.tools once at load and renders
+ * a leaderboard + per-prompt video gallery. No input form, no per-visitor API
+ * calls — the data is regenerated whenever the main site redeploys, so this page
+ * stays current on its own.
+ */
+
+import { mountChrome, el } from "./shared/ui.js";
+import { fetchData } from "./shared/api-client.js";
+import { DATA, ENDPOINTS, siteUrl } from "./shared/config.js";
+
+const FULL_BENCHMARK_URL = siteUrl(ENDPOINTS.benchmark.fullToolPath); // mesmer.tools/benchmarks/ai-video-generation
+
+/* --- Formatting helpers --------------------------------------------------- */
+
+function fmtSeconds(ms) {
+  return ms == null ? "—" : `${(ms / 1000).toFixed(1)}s`;
+}
+
+function fmtCodeKB(chars) {
+  return chars == null ? "—" : `${(chars / 1000).toFixed(1)} KB`;
+}
+
+function fmtCost(usd, estimate) {
+  if (usd == null) return "—";
+  return `${estimate ? "~$" : "$"}${usd.toFixed(2)}`;
+}
+
+function fmtDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso || "—";
+  return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+function runnerLabel(runner) {
+  return runner === "claude-code-subagent" ? "Claude Code" : "OpenRouter";
+}
+
+function truncate(text, max = 90) {
+  if (!text) return "";
+  return text.length > max ? `${text.slice(0, max - 1).trimEnd()}…` : text;
+}
+
+/* --- Page shell ----------------------------------------------------------- */
+
+const main = el("main", { className: "bm-main" });
+main.appendChild(el("div", { className: "bm-state" },
+  el("span", { className: "ms-spinner", "aria-hidden": "true" }),
+  el("span", { text: "Loading benchmark…" }),
+));
+
+// Insert main first, then mount the shared chrome so ordering is header → main → footer.
+const root = document.getElementById("app") || document.body;
+root.appendChild(main);
+mountChrome("benchmark");
+
+/* --- Fetch + render ------------------------------------------------------- */
+
+fetchData(DATA.videoBenchmark)
+  .then((data) => {
+    if (!data || !Array.isArray(data.summaries) || !Array.isArray(data.prompts)) {
+      throw new Error("The benchmark data was empty or in an unexpected shape.");
+    }
+    renderBenchmark(data);
+  })
+  .catch((err) => {
+    main.replaceChildren(
+      el("div", { className: "bm-state is-error" },
+        el("strong", { text: "Couldn't load the benchmark." }),
+        el("span", { text: (err && err.message) || "Please try again in a moment." }),
+        el("a", { className: "bm-retry", href: FULL_BENCHMARK_URL, target: "_blank", rel: "noopener",
+          text: "See it on mesmer.tools →" }),
+      ),
+    );
+  });
+
+function renderBenchmark(data) {
+  const { generatedAt, models = [], prompts = [], summaries = [], sections = [], totals = {} } = data;
+  const ranking = Array.isArray(data.ranking) ? data.ranking : [];
+
+  const modelBySlug = new Map(models.map((m) => [m.slug, m]));
+  const rankOf = (slug) => {
+    const i = ranking.indexOf(slug);
+    return i >= 0 ? i + 1 : null;
+  };
+
+  const frag = document.createDocumentFragment();
+  frag.appendChild(hero(generatedAt, models, prompts, totals));
+  frag.appendChild(leaderboard(summaries));
+  frag.appendChild(promptGallery(prompts, sections, modelBySlug, rankOf));
+  frag.appendChild(ctaCard());
+
+  main.replaceChildren(frag);
+}
+
+/* --- Hero ----------------------------------------------------------------- */
+
+function hero(generatedAt, models, prompts, totals) {
+  return el("section", { className: "bm-hero" },
+    el("div", { className: "bm-hero-emoji", text: "🏁" }),
+    el("h1", { className: "bm-title", text: "AI Video Generation Benchmark" }),
+    el("p", { className: "bm-subtitle",
+      text: `Which LLM writes the best motion-graphics code? ${models.length} models, ${prompts.length} briefs, rendered to video.` }),
+    el("div", { className: "bm-method" },
+      el("span", { className: "bm-method-icon", text: "🧪" }),
+      el("p", { className: "bm-method-body" },
+        el("strong", { text: "How it works. " }),
+        "Every model got the same creative briefs and was asked to generate animation code, which was then compiled and rendered to video — the same pipeline for all, with no hand-fixing in between. Failed cards are the model's own: the code either didn't generate or crashed while rendering. The ranking below is editorial, judged by hand on output quality.",
+      ),
+    ),
+    el("p", { className: "bm-updated",
+      text: generatedAt
+        ? `Updated ${fmtDate(generatedAt)} · ${totals.rendered ?? 0}/${totals.total ?? 0} videos rendered`
+        : `${totals.rendered ?? 0}/${totals.total ?? 0} videos rendered · live from mesmer.tools` }),
+  );
+}
+
+/* --- Leaderboard ---------------------------------------------------------- */
+
+function leaderboard(summaries) {
+  const head = el("tr", {},
+    el("th", { text: "Rank" }),
+    el("th", { text: "Model" }),
+    el("th", { text: "Runner" }),
+    el("th", { text: "Rendered" }),
+    el("th", { text: "Avg time" }),
+    el("th", { text: "Avg code" }),
+    el("th", { text: "Cost" }),
+    el("th", { text: "Tries" }),
+  );
+
+  const rows = summaries.map((s, i) => {
+    const m = s.model || {};
+    const isClaude = m.runner === "claude-code-subagent";
+    const renderedCls = s.rendered === s.total ? "is-full" : s.rendered === 0 ? "is-zero" : "is-partial";
+    return el("tr", {},
+      el("td", { className: "bm-rank", text: String(i + 1) }),
+      el("td", {},
+        el("div", { className: "bm-model-name", text: m.displayName || m.slug || "—" }),
+        el("div", { className: "bm-model-prov", text: m.provider || "" }),
+      ),
+      el("td", {},
+        el("span", { className: `bm-badge ${isClaude ? "is-cc" : "is-or"}`, text: runnerLabel(m.runner) }),
+      ),
+      el("td", {},
+        el("span", { className: `bm-rendered ${renderedCls}`, text: `${s.rendered}/${s.total}` }),
+      ),
+      el("td", { className: "bm-num", text: fmtSeconds(s.avgGenerationMs) }),
+      el("td", { className: "bm-num", text: fmtCodeKB(s.avgCodeChars) }),
+      el("td", { className: "bm-num", text: fmtCost(s.totalCostUsd, isClaude) }),
+      el("td", { className: "bm-num", text: s.totalAttempts != null ? String(s.totalAttempts) : "—" }),
+    );
+  });
+
+  return el("section", { className: "bm-section" },
+    el("h2", { className: "bm-h2", text: "Leaderboard" }),
+    el("p", { className: "bm-h2-note",
+      text: "Ranked by hand after watching every model's videos. Claude models ran through Claude Code, so their gen times are omitted and cost is an estimate (~)." }),
+    el("p", { className: "bm-scroll-hint", text: "← swipe the table for all columns →" }),
+    el("div", { className: "bm-table-wrap" },
+      el("table", { className: "bm-table" },
+        el("thead", {}, head),
+        el("tbody", {}, ...rows),
+      ),
+    ),
+  );
+}
+
+/* --- Per-prompt video gallery -------------------------------------------- */
+
+function promptGallery(prompts, sections, modelBySlug, rankOf) {
+  const sectionByPrompt = new Map(sections.map((s) => [s.promptId, s]));
+
+  const wrap = el("section", { className: "bm-section" },
+    el("h2", { className: "bm-h2", text: "Every result, brief by brief" }),
+    el("p", { className: "bm-h2-note", text: "Same prompt, every model. Best-ranked first; failures last." }),
+  );
+
+  for (const prompt of prompts) {
+    const section = sectionByPrompt.get(prompt.id);
+    if (!section || !Array.isArray(section.runs)) continue;
+
+    const aspect = prompt.aspectRatio || "16:9";
+    const grid = el("div", { className: "bm-grid", dataset: { aspect } });
+    for (const run of section.runs) {
+      grid.appendChild(videoCard(run, prompt, modelBySlug, rankOf));
+    }
+
+    wrap.appendChild(
+      el("div", { className: "bm-prompt" },
+        el("div", { className: "bm-prompt-head" },
+          el("h3", { className: "bm-prompt-title", text: prompt.title || prompt.id }),
+          el("span", { className: "bm-prompt-spec", text: `${prompt.aspectRatio} · ${prompt.fps}fps` }),
+        ),
+        el("details", { className: "bm-prompt-details" },
+          el("summary", { text: "Show the full brief" }),
+          el("div", { className: "bm-prompt-text", text: prompt.prompt || "" }),
+        ),
+        grid,
+      ),
+    );
+  }
+
+  return wrap;
+}
+
+function videoCard(run, prompt, modelBySlug, rankOf) {
+  const m = modelBySlug.get(run.modelSlug) || {};
+  const name = m.displayName || run.modelSlug;
+  const rank = rankOf(run.modelSlug);
+  const sub = [rank ? `#${rank}` : null, m.provider].filter(Boolean).join(" · ");
+  const aspect = (prompt.aspectRatio || "16:9").replace(":", " / ");
+
+  if (run.rendered && run.videoUrl) {
+    const metaParts = [];
+    if (run.generationMs != null) metaParts.push(`${(run.generationMs / 1000).toFixed(1)}s gen`);
+    if (run.codeChars != null) metaParts.push(`${(run.codeChars / 1000).toFixed(1)} KB code`);
+
+    return el("div", { className: "bm-card" },
+      el("video", {
+        src: run.videoUrl,
+        controls: "",
+        muted: "",
+        loop: "",
+        playsinline: "",
+        preload: "metadata",
+        width: String(prompt.width || ""),
+        height: String(prompt.height || ""),
+        "aria-label": `${name} — ${prompt.title}`,
+      }),
+      el("div", { className: "bm-card-name", text: name }),
+      el("div", { className: "bm-card-sub", text: sub }),
+      metaParts.length ? el("div", { className: "bm-card-meta", text: metaParts.join(" · ") }) : null,
+    );
+  }
+
+  // Failed run — dashed placeholder sized to the brief's aspect ratio.
+  const reason = run.error ? truncate(run.error) : "Code didn't compile";
+  return el("div", { className: "bm-card is-fail" },
+    el("div", { className: "bm-fail", style: { aspectRatio: aspect },
+      text: run.codeUrl ? "Code didn't render" : "No usable code produced" }),
+    el("div", { className: "bm-card-name", text: name }),
+    el("div", { className: "bm-card-sub", text: sub }),
+    el("div", { className: "bm-card-meta", text: reason }),
+  );
+}
+
+/* --- CTA ------------------------------------------------------------------ */
+
+function ctaCard() {
+  return el("section", { className: "bm-cta" },
+    el("h3", { text: "Want to compare them side by side?" }),
+    el("p", { text: "The full interactive benchmark adds a lightbox, side-by-side compare, and the raw generated code for every model." }),
+    el("a", { className: "bm-cta-btn", href: FULL_BENCHMARK_URL, target: "_blank", rel: "noopener",
+      text: "See the full interactive benchmark with side-by-side compare →" }),
+  );
+}

index.html

@@ -1,19 +1,246 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Video Generation Benchmark — Which LLM Codes the Best Video?</title>
+  <meta name="description" content="AI video generation benchmark: 12 AI models get the same creative briefs and generate motion-graphics code that's rendered to video. See the best LLM for video — Claude vs Gemini vs GPT — in a side-by-side leaderboard and gallery." />
+  <meta name="keywords" content="ai video generation benchmark, best llm for video, llm motion graphics benchmark, claude vs gemini vs gpt video" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./shared/ui.css" />
+  <style>
+    /* ----- Benchmark-specific layout, layered on the shared dark theme ----- */
+    .bm-main {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 40px 20px 8px;
+    }
+
+    /* Hero */
+    .bm-hero { margin-bottom: 28px; }
+    .bm-hero-emoji { font-size: 38px; line-height: 1; margin-bottom: 12px; }
+    .bm-title {
+      margin: 0 0 12px;
+      font-size: clamp(28px, 5vw, 42px);
+      font-weight: 800;
+      letter-spacing: -0.9px;
+      background: var(--grad);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+    .bm-subtitle { margin: 0; max-width: 680px; color: var(--text-secondary); font-size: 16px; }
+    .bm-method {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+      margin: 20px 0 14px;
+      max-width: 820px;
+      padding: 14px 16px;
+      border: 1px solid var(--amber-glow);
+      border-radius: 12px;
+      background: var(--amber-dim);
+    }
+    .bm-method-icon { font-size: 18px; line-height: 1.4; }
+    .bm-method-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
+    .bm-method-body strong { color: var(--text-primary); }
+    .bm-updated {
+      display: inline-block;
+      margin-top: 4px;
+      padding: 5px 12px;
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      background: var(--bg-elevated);
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+
+    /* Section heading */
+    .bm-section { margin-top: 44px; }
+    .bm-h2 {
+      margin: 0 0 4px;
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: -0.4px;
+      color: var(--text-primary);
+    }
+    .bm-h2-note { margin: 0 0 16px; font-size: 12.5px; color: var(--text-muted); }
+
+    /* Leaderboard table */
+    .bm-table-wrap {
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .bm-scroll-hint { display: none; margin: 0 0 8px; font-size: 11px; color: var(--text-muted); }
+    .bm-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13.5px; }
+    .bm-table th {
+      padding: 11px 14px;
+      text-align: left;
+      white-space: nowrap;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      background: var(--bg-elevated);
+      border-bottom: 1px solid var(--border);
+    }
+    .bm-table td {
+      padding: 11px 14px;
+      border-bottom: 1px solid var(--border);
+      vertical-align: middle;
+    }
+    .bm-table tbody tr:last-child td { border-bottom: none; }
+    .bm-table tbody tr:hover { background: var(--bg-card); }
+    .bm-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
+    .bm-model-name { font-weight: 600; color: var(--text-primary); }
+    .bm-model-prov { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
+    .bm-num { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
+    .bm-rendered { font-weight: 700; color: var(--text-primary); }
+    .bm-rendered.is-full { color: #4ade80; }
+    .bm-rendered.is-partial { color: #fcd34d; }
+    .bm-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 6px;
+      font-size: 11px;
+      font-weight: 600;
+      white-space: nowrap;
+      background: var(--amber-dim);
+      border: 1px solid var(--amber-glow);
+      color: #fcd9a0;
+    }
+    .bm-badge.is-or { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
+
+    /* Per-prompt sections */
+    .bm-prompt { margin-top: 40px; }
+    .bm-prompt-head {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+    .bm-prompt-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
+    .bm-prompt-spec {
+      display: inline-block;
+      padding: 2px 9px;
+      border-radius: 20px;
+      font-size: 11px;
+      font-weight: 600;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      color: var(--text-secondary);
+    }
+    .bm-prompt-details {
+      margin-bottom: 16px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--bg-card);
+    }
+    .bm-prompt-details summary {
+      cursor: pointer;
+      padding: 10px 14px;
+      font-size: 12.5px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      list-style: none;
+    }
+    .bm-prompt-details summary::-webkit-details-marker { display: none; }
+    .bm-prompt-details summary::before { content: "▸ "; color: var(--amber); }
+    .bm-prompt-details[open] summary::before { content: "▾ "; }
+    .bm-prompt-text {
+      padding: 0 14px 14px;
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--text-secondary);
+      white-space: pre-wrap;
+    }
+
+    /* Video grid — column width tuned to the brief's aspect ratio */
+    .bm-grid { display: grid; gap: 16px; }
+    .bm-grid[data-aspect="16:9"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
+    .bm-grid[data-aspect="1:1"]  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
+    .bm-grid[data-aspect="9:16"] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
+
+    .bm-card { display: flex; flex-direction: column; gap: 7px; }
+    .bm-card video {
+      width: 100%;
+      height: auto;
+      display: block;
+      border-radius: 10px;
+      border: 1px solid var(--border);
+      background: #000;
+    }
+    .bm-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
+    .bm-card-sub { font-size: 11.5px; color: var(--text-muted); }
+    .bm-card-meta { font-size: 11px; color: var(--text-muted); }
+
+    .bm-card.is-fail .bm-fail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 12px;
+      border: 1px dashed var(--border-hover);
+      border-radius: 10px;
+      background: var(--bg-elevated);
+      color: var(--text-muted);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .bm-card.is-fail .bm-card-name,
+    .bm-card.is-fail .bm-card-sub { opacity: 0.7; }
+
+    /* CTA */
+    .bm-cta {
+      margin: 48px 0 8px;
+      padding: 26px 24px;
+      border: 1px solid var(--amber-glow);
+      border-radius: 14px;
+      background: var(--bg-card);
+      text-align: center;
+    }
+    .bm-cta h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; }
+    .bm-cta p { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }
+    .bm-cta-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 22px;
+      border-radius: 8px;
+      background: var(--grad);
+      color: #fff !important;
+      font-size: 14px;
+      font-weight: 700;
+    }
+    .bm-cta-btn:hover { filter: brightness(1.08); text-decoration: none; }
+
+    /* Loading / error */
+    .bm-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      min-height: 200px;
+      color: var(--text-secondary);
+      font-size: 15px;
+    }
+    .bm-state.is-error { color: #fca5a5; flex-direction: column; }
+    .bm-state .bm-retry { color: var(--amber); font-weight: 600; }
+
+    @media (max-width: 560px) {
+      .bm-main { padding-top: 28px; }
+      .bm-scroll-hint { display: block; }
+      .bm-grid[data-aspect="9:16"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./app.js"></script>
+</body>
 </html>

shared/api-client.js

@@ -0,0 +1,114 @@
+/**
+ * Shared API client for all MesmerTools HuggingFace Spaces.
+ *
+ * Spaces are static pages that call the mesmer.tools API directly from the
+ * visitor's browser. That is deliberate: per-IP rate limits then apply per
+ * visitor instead of being shared through one Space backend. CORS on
+ * /api/v1/* is already `*`, so cross-origin fetches work with no proxy.
+ *
+ * Every helper throws `RateLimitError` on a 429 so the UI can surface the
+ * "use the full tool for higher limits" cross-sell, and `ApiError` otherwise.
+ */
+
+import { SITE } from "./config.js";
+
+export class RateLimitError extends Error {
+  constructor(message) {
+    super(message || "You've hit the free hourly limit.");
+    this.name = "RateLimitError";
+    this.isRateLimit = true;
+  }
+}
+
+export class ApiError extends Error {
+  constructor(message, status = 0) {
+    super(message || "Something went wrong.");
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
+const DEFAULT_TIMEOUT = 60_000;
+
+async function doFetch(url, init, timeout) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), timeout ?? DEFAULT_TIMEOUT);
+  try {
+    return await fetch(url, { ...init, signal: ctrl.signal });
+  } catch (err) {
+    if (err && err.name === "AbortError") {
+      throw new ApiError(
+        "The request timed out. The free demo can be slow under load — try the full tool on mesmer.tools.",
+        408,
+      );
+    }
+    throw new ApiError("Network error. Check your connection and try again.", 0);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function readJson(res) {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * REST call. GET with `params`, or POST with a JSON `body`.
+ * @returns parsed JSON response
+ */
+export async function callRest(apiPath, { method = "GET", params, body, timeout } = {}) {
+  let url = SITE.origin + apiPath;
+  const init = { method, headers: {} };
+  if (params) {
+    const qs = new URLSearchParams(params).toString();
+    if (qs) url += (url.includes("?") ? "&" : "?") + qs;
+  }
+  if (body !== undefined) {
+    init.headers["Content-Type"] = "application/json";
+    init.body = JSON.stringify(body);
+  }
+  const res = await doFetch(url, init, timeout);
+  const data = await readJson(res);
+  if (res.status === 429) throw new RateLimitError(data && data.error);
+  if (!res.ok) throw new ApiError((data && data.error) || `Request failed (${res.status}).`, res.status);
+  return data;
+}
+
+/**
+ * tRPC v11 mutation (superjson transformer). Used by the logo space.
+ * Input is wrapped as `{ json: input }`; the unwrapped value is returned.
+ */
+export async function callTrpcMutation(trpcPath, input, { timeout } = {}) {
+  const res = await doFetch(
+    SITE.origin + trpcPath,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ json: input }),
+    },
+    timeout,
+  );
+  const data = await readJson(res);
+  if (res.status === 429) throw new RateLimitError(extractTrpcError(data));
+  if (!res.ok) throw new ApiError(extractTrpcError(data) || `Request failed (${res.status}).`, res.status);
+  // superjson success envelope: { result: { data: { json: <value> } } }
+  const out = data && data.result && data.result.data;
+  return out && typeof out === "object" && "json" in out ? out.json : out;
+}
+
+function extractTrpcError(data) {
+  if (!data || !data.error) return null;
+  // superjson error envelope: { error: { json: { message, data: {...} } } }
+  return (data.error.json && data.error.json.message) || data.error.message || null;
+}
+
+/** Fetch a generated JSON artifact (benchmark, voices) from mesmer.tools. */
+export async function fetchData(url, { timeout } = {}) {
+  const res = await doFetch(url, { method: "GET" }, timeout ?? 20_000);
+  if (!res.ok) throw new ApiError(`Could not load data (${res.status}).`, res.status);
+  return readJson(res);
+}

shared/config.js

@@ -0,0 +1,84 @@
+/**
+ * Single source of shared config for every MesmerTools HuggingFace Space.
+ * Authored once here and imported by all spaces so nothing is duplicated.
+ *
+ * Data that changes often (TTS voices, benchmark runs) is NOT hardcoded — it is
+ * fetched at runtime from generated JSON on mesmer.tools (see DATA) so the spaces
+ * always reflect the canonical constants in the main repo.
+ */
+
+export const SITE = {
+  name: "MesmerTools",
+  origin: "https://mesmer.tools",
+  cdn: "https://cdn.mesmer.tools",
+  tagline: "Free developer & AI tools.",
+};
+
+/**
+ * Per-endpoint contract.
+ * `freeLimitPerHour` is the per-IP free cap the API enforces (null = no hard
+ * hourly cap). Because each space calls the API directly from the visitor's
+ * browser, this limit is per-user — every HuggingFace visitor gets their own
+ * bucket. On a 429 the space points users at `fullToolPath` for higher limits.
+ */
+export const ENDPOINTS = {
+  screenshot: {
+    apiPath: "/api/v1/screenshot",
+    method: "GET",
+    freeLimitPerHour: 10,
+    fullToolPath: "/api-tools/screenshot",
+  },
+  siteLogo: {
+    apiPath: "/api/v1/site-logo",
+    method: "GET",
+    freeLimitPerHour: null, // cached server-side; no hard hourly cap
+    fullToolPath: "/api-tools/site-logo",
+  },
+  tts: {
+    apiPath: "/api/v1/tts",
+    method: "POST",
+    freeLimitPerHour: 20,
+    fullToolPath: "/api-tools/tts",
+  },
+  logo: {
+    trpcPath: "/api/trpc/logo.generate",
+    method: "POST",
+    freeLimitPerHour: 10,
+    fullToolPath: "/free-tools/ai-logo-maker",
+  },
+  benchmark: {
+    fullToolPath: "/benchmarks/ai-video-generation",
+  },
+};
+
+/**
+ * Live data endpoints. These serve JSON straight from the canonical constants
+ * in the main repo (no generated snapshot, no build step) so the spaces always
+ * reflect the current voices / benchmark dict. Edge-cached for an hour.
+ */
+export const DATA = {
+  ttsVoices: `${SITE.origin}/api/v1/tts/voices`,
+  videoBenchmark: `${SITE.origin}/api/v1/benchmarks/ai-video-generation`,
+};
+
+/**
+ * Cross-sell catalog shown in the footer strip of every space. These are the
+ * SEO backlinks to mesmer.tools. `key` matches ENDPOINTS keys so a space can
+ * exclude itself from its own strip.
+ */
+export const TOOL_CATALOG = [
+  { key: "logo", emoji: "🎨", name: "AI Logo Maker", desc: "Generate a brand logo from a prompt.", path: "/free-tools/ai-logo-maker" },
+  { key: "tts", emoji: "🔊", name: "Text to Speech", desc: "Natural AI voices, free.", path: "/api-tools/tts" },
+  { key: "screenshot", emoji: "📸", name: "Screenshot API", desc: "Capture any URL as an image.", path: "/api-tools/screenshot" },
+  { key: "siteLogo", emoji: "🏷️", name: "Site Logo / Favicon", desc: "Fetch any website's logo.", path: "/api-tools/site-logo" },
+  { key: "music", emoji: "🎵", name: "AI Music Maker", desc: "Generate short music clips.", path: "/free-tools/ai-music-maker" },
+  { key: "tokens", emoji: "🧮", name: "Token Price Calculator", desc: "Estimate LLM API costs.", path: "/free-tools/token-price-calculator" },
+  { key: "json", emoji: "{ }", name: "JSON Formatter", desc: "Format & validate JSON.", path: "/free-tools/json-formatter" },
+  { key: "synthid", emoji: "🔍", name: "Detect SynthID", desc: "Check images for AI watermarks.", path: "/free-tools/detect-synthid" },
+  { key: "benchmark", emoji: "🏁", name: "AI Video Benchmark", desc: "Which LLM codes the best video?", path: "/benchmarks/ai-video-generation" },
+];
+
+/** Absolute mesmer.tools URL for a path. */
+export function siteUrl(path) {
+  return `${SITE.origin}${path}`;
+}

shared/ui.css

@@ -0,0 +1,250 @@
+/* MesmerTools HuggingFace Spaces — shared dark theme.
+   Tokens mirror DESIGN.md so the spaces feel like the main site. */
+
+:root {
+  --bg: #0d0d0d;
+  --bg-elevated: #161616;
+  --bg-card: #1a1a1a;
+  --bg-card-hover: #222222;
+  --border: #2a2a2a;
+  --border-hover: #3a3a3a;
+  --amber: #f59e0b;
+  --amber-dim: rgba(245, 158, 11, 0.15);
+  --amber-glow: rgba(245, 158, 11, 0.35);
+  --sienna: #c2410c;
+  --text-primary: #eeeeee;
+  --text-secondary: #999999;
+  --text-muted: #666666;
+  --grad: linear-gradient(135deg, var(--amber), var(--sienna));
+  --radius: 10px;
+  --maxw: 880px;
+}
+
+* { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+
+a { color: var(--amber); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* --- Header --------------------------------------------------------- */
+.ms-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 56px;
+  padding: 0 20px;
+  background: rgba(13, 13, 13, 0.85);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.ms-brand { display: flex; align-items: center; gap: 9px; color: var(--text-primary); }
+.ms-brand:hover { text-decoration: none; }
+.ms-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 26px; height: 26px;
+  border-radius: 7px;
+  background: var(--grad);
+  color: var(--bg);
+  font-weight: 800;
+  font-size: 15px;
+}
+.ms-brand-name { font-weight: 700; letter-spacing: -0.3px; }
+.ms-header-link { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
+.ms-header-link:hover { color: var(--amber); text-decoration: none; }
+
+/* --- Layout --------------------------------------------------------- */
+.ms-main {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 40px 20px 8px;
+}
+
+.ms-hero { text-align: center; margin-bottom: 28px; }
+.ms-hero-emoji { font-size: 40px; line-height: 1; margin-bottom: 12px; }
+.ms-title {
+  margin: 0 0 10px;
+  font-size: clamp(26px, 5vw, 38px);
+  font-weight: 800;
+  letter-spacing: -0.8px;
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.ms-subtitle { margin: 0 auto; max-width: 620px; color: var(--text-secondary); font-size: 16px; }
+.ms-intro { margin: 12px auto 0; max-width: 620px; color: var(--text-muted); font-size: 14px; }
+.ms-limit-note {
+  display: inline-block;
+  margin-top: 16px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* --- Card ----------------------------------------------------------- */
+.ms-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+}
+
+/* --- Forms (generic, reusable by every space) ----------------------- */
+.ms-form { display: flex; flex-direction: column; gap: 16px; }
+.ms-field { display: flex; flex-direction: column; gap: 6px; }
+.ms-field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
+.ms-field .ms-hint { font-size: 12px; color: var(--text-muted); }
+.ms-row { display: flex; gap: 12px; flex-wrap: wrap; }
+.ms-row > .ms-field { flex: 1 1 160px; }
+
+.ms-input, .ms-textarea, .ms-select {
+  width: 100%;
+  padding: 11px 13px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.ms-textarea { resize: vertical; min-height: 110px; }
+.ms-input:focus, .ms-textarea:focus, .ms-select:focus {
+  outline: none;
+  border-color: var(--amber);
+  box-shadow: 0 0 0 3px var(--amber-dim);
+}
+.ms-input::placeholder, .ms-textarea::placeholder { color: var(--text-muted); }
+.ms-select { appearance: none; cursor: pointer; }
+
+/* --- Buttons -------------------------------------------------------- */
+.ms-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  background: var(--grad);
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.15s, opacity 0.15s, filter 0.15s;
+}
+.ms-btn:hover { filter: brightness(1.08); }
+.ms-btn:active { transform: translateY(1px); }
+.ms-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
+.ms-btn-ghost {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+.ms-btn-ghost:hover { border-color: var(--border-hover); filter: none; }
+
+.ms-char-count { font-size: 12px; color: var(--text-muted); text-align: right; }
+
+/* --- Status banners ------------------------------------------------- */
+.ms-status:empty { display: none; }
+.ms-status { margin-top: 16px; }
+.ms-banner {
+  padding: 12px 14px;
+  border-radius: 8px;
+  font-size: 14px;
+  border: 1px solid var(--border);
+}
+.ms-banner-error { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.4); color: #fca5a5; }
+.ms-banner-limit { background: var(--amber-dim); border-color: var(--amber-glow); color: #fcd9a0; }
+.ms-banner-limit .ms-banner-cta { display: inline-block; margin-top: 4px; font-weight: 700; }
+.ms-banner-loading { display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); color: var(--text-secondary); }
+.ms-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid var(--border-hover);
+  border-top-color: var(--amber);
+  border-radius: 50%;
+  animation: ms-spin 0.7s linear infinite;
+}
+@keyframes ms-spin { to { transform: rotate(360deg); } }
+
+/* --- Output --------------------------------------------------------- */
+.ms-output:empty { display: none; }
+.ms-output { margin-top: 18px; }
+.ms-output img, .ms-output video { max-width: 100%; border-radius: 10px; display: block; }
+.ms-result-frame {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--bg-elevated);
+}
+.ms-result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
+.ms-meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
+.ms-audio { width: 100%; margin-top: 6px; }
+
+/* --- Footer cross-sell ---------------------------------------------- */
+.ms-footer {
+  max-width: var(--maxw);
+  margin: 48px auto 0;
+  padding: 28px 20px 56px;
+  border-top: 1px solid var(--border);
+}
+.ms-footer-title {
+  margin: 0 0 16px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+}
+.ms-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.ms-tool-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, background 0.2s;
+}
+.ms-tool-card:hover {
+  transform: translateY(-3px);
+  background: var(--bg-card-hover);
+  border-color: var(--amber-glow);
+  text-decoration: none;
+}
+.ms-tool-emoji { font-size: 20px; line-height: 1.3; }
+.ms-tool-text { display: flex; flex-direction: column; gap: 2px; }
+.ms-tool-name { color: var(--text-primary); font-weight: 600; font-size: 14px; }
+.ms-tool-desc { color: var(--text-secondary); font-size: 12.5px; }
+.ms-powered { margin: 22px 0 0; color: var(--text-muted); font-size: 12.5px; }
+
+/* --- Responsive ----------------------------------------------------- */
+@media (max-width: 560px) {
+  .ms-main { padding-top: 28px; }
+  .ms-card { padding: 18px; }
+  .ms-grid { grid-template-columns: 1fr; }
+}

shared/ui.js

@@ -0,0 +1,166 @@
+/**
+ * Shared page chrome for all MesmerTools HuggingFace Spaces.
+ *
+ * `createSpace()` builds the header, hero, a card with a <form> + output slot,
+ * a status area (errors + the rate-limit cross-sell banner), and the footer
+ * "more free tools" strip (the SEO backlinks). A tool space only has to fill
+ * the returned `form` and `output` elements and wire its submit handler.
+ */
+
+import { SITE, ENDPOINTS, TOOL_CATALOG, siteUrl } from "./config.js";
+import { RateLimitError } from "./api-client.js";
+
+/** Tiny hyperscript helper. `props` supports className, text, html, on*, attrs, dataset, style. */
+export function el(tag, props = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(props || {})) {
+    if (value == null) continue;
+    if (key === "className") node.className = value;
+    else if (key === "text") node.textContent = value;
+    else if (key === "html") node.innerHTML = value;
+    else if (key === "dataset") Object.assign(node.dataset, value);
+    else if (key === "style" && typeof value === "object") Object.assign(node.style, value);
+    else if (key.startsWith("on") && typeof value === "function") {
+      node.addEventListener(key.slice(2).toLowerCase(), value);
+    } else node.setAttribute(key, value);
+  }
+  for (const child of children.flat()) {
+    if (child == null || child === false) continue;
+    node.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return node;
+}
+
+function header() {
+  return el("header", { className: "ms-header" },
+    el("a", { className: "ms-brand", href: SITE.origin, target: "_blank", rel: "noopener" },
+      el("span", { className: "ms-brand-mark", text: "M" }),
+      el("span", { className: "ms-brand-name", text: SITE.name }),
+    ),
+    el("a", { className: "ms-header-link", href: SITE.origin, target: "_blank", rel: "noopener",
+      html: "All tools <span aria-hidden=\"true\">↗</span>" }),
+  );
+}
+
+function crossSell(toolKey) {
+  const items = TOOL_CATALOG.filter((t) => t.key !== toolKey);
+  return el("footer", { className: "ms-footer" },
+    el("p", { className: "ms-footer-title", text: "More free tools on MesmerTools" }),
+    el("div", { className: "ms-grid" },
+      ...items.map((t) =>
+        el("a", { className: "ms-tool-card", href: siteUrl(t.path), target: "_blank", rel: "noopener" },
+          el("span", { className: "ms-tool-emoji", text: t.emoji }),
+          el("span", { className: "ms-tool-text" },
+            el("span", { className: "ms-tool-name", text: t.name }),
+            el("span", { className: "ms-tool-desc", text: t.desc }),
+          ),
+        ),
+      ),
+    ),
+    el("p", { className: "ms-powered" },
+      "Powered by ",
+      el("a", { href: SITE.origin, target: "_blank", rel: "noopener", text: "mesmer.tools" }),
+      " — runs on the public MesmerTools API.",
+    ),
+  );
+}
+
+/**
+ * @param {object} opts
+ * @param {string} opts.toolKey   key in ENDPOINTS / TOOL_CATALOG (also excluded from the strip)
+ * @param {string} opts.emoji
+ * @param {string} opts.title
+ * @param {string} opts.subtitle
+ * @param {string} [opts.intro]   optional longer paragraph under the subtitle
+ * @returns {{form: HTMLFormElement, output: HTMLElement, setLoading: Function,
+ *            showError: Function, showRateLimit: Function, clearStatus: Function,
+ *            clearOutput: Function, limitNote: string}}
+ */
+export function createSpace(opts) {
+  const { toolKey, emoji, title, subtitle, intro } = opts;
+  const endpoint = ENDPOINTS[toolKey] || {};
+  const limit = endpoint.freeLimitPerHour;
+  const limitNote = limit
+    ? `${limit} free requests/hour per user · higher limits on mesmer.tools`
+    : `Free · backed by mesmer.tools`;
+
+  const root = document.getElementById("app") || document.body;
+
+  const status = el("div", { className: "ms-status", role: "status", "aria-live": "polite" });
+  const form = el("form", { className: "ms-form" });
+  const output = el("div", { className: "ms-output" });
+
+  const hero = el("section", { className: "ms-hero" },
+    el("div", { className: "ms-hero-emoji", text: emoji }),
+    el("h1", { className: "ms-title", text: title }),
+    el("p", { className: "ms-subtitle", text: subtitle }),
+    intro ? el("p", { className: "ms-intro", text: intro }) : null,
+    el("p", { className: "ms-limit-note", text: limitNote }),
+  );
+
+  const card = el("section", { className: "ms-card" }, form, status, output);
+  const main = el("main", { className: "ms-main" }, hero, card);
+
+  root.appendChild(header());
+  root.appendChild(main);
+  root.appendChild(crossSell(toolKey));
+
+  function clearStatus() {
+    status.replaceChildren();
+  }
+
+  function showRateLimit() {
+    const full = siteUrl(endpoint.fullToolPath || "/");
+    const msg = limit
+      ? `You've used your ${limit} free requests this hour. Each visitor gets their own quota — `
+      : `You've hit a temporary limit — `;
+    clearStatus();
+    status.appendChild(
+      el("div", { className: "ms-banner ms-banner-limit" },
+        el("strong", { text: "Free limit reached. " }),
+        msg,
+        el("a", { className: "ms-banner-cta", href: full, target: "_blank", rel: "noopener",
+          text: "use the full tool on mesmer.tools →" }),
+      ),
+    );
+  }
+
+  /** Renders a RateLimitError as the cross-sell banner; anything else as an error. */
+  function showError(err) {
+    if (err instanceof RateLimitError || (err && err.isRateLimit)) {
+      showRateLimit();
+      return;
+    }
+    const text = typeof err === "string" ? err : (err && err.message) || "Something went wrong.";
+    clearStatus();
+    status.appendChild(el("div", { className: "ms-banner ms-banner-error", text }));
+  }
+
+  function setLoading(isLoading, label) {
+    card.classList.toggle("is-loading", !!isLoading);
+    if (isLoading) {
+      clearStatus();
+      status.appendChild(
+        el("div", { className: "ms-banner ms-banner-loading" },
+          el("span", { className: "ms-spinner", "aria-hidden": "true" }),
+          el("span", { text: label || "Working…" }),
+        ),
+      );
+    } else {
+      clearStatus();
+    }
+  }
+
+  function clearOutput() {
+    output.replaceChildren();
+  }
+
+  return { form, output, status, setLoading, showError, showRateLimit, clearStatus, clearOutput, limitNote };
+}
+
+/** Standalone footer for non-tool spaces (e.g. the benchmark) that build their own body. */
+export function mountChrome(toolKey) {
+  const root = document.getElementById("app") || document.body;
+  root.prepend(header());
+  root.appendChild(crossSell(toolKey));
+}