@raystack/chronicle 0.5.4 → 0.6.0

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

@@ -1,79 +1,226 @@
 .layout {
+  --navbar-height: 48px;
   min-height: 100vh;
 }
 
-.header {
-  border-bottom: 1px solid var(--rs-color-border-base-primary);
-}
-
-.search {
-  margin-left: var(--rs-space-5);
-}
-
 .body {
   flex: 1;
 }
 
 .sidebar {
-  width: 260px;
+  width: 262px;
+  flex: 0 0 262px;
+  display: flex;
+  flex-direction: column;
   position: sticky;
   top: 0;
   height: 100vh;
+  background: var(--rs-color-background-base-secondary);
 }
 
-.content {
-  flex: 1;
-  padding: var(--rs-space-9);
+.sidebarLogo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
 }
 
-.sidebarList {
-  list-style: none;
+.configIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+.configIcon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.sidebar[data-position='left'] {
+  border-right: none;
   padding: 0;
-  margin: 0;
 }
 
-.separator {
-  height: 1px;
-  background: var(--rs-color-border-base-primary);
-  margin: var(--rs-space-3) 0;
+.sidebarNavbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-3);
+  width: 100%;
+  height: var(--navbar-height);
+  padding: 0 var(--rs-space-5);
+  flex-shrink: 0;
+  backdrop-filter: blur(1px);
+}
+
+.sidebarNavLogo {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.sidebarNavActions {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+}
+
+.sidebarMain {
+  padding: var(--rs-space-7) var(--rs-space-5);
+  gap: 0;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.topLinks {
+  width: 100%;
+  margin-bottom: var(--rs-space-7);
+}
+
+.topLinkItem {
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.topLinkText {
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.topLinkItem[data-active='true'] {
+  background: transparent;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.topLinkItem[data-active='true'] .topLinkText {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.sidebarFooter {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  padding: 0 var(--rs-space-5);
+  border-top: 0.5px solid var(--rs-color-border-base-primary);
+  background: var(--rs-color-background-base-secondary);
+  backdrop-filter: blur(7.5px);
+}
+
+.sidebarMain::-webkit-scrollbar {
+  display: none;
 }
 
-.folder {
-  margin-bottom: var(--rs-space-3);
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-3);
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  margin-bottom: 0;
+  padding: 0 var(--rs-space-5);
+  background: var(--rs-color-background-base-secondary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  border-radius: 0;
+  backdrop-filter: blur(1px);
+}
+
+.mainArea {
+  flex: 1;
+  min-width: 0;
 }
 
-.folderLabel {
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--rs-color-text-base-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.cardWrapper {
+  flex: 1;
+  display: flex;
+  padding: 0 0 var(--rs-space-2) 0;
+  min-height: 0;
+  background: var(--rs-color-background-base-secondary);
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-left: 0.5px solid var(--rs-color-border-base-primary);
+  box-shadow: var(--rs-shadow-soft);
+  overflow: visible;
+}
+
+.subNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--navbar-height);
+  padding: var(--rs-space-4) var(--rs-space-7);
+  background: var(--rs-color-background-base-primary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  backdrop-filter: blur(1px);
+}
+
+.subNavLeft {
+  min-width: 0;
+}
+
+.content {
+  flex: 1;
+  padding: var(--rs-space-9) var(--rs-space-7);
+  background: var(--rs-color-background-base-primary);
 }
 
-.folder > .sidebarList {
-  margin-top: var(--rs-space-2);
+.groupItems {
   padding-left: var(--rs-space-4);
+  padding-bottom: var(--rs-space-3);
+  gap: 0;
+}
+
+.navGroup {
+  margin-top: 0;
 }
 
-.navButton {
+.navGroup[data-depth='0'] {
+  margin-top: var(--rs-space-7);
+}
+
+.navGroup .navGroupHeader {
+  margin: 0;
+}
+
+.navGroup[data-depth='1'] .navGroupHeader {
+  height: auto;
+}
+
+.navGroup[data-depth='1'] .navGroupLabel {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.navGroupTrigger {
   display: flex;
+  padding: var(--rs-space-3);
   align-items: center;
+  gap: var(--rs-space-3);
+  align-self: stretch;
+  width: 100%;
   height: 32px;
-  padding: 0 var(--rs-space-4);
-  border: 1px solid var(--rs-color-border-base-primary);
   border-radius: var(--rs-radius-2);
-  font-size: var(--rs-font-size-small);
-  font-weight: var(--rs-font-weight-medium);
-  color: var(--rs-color-foreground-base-primary);
-  text-decoration: none;
+  box-sizing: border-box;
 }
 
-.navButton:hover {
-  background: var(--rs-color-background-base-primary-hover);
+.navGroupLabel {
+  flex: 1;
+  text-align: left;
+  color: var(--rs-color-foreground-base-secondary);
+  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);
 }
 
-.groupItems {
-  padding-left: var(--rs-space-4);
+.navGroupChevron {
+  margin-left: auto;
 }
 
 .page {

package/src/themes/default/Layout.tsx

@@ -1,22 +1,28 @@
-import { RectangleStackIcon } from '@heroicons/react/24/outline';
 import {
-  Button,
-  Flex,
-  Headline,
-  Link,
-  Navbar,
-  Sidebar
-} from '@raystack/apsara';
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CodeBracketSquareIcon,
+  RectangleStackIcon,
+  DocumentTextIcon,
+  Squares2X2Icon
+} from '@heroicons/react/24/outline';
+import { Flex, IconButton, Sidebar } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
-import { useEffect, useRef } from 'react';
-import { Link as RouterLink, useLocation } from 'react-router';
+import { useEffect, useMemo, useRef } from 'react';
+import { Link as RouterLink, useLocation, useNavigate } from 'react-router';
 import { MethodBadge } from '@/components/api/method-badge';
 import { ClientThemeSwitcher } from '@/components/ui/client-theme-switcher';
-import { Footer } from '@/components/ui/footer';
 import { Search } from '@/components/ui/search';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { getLandingEntries } from '@/lib/config';
+import { getActiveContentDir } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
 import type { Node } from 'fumadocs-core/page-tree';
 import type { ThemeLayoutProps } from '@/types';
 import styles from './Layout.module.css';
+import { OpenInAI } from './OpenInAI';
+import { SidebarLogo } from './SidebarLogo';
+import { VersionSwitcher } from './VersionSwitcher';
 
 const iconMap: Record<string, React.ReactNode> = {
   'rectangle-stack': <RectangleStackIcon width={16} height={16} />,
@@ -27,16 +33,51 @@ const iconMap: Record<string, React.ReactNode> = {
   'method-patch': <MethodBadge method='PATCH' size='micro' />
 };
 
+function renderConfigIcon(
+  icon: string | undefined,
+  alt: string,
+  fallback: React.ReactNode
+): React.ReactNode {
+  if (!icon) return fallback;
+  if (icon.trim().startsWith('<svg')) {
+    return (
+      <span
+        aria-label={alt}
+        className={styles.configIcon}
+        dangerouslySetInnerHTML={{ __html: icon }}
+      />
+    );
+  }
+  return <img src={icon} alt={alt} className={styles.configIcon} />;
+}
+
 let savedScrollTop = 0;
 
 export function Layout({
   children,
   config,
   tree,
+  hideSidebar,
   classNames
 }: ThemeLayoutProps) {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { page, version } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const isApiRoute = pathname === '/apis' || pathname.startsWith('/apis/');
+  const isApiBase = (basePath: string) =>
+    pathname === basePath || pathname.startsWith(`${basePath}/`);
+  const { prev, next } = page ?? { prev: null, next: null };
+
+  const contentEntries = getLandingEntries(config, version.dir);
+  const activeContentDir = getActiveContentDir(pathname, config);
+  const apiEntries = config.api ?? [];
+  const showTopLinks = contentEntries.length + apiEntries.length > 1;
+
+  const slug = useMemo(
+    () => (pathname === '/' ? [] : pathname.split('/').filter(Boolean)),
+    [pathname]
+  );
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -58,87 +99,147 @@ export function Layout({
 
   return (
     <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
-      <Navbar className={styles.header}>
-        <Navbar.Start>
-          <RouterLink
-            to='/'
-            style={{ textDecoration: 'none', color: 'inherit' }}
-          >
-            <Headline size='small' weight='medium' as='h1'>
-              {config.title}
-            </Headline>
-          </RouterLink>
-        </Navbar.Start>
-        <Navbar.End>
-          <Flex gap='medium' align='center' className={styles.navActions}>
-            {config.api?.map(api => (
-              <RouterLink
-                key={api.basePath}
-                to={api.basePath}
-                className={styles.navButton}
-              >
-                {api.name} API
-              </RouterLink>
-            ))}
-            {config.navigation?.links?.map(link => (
-              <Link key={link.href} href={link.href}>
-                {link.label}
-              </Link>
-            ))}
-            {config.search?.enabled && <Search />}
-          </Flex>
-          <ClientThemeSwitcher size={16} />
-        </Navbar.End>
-      </Navbar>
       <Flex className={cx(styles.body, classNames?.body)}>
-        <Sidebar
-          defaultOpen
-          collapsible={false}
-          className={cx(styles.sidebar, classNames?.sidebar)}
-        >
-          <Sidebar.Main ref={scrollRef}>
-            {tree.children.map((item, i) => (
-              <SidebarNode
-                key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
-                item={item}
-                pathname={pathname}
-              />
-            ))}
-          </Sidebar.Main>
-        </Sidebar>
-        <main className={cx(styles.content, classNames?.content)}>
-          {children}
-        </main>
+        {hideSidebar ? null : (
+          <Sidebar
+            defaultOpen
+            collapsible={false}
+            className={cx(styles.sidebar, classNames?.sidebar)}
+          >
+            <Sidebar.Header className={styles.sidebarHeader}>
+              <SidebarLogo config={config} />
+              <Flex gap='small' align='center'>
+                {config.search?.enabled && <Search />}
+                <ClientThemeSwitcher size={16} />
+              </Flex>
+            </Sidebar.Header>
+            <Sidebar.Main ref={scrollRef} className={styles.sidebarMain}>
+              {showTopLinks ? (
+                <div className={styles.topLinks}>
+                  {contentEntries.map(entry => (
+                    <Sidebar.Item
+                      key={entry.href}
+                      href={entry.href}
+                      active={activeContentDir === entry.contentDir}
+                      leadingIcon={renderConfigIcon(
+                        entry.icon,
+                        entry.label,
+                        <DocumentTextIcon width={16} height={16} />
+                      )}
+                      classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
+                      render={<RouterLink to={entry.href} />}
+                    >
+                      {entry.label}
+                    </Sidebar.Item>
+                  ))}
+                  {apiEntries.map(api => (
+                    <Sidebar.Item
+                      key={api.basePath}
+                      href={api.basePath}
+                      active={isApiBase(api.basePath)}
+                      leadingIcon={renderConfigIcon(
+                        api.icon,
+                        api.name,
+                        <CodeBracketSquareIcon width={16} height={16} />
+                      )}
+                      classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
+                      render={<RouterLink to={api.basePath} />}
+                    >
+                      {api.name} API
+                    </Sidebar.Item>
+                  ))}
+                </div>
+              ) : null}
+              {tree.children.map((item, i) => (
+                <SidebarNode
+                  key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
+                  item={item}
+                  pathname={pathname}
+                />
+              ))}
+            </Sidebar.Main>
+            {config.versions?.length ? (
+              <Sidebar.Footer className={styles.sidebarFooter}>
+                <VersionSwitcher />
+              </Sidebar.Footer>
+            ) : null}
+          </Sidebar>
+        )}
+        <Flex direction='column' className={styles.mainArea}>
+          <div className={styles.cardWrapper}>
+            <div className={styles.card}>
+              <nav className={styles.subNav}>
+                <Flex align='center' gap='small' className={styles.subNavLeft}>
+                  <Flex align='center' gap='extra-small'>
+                    <IconButton
+                      size={2}
+                      disabled={!prev}
+                      onClick={() => prev && navigate(prev.url)}
+                      aria-label='Previous page'
+                    >
+                      <ArrowLeftIcon width={14} height={14} />
+                    </IconButton>
+                    <IconButton
+                      size={2}
+                      disabled={!next}
+                      onClick={() => next && navigate(next.url)}
+                      aria-label='Next page'
+                    >
+                      <ArrowRightIcon width={14} height={14} />
+                    </IconButton>
+                  </Flex>
+                  {!isApiRoute && <Breadcrumbs slug={slug} tree={tree} />}
+                </Flex>
+                <OpenInAI />
+              </nav>
+              <main className={cx(styles.content, classNames?.content)}>
+                {children}
+              </main>
+            </div>
+          </div>
+        </Flex>
       </Flex>
-      <Footer config={config.footer} />
     </Flex>
   );
 }
 
 function SidebarNode({
   item,
-  pathname
+  pathname,
+  depth = 0
 }: {
   item: Node;
   pathname: string;
+  depth?: number;
 }) {
   if (item.type === 'separator') {
     return null;
   }
 
   if (item.type === 'folder') {
+    if (depth > 1) return null;
     const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
     return (
       <Sidebar.Group
+        className={styles.navGroup}
+        data-depth={depth}
         label={item.name?.toString() ?? ''}
         leadingIcon={icon ?? undefined}
-        classNames={{ items: styles.groupItems }}
+        collapsible={depth === 1}
+        classNames={{
+          items: styles.groupItems,
+          header: styles.navGroupHeader,
+          trigger: styles.navGroupTrigger,
+          label: styles.navGroupLabel,
+          chevron: styles.navGroupChevron,
+        }}
       >
         {item.children.map((child, i) => (
           <SidebarNode
             key={child.type === 'page' ? child.url : (child.name?.toString() ?? i)}
             item={child}
             pathname={pathname}
+            depth={depth + 1}
           />
         ))}
       </Sidebar.Group>
@@ -155,7 +256,7 @@ function SidebarNode({
       href={href}
       active={isActive}
       leadingIcon={icon ?? undefined}
-      as={link}
+      render={link}
     >
       {item.name}
     </Sidebar.Item>

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>
+  );
+}