@raystack/chronicle 0.5.3 → 0.6.0

package/src/themes/default/OpenInAI.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import {
+  ChevronDownIcon,
+  ClipboardDocumentIcon,
+  DocumentTextIcon,
+  SparklesIcon
+} from '@heroicons/react/24/outline';
+import { Button, Menu } from '@raystack/apsara';
+import { useCallback } from 'react';
+
+function ClaudeIcon() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='14'
+      height='14'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      fillRule='evenodd'
+      aria-hidden='true'
+    >
+      <title>Claude</title>
+      <path d='M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z' />
+    </svg>
+  );
+}
+
+function ChatGPTIcon() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='14'
+      height='14'
+      viewBox='0 0 12 12'
+      fill='none'
+      aria-hidden='true'
+    >
+      <path
+        d='M4.60254 4.37898V3.24915C4.60254 3.154 4.63825 3.08261 4.72146 3.0351L6.99307 1.72688C7.30228 1.54849 7.67098 1.46528 8.0515 1.46528C9.47862 1.46528 10.3825 2.57135 10.3825 3.74869C10.3825 3.83193 10.3825 3.92708 10.3706 4.02224L8.01581 2.64263C7.87311 2.55942 7.73034 2.55942 7.58765 2.64263L4.60254 4.37898ZM9.90677 8.77939V6.07964C9.90677 5.91311 9.83537 5.79418 9.6927 5.71095L6.70759 3.9746L7.6828 3.41559C7.76603 3.36808 7.83742 3.36808 7.92065 3.41559L10.1922 4.72381C10.8464 5.10443 11.2864 5.91311 11.2864 6.69799C11.2864 7.60182 10.7512 8.43436 9.90677 8.77929V8.77939ZM3.90086 6.40083L2.92565 5.83C2.84244 5.78248 2.80672 5.71107 2.80672 5.61592V2.9995C2.80672 1.727 3.78194 0.763609 5.10208 0.763609C5.60165 0.763609 6.06537 0.930148 6.45794 1.22746L4.11504 2.58329C3.97237 2.6665 3.90099 2.78543 3.90099 2.95199V6.40092L3.90086 6.40083ZM5.99999 7.61387L4.60254 6.82896V5.16401L5.99999 4.37911L7.39734 5.16401V6.82896L5.99999 7.61387ZM6.89789 11.2294C6.39835 11.2294 5.93463 11.0628 5.54206 10.7655L7.88493 9.40968C8.02763 9.32647 8.09901 9.20755 8.09901 9.04098V5.59205L9.08618 6.16288C9.16938 6.21039 9.2051 6.28178 9.2051 6.37696V8.99337C9.2051 10.2659 8.21794 11.2293 6.89789 11.2293V11.2294ZM4.07925 8.57726L1.80764 7.26906C1.15348 6.88842 0.713498 6.07977 0.713498 5.29486C0.713498 4.37911 1.26058 3.55851 2.10492 3.21358V5.92515C2.10492 6.09169 2.17633 6.21062 2.319 6.29385L5.29229 8.01825L4.31707 8.57726C4.23387 8.62477 4.16246 8.62477 4.07925 8.57726ZM3.9485 10.5277C2.60459 10.5277 1.61745 9.51678 1.61745 8.26802C1.61745 8.17287 1.62938 8.07772 1.6412 7.98256L3.9841 9.33839C4.12677 9.42163 4.26956 9.42163 4.41223 9.33839L7.39734 7.61399V8.74382C7.39734 8.83898 7.36165 8.91036 7.27841 8.95788L5.00683 10.2661C4.69759 10.4445 4.3289 10.5277 3.94838 10.5277H3.9485ZM6.89789 11.9429C8.33696 11.9429 9.53808 10.9201 9.81172 9.5643C11.1437 9.21937 12 7.97061 12 6.69811C12 5.86557 11.6433 5.05691 11.001 4.47414C11.0605 4.22437 11.0962 3.9746 11.0962 3.72495C11.0962 2.02429 9.71656 0.751662 8.12288 0.751662C7.80185 0.751662 7.49262 0.799178 7.18338 0.906279C6.64812 0.382967 5.91076 0.0499878 5.10208 0.0499878C3.66304 0.0499878 2.46192 1.07272 2.18828 2.42855C0.856291 2.77348 0 4.02224 0 5.29474C0 6.12728 0.356749 6.93594 0.998986 7.51871C0.939523 7.76848 0.903831 8.01825 0.903831 8.26793C0.903831 9.96859 2.28344 11.2412 3.87709 11.2412C4.19815 11.2412 4.50738 11.1937 4.81662 11.0866C5.35175 11.6099 6.08912 11.9429 6.89789 11.9429Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+}
+
+function mdUrl() {
+  return `${window.location.origin}${window.location.pathname}.md`;
+}
+
+async function copyMd() {
+  try {
+    const res = await fetch(mdUrl());
+    const text = await res.text();
+    await navigator.clipboard.writeText(text);
+  } catch {
+    // ignore
+  }
+}
+
+export function OpenInAI() {
+  const onCopy = useCallback(() => {
+    void copyMd();
+  }, []);
+  const onView = useCallback(() => {
+    window.open(mdUrl(), '_blank', 'noopener,noreferrer');
+  }, []);
+  const onChatGPT = useCallback(() => {
+    const q = encodeURIComponent(`Read ${mdUrl()}`);
+    window.open(`https://chatgpt.com/?q=${q}`, '_blank', 'noopener,noreferrer');
+  }, []);
+  const onClaude = useCallback(() => {
+    const q = encodeURIComponent(`Read ${mdUrl()}`);
+    window.open(`https://claude.ai/new?q=${q}`, '_blank', 'noopener,noreferrer');
+  }, []);
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            leadingIcon={<SparklesIcon width={12} height={12} />}
+            trailingIcon={<ChevronDownIcon width={12} height={12} />}
+          />
+        }
+      >
+        Open in AI
+      </Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item onClick={onCopy}>
+          <ClipboardDocumentIcon width={14} height={14} />
+          Copy as MD
+        </Menu.Item>
+        <Menu.Item onClick={onView}>
+          <DocumentTextIcon width={14} height={14} />
+          View MD
+        </Menu.Item>
+        <Menu.Item onClick={onChatGPT}>
+          <ChatGPTIcon />
+          Open in ChatGPT
+        </Menu.Item>
+        <Menu.Item onClick={onClaude}>
+          <ClaudeIcon />
+          Open in Claude
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/themes/default/Page.module.css

@@ -26,6 +26,36 @@
   line-height: 1.4;
 }
 
+.content > :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
+.content h1 {
+  margin-top: 0;
+  margin-bottom: var(--rs-space-10);
+}
+
+.content p {
+  color: var(--rs-color-foreground-base-primary);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-regular);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-regular);
+  line-height: 171.429%;
+}
+
+.content h2 {
+  margin-top: var(--rs-space-8);
+  margin-bottom: var(--rs-space-8);
+  color: var(--rs-color-foreground-base-primary);
+  font-family: var(--rs-font-title);
+  font-size: var(--rs-font-size-t3);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-t3);
+  letter-spacing: var(--rs-letter-spacing-t3);
+}
+
 .content ul,
 .content ol {
   padding-left: var(--rs-space-5);

package/src/themes/default/Page.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 import { Flex } from '@raystack/apsara';
-import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
 import { Toc } from './Toc';
 
-export function Page({ page, tree }: ThemePageProps) {
+export function Page({ page }: ThemePageProps) {
   return (
     <Flex className={styles.page}>
       <article className={styles.article} data-article-content>
-        <Breadcrumbs slug={page.slug} tree={tree} />
         <div className={styles.content}>{page.content}</div>
       </article>
       <Toc items={page.toc} />

package/src/themes/default/SidebarLogo.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { BookOpenIcon } from '@heroicons/react/24/outline';
+import { useTheme } from '@raystack/apsara';
+import type { ChronicleConfig } from '@/types';
+import styles from './Layout.module.css';
+
+interface SidebarLogoProps {
+  config: ChronicleConfig;
+}
+
+export function SidebarLogo({ config }: SidebarLogoProps) {
+  const { resolvedTheme } = useTheme();
+  const logo = config.logo;
+
+  if (logo) {
+    const src = resolvedTheme === 'dark'
+      ? logo.dark ?? logo.light
+      : logo.light ?? logo.dark;
+    if (src) {
+      return <img src={src} alt={config.site.title} className={styles.sidebarLogo} />;
+    }
+  }
+
+  return <BookOpenIcon width={28} height={28} />;
+}

package/src/themes/default/Toc.module.css

@@ -1,48 +1,125 @@
 .toc {
-  width: 200px;
-  flex-shrink: 0;
-  position: sticky;
-  top: var(--rs-space-9);
-  max-height: calc(100vh - var(--rs-space-17));
-  overflow-y: auto;
+  position: fixed;
+  right: var(--rs-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
 }
 
-.title {
+.markers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--rs-space-4);
+  opacity: 1;
+  transition: opacity 150ms ease;
+}
+
+.toc:hover .markers,
+.toc:focus-within .markers {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.marker {
   display: block;
+  height: 2px;
+  background: var(--rs-color-border-base-secondary);
+  border-radius: 1px;
+  transition:
+    width 0.15s ease,
+    background 0.15s ease;
+}
+
+.marker:hover {
+  background: var(--rs-color-foreground-base-secondary);
+}
+
+.markerActive {
+  background: var(--rs-color-border-base-emphasis);
+}
+
+
+.panel {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%) translateX(8px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-2);
+  min-width: 200px;
+  padding: var(--rs-space-3) 0;
+  background: var(--rs-color-background-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-4);
+  box-shadow: var(--rs-shadow-soft);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.toc:hover .panel,
+.toc:focus-within .panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(-50%) translateX(0);
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-3);
   color: var(--rs-color-foreground-base-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--rs-space-3);
-  font-size: var(--rs-font-size-mini);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
 }
 
-.nav {
+.panelHeaderLabel {
+  flex: 1;
+}
+
+.panelList {
   display: flex;
   flex-direction: column;
-  gap: 0;
-  border-left: 1px solid var(--rs-color-border-base-primary);
-  padding-left: var(--rs-space-3);
-  margin-bottom: var(--rs-space-6);
+  gap: var(--rs-space-1);
+  padding-left: var(--rs-space-8);
 }
 
-.link {
+.panelItem {
+  display: block;
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
   color: var(--rs-color-foreground-base-tertiary);
-  text-decoration: none;
+  font-family: var(--rs-font-body);
   font-size: var(--rs-font-size-small);
-  line-height: 1.4;
-  padding: var(--rs-space-1) 0;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  text-decoration: none;
   transition: color 0.15s ease;
 }
 
-.link:hover {
+.panelItem:hover {
   color: var(--rs-color-foreground-base-primary);
 }
 
-.active {
+.panelItemNested {
+  padding-left: var(--rs-space-5);
+}
+
+.panelItemActive {
   color: var(--rs-color-foreground-base-primary);
-  font-weight: 500;
 }
 
-.nested {
-  padding-left: var(--rs-space-3);
+@media (max-width: 900px) {
+  .toc {
+    display: none;
+  }
 }

package/src/themes/default/Toc.tsx

@@ -1,10 +1,23 @@
 'use client';
 
-import { Text } from '@raystack/apsara';
+import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
 import { AnchorProvider, useActiveAnchor } from 'fumadocs-core/toc';
 import type { TableOfContents, TOCItemType } from 'fumadocs-core/toc';
+import { cx } from 'class-variance-authority';
+import { isValidElement, type ReactNode } from 'react';
 import styles from './Toc.module.css';
 
+function nodeToText(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(nodeToText).join('');
+  if (isValidElement(node)) {
+    const children = (node.props as { children?: ReactNode }).children;
+    return nodeToText(children);
+  }
+  return '';
+}
+
 interface TocProps {
   items: TableOfContents;
 }
@@ -23,30 +36,63 @@ export function Toc({ items }: TocProps) {
   );
 }
 
+const MARKER_BASE = 8;
+const MARKER_PER_CHAR = 1;
+const MARKER_MAX = 40;
+
+function markerWidth(title: ReactNode): number {
+  const len = nodeToText(title).length;
+  return Math.min(MARKER_MAX, MARKER_BASE + len * MARKER_PER_CHAR);
+}
+
 function TocContent({ items }: { items: TOCItemType[] }) {
   const activeAnchor = useActiveAnchor();
 
   return (
-    <aside className={styles.toc}>
-      <Text size={1} weight='medium' className={styles.title}>
-        On this page
-      </Text>
-      <nav className={styles.nav}>
+    <aside className={styles.toc} aria-label='Table of contents'>
+      <div className={styles.markers} aria-hidden='true'>
         {items.map(item => {
           const id = item.url.replace('#', '');
           const isActive = activeAnchor === id;
-          const isNested = item.depth > 2;
           return (
             <a
               key={item.url}
               href={item.url}
-              className={`${styles.link} ${isActive ? styles.active : ''} ${isNested ? styles.nested : ''}`}
+              tabIndex={-1}
+              className={cx(styles.marker, isActive && styles.markerActive)}
+              style={{ width: `${markerWidth(item.title)}px` }}
             >
-              {item.title}
+              <span />
             </a>
           );
         })}
-      </nav>
+      </div>
+      <div className={styles.panel} role='presentation'>
+        <div className={styles.panelHeader}>
+          <Bars3BottomLeftIcon width={16} height={16} />
+          <span className={styles.panelHeaderLabel}>On this page</span>
+        </div>
+        <nav className={styles.panelList}>
+          {items.map(item => {
+            const id = item.url.replace('#', '');
+            const isActive = activeAnchor === id;
+            const isNested = item.depth > 2;
+            return (
+              <a
+                key={item.url}
+                href={item.url}
+                className={cx(
+                  styles.panelItem,
+                  isNested && styles.panelItemNested,
+                  isActive && styles.panelItemActive
+                )}
+              >
+                {nodeToText(item.title)}
+              </a>
+            );
+          })}
+        </nav>
+      </div>
     </aside>
   );
 }

package/src/themes/default/VersionSwitcher.tsx

@@ -0,0 +1,59 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
+import { useNavigate } from 'react-router';
+import { getAllVersions } from '@/lib/config';
+import { getVersionHomeHref } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function VersionSwitcher() {
+  const { config, version } = usePageContext();
+  const navigate = useNavigate();
+
+  if (!config.versions?.length) return null;
+
+  const versions = getAllVersions(config);
+  const active = versions.find(v =>
+    v.isLatest ? version.dir === null : v.dir === version.dir,
+  );
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
+        {versions.map(v => (
+          <Menu.Item
+            key={v.dir ?? '_latest'}
+            onClick={() => navigate(getVersionHomeHref(config, v.dir))}
+          >
+            <Flex gap='small' align='center'>
+              {v.label}
+              {v.badge ? (
+                <Badge variant={v.badge.variant} size='micro'>
+                  {v.badge.label}
+                </Badge>
+              ) : null}
+            </Flex>
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/themes/paper/ContentDirDropdown.tsx

@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Button, Menu } from '@raystack/apsara';
+import { useLocation, useNavigate } from 'react-router';
+import { getLandingEntries } from '@/lib/config';
+import { getActiveContentDir } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function ContentDirDropdown() {
+  const { config, version } = usePageContext();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const entries = getLandingEntries(config, version.dir);
+  if (entries.length <= 1) return null;
+
+  const activeDir = getActiveContentDir(pathname, config);
+  const activeEntry =
+    entries.find(e => e.contentDir === activeDir) ?? entries[0];
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        {activeEntry.label}
+      </Menu.Trigger>
+      <Menu.Content>
+        {entries.map(entry => (
+          <Menu.Item
+            key={entry.href}
+            onClick={() => navigate(entry.href)}
+          >
+            {entry.label}
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/themes/paper/Layout.module.css

@@ -25,6 +25,13 @@
   margin-bottom: var(--rs-space-7);
 }
 
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-3);
+  margin-bottom: var(--rs-space-7);
+}
+
 .content {
   flex: 1;
   overflow-y: auto;

package/src/themes/paper/Layout.tsx

@@ -2,36 +2,43 @@
 
 import { Flex, Headline } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
-import { Footer } from '@/components/ui/footer';
 import type { ThemeLayoutProps } from '@/types';
 import { ChapterNav } from './ChapterNav';
+import { ContentDirDropdown } from './ContentDirDropdown';
 import styles from './Layout.module.css';
+import { VersionSwitcher } from './VersionSwitcher';
 
 export function Layout({
   children,
   config,
   tree,
+  hideSidebar,
   classNames
 }: ThemeLayoutProps) {
   return (
     <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
       <Flex className={cx(styles.body, classNames?.body)}>
-        <aside className={cx(styles.sidebar, classNames?.sidebar)}>
-          <Headline
-            size='small'
-            weight='medium'
-            as='h1'
-            className={styles.title}
-          >
-            {config.title}
-          </Headline>
-          <ChapterNav tree={tree} />
-        </aside>
+        {hideSidebar ? null : (
+          <aside className={cx(styles.sidebar, classNames?.sidebar)}>
+            <Headline
+              size='small'
+              weight='medium'
+              as='h1'
+              className={styles.title}
+            >
+              {config.site.title}
+            </Headline>
+            <div className={styles.nav}>
+              <VersionSwitcher />
+              <ContentDirDropdown />
+            </div>
+            <ChapterNav tree={tree} />
+          </aside>
+        )}
         <div className={cx(styles.content, classNames?.content)}>
           {children}
         </div>
       </Flex>
-      <Footer config={config.footer} />
     </Flex>
   );
 }

package/src/themes/paper/VersionSwitcher.tsx

@@ -0,0 +1,60 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
+import { useNavigate } from 'react-router';
+import { getAllVersions } from '@/lib/config';
+import { getVersionHomeHref } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function VersionSwitcher() {
+  const { config, version } = usePageContext();
+  const navigate = useNavigate();
+
+  if (!config.versions?.length) return null;
+
+  const versions = getAllVersions(config);
+  const active = versions.find(v =>
+    v.isLatest ? version.dir === null : v.dir === version.dir,
+  );
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center' justify='start'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
+        {versions.map(v => (
+          <Menu.Item
+            key={v.dir ?? '_latest'}
+            onClick={() => navigate(getVersionHomeHref(config, v.dir))}
+          >
+            <Flex gap='small' align='center'>
+              {v.label}
+              {v.badge ? (
+                <Badge variant={v.badge.variant} size='micro'>
+                  {v.badge.label}
+                </Badge>
+              ) : null}
+            </Flex>
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}