From 55a0b32bdfd3f3feeca73fbe7cd75dd02a3de33c Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Thu, 13 Feb 2025 11:31:21 -0500
Subject: [PATCH] remove fern-docs/cache

---
 packages/fern-docs/bundle/next.config.ts      |  10 +-
 packages/fern-docs/bundle/package.json        |   1 -
 .../{not-found.tsx => _not-found.tsx}         |   0
 .../bundle/src/app/[domain]/_page.tsx         |   6 +-
 .../api/fern-docs/org/org-for-url/route.ts    |   5 +-
 .../api/fern-docs/search/v2/chat/route.ts     |   9 +-
 .../api/fern-docs/search/v2/key/route.ts      |   9 +-
 .../search/v2/reindex/algolia/route.ts        |   9 +-
 .../search/v2/reindex/turbopuffer/route.ts    |   9 +-
 .../src/app/[domain]/dynamic/layout.tsx       |   6 +-
 .../bundle/src/app/[domain]/layout.tsx        |  11 +-
 .../bundle/src/app/[domain]/static/layout.tsx |   8 +-
 .../api-reference/ApiEndpointPage.tsx         |  15 +--
 .../endpoints/EndpointContent.tsx             |   2 +-
 .../endpoints/EndpointContentCodeSnippets.tsx |   2 +-
 .../bundle/src/components/header/Header.tsx   | 103 ++++------------
 .../src/components/header/announcement.tsx    |  33 ++++-
 .../src/components/layouts/GuideLayout.tsx    |  31 +++--
 .../components/layouts/LayoutEvaluator.tsx    |   2 +-
 .../components/layouts/ReferenceLayout.tsx    |  11 +-
 .../layouts/TableOfContentsLayout.tsx         |   2 +-
 .../bundle/src/components/mdx/Markdown.tsx    |   9 +-
 .../src/components/mdx/bundler/serialize.ts   |   2 -
 .../components/sidebar/SidebarContainer.tsx   |   6 +-
 .../src/components/themes/ThemedDocs.tsx      |   3 +
 .../components/themes/cohere/CohereDocs.tsx   |   2 +
 .../components/themes/default/DefaultDocs.tsx | 115 +++++++++++++-----
 .../components/themes/default/fern-header.tsx |   6 +-
 .../themes/default/header-container.tsx       |   9 ++
 packages/fern-docs/bundle/src/middleware.ts   |  19 +--
 .../bundle/src/server/auth/getAuthState.ts    |   8 +-
 .../src/server/auth/getAuthStateEdge.ts       |   8 +-
 .../src/server/auth/metadata-for-url.ts       |  26 ----
 .../bundle/src/server/docs-loader.ts          |  69 +++++------
 .../bundle/src/server/env-variables.ts        |   8 ++
 .../bundle/src/server/getDocsUrlMetadata.ts   |  67 ++++++++++
 .../fern-docs/bundle/src/server/ld-adapter.ts |  11 +-
 .../bundle/src/server/loadWithUrl.ts          |  18 ++-
 .../fern-docs/bundle/src/state/navigation.tsx |   5 +
 packages/fern-docs/cache/.depcheckrc.json     |   4 -
 packages/fern-docs/cache/.stylelintrc.json    |   1 -
 packages/fern-docs/cache/package.json         |  53 --------
 packages/fern-docs/cache/src/DocsKVCache.ts   |  52 --------
 .../fern-docs/cache/src/DocsMetadataLoader.ts |  65 ----------
 packages/fern-docs/cache/src/index.ts         |   1 -
 packages/fern-docs/cache/tsconfig.eslint.json |   7 --
 packages/fern-docs/cache/tsconfig.json        |  19 ---
 packages/fern-docs/cache/vitest.config.ts     |   7 --
 .../fern-docs/components/src/FernButton.tsx   |  18 +--
 .../src/getPreviewUrlAuthConfig.ts            |   8 +-
 packages/fern-docs/mdx/src/parse.ts           |   4 +-
 packages/fern-docs/mdx/src/plugins/index.ts   |   1 -
 ...-unravel.ts => remark-mark-and-unravel.ts} |  60 ++++-----
 .../src/components/search-client.tsx          |   3 +
 pnpm-lock.yaml                                |  80 ------------
 55 files changed, 455 insertions(+), 603 deletions(-)
 rename packages/fern-docs/bundle/src/app/[domain]/{not-found.tsx => _not-found.tsx} (100%)
 create mode 100644 packages/fern-docs/bundle/src/components/themes/default/header-container.tsx
 delete mode 100644 packages/fern-docs/bundle/src/server/auth/metadata-for-url.ts
 create mode 100644 packages/fern-docs/bundle/src/server/getDocsUrlMetadata.ts
 delete mode 100644 packages/fern-docs/cache/.depcheckrc.json
 delete mode 100644 packages/fern-docs/cache/.stylelintrc.json
 delete mode 100644 packages/fern-docs/cache/package.json
 delete mode 100644 packages/fern-docs/cache/src/DocsKVCache.ts
 delete mode 100644 packages/fern-docs/cache/src/DocsMetadataLoader.ts
 delete mode 100644 packages/fern-docs/cache/src/index.ts
 delete mode 100644 packages/fern-docs/cache/tsconfig.eslint.json
 delete mode 100644 packages/fern-docs/cache/tsconfig.json
 delete mode 100644 packages/fern-docs/cache/vitest.config.ts
 rename packages/fern-docs/mdx/src/plugins/{remark-unravel.ts => remark-mark-and-unravel.ts} (70%)

diff --git a/packages/fern-docs/bundle/next.config.ts b/packages/fern-docs/bundle/next.config.ts
index 396433769d..e1845e21db 100644
--- a/packages/fern-docs/bundle/next.config.ts
+++ b/packages/fern-docs/bundle/next.config.ts
@@ -39,7 +39,6 @@ const nextConfig: NextConfig = {
     "@fern-api/template-resolver",
     "@fern-api/ui-core-utils",
     "@fern-docs/auth",
-    "@fern-docs/cache",
     "@fern-docs/components",
     "@fern-docs/edge-config",
     "@fern-docs/mdx",
@@ -64,8 +63,8 @@ const nextConfig: NextConfig = {
       "ts-essentials",
       "lucide-react",
     ],
-    optimizeServerReact: true,
-    typedEnv: true,
+    optimizeServerReact: Boolean(process.env.VERCEL),
+    // typedEnv: true,
     newDevOverlay: true,
     authInterrupts: true,
     swcTraceProfiling: true,
@@ -74,6 +73,7 @@ const nextConfig: NextConfig = {
     parallelServerBuildTraces: true,
     webpackMemoryOptimizations: true,
     taint: true,
+    useCache: true,
   },
 
   skipMiddlewareUrlNormalize: true,
@@ -206,7 +206,9 @@ function withVercelEnv(config: NextConfig): NextConfig {
   return {
     ...config,
     deploymentId: process.env.VERCEL_DEPLOYMENT_ID, // skew protection
-    productionBrowserSourceMaps: process.env.VERCEL_ENV === "preview",
+    productionBrowserSourceMaps:
+      process.env.VERCEL_ENV === "preview" ||
+      process.env.NODE_ENV === "development",
     reactProductionProfiling: process.env.VERCEL_ENV !== "production",
   };
 }
diff --git a/packages/fern-docs/bundle/package.json b/packages/fern-docs/bundle/package.json
index 68d3b9f9ba..de15d7bd3c 100644
--- a/packages/fern-docs/bundle/package.json
+++ b/packages/fern-docs/bundle/package.json
@@ -43,7 +43,6 @@
     "@fern-api/template-resolver": "workspace:*",
     "@fern-api/ui-core-utils": "workspace:*",
     "@fern-docs/auth": "workspace:*",
-    "@fern-docs/cache": "workspace:*",
     "@fern-docs/components": "workspace:*",
     "@fern-docs/edge-config": "workspace:*",
     "@fern-docs/mdx": "workspace:*",
diff --git a/packages/fern-docs/bundle/src/app/[domain]/not-found.tsx b/packages/fern-docs/bundle/src/app/[domain]/_not-found.tsx
similarity index 100%
rename from packages/fern-docs/bundle/src/app/[domain]/not-found.tsx
rename to packages/fern-docs/bundle/src/app/[domain]/_not-found.tsx
diff --git a/packages/fern-docs/bundle/src/app/[domain]/_page.tsx b/packages/fern-docs/bundle/src/app/[domain]/_page.tsx
index aa548075cd..8c52bd375c 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/_page.tsx
+++ b/packages/fern-docs/bundle/src/app/[domain]/_page.tsx
@@ -132,11 +132,7 @@ export default async function Page({
   }
 
   // TODO: parallelize this with the other edge config calls:
-  const [launchDarkly, flagPredicate] = await withLaunchDarkly(
-    loader.domain,
-    authState,
-    found
-  );
+  const [launchDarkly, flagPredicate] = await withLaunchDarkly(loader, found);
 
   if (
     ![...found.parents, found.node]
diff --git a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/org/org-for-url/route.ts b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/org/org-for-url/route.ts
index d66ff6f7b7..ebeabc6bd0 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/org/org-for-url/route.ts
+++ b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/org/org-for-url/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
+import { createCachedDocsLoader } from "@/server/docs-loader";
 import { getDocsDomainEdge } from "@/server/xfernhost/edge";
 
 export const runtime = "edge";
@@ -17,7 +17,8 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
     return NextResponse.json({ error: "Invalid domain" }, { status: 400 });
   }
 
-  const metadata = await getOrgMetadataForDomain(domain);
+  const loader = await createCachedDocsLoader(domain);
+  const metadata = await loader.getMetadata();
 
   if (metadata) {
     return NextResponse.json(metadata, { status: 200 });
diff --git a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/chat/route.ts b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/chat/route.ts
index ff1d134abf..907f333e08 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/chat/route.ts
+++ b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/chat/route.ts
@@ -17,7 +17,7 @@ import { COOKIE_FERN_TOKEN, withoutStaging } from "@fern-docs/utils";
 
 import { track } from "@/server/analytics/posthog";
 import { safeVerifyFernJWTConfig } from "@/server/auth/FernJWT";
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
+import { createCachedDocsLoader } from "@/server/docs-loader";
 import { openaiApiKey, turbopufferApiKey } from "@/server/env-variables";
 import { getDocsDomainEdge } from "@/server/xfernhost/edge";
 
@@ -46,12 +46,13 @@ export async function POST(req: NextRequest) {
   const namespace = `${withoutStaging(domain)}_${embeddingModel.modelId}`;
   const { messages } = await req.json();
 
-  const orgMetadata = await getOrgMetadataForDomain(withoutStaging(domain));
-  if (orgMetadata == null) {
+  const loader = await createCachedDocsLoader(domain);
+  const metadata = await loader.getMetadata();
+  if (metadata == null) {
     return NextResponse.json("Not found", { status: 404 });
   }
 
-  if (orgMetadata.isPreviewUrl) {
+  if (metadata.isPreview) {
     return NextResponse.json({
       added: 0,
       updated: 0,
diff --git a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/key/route.ts b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/key/route.ts
index 0a005e7986..640b85f973 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/key/route.ts
+++ b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/key/route.ts
@@ -10,7 +10,7 @@ import {
 import { COOKIE_FERN_TOKEN, withoutStaging } from "@fern-docs/utils";
 
 import { safeVerifyFernJWTConfig } from "@/server/auth/FernJWT";
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
+import { createCachedDocsLoader } from "@/server/docs-loader";
 import { algoliaAppId, algoliaSearchApikey } from "@/server/env-variables";
 import { selectFirst } from "@/server/utils/selectFirst";
 import { getDocsDomainEdge } from "@/server/xfernhost/edge";
@@ -21,12 +21,13 @@ export const maxDuration = 10;
 export async function GET(req: NextRequest): Promise<NextResponse> {
   const domain = getDocsDomainEdge(req);
 
-  const orgMetadata = await getOrgMetadataForDomain(withoutStaging(domain));
-  if (orgMetadata == null) {
+  const loader = await createCachedDocsLoader(domain);
+  const metadata = await loader.getMetadata();
+  if (metadata == null) {
     return NextResponse.json("Not found", { status: 404 });
   }
 
-  if (orgMetadata.isPreviewUrl) {
+  if (metadata.isPreview) {
     return NextResponse.json("Search is not supported for preview URLs", {
       status: 400,
     });
diff --git a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/algolia/route.ts b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/algolia/route.ts
index b1e4153d23..9855ae4f79 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/algolia/route.ts
+++ b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/algolia/route.ts
@@ -9,7 +9,7 @@ import {
 import { addLeadingSlash, withoutStaging } from "@fern-docs/utils";
 
 import { track } from "@/server/analytics/posthog";
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
+import { createCachedDocsLoader } from "@/server/docs-loader";
 import {
   algoliaAppId,
   algoliaWriteApiKey,
@@ -25,13 +25,14 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
   const domain = getDocsDomainEdge(req);
 
   try {
-    const orgMetadata = await getOrgMetadataForDomain(withoutStaging(domain));
-    if (orgMetadata == null) {
+    const loader = await createCachedDocsLoader(domain);
+    const metadata = await loader.getMetadata();
+    if (metadata == null) {
       return NextResponse.json("Not found", { status: 404 });
     }
 
     // If the domain is a preview URL, we don't want to reindex
-    if (orgMetadata.isPreviewUrl) {
+    if (metadata.isPreview) {
       return NextResponse.json({
         added: 0,
         updated: 0,
diff --git a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/turbopuffer/route.ts b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/turbopuffer/route.ts
index 356b6e2566..1cba1be1a2 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/turbopuffer/route.ts
+++ b/packages/fern-docs/bundle/src/app/[domain]/api/fern-docs/search/v2/reindex/turbopuffer/route.ts
@@ -8,7 +8,7 @@ import { turbopufferUpsertTask } from "@fern-docs/search-server/turbopuffer";
 import { addLeadingSlash, withoutStaging } from "@fern-docs/utils";
 
 import { track } from "@/server/analytics/posthog";
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
+import { createCachedDocsLoader } from "@/server/docs-loader";
 import {
   fdrEnvironment,
   fernToken_admin,
@@ -30,13 +30,14 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
   const namespace = `${withoutStaging(domain)}_${embeddingModel.modelId}`;
 
   try {
-    const orgMetadata = await getOrgMetadataForDomain(withoutStaging(domain));
-    if (orgMetadata == null) {
+    const loader = await createCachedDocsLoader(domain);
+    const metadata = await loader.getMetadata();
+    if (metadata == null) {
       return NextResponse.json("Not found", { status: 404 });
     }
 
     // If the domain is a preview URL, we don't want to reindex
-    if (orgMetadata.isPreviewUrl) {
+    if (metadata.isPreview) {
       return NextResponse.json(
         {
           added: 0,
diff --git a/packages/fern-docs/bundle/src/app/[domain]/dynamic/layout.tsx b/packages/fern-docs/bundle/src/app/[domain]/dynamic/layout.tsx
index 8842b4885e..d59afafb7e 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/dynamic/layout.tsx
+++ b/packages/fern-docs/bundle/src/app/[domain]/dynamic/layout.tsx
@@ -1,3 +1,4 @@
+import { getFernToken } from "@/app/fern-token";
 import type { NavbarLink } from "@/components/atoms/types";
 import { Header } from "@/components/header/Header";
 import { Announcement } from "@/components/header/announcement";
@@ -19,7 +20,7 @@ export default async function DocsLayout({
 }) {
   const { domain } = await params;
 
-  const loader = await createCachedDocsLoader(domain);
+  const loader = await createCachedDocsLoader(domain, await getFernToken());
   const [{ basePath }, root, config, edgeFlags, files, colors, layout] =
     await Promise.all([
       loader.getBaseUrl(),
@@ -111,7 +112,6 @@ export default async function DocsLayout({
         header={
           <Header
             className="max-w-page-width mx-auto"
-            colors={colors}
             logo={
               <Logo
                 logo={withLogo(config, resolveFileSrc, basePath)}
@@ -119,10 +119,12 @@ export default async function DocsLayout({
               />
             }
             versionSelect={false}
+            showThemeButton={Boolean(colors.dark && colors.light)}
             showSearchBar={layout.searchbarPlacement === "HEADER"}
             navbarLinks={navbarLinks}
           />
         }
+        headerHeight={layout.headerHeight}
         sidebar={
           <Sidebar
             logo={
diff --git a/packages/fern-docs/bundle/src/app/[domain]/layout.tsx b/packages/fern-docs/bundle/src/app/[domain]/layout.tsx
index 237c4022f6..794a06376b 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/layout.tsx
+++ b/packages/fern-docs/bundle/src/app/[domain]/layout.tsx
@@ -23,8 +23,7 @@ import { withJsConfig } from "@/components/components/with-js-config";
 import { FeatureFlagProvider } from "@/components/feature-flags/FeatureFlagProvider";
 import Preload, { type PreloadHref } from "@/components/preload";
 import { renderThemeStylesheet } from "@/components/themes/stylesheet/renderThemeStylesheet";
-import { getOrgMetadataForDomain } from "@/server/auth/metadata-for-url";
-import { createCachedDocsLoader } from "@/server/docs-loader";
+import { DocsLoader, createCachedDocsLoader } from "@/server/docs-loader";
 import type { RgbaColor } from "@/server/types";
 import { DarkCode } from "@/state/dark-code";
 
@@ -57,7 +56,7 @@ export default async function Layout(props: {
     loader.getFiles(),
     loader.getColors(),
     deprecated_getCustomerAnalytics(domain),
-    getLaunchDarklyInfo(domain),
+    getLaunchDarklyInfo(loader),
   ]);
 
   const preloadHrefs = generatePreloadHrefs(
@@ -126,11 +125,11 @@ function mergeCustomerAnalytics(
 }
 
 async function getLaunchDarklyInfo(
-  domain: string
+  loader: DocsLoader
 ): Promise<LaunchDarklyInfo | undefined> {
   const unstable_launchDarklySettings = await getLaunchDarklySettings(
-    domain,
-    getOrgMetadataForDomain(domain).then((metadata) => metadata?.orgId)
+    loader.domain,
+    loader.getMetadata().then((metadata) => metadata.org)
   );
   if (!unstable_launchDarklySettings) {
     return undefined;
diff --git a/packages/fern-docs/bundle/src/app/[domain]/static/layout.tsx b/packages/fern-docs/bundle/src/app/[domain]/static/layout.tsx
index 8842b4885e..4f16140cd9 100644
--- a/packages/fern-docs/bundle/src/app/[domain]/static/layout.tsx
+++ b/packages/fern-docs/bundle/src/app/[domain]/static/layout.tsx
@@ -1,3 +1,7 @@
+"use cache";
+
+import { unstable_cacheTag } from "next/cache";
+
 import type { NavbarLink } from "@/components/atoms/types";
 import { Header } from "@/components/header/Header";
 import { Announcement } from "@/components/header/announcement";
@@ -18,6 +22,7 @@ export default async function DocsLayout({
   params: Promise<{ domain: string }>;
 }) {
   const { domain } = await params;
+  unstable_cacheTag(domain, "static", "layout");
 
   const loader = await createCachedDocsLoader(domain);
   const [{ basePath }, root, config, edgeFlags, files, colors, layout] =
@@ -111,7 +116,6 @@ export default async function DocsLayout({
         header={
           <Header
             className="max-w-page-width mx-auto"
-            colors={colors}
             logo={
               <Logo
                 logo={withLogo(config, resolveFileSrc, basePath)}
@@ -120,9 +124,11 @@ export default async function DocsLayout({
             }
             versionSelect={false}
             showSearchBar={layout.searchbarPlacement === "HEADER"}
+            showThemeButton={Boolean(colors.dark && colors.light)}
             navbarLinks={navbarLinks}
           />
         }
+        headerHeight={layout.headerHeight}
         sidebar={
           <Sidebar
             logo={
diff --git a/packages/fern-docs/bundle/src/components/api-reference/ApiEndpointPage.tsx b/packages/fern-docs/bundle/src/components/api-reference/ApiEndpointPage.tsx
index 76b69e78cc..3660da4c26 100644
--- a/packages/fern-docs/bundle/src/components/api-reference/ApiEndpointPage.tsx
+++ b/packages/fern-docs/bundle/src/components/api-reference/ApiEndpointPage.tsx
@@ -8,7 +8,6 @@ import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 
 import { DocsLoader } from "@/server/docs-loader";
 
-import { ApiPageLayout } from "./api-page-layout";
 import { EndpointContent } from "./endpoints/EndpointContent";
 import { WebhookContent } from "./webhooks/WebhookContent";
 import { WebSocketContent } from "./websockets/WebSocket";
@@ -25,14 +24,12 @@ export default async function ApiEndpointPage({
   const apiDefinition = await loader.getApi(node.apiDefinitionId);
 
   return (
-    <ApiPageLayout>
-      <ApiEndpointContent
-        loader={loader}
-        node={node}
-        apiDefinition={apiDefinition}
-        breadcrumb={breadcrumb}
-      />
-    </ApiPageLayout>
+    <ApiEndpointContent
+      loader={loader}
+      node={node}
+      apiDefinition={apiDefinition}
+      breadcrumb={breadcrumb}
+    />
   );
 }
 
diff --git a/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContent.tsx b/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContent.tsx
index 0f9b41a8b7..0ceac0e90e 100644
--- a/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContent.tsx
+++ b/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContent.tsx
@@ -31,7 +31,7 @@ export async function EndpointContent({
 
   return (
     <EndpointContextProvider endpoint={endpoint}>
-      <ApiPageCenter slug={node.slug}>
+      <ApiPageCenter slug={node.slug} asChild>
         <ReferenceLayout
           header={
             <PageHeader
diff --git a/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContentCodeSnippets.tsx b/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContentCodeSnippets.tsx
index b65a1cb4d6..35013a3623 100644
--- a/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContentCodeSnippets.tsx
+++ b/packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContentCodeSnippets.tsx
@@ -135,7 +135,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<
       className={cn(
         // note: .fern-endpoint-code-snippets class is used to detect clicks outside of the code snippets
         // this is used to clear the selected error when the user clicks outside of the error
-        "fern-endpoint-code-snippets",
+        "fern-endpoint-code-snippets w-full",
         // this is used to ensure that two long code snippets will take up the same height,
         // but if one is shorter the other snippet will take up the remaining space
         "grid grid-rows-[repeat(auto-fit,minmax(0,min-content))] gap-6",
diff --git a/packages/fern-docs/bundle/src/components/header/Header.tsx b/packages/fern-docs/bundle/src/components/header/Header.tsx
index 236dc049d4..49799850f4 100644
--- a/packages/fern-docs/bundle/src/components/header/Header.tsx
+++ b/packages/fern-docs/bundle/src/components/header/Header.tsx
@@ -5,13 +5,11 @@ import { CSSProperties, useState } from "react";
 import React from "react";
 
 import cn, { clsx } from "clsx";
-import { ArrowRight, Search } from "iconoir-react";
+import { ArrowRight } from "iconoir-react";
 
-import type { DocsV1Read } from "@fern-api/fdr-sdk/client/types";
-import { FernButton, FernButtonGroup } from "@fern-docs/components";
+import { FernButtonGroup } from "@fern-docs/components";
 
-import { ColorsThemeConfig } from "@/server/types";
-import { SearchV2Trigger, useToggleSearchDialog } from "@/state/search";
+import { SearchV2Trigger } from "@/state/search";
 
 import type { NavbarLink } from "../atoms/types";
 import { FernLinkButton } from "../components/FernLinkButton";
@@ -19,7 +17,6 @@ import { ThemeButton } from "../themes";
 import { getGitHubRepo } from "../util/github";
 import { GitHubWidget } from "./GitHubWidget";
 import { HeaderLogoSection } from "./HeaderLogoSection";
-import { MobileMenuButton } from "./MobileMenuButton";
 
 export declare namespace Header {
   export interface Props {
@@ -27,10 +24,7 @@ export declare namespace Header {
     versionSelect: React.ReactNode;
     className?: string;
     style?: CSSProperties;
-    colors: {
-      light?: ColorsThemeConfig;
-      dark?: ColorsThemeConfig;
-    };
+    showThemeButton?: boolean;
     showSearchBar?: boolean;
     navbarLinks: NavbarLink[];
   }
@@ -41,77 +35,40 @@ export function Header({
   versionSelect,
   className,
   style,
-  colors,
+  showThemeButton,
   showSearchBar,
   navbarLinks,
 }: Header.Props) {
-  const toggleSearchDialog = useToggleSearchDialog();
-
-  const navbarLinksSection = (
-    <div className="lg-menu">
-      <FernButtonGroup>
-        {navbarLinks.map((navbarLink, idx) => (
-          <NavbarLink key={idx} navbarLink={navbarLink} />
-        ))}
-
-        {colors.dark && colors.light && <ThemeButton />}
-      </FernButtonGroup>
-    </div>
-  );
-
-  const githubLink = navbarLinks.find((link) => link.type === "github");
-  const githubRepo = githubLink && getGitHubRepo(githubLink.href);
-
   return (
-    <nav
-      aria-label="primary"
-      className={cn("fern-header-content", className)}
+    <div
+      className={cn(
+        "flex w-full items-center justify-stretch gap-4 px-4 md:px-6 lg:px-8",
+        className
+      )}
       style={style}
     >
       <HeaderLogoSection logo={logo} versionSelect={versionSelect} />
 
       {showSearchBar && (
-        <div className={cn("fern-header-searchbar")}>
-          <SearchV2Trigger />
-        </div>
+        <SearchV2Trigger
+          aria-label="Search"
+          className="max-w-content-width mx-2 hidden w-full min-w-0 shrink lg:inline-flex"
+        />
       )}
 
-      <div
-        className={cn("fern-header-right-menu", {
-          "flex-1": showSearchBar,
-        })}
-      >
-        {navbarLinksSection}
-
-        <div className="max-lg-menu">
-          {githubRepo && (
-            <GitHubWidget
-              repo={githubRepo}
-              className={githubLink?.className}
-              id={githubLink?.id}
-            />
-          )}
-
-          {colors.dark && colors.light && <ThemeButton size="large" />}
-
-          <FernButton
-            onClickCapture={(e) => {
-              e.stopPropagation();
-              toggleSearchDialog();
-            }}
-            icon={<Search className="!size-icon-md" />}
-            intent="none"
-            variant="minimal"
-            rounded={true}
-            size="large"
-            className="max-sm:hidden"
-            id="fern-search-button"
-          />
-
-          <MobileMenuButton />
-        </div>
-      </div>
-    </nav>
+      <FernButtonGroup asChild>
+        <nav
+          aria-label="Navbar links"
+          className="hidden flex-1 lg:flex lg:items-center lg:justify-end"
+        >
+          {navbarLinks.map((navbarLink, idx) => (
+            <NavbarLink key={idx} navbarLink={navbarLink} />
+          ))}
+
+          {showThemeButton && <ThemeButton />}
+        </nav>
+      </FernButtonGroup>
+    </div>
   );
 }
 
@@ -178,9 +135,3 @@ function NavbarLink({ navbarLink }: { navbarLink: NavbarLink }) {
     </FernLinkButton>
   );
 }
-
-export declare namespace HeaderPrimaryLink {
-  export interface Props {
-    navbarLink: DocsV1Read.NavbarLink.Primary;
-  }
-}
diff --git a/packages/fern-docs/bundle/src/components/header/announcement.tsx b/packages/fern-docs/bundle/src/components/header/announcement.tsx
index 9fd6c3496a..72b6100156 100644
--- a/packages/fern-docs/bundle/src/components/header/announcement.tsx
+++ b/packages/fern-docs/bundle/src/components/header/announcement.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useServerInsertedHTML } from "next/navigation";
 import React from "react";
 
 import { Xmark } from "iconoir-react";
@@ -35,7 +36,7 @@ const AnnouncementInternal = React.forwardRef<
     <motion.div
       ref={forwardedRef}
       {...props}
-      className={cn("fern-announcement overflow-hidden", className)}
+      className={cn("overflow-hidden", className)}
     >
       <motion.div
         className="bg-accent text-accent-contrast flex min-h-8 items-center"
@@ -73,6 +74,34 @@ export function Announcement({
     (state) => state.announcement === announcement
   );
 
+  useServerInsertedHTML(() => {
+    if (!announcement) {
+      return null;
+    }
+    return (
+      <script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `(${String((announcement: string) => {
+            const dismissed = localStorage.getItem(
+              "fern-announcement-dismissed"
+            );
+
+            if (
+              dismissed &&
+              JSON.parse(dismissed)?.state?.announcement === announcement
+            ) {
+              const announcement = document.querySelector(".fern-announcement");
+              if (announcement) {
+                announcement.remove();
+              }
+            }
+          })})(${JSON.stringify(announcement)})`,
+        }}
+      />
+    );
+  });
+
   if (!announcement) {
     return null;
   }
@@ -81,7 +110,7 @@ export function Announcement({
     <AnimatePresence mode="popLayout">
       {!isDismissed && (
         <MotionAnnouncement
-          className={className}
+          className={cn("fern-announcement", className)}
           exit={{ height: 0 }}
           dismiss={() => {
             useAnnouncementStore.setState({ announcement });
diff --git a/packages/fern-docs/bundle/src/components/layouts/GuideLayout.tsx b/packages/fern-docs/bundle/src/components/layouts/GuideLayout.tsx
index deb29c0eaf..9bf38a94be 100644
--- a/packages/fern-docs/bundle/src/components/layouts/GuideLayout.tsx
+++ b/packages/fern-docs/bundle/src/components/layouts/GuideLayout.tsx
@@ -1,5 +1,7 @@
 import type { ReactElement } from "react";
 
+import { cn } from "@fern-docs/components";
+
 import { BuiltWithFern } from "@/components/built-with-fern";
 import { SetLayout } from "@/state/layout";
 
@@ -17,19 +19,26 @@ export function GuideLayout({
   footer,
 }: GuideLayoutProps): ReactElement<any> {
   return (
-    <div className="flex flex-1 flex-row-reverse gap-8 pl-8">
+    <>
       <SetLayout value="guide" />
-      <aside className="w-sidebar-width sticky top-[var(--header-height)] hidden h-fit max-h-[calc(100dvh-var(--header-height))] flex-col xl:flex">
+      <aside
+        className={cn(
+          "sticky top-[var(--header-height)] order-last hidden h-fit max-h-[calc(100dvh-var(--header-height))] flex-col xl:flex",
+          "w-[var(--spacing-sidebar-width)]"
+        )}
+      >
         {toc}
       </aside>
-      <article className="max-w-content-width ml-0 mr-auto min-w-0 shrink xl:mx-auto">
-        {header}
-        <div className="prose dark:prose-invert prose-h1:mt-[1.5em] first:prose-h1:mt-0 max-w-full break-words">
-          {children}
-        </div>
-        {footer}
-        <BuiltWithFern className="mx-auto my-8 w-fit" />
-      </article>
-    </div>
+      <div className="ml-0 mr-auto min-w-0 shrink px-8 xl:mx-auto">
+        <article className="w-content-width max-w-full">
+          {header}
+          <div className="prose dark:prose-invert prose-h1:mt-[1.5em] first:prose-h1:mt-0 max-w-full break-words">
+            {children}
+          </div>
+          {footer}
+          <BuiltWithFern className="mx-auto my-8 w-fit" />
+        </article>
+      </div>
+    </>
   );
 }
diff --git a/packages/fern-docs/bundle/src/components/layouts/LayoutEvaluator.tsx b/packages/fern-docs/bundle/src/components/layouts/LayoutEvaluator.tsx
index 2817283c93..f487c874b7 100644
--- a/packages/fern-docs/bundle/src/components/layouts/LayoutEvaluator.tsx
+++ b/packages/fern-docs/bundle/src/components/layouts/LayoutEvaluator.tsx
@@ -46,7 +46,7 @@ export async function LayoutEvaluator({
       frontmatter={frontmatter}
       breadcrumb={breadcrumb}
       tableOfContents={toc}
-      aside={mdx && hasAside && <MdxAsideComponent code={mdx.code} />}
+      aside={mdx && hasAside && <MdxAsideComponent {...mdx} />}
     >
       <MdxContent mdx={mdx} fallback={markdown} />
     </LayoutEvaluatorContent>
diff --git a/packages/fern-docs/bundle/src/components/layouts/ReferenceLayout.tsx b/packages/fern-docs/bundle/src/components/layouts/ReferenceLayout.tsx
index 4596a904a5..a51e3937ff 100644
--- a/packages/fern-docs/bundle/src/components/layouts/ReferenceLayout.tsx
+++ b/packages/fern-docs/bundle/src/components/layouts/ReferenceLayout.tsx
@@ -23,16 +23,16 @@ export const ReferenceLayout = React.forwardRef<
   ref
 ) {
   return (
-    <div className="px-4 md:px-6 lg:px-8">
-      <SetLayout value="reference" />
+    <div className="ml-0 mr-auto min-w-0 shrink px-8 xl:mx-auto">
       <article
         {...props}
         className={cn(
-          "max-w-content-width md:max-w-endpoint-width mx-auto w-full lg:ml-0 xl:mx-auto",
+          "w-content-width md:w-endpoint-width max-w-full",
           props.className
         )}
         ref={ref}
       >
+        <SetLayout value="reference" />
         {header}
         <div className="layout">
           <section>{children}</section>
@@ -40,9 +40,9 @@ export const ReferenceLayout = React.forwardRef<
           <section>
             {reference}
             {footer}
+            <BuiltWithFern className="mx-auto my-8 w-fit" />
           </section>
         </div>
-        <BuiltWithFern className="mx-auto my-8 w-fit" />
         <style jsx>
           {`
             article > .layout {
@@ -67,6 +67,7 @@ export const ReferenceLayout = React.forwardRef<
 
             article > .layout > section:last-child {
               grid-area: footer;
+              grid-row-end: none;
             }
 
             article > .layout > section:empty {
@@ -79,7 +80,7 @@ export const ReferenceLayout = React.forwardRef<
 
             @media (min-width: 768px) {
               article > .layout {
-                margin: 2rem 0;
+                margin: 1.5rem 0;
                 gap: 2rem;
                 grid-template-columns: 1fr 1fr;
                 grid-template-areas:
diff --git a/packages/fern-docs/bundle/src/components/layouts/TableOfContentsLayout.tsx b/packages/fern-docs/bundle/src/components/layouts/TableOfContentsLayout.tsx
index 9830bc87d2..a373c6bbff 100644
--- a/packages/fern-docs/bundle/src/components/layouts/TableOfContentsLayout.tsx
+++ b/packages/fern-docs/bundle/src/components/layouts/TableOfContentsLayout.tsx
@@ -16,7 +16,7 @@ export function TableOfContentsLayout({
     tableOfContents != null &&
     !hideTableOfContents &&
     tableOfContents.length > 0 && (
-      <FernScrollArea className="px-4 pb-12 pt-8 lg:pr-8">
+      <FernScrollArea className="px-4 pb-12 pt-8 lg:pr-5">
         <TableOfContents tableOfContents={tableOfContents} />
       </FernScrollArea>
     )
diff --git a/packages/fern-docs/bundle/src/components/mdx/Markdown.tsx b/packages/fern-docs/bundle/src/components/mdx/Markdown.tsx
index e378003321..203c87708c 100644
--- a/packages/fern-docs/bundle/src/components/mdx/Markdown.tsx
+++ b/packages/fern-docs/bundle/src/components/mdx/Markdown.tsx
@@ -10,7 +10,14 @@ export declare namespace Markdown {
     title?: ReactNode;
 
     // mdx: string | FernDocs.ResolvedMdx | string | FernDocs.ResolvedMdx[] | undefined;
-    mdx: string | { code: string } | (string | { code: string })[] | undefined;
+    mdx:
+      | string
+      | { code: string; jsxElements: string[]; esmElements: string[] }
+      | (
+          | string
+          | { code: string; jsxElements: string[]; esmElements: string[] }
+        )[]
+      | undefined;
     className?: string;
     size?: "xs" | "sm" | "lg";
 
diff --git a/packages/fern-docs/bundle/src/components/mdx/bundler/serialize.ts b/packages/fern-docs/bundle/src/components/mdx/bundler/serialize.ts
index 9227a949bb..cd77b9294f 100644
--- a/packages/fern-docs/bundle/src/components/mdx/bundler/serialize.ts
+++ b/packages/fern-docs/bundle/src/components/mdx/bundler/serialize.ts
@@ -27,7 +27,6 @@ import {
   rehypeToc,
   remarkInjectEsm,
   remarkSanitizeAcorn,
-  remarkUnravel,
 } from "@fern-docs/mdx/plugins";
 
 import { FileData } from "@/server/types";
@@ -143,7 +142,6 @@ async function serializeMdxImpl(
         remarkFrontmatter,
         remarkExtractTitle,
         [remarkMdxFrontmatter, { name: "frontmatter" }],
-        remarkUnravel,
         remarkSqueezeParagraphs,
         [remarkInjectEsm, { scope }],
         [remarkSanitizeAcorn],
diff --git a/packages/fern-docs/bundle/src/components/sidebar/SidebarContainer.tsx b/packages/fern-docs/bundle/src/components/sidebar/SidebarContainer.tsx
index 29076a477e..a8ab4bee93 100644
--- a/packages/fern-docs/bundle/src/components/sidebar/SidebarContainer.tsx
+++ b/packages/fern-docs/bundle/src/components/sidebar/SidebarContainer.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 
-import { FernScrollArea, FernTooltipProvider } from "@fern-docs/components";
+import { FernScrollArea, FernTooltipProvider, cn } from "@fern-docs/components";
 
 import {
   CURRENT_TAB_INDEX_ATOM,
@@ -46,9 +46,7 @@ export const SidebarContainer = React.memo(function SidebarContainer({
       />
       <FernScrollArea
         rootClassName="flex-1"
-        className={clsx(
-          "group/sidebar fern-sidebar-content overscroll-contain"
-        )}
+        className={cn("group/sidebar overscroll-contain px-4 lg:pl-5")}
         scrollbars="vertical"
         ref={ref}
       >
diff --git a/packages/fern-docs/bundle/src/components/themes/ThemedDocs.tsx b/packages/fern-docs/bundle/src/components/themes/ThemedDocs.tsx
index 8662f9c810..06e9079897 100644
--- a/packages/fern-docs/bundle/src/components/themes/ThemedDocs.tsx
+++ b/packages/fern-docs/bundle/src/components/themes/ThemedDocs.tsx
@@ -14,6 +14,7 @@ export async function ThemedDocs({
   header,
   sidebar,
   children,
+  headerHeight,
 }: {
   theme?: FernTheme;
   colors: {
@@ -24,6 +25,7 @@ export async function ThemedDocs({
   header?: React.ReactNode;
   sidebar?: React.ReactNode;
   children: React.ReactNode;
+  headerHeight?: number;
 }) {
   const Docs = await THEMES[theme];
   return (
@@ -32,6 +34,7 @@ export async function ThemedDocs({
       colors={colors}
       header={header}
       sidebar={sidebar}
+      headerHeight={headerHeight}
     >
       {children}
     </Docs>
diff --git a/packages/fern-docs/bundle/src/components/themes/cohere/CohereDocs.tsx b/packages/fern-docs/bundle/src/components/themes/cohere/CohereDocs.tsx
index 5e0ed6d7ba..c4a2108642 100644
--- a/packages/fern-docs/bundle/src/components/themes/cohere/CohereDocs.tsx
+++ b/packages/fern-docs/bundle/src/components/themes/cohere/CohereDocs.tsx
@@ -51,11 +51,13 @@ export default function CohereDocs({
   sidebar,
   children,
   announcement,
+  headerHeight,
 }: {
   header: React.ReactNode;
   sidebar: React.ReactNode;
   children: React.ReactNode;
   announcement?: React.ReactNode;
+  headerHeight?: number;
 }) {
   const showHeader = useAtomValue(SHOW_HEADER_ATOM);
 
diff --git a/packages/fern-docs/bundle/src/components/themes/default/DefaultDocs.tsx b/packages/fern-docs/bundle/src/components/themes/default/DefaultDocs.tsx
index f551f67082..ccae698343 100644
--- a/packages/fern-docs/bundle/src/components/themes/default/DefaultDocs.tsx
+++ b/packages/fern-docs/bundle/src/components/themes/default/DefaultDocs.tsx
@@ -1,11 +1,19 @@
 "use client";
 
-import { cn } from "@fern-docs/components";
+import * as Tabs from "@radix-ui/react-tabs";
+import { Lock } from "lucide-react";
 
+import { FernNavigation } from "@fern-api/fdr-sdk";
+import { FaIcon, cn } from "@fern-docs/components";
+import { addLeadingSlash } from "@fern-docs/utils";
+
+import { BgImageGradient } from "@/components/components/BgImageGradient";
+import { FernLink } from "@/components/components/FernLink";
 import { ColorsThemeConfig } from "@/server/types";
 import { useLayout } from "@/state/layout";
+import { useCurrentTab, useTabs } from "@/state/navigation";
 
-import { HeaderContainer } from "./HeaderContainer";
+import { FernHeader } from "./fern-header";
 
 export function DefaultDocs({
   header,
@@ -13,6 +21,7 @@ export function DefaultDocs({
   children,
   announcement,
   colors,
+  headerHeight,
 }: {
   header: React.ReactNode;
   sidebar: React.ReactNode;
@@ -22,40 +31,88 @@ export function DefaultDocs({
     light?: ColorsThemeConfig;
     dark?: ColorsThemeConfig;
   };
+  headerHeight?: number;
 }) {
   const layout = useLayout();
   return (
-    <div id="fern-docs" className="fern-container fern-theme-default">
-      <HeaderContainer
-        className="z-30"
-        header={header}
-        announcement={announcement}
-        showHeader
-        showHeaderTabs
-        colors={colors}
-      />
-
-      {layout === "custom" ? (
-        children
-      ) : (
-        <div className="fern-body z-0">
-          <nav
-            className={cn(
-              "w-sidebar-width sticky top-[var(--header-height)] z-30 mt-[var(--header-height)] flex h-fit max-h-[calc(100dvh-var(--header-height))] shrink-0 flex-col pl-1",
-              { hidden: layout === "page" }
-            )}
-          >
-            {sidebar}
-          </nav>
-          <main className="mt-[var(--header-height)] min-w-0 flex-1 shrink">
-            {children}
-          </main>
+    <>
+      <FernHeader
+        className="bg-header border-concealed fixed inset-x-0 top-0 z-30 border-b backdrop-blur-lg"
+        defaultHeight={headerHeight}
+      >
+        {announcement}
+        <div className="relative">
+          <div className="clipped-background">
+            <BgImageGradient
+              className="h-screen opacity-60 dark:opacity-80"
+              colors={colors}
+            />
+          </div>
+          <div className="h-header-height-real flex items-center">{header}</div>
+          <HeaderTabs />
         </div>
-      )}
+      </FernHeader>
+
+      <main className="max-w-page-width relative mx-auto mt-[var(--header-height)] flex flex-row">
+        <aside
+          className={cn(
+            "w-[var(--spacing-sidebar-width)]",
+            "sticky top-[var(--header-height)] z-30 flex h-fit max-h-[calc(100dvh-var(--header-height))] shrink-0 flex-col",
+            { hidden: layout === "page" }
+          )}
+        >
+          {sidebar}
+        </aside>
+
+        {children}
+      </main>
 
       {/* Enables footer DOM injection */}
       <footer id="fern-footer" />
-    </div>
+    </>
+  );
+}
+
+function HeaderTabs() {
+  const currentTab = useCurrentTab();
+  const tabs = useTabs();
+  if (!tabs || tabs.length === 0) {
+    return null;
+  }
+  return (
+    <Tabs.Root value={currentTab?.id} className="select-none">
+      <Tabs.TabsList className="max-w-page-width mx-auto flex px-1 align-bottom text-sm md:px-3 lg:px-5">
+        {tabs.map((tab) => (
+          <Tabs.TabsTrigger key={tab.id} value={tab.id} asChild>
+            <FernLink
+              className={cn(
+                "relative flex h-11 min-w-0 items-center justify-start space-x-2 px-3",
+                "after:absolute after:inset-x-3 after:-bottom-px after:h-0.5 after:bg-[var(--accent-11)] after:opacity-0 after:content-['']",
+                "data-[state=active]:font-semibold data-[state=active]:text-[var(--accent-11)] data-[state=active]:after:opacity-100",
+                "data-[state=inactive]:t-muted data-[state=inactive]:hover:t-default",
+                {
+                  "opacity-50": tab.type !== "link" && tab.hidden,
+                }
+              )}
+              href={
+                tab.type === "link"
+                  ? tab.url
+                  : addLeadingSlash(
+                      FernNavigation.hasRedirect(tab) ? tab.pointsTo : tab.slug
+                    )
+              }
+            >
+              {tab.type !== "link" && tab.authed ? (
+                <Lock className="size-3.5" />
+              ) : (
+                tab.icon && <FaIcon icon={tab.icon} className="size-3.5" />
+              )}
+              <span className="truncate font-medium">{tab.title}</span>
+            </FernLink>
+          </Tabs.TabsTrigger>
+        ))}
+      </Tabs.TabsList>
+    </Tabs.Root>
   );
 }
 
diff --git a/packages/fern-docs/bundle/src/components/themes/default/fern-header.tsx b/packages/fern-docs/bundle/src/components/themes/default/fern-header.tsx
index 5a6c1260c6..03df9b06b1 100644
--- a/packages/fern-docs/bundle/src/components/themes/default/fern-header.tsx
+++ b/packages/fern-docs/bundle/src/components/themes/default/fern-header.tsx
@@ -4,6 +4,8 @@ import React from "react";
 
 import { DEFAULT_HEADER_HEIGHT } from "@fern-docs/utils";
 
+import { useTabs } from "@/state/navigation";
+
 export function FernHeader({
   defaultHeight,
   ...props
@@ -11,9 +13,11 @@ export function FernHeader({
   defaultHeight?: number;
 }) {
   const ref = React.useRef<HTMLDivElement>(null);
+  const tabs = useTabs();
+  const tabsHeight = tabs?.length ? 44 : 0;
 
   const [headerHeight, setHeaderHeight] = React.useState<number>(
-    defaultHeight ?? DEFAULT_HEADER_HEIGHT
+    () => (defaultHeight ?? DEFAULT_HEADER_HEIGHT) + tabsHeight
   );
   React.useEffect(() => {
     if (!ref.current) return;
diff --git a/packages/fern-docs/bundle/src/components/themes/default/header-container.tsx b/packages/fern-docs/bundle/src/components/themes/default/header-container.tsx
new file mode 100644
index 0000000000..fb53cf0f6a
--- /dev/null
+++ b/packages/fern-docs/bundle/src/components/themes/default/header-container.tsx
@@ -0,0 +1,9 @@
+export function FernHeaderContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return <div className={className}>{children}</div>;
+}
diff --git a/packages/fern-docs/bundle/src/middleware.ts b/packages/fern-docs/bundle/src/middleware.ts
index 0eb6951147..b87a43dc7d 100644
--- a/packages/fern-docs/bundle/src/middleware.ts
+++ b/packages/fern-docs/bundle/src/middleware.ts
@@ -148,15 +148,16 @@ export const middleware: NextMiddleware = async (request) => {
     return rewrite(withDomain(`/explorer${pathname}`));
   }
 
-  if (request.cookies.has(COOKIE_FERN_TOKEN)) {
-    const dynamicResponse = rewrite(withDomain(`/dynamic${pathname}`));
-    const { getAuthState } = await createGetAuthStateEdge(request, (token) => {
-      dynamicResponse.cookies.set(COOKIE_FERN_TOKEN, token);
-    });
-    const authState = await getAuthState();
-    if (authState.authed) {
-      return dynamicResponse;
-    }
+  const dynamicResponse = rewrite(withDomain(`/dynamic${pathname}`));
+  const { getAuthState } = await createGetAuthStateEdge(request, (token) => {
+    dynamicResponse.cookies.set(COOKIE_FERN_TOKEN, token);
+  });
+  const authState = await getAuthState(pathname);
+  if (authState.authed) {
+    return dynamicResponse;
+  }
+  if (!authState.ok && authState.authorizationUrl) {
+    return NextResponse.redirect(authState.authorizationUrl);
   }
 
   return rewrite(withDomain(`/static${pathname}`));
diff --git a/packages/fern-docs/bundle/src/server/auth/getAuthState.ts b/packages/fern-docs/bundle/src/server/auth/getAuthState.ts
index d843bd5a9f..48aa5ee241 100644
--- a/packages/fern-docs/bundle/src/server/auth/getAuthState.ts
+++ b/packages/fern-docs/bundle/src/server/auth/getAuthState.ts
@@ -10,11 +10,10 @@ import {
   getAuthEdgeConfig,
   getPreviewUrlAuthConfig,
 } from "@fern-docs/edge-config";
-import { removeTrailingSlash, withoutStaging } from "@fern-docs/utils";
+import { removeTrailingSlash } from "@fern-docs/utils";
 
 import { safeVerifyFernJWTConfig } from "./FernJWT";
 import { getAllowedRedirectUrls } from "./allowed-redirects";
-import { getOrgMetadataForDomain } from "./metadata-for-url";
 import { preferPreview } from "./origin";
 import { getOryAuthorizationUrl } from "./ory";
 import { getReturnToQueryParam } from "./return-to";
@@ -172,6 +171,10 @@ export async function createGetAuthState(
   domain: string,
   fernToken: string | undefined,
   authConfig?: AuthEdgeConfig,
+  orgMetadata?: {
+    org: string;
+    isPreview: boolean;
+  },
   setFernToken?: (token: string) => void
 ): Promise<
   DomainAndHost & {
@@ -179,7 +182,6 @@ export async function createGetAuthState(
   }
 > {
   authConfig ??= await getAuthEdgeConfig(domain);
-  const orgMetadata = await getOrgMetadataForDomain(withoutStaging(domain));
   const previewAuthConfig =
     orgMetadata != null
       ? await getPreviewUrlAuthConfig(orgMetadata)
diff --git a/packages/fern-docs/bundle/src/server/auth/getAuthStateEdge.ts b/packages/fern-docs/bundle/src/server/auth/getAuthStateEdge.ts
index 1e71961c6a..c6a1ad8beb 100644
--- a/packages/fern-docs/bundle/src/server/auth/getAuthStateEdge.ts
+++ b/packages/fern-docs/bundle/src/server/auth/getAuthStateEdge.ts
@@ -15,5 +15,11 @@ export async function createGetAuthStateEdge(
 ): ReturnType<typeof createGetAuthState> {
   const domain = getDocsDomainEdge(request);
   const fern_token = request.cookies.get(COOKIE_FERN_TOKEN)?.value;
-  return createGetAuthState(domain, fern_token, undefined, setFernToken);
+  return createGetAuthState(
+    domain,
+    fern_token,
+    undefined,
+    undefined,
+    setFernToken
+  );
 }
diff --git a/packages/fern-docs/bundle/src/server/auth/metadata-for-url.ts b/packages/fern-docs/bundle/src/server/auth/metadata-for-url.ts
deleted file mode 100644
index e062ef66ee..0000000000
--- a/packages/fern-docs/bundle/src/server/auth/metadata-for-url.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import "server-only";
-
-import { DocsMetadataLoader } from "@fern-docs/cache";
-
-export interface OrgMetadata {
-  orgId: string;
-  isPreviewUrl: boolean;
-}
-
-export async function getOrgMetadataForDomain(
-  domain: string
-): Promise<OrgMetadata | undefined> {
-  if (!domain || typeof domain !== "string") {
-    return undefined;
-  }
-
-  try {
-    const loader = DocsMetadataLoader.create(domain).withEnvironment(
-      process.env.NEXT_PUBLIC_FDR_ORIGIN
-    );
-    const metadata = await loader.getMetadata();
-    return metadata ?? undefined;
-  } catch (_) {
-    return undefined;
-  }
-}
diff --git a/packages/fern-docs/bundle/src/server/docs-loader.ts b/packages/fern-docs/bundle/src/server/docs-loader.ts
index b88d20ec22..74ad269090 100644
--- a/packages/fern-docs/bundle/src/server/docs-loader.ts
+++ b/packages/fern-docs/bundle/src/server/docs-loader.ts
@@ -19,9 +19,14 @@ import { CONTINUE, SKIP } from "@fern-api/fdr-sdk/traversers";
 import { isPlainObject } from "@fern-api/ui-core-utils";
 import { AuthEdgeConfig } from "@fern-docs/auth";
 import { getAuthEdgeConfig, getEdgeFlags } from "@fern-docs/edge-config";
-import { DEFAULT_LOGO_HEIGHT, EdgeFlags } from "@fern-docs/utils";
+import {
+  DEFAULT_LOGO_HEIGHT,
+  EdgeFlags,
+  withoutStaging,
+} from "@fern-docs/utils";
 
 import { AuthState, createGetAuthState } from "./auth/getAuthState";
+import { getDocsUrlMetadata } from "./getDocsUrlMetadata";
 import { loadWithUrl as uncachedLoadWithUrl } from "./loadWithUrl";
 import { ColorsThemeConfig, FileData, RgbaColor } from "./types";
 import { pruneWithAuthState } from "./withRbac";
@@ -31,7 +36,6 @@ const loadWithUrl = cache(uncachedLoadWithUrl);
 export interface DocsLoader {
   domain: string;
   fern_token: string | undefined;
-  authConfig: AuthEdgeConfig | undefined;
 
   /**
    * @returns the base url (including base path) of the docs
@@ -41,6 +45,15 @@ export interface DocsLoader {
     basePath: string | undefined;
   }>;
 
+  /**
+   * @returns the metadata for the given url
+   */
+  getMetadata: () => Promise<{
+    url: string;
+    org: string;
+    isPreview: boolean;
+  }>;
+
   /**
    * @returns a map of file names to their contents
    */
@@ -116,12 +129,9 @@ const cachedGetEdgeFlags = cache(async (domain: string) => {
 const getBaseUrl = cache(
   async (domain: string): Promise<DocsV2Read.BaseUrl> => {
     const response = await loadWithUrl(domain);
-    if (!response.ok) {
-      return { domain, basePath: undefined };
-    }
     return {
-      domain: response.body.baseUrl.domain,
-      basePath: response.body.baseUrl.basePath,
+      domain: response.baseUrl.domain,
+      basePath: response.baseUrl.basePath,
     };
   }
 );
@@ -129,10 +139,7 @@ const getBaseUrl = cache(
 const getFiles = cache(
   async (domain: string): Promise<Record<string, FileData>> => {
     const response = await loadWithUrl(domain);
-    if (!response.ok) {
-      return {};
-    }
-    return mapValues(response.body.definition.filesV2, (file) => {
+    return mapValues(response.definition.filesV2, (file) => {
       if (file.type === "url") {
         return {
           src: file.url,
@@ -154,14 +161,11 @@ const getFiles = cache(
 const getApi = cache(
   async (domain: string, id: string): Promise<ApiDefinition.ApiDefinition> => {
     const response = await loadWithUrl(domain);
-    if (!response.ok) {
-      notFound();
-    }
-    const latest = response.body.definition.apisV2[ApiDefinitionId(id)];
+    const latest = response.definition.apisV2[ApiDefinitionId(id)];
     if (latest != null) {
       return latest;
     }
-    const v1 = response.body.definition.apis[ApiDefinitionId(id)];
+    const v1 = response.definition.apis[ApiDefinitionId(id)];
     if (v1 == null) {
       notFound();
     }
@@ -172,10 +176,7 @@ const getApi = cache(
 
 const unsafe_getFullRoot = cache(async (domain: string) => {
   const response = await loadWithUrl(domain);
-  if (!response.ok) {
-    notFound();
-  }
-  const v1 = response.body.definition.config.root;
+  const v1 = response.definition.config.root;
 
   if (!v1) {
     notFound();
@@ -246,19 +247,13 @@ const getNavigationNode = async (
 
 const getConfig = cache(async (domain: string) => {
   const response = await loadWithUrl(domain);
-  if (!response.ok) {
-    notFound();
-  }
-  const { navigation, root, ...config } = response.body.definition.config;
+  const { navigation, root, ...config } = response.definition.config;
   return config;
 });
 
 const getPage = cache(async (domain: string, pageId: string) => {
   const response = await loadWithUrl(domain);
-  if (!response.ok) {
-    notFound();
-  }
-  const page = response.body.definition.pages[pageId as PageId];
+  const page = response.definition.pages[pageId as PageId];
   if (page == null) {
     notFound();
   }
@@ -271,10 +266,7 @@ const getPage = cache(async (domain: string, pageId: string) => {
 
 const getMdxBundlerFiles = cache(async (domain: string) => {
   const response = await loadWithUrl(domain);
-  if (!response.ok) {
-    return {};
-  }
-  return response.body.definition.jsFiles ?? {};
+  return response.definition.jsFiles ?? {};
 });
 
 const getColors = cache(async (domain: string) => {
@@ -375,13 +367,16 @@ export const createCachedDocsLoader = async (
   domain: string,
   fern_token?: string
 ): Promise<DocsLoader> => {
-  const authConfig = await getAuthConfig(domain);
+  domain = withoutStaging(domain);
+  const authConfig = getAuthConfig(domain);
+  const metadata = getDocsUrlMetadata(domain);
 
   const getAuthState = async (pathname?: string) => {
     const { getAuthState } = await createGetAuthState(
       domain,
       fern_token,
-      authConfig
+      await authConfig,
+      await metadata
     );
 
     return await getAuthState(pathname);
@@ -390,10 +385,10 @@ export const createCachedDocsLoader = async (
   return {
     domain,
     fern_token,
-    authConfig,
     getBaseUrl: unstable_cache(() => getBaseUrl(domain), [domain], {
       tags: [domain, "getBaseUrl"],
     }),
+    getMetadata: () => metadata,
     getFiles: unstable_cache(() => getFiles(domain), [domain], {
       tags: [domain, "files"],
     }),
@@ -406,9 +401,9 @@ export const createCachedDocsLoader = async (
       tags: [domain, "api"],
     }),
     getRoot: async () =>
-      getRootCached(domain, await getAuthState(), authConfig),
+      getRootCached(domain, await getAuthState(), await authConfig),
     getNavigationNode: async (id: string) =>
-      getNavigationNode(domain, id, await getAuthState(), authConfig),
+      getNavigationNode(domain, id, await getAuthState(), await authConfig),
     unsafe_getFullRoot: () => unsafe_getRootCached(domain),
     getConfig: unstable_cache(() => getConfig(domain), [domain], {
       tags: [domain, "getConfig"],
diff --git a/packages/fern-docs/bundle/src/server/env-variables.ts b/packages/fern-docs/bundle/src/server/env-variables.ts
index 93ed837b9d..bbad8dc6a4 100644
--- a/packages/fern-docs/bundle/src/server/env-variables.ts
+++ b/packages/fern-docs/bundle/src/server/env-variables.ts
@@ -1,3 +1,5 @@
+import { withDefaultProtocol } from "@fern-api/ui-core-utils";
+
 export function algoliaAppId(): string {
   return getEnvVariable("ALGOLIA_APP_ID");
 }
@@ -42,6 +44,12 @@ export function openaiApiKey(): string {
   return getEnvVariable("OPENAI_API_KEY");
 }
 
+export function getFdrOrigin(): string {
+  return withDefaultProtocol(
+    process.env.NEXT_PUBLIC_FDR_ORIGIN ?? "https://registry.buildwithfern.com"
+  );
+}
+
 function assertNonNullable<T>(
   value: T,
   key: string
diff --git a/packages/fern-docs/bundle/src/server/getDocsUrlMetadata.ts b/packages/fern-docs/bundle/src/server/getDocsUrlMetadata.ts
new file mode 100644
index 0000000000..590896a48f
--- /dev/null
+++ b/packages/fern-docs/bundle/src/server/getDocsUrlMetadata.ts
@@ -0,0 +1,67 @@
+import { unstable_cache } from "next/cache";
+import { notFound } from "next/navigation";
+
+import { fernToken_admin, getFdrOrigin } from "./env-variables";
+
+const uncachedGetDocsUrlMetadata = async (
+  domain: string
+): Promise<{
+  url: string;
+  org: string;
+  isPreview: boolean;
+}> => {
+  try {
+    const response = await fetch(
+      `${getFdrOrigin()}/v2/registry/docs/metadata-for-url`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${fernToken_admin()}`,
+        },
+        body: JSON.stringify({ url: domain }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(
+        `Invalid docs url metadata (response is not ok) ${response.status} ${response.statusText}`
+      );
+    }
+
+    const body = await response.json();
+    if (typeof body !== "object" || body == null) {
+      throw new Error("Invalid docs url metadata (body is not an object)");
+    }
+    if (typeof body.url !== "string") {
+      throw new Error("Invalid docs url metadata (url is not a string)");
+    }
+    if (typeof body.org !== "string") {
+      throw new Error("Invalid docs url metadata (org is not a string)");
+    }
+    if (typeof body.isPreviewUrl !== "boolean") {
+      throw new Error(
+        "Invalid docs url metadata (isPreviewUrl is not a boolean)"
+      );
+    }
+    return {
+      url: body.url,
+      org: body.org,
+      isPreview: body.isPreviewUrl,
+    };
+  } catch (error) {
+    console.error("Failed to get docs url metadata", {
+      cause: error,
+    });
+    notFound();
+  }
+};
+
+export const getDocsUrlMetadata = (domain: string) => {
+  const get = unstable_cache(
+    uncachedGetDocsUrlMetadata,
+    ["docs-url-metadata"],
+    { tags: [domain, "getDocsUrlMetadata"] }
+  );
+  return get(domain);
+};
diff --git a/packages/fern-docs/bundle/src/server/ld-adapter.ts b/packages/fern-docs/bundle/src/server/ld-adapter.ts
index c1692acee6..1b8ac30b58 100644
--- a/packages/fern-docs/bundle/src/server/ld-adapter.ts
+++ b/packages/fern-docs/bundle/src/server/ld-adapter.ts
@@ -6,7 +6,7 @@ import { FernNavigation } from "@fern-api/fdr-sdk";
 import { getLaunchDarklySettings } from "@fern-docs/edge-config";
 
 import { AuthState } from "./auth/getAuthState";
-import { getOrgMetadataForDomain } from "./auth/metadata-for-url";
+import { DocsLoader } from "./docs-loader";
 
 async function withLaunchDarklyContext(
   endpoint: string | undefined,
@@ -65,8 +65,7 @@ interface LaunchDarklyInfo {
 }
 
 export async function withLaunchDarkly(
-  domain: string,
-  authState: AuthState,
+  loader: DocsLoader,
   node: FernNavigation.utils.Node,
   rawCookie?: string
 ): Promise<
@@ -76,13 +75,13 @@ export async function withLaunchDarkly(
   ]
 > {
   const launchDarklyConfig = await getLaunchDarklySettings(
-    domain,
-    getOrgMetadataForDomain(domain).then((metadata) => metadata?.orgId)
+    loader.domain,
+    loader.getMetadata().then((metadata) => metadata?.org)
   );
   if (launchDarklyConfig) {
     const context = await withLaunchDarklyContext(
       launchDarklyConfig["context-endpoint"],
-      authState,
+      await loader.getAuthState(),
       node,
       rawCookie
     );
diff --git a/packages/fern-docs/bundle/src/server/loadWithUrl.ts b/packages/fern-docs/bundle/src/server/loadWithUrl.ts
index 02cf3ec3cb..6e5973a075 100644
--- a/packages/fern-docs/bundle/src/server/loadWithUrl.ts
+++ b/packages/fern-docs/bundle/src/server/loadWithUrl.ts
@@ -1,3 +1,5 @@
+import { notFound } from "next/navigation";
+
 import { APIResponse, FdrAPI } from "@fern-api/fdr-sdk/client/types";
 import { withoutStaging } from "@fern-docs/utils";
 
@@ -18,7 +20,7 @@ export type LoadWithUrlResponse = APIResponse<
  */
 export const loadWithUrl = async (
   domain: string
-): Promise<LoadWithUrlResponse> => {
+): Promise<FdrAPI.docs.v2.read.LoadDocsForUrlResponse> => {
   const domainWithoutStaging = withoutStaging(domain);
 
   let response;
@@ -28,18 +30,22 @@ export const loadWithUrl = async (
       docsBucketName: getDocsDefinitionBucketName(),
     });
     if (response != null) {
-      return {
-        ok: true,
-        body: response,
-      };
+      return response;
     }
   } catch (error) {
     console.error("Failed to load docs definition:", error);
   }
 
-  return provideRegistryService().docs.v2.read.getDocsForUrl({
+  response = await provideRegistryService().docs.v2.read.getDocsForUrl({
     url: FdrAPI.Url(domainWithoutStaging),
   });
+  if (response.ok) {
+    return response.body;
+  }
+  console.error("Failed to load docs", {
+    cause: response.error,
+  });
+  notFound();
 };
 
 function getDocsDefinitionBucketName() {
diff --git a/packages/fern-docs/bundle/src/state/navigation.tsx b/packages/fern-docs/bundle/src/state/navigation.tsx
index 005f3e696c..57d43d8b6b 100644
--- a/packages/fern-docs/bundle/src/state/navigation.tsx
+++ b/packages/fern-docs/bundle/src/state/navigation.tsx
@@ -115,6 +115,11 @@ export function useCurrentTab() {
   return parents?.find((parent) => parent.type === "tab");
 }
 
+export function useTabs() {
+  const { parents } = useNode();
+  return parents?.find((parent) => parent.type === "tabbed")?.children;
+}
+
 export function useCurrentVersion() {
   const { parents, current } = useNode();
   if (current?.type === "version") {
diff --git a/packages/fern-docs/cache/.depcheckrc.json b/packages/fern-docs/cache/.depcheckrc.json
deleted file mode 100644
index 9335a9197e..0000000000
--- a/packages/fern-docs/cache/.depcheckrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "ignores": ["@fern-platform/configs", "@types/node", "vite", "@types/react"],
-  "ignore-patterns": ["dist"]
-}
diff --git a/packages/fern-docs/cache/.stylelintrc.json b/packages/fern-docs/cache/.stylelintrc.json
deleted file mode 100644
index 0d2e3ff61d..0000000000
--- a/packages/fern-docs/cache/.stylelintrc.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "extends": ["../../../shared/stylelintrc.shared.json"] }
diff --git a/packages/fern-docs/cache/package.json b/packages/fern-docs/cache/package.json
deleted file mode 100644
index 56b96b2c13..0000000000
--- a/packages/fern-docs/cache/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "@fern-docs/cache",
-  "version": "0.0.0",
-  "private": true,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fern-api/fern-platform.git",
-    "directory": "packages/fern-docs/cache"
-  },
-  "sideEffects": false,
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "clean": "rm -rf ./lib && tsc --build --clean",
-    "compile": "tsc --build",
-    "depcheck": "depcheck",
-    "dev": "tsc --watch",
-    "docs:dev": "pnpm dev",
-    "format": "prettier --write --ignore-unknown \"**\"",
-    "format:check": "prettier --check --ignore-unknown \"**\"",
-    "lint:eslint": "eslint --max-warnings 0 .",
-    "lint:eslint:fix": "pnpm lint:eslint --fix",
-    "lint:style": "stylelint 'src/**/*.scss' --allow-empty-input --max-warnings 0",
-    "lint:style:fix": "pnpm lint:style --fix",
-    "test": "vitest --run --passWithNoTests --globals"
-  },
-  "dependencies": {
-    "@fern-api/fdr-sdk": "workspace:*",
-    "@fern-api/ui-core-utils": "workspace:*",
-    "@fern-docs/utils": "workspace:*",
-    "@vercel/kv": "^2.0.0",
-    "httpsnippet-lite": "^3.0.5",
-    "ts-essentials": "^10.0.1"
-  },
-  "devDependencies": {
-    "@fern-platform/configs": "workspace:*",
-    "@types/node": "^18.7.18",
-    "depcheck": "^1.4.7",
-    "eslint": "^9",
-    "prettier": "^3.4.2",
-    "stylelint": "^16.1.0",
-    "typescript": "^5",
-    "vitest": "^3.0.5"
-  }
-}
diff --git a/packages/fern-docs/cache/src/DocsKVCache.ts b/packages/fern-docs/cache/src/DocsKVCache.ts
deleted file mode 100644
index f0fa3873c6..0000000000
--- a/packages/fern-docs/cache/src/DocsKVCache.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { kv } from "@vercel/kv";
-
-const DEPLOYMENT_ID = process.env.VERCEL_DEPLOYMENT_ID ?? "development";
-const PREFIX = `docs:${DEPLOYMENT_ID}`;
-
-export interface DocsMetadata {
-  orgId: string;
-  isPreviewUrl: boolean;
-}
-
-export class DocsDomainKVCache {
-  private static instance: Map<string, DocsDomainKVCache> = new Map<
-    string,
-    DocsDomainKVCache
-  >();
-  public static getInstance(domain: string): DocsDomainKVCache {
-    const instance = DocsDomainKVCache.instance.get(domain);
-    if (!instance) {
-      const newInstance = new DocsDomainKVCache(domain);
-      DocsDomainKVCache.instance.set(domain, newInstance);
-      return newInstance;
-    } else {
-      return instance;
-    }
-  }
-
-  private constructor(private domain: string) {}
-
-  private createKey(key: string): string {
-    return `${PREFIX}:${this.domain}:${key}`;
-  }
-
-  public async getMetadata(): Promise<DocsMetadata | null> {
-    const key = this.createKey("metadata");
-    try {
-      const metadata = await kv.get<DocsMetadata>(key);
-      return metadata ?? null;
-    } catch (e) {
-      console.error(`Could not get ${key} from cache`, e);
-      return null;
-    }
-  }
-
-  public async setMetadata(metadata: DocsMetadata): Promise<void> {
-    const key = this.createKey("metadata");
-    try {
-      await kv.set(key, metadata, { ex: 24 * 60 * 60 }); // expire after 1 day
-    } catch (e) {
-      console.error(`Could not set ${key} in cache`, e);
-    }
-  }
-}
diff --git a/packages/fern-docs/cache/src/DocsMetadataLoader.ts b/packages/fern-docs/cache/src/DocsMetadataLoader.ts
deleted file mode 100644
index 9b34153f44..0000000000
--- a/packages/fern-docs/cache/src/DocsMetadataLoader.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { FdrAPI, FdrClient } from "@fern-api/fdr-sdk";
-
-import { DocsDomainKVCache } from "./DocsKVCache";
-
-export interface DocsMetadata {
-  orgId: string;
-  isPreviewUrl: boolean;
-}
-
-export class DocsMetadataLoader {
-  public static create(domain: string): DocsMetadataLoader {
-    return new DocsMetadataLoader(domain);
-  }
-
-  private environment: string | undefined;
-  public withEnvironment = (environment: string | undefined): this => {
-    this.environment = environment;
-    return this;
-  };
-
-  private domain: string;
-  private cache: DocsDomainKVCache;
-  private constructor(xFernHost: string) {
-    this.domain = xFernHost;
-    this.cache = DocsDomainKVCache.getInstance(xFernHost);
-  }
-
-  public getMetadata = async (): Promise<DocsMetadata | undefined> => {
-    // Try to get the org ID from the cache first
-    const metadata = await this.cache.getMetadata();
-    if (metadata != null) {
-      return metadata;
-    }
-
-    // If not in cache, fetch from the API
-    try {
-      const response = await this.#loadMetadataForUrl();
-      if (response == null) {
-        return undefined;
-      }
-      const metadata = {
-        isPreviewUrl: response.isPreviewUrl,
-        orgId: response.org,
-      };
-      await this.cache.setMetadata(metadata);
-      return metadata;
-    } catch (_error) {
-      return undefined;
-    }
-  };
-
-  #getClient = () => new FdrClient({ environment: this.environment });
-  #loadMetadataForUrl = async (): Promise<
-    FdrAPI.docs.v2.read.DocsUrlMetadata | undefined
-  > => {
-    const response = await this.#getClient().docs.v2.read.getDocsUrlMetadata(
-      { url: FdrAPI.Url(this.domain) },
-      { timeoutInSeconds: 3 }
-    );
-    if (!response.ok) {
-      return undefined;
-    }
-    return response.body;
-  };
-}
diff --git a/packages/fern-docs/cache/src/index.ts b/packages/fern-docs/cache/src/index.ts
deleted file mode 100644
index b28666facf..0000000000
--- a/packages/fern-docs/cache/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DocsMetadataLoader";
diff --git a/packages/fern-docs/cache/tsconfig.eslint.json b/packages/fern-docs/cache/tsconfig.eslint.json
deleted file mode 100644
index 7825a88f18..0000000000
--- a/packages/fern-docs/cache/tsconfig.eslint.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "."
-  },
-  "include": ["src/**/*", "vitest.config.ts"]
-}
diff --git a/packages/fern-docs/cache/tsconfig.json b/packages/fern-docs/cache/tsconfig.json
deleted file mode 100644
index c1019d6bf3..0000000000
--- a/packages/fern-docs/cache/tsconfig.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "extends": "@fern-platform/configs/tsconfig/library.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["./src/**/*"],
-  "references": [
-    {
-      "path": "../../fdr-sdk/tsconfig.build.json"
-    },
-    {
-      "path": "../../commons/core-utils"
-    },
-    {
-      "path": "../utils"
-    }
-  ]
-}
diff --git a/packages/fern-docs/cache/vitest.config.ts b/packages/fern-docs/cache/vitest.config.ts
deleted file mode 100644
index e2ec332940..0000000000
--- a/packages/fern-docs/cache/vitest.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  test: {
-    globals: true,
-  },
-});
diff --git a/packages/fern-docs/components/src/FernButton.tsx b/packages/fern-docs/components/src/FernButton.tsx
index e8fbe10424..86436a109a 100644
--- a/packages/fern-docs/components/src/FernButton.tsx
+++ b/packages/fern-docs/components/src/FernButton.tsx
@@ -10,9 +10,10 @@ import {
   useRef,
 } from "react";
 
+import { Slot } from "@radix-ui/react-slot";
 import cn, { clsx } from "clsx";
 
-import { FernTooltip, FernTooltipProvider } from "./FernTooltip";
+import { FernTooltip } from "./FernTooltip";
 import { SemanticColor } from "./colors";
 import { FaIcon } from "./fa-icon";
 
@@ -122,14 +123,15 @@ export const FernButton = forwardRef<HTMLButtonElement, FernButtonProps>(
 
 export const FernButtonGroup = forwardRef<
   HTMLSpanElement,
-  ComponentProps<"div">
->(function FernButtonGroup({ className, children, ...props }, ref) {
+  ComponentProps<"span"> & {
+    asChild?: boolean;
+  }
+>(function FernButtonGroup({ className, children, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : "span";
   return (
-    <FernTooltipProvider>
-      <span ref={ref} className={cn(className, "fern-button-group")} {...props}>
-        {children}
-      </span>
-    </FernTooltipProvider>
+    <Comp {...props} ref={ref} className={cn("fern-button-group", className)}>
+      {children}
+    </Comp>
   );
 });
 
diff --git a/packages/fern-docs/edge-config/src/getPreviewUrlAuthConfig.ts b/packages/fern-docs/edge-config/src/getPreviewUrlAuthConfig.ts
index ab4ccda731..389222a8a7 100644
--- a/packages/fern-docs/edge-config/src/getPreviewUrlAuthConfig.ts
+++ b/packages/fern-docs/edge-config/src/getPreviewUrlAuthConfig.ts
@@ -19,18 +19,18 @@ const PreviewUrlAuthConfigSchema = z.record(PreviewUrlAuthSchema);
 type PreviewUrlAuthConfig = z.infer<typeof PreviewUrlAuthConfigSchema>;
 
 export interface Metadata {
-  isPreviewUrl: boolean;
-  orgId: string;
+  isPreview: boolean;
+  org: string;
 }
 
 export async function getPreviewUrlAuthConfig(
   metadata: Metadata
 ): Promise<PreviewUrlAuth | undefined> {
-  if (!metadata.isPreviewUrl) {
+  if (!metadata.isPreview) {
     return undefined;
   }
   const config = await get<PreviewUrlAuthConfig>("authed-previews");
-  return config?.[metadata.orgId];
+  return config?.[metadata.org];
 }
 
 export function isPreviewDomain(domain: string): boolean {
diff --git a/packages/fern-docs/mdx/src/parse.ts b/packages/fern-docs/mdx/src/parse.ts
index a131fac515..23d1e854d3 100644
--- a/packages/fern-docs/mdx/src/parse.ts
+++ b/packages/fern-docs/mdx/src/parse.ts
@@ -6,8 +6,8 @@ import rehypeSlug from "rehype-slug";
 import { customHeadingHandler } from "./handlers/custom-headings";
 import { mdastFromMarkdown } from "./mdast-utils/mdast-from-markdown";
 import { extractJsx } from "./mdx-utils/extract-jsx";
+import { remarkMarkAndUnravel } from "./plugins/remark-mark-and-unravel";
 import { remarkSanitizeAcorn } from "./plugins/remark-sanitize-acorn";
-import { remarkUnravel } from "./plugins/remark-unravel";
 import { sanitizeBreaks } from "./sanitize/sanitize-breaks";
 import { sanitizeMdxExpression } from "./sanitize/sanitize-mdx-expression";
 
@@ -51,7 +51,7 @@ export function toTree(
 
   // this is forked from mdxjs, but we need to run it before we convert to hast
   // so that we can correctly identify explicit JSX nodes
-  (remarkUnravel as any)()(mdast);
+  (remarkMarkAndUnravel as any)()(mdast);
 
   if (sanitize) {
     // sanitize the acorn expressions
diff --git a/packages/fern-docs/mdx/src/plugins/index.ts b/packages/fern-docs/mdx/src/plugins/index.ts
index d7a9c06b5a..579e3ac0e2 100644
--- a/packages/fern-docs/mdx/src/plugins/index.ts
+++ b/packages/fern-docs/mdx/src/plugins/index.ts
@@ -4,4 +4,3 @@ export * from "./rehype-squeeze-paragraphs";
 export * from "./rehype-toc";
 export * from "./remark-inject-esm";
 export * from "./remark-sanitize-acorn";
-export * from "./remark-unravel";
diff --git a/packages/fern-docs/mdx/src/plugins/remark-unravel.ts b/packages/fern-docs/mdx/src/plugins/remark-mark-and-unravel.ts
similarity index 70%
rename from packages/fern-docs/mdx/src/plugins/remark-unravel.ts
rename to packages/fern-docs/mdx/src/plugins/remark-mark-and-unravel.ts
index ec29122796..ad202af675 100644
--- a/packages/fern-docs/mdx/src/plugins/remark-unravel.ts
+++ b/packages/fern-docs/mdx/src/plugins/remark-mark-and-unravel.ts
@@ -1,9 +1,8 @@
 import { collapseWhiteSpace } from "collapse-white-space";
+import { walk } from "estree-walker";
 import type { Root } from "mdast";
 import type { Plugin } from "unified";
-import { SKIP, visit } from "unist-util-visit";
-
-import { Mdast } from "../types";
+import { visit } from "unist-util-visit";
 
 // Forked from https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/plugin/remark-mark-and-unravel.js
 
@@ -17,9 +16,9 @@ import { Mdast } from "../types";
  * @returns
  *   Transform.
  */
-export const remarkUnravel: Plugin<[], Root> = () => {
-  return (ast) => {
-    visit(ast, (node, index, parent) => {
+export const remarkMarkAndUnravel: Plugin<[], Root> = () => {
+  return (tree) => {
+    visit(tree, (node, index, parent) => {
       let offset = -1;
       let all = true;
       let oneOrMore = false;
@@ -55,7 +54,8 @@ export const remarkUnravel: Plugin<[], Root> = () => {
         if (all && oneOrMore) {
           offset = -1;
 
-          const newChildren: Mdast.RootContent[] = [];
+          /** @type {Array<RootContent>} */
+          const newChildren = [];
 
           while (++offset < children.length) {
             const child = children[offset];
@@ -84,33 +84,33 @@ export const remarkUnravel: Plugin<[], Root> = () => {
           }
 
           parent.children.splice(index, 1, ...newChildren);
-          return [SKIP, index];
+          return index;
         }
       }
 
-      // if (
-      //   node.type === "mdxJsxFlowElement" ||
-      //   node.type === "mdxJsxTextElement"
-      // ) {
-      //   const data = node.data || (node.data = {});
-      //   data._mdxExplicitJsx = true;
-      // }
+      if (
+        node.type === "mdxJsxFlowElement" ||
+        node.type === "mdxJsxTextElement"
+      ) {
+        const data = node.data || (node.data = {});
+        data._mdxExplicitJsx = true;
+      }
 
-      // if (
-      //   (node.type === "mdxFlowExpression" ||
-      //     node.type === "mdxTextExpression" ||
-      //     node.type === "mdxjsEsm") &&
-      //   node.data?.estree
-      // ) {
-      //   walk(node.data.estree, {
-      //     enter(node) {
-      //       if (node.type === "JSXElement") {
-      //         const data = node.data || (node.data = {});
-      //         data._mdxExplicitJsx = true;
-      //       }
-      //     },
-      //   });
-      // }
+      if (
+        (node.type === "mdxFlowExpression" ||
+          node.type === "mdxTextExpression" ||
+          node.type === "mdxjsEsm") &&
+        node.data?.estree
+      ) {
+        walk(node.data.estree, {
+          enter(node) {
+            if (node.type === "JSXElement") {
+              const data = node.data || (node.data = {});
+              data._mdxExplicitJsx = true;
+            }
+          },
+        });
+      }
 
       return;
     });
diff --git a/packages/fern-docs/search-ui/src/components/search-client.tsx b/packages/fern-docs/search-ui/src/components/search-client.tsx
index 5ea33cffbb..1faa8b89e3 100644
--- a/packages/fern-docs/search-ui/src/components/search-client.tsx
+++ b/packages/fern-docs/search-ui/src/components/search-client.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Dispatch,
   KeyboardEventHandler,
@@ -316,6 +318,7 @@ function InstantSearchWrapper({
           ? { insightsInitParams: { authenticatedUserToken } }
           : undefined
       }
+      routing
     >
       <Configure
         attributesToSnippet={["description:32", "content:32"]}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74e5f1e4f7..f6b440a5e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -725,9 +725,6 @@ importers:
       '@fern-docs/auth':
         specifier: workspace:*
         version: link:../auth
-      '@fern-docs/cache':
-        specifier: workspace:*
-        version: link:../cache
       '@fern-docs/components':
         specifier: workspace:*
         version: link:../components
@@ -1186,52 +1183,6 @@ importers:
         specifier: ^3.0.5
         version: 3.0.5(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@18.19.33)(jiti@1.21.7)(jsdom@24.0.0)(less@4.2.0)(sass@1.77.0)(stylus@0.62.0)(terser@5.38.1)(tsx@4.19.2)(yaml@2.7.0)
 
-  packages/fern-docs/cache:
-    dependencies:
-      '@fern-api/fdr-sdk':
-        specifier: workspace:*
-        version: link:../../fdr-sdk
-      '@fern-api/ui-core-utils':
-        specifier: workspace:*
-        version: link:../../commons/core-utils
-      '@fern-docs/utils':
-        specifier: workspace:*
-        version: link:../utils
-      '@vercel/kv':
-        specifier: ^2.0.0
-        version: 2.0.0
-      httpsnippet-lite:
-        specifier: ^3.0.5
-        version: 3.0.5
-      ts-essentials:
-        specifier: ^10.0.1
-        version: 10.0.1(typescript@5.7.2)
-    devDependencies:
-      '@fern-platform/configs':
-        specifier: workspace:*
-        version: link:../../configs
-      '@types/node':
-        specifier: ^18.7.18
-        version: 18.19.33
-      depcheck:
-        specifier: ^1.4.7
-        version: 1.4.7
-      eslint:
-        specifier: 9.17.0
-        version: 9.17.0(jiti@1.21.7)
-      prettier:
-        specifier: ^3.4.2
-        version: 3.4.2
-      stylelint:
-        specifier: ^16.1.0
-        version: 16.5.0(typescript@5.7.2)
-      typescript:
-        specifier: 5.7.2
-        version: 5.7.2
-      vitest:
-        specifier: ^3.0.5
-        version: 3.0.5(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@18.19.33)(jiti@1.21.7)(jsdom@24.0.0)(less@4.2.0)(sass@1.77.0)(stylus@0.62.0)(terser@5.38.1)(tsx@4.19.2)(yaml@2.7.0)
-
   packages/fern-docs/components:
     dependencies:
       '@fern-ui/react-commons':
@@ -10868,10 +10819,6 @@ packages:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
-  formdata-node@4.4.1:
-    resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==}
-    engines: {node: '>= 12.20'}
-
   formdata-node@6.0.3:
     resolution: {integrity: sha512-8e1++BCiTzUno9v5IZ2J6bv4RU+3UKDmqWUQD0MIMVCd9AdhWkO1gw57oo1mNEX1dMq2EGI+FbWz4B92pscSQg==}
     engines: {node: '>= 18'}
@@ -11472,10 +11419,6 @@ packages:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
-  httpsnippet-lite@3.0.5:
-    resolution: {integrity: sha512-So4qTXY5iFj5XtFDwyz2PicUu+8NWrI8e8h+ZeZoVtMNcFQp4FFIntBHUE+JPUG6QQU8o1VHCy+X4ETRDwt9CA==}
-    engines: {node: '>=14.13'}
-
   httpsnippet@3.0.1:
     resolution: {integrity: sha512-RJbzVu9Gq97Ti76MPKAb9AknKbRluRbzOqswM2qgEW48QUShVEIuJjl43dZG5q0Upj2SZlKqzR6B6ah1q5znfg==}
     engines: {node: ^14.19.1 || ^16.14.2 || ^18.0.0}
@@ -13286,10 +13229,6 @@ packages:
     resolution: {integrity: sha512-dOal67//nohNgYWb+nWmg5dkFdIwDm8EpeGYMekPMrngV3637lqnX0lbUcCtgibHTz6SEz7DAIjKvKDFYCnO1A==}
     engines: {node: '>=6.0.0'}
 
-  node-domexception@1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-
   node-emoji@2.1.3:
     resolution: {integrity: sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==}
     engines: {node: '>=18'}
@@ -16681,10 +16620,6 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
-  web-streams-polyfill@4.0.0-beta.3:
-    resolution: {integrity: sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==}
-    engines: {node: '>= 14'}
-
   web-vitals@4.2.3:
     resolution: {integrity: sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==}
 
@@ -28375,11 +28310,6 @@ snapshots:
 
   format@0.2.2: {}
 
-  formdata-node@4.4.1:
-    dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 4.0.0-beta.3
-
   formdata-node@6.0.3: {}
 
   forwarded@0.2.0: {}
@@ -29183,12 +29113,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  httpsnippet-lite@3.0.5:
-    dependencies:
-      '@types/har-format': 1.2.15
-      formdata-node: 4.4.1
-      stringify-object: 3.3.0
-
   httpsnippet@3.0.1:
     dependencies:
       chalk: 4.1.2
@@ -31607,8 +31531,6 @@ snapshots:
     dependencies:
       uuid: 8.3.2
 
-  node-domexception@1.0.0: {}
-
   node-emoji@2.1.3:
     dependencies:
       '@sindresorhus/is': 4.6.0
@@ -35653,8 +35575,6 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
-  web-streams-polyfill@4.0.0-beta.3: {}
-
   web-vitals@4.2.3: {}
 
   webcrypto-core@1.8.1: