@raystack/chronicle 0.5.3 → 0.6.0

package/src/server/vite-config.ts

@@ -18,7 +18,6 @@ function resolveOutputDir(projectRoot: string, preset?: string): string {
 export interface ViteConfigOptions {
   packageRoot: string;
   projectRoot: string;
-  contentDir: string;
   configPath?: string;
   preset?: string;
 }
@@ -41,8 +40,9 @@ async function readChronicleConfig(projectRoot: string, configPath?: string): Pr
 export async function createViteConfig(
   options: ViteConfigOptions
 ): Promise<InlineConfig> {
-  const { packageRoot, projectRoot, contentDir, configPath, preset } = options;
+  const { packageRoot, projectRoot, configPath, preset } = options;
   const rawConfig = await readChronicleConfig(projectRoot, configPath);
+  const contentMirror = path.resolve(packageRoot, '.content');
 
   return {
     root: packageRoot,
@@ -86,8 +86,8 @@ export async function createViteConfig(
     resolve: {
       alias: {
         '@': path.resolve(packageRoot, 'src'),
+        'tslib': 'tslib/tslib.es6.js',
       },
-      conditions: ['module-sync', 'import', 'node'],
       dedupe: [
         'react',
         'react-dom',
@@ -98,11 +98,11 @@ export async function createViteConfig(
     },
     server: {
       fs: {
-        allow: [packageRoot, projectRoot, contentDir]
+        allow: [packageRoot, projectRoot, contentMirror]
       }
     },
     define: {
-      __CHRONICLE_CONTENT_DIR__: JSON.stringify(contentDir),
+      __CHRONICLE_CONTENT_DIR__: JSON.stringify(contentMirror),
       __CHRONICLE_PROJECT_ROOT__: JSON.stringify(projectRoot),
       __CHRONICLE_CONFIG_RAW__: JSON.stringify(rawConfig),
     },

package/src/themes/default/ContentDirButtons.tsx

@@ -0,0 +1,66 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Button, Menu, Flex } from '@raystack/apsara';
+import { Link as RouterLink, useLocation, useNavigate } from 'react-router';
+import { getLandingEntries } from '@/lib/config';
+import { getActiveContentDir, splitContentButtons } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+const MAX_VISIBLE = 3;
+
+export function ContentDirButtons() {
+  const { config, version } = usePageContext();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const entries = getLandingEntries(config, version.dir);
+  if (entries.length <= 1) return null;
+
+  const active = getActiveContentDir(pathname, config);
+  const { visible, overflow } = splitContentButtons(entries, MAX_VISIBLE);
+
+  return (
+    <Flex gap='small' align='center'>
+      {visible.map(entry => (
+        <RouterLink
+          key={entry.href}
+          to={entry.href}
+          style={{ textDecoration: 'none' }}
+        >
+          <Button
+            size='small'
+            variant={active === entry.contentDir ? 'solid' : 'outline'}
+            color='neutral'
+          >
+            {entry.label}
+          </Button>
+        </RouterLink>
+      ))}
+      {overflow.length > 0 ? (
+        <Menu>
+          <Menu.Trigger
+            render={
+              <Button
+                size='small'
+                variant='outline'
+                color='neutral'
+                trailingIcon={<ChevronDownIcon width={14} height={14} />}
+              />
+            }
+          >
+            More
+          </Menu.Trigger>
+          <Menu.Content>
+            {overflow.map(entry => (
+              <Menu.Item
+                key={entry.href}
+                onClick={() => navigate(entry.href)}
+              >
+                {entry.label}
+              </Menu.Item>
+            ))}
+          </Menu.Content>
+        </Menu>
+      ) : null}
+    </Flex>
+  );
+}

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

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

package/src/themes/default/Layout.tsx

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