Add lower-corner layouts, custom blur backgrounds, and classic blur fill.

Ship composition families, optional background images for lower-corner templates, and an optional blurred cover fill for classic letterbox.

app/api/fonts/[key]/route.ts

@@ -1,25 +1,33 @@
 import { NextRequest, NextResponse } from "next/server";
 import fs from "fs/promises";
-import { CURATED_FONTS, isCuratedFontKey } from "@/lib/fonts";
-import { resolveCuratedFontPath } from "@/lib/fonts-server";
+import { CURATED_FONTS, isCuratedFontKey, SYSTEM_FONT } from "@/lib/fonts";
+import { resolveCuratedFontPath, resolveSystemFontPath } from "@/lib/fonts-server";
 
 export async function GET(
   _req: NextRequest,
   { params }: { params: Promise<{ key: string }> },
 ) {
   const { key } = await params;
-  if (!isCuratedFontKey(key)) {
+  const fontPath =
+    key === SYSTEM_FONT.key
+      ? resolveSystemFontPath()
+      : isCuratedFontKey(key)
+        ? resolveCuratedFontPath(key)
+        : null;
+  if (!fontPath) {
     return NextResponse.json({ error: "Unknown font" }, { status: 404 });
   }
 
-  const fontPath = resolveCuratedFontPath(key);
   try {
     const buf = await fs.readFile(fontPath);
-    const meta = CURATED_FONTS.find((f) => f.key === key)!;
+    const fileName =
+      key === SYSTEM_FONT.key
+        ? SYSTEM_FONT.file
+        : CURATED_FONTS.find((f) => f.key === key)!.file;
     return new NextResponse(buf, {
       headers: {
         "Content-Type": "font/ttf",
-        "Content-Disposition": `inline; filename="${meta.file}"`,
+        "Content-Disposition": `inline; filename="${fileName}"`,
         "Cache-Control": "public, max-age=86400, immutable",
       },
     });