From 34fc6bf5f2bd266226d13936bc5e89a4bce6ed95 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 10:46:21 +0530
Subject: [PATCH 01/27] feat: add prev/next nav fields to Page type

Prepare Page type for backend-provided prev/next links used by the
docs sub-navbar. Adds PageNavLink/PageNav types, extends Page via
extends PageNav, unifies PageData with Page in page context, and
threads null placeholders through SSR + hydration until backend
computes real values.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/page-context.tsx   | 33 +++++++------------
 packages/chronicle/src/pages/DocsPage.tsx     |  7 +---
 .../chronicle/src/server/entry-client.tsx     |  6 +++-
 .../chronicle/src/server/entry-server.tsx     |  4 +++
 packages/chronicle/src/types/content.ts       | 12 ++++++-
 5 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/packages/chronicle/src/lib/page-context.tsx b/packages/chronicle/src/lib/page-context.tsx
index 9487a9d..3657e2f 100644
--- a/packages/chronicle/src/lib/page-context.tsx
+++ b/packages/chronicle/src/lib/page-context.tsx
@@ -10,21 +10,14 @@ import type { ApiSpec } from '@/lib/openapi';
 import { resolveRoute, RouteType } from '@/lib/route-resolver';
 import type { VersionContext } from '@/lib/version-source';
 import { LATEST_CONTEXT } from '@/lib/version-source';
-import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
+import type { ChronicleConfig, Frontmatter, Page, Root, TableOfContents } from '@/types';
 
 export type MdxLoader = (relativePath: string) => Promise<{ content: ReactNode; toc: TableOfContents }>;
 
-interface PageData {
-  slug: string[];
-  frontmatter: Frontmatter;
-  content: ReactNode;
-  toc: TableOfContents;
-}
-
 interface PageContextValue {
   config: ChronicleConfig;
   tree: Root;
-  page: PageData | null;
+  page: Page | null;
   errorStatus: number | null;
   apiSpecs: ApiSpec[];
   version: VersionContext;
@@ -54,18 +47,18 @@ export function usePageContext(): PageContextValue {
 interface PageProviderProps {
   initialConfig: ChronicleConfig;
   initialTree: Root;
-  initialPage: PageData | null;
+  initialPage: Page | null;
   initialApiSpecs: ApiSpec[];
   initialVersion: VersionContext;
   loadMdx: MdxLoader;
   children: ReactNode;
 }
 
-function getInitialErrorStatus(
-  page: PageData | null,
-  config: ChronicleConfig,
-  pathname: string,
-): number | null {
+function isApisRoute(pathname: string): boolean {
+  return pathname === '/apis' || pathname.startsWith('/apis/');
+}
+
+function getInitialErrorStatus(page: Page | null, config: ChronicleConfig, pathname: string): number | null {
   if (page) return null;
   const route = resolveRoute(pathname, config);
   if (route.type === RouteType.ApiIndex || route.type === RouteType.ApiPage) return null;
@@ -85,10 +78,8 @@ export function PageProvider({
 }: PageProviderProps) {
   const { pathname } = useLocation();
   const [tree] = useState<Root>(initialTree);
-  const [page, setPage] = useState<PageData | null>(initialPage);
-  const [errorStatus, setErrorStatus] = useState<number | null>(
-    getInitialErrorStatus(initialPage, initialConfig, pathname),
-  );
+  const [page, setPage] = useState<Page | null>(initialPage);
+  const [errorStatus, setErrorStatus] = useState<number | null>(getInitialErrorStatus(initialPage, initialConfig, pathname));
   const [apiSpecs, setApiSpecs] = useState<ApiSpec[]>(initialApiSpecs);
   const [version, setVersion] = useState<VersionContext>(initialVersion);
   const [currentPath, setCurrentPath] = useState(pathname);
@@ -140,12 +131,12 @@ export function PageProvider({
         }
         return res.json();
       })
-      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string } | undefined) => {
+      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string; prev: Page['prev']; next: Page['next'] } | undefined) => {
         if (cancelled.current || !data) return;
         const { content, toc } = await loadMdx(data.originalPath || data.relativePath);
         if (cancelled.current) return;
         setErrorStatus(null);
-        setPage({ slug: route.slug, frontmatter: data.frontmatter, content, toc });
+        setPage({ slug: route.slug, frontmatter: data.frontmatter, content, toc, prev: data.prev, next: data.next });
       })
       .catch(() => {
         if (!cancelled.current) {
diff --git a/packages/chronicle/src/pages/DocsPage.tsx b/packages/chronicle/src/pages/DocsPage.tsx
index e1710b4..35ce71f 100644
--- a/packages/chronicle/src/pages/DocsPage.tsx
+++ b/packages/chronicle/src/pages/DocsPage.tsx
@@ -32,12 +32,7 @@ export function DocsPage({ slug }: DocsPageProps) {
         }}
       />
       <Page
-        page={{
-          slug: page.slug,
-          frontmatter: page.frontmatter,
-          content: page.content,
-          toc: page.toc
-        }}
+        page={page}
         config={config}
         tree={tree}
       />
diff --git a/packages/chronicle/src/server/entry-client.tsx b/packages/chronicle/src/server/entry-client.tsx
index 141ae5f..f862e89 100644
--- a/packages/chronicle/src/server/entry-client.tsx
+++ b/packages/chronicle/src/server/entry-client.tsx
@@ -8,7 +8,7 @@ import { getApiConfigsForVersion } from '@/lib/config';
 import { PageProvider } from '@/lib/page-context';
 import { resolveRoute, RouteType } from '@/lib/route-resolver';
 import { resolveVersionFromUrl, type VersionContext } from '@/lib/version-source';
-import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
+import type { ChronicleConfig, Frontmatter, PageNavLink, Root, TableOfContents } from '@/types';
 import type { ApiSpec } from '@/lib/openapi';
 import type { ReactNode } from 'react';
 import { App } from './App';
@@ -21,6 +21,8 @@ interface EmbeddedData {
   frontmatter: Frontmatter;
   relativePath: string;
   originalPath?: string;
+  prev: PageNavLink | null;
+  next: PageNavLink | null;
 }
 
 const defaultConfig: ChronicleConfig = {
@@ -83,6 +85,8 @@ async function hydrate() {
       ? {
           slug: embedded!.slug,
           frontmatter: embedded!.frontmatter,
+          prev: embedded!.prev,
+          next: embedded!.next,
           ...(await loadMdxModule(mdxPath)),
         }
       : null;
diff --git a/packages/chronicle/src/server/entry-server.tsx b/packages/chronicle/src/server/entry-server.tsx
index e5721d7..6536a88 100644
--- a/packages/chronicle/src/server/entry-server.tsx
+++ b/packages/chronicle/src/server/entry-server.tsx
@@ -58,6 +58,8 @@ export default {
             ? React.createElement(mdxModule.default, { components: mdxComponents })
             : null,
           toc: mdxModule?.toc ?? [],
+          prev: null,
+          next: null,
         }
       : null;
 
@@ -69,6 +71,8 @@ export default {
       frontmatter: pageData?.frontmatter ?? null,
       relativePath,
       originalPath,
+      prev: pageData?.prev ?? null,
+      next: pageData?.next ?? null,
     };
     const safeJson = JSON.stringify(embeddedData).replace(/</g, '\\u003c');
 
diff --git a/packages/chronicle/src/types/content.ts b/packages/chronicle/src/types/content.ts
index 0ca7ecf..6f36f53 100644
--- a/packages/chronicle/src/types/content.ts
+++ b/packages/chronicle/src/types/content.ts
@@ -12,7 +12,17 @@ export interface Frontmatter {
   lastModified?: string
 }
 
-export interface Page {
+export interface PageNavLink {
+  url: string
+  title: string
+}
+
+export interface PageNav {
+  prev: PageNavLink | null
+  next: PageNavLink | null
+}
+
+export interface Page extends PageNav {
   slug: string[]
   frontmatter: Frontmatter
   content: ReactNode

From 3e9a3d72bc8c468350270682dc34ef8ac087f8df Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 10:47:37 +0530
Subject: [PATCH 02/27] fix: add std-env as root dep to unblock nitro beta

nitro@3.0.260311-beta lists std-env in devDependencies but its
runtime imports it. Node ESM resolution from nitro's isolated
cache path fails without std-env at top-level node_modules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 bun.lock     | 3 +++
 package.json | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/bun.lock b/bun.lock
index 84ca123..5a1a84d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4,6 +4,9 @@
   "workspaces": {
     "": {
       "name": "chronicle",
+      "dependencies": {
+        "std-env": "^4.0.0",
+      },
     },
     "packages/chronicle": {
       "name": "@raystack/chronicle",
diff --git a/package.json b/package.json
index 5ccda8b..c433f52 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,8 @@
     "build:examples:basic": "./packages/chronicle/bin/chronicle.js build --config examples/basic/chronicle.yaml",
     "dev:examples:versioned": "./packages/chronicle/bin/chronicle.js dev --config examples/versioned/chronicle.yaml",
     "build:examples:versioned": "./packages/chronicle/bin/chronicle.js build --config examples/versioned/chronicle.yaml"
+  },
+  "dependencies": {
+    "std-env": "^4.0.0"
   }
 }

From 1d8388460a841efda300b22bdcd18bed4c6fb102 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:05:43 +0530
Subject: [PATCH 03/27] feat: restructure default theme layout with tab bar

Drop the top Navbar; move navigation into a per-section tab bar
alongside the sidebar. Resize sidebar to 262px, swap button-based
nav links for pill-style tabs using mini typography tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/ui/search.module.css       | 13 ---
 .../chronicle/src/components/ui/search.tsx    | 37 +++-----
 .../src/themes/default/Layout.module.css      | 86 ++++++++++---------
 .../chronicle/src/themes/default/Layout.tsx   | 82 ++++++++----------
 4 files changed, 95 insertions(+), 123 deletions(-)

diff --git a/packages/chronicle/src/components/ui/search.module.css b/packages/chronicle/src/components/ui/search.module.css
index 086e7f4..6a6b4bf 100644
--- a/packages/chronicle/src/components/ui/search.module.css
+++ b/packages/chronicle/src/components/ui/search.module.css
@@ -1,16 +1,3 @@
-.trigger {
-  gap: 8px;
-  color: var(--rs-color-foreground-base-secondary);
-  cursor: pointer;
-}
-
-.kbd {
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--rs-color-border-base-primary);
-  font-size: 12px;
-}
-
 .dialogContent {
   max-width: 600px;
   padding: 0;
diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index 370c4ce..e2e0d21 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -1,6 +1,9 @@
-import { DocumentIcon, HashtagIcon } from '@heroicons/react/24/outline';
-import { Button, Command, Dialog, Text } from '@raystack/apsara';
-import { cx } from 'class-variance-authority';
+import {
+  DocumentIcon,
+  HashtagIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline';
+import { Command, Dialog, IconButton, Text } from '@raystack/apsara';
 import type { SortedResult } from 'fumadocs-core/search';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useCallback, useEffect, useState } from 'react';
@@ -9,21 +12,6 @@ import { MethodBadge } from '@/components/api/method-badge';
 import { usePageContext } from '@/lib/page-context';
 import styles from './search.module.css';
 
-function SearchShortcutKey({ className }: { className?: string }) {
-  const [key, setKey] = useState('⌘');
-
-  useEffect(() => {
-    const isMac = navigator.platform?.toUpperCase().includes('MAC');
-    setKey(isMac ? '⌘' : 'Ctrl');
-  }, []);
-
-  return (
-    <kbd className={className} suppressHydrationWarning>
-      {key} K
-    </kbd>
-  );
-}
-
 interface SearchProps {
   className?: string;
 }
@@ -67,16 +55,13 @@ export function Search({ className }: SearchProps) {
 
   return (
     <>
-      <Button
-        variant='outline'
-        color='neutral'
-        size='small'
+      <IconButton
+        size={3}
         onClick={() => setOpen(true)}
-        className={cx(styles.trigger, className)}
-        trailingIcon={<SearchShortcutKey className={styles.kbd} />}
+        className={className}
       >
-        Search...
-      </Button>
+        <MagnifyingGlassIcon width={16} height={16} />
+      </IconButton>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <Dialog.Content className={styles.dialogContent}>
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index dadbe5d..52b55c8 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -2,76 +2,84 @@
   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;
   position: sticky;
   top: 0;
   height: 100vh;
 }
 
-.content {
-  flex: 1;
-  padding: var(--rs-space-9);
-}
-
-.sidebarList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-3) var(--rs-space-4);
 }
 
-.separator {
-  height: 1px;
+.headerDivider {
+  width: 1px;
+  height: 13px;
   background: var(--rs-color-border-base-primary);
-  margin: var(--rs-space-3) 0;
 }
 
-.folder {
-  margin-bottom: var(--rs-space-3);
+.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;
+.tabBar {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 var(--rs-space-2);
+  background: var(--rs-color-background-base-secondary);
+  border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
-.folder > .sidebarList {
-  margin-top: var(--rs-space-2);
-  padding-left: var(--rs-space-4);
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
 }
 
-.navButton {
+.tab {
   display: flex;
   align-items: center;
-  height: 32px;
-  padding: 0 var(--rs-space-4);
-  border: 1px solid var(--rs-color-border-base-primary);
+  gap: var(--rs-space-2);
+  padding: var(--rs-space-2) var(--rs-space-3);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   border-radius: var(--rs-radius-2);
-  font-size: var(--rs-font-size-small);
+  font-size: var(--rs-font-size-mini);
   font-weight: var(--rs-font-weight-medium);
-  color: var(--rs-color-foreground-base-primary);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  line-height: var(--rs-line-height-mini);
+  color: var(--rs-color-foreground-base-secondary);
   text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
 }
 
-.navButton:hover {
+.tab:hover {
+  color: var(--rs-color-foreground-base-primary);
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.tabActive {
+  background: var(--rs-color-background-neutral-primary);
+  border-color: var(--rs-color-border-base-secondary);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.content {
+  flex: 1;
+  padding: var(--rs-space-9);
+}
+
 .groupItems {
   padding-left: var(--rs-space-4);
 }
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 9017c61..b56688e 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -1,12 +1,9 @@
-import { RectangleStackIcon } from '@heroicons/react/24/outline';
 import {
-  Button,
-  Flex,
-  Headline,
-  Link,
-  Navbar,
-  Sidebar
-} from '@raystack/apsara';
+  CodeBracketSquareIcon,
+  CubeIcon,
+  RectangleStackIcon
+} from '@heroicons/react/24/outline';
+import { Flex, Sidebar } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
 import { useEffect, useRef } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
@@ -40,6 +37,7 @@ export function Layout({
 }: ThemeLayoutProps) {
   const { pathname } = useLocation();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const isApiRoute = pathname.startsWith('/apis');
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -61,40 +59,6 @@ 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.site.title}
-            </Headline>
-          </RouterLink>
-        </Navbar.Start>
-        <Navbar.End>
-          <Flex gap='medium' align='center' className={styles.navActions}>
-            <ContentDirButtons />
-            <VersionSwitcher />
-            {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)}>
         {hideSidebar ? null : (
           <Sidebar
@@ -102,6 +66,17 @@ export function Layout({
             collapsible={false}
             className={cx(styles.sidebar, classNames?.sidebar)}
           >
+            <Sidebar.Header className={styles.sidebarHeader}>
+              <Flex gap='small' align='center'>
+                <CubeIcon width={24} height={24} />
+                <div className={styles.headerDivider} />
+                <VersionSwitcher />
+              </Flex>
+              <Flex gap='small' align='center'>
+                {config.search?.enabled && <Search />}
+                <ClientThemeSwitcher size={16} />
+              </Flex>
+            </Sidebar.Header>
             <Sidebar.Main ref={scrollRef}>
               {tree.children.map((item, i) => (
                 <SidebarNode
@@ -113,9 +88,26 @@ export function Layout({
             </Sidebar.Main>
           </Sidebar>
         )}
-        <main className={cx(styles.content, classNames?.content)}>
-          {children}
-        </main>
+        <Flex direction='column' className={styles.mainArea}>
+          <nav className={styles.tabBar}>
+            <div className={styles.tabs}>
+              <ContentDirButtons />
+              {config.api?.map(api => (
+                <RouterLink
+                  key={api.basePath}
+                  to={api.basePath}
+                  className={cx(styles.tab, isApiRoute && styles.tabActive)}
+                >
+                  <CodeBracketSquareIcon width={12} height={12} />
+                  <span>{api.name} API</span>
+                </RouterLink>
+              ))}
+            </div>
+          </nav>
+          <main className={cx(styles.content, classNames?.content)}>
+            {children}
+          </main>
+        </Flex>
       </Flex>
       <Footer config={config.footer} />
     </Flex>

From 664a820813df05d4766e83451bbd237e0b51a554 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 17 Apr 2026 11:46:29 +0530
Subject: [PATCH 04/27] chore: switch docs theme to default

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/chronicle.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/chronicle.yaml b/docs/chronicle.yaml
index 627ae8f..09efcbf 100644
--- a/docs/chronicle.yaml
+++ b/docs/chronicle.yaml
@@ -7,7 +7,7 @@ content:
     label: Docs
 
 theme:
-  name: paper
+  name: default
 
 navigation:
   links:

From c51f3fa78a6ecc242311949fa9e6055b7a42abc7 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:08:18 +0530
Subject: [PATCH 05/27] feat: compute page prev/next on the server

Add getPageNav helper that flattens the page tree and returns the
adjacent PageNavLinks for a slug. Both the /api/page handler and SSR
pageData now populate prev/next so the client can render navigation
without re-flattening the tree.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/source.ts          | 19 ++++++++++++++++++-
 packages/chronicle/src/server/api/page.ts     |  6 +++++-
 .../chronicle/src/server/entry-server.tsx     |  9 +++++----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index e528c8d..0f74c10 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/src/lib/source.ts
@@ -1,8 +1,8 @@
 import { loader } from 'fumadocs-core/source';
+import { flattenTree } from 'fumadocs-core/page-tree';
 import type { Root, Node, Folder } from 'fumadocs-core/page-tree';
 import type { MDXContent } from 'mdx/types';
 import type { TableOfContents } from 'fumadocs-core/toc';
-import type { Frontmatter } from '@/types';
 import {
   getLatestContentRoots,
   getVersionContentRoots,
@@ -14,6 +14,7 @@ import {
   resolveVersionFromUrl,
   type VersionContext,
 } from './version-source';
+import type { Frontmatter, PageNav, PageNavLink } from '@/types';
 
 const CONTENT_PREFIX = '../../.content/';
 
@@ -168,6 +169,22 @@ export function getVersionContextForUrl(url: string): VersionContext {
 
 export type { VersionContext } from './version-source';
 
+export async function getPageNav(slug: string[]): Promise<PageNav> {
+  const tree = await getPageTree();
+  const pages = flattenTree(tree.children);
+  const url = slug.length === 0 ? '/' : `/${slug.join('/')}`;
+  const i = pages.findIndex(p => p.url === url);
+  if (i < 0) return { prev: null, next: null };
+  const toLink = (p: (typeof pages)[number]): PageNavLink => ({
+    url: p.url,
+    title: String(p.name ?? '')
+  });
+  return {
+    prev: i > 0 ? toLink(pages[i - 1]) : null,
+    next: i < pages.length - 1 ? toLink(pages[i + 1]) : null
+  };
+}
+
 export function extractFrontmatter(page: { data: unknown }, fallbackTitle?: string): Frontmatter {
   const d = page.data as Record<string, unknown>;
   return {
diff --git a/packages/chronicle/src/server/api/page.ts b/packages/chronicle/src/server/api/page.ts
index bfb43aa..568d6aa 100644
--- a/packages/chronicle/src/server/api/page.ts
+++ b/packages/chronicle/src/server/api/page.ts
@@ -1,5 +1,5 @@
 import { defineHandler, HTTPError } from 'nitro';
-import { getPage, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
+import { getPage, getPageNav, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
 
 export default defineHandler(async event => {
   const slugParam = event.url.searchParams.get('slug') ?? '';
@@ -10,9 +10,13 @@ export default defineHandler(async event => {
     throw new HTTPError({ status: 404, message: 'Page not found' });
   }
 
+  const nav = await getPageNav(slug);
+
   return {
     frontmatter: extractFrontmatter(page, slug[slug.length - 1]),
     relativePath: getRelativePath(page),
     originalPath: getOriginalPath(page),
+    prev: nav.prev,
+    next: nav.next,
   };
 });
diff --git a/packages/chronicle/src/server/entry-server.tsx b/packages/chronicle/src/server/entry-server.tsx
index 6536a88..0fa6b2a 100644
--- a/packages/chronicle/src/server/entry-server.tsx
+++ b/packages/chronicle/src/server/entry-server.tsx
@@ -9,7 +9,7 @@ import { getApiConfigsForVersion, loadConfig } from '@/lib/config';
 import { loadApiSpecs } from '@/lib/openapi';
 import { PageProvider } from '@/lib/page-context';
 import { resolveRoute, RouteType } from '@/lib/route-resolver';
-import { getPage, getPageTree, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
+import { getPageTree, getPage, getPageNav, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
 import { useNitroApp } from 'nitro/app';
 import { App } from './App';
 
@@ -41,9 +41,10 @@ export default {
       : [];
     const apiSpecs = apiConfigs.length ? await loadApiSpecs(apiConfigs) : [];
 
-    const [tree, page] = await Promise.all([
+    const [tree, page, nav] = await Promise.all([
       getPageTree(),
       route.type === RouteType.DocsPage ? getPage(route.slug) : Promise.resolve(null),
+      getPageNav(pageSlug),
     ]);
 
     const relativePath = page ? getRelativePath(page) : null;
@@ -58,8 +59,8 @@ export default {
             ? React.createElement(mdxModule.default, { components: mdxComponents })
             : null,
           toc: mdxModule?.toc ?? [],
-          prev: null,
-          next: null,
+          prev: nav.prev,
+          next: nav.next,
         }
       : null;
 

From e589e498e4d6dbcfb0f8dcdd48e828eae2f8ee94 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:09:42 +0530
Subject: [PATCH 06/27] feat: wrap content in card with prev/next sub-navbar

Default theme now renders the main content inside a rounded, bordered
card with a sub-navbar at the top containing prev/next IconButtons
driven by the server-provided page nav, followed by breadcrumbs.
Breadcrumbs move out of Page.tsx since the Layout owns the chrome.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 37 ++++++++++++-
 .../chronicle/src/themes/default/Layout.tsx   | 53 ++++++++++++++++---
 .../chronicle/src/themes/default/Page.tsx     |  4 +-
 3 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 52b55c8..405360e 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -75,9 +75,44 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
+.cardWrapper {
+  flex: 1;
+  display: flex;
+  padding: 0 var(--rs-space-2) var(--rs-space-2);
+  min-height: 0;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  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:
+    0 1px 2px 0 rgba(0, 0, 0, 0.04),
+    0 2px 4px 0 rgba(0, 0, 0, 0.04);
+  overflow: clip;
+}
+
+.subNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  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);
+  padding: var(--rs-space-9) var(--rs-space-7);
 }
 
 .groupItems {
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index b56688e..b125453 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -1,16 +1,20 @@
 import {
-  CodeBracketSquareIcon,
+  ArrowLeftIcon,
   CubeIcon,
+  ArrowRightIcon,
+  CodeBracketSquareIcon,
   RectangleStackIcon
 } from '@heroicons/react/24/outline';
-import { Flex, Sidebar } from '@raystack/apsara';
+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 { usePageContext } from '@/lib/page-context';
 import type { Node } from 'fumadocs-core/page-tree';
 import type { ThemeLayoutProps } from '@/types';
 import { ContentDirButtons } from './ContentDirButtons';
@@ -36,8 +40,16 @@ export function Layout({
   classNames
 }: ThemeLayoutProps) {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { page } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
   const isApiRoute = pathname.startsWith('/apis');
+  const { prev, next } = page ?? { prev: null, next: null };
+
+  const slug = useMemo(
+    () => (pathname === '/' ? [] : pathname.split('/').filter(Boolean)),
+    [pathname]
+  );
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -104,9 +116,36 @@ export function Layout({
               ))}
             </div>
           </nav>
-          <main className={cx(styles.content, classNames?.content)}>
-            {children}
-          </main>
+          <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>
+                  <Breadcrumbs slug={slug} tree={tree} />
+                </Flex>
+              </nav>
+              <main className={cx(styles.content, classNames?.content)}>
+                {children}
+              </main>
+            </div>
+          </div>
         </Flex>
       </Flex>
       <Footer config={config.footer} />
diff --git a/packages/chronicle/src/themes/default/Page.tsx b/packages/chronicle/src/themes/default/Page.tsx
index 247acf9..194cd67 100644
--- a/packages/chronicle/src/themes/default/Page.tsx
+++ b/packages/chronicle/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} />

From 818853076db5a687e26101f190e5d0f2cbc6eb33 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:11:56 +0530
Subject: [PATCH 07/27] feat: sidebar top navbar and layout polish

- Add sidebar top navbar with placeholder logo, icon-only search, and
  IconButton-based theme switcher using resolvedTheme so system mode
  lands on the correct icon.
- Simplify Search component to IconButton only, drop cmdk kbd trigger.
- Wrap content in a bordered card, remove TOC from Page, align heading
  + paragraph typography with Aurora tokens.
- Secondary bg on sidebar + card wrapper, primary bg on content area.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/ui/client-theme-switcher.tsx   | 25 ++++++++++--
 .../chronicle/src/components/ui/search.tsx    |  1 +
 .../src/themes/default/Layout.module.css      | 38 +++++++++++++++++--
 .../chronicle/src/themes/default/Layout.tsx   |  4 +-
 .../src/themes/default/Page.module.css        | 30 +++++++++++++++
 .../chronicle/src/themes/default/Page.tsx     |  2 -
 6 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/packages/chronicle/src/components/ui/client-theme-switcher.tsx b/packages/chronicle/src/components/ui/client-theme-switcher.tsx
index 34f9051..b504410 100644
--- a/packages/chronicle/src/components/ui/client-theme-switcher.tsx
+++ b/packages/chronicle/src/components/ui/client-theme-switcher.tsx
@@ -1,18 +1,35 @@
 'use client'
 
-import { ThemeSwitcher } from '@raystack/apsara'
-import { useState, useEffect } from 'react'
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { IconButton, useTheme } from '@raystack/apsara'
+import { useEffect, useState } from 'react'
 
 interface ClientThemeSwitcherProps {
   size?: number
 }
 
-export function ClientThemeSwitcher({ size }: ClientThemeSwitcherProps) {
+export function ClientThemeSwitcher({ size = 16 }: ClientThemeSwitcherProps) {
   const [isClient, setIsClient] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
 
   useEffect(() => {
     setIsClient(true)
   }, [])
 
-  return isClient ? <ThemeSwitcher size={size} /> : null
+  if (!isClient) return null
+
+  const isDark = resolvedTheme === 'dark'
+  return (
+    <IconButton
+      size={3}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {isDark ? (
+        <SunIcon width={size} height={size} />
+      ) : (
+        <MoonIcon width={size} height={size} />
+      )}
+    </IconButton>
+  )
 }
diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index e2e0d21..4c44efe 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -57,6 +57,7 @@ export function Search({ className }: SearchProps) {
     <>
       <IconButton
         size={3}
+        aria-label='Search'
         onClick={() => setOpen(true)}
         className={className}
       >
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 405360e..0871872 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -11,6 +11,38 @@
   position: sticky;
   top: 0;
   height: 100vh;
+  background: var(--rs-color-background-base-secondary);
+}
+
+.sidebar[data-position='left'] {
+  border-right: none;
+  padding: 0;
+}
+
+.sidebarNavbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-3);
+  width: 100%;
+  height: 48px;
+  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);
 }
 
 .sidebarHeader {
@@ -38,7 +70,6 @@
   height: 48px;
   padding: 0 var(--rs-space-2);
   background: var(--rs-color-background-base-secondary);
-  border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
 .tabs {
@@ -78,15 +109,15 @@
 .cardWrapper {
   flex: 1;
   display: flex;
-  padding: 0 var(--rs-space-2) var(--rs-space-2);
+  padding: 0 var(--rs-space-5) var(--rs-space-2) var(--rs-space-2);
   min-height: 0;
+  background: var(--rs-color-background-base-secondary);
 }
 
 .card {
   flex: 1;
   display: flex;
   flex-direction: column;
-  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:
@@ -113,6 +144,7 @@
 .content {
   flex: 1;
   padding: var(--rs-space-9) var(--rs-space-7);
+  background: var(--rs-color-background-base-primary);
 }
 
 .groupItems {
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index b125453..f3c79b0 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -3,7 +3,9 @@ import {
   CubeIcon,
   ArrowRightIcon,
   CodeBracketSquareIcon,
-  RectangleStackIcon
+  RectangleStackIcon,
+  DocumentTextIcon,
+  Squares2X2Icon
 } from '@heroicons/react/24/outline';
 import { Flex, IconButton, Sidebar } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css
index 40cb3f0..b019638 100644
--- a/packages/chronicle/src/themes/default/Page.module.css
+++ b/packages/chronicle/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);
diff --git a/packages/chronicle/src/themes/default/Page.tsx b/packages/chronicle/src/themes/default/Page.tsx
index 194cd67..fa168ec 100644
--- a/packages/chronicle/src/themes/default/Page.tsx
+++ b/packages/chronicle/src/themes/default/Page.tsx
@@ -3,7 +3,6 @@
 import { Flex } from '@raystack/apsara';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
-import { Toc } from './Toc';
 
 export function Page({ page }: ThemePageProps) {
   return (
@@ -11,7 +10,6 @@ export function Page({ page }: ThemePageProps) {
       <article className={styles.article} data-article-content>
         <div className={styles.content}>{page.content}</div>
       </article>
-      <Toc items={page.toc} />
     </Flex>
   );
 }

From 02eeed527bdcac273e220b6d58fa7762cf161044 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 17 Apr 2026 16:44:26 +0530
Subject: [PATCH 08/27] feat: floating TOC with hover panel

TOC renders as short horizontal markers floating right-center, each
width scaled from the heading text length (base + per char, clamped).
Hovering the aside fades the markers out and reveals a panel with the
full heading list, active state highlighted. Shadows switch to the
Apsara --rs-shadow-soft token.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      |   4 +-
 .../chronicle/src/themes/default/Page.tsx     |   2 +
 .../src/themes/default/Toc.module.css         | 121 ++++++++++++++----
 packages/chronicle/src/themes/default/Toc.tsx |  66 ++++++++--
 4 files changed, 154 insertions(+), 39 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 0871872..1060203 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -120,9 +120,7 @@
   flex-direction: column;
   border: 0.5px solid var(--rs-color-border-base-primary);
   border-radius: var(--rs-radius-4);
-  box-shadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.04),
-    0 2px 4px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: var(--rs-shadow-soft);
   overflow: clip;
 }
 
diff --git a/packages/chronicle/src/themes/default/Page.tsx b/packages/chronicle/src/themes/default/Page.tsx
index fa168ec..194cd67 100644
--- a/packages/chronicle/src/themes/default/Page.tsx
+++ b/packages/chronicle/src/themes/default/Page.tsx
@@ -3,6 +3,7 @@
 import { Flex } from '@raystack/apsara';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
+import { Toc } from './Toc';
 
 export function Page({ page }: ThemePageProps) {
   return (
@@ -10,6 +11,7 @@ export function Page({ page }: ThemePageProps) {
       <article className={styles.article} data-article-content>
         <div className={styles.content}>{page.content}</div>
       </article>
+      <Toc items={page.toc} />
     </Flex>
   );
 }
diff --git a/packages/chronicle/src/themes/default/Toc.module.css b/packages/chronicle/src/themes/default/Toc.module.css
index 16b8f24..48617ad 100644
--- a/packages/chronicle/src/themes/default/Toc.module.css
+++ b/packages/chronicle/src/themes/default/Toc.module.css
@@ -1,48 +1,117 @@
 .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: calc(var(--rs-space-5) + 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 {
+  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 {
+  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 {
-  color: var(--rs-color-foreground-base-primary);
-  font-weight: 500;
+.panelItemNested {
+  padding-left: var(--rs-space-5);
 }
 
-.nested {
-  padding-left: var(--rs-space-3);
+.panelItemActive {
+  color: var(--rs-color-foreground-base-primary);
 }
diff --git a/packages/chronicle/src/themes/default/Toc.tsx b/packages/chronicle/src/themes/default/Toc.tsx
index 455befc..4a68a80 100644
--- a/packages/chronicle/src/themes/default/Toc.tsx
+++ b/packages/chronicle/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}>
         {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 : ''}`}
+              aria-label={nodeToText(item.title)}
+              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>
   );
 }

From c2e063d398d91320d9d7dbe4d234ce9bedba6f46 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:13:16 +0530
Subject: [PATCH 09/27] fix: address PR review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- page-context: coerce prev/next from API response to null so the
  state always matches the Page type instead of carrying undefined.
- source.getPageNav: guard PageNavLink.title to string-only page names
  so ReactNode names don't stringify to "[object Object]".
- Layout tabs: compute per-entry active state from api.basePath instead
  of the shared isApiRoute boolean, so only the matching API tab
  highlights when multiple APIs are configured.
- Layout: skip breadcrumbs on API routes since the docs tree doesn't
  include API paths.
- Search: add title="Search (⌘K)" so the keyboard shortcut stays
  discoverable after the kbd hint was removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/components/ui/search.tsx  | 1 +
 packages/chronicle/src/lib/page-context.tsx      | 2 +-
 packages/chronicle/src/lib/source.ts             | 2 +-
 packages/chronicle/src/themes/default/Layout.tsx | 9 +++++++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index 4c44efe..189d38d 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -58,6 +58,7 @@ export function Search({ className }: SearchProps) {
       <IconButton
         size={3}
         aria-label='Search'
+        title='Search (⌘K)'
         onClick={() => setOpen(true)}
         className={className}
       >
diff --git a/packages/chronicle/src/lib/page-context.tsx b/packages/chronicle/src/lib/page-context.tsx
index 3657e2f..a5069af 100644
--- a/packages/chronicle/src/lib/page-context.tsx
+++ b/packages/chronicle/src/lib/page-context.tsx
@@ -131,7 +131,7 @@ export function PageProvider({
         }
         return res.json();
       })
-      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string; prev: Page['prev']; next: Page['next'] } | undefined) => {
+      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string; prev?: Page['prev']; next?: Page['next'] } | undefined) => {
         if (cancelled.current || !data) return;
         const { content, toc } = await loadMdx(data.originalPath || data.relativePath);
         if (cancelled.current) return;
diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index 0f74c10..82e3802 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/src/lib/source.ts
@@ -177,7 +177,7 @@ export async function getPageNav(slug: string[]): Promise<PageNav> {
   if (i < 0) return { prev: null, next: null };
   const toLink = (p: (typeof pages)[number]): PageNavLink => ({
     url: p.url,
-    title: String(p.name ?? '')
+    title: typeof p.name === 'string' ? p.name : ''
   });
   return {
     prev: i > 0 ? toLink(pages[i - 1]) : null,
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index f3c79b0..720cb9a 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -46,6 +46,8 @@ export function Layout({
   const { page } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
   const isApiRoute = pathname.startsWith('/apis');
+  const isApiBase = (basePath: string) =>
+    pathname === basePath || pathname.startsWith(`${basePath}/`);
   const { prev, next } = page ?? { prev: null, next: null };
 
   const slug = useMemo(
@@ -110,7 +112,10 @@ export function Layout({
                 <RouterLink
                   key={api.basePath}
                   to={api.basePath}
-                  className={cx(styles.tab, isApiRoute && styles.tabActive)}
+                  className={cx(
+                    styles.tab,
+                    isApiBase(api.basePath) && styles.tabActive
+                  )}
                 >
                   <CodeBracketSquareIcon width={12} height={12} />
                   <span>{api.name} API</span>
@@ -140,7 +145,7 @@ export function Layout({
                       <ArrowRightIcon width={14} height={14} />
                     </IconButton>
                   </Flex>
-                  <Breadcrumbs slug={slug} tree={tree} />
+                  {!isApiRoute && <Breadcrumbs slug={slug} tree={tree} />}
                 </Flex>
               </nav>
               <main className={cx(styles.content, classNames?.content)}>

From ce18ae4e9f6cffdfd99471e3fa6fbfd785405d7d Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 11:59:03 +0530
Subject: [PATCH 10/27] feat: show sidebar on landing, fix sidebar header
 height

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/server/App.tsx                   | 2 +-
 packages/chronicle/src/themes/default/Layout.module.css | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/chronicle/src/server/App.tsx b/packages/chronicle/src/server/App.tsx
index 16db22e..65117c0 100644
--- a/packages/chronicle/src/server/App.tsx
+++ b/packages/chronicle/src/server/App.tsx
@@ -40,7 +40,7 @@ export function App() {
           <ApiPage slug={apiSlug} />
         </ApiLayout>
       ) : (
-        <DocsLayout hideSidebar={isLanding}>
+        <DocsLayout>
           {isLanding ? <LandingPage /> : <DocsPage slug={docsSlug} />}
         </DocsLayout>
       )}
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 1060203..0c89f57 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -50,6 +50,8 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--rs-space-3);
+  height: 48px;
+  box-sizing: border-box;
   padding: var(--rs-space-3) var(--rs-space-4);
 }
 

From c1c50ffb4c31fe7ad2fc0df7883d019042d29cfd Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 12:33:24 +0530
Subject: [PATCH 11/27] fix: address copilot review feedback (phase 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- search shortcut tooltip: platform-neutral "Ctrl/⌘K"
- TOC: mirror :hover with :focus-within for keyboard users
- getPageNav: derive PageNavLink.title from URL when page name is non-string

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/components/ui/search.tsx   |  2 +-
 packages/chronicle/src/lib/source.ts              | 15 ++++++++++++++-
 .../chronicle/src/themes/default/Toc.module.css   |  6 ++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index 189d38d..37f5da3 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -58,7 +58,7 @@ export function Search({ className }: SearchProps) {
       <IconButton
         size={3}
         aria-label='Search'
-        title='Search (⌘K)'
+        title='Search (Ctrl/⌘K)'
         onClick={() => setOpen(true)}
         className={className}
       >
diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index 82e3802..a2e1620 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/src/lib/source.ts
@@ -169,6 +169,16 @@ export function getVersionContextForUrl(url: string): VersionContext {
 
 export type { VersionContext } from './version-source';
 
+function titleFromUrl(url: string): string {
+  if (url === '/') return 'Home';
+  const last = url.split('/').filter(Boolean).pop();
+  if (!last) return 'Home';
+  return last
+    .split('-')
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
 export async function getPageNav(slug: string[]): Promise<PageNav> {
   const tree = await getPageTree();
   const pages = flattenTree(tree.children);
@@ -177,7 +187,10 @@ export async function getPageNav(slug: string[]): Promise<PageNav> {
   if (i < 0) return { prev: null, next: null };
   const toLink = (p: (typeof pages)[number]): PageNavLink => ({
     url: p.url,
-    title: typeof p.name === 'string' ? p.name : ''
+    title:
+      typeof p.name === 'string' && p.name.length > 0
+        ? p.name
+        : titleFromUrl(p.url)
   });
   return {
     prev: i > 0 ? toLink(pages[i - 1]) : null,
diff --git a/packages/chronicle/src/themes/default/Toc.module.css b/packages/chronicle/src/themes/default/Toc.module.css
index 48617ad..348c739 100644
--- a/packages/chronicle/src/themes/default/Toc.module.css
+++ b/packages/chronicle/src/themes/default/Toc.module.css
@@ -15,7 +15,8 @@
   transition: opacity 150ms ease;
 }
 
-.toc:hover .markers {
+.toc:hover .markers,
+.toc:focus-within .markers {
   opacity: 0;
   pointer-events: none;
 }
@@ -60,7 +61,8 @@
     transform 150ms ease;
 }
 
-.toc:hover .panel {
+.toc:hover .panel,
+.toc:focus-within .panel {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(-50%) translateX(0);

From 8b307cd0d33c771940619925d47d3b1bd83a4783 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 22 Apr 2026 12:39:43 +0530
Subject: [PATCH 12/27] refactor: address copilot review feedback (phase 2)

- getPageNav: accept pre-loaded tree to avoid redundant tree rebuild
- entry-server: skip getPageNav when page is null; share tree with nav
- entry-client: nullable frontmatter/relativePath/originalPath in EmbeddedData; narrow at usage

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/source.ts           |  6 +++---
 packages/chronicle/src/server/entry-client.tsx | 16 ++++++++--------
 packages/chronicle/src/server/entry-server.tsx |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index a2e1620..85014dd 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/src/lib/source.ts
@@ -179,9 +179,9 @@ function titleFromUrl(url: string): string {
     .join(' ');
 }
 
-export async function getPageNav(slug: string[]): Promise<PageNav> {
-  const tree = await getPageTree();
-  const pages = flattenTree(tree.children);
+export async function getPageNav(slug: string[], tree?: Root): Promise<PageNav> {
+  const resolvedTree = tree ?? (await getPageTree());
+  const pages = flattenTree(resolvedTree.children);
   const url = slug.length === 0 ? '/' : `/${slug.join('/')}`;
   const i = pages.findIndex(p => p.url === url);
   if (i < 0) return { prev: null, next: null };
diff --git a/packages/chronicle/src/server/entry-client.tsx b/packages/chronicle/src/server/entry-client.tsx
index f862e89..985cce3 100644
--- a/packages/chronicle/src/server/entry-client.tsx
+++ b/packages/chronicle/src/server/entry-client.tsx
@@ -18,9 +18,9 @@ interface EmbeddedData {
   tree: Root;
   slug: string[];
   version: VersionContext;
-  frontmatter: Frontmatter;
-  relativePath: string;
-  originalPath?: string;
+  frontmatter: Frontmatter | null;
+  relativePath: string | null;
+  originalPath: string | null;
   prev: PageNavLink | null;
   next: PageNavLink | null;
 }
@@ -81,12 +81,12 @@ async function hydrate() {
       : [];
 
     const mdxPath = embedded?.originalPath || embedded?.relativePath;
-    const page = mdxPath
+    const page = embedded && mdxPath && embedded.frontmatter
       ? {
-          slug: embedded!.slug,
-          frontmatter: embedded!.frontmatter,
-          prev: embedded!.prev,
-          next: embedded!.next,
+          slug: embedded.slug,
+          frontmatter: embedded.frontmatter,
+          prev: embedded.prev,
+          next: embedded.next,
           ...(await loadMdxModule(mdxPath)),
         }
       : null;
diff --git a/packages/chronicle/src/server/entry-server.tsx b/packages/chronicle/src/server/entry-server.tsx
index 0fa6b2a..6fd5fe1 100644
--- a/packages/chronicle/src/server/entry-server.tsx
+++ b/packages/chronicle/src/server/entry-server.tsx
@@ -41,11 +41,11 @@ export default {
       : [];
     const apiSpecs = apiConfigs.length ? await loadApiSpecs(apiConfigs) : [];
 
-    const [tree, page, nav] = await Promise.all([
+    const [tree, page] = await Promise.all([
       getPageTree(),
       route.type === RouteType.DocsPage ? getPage(route.slug) : Promise.resolve(null),
-      getPageNav(pageSlug),
     ]);
+    const nav = page ? await getPageNav(pageSlug, tree) : { prev: null, next: null };
 
     const relativePath = page ? getRelativePath(page) : null;
     const originalPath = page ? getOriginalPath(page) : null;

From 48e22253415e21e6d517fb4ab8a9271380b4f2c5 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 23 Apr 2026 16:11:27 +0530
Subject: [PATCH 13/27] feat(default theme): nested collapsible sidebar groups

- SidebarNode recurses to depth 1 with data-depth attr on section
- Depth 0: non-collapsible section header
- Depth 1: collapsible sub-group with right-aligned chevron
- Grandchildren folders (depth > 1) ignored
- Hide sidebar scrollbar
- Style navGroup header/trigger/label/chevron via apsara classNames slots

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 45 +++++++++++++++++++
 .../chronicle/src/themes/default/Layout.tsx   | 19 ++++++--
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 0c89f57..fe5b358 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -43,6 +43,11 @@
 
 .sidebarMain {
   padding: var(--rs-space-7) var(--rs-space-5);
+  scrollbar-width: none;
+}
+
+.sidebarMain::-webkit-scrollbar {
+  display: none;
 }
 
 .sidebarHeader {
@@ -149,6 +154,46 @@
 
 .groupItems {
   padding-left: var(--rs-space-4);
+  padding-bottom: var(--rs-space-3);
+}
+
+.navGroup {
+  margin-top: 0;
+}
+
+.navGroup .navGroupHeader {
+  margin: 0;
+}
+
+.navGroup[data-depth='1'] .navGroupHeader {
+  height: auto;
+}
+
+.navGroupTrigger {
+  display: flex;
+  padding: var(--rs-space-3);
+  align-items: center;
+  gap: var(--rs-space-3);
+  align-self: stretch;
+  width: 100%;
+  height: 32px;
+  border-radius: var(--rs-radius-2);
+  box-sizing: border-box;
+}
+
+.navGroupLabel {
+  flex: 1;
+  text-align: left;
+  color: var(--rs-color-foreground-base-primary);
+  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);
+}
+
+.navGroupChevron {
+  margin-left: auto;
 }
 
 .page {
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 720cb9a..231cd07 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -93,7 +93,7 @@ export function Layout({
                 <ClientThemeSwitcher size={16} />
               </Flex>
             </Sidebar.Header>
-            <Sidebar.Main ref={scrollRef}>
+            <Sidebar.Main ref={scrollRef} className={styles.sidebarMain}>
               {tree.children.map((item, i) => (
                 <SidebarNode
                   key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
@@ -162,28 +162,41 @@ export function Layout({
 
 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>

From c11ea8d132cece00b784fb37201cc5d1ce744962 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 23 Apr 2026 16:16:40 +0530
Subject: [PATCH 14/27] docs: rename Tabs.Trigger to Tabs.Tab in components doc

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/content/docs/components.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/docs/components.mdx b/docs/content/docs/components.mdx
index 97f9e31..4f9937d 100644
--- a/docs/content/docs/components.mdx
+++ b/docs/content/docs/components.mdx
@@ -78,8 +78,8 @@ Tabbed content panels using Apsara's `Tabs` component.
 ````mdx
 <Tabs defaultValue="npm">
   <Tabs.List>
-    <Tabs.Trigger value="npm">npm</Tabs.Trigger>
-    <Tabs.Trigger value="bun">bun</Tabs.Trigger>
+    <Tabs.Tab value="npm">npm</Tabs.Tab>
+    <Tabs.Tab value="bun">bun</Tabs.Tab>
   </Tabs.List>
   <Tabs.Content value="npm">
 

From ab63d4deae0d39f8410cb077eefdda6ead951b1f Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 23 Apr 2026 16:41:50 +0530
Subject: [PATCH 15/27] refactor(default theme): align sidebar + card to Figma

- Drop tabBar (ContentDirButtons + API tabs) and subNav card-chrome
- Sidebar header: logo + search + theme only (version switcher moved out)
- Sidebar footer: holds VersionSwitcher, hidden when no versions
- Sidebar bg uses --rs-color-background-base-secondary
- Card: border-left only, no border-radius
- cardWrapper: drop horizontal padding
- TOC: drop extra right offset

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 71 +++++--------------
 .../chronicle/src/themes/default/Layout.tsx   | 35 ++-------
 .../src/themes/default/Toc.module.css         |  2 +-
 3 files changed, 26 insertions(+), 82 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index fe5b358..ff6464c 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -46,6 +46,18 @@
   scrollbar-width: none;
 }
 
+.sidebarFooter {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  height: 48px;
+  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;
 }
@@ -57,13 +69,11 @@
   gap: var(--rs-space-3);
   height: 48px;
   box-sizing: border-box;
-  padding: var(--rs-space-3) var(--rs-space-4);
-}
-
-.headerDivider {
-  width: 1px;
-  height: 13px;
-  background: var(--rs-color-border-base-primary);
+  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 {
@@ -71,52 +81,10 @@
   min-width: 0;
 }
 
-.tabBar {
-  display: flex;
-  align-items: center;
-  height: 48px;
-  padding: 0 var(--rs-space-2);
-  background: var(--rs-color-background-base-secondary);
-}
-
-.tabs {
-  display: flex;
-  align-items: center;
-  gap: var(--rs-space-3);
-}
-
-.tab {
-  display: flex;
-  align-items: center;
-  gap: var(--rs-space-2);
-  padding: var(--rs-space-2) var(--rs-space-3);
-  border: 0.5px solid var(--rs-color-border-base-primary);
-  border-radius: var(--rs-radius-2);
-  font-size: var(--rs-font-size-mini);
-  font-weight: var(--rs-font-weight-medium);
-  letter-spacing: var(--rs-letter-spacing-mini);
-  line-height: var(--rs-line-height-mini);
-  color: var(--rs-color-foreground-base-secondary);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.tab:hover {
-  color: var(--rs-color-foreground-base-primary);
-  background: var(--rs-color-background-base-primary-hover);
-}
-
-.tabActive {
-  background: var(--rs-color-background-neutral-primary);
-  border-color: var(--rs-color-border-base-secondary);
-  color: var(--rs-color-foreground-base-primary);
-}
-
 .cardWrapper {
   flex: 1;
   display: flex;
-  padding: 0 var(--rs-space-5) var(--rs-space-2) var(--rs-space-2);
+  padding: 0 0 var(--rs-space-2) 0;
   min-height: 0;
   background: var(--rs-color-background-base-secondary);
 }
@@ -125,8 +93,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  border: 0.5px solid var(--rs-color-border-base-primary);
-  border-radius: var(--rs-radius-4);
+  border-left: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-soft);
   overflow: clip;
 }
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 231cd07..83033f8 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -2,7 +2,6 @@ import {
   ArrowLeftIcon,
   CubeIcon,
   ArrowRightIcon,
-  CodeBracketSquareIcon,
   RectangleStackIcon,
   DocumentTextIcon,
   Squares2X2Icon
@@ -13,13 +12,11 @@ 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 { usePageContext } from '@/lib/page-context';
 import type { Node } from 'fumadocs-core/page-tree';
 import type { ThemeLayoutProps } from '@/types';
-import { ContentDirButtons } from './ContentDirButtons';
 import styles from './Layout.module.css';
 import { VersionSwitcher } from './VersionSwitcher';
 
@@ -46,8 +43,6 @@ export function Layout({
   const { page } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
   const isApiRoute = pathname.startsWith('/apis');
-  const isApiBase = (basePath: string) =>
-    pathname === basePath || pathname.startsWith(`${basePath}/`);
   const { prev, next } = page ?? { prev: null, next: null };
 
   const slug = useMemo(
@@ -83,11 +78,7 @@ export function Layout({
             className={cx(styles.sidebar, classNames?.sidebar)}
           >
             <Sidebar.Header className={styles.sidebarHeader}>
-              <Flex gap='small' align='center'>
-                <CubeIcon width={24} height={24} />
-                <div className={styles.headerDivider} />
-                <VersionSwitcher />
-              </Flex>
+              <CubeIcon width={28} height={28} />
               <Flex gap='small' align='center'>
                 {config.search?.enabled && <Search />}
                 <ClientThemeSwitcher size={16} />
@@ -102,27 +93,14 @@ export function Layout({
                 />
               ))}
             </Sidebar.Main>
+            {config.versions?.length ? (
+              <Sidebar.Footer className={styles.sidebarFooter}>
+                <VersionSwitcher />
+              </Sidebar.Footer>
+            ) : null}
           </Sidebar>
         )}
         <Flex direction='column' className={styles.mainArea}>
-          <nav className={styles.tabBar}>
-            <div className={styles.tabs}>
-              <ContentDirButtons />
-              {config.api?.map(api => (
-                <RouterLink
-                  key={api.basePath}
-                  to={api.basePath}
-                  className={cx(
-                    styles.tab,
-                    isApiBase(api.basePath) && styles.tabActive
-                  )}
-                >
-                  <CodeBracketSquareIcon width={12} height={12} />
-                  <span>{api.name} API</span>
-                </RouterLink>
-              ))}
-            </div>
-          </nav>
           <div className={styles.cardWrapper}>
             <div className={styles.card}>
               <nav className={styles.subNav}>
@@ -155,7 +133,6 @@ export function Layout({
           </div>
         </Flex>
       </Flex>
-      <Footer config={config.footer} />
     </Flex>
   );
 }
diff --git a/packages/chronicle/src/themes/default/Toc.module.css b/packages/chronicle/src/themes/default/Toc.module.css
index 348c739..421e5c7 100644
--- a/packages/chronicle/src/themes/default/Toc.module.css
+++ b/packages/chronicle/src/themes/default/Toc.module.css
@@ -1,6 +1,6 @@
 .toc {
   position: fixed;
-  right: calc(var(--rs-space-5) + var(--rs-space-3));
+  right: var(--rs-space-3);
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;

From 2b4aa840532a2f541b61ae26e167cc747b0ee4d9 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 23 Apr 2026 16:52:51 +0530
Subject: [PATCH 16/27] feat(default theme): content-dir + API cells at top of
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Render content-dir entries and API entries as Sidebar.Item cells
  at the top of Sidebar.Main, above the page tree
- Hidden when total (content + API) count is ≤ 1
- Drop Apsara's default header margin-bottom

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      |  1 +
 .../chronicle/src/themes/default/Layout.tsx   | 38 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index ff6464c..70d3312 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -69,6 +69,7 @@
   gap: var(--rs-space-3);
   height: 48px;
   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);
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 83033f8..26a2b4e 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -2,6 +2,7 @@ import {
   ArrowLeftIcon,
   CubeIcon,
   ArrowRightIcon,
+  CodeBracketSquareIcon,
   RectangleStackIcon,
   DocumentTextIcon,
   Squares2X2Icon
@@ -14,6 +15,8 @@ import { MethodBadge } from '@/components/api/method-badge';
 import { ClientThemeSwitcher } from '@/components/ui/client-theme-switcher';
 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';
@@ -40,11 +43,18 @@ export function Layout({
 }: ThemeLayoutProps) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
-  const { page } = usePageContext();
+  const { page, version } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
   const isApiRoute = 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]
@@ -85,6 +95,32 @@ export function Layout({
               </Flex>
             </Sidebar.Header>
             <Sidebar.Main ref={scrollRef} className={styles.sidebarMain}>
+              {showTopLinks ? (
+                <>
+                  {contentEntries.map(entry => (
+                    <Sidebar.Item
+                      key={entry.href}
+                      href={entry.href}
+                      active={activeContentDir === entry.contentDir}
+                      leadingIcon={<DocumentTextIcon width={16} height={16} />}
+                      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={<CodeBracketSquareIcon width={16} height={16} />}
+                      render={<RouterLink to={api.basePath} />}
+                    >
+                      {api.name} API
+                    </Sidebar.Item>
+                  ))}
+                </>
+              ) : null}
               {tree.children.map((item, i) => (
                 <SidebarNode
                   key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}

From 4e9e45e41fbae7c0280e933ff8070b38317b91bd Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 10:44:10 +0530
Subject: [PATCH 17/27] refactor(default theme): align sidebar text + spacing
 to Figma

- Top content links: tertiary text by default, primary when active, transparent bg
- Nav group label uses secondary for section headers, primary for sub-groups
- Nav group: zero out default margin-top, apply space-7 only to top-level (data-depth=0)
- Zero out gap on Sidebar.Main and nav-group-items
- Breadcrumbs: use render={<RouterLink>} so SPA navigation works (not-current items)
- Wrap top content/API links in .topLinks div with bottom margin

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/ui/breadcrumbs.tsx         |  6 ++--
 .../src/themes/default/Layout.module.css      | 34 ++++++++++++++++++-
 .../chronicle/src/themes/default/Layout.tsx   |  6 ++--
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/packages/chronicle/src/components/ui/breadcrumbs.tsx b/packages/chronicle/src/components/ui/breadcrumbs.tsx
index 6babcd7..c7724e1 100644
--- a/packages/chronicle/src/components/ui/breadcrumbs.tsx
+++ b/packages/chronicle/src/components/ui/breadcrumbs.tsx
@@ -3,6 +3,7 @@
 import { Breadcrumb } from '@raystack/apsara'
 import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb'
 import type { Root } from 'fumadocs-core/page-tree'
+import { Link as RouterLink } from 'react-router'
 
 interface BreadcrumbsProps {
   slug: string[]
@@ -18,11 +19,12 @@ export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
   return (
     <Breadcrumb size="small">
       {items.flatMap((item, index) => {
+        const isCurrent = index === items.length - 1
         const breadcrumbItem = (
           <Breadcrumb.Item
             key={`item-${index}`}
-            href={item.url}
-            current={index === items.length - 1}
+            current={isCurrent}
+            render={isCurrent ? undefined : <RouterLink to={item.url} />}
           >
             {item.name}
           </Breadcrumb.Item>
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 70d3312..2faf4c1 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -43,9 +43,32 @@
 
 .sidebarMain {
   padding: var(--rs-space-7) var(--rs-space-5);
+  gap: 0;
   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;
@@ -123,12 +146,17 @@
 .groupItems {
   padding-left: var(--rs-space-4);
   padding-bottom: var(--rs-space-3);
+  gap: 0;
 }
 
 .navGroup {
   margin-top: 0;
 }
 
+.navGroup[data-depth='0'] {
+  margin-top: var(--rs-space-7);
+}
+
 .navGroup .navGroupHeader {
   margin: 0;
 }
@@ -137,6 +165,10 @@
   height: auto;
 }
 
+.navGroup[data-depth='1'] .navGroupLabel {
+  color: var(--rs-color-foreground-base-primary);
+}
+
 .navGroupTrigger {
   display: flex;
   padding: var(--rs-space-3);
@@ -152,7 +184,7 @@
 .navGroupLabel {
   flex: 1;
   text-align: left;
-  color: var(--rs-color-foreground-base-primary);
+  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);
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 26a2b4e..e50fb2c 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -96,13 +96,14 @@ export function Layout({
             </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={<DocumentTextIcon width={16} height={16} />}
+                      classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
                       render={<RouterLink to={entry.href} />}
                     >
                       {entry.label}
@@ -114,12 +115,13 @@ export function Layout({
                       href={api.basePath}
                       active={isApiBase(api.basePath)}
                       leadingIcon={<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

From 440a47e2342284668ee9b285f4c0f9448b27d7c6 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 10:56:49 +0530
Subject: [PATCH 18/27] feat(default theme): config-driven sidebar logo

- New SidebarLogo component reads config.logo.light/dark
- Falls back to BookOpenIcon when no logo is configured
- Picks src based on resolvedTheme from Apsara useTheme()

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 TODO.md                                       |  8 ++++++
 .../src/themes/default/Layout.module.css      |  6 +++++
 .../chronicle/src/themes/default/Layout.tsx   |  4 +--
 .../src/themes/default/SidebarLogo.tsx        | 26 +++++++++++++++++++
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 TODO.md
 create mode 100644 packages/chronicle/src/themes/default/SidebarLogo.tsx

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..2afc024
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,8 @@
+# TODO
+
+## Default theme
+
+- [x] Replace sidebar logo placeholder (`CubeIcon`) with configurable logo from `config.logo` (light/dark)
+- [ ] Add optional `icon` field per content dir and API in `chronicle.yaml` for sidebar cell leading icons
+- [ ] Add action slot in top navbar (e.g. "Open in ChatGPT") via `config.navigation.actions`
+- [x] Sidebar nesting supports 2 levels; 3rd+ level items are ignored
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 2faf4c1..fc7596f 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -14,6 +14,12 @@
   background: var(--rs-color-background-base-secondary);
 }
 
+.sidebarLogo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
 .sidebar[data-position='left'] {
   border-right: none;
   padding: 0;
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index e50fb2c..5fe9f70 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -1,6 +1,5 @@
 import {
   ArrowLeftIcon,
-  CubeIcon,
   ArrowRightIcon,
   CodeBracketSquareIcon,
   RectangleStackIcon,
@@ -21,6 +20,7 @@ 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 { SidebarLogo } from './SidebarLogo';
 import { VersionSwitcher } from './VersionSwitcher';
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -88,7 +88,7 @@ export function Layout({
             className={cx(styles.sidebar, classNames?.sidebar)}
           >
             <Sidebar.Header className={styles.sidebarHeader}>
-              <CubeIcon width={28} height={28} />
+              <SidebarLogo config={config} />
               <Flex gap='small' align='center'>
                 {config.search?.enabled && <Search />}
                 <ClientThemeSwitcher size={16} />
diff --git a/packages/chronicle/src/themes/default/SidebarLogo.tsx b/packages/chronicle/src/themes/default/SidebarLogo.tsx
new file mode 100644
index 0000000..b3e9933
--- /dev/null
+++ b/packages/chronicle/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} />;
+}

From 2c3217f0286a4152b5d8bbffdb21b8390472aa56 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 11:05:32 +0530
Subject: [PATCH 19/27] feat(config): optional icon per content dir and API

- Schema accepts icon string on content entries and api entries
- Icon can be a URL or an inline SVG string (uses currentColor)
- renderConfigIcon helper picks <img> for URL or inlines SVG
- Fallback to DocumentTextIcon / CodeBracketSquareIcon when absent

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 TODO.md                                       |  2 +-
 packages/chronicle/src/lib/config.ts          |  5 ++++
 .../src/themes/default/Layout.module.css      | 15 ++++++++++
 .../chronicle/src/themes/default/Layout.tsx   | 30 +++++++++++++++++--
 packages/chronicle/src/types/config.ts        |  2 ++
 5 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index 2afc024..1565bb7 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,6 +3,6 @@
 ## Default theme
 
 - [x] Replace sidebar logo placeholder (`CubeIcon`) with configurable logo from `config.logo` (light/dark)
-- [ ] Add optional `icon` field per content dir and API in `chronicle.yaml` for sidebar cell leading icons
+- [x] Add optional `icon` field per content dir and API in `chronicle.yaml` (accepts URL or inline SVG string)
 - [ ] Add action slot in top navbar (e.g. "Open in ChatGPT") via `config.navigation.actions`
 - [x] Sidebar nesting supports 2 levels; 3rd+ level items are ignored
diff --git a/packages/chronicle/src/lib/config.ts b/packages/chronicle/src/lib/config.ts
index c6dabd3..78bd3b6 100644
--- a/packages/chronicle/src/lib/config.ts
+++ b/packages/chronicle/src/lib/config.ts
@@ -35,6 +35,7 @@ export interface ContentRoot {
   versionLabel: string | null
   contentDir: string
   contentLabel: string
+  contentIcon?: string
   fsPath: string
   urlPrefix: string
 }
@@ -45,6 +46,7 @@ export function getLatestContentRoots(config: ChronicleConfig): ContentRoot[] {
     versionLabel: config.latest?.label ?? null,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentIcon: c.icon,
     fsPath: `content/${c.dir}`,
     urlPrefix: `/${c.dir}`,
   }))
@@ -62,6 +64,7 @@ export function getVersionContentRoots(
     versionLabel: version.label,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentIcon: c.icon,
     fsPath: `versions/${version.dir}/${c.dir}`,
     urlPrefix: `/${version.dir}/${c.dir}`,
   }))
@@ -78,6 +81,7 @@ export interface LandingEntry {
   label: string
   href: string
   contentDir: string
+  icon?: string
 }
 
 export function getLandingEntries(
@@ -93,6 +97,7 @@ export function getLandingEntries(
     label: r.contentLabel,
     href: r.urlPrefix,
     contentDir: r.contentDir,
+    icon: r.contentIcon,
   }))
 }
 
diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index fc7596f..1b30f85 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -20,6 +20,21 @@
   object-fit: contain;
 }
 
+.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;
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 5fe9f70..72387db 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -32,6 +32,24 @@ 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({
@@ -102,7 +120,11 @@ export function Layout({
                       key={entry.href}
                       href={entry.href}
                       active={activeContentDir === entry.contentDir}
-                      leadingIcon={<DocumentTextIcon width={16} height={16} />}
+                      leadingIcon={renderConfigIcon(
+                        entry.icon,
+                        entry.label,
+                        <DocumentTextIcon width={16} height={16} />
+                      )}
                       classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
                       render={<RouterLink to={entry.href} />}
                     >
@@ -114,7 +136,11 @@ export function Layout({
                       key={api.basePath}
                       href={api.basePath}
                       active={isApiBase(api.basePath)}
-                      leadingIcon={<CodeBracketSquareIcon width={16} height={16} />}
+                      leadingIcon={renderConfigIcon(
+                        api.icon,
+                        api.name,
+                        <CodeBracketSquareIcon width={16} height={16} />
+                      )}
                       classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
                       render={<RouterLink to={api.basePath} />}
                     >
diff --git a/packages/chronicle/src/types/config.ts b/packages/chronicle/src/types/config.ts
index 72e3916..84b6ac1 100644
--- a/packages/chronicle/src/types/config.ts
+++ b/packages/chronicle/src/types/config.ts
@@ -46,6 +46,7 @@ const apiSchema = z.object({
   name: z.string(),
   spec: z.string(),
   basePath: z.string(),
+  icon: z.string().optional(),
   server: apiServerSchema,
   auth: apiAuthSchema.optional(),
 })
@@ -92,6 +93,7 @@ const dirNameSchema = z
 const contentEntrySchema = z.object({
   dir: dirNameSchema,
   label: z.string().min(1),
+  icon: z.string().optional(),
 })
 
 // Variants map to Apsara Badge color prop.

From 2f7cd0a39fc0c2bed34ef55314d0bb3285b1d767 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 11:16:14 +0530
Subject: [PATCH 20/27] feat: always enable raw .md and llms.txt endpoints

- Drop llms config section; routes serve unconditionally
- Remove llms.enabled gating from .md slug route and llms.txt routes
- Clean up llms: enabled: true from docs and versioned example yamls

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/chronicle.yaml                                        | 3 ---
 examples/versioned/chronicle.yaml                          | 3 ---
 packages/chronicle/src/server/routes/[...slug].md.ts       | 6 ------
 packages/chronicle/src/server/routes/[version]/llms.txt.ts | 4 ----
 packages/chronicle/src/server/routes/llms.txt.ts           | 6 +-----
 packages/chronicle/src/types/config.ts                     | 6 ------
 6 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/docs/chronicle.yaml b/docs/chronicle.yaml
index 09efcbf..ce5ca4b 100644
--- a/docs/chronicle.yaml
+++ b/docs/chronicle.yaml
@@ -18,9 +18,6 @@ search:
   enabled: true
   placeholder: Search docs...
 
-llms:
-  enabled: true
-
 telemetry:
   enabled: true
 
diff --git a/examples/versioned/chronicle.yaml b/examples/versioned/chronicle.yaml
index 818fae1..0a55cb0 100644
--- a/examples/versioned/chronicle.yaml
+++ b/examples/versioned/chronicle.yaml
@@ -37,6 +37,3 @@ versions:
 search:
   enabled: true
   placeholder: Search...
-
-llms:
-  enabled: true
diff --git a/packages/chronicle/src/server/routes/[...slug].md.ts b/packages/chronicle/src/server/routes/[...slug].md.ts
index 28baa4c..ee1c518 100644
--- a/packages/chronicle/src/server/routes/[...slug].md.ts
+++ b/packages/chronicle/src/server/routes/[...slug].md.ts
@@ -1,7 +1,6 @@
 import fs from 'node:fs/promises';
 import matter from 'gray-matter';
 import { defineHandler, HTTPError } from 'nitro';
-import { loadConfig } from '@/lib/config';
 import { getPage, getOriginalPath } from '@/lib/source';
 import { safePath } from '@/server/utils/safe-path';
 
@@ -9,11 +8,6 @@ export default defineHandler(async event => {
   const pathname = event.path || event.req.url?.split('?')[0] || '';
   if (!pathname.endsWith('.md')) return;
 
-  const config = loadConfig();
-  if (!config.llms?.enabled) {
-    throw new HTTPError({ status: 404, message: 'Not Found' });
-  }
-
   const stripped = pathname.replace(/\.md$/, '');
   const parts = stripped === '/index' || stripped === '/'
     ? []
diff --git a/packages/chronicle/src/server/routes/[version]/llms.txt.ts b/packages/chronicle/src/server/routes/[version]/llms.txt.ts
index b0e8603..80997a1 100644
--- a/packages/chronicle/src/server/routes/[version]/llms.txt.ts
+++ b/packages/chronicle/src/server/routes/[version]/llms.txt.ts
@@ -7,10 +7,6 @@ import { extractFrontmatter, getPagesForVersion } from '@/lib/source';
 export default defineHandler(async event => {
   const config = loadConfig();
 
-  if (!config.llms?.enabled) {
-    throw new HTTPError({ status: 404, message: 'Not Found' });
-  }
-
   const versionDir = getRouterParam(event, 'version');
   const version = config.versions?.find(v => v.dir === versionDir);
   if (!version) {
diff --git a/packages/chronicle/src/server/routes/llms.txt.ts b/packages/chronicle/src/server/routes/llms.txt.ts
index a0939f6..2d150cf 100644
--- a/packages/chronicle/src/server/routes/llms.txt.ts
+++ b/packages/chronicle/src/server/routes/llms.txt.ts
@@ -1,4 +1,4 @@
-import { defineHandler, HTTPError } from 'nitro';
+import { defineHandler } from 'nitro';
 import { loadConfig } from '@/lib/config';
 import { buildLlmsTxt } from '@/lib/llms';
 import { extractFrontmatter, getPagesForVersion } from '@/lib/source';
@@ -7,10 +7,6 @@ import { LATEST_CONTEXT } from '@/lib/version-source';
 export default defineHandler(async event => {
   const config = loadConfig();
 
-  if (!config.llms?.enabled) {
-    throw new HTTPError({ status: 404, message: 'Not Found' });
-  }
-
   const pages = await getPagesForVersion(LATEST_CONTEXT);
   const body = buildLlmsTxt(
     config,
diff --git a/packages/chronicle/src/types/config.ts b/packages/chronicle/src/types/config.ts
index 84b6ac1..c3bce2c 100644
--- a/packages/chronicle/src/types/config.ts
+++ b/packages/chronicle/src/types/config.ts
@@ -56,10 +56,6 @@ const footerSchema = z.object({
   links: z.array(navLinkSchema).optional(),
 })
 
-const llmsSchema = z.object({
-  enabled: z.boolean().optional(),
-})
-
 const googleAnalyticsSchema = z.object({
   measurementId: z.string(),
 })
@@ -152,7 +148,6 @@ export const chronicleConfigSchema = z
     search: searchSchema.optional(),
     footer: footerSchema.optional(),
     api: z.array(apiSchema).optional(),
-    llms: llmsSchema.optional(),
     analytics: analyticsSchema.optional(),
     telemetry: telemetrySchema.optional(),
   })
@@ -236,7 +231,6 @@ export type ApiConfig = z.infer<typeof apiSchema>
 export type ApiServerConfig = z.infer<typeof apiServerSchema>
 export type ApiAuthConfig = z.infer<typeof apiAuthSchema>
 export type FooterConfig = z.infer<typeof footerSchema>
-export type LlmsConfig = z.infer<typeof llmsSchema>
 export type AnalyticsConfig = z.infer<typeof analyticsSchema>
 export type GoogleAnalyticsConfig = z.infer<typeof googleAnalyticsSchema>
 export type TelemetryConfig = z.infer<typeof telemetrySchema>

From d9a26d8d94c74ee6ed6f2e0d700fe2a02944eee9 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 11:20:13 +0530
Subject: [PATCH 21/27] feat: drop Footer component and footer config

- Remove footerSchema + FooterConfig from config schema
- Delete Footer component and CSS
- Remove Footer usage from paper theme Layout
- Clean footer: sections from docs and basic example yamls

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/chronicle.yaml                           |  6 ----
 examples/basic/chronicle.yaml                 |  7 -----
 .../src/components/ui/footer.module.css       | 27 -----------------
 .../chronicle/src/components/ui/footer.tsx    | 30 -------------------
 .../chronicle/src/themes/paper/Layout.tsx     |  2 --
 packages/chronicle/src/types/config.ts        |  7 -----
 6 files changed, 79 deletions(-)
 delete mode 100644 packages/chronicle/src/components/ui/footer.module.css
 delete mode 100644 packages/chronicle/src/components/ui/footer.tsx

diff --git a/docs/chronicle.yaml b/docs/chronicle.yaml
index ce5ca4b..305a659 100644
--- a/docs/chronicle.yaml
+++ b/docs/chronicle.yaml
@@ -22,9 +22,3 @@ telemetry:
   enabled: true
 
 preset: "vercel"
-
-footer:
-  copyright: "© 2026 Raystack. All rights reserved."
-  links:
-    - label: GitHub
-      href: https://github.com/raystack/chronicle
diff --git a/examples/basic/chronicle.yaml b/examples/basic/chronicle.yaml
index 2282d33..b61a74b 100644
--- a/examples/basic/chronicle.yaml
+++ b/examples/basic/chronicle.yaml
@@ -38,10 +38,3 @@ analytics:
   googleAnalytics:
     measurementId: G-XXXXXXXXXX
 
-footer:
-  copyright: "© 2024 Chronicle. All rights reserved."
-  links:
-    - label: GitHub
-      href: https://github.com/raystack/chronicle
-    - label: Documentation
-      href: /
diff --git a/packages/chronicle/src/components/ui/footer.module.css b/packages/chronicle/src/components/ui/footer.module.css
deleted file mode 100644
index b40bc91..0000000
--- a/packages/chronicle/src/components/ui/footer.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.footer {
-  border-top: 1px solid var(--rs-color-border-base-primary);
-  padding: var(--rs-space-5) var(--rs-space-7);
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.copyright {
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.links {
-  flex-wrap: wrap;
-}
-
-.link {
-  color: var(--rs-color-foreground-base-secondary);
-  font-size: 14px;
-}
-
-.link:hover {
-  color: var(--rs-color-foreground-base-primary);
-}
diff --git a/packages/chronicle/src/components/ui/footer.tsx b/packages/chronicle/src/components/ui/footer.tsx
deleted file mode 100644
index 0f3c35f..0000000
--- a/packages/chronicle/src/components/ui/footer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Flex, Link, Text } from "@raystack/apsara";
-import type { FooterConfig } from "@/types";
-import styles from "./footer.module.css";
-
-interface FooterProps {
-  config?: FooterConfig;
-}
-
-export function Footer({ config }: FooterProps) {
-  return (
-    <footer className={styles.footer}>
-      <Flex align="center" justify="between" className={styles.container}>
-        {config?.copyright && (
-          <Text size={2} className={styles.copyright}>
-            {config.copyright}
-          </Text>
-        )}
-        {config?.links && config.links.length > 0 && (
-          <Flex gap="medium" className={styles.links}>
-            {config.links.map((link) => (
-              <Link key={link.href} href={link.href} className={styles.link}>
-                {link.label}
-              </Link>
-            ))}
-          </Flex>
-        )}
-      </Flex>
-    </footer>
-  );
-}
diff --git a/packages/chronicle/src/themes/paper/Layout.tsx b/packages/chronicle/src/themes/paper/Layout.tsx
index 604f2bc..87b87db 100644
--- a/packages/chronicle/src/themes/paper/Layout.tsx
+++ b/packages/chronicle/src/themes/paper/Layout.tsx
@@ -2,7 +2,6 @@
 
 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';
@@ -40,7 +39,6 @@ export function Layout({
           {children}
         </div>
       </Flex>
-      <Footer config={config.footer} />
     </Flex>
   );
 }
diff --git a/packages/chronicle/src/types/config.ts b/packages/chronicle/src/types/config.ts
index c3bce2c..ddbee7f 100644
--- a/packages/chronicle/src/types/config.ts
+++ b/packages/chronicle/src/types/config.ts
@@ -51,11 +51,6 @@ const apiSchema = z.object({
   auth: apiAuthSchema.optional(),
 })
 
-const footerSchema = z.object({
-  copyright: z.string().optional(),
-  links: z.array(navLinkSchema).optional(),
-})
-
 const googleAnalyticsSchema = z.object({
   measurementId: z.string(),
 })
@@ -146,7 +141,6 @@ export const chronicleConfigSchema = z
     theme: themeSchema.optional(),
     navigation: navigationSchema.optional(),
     search: searchSchema.optional(),
-    footer: footerSchema.optional(),
     api: z.array(apiSchema).optional(),
     analytics: analyticsSchema.optional(),
     telemetry: telemetrySchema.optional(),
@@ -230,7 +224,6 @@ export type SearchConfig = z.infer<typeof searchSchema>
 export type ApiConfig = z.infer<typeof apiSchema>
 export type ApiServerConfig = z.infer<typeof apiServerSchema>
 export type ApiAuthConfig = z.infer<typeof apiAuthSchema>
-export type FooterConfig = z.infer<typeof footerSchema>
 export type AnalyticsConfig = z.infer<typeof analyticsSchema>
 export type GoogleAnalyticsConfig = z.infer<typeof googleAnalyticsSchema>
 export type TelemetryConfig = z.infer<typeof telemetrySchema>

From dcc97bb650c9cc6cb19ab1d87a99caf860ae830b Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 11:21:58 +0530
Subject: [PATCH 22/27] feat: add <link rel="alternate"> markdown version on
 docs pages

Head accepts optional markdownHref; DocsPage passes `/${slug}.md` so
crawlers and AI assistants can discover the raw markdown source.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/head.tsx       | 11 ++++++++++-
 packages/chronicle/src/pages/DocsPage.tsx |  2 ++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/chronicle/src/lib/head.tsx b/packages/chronicle/src/lib/head.tsx
index ebdc967..02fdab6 100644
--- a/packages/chronicle/src/lib/head.tsx
+++ b/packages/chronicle/src/lib/head.tsx
@@ -6,9 +6,10 @@ export interface HeadProps {
   description?: string;
   config: ChronicleConfig;
   jsonLd?: Record<string, unknown>;
+  markdownHref?: string;
 }
 
-export function Head({ title, description, config, jsonLd }: HeadProps) {
+export function Head({ title, description, config, jsonLd, markdownHref }: HeadProps) {
   const { pathname } = useLocation();
   const fullTitle = `${title} | ${config.site.title}`;
   const ogParams = new URLSearchParams({ title });
@@ -24,6 +25,14 @@ export function Head({ title, description, config, jsonLd }: HeadProps) {
       <title>{fullTitle}</title>
       {description && <meta name='description' content={description} />}
       {canonical && <link rel='canonical' href={canonical} />}
+      {markdownHref && (
+        <link
+          rel='alternate'
+          type='text/markdown'
+          href={markdownHref}
+          title={`${title} (Markdown)`}
+        />
+      )}
 
       {config.url && (
         <>
diff --git a/packages/chronicle/src/pages/DocsPage.tsx b/packages/chronicle/src/pages/DocsPage.tsx
index 35ce71f..8dfb6ad 100644
--- a/packages/chronicle/src/pages/DocsPage.tsx
+++ b/packages/chronicle/src/pages/DocsPage.tsx
@@ -16,6 +16,7 @@ export function DocsPage({ slug }: DocsPageProps) {
 
   const { Page } = getTheme(config.theme?.name);
   const pageUrl = config.url ? `${config.url}/${slug.join('/')}` : undefined;
+  const markdownHref = `/${slug.join('/')}.md`;
 
   return (
     <>
@@ -23,6 +24,7 @@ export function DocsPage({ slug }: DocsPageProps) {
         title={page.frontmatter.title}
         description={page.frontmatter.description}
         config={config}
+        markdownHref={markdownHref}
         jsonLd={{
           '@context': 'https://schema.org',
           '@type': 'Article',

From abc4b173daf8329ce47ee8b103df45034d05ff42 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 11:29:53 +0530
Subject: [PATCH 23/27] feat(default theme): Open in AI dropdown

Adds OpenInAI menu in the subNav with four actions:
- Copy as MD (fetches the page's .md and writes to clipboard)
- View MD (opens the raw .md in a new tab)
- Open in ChatGPT (chatgpt.com/?q=Read <mdUrl>)
- Open in Claude (claude.ai/new?q=Read <mdUrl>)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 TODO.md                                       |  2 +-
 .../chronicle/src/themes/default/Layout.tsx   |  2 +
 .../chronicle/src/themes/default/OpenInAI.tsx | 71 +++++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 packages/chronicle/src/themes/default/OpenInAI.tsx

diff --git a/TODO.md b/TODO.md
index 1565bb7..25fc973 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,5 +4,5 @@
 
 - [x] Replace sidebar logo placeholder (`CubeIcon`) with configurable logo from `config.logo` (light/dark)
 - [x] Add optional `icon` field per content dir and API in `chronicle.yaml` (accepts URL or inline SVG string)
-- [ ] Add action slot in top navbar (e.g. "Open in ChatGPT") via `config.navigation.actions`
+- [x] "Open in AI" dropdown (Copy/View MD, Open in ChatGPT/Claude) in subNav
 - [x] Sidebar nesting supports 2 levels; 3rd+ level items are ignored
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 72387db..6c8e9af 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -20,6 +20,7 @@ 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';
 
@@ -189,6 +190,7 @@ export function Layout({
                   </Flex>
                   {!isApiRoute && <Breadcrumbs slug={slug} tree={tree} />}
                 </Flex>
+                <OpenInAI />
               </nav>
               <main className={cx(styles.content, classNames?.content)}>
                 {children}
diff --git a/packages/chronicle/src/themes/default/OpenInAI.tsx b/packages/chronicle/src/themes/default/OpenInAI.tsx
new file mode 100644
index 0000000..2c63391
--- /dev/null
+++ b/packages/chronicle/src/themes/default/OpenInAI.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import {
+  ChevronDownIcon,
+  ClipboardDocumentIcon,
+  DocumentTextIcon,
+  SparklesIcon
+} from '@heroicons/react/24/outline';
+import { Button, Menu } from '@raystack/apsara';
+import { useCallback } from 'react';
+
+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}>Open in ChatGPT</Menu.Item>
+        <Menu.Item onClick={onClaude}>Open in Claude</Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}

From cf607177ee45268599bf7427d539db6d75c09c27 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 14:19:46 +0530
Subject: [PATCH 24/27] feat(search): migrate to apsara 1.0.0-rc.4 Command API

- Bump @raystack/apsara to 1.0.0-rc.4
- Drop manual Dialog wrapper; use Command.Dialog + Command.DialogContent
- Command.List -> Command.Content
- Command.Group heading -> <Command.Label>
- Item onSelect -> onClick; Input leadingIcon replaces external icon
- Style dialogContent (width/radius/top) to position at 20% from top

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 bun.lock                                      | 66 +------------------
 packages/chronicle/package.json               |  2 +-
 .../src/components/ui/search.module.css       | 44 +++++--------
 .../chronicle/src/components/ui/search.tsx    | 29 ++++----
 4 files changed, 33 insertions(+), 108 deletions(-)

diff --git a/bun.lock b/bun.lock
index 5a1a84d..729f6aa 100644
--- a/bun.lock
+++ b/bun.lock
@@ -25,7 +25,7 @@
         "@opentelemetry/resources": "^2.6.1",
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
-        "@raystack/apsara": "1.0.0-rc.3",
+        "@raystack/apsara": "1.0.0-rc.4",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
         "chalk": "^5.6.2",
@@ -238,43 +238,9 @@
 
     "@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
 
-    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
-
-    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
-
-    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
-
-    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
-
-    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
-
-    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
-
-    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
-
     "@radix-ui/react-icons": ["@radix-ui/react-icons@1.3.2", "", { "peerDependencies": { "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc" } }, "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g=="],
 
-    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
-
-    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
-
-    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
-
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
-
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
-
-    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
-
-    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
-
-    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
-
-    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
-
-    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.3", "", { "dependencies": { "@base-ui/react": "^1.3.0", "@base-ui/utils": "^0.2.6", "@radix-ui/react-icons": "^1.3.2", "@tanstack/match-sorter-utils": "^8.8.4", "@tanstack/react-table": "^8.9.2", "@tanstack/react-virtual": "^3.13.13", "@tanstack/table-core": "^8.9.2", "class-variance-authority": "^0.7.1", "cmdk": "^1.1.1", "color": "^5.0.0", "dayjs": "^1.11.11", "prism-react-renderer": "^2.4.1", "react-day-picker": "^9.6.7" }, "peerDependencies": { "@types/react": "^19", "react": "^19", "react-dom": "^19" }, "optionalPeers": ["@types/react"] }, "sha512-h7HfNAPDKDxp93D1AMkWYOwfgcaG7A2CXmzAioozZ3TLK2evx3cgOiFk3YfN5rSv8OMTU0d99zgYrv3s/TpWpA=="],
+    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.4", "", { "dependencies": { "@base-ui/react": "^1.3.0", "@base-ui/utils": "^0.2.6", "@radix-ui/react-icons": "^1.3.2", "@tanstack/match-sorter-utils": "^8.8.4", "@tanstack/react-table": "^8.9.2", "@tanstack/react-virtual": "^3.13.13", "@tanstack/table-core": "^8.9.2", "class-variance-authority": "^0.7.1", "color": "^5.0.0", "dayjs": "^1.11.11", "prism-react-renderer": "^2.4.1", "react-day-picker": "^9.6.7" }, "peerDependencies": { "@types/react": "^19", "react": "^19", "react-dom": "^19" }, "optionalPeers": ["@types/react"] }, "sha512-RYt1URkQjfQINYGoN9r4mkmm4Vvul1UKkqiUqN+EoNgl2BNK0fPJq+x3pmW1RDardjsxgeT4AmdZfsuumVn+uw=="],
 
     "@raystack/chronicle": ["@raystack/chronicle@workspace:packages/chronicle"],
 
@@ -452,8 +418,6 @@
 
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
-    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
-
     "astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],
 
     "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
@@ -488,8 +452,6 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
-
     "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
 
     "collapse-white-space": ["collapse-white-space@2.1.0", "", {}, "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw=="],
@@ -624,8 +586,6 @@
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
-    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
-
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
     "dompurify": ["dompurify@3.3.2", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ=="],
@@ -682,8 +642,6 @@
 
     "fumadocs-mdx": ["fumadocs-mdx@14.3.1", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.1.0", "chokidar": "^5.0.0", "esbuild": "^0.28.0", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "picocolors": "^1.1.1", "picomatch": "^4.0.4", "tinyexec": "^1.1.1", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3", "zod": "^4.3.6" }, "peerDependencies": { "@types/mdast": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "^15.0.0 || ^16.0.0", "mdast-util-directive": "*", "next": "^15.3.0 || ^16.0.0", "react": "^19.2.0", "vite": "6.x.x || 7.x.x || 8.x.x" }, "optionalPeers": ["@types/mdast", "@types/mdx", "@types/react", "mdast-util-directive", "next", "react", "vite"], "bin": { "fumadocs-mdx": "dist/bin.js" } }, "sha512-0u2eXvYrZtrJB14y6fDhP0hhxLgmH8JOmRv6IVHALt5MqR9JIJxV5LJYlho8g8CJXRE8w12rVNFZN0rtUVAqGw=="],
 
-    "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
-
     "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
 
     "glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],
@@ -968,14 +926,8 @@
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
-    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
-
-    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
-
     "react-router": ["react-router@7.13.1", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA=="],
 
-    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
-
     "readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
 
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
@@ -1122,10 +1074,6 @@
 
     "unstorage": ["unstorage@2.0.0-alpha.7", "", { "peerDependencies": { "@azure/app-configuration": "^1.11.0", "@azure/cosmos": "^4.9.1", "@azure/data-tables": "^13.3.2", "@azure/identity": "^4.13.0", "@azure/keyvault-secrets": "^4.10.0", "@azure/storage-blob": "^12.31.0", "@capacitor/preferences": "^6 || ^7 || ^8", "@deno/kv": ">=0.13.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.36.2", "@vercel/blob": ">=0.27.3", "@vercel/functions": "^2.2.12 || ^3.0.0", "@vercel/kv": "^1.0.1", "aws4fetch": "^1.0.20", "chokidar": "^4 || ^5", "db0": ">=0.3.4", "idb-keyval": "^6.2.2", "ioredis": "^5.9.3", "lru-cache": "^11.2.6", "mongodb": "^6 || ^7", "ofetch": "*", "uploadthing": "^7.7.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/functions", "@vercel/kv", "aws4fetch", "chokidar", "db0", "idb-keyval", "ioredis", "lru-cache", "mongodb", "ofetch", "uploadthing"] }, "sha512-ELPztchk2zgFJnakyodVY3vJWGW9jy//keJ32IOJVGUMyaPydwcA1FtVvWqT0TNRch9H+cMNEGllfVFfScImog=="],
 
-    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
-
-    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
-
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
     "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
@@ -1162,16 +1110,6 @@
 
     "@antfu/install-pkg/tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
 
-    "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
-
-    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
-
-    "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
-
-    "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
-
-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
-
     "color-convert/color-name": ["color-name@2.1.0", "", {}, "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg=="],
 
     "color-string/color-name": ["color-name@2.1.0", "", {}, "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg=="],
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index d7a86d8..e9dffd5 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -42,7 +42,7 @@
     "@opentelemetry/resources": "^2.6.1",
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
-    "@raystack/apsara": "1.0.0-rc.3",
+    "@raystack/apsara": "1.0.0-rc.4",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",
diff --git a/packages/chronicle/src/components/ui/search.module.css b/packages/chronicle/src/components/ui/search.module.css
index 6a6b4bf..d36228a 100644
--- a/packages/chronicle/src/components/ui/search.module.css
+++ b/packages/chronicle/src/components/ui/search.module.css
@@ -1,50 +1,38 @@
 .dialogContent {
+  border-radius: var(--rs-radius-4);
+  padding: 0px;
+  width: 80%;
   max-width: 600px;
-  padding: 0;
-  min-height: 0;
   position: fixed;
   top: 20%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-radius: var(--rs-radius-4);
 }
 
 .input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 16px;
-  color: var(--rs-color-foreground-base-primary);
+  font-size: var(--rs-font-size-small);
 }
 
 .list {
-  max-height: 300px;
-  overflow: auto;
-  padding: 0;
+  max-height: 400px;
 }
 
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.list :global([cmdk-group-heading]) {
+  color: var(--rs-color-foreground-base-tertiary);
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  padding: var(--rs-space-6) var(--rs-space-5) var(--rs-space-3);
 }
 
 .item {
-  padding: 12px 16px;
+  height: 32px;
+  padding: var(--rs-space-3);
+  gap: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
   cursor: pointer;
-  border-radius: 6px;
 }
 
 .item[data-selected="true"] {
-  background: var(--rs-color-background-base-secondary);
-  color: var(--rs-color-foreground-accent-primary-hover);
+  background: var(--rs-color-background-base-primary-hover);
 }
 
 .itemContent {
diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index 37f5da3..c2a3e7d 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -3,7 +3,7 @@ import {
   HashtagIcon,
   MagnifyingGlassIcon
 } from '@heroicons/react/24/outline';
-import { Command, Dialog, IconButton, Text } from '@raystack/apsara';
+import { Command, IconButton, Text } from '@raystack/apsara';
 import type { SortedResult } from 'fumadocs-core/search';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useCallback, useEffect, useState } from 'react';
@@ -65,20 +65,18 @@ export function Search({ className }: SearchProps) {
         <MagnifyingGlassIcon width={16} height={16} />
       </IconButton>
 
-      <Dialog open={open} onOpenChange={setOpen}>
-        <Dialog.Content className={styles.dialogContent}>
-          <Dialog.Title className={styles.visuallyHidden}>
-            Search documentation
-          </Dialog.Title>
-          <Command loop>
+      <Command.Dialog open={open} onOpenChange={setOpen}>
+        <Command.DialogContent className={styles.dialogContent}>
+          <Command>
             <Command.Input
               placeholder='Search'
+              leadingIcon={<MagnifyingGlassIcon width={16} height={16} />}
               value={search}
-              onValueChange={setSearch}
+              onChange={(e) => setSearch(e.target.value)}
               className={styles.input}
             />
 
-            <Command.List className={styles.list}>
+            <Command.Content className={styles.list}>
               {query.isLoading && <Command.Empty>Loading...</Command.Empty>}
               {!query.isLoading &&
                 search.length > 0 &&
@@ -88,12 +86,13 @@ export function Search({ className }: SearchProps) {
               {!query.isLoading &&
                 search.length === 0 &&
                 results.length > 0 && (
-                  <Command.Group heading='Suggestions'>
+                  <Command.Group>
+                    <Command.Label>Suggestions</Command.Label>
                     {results.slice(0, 8).map((result: SortedResult) => (
                       <Command.Item
                         key={result.id}
                         value={result.id}
-                        onSelect={() => onSelect(result.url)}
+                        onClick={() => onSelect(result.url)}
                         className={styles.item}
                       >
                         <div className={styles.itemContent}>
@@ -113,7 +112,7 @@ export function Search({ className }: SearchProps) {
                   <Command.Item
                     key={result.id}
                     value={result.id}
-                    onSelect={() => onSelect(result.url)}
+                    onClick={() => onSelect(result.url)}
                     className={styles.item}
                   >
                     <div className={styles.itemContent}>
@@ -142,10 +141,10 @@ export function Search({ className }: SearchProps) {
                     </div>
                   </Command.Item>
                 ))}
-            </Command.List>
+            </Command.Content>
           </Command>
-        </Dialog.Content>
-      </Dialog>
+        </Command.DialogContent>
+      </Command.Dialog>
     </>
   );
 }

From 3f534e6624cbb833baad88c5cf6f1457a4464f23 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 14:27:56 +0530
Subject: [PATCH 25/27] refactor(default theme): extract --navbar-height CSS
 variable

Replace four 48px usages (sidebar header, sidebar footer, subNav, etc)
with var(--navbar-height) defined on .layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/themes/default/Layout.module.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 1b30f85..9483a2b 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -1,4 +1,5 @@
 .layout {
+  --navbar-height: 48px;
   min-height: 100vh;
 }
 
@@ -46,7 +47,7 @@
   justify-content: space-between;
   gap: var(--rs-space-3);
   width: 100%;
-  height: 48px;
+  height: var(--navbar-height);
   padding: 0 var(--rs-space-5);
   flex-shrink: 0;
   backdrop-filter: blur(1px);
@@ -94,7 +95,7 @@
   display: flex;
   align-items: center;
   gap: var(--rs-space-3);
-  height: 48px;
+  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);
@@ -111,7 +112,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--rs-space-3);
-  height: 48px;
+  height: var(--navbar-height);
   box-sizing: border-box;
   margin-bottom: 0;
   padding: 0 var(--rs-space-5);
@@ -147,7 +148,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 48px;
+  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);

From 9bcad4bb390df4c1ea81578437bd347351d3d522 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 14:37:57 +0530
Subject: [PATCH 26/27] feat(OpenInAI): add ChatGPT and Claude brand icons to
 menu items

Inline SVG icons using currentColor so they inherit the text color.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../chronicle/src/themes/default/OpenInAI.tsx | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/chronicle/src/themes/default/OpenInAI.tsx b/packages/chronicle/src/themes/default/OpenInAI.tsx
index 2c63391..80d9779 100644
--- a/packages/chronicle/src/themes/default/OpenInAI.tsx
+++ b/packages/chronicle/src/themes/default/OpenInAI.tsx
@@ -9,6 +9,41 @@ import {
 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`;
 }
@@ -63,8 +98,14 @@ export function OpenInAI() {
           <DocumentTextIcon width={14} height={14} />
           View MD
         </Menu.Item>
-        <Menu.Item onClick={onChatGPT}>Open in ChatGPT</Menu.Item>
-        <Menu.Item onClick={onClaude}>Open in Claude</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>
   );

From d248f4cf12157ea0074080c34b3647015bcd68eb Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 24 Apr 2026 15:19:11 +0530
Subject: [PATCH 27/27] fix: address coderabbit review feedback

- Layout: tighten isApiRoute match (exact /apis or /apis/ prefix) so
  breadcrumb suppression doesn't catch unrelated paths
- Sidebar: flex: 0 0 262px + flex-column so it doesn't shrink; Main
  gets overflow-y: auto + min-height: 0 for long trees
- Card: overflow visible so floating TOC + focus rings aren't clipped
- Toc markers: aria-hidden + tabIndex=-1 so the panel nav is the
  single accessible entry
- Toc: hide below 900px viewport via media query

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/themes/default/Layout.module.css | 7 ++++++-
 packages/chronicle/src/themes/default/Layout.tsx        | 2 +-
 packages/chronicle/src/themes/default/Toc.module.css    | 6 ++++++
 packages/chronicle/src/themes/default/Toc.tsx           | 4 ++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 9483a2b..911a157 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -9,6 +9,9 @@
 
 .sidebar {
   width: 262px;
+  flex: 0 0 262px;
+  display: flex;
+  flex-direction: column;
   position: sticky;
   top: 0;
   height: 100vh;
@@ -66,6 +69,8 @@
 .sidebarMain {
   padding: var(--rs-space-7) var(--rs-space-5);
   gap: 0;
+  min-height: 0;
+  overflow-y: auto;
   scrollbar-width: none;
 }
 
@@ -141,7 +146,7 @@
   flex-direction: column;
   border-left: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-soft);
-  overflow: clip;
+  overflow: visible;
 }
 
 .subNav {
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 6c8e9af..00674b7 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -64,7 +64,7 @@ export function Layout({
   const navigate = useNavigate();
   const { page, version } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const isApiRoute = pathname.startsWith('/apis');
+  const isApiRoute = pathname === '/apis' || pathname.startsWith('/apis/');
   const isApiBase = (basePath: string) =>
     pathname === basePath || pathname.startsWith(`${basePath}/`);
   const { prev, next } = page ?? { prev: null, next: null };
diff --git a/packages/chronicle/src/themes/default/Toc.module.css b/packages/chronicle/src/themes/default/Toc.module.css
index 421e5c7..4cd832f 100644
--- a/packages/chronicle/src/themes/default/Toc.module.css
+++ b/packages/chronicle/src/themes/default/Toc.module.css
@@ -117,3 +117,9 @@
 .panelItemActive {
   color: var(--rs-color-foreground-base-primary);
 }
+
+@media (max-width: 900px) {
+  .toc {
+    display: none;
+  }
+}
diff --git a/packages/chronicle/src/themes/default/Toc.tsx b/packages/chronicle/src/themes/default/Toc.tsx
index 4a68a80..76524e4 100644
--- a/packages/chronicle/src/themes/default/Toc.tsx
+++ b/packages/chronicle/src/themes/default/Toc.tsx
@@ -50,7 +50,7 @@ function TocContent({ items }: { items: TOCItemType[] }) {
 
   return (
     <aside className={styles.toc} aria-label='Table of contents'>
-      <div className={styles.markers}>
+      <div className={styles.markers} aria-hidden='true'>
         {items.map(item => {
           const id = item.url.replace('#', '');
           const isActive = activeAnchor === id;
@@ -58,7 +58,7 @@ function TocContent({ items }: { items: TOCItemType[] }) {
             <a
               key={item.url}
               href={item.url}
-              aria-label={nodeToText(item.title)}
+              tabIndex={-1}
               className={cx(styles.marker, isActive && styles.markerActive)}
               style={{ width: `${markerWidth(item.title)}px` }}
             >