radiant-docs 0.1.34 → 0.1.38

package/template/package.json

@@ -6,10 +6,10 @@
     "dev": "astro dev",
     "start": "tsx runner.ts",
     "prebuild": "rm -rf public/pagefind",
-    "build": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/rewrite-static-asset-host.mjs",
+    "build": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/generate-proxy-allowed-origins.mjs && node scripts/generate-robots-txt.mjs",
     "preview": "astro preview",
     "astro": "astro",
-    "search:index": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/rewrite-static-asset-host.mjs && cp -r dist/pagefind public/"
+    "search:index": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/generate-proxy-allowed-origins.mjs && node scripts/generate-robots-txt.mjs && cp -r dist/pagefind public/"
   },
   "dependencies": {
     "@alpinejs/collapse": "^3.15.2",
@@ -18,6 +18,7 @@
     "@astrojs/alpinejs": "^0.4.9",
     "@astrojs/mdx": "^4.3.12",
     "@astrojs/preact": "^4.1.3",
+    "@astrojs/sitemap": "^3.7.2",
     "@aws-sdk/client-s3": "^3.964.0",
     "@fontsource/google-sans-flex": "^5.2.2",
     "@iconify-json/lucide": "^1.2.79",

package/template/scripts/generate-proxy-allowed-origins.mjs

@@ -0,0 +1,217 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import YAML from "yaml";
+
+const CWD = process.cwd();
+const DOCS_DIR = path.join(CWD, "src/content/docs");
+const DOCS_CONFIG_PATH = path.join(DOCS_DIR, "docs.json");
+const OUTPUT_DIR = path.join(CWD, ".radiant");
+const OUTPUT_FILE = path.join(OUTPUT_DIR, "proxy-allowed-origins.json");
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+
+function isHttpUrl(value) {
+  return /^https?:\/\//i.test(String(value).trim());
+}
+
+function collectOpenApiSourcesFromNavigation(navigationNode, target) {
+  if (!isRecord(navigationNode)) {
+    return;
+  }
+
+  const openApiConfig = navigationNode.openapi;
+  if (typeof openApiConfig === "string") {
+    const trimmed = openApiConfig.trim();
+    if (trimmed) {
+      target.add(trimmed);
+    }
+  } else if (
+    isRecord(openApiConfig) &&
+    typeof openApiConfig.source === "string"
+  ) {
+    const trimmed = openApiConfig.source.trim();
+    if (trimmed) {
+      target.add(trimmed);
+    }
+  }
+
+  const menu = navigationNode.menu;
+  if (!isRecord(menu) || !Array.isArray(menu.items)) {
+    return;
+  }
+
+  for (const menuItem of menu.items) {
+    if (!isRecord(menuItem) || !isRecord(menuItem.submenu)) {
+      continue;
+    }
+    collectOpenApiSourcesFromNavigation(menuItem.submenu, target);
+  }
+}
+
+function resolveServerTemplateUrl(rawUrl, rawVariables) {
+  let unresolved = false;
+  const variables = isRecord(rawVariables) ? rawVariables : null;
+
+  const resolved = rawUrl.replace(/\{([^}]+)\}/g, (_match, tokenName) => {
+    if (!variables) {
+      unresolved = true;
+      return "";
+    }
+
+    const variableConfig = variables[tokenName];
+    if (
+      !isRecord(variableConfig) ||
+      typeof variableConfig.default !== "string"
+    ) {
+      unresolved = true;
+      return "";
+    }
+
+    const defaultValue = variableConfig.default.trim();
+    if (!defaultValue) {
+      unresolved = true;
+      return "";
+    }
+
+    return defaultValue;
+  });
+
+  if (unresolved) {
+    return null;
+  }
+
+  return resolved;
+}
+
+function normalizeAllowedOrigin(rawUrl) {
+  let parsed;
+  try {
+    parsed = new URL(rawUrl);
+  } catch {
+    return null;
+  }
+
+  if (parsed.protocol !== "https:") {
+    return null;
+  }
+
+  if (!parsed.hostname || parsed.username || parsed.password) {
+    return null;
+  }
+
+  return parsed.origin.toLowerCase();
+}
+
+async function loadOpenApiSpec(source) {
+  let fileContent;
+
+  if (isHttpUrl(source)) {
+    const response = await fetch(source);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch OpenAPI spec (${response.status} ${response.statusText})`,
+      );
+    }
+    fileContent = await response.text();
+  } else {
+    const absolutePath = path.join(DOCS_DIR, source);
+    fileContent = await fs.readFile(absolutePath, "utf8");
+  }
+
+  const trimmed = fileContent.trim();
+  if (trimmed.startsWith("<!DOCTYPE") || trimmed.startsWith("<html")) {
+    throw new Error("OpenAPI source returned HTML instead of JSON or YAML");
+  }
+
+  try {
+    return JSON.parse(fileContent);
+  } catch {
+    return YAML.parse(fileContent);
+  }
+}
+
+async function buildAllowedOrigins() {
+  const docsConfigRaw = await fs.readFile(DOCS_CONFIG_PATH, "utf8");
+  const docsConfig = JSON.parse(docsConfigRaw);
+
+  if (!isRecord(docsConfig) || !isRecord(docsConfig.navigation)) {
+    return [];
+  }
+
+  const sources = new Set();
+  collectOpenApiSourcesFromNavigation(docsConfig.navigation, sources);
+  if (sources.size === 0) {
+    return [];
+  }
+
+  const allowedOrigins = new Set();
+
+  for (const source of sources) {
+    try {
+      const spec = await loadOpenApiSpec(source);
+      const servers =
+        isRecord(spec) && Array.isArray(spec.servers) ? spec.servers : [];
+
+      for (const server of servers) {
+        if (!isRecord(server) || typeof server.url !== "string") {
+          continue;
+        }
+
+        const resolvedUrl = resolveServerTemplateUrl(
+          server.url,
+          server.variables,
+        );
+        if (!resolvedUrl) {
+          continue;
+        }
+
+        const normalizedOrigin = normalizeAllowedOrigin(resolvedUrl);
+        if (normalizedOrigin) {
+          allowedOrigins.add(normalizedOrigin);
+        }
+      }
+    } catch (error) {
+      console.warn(
+        `⚠️ Failed to extract OpenAPI server origins from "${source}":`,
+        error instanceof Error ? error.message : String(error),
+      );
+    }
+  }
+
+  return Array.from(allowedOrigins).sort();
+}
+
+async function run() {
+  let allowedOrigins = [];
+
+  try {
+    allowedOrigins = await buildAllowedOrigins();
+  } catch (error) {
+    console.warn(
+      "⚠️ Failed to generate proxy allowed origins. Falling back to empty allowlist.",
+      error instanceof Error ? error.message : String(error),
+    );
+    allowedOrigins = [];
+  }
+
+  await fs.mkdir(OUTPUT_DIR, { recursive: true });
+  await fs.writeFile(
+    OUTPUT_FILE,
+    `${JSON.stringify(allowedOrigins, null, 2)}\n`,
+    "utf8",
+  );
+
+  console.log(
+    `✅ Wrote ${allowedOrigins.length} proxy allowed origins to ${path.relative(CWD, OUTPUT_FILE)}`,
+  );
+}
+
+run().catch((error) => {
+  console.error(
+    "❌ Failed to write proxy allowed origins manifest:",
+    error instanceof Error ? error.message : String(error),
+  );
+  process.exit(1);
+});

package/template/scripts/generate-robots-txt.mjs

@@ -0,0 +1,19 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const CWD = process.cwd();
+const DIST_DIR = path.join(CWD, "dist");
+const ROBOTS_TXT_PATH = path.join(DIST_DIR, "robots.txt");
+
+function main() {
+  if (!fs.existsSync(DIST_DIR)) {
+    console.log("Skipping robots.txt generation: dist directory not found.");
+    return;
+  }
+
+  const robotsTxt = "User-agent: *\nAllow: /\nSitemap: /sitemap-index.xml\n";
+  fs.writeFileSync(ROBOTS_TXT_PATH, robotsTxt, "utf8");
+  console.log("✅ robots.txt generated.");
+}
+
+main();

package/template/scripts/stamp-image-versions.mjs

@@ -6,6 +6,28 @@ const CWD = process.cwd();
 const DIST_DIR = path.join(CWD, "dist");
 const VERSION_LENGTH = 12;
 const DIST_ROOT = path.resolve(DIST_DIR);
+const CONFIGURED_STATIC_HOST = (() => {
+  const raw =
+    typeof process.env.STATIC_ASSET_HOST === "string"
+      ? process.env.STATIC_ASSET_HOST.trim()
+      : "";
+  if (!raw) return null;
+  const withScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(raw)
+    ? raw
+    : `https://${raw}`;
+
+  try {
+    const parsed = new URL(withScheme);
+    return parsed.hostname.toLowerCase();
+  } catch {
+    return null;
+  }
+})();
+const CONFIGURED_PREFIX =
+  typeof process.env.R2_BUCKET_PREFIX === "string" &&
+  process.env.R2_BUCKET_PREFIX.trim().length > 0
+    ? process.env.R2_BUCKET_PREFIX.trim().replace(/^\/+|\/+$/g, "")
+    : null;
 const VERSIONED_EXTENSIONS = new Set([
   ".avif",
   ".gif",
@@ -76,6 +98,24 @@ function getHash(filePath) {
   return hash;
 }
 
+function normalizePathForDistLookup(pathname) {
+  const normalizedPathname = path.posix.normalize(pathname);
+  if (!CONFIGURED_PREFIX) {
+    return normalizedPathname;
+  }
+
+  const prefix = `/${CONFIGURED_PREFIX}`;
+  if (
+    normalizedPathname === prefix ||
+    normalizedPathname.startsWith(`${prefix}/`)
+  ) {
+    const stripped = normalizedPathname.slice(prefix.length);
+    return stripped.startsWith("/") ? stripped : `/${stripped}`;
+  }
+
+  return normalizedPathname;
+}
+
 function resolveLocalImagePath(urlValue, filePath) {
   const trimmed = urlValue.trim();
   if (!trimmed) return null;
@@ -91,11 +131,6 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
-  // Ignore fully-qualified URLs.
-  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded)) {
-    return null;
-  }
-
   let parsed;
   try {
     parsed = new URL(decoded, `https://radiant.invalid${htmlBasePathname(filePath)}`);
@@ -103,13 +138,27 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
+  const isAbsoluteUrl = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded);
+  if (isAbsoluteUrl) {
+    if (!CONFIGURED_STATIC_HOST) {
+      return null;
+    }
+
+    if (parsed.protocol !== "https:") {
+      return null;
+    }
+
+    if (parsed.hostname.toLowerCase() !== CONFIGURED_STATIC_HOST) {
+      return null;
+    }
+  }
+
   const extension = path.extname(parsed.pathname).toLowerCase();
   if (!VERSIONED_EXTENSIONS.has(extension)) {
     return null;
   }
 
-  const normalizedPathname = path.posix
-    .normalize(parsed.pathname)
+  const normalizedPathname = normalizePathForDistLookup(parsed.pathname)
     .replace(/^\/+/, "");
   const absolutePath = path.resolve(DIST_DIR, normalizedPathname);
 
@@ -124,12 +173,15 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
-  return { parsed, absolutePath };
+  return { parsed, absolutePath, isAbsoluteUrl };
 }
 
-function formatUpdatedUrl(parsed) {
+function formatUpdatedUrl(parsed, isAbsoluteUrl) {
   const pathnameWithParams = `${parsed.pathname}${parsed.search}${parsed.hash}`;
-  return pathnameWithParams.replace(/&/g, "&");
+  const fullValue = isAbsoluteUrl
+    ? `${parsed.origin}${pathnameWithParams}`
+    : pathnameWithParams;
+  return fullValue.replace(/&/g, "&");
 }
 
 function stampSingleUrl(urlValue, filePath) {
@@ -141,7 +193,7 @@ function stampSingleUrl(urlValue, filePath) {
   const version = getHash(resolved.absolutePath);
   resolved.parsed.searchParams.set("v", version);
 
-  const updated = formatUpdatedUrl(resolved.parsed);
+  const updated = formatUpdatedUrl(resolved.parsed, resolved.isAbsoluteUrl);
   return { value: updated, changed: updated !== urlValue };
 }
 

package/template/src/components/Footer.astro

@@ -91,7 +91,7 @@ const socialIcons: Record<string, string> = {
     href="https://radiant.io"
     class:list={[
       "group flex items-center gap-1.5 text-[13px] text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors duration-200",
-      askAiEnabled && "sm:pr-16",
+      askAiEnabled && "sm:pr-13",
     ]}
   >
     Built with <span

package/template/src/components/Header.astro

@@ -15,9 +15,9 @@ const config = await getConfig();
 
 <header
   class:list={[
-    "fixed z-30 top-1 inset-x-1 shadow-[0px_-20px_0px_20px_var(--color-neutral-100)] h-16 border-x border-t border-border rounded-t-2xl overflow-hidden border-b bg-background border-b-border-light",
+    "fixed z-30 top-1 inset-x-1 shadow-[0px_-20px_0px_20px_var(--background-dark)] h-16 border-x border-t border-border rounded-t-2xl overflow-hidden border-b bg-background border-b-border-light",
     config.navbar?.blur &&
-      "sm:bg-background/80 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:bg-clip-padding",
+      "sm:bg-background/80 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:dark:border-neutral-800/85 sm:bg-clip-padding",
   ]}
   data-pagefind-ignore
   data-vaul-scale-chrome
@@ -34,12 +34,12 @@ const config = await getConfig();
             x-bind:class="open ? 'rotate-90': ''"
           >
             <div
-              class="w-[14px] h-0.5 bg-neutral-900 rounded-full origin-[20%_50%] transition"
+              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
               x-bind:class="open ? 'rotate-45': ''"
             >
             </div>
             <div
-              class="w-[14px] h-0.5 bg-neutral-900 rounded-full origin-[20%_50%] transition"
+              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
               x-bind:class="open ? '-rotate-45': ''"
             >
             </div>
@@ -58,14 +58,14 @@ const config = await getConfig();
             showAskAiTrigger ? (
               <button
                 type="button"
-                class="hidden md:inline-flex items-center gap-1.5 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-xs text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
+                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 dark:from-neutral-100 to-neutral-900 dark:to-neutral-200 px-3 text-[13px] font-[350] dark:font-medium text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
                 onclick="window.dispatchEvent(new CustomEvent('ask-ai:open'));"
               >
                 <img
                   src={sparkleIcon}
                   alt=""
                   aria-hidden="true"
-                  class="size-3 invert dark:invert-0"
+                  class="size-3 -ml-px invert dark:invert-0"
                 />
                 Ask AI
               </button>
@@ -87,7 +87,7 @@ const config = await getConfig();
                   {config.navbar.links.map((l, i, a) => (
                     <a
                       class:list={[
-                        "items-center gap-1 text-[13px] font-[450] text-neutral-600/85 hover:text-neutral-600 duration-200 px-1.5 py-[5px] whitespace-nowrap",
+                        "items-center gap-1 text-[13px] font-[450] dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
                         showAskAiTrigger && a.length === 3 && i === 2
                           ? "hidden 2xl:flex"
                           : "flex",
@@ -110,7 +110,7 @@ const config = await getConfig();
               {config.navbar.secondary && (
                 <a
                   class:list={[
-                    "h-[33px] items-center gap-1.5 px-3 text-[13px] bg-white/90 text-neutral-600/85 hover:text-neutral-600 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 shadow-xs hover:shadow-sm. transition-all whitespace-nowrap",
+                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 dark:bg-neutral-800/80 text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 dark:border-neutral-700/40 shadow-xs transition-all whitespace-nowrap",
                     config.navbar.primary ? "hidden lg:flex" : "flex",
                   ]}
                   href={config.navbar.secondary.href}
@@ -129,7 +129,7 @@ const config = await getConfig();
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 text-white duration-200 shadow-sm transition-all whitespace-nowrap",
+                    "font-[350] dark:font-[450] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 text-white dark:text-neutral-950 duration-200 shadow-sm transition-all whitespace-nowrap",
                   ]}
                   href={config.navbar.primary.href}
                 >

package/template/src/components/LogoLink.astro

@@ -1,5 +1,6 @@
 ---
 import { getConfig, type LogoVariant } from "../lib/validation";
+import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 
 const config = await getConfig();
 
@@ -12,7 +13,7 @@ function getLogoUrl(logoPath: string | undefined): string | null {
     : logoPath;
 
   // Return public URL - Vite plugin ensures file exists in public
-  return `/${normalizedPath}`;
+  return resolveStaticAssetUrl(`/${normalizedPath}`);
 }
 
 function resolveLogoVariant(

package/template/src/components/OpenApiPage.astro

@@ -908,7 +908,7 @@ const formattedBodyDescription = bodyDescription
         {
           formattedDescription && (
             <div
-              class="mb-6 prose-rules text-neutral-500 **:text-neutral-500"
+              class="mb-6 prose-rules text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
               set:html={formattedDescription}
             />
           )
@@ -952,31 +952,31 @@ const formattedBodyDescription = bodyDescription
                   <h4 class="text-xl font-semibold">{headers[key]}</h4>
                   {key === "body" && formattedBodyDescription && (
                     <div
-                      class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500"
+                      class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
                       set:html={formattedBodyDescription}
                     />
                   )}
                   {hasCommonFields && (
                     <div x-data="{ expanded: false }" class="mt-4">
                       <div
-                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200"
-                        x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                        x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
                       >
                         <button
                           type="button"
                           x-on:click="expanded = !expanded"
                           x-bind:aria-expanded="expanded"
-                          class="group flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                          class="group flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                         >
                           <span class="inline-flex items-center gap-2">
-                            <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                            <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                             <span>
                               {sectionFields.length} {noun}
                             </span>
                           </span>
                         </button>
                         <div x-show="expanded" x-collapse x-cloak>
-                          <div class="border-t border-neutral-100 p-4">
+                          <div class="border-t border-neutral-100 p-4 dark:border-neutral-800">
                             <ResponseFieldTree fields={sectionFields} />
                           </div>
                         </div>
@@ -990,30 +990,30 @@ const formattedBodyDescription = bodyDescription
                         hasCommonFields ? "mt-3" : "mt-4",
                       ]}
                     >
-                      <p class="text-xs text-neutral-500">
+                      <p class="text-xs text-neutral-500 dark:text-neutral-400">
                         {sectionVariantData?.variantType === "anyOf"
                           ? "One or more variants may apply."
                           : "One of these variants applies."}
                       </p>
                       {sectionVariants.map((variant, index) => (
                         <>
-                          <div class="rounded-lg border border-neutral-200 bg-white p-3">
-                            <div class="mb-2 text-xs font-medium text-neutral-600">
+                          <div class="rounded-lg border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900/60">
+                            <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
                             <div x-data="{ expanded: false }">
                               <div
-                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
-                                x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
                               >
                                 <button
                                   type="button"
                                   x-on:click="expanded = !expanded"
                                   x-bind:aria-expanded="expanded"
-                                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                                 >
                                   <span class="inline-flex items-center gap-2">
-                                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                                     <span>
                                       {variant.fields.length}{" "}
                                       {variant.fields.length === 1
@@ -1023,7 +1023,7 @@ const formattedBodyDescription = bodyDescription
                                   </span>
                                 </button>
                                 <div x-show="expanded" x-collapse x-cloak>
-                                  <div class="border-t border-neutral-100 px-3 py-3">
+                                  <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
                                     <ResponseFieldTree
                                       fields={variant.fields}
                                     />
@@ -1035,11 +1035,11 @@ const formattedBodyDescription = bodyDescription
                           {sectionVariantData?.variantType === "oneOf" &&
                             index < sectionVariants.length - 1 && (
                               <div class="flex items-center gap-2 py-0">
-                                <div class="h-px flex-1 bg-neutral-200" />
-                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
+                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
                                   OR
                                 </span>
-                                <div class="h-px flex-1 bg-neutral-200" />
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
                               </div>
                             )}
                         </>