radiant-docs 0.1.61 → 0.1.62

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 {