radiant-docs 0.1.61 → 0.1.62

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-3.23.0-c5695a7656dd",
+  "counts": {
+    "languages": 347,
+    "themes": 66
+  },
+  "manifest": {
+    "bytes": 172640,
+    "module": "manifest.json",
+    "sha256": "d8ce64a7c4247eac90030e4dd92a9ac00f1de67114e0ac6c5e003e810c8e9cfb"
+  },
+  "packageVersions": {
+    "@shikijs/core": "3.23.0",
+    "@shikijs/engine-javascript": "3.23.0",
+    "@shikijs/langs": "3.23.0",
+    "@shikijs/themes": "3.23.0",
+    "shiki": "3.23.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>

package/template/src/lib/assistant-panel-config.ts

@@ -4,7 +4,13 @@ import {
 } from "./assistant-chrome";
 import { withBasePath } from "./base-path";
 import { getAssistantLauncherIconConfig } from "./assistant-embed-script";
+import type { AssistantShikiRuntimeConfig } from "./assistant-shiki-client";
 import type { DocsConfig } from "./validation";
+import shikiPlatformAssets from "../generated/shiki-platform-assets.json";
+import {
+  DEFAULT_SHIKI_DARK_THEME,
+  DEFAULT_SHIKI_LIGHT_THEME,
+} from "radiant-docs-validator/shiki-theme-config";
 
 export type AssistantPanelRuntimeConfig = {
   apiPath: string;
@@ -26,8 +32,60 @@ export type AssistantPanelRuntimeConfig = {
   emptyStateQuestions?: string[];
   devProxyToken?: string;
   chrome: AssistantChromeConfig;
+  shiki?: AssistantShikiRuntimeConfig;
 };
 
+function normalizeStaticAssetHost(value: unknown): string {
+  const rawValue = typeof value === "string" ? value.trim() : "";
+  if (!rawValue) return "";
+
+  const normalizedHost = rawValue.replace(/\/+$/, "");
+  return /^https?:\/\//i.test(normalizedHost)
+    ? normalizedHost
+    : `https://${normalizedHost}`;
+}
+
+function joinUrl(baseUrl: string, path: string): string {
+  return `${baseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+
+function getConfiguredCodeSyntaxThemes(
+  config: DocsConfig,
+): AssistantShikiRuntimeConfig["syntaxThemes"] {
+  const configuredSyntaxTheme = config.theme?.code?.syntaxTheme;
+
+  if (typeof configuredSyntaxTheme === "string") {
+    return {
+      light: configuredSyntaxTheme,
+      dark: configuredSyntaxTheme,
+    };
+  }
+
+  return {
+    light: configuredSyntaxTheme?.light ?? DEFAULT_SHIKI_LIGHT_THEME,
+    dark: configuredSyntaxTheme?.dark ?? DEFAULT_SHIKI_DARK_THEME,
+  };
+}
+
+function getAssistantShikiRuntimeConfig(
+  config: DocsConfig,
+): AssistantShikiRuntimeConfig | undefined {
+  const staticAssetHost = normalizeStaticAssetHost(
+    import.meta.env.STATIC_ASSET_HOST ?? process.env.STATIC_ASSET_HOST,
+  );
+  if (!staticAssetHost) {
+    return undefined;
+  }
+
+  return {
+    assetBaseUrl: joinUrl(
+      staticAssetHost,
+      `${shikiPlatformAssets.prefix}/${shikiPlatformAssets.assetVersion}`,
+    ),
+    syntaxThemes: getConfiguredCodeSyntaxThemes(config),
+  };
+}
+
 export function getAssistantPanelRuntimeConfig(
   config: DocsConfig,
 ): AssistantPanelRuntimeConfig {
@@ -76,5 +134,6 @@ export function getAssistantPanelRuntimeConfig(
     emptyStateQuestions: assistantConfig?.questions,
     devProxyToken: isDev ? assistantDevProxySecret : undefined,
     chrome: getAssistantChromeConfig(config),
+    shiki: getAssistantShikiRuntimeConfig(config),
   };
 }