blume 2.0.3 → 2.1.0

package/src/astro/templates.ts

@@ -6,20 +6,29 @@ import { dirname, isAbsolute, join, relative } from "pathe";
 import type { AskRetrievalOptions } from "../ai/ask-context.ts";
 import type { AskBackend } from "../ai/ask.ts";
 import { buildHomeLinkHeader } from "../ai/link-headers.ts";
+import type { CaptchaAdapter } from "../captcha/schema.ts";
+import { CONSENT_CLIENT_MODULES } from "../consent/clients.ts";
 import { normalizeBasePath } from "../core/base-path.ts";
 import { TOC_HIDDEN_KEY } from "../core/heading-markers.ts";
+import { compileRedirects, isPatternPath } from "../core/redirect-patterns.ts";
+import type { CompiledRedirect } from "../core/redirect-patterns.ts";
 import type { ResolvedConfig } from "../core/schema.ts";
 import { resolveDocsCollection } from "../core/sources/collection.ts";
 import { BLUME_IGNORE_DIRS } from "../core/sources/watch.ts";
 import { trimChar } from "../core/trim.ts";
 import type { ProjectContext } from "../core/types.ts";
+import { hasVariables } from "../core/variables.ts";
 import { deployPassthrough } from "../deploy/adapters/types.ts";
 import { SVG_ASSET_HEADERS } from "../deploy/headers.ts";
 import { deployPlatform } from "../deploy/platforms/index.ts";
 import { adapterRoot, distDir } from "../deploy/platforms/paths.ts";
 import { applyBaseToAstroRedirects } from "../deploy/redirects.ts";
+import { API_RAIL_KEY } from "../markdown/api-rail.ts";
+import { VIEWS_KEY } from "../markdown/views.ts";
 import type { OgCache } from "../og/cache.ts";
 import type { OgFont, OgFontFamilies, OgGoogleFont } from "../og/card.ts";
+import { RATE_LIMIT_BINDING } from "../ratelimit/cloudflare.ts";
+import type { RateLimitAdapter } from "../ratelimit/schema.ts";
 import type { MixedbreadOptions } from "../search/adapters/mixedbread.ts";
 import type {
   ResolvedSearchAdapter,
@@ -188,7 +197,8 @@ export const runtimeDependencies = (options: {
   deps.push(
     ...new Set(config.reference.flatMap((adapter) => adapter.runtimeDeps)),
     ...config.search.provider.runtimeDeps,
-    ...config.analytics.flatMap((adapter) => adapter.runtimeDeps)
+    ...config.analytics.flatMap((adapter) => adapter.runtimeDeps),
+    ...(config.consent?.runtimeDeps ?? [])
   );
   // Each content source adapter declares the SDK its fetch imports (Notion,
   // Sanity); the descriptor is the one place that knows.
@@ -555,17 +565,23 @@ const blumeIntegrationOptions = (options: {
   contentRoutes: string[];
   ejected: boolean;
   pages: BlumePageRoute[];
-}): BlumeIntegrationOptions =>
-  options.ejected
+  redirects: CompiledRedirect[];
+}): BlumeIntegrationOptions => {
+  const shared: BlumeIntegrationOptions = { pages: options.pages };
+  if (options.redirects.length > 0) {
+    shared.redirects = options.redirects;
+  }
+  return options.ejected
     ? {
+        ...shared,
         buildArtifactsRoot: ".",
         contentRoutes: options.contentRoutes,
         homeLinkHeader:
           buildHomeLinkHeader(options.config, options.contentRoutes, "dev") ??
           undefined,
-        pages: options.pages,
       }
-    : { pages: options.pages };
+    : shared;
+};
 
 export const astroConfigTemplate = (options: {
   context: ProjectContext;
@@ -581,6 +597,8 @@ export const astroConfigTemplate = (options: {
   /** The example-preview Tailwind entry (`blume:examples-theme`). */
   examplesThemePath: string;
   themePath: string;
+  /** The configured consent adapter's browser module (`blume:consent-client`). */
+  consentClientPath: string;
   searchClientPath: string;
   /** The generated client-feature loaders (`blume:features`). */
   featuresPath: string;
@@ -617,6 +635,7 @@ export const astroConfigTemplate = (options: {
   );
   const {
     askPath,
+    consentClientPath,
     contentRoutes,
     examplesPath,
     examplesThemePath,
@@ -687,11 +706,17 @@ export const astroConfigTemplate = (options: {
     deployment.options.base ?? "",
     new Set(contentRoutes)
   );
+  // Only exact redirects: Astro can't prerender a pattern's redirect pages
+  // (it would need every path the pattern covers), so a pattern reaches the
+  // dev server through the integration and each host through its own rules.
+  const exactRedirects = basedRedirects.filter(
+    (redirect) => !isPatternPath(redirect.from)
+  );
   const redirectsOption =
-    basedRedirects.length > 0
+    exactRedirects.length > 0
       ? `\n  redirects: ${JSON.stringify(
           Object.fromEntries(
-            basedRedirects.map((redirect) => [
+            exactRedirects.map((redirect) => [
               redirect.from,
               { destination: redirect.to, status: redirect.status },
             ])
@@ -759,12 +784,19 @@ export const astroConfigTemplate = (options: {
   const svelteImport = needsSvelte
     ? `import svelte from "@astrojs/svelte";\n`
     : "";
+  // Content variables in `.mdx` are replaced before the MDX compiler parses
+  // the source, which reads `{{name}}` as a JavaScript expression.
+  const substitutesVariables = hasVariables(config.variables);
+  const variablesPluginEntry = substitutesVariables
+    ? `variablesVitePlugin(${JSON.stringify(config.variables)}), `
+    : "";
   const blumeImports = [
     "blumeIntegration",
     "includeHmrPlugin",
     "prerenderDepsPlugin",
     ...runtimeModuleImports,
     ...(adapterOption.includes("withAdapterRoot") ? ["withAdapterRoot"] : []),
+    ...(substitutesVariables ? ["variablesVitePlugin"] : []),
   ];
   const blumeImport = `import { ${blumeImports.join(", ")} } from "blume/astro";\n`;
 
@@ -794,6 +826,7 @@ export const astroConfigTemplate = (options: {
     deployBase,
     externalLinks: config.markdown.externalLinks,
     headingAnchors: config.markdown.headingAnchors,
+    variables: config.variables,
   });
   const processorOptions =
     options.generatedModulesDir === undefined
@@ -822,6 +855,7 @@ export const astroConfigTemplate = (options: {
         contentRoutes,
         ejected,
         pages,
+        redirects: compileRedirects(basedRedirects),
       })
     )})`
   );
@@ -885,7 +919,7 @@ ${userConfigSetup}export default defineConfig({
   // the overlap only adds memory.
   build: { concurrency: Math.min(8, availableParallelism()) },
   vite: {${viteCacheOption}
-    plugins: [${runtimeModulesPluginEntry}tailwindcss(), includeHmrPlugin(${configPath(
+    plugins: [${runtimeModulesPluginEntry}${variablesPluginEntry}tailwindcss(), includeHmrPlugin(${configPath(
       `${context.outDir}/src/generated/includes.json`,
       ejected
     )}), prerenderDepsPlugin()],
@@ -944,6 +978,7 @@ ${userConfigSetup}export default defineConfig({
     resolve: {
       alias: {
         "blume:ask": ${configPath(askPath, ejected)},
+        "blume:consent-client": ${configPath(consentClientPath, ejected)},
         "blume:examples": ${configPath(examplesPath, ejected)},
         "blume:examples-theme": ${configPath(examplesThemePath, ejected)},
         "blume:features": ${configPath(featuresPath, ejected)},
@@ -1095,12 +1130,21 @@ const ASK_FALLBACK_PROMPT =
 
 /** The `ai.assistant` values the generated endpoint has to carry with it. */
 export interface AskEndpointOptions {
+  /** `ai.assistant.captcha` — the bot check the route verifies first. */
+  captcha?: CaptchaAdapter;
   /** `ai.assistant.cors` — origins allowed to call the route from another site. */
   cors?: string[];
+  /** `rateLimit` — the limiter the route checks before any work. */
+  rateLimit?: RateLimitAdapter | null;
   /** `ai.assistant.instructions` — extra system-prompt text. */
   instructions?: string;
   /** `ai.assistant.retrieval` — how much documentation each question carries. */
   retrieval?: AskRetrievalOptions;
+  /**
+   * `ai.assistant.tools`, resolved against the adapter's default: give the
+   * model the docs search and read-page tools.
+   */
+  tools?: boolean;
 }
 
 /** The pieces `askEndpointTemplate` splices in for `ai.assistant.cors`. */
@@ -1132,7 +1176,7 @@ const askCorsTemplate = (cors: readonly string[] = []): AskCorsTemplate =>
         imports: [
           'import { preflightResponse, withCors } from "blume/ai/cors.ts";',
         ],
-        open: "withCors(ALLOWED_ORIGINS, async ({ request }) => {",
+        open: "withCors(ALLOWED_ORIGINS, async (context) => {",
         setup: `
 const ALLOWED_ORIGINS = ${JSON.stringify(cors)};
 
@@ -1140,7 +1184,89 @@ export const OPTIONS: APIRoute = ({ request }) =>
   preflightResponse(request, ALLOWED_ORIGINS);
 `,
       }
-    : { close: "};", imports: [], open: "async ({ request }) => {", setup: "" };
+    : { close: "};", imports: [], open: "async (context) => {", setup: "" };
+
+/** The pieces a server route splices in to check `rateLimit` first. */
+interface RateLimitTemplate {
+  /** The check at the top of the handler; reads `context`. */
+  check: string;
+  /** The runtime import, plus what the adapter's store needs. */
+  imports: string[];
+  /** The route's limiter, built once at module scope. */
+  setup: string;
+}
+
+/**
+ * `rateLimit` for one server route: a limiter built at module scope from the
+ * configured adapter, checked against every request, keyed by the reader's
+ * address and `scope` so each route keeps its own budget (see
+ * `ratelimit/runtime.ts`). Upstash reads its secrets through `getSecret`;
+ * Cloudflare's binding comes from the Worker's env. Nothing at all when
+ * rate limiting is off.
+ */
+export const rateLimitTemplate = (
+  adapter: RateLimitAdapter | null | undefined,
+  scope: string
+): RateLimitTemplate => {
+  if (!adapter) {
+    return { check: "", imports: [], setup: "" };
+  }
+  const imports = [
+    'import { createLimiter, rateLimited } from "blume/ratelimit/runtime.ts";',
+  ];
+  let runtime = "";
+  if (adapter.kind === "upstash") {
+    imports.push('import { getSecret } from "astro:env/server";');
+    runtime = ", { secret: getSecret }";
+  } else if (adapter.kind === "cloudflare") {
+    imports.push(
+      "// @ts-ignore `cloudflare:workers` is typed once `wrangler types` has run.",
+      'import { env } from "cloudflare:workers";'
+    );
+    runtime = `, { binding: Reflect.get(env, ${JSON.stringify(RATE_LIMIT_BINDING)}) }`;
+  }
+  return {
+    check: `  const limited = await rateLimited(limiter, context, ${JSON.stringify(scope)});
+  if (limited) {
+    return limited;
+  }
+`,
+    imports,
+    setup: `\nconst limiter = createLimiter(${JSON.stringify(adapter)}${runtime});\n`,
+  };
+};
+
+/**
+ * `ai.assistant.captcha` for the ask route: verify the question's token with
+ * the provider before the model runs (see `captcha/verify.ts`). A missing
+ * secret answers with the same "not configured" notice as a missing
+ * provider key, which the panel shows as is; a failed check answers `403`.
+ */
+const askCaptchaTemplate = (adapter?: CaptchaAdapter): RateLimitTemplate => {
+  if (!adapter) {
+    return { check: "", imports: [], setup: "" };
+  }
+  const [secret = ""] = adapter.requiredSecrets;
+  return {
+    check: `  const captchaSecret = getSecret(${JSON.stringify(secret)});
+  if (!captchaSecret) {
+    return new Response(
+      ${JSON.stringify(`The assistant is not configured: set ${secret}.`)},
+      { status: 503 }
+    );
+  }
+  const captchaToken =
+    typeof body.captcha === "string" ? body.captcha : undefined;
+  if (!(await verifyCaptcha(CAPTCHA, captchaToken, context, { secret: captchaSecret }))) {
+    return new Response("Verification failed: the bot check didn't pass.", {
+      status: 403,
+    });
+  }
+`,
+    imports: ['import { verifyCaptcha } from "blume/captcha/verify.ts";'],
+    setup: `\nconst CAPTCHA = ${JSON.stringify(adapter)};\n`,
+  };
+};
 
 /**
  * Largest request body the assistant route reads: 64 KB, well above the
@@ -1174,6 +1300,8 @@ export const askEndpointTemplate = (
 ): string => {
   const { instructions, retrieval } = options ?? {};
   const { grounded } = backend;
+  // The tools read the grounding snapshot, so an ungrounded backend has none.
+  const tools = grounded && Boolean(options?.tools);
   const fallbackPrompt = instructions
     ? `${ASK_FALLBACK_PROMPT}\n\n${instructions}`
     : ASK_FALLBACK_PROMPT;
@@ -1201,12 +1329,32 @@ export const askEndpointTemplate = (
     if (retrieval) {
       groundFields.push(`retrieval: ${JSON.stringify(retrieval)}`);
     }
+    if (tools) {
+      groundFields.push("tools: true");
+    }
     const groundOptions =
       groundFields.length > 0 ? `, { ${groundFields.join(", ")} }` : "";
     setup += `\nconst ground = createAskContext(askData${groundOptions});\n`;
+    if (tools) {
+      imports.push(
+        'import { stepCountIs } from "ai";',
+        'import { ASK_MAX_STEPS, createAskTools } from "blume/ai/ask-tools.ts";'
+      );
+      setup += "const askTools = createAskTools(askData);\n";
+    }
   }
   const cors = askCorsTemplate(options?.cors);
   imports.push(...cors.imports);
+  const limit = rateLimitTemplate(options?.rateLimit, "ask");
+  for (const line of limit.imports) {
+    if (!imports.includes(line)) {
+      imports.push(line);
+    }
+  }
+  setup += limit.setup;
+  const captcha = askCaptchaTemplate(options?.captcha);
+  imports.push(...captcha.imports);
+  setup += captcha.setup;
   // Validate the client-supplied body and cap its size. The endpoint is
   // unauthenticated, so bounding message count/length limits how much a caller
   // can spend against the model per request, and restricting roles to
@@ -1215,7 +1363,8 @@ export const askEndpointTemplate = (
   // limiter (or your provider's limits) for stronger protection. The body is
   // read under a 64 KB cap before any parsing, since a self-hosted Node server
   // would otherwise buffer an arbitrarily large POST in memory first.
-  const validate = `  const text = await readCappedText(request, ${ASK_BODY_LIMIT_BYTES});
+  const validate = `  const { request } = context;
+${limit.check}  const text = await readCappedText(request, ${ASK_BODY_LIMIT_BYTES});
   if (text === undefined) {
     return new Response("Request too large: the body must be at most 64 KB.", {
       status: 413,
@@ -1273,6 +1422,11 @@ export const askEndpointTemplate = (
       ? "instructions"
       : `instructions:\n        ${JSON.stringify(fallbackPrompt)}`,
     "messages",
+    // The model may search and read pages, then answer, within one request:
+    // tool calls run here on the server and only the text reaches the reader.
+    ...(tools
+      ? ["tools: askTools(body.page)", "stopWhen: stepCountIs(ASK_MAX_STEPS)"]
+      : []),
     ...backend.template.fields,
   ];
   // The request's signal aborts when the reader closes the panel mid-answer
@@ -1294,7 +1448,7 @@ ${call}`
   const handler = `export const POST: APIRoute = ${cors.open}
 ${validate}
 ${keyCheck}
-  try {
+${captcha.check}  try {
 ${stream}
     return createTextStreamResponse({
       stream: toTextStream({ stream: result.stream }),
@@ -1339,9 +1493,11 @@ const { strings } = Astro.props;
 ---
 
 <Assistant
+  captcha={data.config.assistant?.captcha ?? undefined}
   endpoint={data.config.assistant?.endpoint ?? undefined}
   strings={strings ?? data.ui.assistant}
   suggestions={data.config.assistant?.suggestions ?? []}
+  support={data.config.assistant?.support ?? undefined}
 />
 `
     : `---
@@ -1441,6 +1597,36 @@ ${
 }
 `;
 
+/**
+ * Generate `.blume/src/generated/consent-client.ts`, behind the
+ * `blume:consent-client` alias: the configured consent adapter's browser
+ * module (see `consent/clients.ts`), started by `ConsentHead.astro` with the
+ * adapter's options baked in. Only that adapter's module is referenced, so a
+ * site bundles no other adapter's code. An adapter without one (a hosted
+ * manager), or no `consent` at all, gets a no-op so the alias always resolves.
+ */
+export const consentClientTemplate = (
+  consent: ResolvedConfig["consent"]
+): string => {
+  const module = consent ? CONSENT_CLIENT_MODULES.get(consent.kind) : undefined;
+  if (!(consent && module)) {
+    return `// Generated by Blume. Do not edit.
+// The consent adapter has no browser module, or consent is off.
+export const startConsentClient = (): void => {};
+`;
+  }
+  return `// Generated by Blume. Do not edit.
+// The \`${consent.kind}\` consent adapter's browser module, with its options.
+import { start } from ${JSON.stringify(module)};
+
+export const startConsentClient = (
+  consent: Parameters<typeof start>[0]
+): void => {
+  start(consent, ${JSON.stringify(consent.options)});
+};
+`;
+};
+
 /**
  * Generate `.blume/src/generated/search-client.ts` — the provider-specific
  * loader the `<Search>` component lazy-imports via the `blume:search-client`
@@ -1493,13 +1679,19 @@ export const createSearch = () => create({ url });
  * content was synced (see the Mixedbread sync step / \`mxbai vs sync\`).
  */
 export const mixedbreadSearchEndpointTemplate = (
-  options: MixedbreadOptions
-): string =>
-  `// Generated by Blume. Do not edit.
-import type { APIRoute } from "astro";
-import { getSecret } from "astro:env/server";
-import Mixedbread from "@mixedbread/sdk";
-import { readCappedText } from "blume/core/request-body.ts";
+  options: MixedbreadOptions,
+  rateLimit?: RateLimitAdapter | null
+): string => {
+  const limit = rateLimitTemplate(rateLimit, "search");
+  const imports = [
+    'import type { APIRoute } from "astro";',
+    'import { getSecret } from "astro:env/server";',
+    'import Mixedbread from "@mixedbread/sdk";',
+    'import { readCappedText } from "blume/core/request-body.ts";',
+    ...limit.imports.filter((line) => !line.includes('"astro:env/server"')),
+  ];
+  return `// Generated by Blume. Do not edit.
+${imports.join("\n")}
 
 export const prerender = false;
 
@@ -1507,9 +1699,10 @@ const client = new Mixedbread({ apiKey: getSecret("MIXEDBREAD_API_KEY") ?? "" })
 const OPTIONS = ${JSON.stringify(options)};
 // Every option besides the store reaches the search call verbatim.
 const { storeId: STORE_ID, ...SEARCH_OPTIONS } = OPTIONS;
-
-export const POST: APIRoute = async ({ request }) => {
-  // A search body is one short query: read it under a 16 KB cap, so a
+${limit.setup}
+export const POST: APIRoute = async (context) => {
+  const { request } = context;
+${limit.check}  // A search body is one short query: read it under a 16 KB cap, so a
   // self-hosted server never buffers an arbitrarily large POST first.
   const text = await readCappedText(request, 16_384);
   if (text === undefined) {
@@ -1554,6 +1747,7 @@ export const POST: APIRoute = async ({ request }) => {
   });
 };
 `;
+};
 
 /**
  * Generate the raw-Markdown endpoints (`[...slug].md.ts` and `[...slug].mdx.ts`).
@@ -1756,17 +1950,26 @@ export const ALL: APIRoute = ({ request }) => handler(request);
  * client-side data: that is the whole trust boundary keeping the endpoint from
  * being an open proxy onto the deployment's own network.
  */
-export const playgroundProxyTemplate = (origins: string[]): string =>
-  `// Generated by Blume. Do not edit.
-import type { APIRoute } from "astro";
-import { createPlaygroundProxyHandler } from "blume/openapi/proxy.ts";
+export const playgroundProxyTemplate = (
+  origins: string[],
+  rateLimit?: RateLimitAdapter | null
+): string => {
+  const limit = rateLimitTemplate(rateLimit, "api-proxy");
+  const route = limit.check
+    ? `export const ALL: APIRoute = async (context) => {
+${limit.check}  return handler(context.request);
+};`
+    : "export const ALL: APIRoute = ({ request }) => handler(request);";
+  return `// Generated by Blume. Do not edit.
+${['import type { APIRoute } from "astro";', 'import { createPlaygroundProxyHandler } from "blume/openapi/proxy.ts";', ...limit.imports].join("\n")}
 
 export const prerender = false;
 
 const handler = createPlaygroundProxyHandler(${JSON.stringify(origins)});
-
-export const ALL: APIRoute = ({ request }) => handler(request);
+${limit.setup}
+${route}
 `;
+};
 
 /** Generate a prerendered endpoint that serves a fixed JSON payload. */
 export const staticJsonEndpointTemplate = <Payload extends object>(
@@ -2090,6 +2293,9 @@ const contentComponentsSource = (mathEnabled: boolean) => {
   return {
     imports: `import Accordion from "blume/components/content/Accordion.astro";
 import AccordionItem from "blume/components/content/AccordionItem.astro";
+import ApiEndpoint from "blume/components/content/ApiEndpoint.astro";
+import ApiPlayground from "blume/components/content/ApiPlayground.astro";
+import ApiRail from "blume/components/content/ApiRail.astro";
 import AutoTypeTable from "blume/components/content/AutoTypeTable.astro";
 import Badge from "blume/components/content/Badge.astro";
 import Callout from "blume/components/content/Callout.astro";
@@ -2109,7 +2315,11 @@ import FileTree from "blume/components/content/FileTree.astro";
 import Frame from "blume/components/content/Frame.astro";
 import GithubInfo from "blume/components/content/GithubInfo.astro";
 import Panel from "blume/components/content/Panel.astro";
+import ParamField from "blume/components/content/ParamField.astro";
 import Prompt from "blume/components/content/Prompt.astro";
+import RequestExample from "blume/components/content/RequestExample.astro";
+import ResponseExample from "blume/components/content/ResponseExample.astro";
+import ResponseField from "blume/components/content/ResponseField.astro";
 import Step from "blume/components/content/Step.astro";
 import Steps from "blume/components/content/Steps.astro";
 import Tab from "blume/components/content/Tab.astro";
@@ -2120,10 +2330,13 @@ import TreeRoot from "blume/components/content/Tree.astro";
 import TreeFile from "blume/components/content/TreeFile.astro";
 import TreeFolder from "blume/components/content/TreeFolder.astro";
 import TypeTable from "blume/components/content/TypeTable.astro";
+import View from "blume/components/content/View.astro";
 import Visibility from "blume/components/content/Visibility.astro";
 import YouTube from "blume/components/content/YouTube.astro";
 import Icon from "blume/components/Icon.astro";
 import LocaleLinks from "blume/components/layout/LocaleLinks.astro";
+import NarrationPlayer from "blume/components/layout/NarrationPlayer.astro";
+import ViewSwitcher from "blume/components/content/ViewSwitcher.astro";
 import ApiOverview from "blume/components/openapi/ApiOverview.astro";
 import ApiTagOperations from "blume/components/openapi/ApiTagOperations.astro";
 import Operation from "blume/components/openapi/Operation.astro";
@@ -2131,7 +2344,10 @@ ${mathImport}import { mdxComponents as userMdx, layoutOverrides } from "../gener
     map: `{
   Accordion,
   AccordionItem,
+  ApiEndpoint,
   ApiOverview,
+  ApiPlayground,
+  ApiRail,
   ApiTagOperations,
   AutoTypeTable,
   Badge,
@@ -2152,7 +2368,11 @@ ${mathImport}import { mdxComponents as userMdx, layoutOverrides } from "../gener
   Icon,
   Operation,
   Panel,
+  ParamField,
   Prompt,
+  RequestExample,
+  ResponseExample,
+  ResponseField,
   Step,
   Steps,
   Tab,
@@ -2161,6 +2381,7 @@ ${mathImport}import { mdxComponents as userMdx, layoutOverrides } from "../gener
   Tooltip,
   Tree,
   TypeTable,
+  View,
   Visibility,
   YouTube,
   ${mathEntry}...userMdx,
@@ -2191,6 +2412,7 @@ export const catchAllPageTemplate = (options: {
   return `---
 // Generated by Blume. Do not edit.
 import { getEntry, render } from "astro:content";
+import { pageModeLayout } from "blume/core/page-modes.ts";
 import type { CollectionKey } from "astro:content";
 import RootLayout from "blume/components/layout/RootLayout.astro";
 import { withBase, withMountedBase } from "blume/components/islands/base-path.ts";
@@ -2242,6 +2464,13 @@ const { Content, headings: allHeadings, remarkPluginFrontmatter } = await render
 // frontmatter (see markdown/heading-anchors.ts). Only the plugin's array
 // counts: \`frontmatter.extend\` can declare the same key, and on a page with
 // no headings that user-supplied value would pass straight through.
+// A page written in \`<View>\` blocks gets their picker above the content;
+// the views plugin lists them through the render's frontmatter (see
+// markdown/views.ts), and only a list of titled entries counts.
+const viewsRaw = remarkPluginFrontmatter?.${VIEWS_KEY};
+const views = Array.isArray(viewsRaw)
+  ? viewsRaw.filter((view) => typeof view?.title === "string")
+  : [];
 const tocHiddenRaw = remarkPluginFrontmatter?.${TOC_HIDDEN_KEY};
 const tocHidden = new Set(Array.isArray(tocHiddenRaw) ? tocHiddenRaw : []);
 const headings =
@@ -2320,6 +2549,14 @@ const htmlLang = i18n ? locale : "en";
 // follows that language — not the (mirrored) page locale.
 const contentLocale =
   fallback && i18n?.fallbackLocale ? i18n.fallbackLocale : locale;
+// "Listen to this page", unless the page opts out. The spoken cues are read
+// between the content's own sentences, so they come from the content's
+// language (a fallback page's), while the player's labels follow the page.
+// A \`custom\` or \`frame\` page brings its own heading: no title, description,
+// or narration player above its content.
+const pageChrome = pageModeLayout(frontmatter.mode).chrome;
+const narration = pageChrome && frontmatter.narration ? data.config.narration : null;
+const narrationCues = (i18n ? (data.uiByLocale[contentLocale] ?? data.ui) : data.ui).narration;
 const contentDir = i18n
   ? (i18n.locales.find((l) => l.code === contentLocale)?.dir ?? "ltr")
   : "ltr";
@@ -2503,6 +2740,10 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
   canonical={canonical}
   editUrl={editUrl}
   feedback={data.config.feedback}
+  feedbackComments={data.config.feedbackComments}
+  pagination={frontmatter.pagination}
+  related={frontmatter.related}
+  search={frontmatter.search}
   exportPdf={${options.exportPdf}}
   exportEpub={${options.exportEpub}}${
     options.navFragments
@@ -2515,13 +2756,25 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
   discovery={data.config.discovery}
   siteUrl={data.config.site}
   pageType={frontmatter.type}
+  apiRail={remarkPluginFrontmatter?.${API_RAIL_KEY} === true}
+  pageMode={frontmatter.mode}
   published={frontmatter.date ?? frontmatter.changelog?.date ?? null}
   lastModified={lastModified}
   noindex={effectiveNoindex}
   structuredDataEnabled={data.config.structuredData}
 >
-  <h1>{title}</h1>
-  {frontmatter.description && <p class="text-lg text-muted-foreground">{frontmatter.description}</p>}
+  {pageChrome && <h1>{title}</h1>}
+  {pageChrome && frontmatter.description && <p class="text-lg text-muted-foreground">{frontmatter.description}</p>}
+  {narration && (
+    <NarrationPlayer
+      audioBase={narration.generated ? withMountedBase("/blume-narration/audio/") : undefined}
+      cues={narrationCues}
+      lang={i18n ? contentLocale : htmlLang}
+      manifest={narration.generated ? withMountedBase(encodeURI(\`/blume-narration/\${route === "/" ? "index" : route.slice(1)}.json\`)) : undefined}
+      strings={ui.narration}
+    />
+  )}
+  {views.length > 1 && <ViewSwitcher label={ui.content.selectView} views={views} />}
   <LocaleLinks locale={locale}>
     <Content components={components} />
   </LocaleLinks>

package/src/astro/variables.ts

@@ -0,0 +1,31 @@
+import { substituteVariables } from "../core/variables.ts";
+import type { ContentVariables } from "../core/variables.ts";
+
+/**
+ * The MDX half of content variables (see `core/variables.ts`): a Vite plugin
+ * that replaces `{{name}}` in an `.mdx` module's source before the MDX
+ * compiler reads it. It has to run first: the compiler parses `{{version}}`
+ * as a JavaScript expression (a `ReferenceError` at render) and rejects
+ * `{{api-url}}` outright, so no plugin after parsing could see either.
+ */
+/** The Vite plugin slice this needs (structurally typed, like Blume's other plugins). */
+export interface VariablesVitePlugin {
+  enforce: "pre";
+  name: string;
+  transform: (code: string, id: string) => { code: string; map: null } | null;
+}
+
+export const variablesVitePlugin = (
+  variables: ContentVariables
+): VariablesVitePlugin => ({
+  enforce: "pre",
+  name: "blume:variables",
+  transform(code, id) {
+    const [path = ""] = id.split("?");
+    if (!path.endsWith(".mdx")) {
+      return null;
+    }
+    const next = substituteVariables(code, variables);
+    return next === code ? null : { code: next, map: null };
+  },
+});

package/src/audit/catalog.ts

@@ -498,6 +498,25 @@ export const CHECKS = [
     title: "Hreflang group has a language conflict",
   },
 
+  // Accessibility. Theme colors are one per site, not per page: these run
+  // on the config, the way the build resolves it.
+  {
+    category: "accessibility",
+    fix: "Pick a darker shade for light mode or a lighter one for dark mode, per mode with `theme.accent: { light, dark }`.",
+    id: "BLUME_AUDIT_THEME_CONTRAST_LOW",
+    severity: "warning",
+    tier: "static",
+    title: "Theme colors miss WCAG AA contrast",
+  },
+  {
+    category: "accessibility",
+    fix: "Write the color as hex, `rgb()`, `hsl()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, or a named color so its contrast can be checked.",
+    id: "BLUME_AUDIT_THEME_COLOR_UNCHECKED",
+    severity: "info",
+    tier: "static",
+    title: "Theme color can't be checked for contrast",
+  },
+
   // Assets
   {
     category: "assets",