radiant-docs 0.1.69 → 0.1.70

package/template/src/components/MobileNavbarActions.astro

@@ -0,0 +1,410 @@
+---
+import Icon from "./ui/Icon.astro";
+import { getConfig, type ThemeColorByMode } from "../lib/validation";
+import { resolveConfiguredHref } from "../lib/routes";
+import {
+  getDocsBaseColorShade,
+  getThemeForegroundColor,
+} from "../lib/theme-css";
+
+const config = await getConfig();
+
+function getConfiguredColorForMode(
+  value: string | ThemeColorByMode | undefined,
+  mode: "light" | "dark",
+): string | undefined {
+  if (typeof value === "string") return value;
+  return value?.[mode];
+}
+
+function getDefaultButtonColor(mode: "light" | "dark"): string {
+  return getDocsBaseColorShade(
+    config.theme,
+    mode,
+    mode === "light" ? "900" : "100",
+  );
+}
+
+function getButtonForegroundColor(
+  mode: "light" | "dark",
+  color: string,
+): string {
+  return getThemeForegroundColor(
+    color,
+    getDocsBaseColorShade(config.theme, mode, "900"),
+  );
+}
+
+function getNavbarPrimaryThemeColor(mode: "light" | "dark"): string {
+  return (
+    getConfiguredColorForMode(config.navbar?.primary?.color, mode) ??
+    getDefaultButtonColor(mode)
+  );
+}
+
+const navbarPrimaryThemeColors = config.navbar?.primary
+  ? {
+      light: getNavbarPrimaryThemeColor("light"),
+      dark: getNavbarPrimaryThemeColor("dark"),
+    }
+  : null;
+const navbarPrimaryButtonStyle = navbarPrimaryThemeColors
+  ? [
+      `--mobile-navbar-primary-theme-light: ${navbarPrimaryThemeColors.light}`,
+      `--mobile-navbar-primary-theme-dark: ${navbarPrimaryThemeColors.dark}`,
+      `--mobile-navbar-primary-foreground-light: ${getButtonForegroundColor(
+        "light",
+        navbarPrimaryThemeColors.light,
+      )}`,
+      `--mobile-navbar-primary-foreground-dark: ${getButtonForegroundColor(
+        "dark",
+        navbarPrimaryThemeColors.dark,
+      )}`,
+    ].join("; ")
+  : "";
+
+const navbarLinks = config.navbar?.links
+  ? await Promise.all(
+      config.navbar.links.map(async (link) => ({
+        ...link,
+        href: await resolveConfiguredHref(link.href, config),
+      })),
+    )
+  : [];
+const navbarSecondaryHref = config.navbar?.secondary
+  ? await resolveConfiguredHref(config.navbar.secondary.href, config)
+  : "";
+const navbarPrimaryHref = config.navbar?.primary
+  ? await resolveConfiguredHref(config.navbar.primary.href, config)
+  : "";
+const mobileButtonCount =
+  Number(Boolean(config.navbar?.primary)) +
+  Number(Boolean(config.navbar?.secondary));
+const hasMobileNavbarActions = mobileButtonCount > 0 || navbarLinks.length > 0;
+---
+
+{
+  hasMobileNavbarActions && (
+    <div
+      class="relative shrink-0 border-b border-border-light px-4 py-3"
+      data-rd-mobile-navbar-actions
+    >
+      <nav aria-label="Site shortcuts">
+        <div
+          class="flex w-full min-w-0 items-center justify-end gap-3"
+          data-rd-mobile-navbar-row
+        >
+          {navbarLinks.length > 0 && (
+            <div
+              class:list={[
+                "flex shrink-0 items-center gap-1",
+                mobileButtonCount > 0 && "pr-2",
+              ]}
+              data-rd-mobile-navbar-links
+            >
+              {navbarLinks.map((link) => (
+                <a
+                  class="flex items-center gap-1 px-1.5 py-[5px] text-[13px] font-medium text-neutral-600/85 whitespace-nowrap transition-colors hover:text-neutral-600 dark:font-normal dark:text-neutral-200/90 dark:hover:text-neutral-200"
+                  href={link.href}
+                  x-on:click="open = false"
+                >
+                  {link.icon && (
+                    <Icon
+                      class="ml-[3px]"
+                      name={link.icon}
+                      width="14"
+                      height="14"
+                    />
+                  )}
+                  {link.text}
+                </a>
+              ))}
+            </div>
+          )}
+          {navbarLinks.length > 0 && (
+            <div class="shrink-0" data-rd-mobile-navbar-overflow hidden>
+              <button
+                type="button"
+                class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100/70 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:text-neutral-300 dark:hover:bg-neutral-800/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+                aria-label="Show more navbar links"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-controls="mobile-navbar-overflow-menu"
+                data-rd-mobile-navbar-overflow-trigger
+              >
+                <Icon
+                  name="lucide:ellipsis-vertical"
+                  class="size-4"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          )}
+          {mobileButtonCount > 0 && (
+            <div
+              class="flex shrink-0 items-center gap-3"
+              data-rd-mobile-navbar-buttons
+            >
+              {config.navbar?.secondary && (
+                <a
+                  class="flex h-[33px] shrink-0 items-center gap-1.5 rounded-lg [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 bg-linear-to-br from-neutral-100/70 to-neutral-100/90 px-[11px] text-[13px] font-medium text-neutral-900/85 whitespace-nowrap transition-all hover:text-neutral-600 dark:border-white/5 dark:bg-none dark:bg-neutral-800/80 dark:text-neutral-200/95 dark:hover:text-neutral-200"
+                  href={navbarSecondaryHref}
+                  x-on:click="open = false"
+                >
+                  {config.navbar.secondary.icon && (
+                    <Icon
+                      name={config.navbar.secondary.icon}
+                      width="14"
+                      height="14"
+                      class="-ml-px"
+                    />
+                  )}
+                  {config.navbar.secondary.text}
+                </a>
+              )}
+              {config.navbar?.primary && (
+                <a
+                  class="mobile-navbar-primary-trigger flex h-8 shrink-0 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-normal whitespace-nowrap transition-all duration-200 hover:opacity-95 dark:font-medium"
+                  style={navbarPrimaryButtonStyle}
+                  href={navbarPrimaryHref}
+                  x-on:click="open = false"
+                >
+                  {config.navbar.primary.icon && (
+                    <Icon
+                      name={config.navbar.primary.icon}
+                      width="14"
+                      height="14"
+                      class="-ml-px"
+                    />
+                  )}
+                  {config.navbar.primary.text}
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      </nav>
+      {navbarLinks.length > 0 && (
+        <nav
+          id="mobile-navbar-overflow-menu"
+          aria-label="More navbar links"
+          class="absolute right-4 top-full z-50 mt-2 w-56 max-w-[calc(100vw-2rem)] overflow-y-auto rounded-xl border-[0.5px] border-neutral-200 bg-white p-1 shadow-2xl shadow-neutral-900/12 sm:right-6 dark:border-neutral-800 dark:bg-neutral-800 dark:shadow-black/40"
+          data-rd-mobile-navbar-overflow-menu
+          hidden
+        >
+          {navbarLinks.map((link) => (
+            <a
+              class="flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-neutral-700 transition-colors hover:bg-neutral-100/70 hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-neutral-500 dark:font-normal dark:text-neutral-200 dark:hover:bg-neutral-700/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+              href={link.href}
+              x-on:click="open = false"
+              data-rd-mobile-navbar-overflow-link
+            >
+              {link.icon && (
+                <Icon
+                  name={link.icon}
+                  width="14"
+                  height="14"
+                  class="shrink-0"
+                />
+              )}
+              <span class="min-w-0 break-words">{link.text}</span>
+            </a>
+          ))}
+        </nav>
+      )}
+    </div>
+  )
+}
+
+<style>
+  .mobile-navbar-primary-trigger {
+    --mobile-navbar-primary-theme: var(--mobile-navbar-primary-theme-light);
+    --mobile-navbar-primary-foreground: var(
+      --mobile-navbar-primary-foreground-light
+    );
+    background: linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--mobile-navbar-primary-theme) 88%, white),
+      color-mix(in oklab, var(--mobile-navbar-primary-theme) 90%, black)
+    );
+    color: var(--mobile-navbar-primary-foreground);
+  }
+
+  :global(.dark) .mobile-navbar-primary-trigger {
+    --mobile-navbar-primary-theme: var(--mobile-navbar-primary-theme-dark);
+    --mobile-navbar-primary-foreground: var(
+      --mobile-navbar-primary-foreground-dark
+    );
+  }
+</style>
+
+<script is:inline>
+  (() => {
+    const cleanupKey = "__radiantDocsMobileNavbarFitCleanup";
+    const previousCleanup = window[cleanupKey];
+
+    if (typeof previousCleanup === "function") previousCleanup();
+
+    const root = document.querySelector("[data-rd-mobile-navbar-actions]");
+    const row = root?.querySelector("[data-rd-mobile-navbar-row]");
+    const links = root?.querySelector("[data-rd-mobile-navbar-links]");
+    const buttons = root?.querySelector("[data-rd-mobile-navbar-buttons]");
+    const overflow = root?.querySelector("[data-rd-mobile-navbar-overflow]");
+    const overflowTrigger = root?.querySelector(
+      "[data-rd-mobile-navbar-overflow-trigger]",
+    );
+    const overflowMenu = root?.querySelector(
+      "[data-rd-mobile-navbar-overflow-menu]",
+    );
+
+    if (
+      !(root instanceof HTMLElement) ||
+      !(row instanceof HTMLElement) ||
+      !(links instanceof HTMLElement) ||
+      !(overflow instanceof HTMLElement) ||
+      !(overflowTrigger instanceof HTMLButtonElement) ||
+      !(overflowMenu instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const mobileQuery = window.matchMedia("(max-width: 63.999rem)");
+    let linksWidth = 0;
+    let frameId = 0;
+
+    const setOverflowMenuOpen = (nextOpen, focusFirstLink = false) => {
+      const canOpen =
+        nextOpen && mobileQuery.matches && !overflow.hasAttribute("hidden");
+
+      overflowMenu.hidden = !canOpen;
+      overflowTrigger.setAttribute("aria-expanded", String(canOpen));
+
+      if (!canOpen || !focusFirstLink) return;
+
+      const firstLink = overflowMenu.querySelector(
+        "[data-rd-mobile-navbar-overflow-link]",
+      );
+      if (firstLink instanceof HTMLElement) firstLink.focus();
+    };
+
+    const measureLinksWidth = () => {
+      const clone = links.cloneNode(true);
+      if (!(clone instanceof HTMLElement)) return linksWidth;
+
+      clone.removeAttribute("hidden");
+      clone.removeAttribute("data-rd-mobile-navbar-links");
+      clone.setAttribute("aria-hidden", "true");
+      clone.style.position = "fixed";
+      clone.style.inset = "0 auto auto -10000px";
+      clone.style.display = "flex";
+      clone.style.width = "max-content";
+      clone.style.visibility = "hidden";
+      clone.style.pointerEvents = "none";
+      document.body.append(clone);
+
+      const width = clone.getBoundingClientRect().width;
+      clone.remove();
+      return width;
+    };
+
+    const updateLinksVisibility = () => {
+      frameId = 0;
+
+      if (!mobileQuery.matches || row.clientWidth <= 0) {
+        if (!mobileQuery.matches) {
+          links.removeAttribute("hidden");
+          overflow.setAttribute("hidden", "");
+          setOverflowMenuOpen(false);
+        }
+        return;
+      }
+
+      const rowGap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+      const buttonsWidth =
+        buttons instanceof HTMLElement
+          ? buttons.getBoundingClientRect().width
+          : 0;
+      const requiredWidth =
+        linksWidth +
+        buttonsWidth +
+        (buttons instanceof HTMLElement ? rowGap : 0);
+      const linksDoNotFit = requiredWidth > row.clientWidth;
+
+      links.toggleAttribute("hidden", linksDoNotFit);
+      overflow.toggleAttribute("hidden", !linksDoNotFit);
+      if (!linksDoNotFit) setOverflowMenuOpen(false);
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== 0) return;
+      frameId = requestAnimationFrame(updateLinksVisibility);
+    };
+
+    const onOverflowTriggerClick = () => {
+      setOverflowMenuOpen(overflowMenu.hidden);
+    };
+
+    const onOverflowTriggerKeydown = (event) => {
+      if (event.key !== "ArrowDown") return;
+      event.preventDefault();
+      setOverflowMenuOpen(true, true);
+    };
+
+    const onDocumentPointerDown = (event) => {
+      if (overflowMenu.hidden || !(event.target instanceof Node)) return;
+      if (
+        overflowTrigger.contains(event.target) ||
+        overflowMenu.contains(event.target)
+      ) {
+        return;
+      }
+      setOverflowMenuOpen(false);
+    };
+
+    const onDocumentKeydown = (event) => {
+      if (event.key !== "Escape" || overflowMenu.hidden) return;
+      setOverflowMenuOpen(false);
+      overflowTrigger.focus();
+    };
+
+    const onOverflowMenuClick = (event) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest("[data-rd-mobile-navbar-overflow-link]")
+      ) {
+        setOverflowMenuOpen(false);
+      }
+    };
+
+    linksWidth = measureLinksWidth();
+    updateLinksVisibility();
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(row);
+    if (buttons instanceof HTMLElement) resizeObserver.observe(buttons);
+    mobileQuery.addEventListener("change", scheduleUpdate);
+    overflowTrigger.addEventListener("click", onOverflowTriggerClick);
+    overflowTrigger.addEventListener("keydown", onOverflowTriggerKeydown);
+    overflowMenu.addEventListener("click", onOverflowMenuClick);
+    document.addEventListener("pointerdown", onDocumentPointerDown);
+    document.addEventListener("keydown", onDocumentKeydown);
+
+    document.fonts?.ready.then(() => {
+      if (!root.isConnected) return;
+      linksWidth = measureLinksWidth();
+      scheduleUpdate();
+    });
+
+    window[cleanupKey] = () => {
+      if (frameId !== 0) cancelAnimationFrame(frameId);
+      resizeObserver.disconnect();
+      mobileQuery.removeEventListener("change", scheduleUpdate);
+      overflowTrigger.removeEventListener("click", onOverflowTriggerClick);
+      overflowTrigger.removeEventListener("keydown", onOverflowTriggerKeydown);
+      overflowMenu.removeEventListener("click", onOverflowMenuClick);
+      document.removeEventListener("pointerdown", onDocumentPointerDown);
+      document.removeEventListener("keydown", onDocumentKeydown);
+      overflowMenu.hidden = true;
+    };
+  })();
+</script>

package/template/src/components/PagePagination.astro

@@ -23,7 +23,7 @@ function buildHref(route: Route): string {
 
 {
   (previousRoute || nextRoute) && (
-    <nav class="w-full pt-16" aria-label="Page pagination">
+    <nav class="w-full" aria-label="Page pagination">
       <div class="flex gap-4 flex-col sm:flex-row">
         {previousRoute && (
           <a

package/template/src/components/Search.astro

@@ -12,9 +12,15 @@ import { Icon } from "astro-icon/components";
   <!-- Search Trigger Button -->
   <button
     x-on:click="open()"
-    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/70 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
+    x-bind:data-search-open="isOpen ? 'true' : 'false'"
+    aria-label="Search documentation"
+    class="mobile-search-trigger flex size-10 cursor-pointer items-center justify-center rounded-lg text-xs text-neutral-900 transition-colors hover:bg-neutral-100/70 dark:text-white dark:hover:bg-neutral-800/70 md:h-[33px] md:w-auto md:min-w-60 md:justify-start md:gap-2 md:border md:border-border md:bg-white/90 md:px-3 md:text-neutral-500/80 md:shadow-xs md:transition md:hover:bg-white/90 md:hover:text-neutral-500 md:hover:shadow-sm dark:md:bg-neutral-800 dark:md:text-neutral-400/70 dark:md:hover:bg-neutral-800 dark:md:hover:text-neutral-400 lg:min-w-64"
   >
-    <Icon name="lucide:search" class="size-5 md:size-4" />
+    <Icon
+      name="lucide:search"
+      is:inline
+      class="mobile-search-icon size-4"
+    />
     <span class="hidden md:inline">Search documentation</span>
     <kbd
       class="font-sans tracking-wider hidden md:inline-flex ml-auto items-center gap-0.5 px-1.5 py-px text-[10px] text-neutral-500 dark:text-neutral-400 font-medium bg-white dark:bg-neutral-700 border border-border/80 rounded"
@@ -53,6 +59,7 @@ import { Icon } from "astro-icon/components";
           >
             <Icon
               name="lucide:search"
+              is:inline
               class="size-5 sm:size-[18px] text-neutral-400 dark:text-neutral-500 shrink-0"
             />
             <input
@@ -94,7 +101,8 @@ import { Icon } from "astro-icon/components";
                 class="size-8 mx-auto mb-3 text-neutral-300 dark:text-neutral-600"
               />
               <p class="text-sm">
-                No results found for <strong class="text-neutral-600 dark:text-neutral-300"
+                No results found for <strong
+                  class="text-neutral-600 dark:text-neutral-300"
                   >"<span x-text="query"></span>"</strong
                 >.
               </p>
@@ -172,6 +180,19 @@ import { Icon } from "astro-icon/components";
   </template>
 </div>
 
+<style>
+  @media (max-width: 47.999rem) {
+    .mobile-search-trigger[data-search-open="true"] {
+      background-color: transparent !important;
+      transition: none;
+    }
+
+    .mobile-search-icon :global(g) {
+      stroke-width: 2.75;
+    }
+  }
+</style>
+
 <script>
   import {
     search as pagefindSearch,

package/template/src/components/Sidebar.astro

@@ -1,18 +1,26 @@
 ---
 import { getConfig, type DocsConfig } from "../lib/validation";
+import MobileNavbarActions from "./MobileNavbarActions.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 import SidebarMenu from "./SidebarMenu.astro";
 
 interface Props {
   askAiEnabled?: boolean;
+  showMobileNavbarActions?: boolean;
 }
 
-const { askAiEnabled = false } = Astro.props as Props;
+const { askAiEnabled = false, showMobileNavbarActions = false } =
+  Astro.props as Props;
 
 const config: DocsConfig = await getConfig();
 ---
 
 <aside class="flex flex-col h-full">
+  {
+    showMobileNavbarActions ? (
+      <MobileNavbarActions />
+    ) : null
+  }
   <nav
     data-rd-sidebar-scroll-container
     class="min-h-0 flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"

package/template/src/components/SidebarTabs.astro

@@ -64,7 +64,9 @@ const selectedTabItem = tabItems[currentTabIndex];
       x-data={`{ selectedTabIndex: ${currentTabIndex} }`}
       x-init={`$watch('open', (value) => { if (value) selectedTabIndex = ${currentTabIndex} })`}
     >
-      <div class="lg:hidden h-11 border-b border-border-light bg-background">
+      <div
+        class="sticky top-0 z-20 h-11 border-b border-border-light bg-background lg:hidden"
+      >
         <nav
           class="h-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           aria-label="Documentation sections"

package/template/src/components/chat/AssistantDocsWidget.tsx

@@ -6,7 +6,7 @@ import AssistantEmbedPanel, {
   AssistantPanelIcon,
   type AssistantPanelSize,
 } from "./AssistantEmbedPanel";
-import type { AssistantShikiRuntimeConfig } from "../../lib/assistant-shiki-client";
+import type { AssistantShikiRuntimeConfig } from "@radiant-docs/assistant-shiki";
 import {
   DEFAULT_ASSISTANT_CHROME_CONFIG,
   type AssistantChromeConfig,

package/template/src/components/chat/AssistantEmbedPanel.tsx

@@ -6,13 +6,14 @@ import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
-import { getDocsBasePath, withBasePath } from "../../lib/base-path";
 import {
   highlightAssistantCodeToHtml,
   normalizeAssistantCodeLanguage,
+  resolveAssistantLanguageLabel,
   warmAssistantShikiRuntime,
   type AssistantShikiRuntimeConfig,
-} from "../../lib/assistant-shiki-client";
+} from "@radiant-docs/assistant-shiki";
+import { getDocsBasePath, withBasePath } from "../../lib/base-path";
 
 type AssistantLinkTarget = "current" | "blank";
 export type AssistantPanelSize = "default" | "expanded";
@@ -129,30 +130,6 @@ const DEFAULT_ASSISTANT_MOBILE_BREAKPOINT = "640px";
 const DEFAULT_ASSISTANT_PANEL_FULLSCREEN_HEIGHT_BREAKPOINT = "560px";
 const markdownHtmlCache = new Map<string, string>();
 const markdownHtmlPromiseCache = new Map<string, Promise<string>>();
-const ASSISTANT_LANGUAGE_LABEL: Record<string, string> = {
-  bash: "Bash",
-  css: "CSS",
-  diff: "Diff",
-  go: "Go",
-  html: "HTML",
-  java: "Java",
-  javascript: "JavaScript",
-  jsx: "JSX",
-  json: "JSON",
-  markdown: "Markdown",
-  mdx: "MDX",
-  php: "PHP",
-  plaintext: "Text",
-  python: "Python",
-  ruby: "Ruby",
-  rust: "Rust",
-  shell: "Shell",
-  sql: "SQL",
-  tsx: "TSX",
-  typescript: "TypeScript",
-  yaml: "YAML",
-};
-
 const EXTERNAL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
 
 function buildMarkdownCacheKey(
@@ -633,20 +610,6 @@ function escapeHtml(value: string): string {
     .replaceAll("'", "&#39;");
 }
 
-function resolveAssistantLanguageLabel(language: string): string {
-  const normalized = language.trim().toLowerCase();
-  if (!normalized) {
-    return "";
-  }
-
-  return (
-    ASSISTANT_LANGUAGE_LABEL[normalized] ??
-    normalized
-      .replace(/[-_]+/g, " ")
-      .replace(/\b\w/g, (char) => char.toUpperCase())
-  );
-}
-
 function ensureCodeBlockCopyButton(preElement: HTMLPreElement): void {
   const existingButton = Array.from(preElement.children).find(
     (child) =>
@@ -1025,20 +988,33 @@ function AssistantSourcesBlock({
   }
 
   return (
-    <div
-      className="ask-ai-sources ask-ai-markdown prose-rules mt-3 max-w-full min-w-0 wrap-break-word text-[15px]!"
-      onClick={onClick}
-    >
-      <p>Sources:</p>
-      <ul>
+    <div className="ask-ai-sources mt-4 max-w-full min-w-0" onClick={onClick}>
+      <div className="text-xs font-semibold text-neutral-700 dark:text-neutral-200">
+        Sources
+      </div>
+      <ul className="mt-2 flex flex-wrap gap-2">
         {visibleSources.map((source) => (
-          <li key={`${source.href}\0${source.label}`}>
+          <li
+            key={`${source.href}\0${source.label}`}
+            className="min-w-0 max-w-full"
+          >
             <a
               href={withBasePath(source.href)}
               target={linkTarget === "blank" ? "_blank" : undefined}
               rel={linkTarget === "blank" ? "noopener noreferrer" : undefined}
+              className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 py-1 text-xs font-medium text-neutral-700 transition-colors hover:bg-neutral-50 hover:text-neutral-950 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:hover:text-white"
             >
-              {source.label}
+              <Icon
+                icon="lucide:file-text"
+                className="size-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span className="truncate">{source.label}</span>
+              <Icon
+                icon="lucide:external-link"
+                className="size-3 shrink-0 text-neutral-500 dark:text-neutral-400"
+                aria-hidden="true"
+              />
             </a>
           </li>
         ))}
@@ -2846,6 +2822,18 @@ export default function AssistantEmbedPanel({
           -ms-overflow-style: none;
         }
 
+        .ask-ai-markdown [data-rd-code-line] {
+          display: flex;
+          width: max-content;
+          min-width: 100%;
+        }
+
+        .ask-ai-markdown [data-rd-code-line-content] {
+          flex: 1;
+          padding-inline: 0.75rem;
+          white-space: pre;
+        }
+
         .dark .ask-ai-markdown pre > code {
           scrollbar-width: none;
         }

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

@@ -1074,7 +1074,7 @@ const headerValuePrefixes = Object.fromEntries(
   import {
     highlightAssistantCodeToHtml,
     type AssistantShikiRuntimeConfig,
-  } from "../../lib/assistant-shiki-client";
+  } from "@radiant-docs/assistant-shiki";
 
   type PlaygroundShikiConfig = AssistantShikiRuntimeConfig | null | undefined;