radiant-docs 0.1.60 → 0.1.62

package/template/src/components/SidebarMenu.astro

@@ -9,6 +9,7 @@ import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
 import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarDropdown from "./SidebarDropdown.astro";
 import SidebarSegmented from "./SidebarSegmented.astro";
+import SidebarTabs from "./SidebarTabs.astro";
 import SidebarGroup from "./SidebarGroup.astro";
 import SidebarLink from "./SidebarLink.astro";
 
@@ -58,5 +59,7 @@ let { navigation, parentSlug = "" } = Astro.props;
     ) : null
   ) : navigation.openapi ? (
     <SidebarOpenApi openapi={navigation.openapi} parentSlug={parentSlug} />
+  ) : navigation.tabs ? (
+    <SidebarTabs tabs={navigation.tabs} parentSlug={parentSlug} />
   ) : null
 }

package/template/src/components/SidebarSegmented.astro

@@ -16,9 +16,15 @@ const { menu, parentSlug = "" } = Astro.props;
 const pathname = stripBasePath(Astro.url.pathname);
 const config = await getConfig();
 const routes = (await getAllRoutes()).filter((route) => !route.hidden);
+const normalizedPathParts = pathname
+  .replace(/^\/+/, "")
+  .replace(/\/+$/, "")
+  .split("/")
+  .filter(Boolean);
+const parentParts = parentSlug.split("/").filter(Boolean);
 
 let currentMenuIndex = menu.items.findIndex(
-  (i) => slugify(i.label) === pathname.split("/")[1],
+  (i) => slugify(i.label) === normalizedPathParts[parentParts.length],
 );
 
 if (pathname === "/" && config.home) {
@@ -27,9 +33,10 @@ if (pathname === "/" && config.home) {
   );
 
   if (homeRoute) {
-    const homeTopLevelSegment = homeRoute.slug.split("/")[0];
+    const homeRouteParts = homeRoute.slug.split("/").filter(Boolean);
+    const homeMenuSegment = homeRouteParts[parentParts.length];
     const homeMenuIndex = menu.items.findIndex(
-      (item) => slugify(item.label) === homeTopLevelSegment,
+      (item) => slugify(item.label) === homeMenuSegment,
     );
     if (homeMenuIndex !== -1) {
       currentMenuIndex = homeMenuIndex;
@@ -39,62 +46,90 @@ if (pathname === "/" && config.home) {
 
 currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
 
-let firstHrefOfMenuItems: string[] = [];
-
-const seen = new Set();
-
-for (const route of routes) {
-  const slug = route.slug;
+function getMenuItemPrefix(label: string): string {
+  const menuSlug = slugify(label);
+  return parentSlug ? `${parentSlug}/${menuSlug}` : menuSlug;
+}
 
-  const parts = slug.split("/");
-  const topLevel = parts[0];
+let firstHrefOfMenuItems = menu.items.map((item) => {
+  const itemPrefix = getMenuItemPrefix(item.label);
+  const firstRoute = routes.find(
+    (route) => route.slug === itemPrefix || route.slug.startsWith(`${itemPrefix}/`),
+  );
 
-  if (!seen.has(topLevel)) {
-    seen.add(topLevel);
-    const href =
-      route.type === "mdx" && config.home && route.filePath === config.home
-        ? prependBasePath("/")
-        : prependBasePath(`/${slug}`);
-    firstHrefOfMenuItems.push(href);
+  if (firstRoute) {
+    return firstRoute.type === "mdx" &&
+      config.home &&
+      firstRoute.filePath === config.home
+      ? prependBasePath("/")
+      : prependBasePath(`/${firstRoute.slug}`);
   }
-}
+
+  return prependBasePath("/");
+});
 
 const selectedMenuItem = menu.items[currentMenuIndex];
-const menuItemSlug = slugify(selectedMenuItem.label);
-const currentPrefix = parentSlug
-  ? `${parentSlug}/${menuItemSlug}`
-  : menuItemSlug;
+const currentPrefix = getMenuItemPrefix(selectedMenuItem.label);
+
+const controlBaseClass =
+  "items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150";
+const activeControlClass =
+  "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white";
+const inactiveControlClass =
+  "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary";
 ---
 
-<div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
-  {
-    menu.label && (
-      <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
-    )
-  }
-  <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
+<div
+  x-data={`{ selectedMenuIndex: ${currentMenuIndex} }`}
+  x-init={`$watch('open', (value) => { if (value) selectedMenuIndex = ${currentMenuIndex} })`}
+>
+  <div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
     {
-      menu.items.map((item, index) => (
-        <li>
-          <a
-            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150"
-            class:list={[
-              index === currentMenuIndex
-                ? "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white"
-                : "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary",
-            ]}
-            href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
-          >
-            {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
-            {item.label}
-          </a>
-        </li>
-      ))
+      menu.label && (
+        <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
+      )
     }
-  </ul>
-</div>
+    <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
+      {
+        menu.items.map((item, index) => (
+          <li>
+            <a
+              class:list={[
+                controlBaseClass,
+                "hidden lg:flex",
+                index === currentMenuIndex
+                  ? activeControlClass
+                  : inactiveControlClass,
+              ]}
+              href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
+            >
+              {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
+              {item.label}
+            </a>
+            <button
+              type="button"
+              class:list={[controlBaseClass, "flex lg:hidden w-full"]}
+              x-bind:class={`selectedMenuIndex === ${index} ? '${activeControlClass}' : '${inactiveControlClass}'`}
+              x-bind:aria-selected={`selectedMenuIndex === ${index}`}
+              x-on:click={`selectedMenuIndex = ${index}`}
+            >
+              {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
+              {item.label}
+            </button>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
 
-<SidebarMenu
-  navigation={menu.items[currentMenuIndex].submenu}
-  parentSlug={currentPrefix}
-/>
+  <div class="hidden lg:block">
+    <SidebarMenu navigation={selectedMenuItem} parentSlug={currentPrefix} />
+  </div>
+  <div class="lg:hidden">
+    {menu.items.map((item, index) => (
+      <div x-show={`selectedMenuIndex === ${index}`} x-cloak>
+        <SidebarMenu navigation={item} parentSlug={getMenuItemPrefix(item.label)} />
+      </div>
+    ))}
+  </div>
+</div>

package/template/src/components/SidebarTabs.astro

@@ -0,0 +1,86 @@
+---
+import { getConfig, type NavTabs } from "../lib/validation";
+import SidebarMenu from "./SidebarMenu.astro";
+import { slugify } from "../lib/utils";
+import { stripBasePath } from "../lib/base-path";
+import { getAllRoutes } from "../lib/routes";
+import NavigationTabList from "./NavigationTabList.astro";
+
+interface Props {
+  tabs: NavTabs;
+  parentSlug?: string;
+}
+
+const { tabs, parentSlug = "" } = Astro.props;
+const tabItems = tabs.items ?? [];
+const pathname = stripBasePath(Astro.url.pathname);
+const config = await getConfig();
+const routes = (await getAllRoutes()).filter((route) => !route.hidden);
+const normalizedPathParts = pathname
+  .replace(/^\/+/, "")
+  .replace(/\/+$/, "")
+  .split("/")
+  .filter(Boolean);
+const parentParts = parentSlug.split("/").filter(Boolean);
+
+function getTabSlug(tab: (typeof tabItems)[number]): string {
+  return slugify(tab.slug || tab.label);
+}
+
+function getTabPrefix(tab: (typeof tabItems)[number]): string {
+  const tabSlug = getTabSlug(tab);
+  return parentSlug ? `${parentSlug}/${tabSlug}` : tabSlug;
+}
+
+let currentTabIndex = tabItems.findIndex(
+  (item) => getTabSlug(item) === normalizedPathParts[parentParts.length],
+);
+
+if (pathname === "/" && config.home) {
+  const homeRoute = routes.find(
+    (route) => route.type === "mdx" && route.filePath === config.home,
+  );
+
+  if (homeRoute) {
+    const homeRouteParts = homeRoute.slug.split("/").filter(Boolean);
+    const homeTabSegment = homeRouteParts[parentParts.length];
+    const homeTabIndex = tabItems.findIndex(
+      (item) => getTabSlug(item) === homeTabSegment,
+    );
+    if (homeTabIndex !== -1) {
+      currentTabIndex = homeTabIndex;
+    }
+  }
+}
+
+currentTabIndex = currentTabIndex === -1 ? 0 : currentTabIndex;
+
+const selectedTabItem = tabItems[currentTabIndex];
+---
+
+{
+  selectedTabItem ? (
+    <div
+      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">
+        <nav
+          class="h-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          aria-label="Documentation sections"
+        >
+          <NavigationTabList
+            items={tabItems}
+            currentIndex={currentTabIndex}
+            mode="button"
+          />
+        </nav>
+      </div>
+      {tabItems.map((item, index) => (
+        <div x-show={`selectedTabIndex === ${index}`} x-cloak>
+          <SidebarMenu navigation={item} parentSlug={getTabPrefix(item)} />
+        </div>
+      ))}
+    </div>
+  ) : null
+}

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

@@ -1,11 +1,12 @@
 import type { JSX } from "preact";
 import { navigate } from "astro:transitions/client";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import AssistantEmbedPanel, {
   ASSISTANT_PANEL_STORAGE_KEY,
   AssistantPanelIcon,
   type AssistantPanelSize,
 } from "./AssistantEmbedPanel";
+import type { AssistantShikiRuntimeConfig } from "../../lib/assistant-shiki-client";
 import {
   DEFAULT_ASSISTANT_CHROME_CONFIG,
   type AssistantChromeConfig,
@@ -31,6 +32,7 @@ type AssistantDocsWidgetProps = {
   emptyStateQuestions?: string[];
   devProxyToken?: string;
   chrome?: AssistantChromeConfig;
+  shiki?: AssistantShikiRuntimeConfig;
 };
 
 type AssistantOpenRequestWindow = Window & {
@@ -39,6 +41,20 @@ type AssistantOpenRequestWindow = Window & {
   __assistantDocsLauncherEntered?: boolean;
 };
 
+type PageScrollLockState = {
+  scrollX: number;
+  scrollY: number;
+  htmlOverflow: string;
+  htmlOverscrollBehavior: string;
+  bodyOverflow: string;
+  bodyOverscrollBehavior: string;
+  bodyPosition: string;
+  bodyTop: string;
+  bodyLeft: string;
+  bodyRight: string;
+  bodyWidth: string;
+};
+
 function normalizePanelSize(value: unknown): AssistantPanelSize {
   return value === "expanded" ? "expanded" : "default";
 }
@@ -75,6 +91,7 @@ export default function AssistantDocsWidget({
   emptyStateQuestions,
   devProxyToken,
   chrome,
+  shiki,
 }: AssistantDocsWidgetProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [panelSize, setPanelSize] = useState<AssistantPanelSize>(() =>
@@ -99,6 +116,7 @@ export default function AssistantDocsWidget({
   const navigationTransitionCleanupRef = useRef<(() => void) | null>(null);
   const navigationTransitionTimeoutRef = useRef<number | null>(null);
   const panelSizeTransitionTimeoutRef = useRef<number | null>(null);
+  const pageScrollLockRef = useRef<PageScrollLockState | null>(null);
   const chromeConfig = chrome ?? DEFAULT_ASSISTANT_CHROME_CONFIG;
   const numericZIndex =
     Number.parseInt(chromeConfig.zIndex, 10) ||
@@ -159,6 +177,13 @@ export default function AssistantDocsWidget({
   };
 
   const closePanel = () => {
+    if (typeof document !== "undefined") {
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement) {
+        activeElement.blur();
+      }
+    }
+
     setIsOpen(false);
   };
 
@@ -267,6 +292,96 @@ export default function AssistantDocsWidget({
     };
   }, []);
 
+  useLayoutEffect(() => {
+    if (!isOpen || typeof window === "undefined") {
+      return;
+    }
+
+    const unlockPageScroll = () => {
+      const lockState = pageScrollLockRef.current;
+      if (!lockState) {
+        return;
+      }
+
+      document.documentElement.style.overflow = lockState.htmlOverflow;
+      document.documentElement.style.overscrollBehavior =
+        lockState.htmlOverscrollBehavior;
+      document.body.style.overflow = lockState.bodyOverflow;
+      document.body.style.overscrollBehavior =
+        lockState.bodyOverscrollBehavior;
+      document.body.style.position = lockState.bodyPosition;
+      document.body.style.top = lockState.bodyTop;
+      document.body.style.left = lockState.bodyLeft;
+      document.body.style.right = lockState.bodyRight;
+      document.body.style.width = lockState.bodyWidth;
+      pageScrollLockRef.current = null;
+
+      window.scrollTo(lockState.scrollX, lockState.scrollY);
+    };
+
+    const lockPageScroll = () => {
+      if (pageScrollLockRef.current) {
+        return;
+      }
+
+      const html = document.documentElement;
+      const body = document.body;
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      pageScrollLockRef.current = {
+        scrollX,
+        scrollY,
+        htmlOverflow: html.style.overflow,
+        htmlOverscrollBehavior: html.style.overscrollBehavior,
+        bodyOverflow: body.style.overflow,
+        bodyOverscrollBehavior: body.style.overscrollBehavior,
+        bodyPosition: body.style.position,
+        bodyTop: body.style.top,
+        bodyLeft: body.style.left,
+        bodyRight: body.style.right,
+        bodyWidth: body.style.width,
+      };
+
+      html.style.overflow = "hidden";
+      html.style.overscrollBehavior = "none";
+      body.style.overflow = "hidden";
+      body.style.overscrollBehavior = "none";
+      body.style.position = "fixed";
+      body.style.top = `-${scrollY}px`;
+      body.style.left = "0";
+      body.style.right = "0";
+      body.style.width = "100%";
+    };
+
+    const fullscreenPanelQuery = window.matchMedia(
+      `(max-width: ${chromeConfig.mobileBreakpoint}), (max-height: ${chromeConfig.panelFullscreenHeightBreakpoint})`,
+    );
+    const syncPageScrollLock = () => {
+      if (fullscreenPanelQuery.matches) {
+        lockPageScroll();
+        return;
+      }
+
+      unlockPageScroll();
+    };
+
+    syncPageScrollLock();
+    fullscreenPanelQuery.addEventListener("change", syncPageScrollLock);
+    window.addEventListener("resize", syncPageScrollLock);
+    window.addEventListener("orientationchange", syncPageScrollLock);
+
+    return () => {
+      fullscreenPanelQuery.removeEventListener("change", syncPageScrollLock);
+      window.removeEventListener("resize", syncPageScrollLock);
+      window.removeEventListener("orientationchange", syncPageScrollLock);
+      unlockPageScroll();
+    };
+  }, [
+    chromeConfig.mobileBreakpoint,
+    chromeConfig.panelFullscreenHeightBreakpoint,
+    isOpen,
+  ]);
+
   useEffect(() => {
     return () => {
       navigationTransitionCleanupRef.current?.();
@@ -320,10 +435,15 @@ export default function AssistantDocsWidget({
           emptyStateHeading={emptyStateHeading}
           emptyStateQuestions={emptyStateQuestions}
           devProxyToken={devProxyToken}
+          shiki={shiki}
           panelSurface="inline"
           linkTarget="current"
           allowApiPathQueryOverride={false}
           openSignal={openSignal}
+          mobileBreakpoint={chromeConfig.mobileBreakpoint}
+          panelFullscreenHeightBreakpoint={
+            chromeConfig.panelFullscreenHeightBreakpoint
+          }
           onRequestOpen={openPanel}
           onRequestClose={closePanel}
           onRequestPanelSizeToggle={handlePanelSizeChange}
@@ -571,12 +691,17 @@ export default function AssistantDocsWidget({
 
         @media (max-width: ${chromeConfig.mobileBreakpoint}), (max-height: ${chromeConfig.panelFullscreenHeightBreakpoint}) {
           .assistant-docs-panel-shell {
-            inset: 0 !important;
+            top: 0 !important;
+            right: auto !important;
+            bottom: auto !important;
+            left: 0 !important;
             z-index: var(--assistant-docs-mobile-panel-z-index) !important;
             width: 100vw !important;
             height: 100dvh !important;
             border: 0 !important;
             border-radius: 0 !important;
+            transition: none !important;
+            transition-behavior: normal !important;
           }
 
           .assistant-docs-panel-shell > div {