feat: default theme layout with tab bar + page nav types

TODO.md

@@ -0,0 +1,8 @@
+# TODO
+
+## Default theme
+
+- [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)
+- [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

docs/chronicle.yaml

@@ -7,7 +7,7 @@ content:
     label: Docs
 
 theme:
-  name: paper
+  name: default
 
 navigation:
   links:
@@ -18,16 +18,7 @@ search:
   enabled: true
   placeholder: Search docs...
 
-llms:
-  enabled: true
-
 telemetry:
   enabled: true
 
 preset: "vercel"
-
-footer:
-  copyright: "© 2026 Raystack. All rights reserved."
-  links:
-    - label: GitHub
-      href: https://github.com/raystack/chronicle

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">
 

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: /

examples/versioned/chronicle.yaml

@@ -37,6 +37,3 @@ versions:
 search:
   enabled: true
   placeholder: Search...
-
-llms:
-  enabled: true

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"
   }
 }

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",

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>

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

packages/chronicle/src/components/ui/search.module.css

@@ -1,63 +1,38 @@
-.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 {
+  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 {