radiant-docs 0.1.61 → 0.1.63

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -4,6 +4,7 @@ import { withBasePath } from "../../lib/base-path";
 import type { OpenApiRoute } from "../../lib/routes";
 import { getConfig } from "../../lib/validation";
 import { renderMarkdown } from "../../lib/utils";
+import { getClientShikiRuntimeConfig } from "../../lib/client-shiki-config";
 import {
   OPENAPI_REQUEST_SECTION_LABELS,
   type OpenApiRequestFields,
@@ -38,6 +39,7 @@ const {
 } = Astro.props;
 const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const config = await getConfig();
+const shikiRuntimeConfig = getClientShikiRuntimeConfig(config);
 const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
     ? import.meta.env.PUBLIC_PROXY_URL.trim()
@@ -77,6 +79,7 @@ const sectionVariantFieldNames = Object.fromEntries(
     queryFieldMeta: ${JSON.stringify(queryFieldMeta)},
     sectionVariantFieldNames: ${JSON.stringify(sectionVariantFieldNames)},
     bodyDefaultKind: ${JSON.stringify(bodyDefaultKind ?? null)},
+    shiki: ${JSON.stringify(shikiRuntimeConfig ?? null)},
     selectedSectionVariants: {},
     inputs: {
       header: {},
@@ -476,7 +479,7 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
           };
         }
-          console.log("SEND", finalUrl, finalOptions)
+
         // 6. Execute Request
         const res = await fetch(finalUrl, finalOptions);
 
@@ -487,11 +490,12 @@ const sectionVariantFieldNames = Object.fromEntries(
           responseHeaders[key] = value;
         });
 
-        let highlightedData;
-        const highlightedHeaders = Prism.highlight(
+        let responseDataText;
+        let responseDataLanguage = 'plaintext';
+        const highlightedHeaders = await window.RadiantPlaygroundHighlightCode(
           JSON.stringify(responseHeaders, null, 2),
-          Prism.languages.json,
-          "json",
+          'json',
+          this.shiki,
         );
         const contentType = res.headers.get('content-type') || '';
         const responseText = await res.text();
@@ -500,25 +504,19 @@ const sectionVariantFieldNames = Object.fromEntries(
           try {
             const parsed =
               responseText.trim().length > 0 ? JSON.parse(responseText) : null;
-            highlightedData = Prism.highlight(
-              JSON.stringify(parsed, null, 2),
-              Prism.languages.json,
-              'json'
-            );
+            responseDataText = JSON.stringify(parsed, null, 2);
+            responseDataLanguage = 'json';
           } catch (parseError) {
-            highlightedData = Prism.highlight(
-              responseText || '(empty response)',
-              Prism.languages.plaintext,
-              'plaintext'
-            );
+            responseDataText = responseText || '(empty response)';
           }
         } else {
-          highlightedData = Prism.highlight(
-            responseText || '(empty response)',
-            Prism.languages.plaintext,
-            'plaintext'
-          );
+          responseDataText = responseText || '(empty response)';
         }
+        const highlightedData = await window.RadiantPlaygroundHighlightCode(
+          responseDataText,
+          responseDataLanguage,
+          this.shiki,
+        );
 
         this.response = {
           status,
@@ -682,45 +680,61 @@ const sectionVariantFieldNames = Object.fromEntries(
 </div>
 
 <script>
-  import Prism from "prismjs";
-  import "prismjs/components/prism-json";
-  // Use a dark theme that matches the #0d1117 background
-  import "prismjs/themes/prism-tomorrow.css";
-  // Make Prism available to Alpine
-  window.Prism = Prism;
-</script>
-
-<style>
-  @reference "../../styles/global.css";
-
-  :global(pre code span.token.punctuation) {
-    color: #24292e;
+  import {
+    highlightAssistantCodeToHtml,
+    type AssistantShikiRuntimeConfig,
+  } from "../../lib/assistant-shiki-client";
+
+  type PlaygroundShikiConfig = AssistantShikiRuntimeConfig | null | undefined;
+
+  function escapeHtml(value: string): string {
+    return value
+      .replaceAll("&", "&amp;")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#39;");
   }
 
-  :global(pre code span.token.operator) {
-    color: #24292e;
-  }
+  function renderPlainCodeToHtml(code: string): string {
+    const lines = code.split("\n");
+    const normalizedLines = lines.length > 0 ? lines : [""];
 
-  :global(pre code span.token.property) {
-    color: #c62c2c;
-  }
-  :global(pre code span.token.string) {
-    color: #1e7734;
+    return normalizedLines
+      .map((line) => {
+        const lineHtml = line.length > 0 ? escapeHtml(line) : "&nbsp;";
+        return `<span class="flex w-max min-w-full"><span class="flex-1 whitespace-pre pl-3 pr-3">${lineHtml}</span></span>`;
+      })
+      .join("");
   }
 
-  :global(.dark pre code span.token.punctuation) {
-    color: #c9d1d9;
-  }
-
-  :global(.dark pre code span.token.operator) {
-    color: #c9d1d9;
-  }
-
-  :global(.dark pre code span.token.property) {
-    color: #ff7b72;
+  async function highlightPlaygroundCodeToHtml(
+    code: unknown,
+    language: string,
+    config: PlaygroundShikiConfig,
+  ): Promise<string> {
+    const normalizedCode = String(code ?? "");
+    if (!config) return renderPlainCodeToHtml(normalizedCode);
+
+    try {
+      const highlighted = await highlightAssistantCodeToHtml({
+        code: normalizedCode,
+        config,
+        language,
+      });
+      return highlighted.html;
+    } catch (error) {
+      console.error("Playground code highlighting failed", {
+        error,
+        language,
+      });
+      return renderPlainCodeToHtml(normalizedCode);
+    }
   }
 
-  :global(.dark pre code span.token.string) {
-    color: #a5d6ff;
-  }
-</style>
+  (
+    window as typeof window & {
+      RadiantPlaygroundHighlightCode?: typeof highlightPlaygroundCodeToHtml;
+    }
+  ).RadiantPlaygroundHighlightCode = highlightPlaygroundCodeToHtml;
+</script>

package/template/src/components/endpoint/ResponseDisplay.astro

@@ -161,7 +161,7 @@ import { Icon } from "astro-icon/components";
             </div>
             <div x-show="response && response.highlightedData">
               <pre
-                class="relative m-0 min-w-full p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
+                class="relative m-0 min-w-full p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
             </div>
           </div>
 
@@ -185,7 +185,7 @@ import { Icon } from "astro-icon/components";
             </div>
             <div x-show="response && response.highlightedHeaders">
               <pre
-                class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
+                class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
             </div>
           </div>
         </div>

package/template/src/components/user/Accordion.astro

@@ -70,7 +70,7 @@ const TITLE_SIZE_CLASS = {
     <div class="min-h-0 overflow-hidden">
       <div
         data-rd-accordion-content-inner
-        class="prose-rules max-w-none! *:max-w-none! pb-4!"
+        class="prose-rules max-w-none! pb-4!"
       >
         <slot />
       </div>

package/template/src/components/user/Callout.astro

@@ -108,7 +108,7 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
             {resolvedTitle}
           </div>
         </div>
-        <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
+        <div class="prose-rules max-w-none! text-sm! leading-6! text-neutral-700 dark:text-neutral-300">
           <slot />
         </div>
       </>
@@ -129,7 +129,7 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
             class="mt-0.5 shrink-0 border border-white"
           />
         ) : null}
-        <div class="prose-rules prose-sm! max-w-none! min-w-0 flex-1 *:max-w-none! text-neutral-700 dark:text-neutral-300">
+        <div class="prose-rules max-w-none! min-w-0 flex-1 text-sm! leading-6! text-neutral-700 dark:text-neutral-300">
           <slot />
         </div>
       </div>

package/template/src/components/user/CodeBlock.astro

@@ -258,7 +258,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
       ? ' data-rd-code-line-highlighted="true"'
       : "";
 
-    return `<span class="flex min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
+    return `<span class="flex w-max min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
   })
   .join("");
 ---
@@ -339,7 +339,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
     <div
       class:list={[
-        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border)",
+        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
         parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
         parsedFlushTop && "border-t-0",
         parsedShowFilename && "border-t-0 rounded-t-none",
@@ -349,10 +349,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
     >
       {
         !parsedInCodeGroup && !parsedShowFilename ? (
-          <div class="pointer-events-none absolute right-2 top-2 z-20">
+          <div class="pointer-events-none absolute right-2 top-2 z-20 [@media(pointer:coarse)]:pointer-events-auto">
             <button
               type="button"
-              class="pointer-events-none inline-flex size-7 appearance-none items-center justify-center rounded-md bg-(--rd-code-surface)/40 backdrop-blur-sm text-neutral-500/80 outline-none ring-0 transition-colors duration-150 hover:text-neutral-700 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer group-hover/prose-code:pointer-events-auto group-focus-within/prose-code:pointer-events-auto dark:text-neutral-400 dark:hover:text-neutral-200 relative before:absolute before:inset-1 hover:before:inset-0 before:rounded-md hover:before:bg-neutral-900/4 dark:hover:before:bg-white/4 before:duration-150"
+              class="pointer-events-none inline-flex size-7 appearance-none items-center justify-center rounded-md bg-(--rd-code-surface)/40 backdrop-blur-sm text-neutral-500/80 outline-none ring-0 transition-colors duration-150 hover:text-neutral-700 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer group-hover/prose-code:pointer-events-auto group-focus-within/prose-code:pointer-events-auto [@media(pointer:coarse)]:pointer-events-auto dark:text-neutral-400 dark:hover:text-neutral-200 relative before:absolute before:inset-1 hover:before:inset-0 before:rounded-md hover:before:bg-neutral-900/4 dark:hover:before:bg-white/4 before:duration-150"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -390,10 +390,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
       <div
         data-rd-code-scroll-area
-        class="relative overflow-x-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
+        class="relative overflow-x-auto overscroll-x-contain bg-(--rd-code-surface) [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
       >
         <pre
-          class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
+          class="relative m-0 w-max min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block w-max min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
       </div>
     </div>
   </div>
@@ -432,6 +432,52 @@ const renderedCodeLinesHtml = normalizedTokenLines
         checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
       };
 
+      const fallbackCopy = (text) => {
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.setAttribute("readonly", "");
+          textarea.style.position = "fixed";
+          textarea.style.top = "0";
+          textarea.style.left = "0";
+          textarea.style.width = "1px";
+          textarea.style.height = "1px";
+          textarea.style.padding = "0";
+          textarea.style.border = "0";
+          textarea.style.opacity = "0";
+          textarea.style.fontSize = "16px";
+          textarea.style.pointerEvents = "none";
+          document.body.appendChild(textarea);
+
+          try {
+            textarea.focus({ preventScroll: true });
+          } catch {
+            textarea.focus();
+          }
+          textarea.select();
+          textarea.setSelectionRange(0, textarea.value.length);
+
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch {
+          return false;
+        }
+      };
+
+      const copyToClipboard = async (text) => {
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+          }
+        } catch {
+          // Fallback below when the async Clipboard API is unavailable or blocked.
+        }
+
+        return fallbackCopy(text);
+      };
+
       copyButtons.forEach((button) => {
         let timeoutId = null;
         button.addEventListener("click", async () => {
@@ -440,7 +486,12 @@ const renderedCodeLinesHtml = normalizedTokenLines
           const copyValue = decodeURIComponent(encodedCopyValue);
 
           try {
-            await navigator.clipboard.writeText(copyValue);
+            const copied = await copyToClipboard(copyValue);
+            if (!copied) {
+              setCopiedState(button, false);
+              return;
+            }
+
             setCopiedState(button, true);
 
             if (timeoutId) window.clearTimeout(timeoutId);

package/template/src/components/user/CodeGroup.astro

@@ -130,6 +130,52 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
       };
 
+      const fallbackCopy = (text) => {
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.setAttribute("readonly", "");
+          textarea.style.position = "fixed";
+          textarea.style.top = "0";
+          textarea.style.left = "0";
+          textarea.style.width = "1px";
+          textarea.style.height = "1px";
+          textarea.style.padding = "0";
+          textarea.style.border = "0";
+          textarea.style.opacity = "0";
+          textarea.style.fontSize = "16px";
+          textarea.style.pointerEvents = "none";
+          document.body.appendChild(textarea);
+
+          try {
+            textarea.focus({ preventScroll: true });
+          } catch {
+            textarea.focus();
+          }
+          textarea.select();
+          textarea.setSelectionRange(0, textarea.value.length);
+
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch {
+          return false;
+        }
+      };
+
+      const copyToClipboard = async (text) => {
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+          }
+        } catch {
+          // Fallback below when the async Clipboard API is unavailable or blocked.
+        }
+
+        return fallbackCopy(text);
+      };
+
       const tabs = codeItems.map((itemElement, index) => {
         const filename =
           itemElement.getAttribute("data-rd-tab-filename") ??
@@ -411,7 +457,12 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           const copyValue = decodeURIComponent(encodedCopyValue);
 
           try {
-            await navigator.clipboard.writeText(copyValue);
+            const copied = await copyToClipboard(copyValue);
+            if (!copied) {
+              setCopiedState(copyButton, false);
+              return;
+            }
+
             setCopiedState(copyButton, true);
 
             if (timeoutId) window.clearTimeout(timeoutId);

package/template/src/components/user/Column.astro

@@ -2,7 +2,7 @@
 ---
 
 <div data-rd-column class="min-w-0">
-  <div class="prose-rules max-w-none! *:max-w-none!">
+  <div class="prose-rules max-w-none!">
     <slot />
   </div>
 </div>

package/template/src/components/user/Step.astro

@@ -27,7 +27,7 @@ const { title } = Astro.props;
       {title}
     </h3>
   </div>
-  <div class="prose-rules max-w-none! *:max-w-none!">
+  <div class="prose-rules max-w-none!">
     <slot />
   </div>
 </div>

package/template/src/components/user/Tabs.astro

@@ -190,7 +190,7 @@ class="rd-prose-block">
           >
             <div
               data-rd-tabs-panel-content
-              class="prose-rules w-full max-w-none! *:max-w-none!"
+              class="prose-rules w-full max-w-none!"
               set:html={content}
             />
           </div>

package/template/src/generated/shiki-platform-assets.json

@@ -0,0 +1,24 @@
+{
+  "assetVersion": "shiki-4.2.0-c0d7e21cea71",
+  "counts": {
+    "languages": 347,
+    "themes": 66
+  },
+  "manifest": {
+    "bytes": 172635,
+    "module": "manifest.json",
+    "sha256": "1840b6f21a79266d9bf3a74d5e6973d407fb06b96d71decd5542ca37eebf182d"
+  },
+  "packageVersions": {
+    "@shikijs/core": "4.2.0",
+    "@shikijs/engine-javascript": "4.2.0",
+    "@shikijs/langs": "4.2.0",
+    "@shikijs/themes": "4.2.0",
+    "shiki": "4.2.0"
+  },
+  "prefix": "_platform/shiki",
+  "runtime": {
+    "engine": "javascript-regexp",
+    "module": "runtime.mjs"
+  }
+}

package/template/src/layouts/Layout.astro

@@ -4,6 +4,7 @@ import Sidebar from "../components/Sidebar.astro";
 import { getConfig } from "../lib/validation";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import NavigationTabs from "../components/NavigationTabs.astro";
 import AssistantDocsWidget from "../components/chat/AssistantDocsWidget.astro";
 import { ClientRouter } from "astro:transitions";
 import { prependBasePath, stripBasePath } from "../lib/base-path";
@@ -18,6 +19,8 @@ interface Props {
   pageDescription?: string;
 }
 
+type TabsPresentation = "topbar" | "sidebar";
+
 function normalizeRoutePath(routePath: string): string {
   if (!routePath || routePath === "/") return "/";
   if (!routePath.startsWith("/")) routePath = `/${routePath}`;
@@ -66,6 +69,12 @@ const orgTier =
   Number.isFinite(parsedOrgTier) && parsedOrgTier > 0 ? parsedOrgTier : 1;
 const isDev = import.meta.env.DEV;
 const askAiEnabled = isDev || orgTier >= 3;
+const navigationTabs = config.navigation.tabs as
+  | (typeof config.navigation.tabs & { presentation?: TabsPresentation })
+  | undefined;
+const hasNavigationTabs =
+  Array.isArray(navigationTabs?.items) && navigationTabs.items.length > 0;
+const tabsPresentation = navigationTabs?.presentation ?? "topbar";
 ---
 
 <!doctype html>
@@ -73,7 +82,7 @@ const askAiEnabled = isDev || orgTier >= 3;
   <head>
     <style is:inline is:global set:html={neutralPaletteCss}></style>
     <style is:inline is:global set:html={fontCss}></style>
-    <ClientRouter />
+    <ClientRouter fallback="swap" />
     <script is:inline>
       const applyTheme = () => {
         const modeParam = new URLSearchParams(window.location.search).get(
@@ -192,6 +201,71 @@ const askAiEnabled = isDev || orgTier >= 3;
         }
       })();
     </script>
+    <script is:inline>
+      (() => {
+        const root = document.documentElement;
+        let viewportFrameId = null;
+
+        const syncVisualViewport = () => {
+          viewportFrameId = null;
+
+          const viewport = window.visualViewport;
+          const width =
+            viewport && Number.isFinite(viewport.width)
+              ? viewport.width
+              : window.innerWidth;
+          const height =
+            viewport && Number.isFinite(viewport.height)
+              ? viewport.height
+              : window.innerHeight;
+          const offsetLeft =
+            viewport && Number.isFinite(viewport.offsetLeft)
+              ? viewport.offsetLeft
+              : 0;
+          const offsetTop =
+            viewport && Number.isFinite(viewport.offsetTop)
+              ? viewport.offsetTop
+              : 0;
+
+          root.style.setProperty(
+            "--rd-visual-viewport-left",
+            `${Math.max(0, offsetLeft)}px`,
+          );
+          root.style.setProperty(
+            "--rd-visual-viewport-top",
+            `${Math.max(0, offsetTop)}px`,
+          );
+          root.style.setProperty(
+            "--rd-visual-viewport-width",
+            `${Math.max(1, width)}px`,
+          );
+          root.style.setProperty(
+            "--rd-visual-viewport-height",
+            `${Math.max(1, height)}px`,
+          );
+        };
+
+        const scheduleVisualViewportSync = () => {
+          if (viewportFrameId !== null) return;
+          viewportFrameId = window.requestAnimationFrame(syncVisualViewport);
+        };
+
+        scheduleVisualViewportSync();
+        window.visualViewport?.addEventListener(
+          "resize",
+          scheduleVisualViewportSync,
+        );
+        window.visualViewport?.addEventListener(
+          "scroll",
+          scheduleVisualViewportSync,
+        );
+        window.addEventListener("resize", scheduleVisualViewportSync);
+        window.addEventListener(
+          "orientationchange",
+          scheduleVisualViewportSync,
+        );
+      })();
+    </script>
     {
       fontPreloads.map((font) => (
         <link
@@ -233,12 +307,10 @@ const askAiEnabled = isDev || orgTier >= 3;
   <body
     class="bg-background text-neutral-900 dark:text-white"
     x-data="{ open: false }"
-    x-bind:class="open ? 'overflow-hidden touch-none' : ''"
+    x-bind:class="open ? 'overflow-hidden' : ''"
   >
     <!-- Edges -->
-    <div
-      class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
-    >
+    <div class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark">
       <div class="bg-background w-full h-full rounded-t-2xl"></div>
     </div>
     <div
@@ -252,10 +324,21 @@ const askAiEnabled = isDev || orgTier >= 3;
 
     <!-- Header -->
     <Header showAskAiTrigger={askAiEnabled} />
+    {
+      hasNavigationTabs ? (
+        <NavigationTabs
+          tabs={navigationTabs!}
+          presentation={tabsPresentation}
+        />
+      ) : null
+    }
 
     <!-- Desktop Sidebar -->
     <div
-      class="bg-background w-[283px] ml-[5px] fixed inset-y-0 mt-17 hidden lg:block border-r border-r-border-light"
+      class:list={[
+        "bg-background w-[283px] ml-[5px] fixed inset-y-0 hidden lg:block border-r border-r-border-light",
+        hasNavigationTabs ? "mt-[112px]" : "mt-17",
+      ]}
       data-pagefind-ignore
     >
       <Sidebar />
@@ -265,7 +348,7 @@ const askAiEnabled = isDev || orgTier >= 3;
     <div
       x-show="open"
       x-cloak
-      class="bg-background mx-[5px] min-h-[calc(100vh-68px)] mt-17 fixed inset-0 lg:hidden z-50 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      class="rd-mobile-menu bg-background fixed lg:hidden z-50 overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       x-transition.opacity
     >
       <Sidebar askAiEnabled={askAiEnabled} />
@@ -275,11 +358,31 @@ const askAiEnabled = isDev || orgTier >= 3;
     <div
       class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-background"
     >
-      <main class="mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]">
+      <main class="mx-auto pt-16 pb-20 min-h-[calc(100vh-64px)]">
         <slot />
       </main>
       <Footer askAiEnabled={askAiEnabled} />
     </div>
     {askAiEnabled ? <AssistantDocsWidget /> : null}
+    <style is:global>
+      :root {
+        --rd-visual-viewport-left: 0px;
+        --rd-visual-viewport-top: 0px;
+        --rd-visual-viewport-width: 100vw;
+        --rd-visual-viewport-height: 100dvh;
+      }
+
+      .rd-mobile-menu {
+        --rd-mobile-menu-top-offset: 68px;
+        left: calc(var(--rd-visual-viewport-left) + 5px);
+        top: calc(
+          var(--rd-visual-viewport-top) + var(--rd-mobile-menu-top-offset)
+        );
+        width: calc(var(--rd-visual-viewport-width) - 10px);
+        height: calc(
+          var(--rd-visual-viewport-height) - var(--rd-mobile-menu-top-offset)
+        );
+      }
+    </style>
   </body>
 </html>