From 3f79f38398fe5f977f299ced2458f75ed22044da Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 11:50:13 +0530
Subject: [PATCH 1/9] chore: upgrade @raystack/apsara to 1.0.0-rc.5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 bun.lock                        | 4 ++--
 packages/chronicle/package.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/bun.lock b/bun.lock
index e9306aa..f6e3260 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,7 +30,7 @@
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
         "@radix-ui/react-icons": "^1.3.2",
-        "@raystack/apsara": "1.0.0-rc.4",
+        "@raystack/apsara": "1.0.0-rc.5",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
         "chalk": "^5.6.2",
@@ -249,7 +249,7 @@
 
     "@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=="],
 
-    "@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/apsara": ["@raystack/apsara@1.0.0-rc.5", "", { "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-IUWVSTqVMA9OCL5/5xQlvCpu0s/j/JAiR4e6/MbNdQ0dboYRgXKrCIDfsaYVeiwgjy138Bdw68rClZTGO+Kk4g=="],
 
     "@raystack/chronicle": ["@raystack/chronicle@workspace:packages/chronicle"],
 
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index 3e2b14d..5a8c878 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -47,7 +47,7 @@
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "1.0.0-rc.4",
+    "@raystack/apsara": "1.0.0-rc.5",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",

From 37eae9e41870f94a1a81b54d2d74a788ad7003d5 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 11:50:50 +0530
Subject: [PATCH 2/9] chore: upgrade @raystack/apsara to 1.0.0-rc.6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 bun.lock                        | 4 ++--
 packages/chronicle/package.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/bun.lock b/bun.lock
index f6e3260..4f95a8c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,7 +30,7 @@
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
         "@radix-ui/react-icons": "^1.3.2",
-        "@raystack/apsara": "1.0.0-rc.5",
+        "@raystack/apsara": "1.0.0-rc.6",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
         "chalk": "^5.6.2",
@@ -249,7 +249,7 @@
 
     "@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=="],
 
-    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.5", "", { "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-IUWVSTqVMA9OCL5/5xQlvCpu0s/j/JAiR4e6/MbNdQ0dboYRgXKrCIDfsaYVeiwgjy138Bdw68rClZTGO+Kk4g=="],
+    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.6", "", { "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-DWo5DVZbh5SND5XoKFKFlMlVYtHCnT3w+S7irbKAImV3N+aIeDoNeLa7bUAGzQfWpsm/jbwAwhEkuVqbnJEdmA=="],
 
     "@raystack/chronicle": ["@raystack/chronicle@workspace:packages/chronicle"],
 
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index 5a8c878..96f014f 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -47,7 +47,7 @@
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "1.0.0-rc.5",
+    "@raystack/apsara": "1.0.0-rc.6",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",

From 3dead212fbf6d1e248d2b5174837ca60b9d39b6b Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 12:06:44 +0530
Subject: [PATCH 3/9] fix: rename InputField to Input for apsara rc.6
 compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/api/playground-dialog.tsx   | 18 +++++++++---------
 .../chronicle/src/components/common/index.ts   |  2 +-
 .../src/components/common/input-field.tsx      |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/chronicle/src/components/api/playground-dialog.tsx b/packages/chronicle/src/components/api/playground-dialog.tsx
index eb329d8..36858a3 100644
--- a/packages/chronicle/src/components/api/playground-dialog.tsx
+++ b/packages/chronicle/src/components/api/playground-dialog.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react'
 import type { OpenAPIV3 } from 'openapi-types'
-import { Dialog, Button, Badge, IconButton, InputField, CopyButton, Select, Menu } from '@raystack/apsara'
+import { Dialog, Button, Badge, IconButton, Input, CopyButton, Select, Menu } from '@raystack/apsara'
 import { Cross2Icon, ChevronDownIcon, ChevronUpIcon, PlayIcon, PlusIcon } from '@radix-ui/react-icons'
 import { CounterClockwiseClockIcon, CodeIcon } from '@radix-ui/react-icons'
 import { MethodBadge } from '@/components/api/method-badge'
@@ -263,13 +263,13 @@ export function PlaygroundDialog({
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Username</span>
                             <div className={styles.fieldInput}>
-                              <InputField size="small" placeholder="Enter username" value={basicUser} onChange={(e) => setBasicUser(e.target.value)} />
+                              <Input size="small" placeholder="Enter username" value={basicUser} onChange={(e) => setBasicUser(e.target.value)} />
                             </div>
                           </div>
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Password</span>
                             <div className={styles.fieldInput}>
-                              <InputField size="small" type="password" placeholder="Enter password" value={basicPass} onChange={(e) => setBasicPass(e.target.value)} />
+                              <Input size="small" type="password" placeholder="Enter password" value={basicPass} onChange={(e) => setBasicPass(e.target.value)} />
                             </div>
                           </div>
                         </>
@@ -277,7 +277,7 @@ export function PlaygroundDialog({
                         <div className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{currentScheme.headerName}</span>
                           <div className={styles.fieldInput}>
-                            <InputField size="small" placeholder={currentScheme.placeholder} value={authToken} onChange={(e) => setAuthToken(e.target.value)} />
+                            <Input size="small" placeholder={currentScheme.placeholder} value={authToken} onChange={(e) => setAuthToken(e.target.value)} />
                           </div>
                         </div>
                       ) : null}
@@ -285,7 +285,7 @@ export function PlaygroundDialog({
                         <div key={f.name} className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{f.name}</span>
                           <div className={styles.fieldInput}>
-                            <InputField size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onChange={(e) => setHeaderValues({ ...headerValues, [f.name]: e.target.value })} />
+                            <Input size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onChange={(e) => setHeaderValues({ ...headerValues, [f.name]: e.target.value })} />
                           </div>
                         </div>
                       ))}
@@ -307,7 +307,7 @@ export function PlaygroundDialog({
                     <div key={f.name} className={styles.fieldRow}>
                       <span className={styles.fieldLabel}>{f.name}</span>
                       <div className={styles.fieldInput}>
-                        <InputField
+                        <Input
                           size="small"
                           placeholder="Enter value"
                           value={pathValues[f.name] ?? ''}
@@ -332,7 +332,7 @@ export function PlaygroundDialog({
                     <div key={f.name} className={styles.fieldRow}>
                       <span className={styles.fieldLabel}>{f.name}</span>
                       <div className={styles.fieldInput}>
-                        <InputField
+                        <Input
                           size="small"
                           placeholder={f.description ?? 'Enter value'}
                           value={queryValues[f.name] ?? ''}
@@ -494,7 +494,7 @@ function BodyFieldRow({ field, value, onChange }: {
         {items.map((item, i) => (
           <div key={i} className={styles.arrayItemRow}>
             <div className={styles.fieldInput}>
-              <InputField
+              <Input
                 size="small"
                 placeholder={`${field.name}[${i}]`}
                 value={String(item)}
@@ -539,7 +539,7 @@ function BodyFieldRow({ field, value, onChange }: {
     <div className={styles.fieldRow}>
       <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
       <div className={styles.fieldInput}>
-        <InputField
+        <Input
           size="small"
           placeholder={field.description ?? 'Enter value'}
           value={String(value ?? '')}
diff --git a/packages/chronicle/src/components/common/index.ts b/packages/chronicle/src/components/common/index.ts
index f2abfd4..7d359e8 100644
--- a/packages/chronicle/src/components/common/index.ts
+++ b/packages/chronicle/src/components/common/index.ts
@@ -1,7 +1,7 @@
 export { Sidebar } from './sidebar'
 export { Table } from './table'
 export { Dialog } from './dialog'
-export { InputField } from './input-field'
+export { Input } from './input-field'
 export { Tabs } from './tabs'
 export { Breadcrumb } from './breadcrumb'
 export { Button } from './button'
diff --git a/packages/chronicle/src/components/common/input-field.tsx b/packages/chronicle/src/components/common/input-field.tsx
index c0a4230..a68dfb6 100644
--- a/packages/chronicle/src/components/common/input-field.tsx
+++ b/packages/chronicle/src/components/common/input-field.tsx
@@ -1,3 +1,3 @@
 'use client'
 
-export { InputField } from '@raystack/apsara'
+export { Input } from '@raystack/apsara'

From 6808aec4ce8ccf628ba2e62f1ac3eac285fa01b8 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 12:06:54 +0530
Subject: [PATCH 4/9] fix: replace string gap props with numbers for apsara
 rc.6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/ContentDirButtons.tsx         |  2 +-
 packages/chronicle/src/themes/default/Layout.tsx     | 12 ++++++------
 .../chronicle/src/themes/default/VersionSwitcher.tsx |  4 ++--
 .../chronicle/src/themes/paper/VersionSwitcher.tsx   |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/chronicle/src/themes/default/ContentDirButtons.tsx b/packages/chronicle/src/themes/default/ContentDirButtons.tsx
index c948b94..dc68e7f 100644
--- a/packages/chronicle/src/themes/default/ContentDirButtons.tsx
+++ b/packages/chronicle/src/themes/default/ContentDirButtons.tsx
@@ -19,7 +19,7 @@ export function ContentDirButtons() {
   const { visible, overflow } = splitContentButtons(entries, MAX_VISIBLE);
 
   return (
-    <Flex gap='small' align='center'>
+    <Flex gap={3} align='center'>
       {visible.map(entry => (
         <RouterLink
           key={entry.href}
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 3d69e3b..17843b6 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -117,7 +117,7 @@ export function Layout({
           >
             <Sidebar.Header className={styles.sidebarHeader}>
               <SidebarLogo config={config} />
-              <Flex gap='small' align='center'>
+              <Flex gap={3} align='center'>
                 {config.search?.enabled && <Search />}
                 <ClientThemeSwitcher size={16} />
               </Flex>
@@ -186,8 +186,8 @@ export function Layout({
           <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'>
+                <Flex align='center' gap={3} className={styles.subNavLeft}>
+                  <Flex align='center' gap={2}>
                     <IconButton
                       size={2}
                       disabled={!prev}
@@ -207,7 +207,7 @@ export function Layout({
                   </Flex>
                   <Breadcrumbs slug={slug} tree={tree} />
                 </Flex>
-                <Flex align='center' gap='small'>
+                <Flex align='center' gap={3}>
                   {isApiRoute && <TestRequestButton />}
                   {isApiRoute && <ViewDocsButton />}
                   <OpenInAI />
@@ -305,7 +305,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
 
   if (item.type === 'folder') {
     return (
-      <Flex direction='column' gap='small' className={styles.apiGroup}>
+      <Flex direction='column' gap={3} className={styles.apiGroup}>
         <span className={styles.apiGroupLabel}>{item.name?.toString()}</span>
         <Flex direction='column'>
           {item.children.map((child, i) => (
@@ -329,7 +329,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
   return (
     <Flex
       align='center'
-      gap='small'
+      gap={3}
       className={`${styles.apiItem} ${isActive ? styles.apiItemActive : ''}`}
       render={<RouterLink to={href} />}
     >
diff --git a/packages/chronicle/src/themes/default/VersionSwitcher.tsx b/packages/chronicle/src/themes/default/VersionSwitcher.tsx
index bdfc669..88e72c0 100644
--- a/packages/chronicle/src/themes/default/VersionSwitcher.tsx
+++ b/packages/chronicle/src/themes/default/VersionSwitcher.tsx
@@ -28,7 +28,7 @@ export function VersionSwitcher() {
           />
         }
       >
-        <Flex gap='small' align='center'>
+        <Flex gap={3} align='center'>
           {active?.label ?? 'Version'}
           {active?.badge ? (
             <Badge variant={active.badge.variant} size='micro'>
@@ -43,7 +43,7 @@ export function VersionSwitcher() {
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
-            <Flex gap='small' align='center'>
+            <Flex gap={3} align='center'>
               {v.label}
               {v.badge ? (
                 <Badge variant={v.badge.variant} size='micro'>
diff --git a/packages/chronicle/src/themes/paper/VersionSwitcher.tsx b/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
index 35dbdfa..312058f 100644
--- a/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
+++ b/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
@@ -29,7 +29,7 @@ export function VersionSwitcher() {
           />
         }
       >
-        <Flex gap='small' align='center' justify='start'>
+        <Flex gap={3} align='center' justify='start'>
           {active?.label ?? 'Version'}
           {active?.badge ? (
             <Badge variant={active.badge.variant} size='micro'>
@@ -44,7 +44,7 @@ export function VersionSwitcher() {
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
-            <Flex gap='small' align='center'>
+            <Flex gap={3} align='center'>
               {v.label}
               {v.badge ? (
                 <Badge variant={v.badge.variant} size='micro'>

From b4c39193cee6b2c348218c9986b6a69bea42b5c9 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 12:08:29 +0530
Subject: [PATCH 5/9] fix: update Link to use external prop for apsara rc.6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../chronicle/src/components/mdx/link.tsx     | 36 +++----------------
 1 file changed, 5 insertions(+), 31 deletions(-)

diff --git a/packages/chronicle/src/components/mdx/link.tsx b/packages/chronicle/src/components/mdx/link.tsx
index 73cccc4..df75011 100644
--- a/packages/chronicle/src/components/mdx/link.tsx
+++ b/packages/chronicle/src/components/mdx/link.tsx
@@ -1,12 +1,10 @@
 import { Link as ApsaraLink } from '@raystack/apsara';
-import type { ComponentProps, MouseEvent } from 'react';
-import { useNavigate } from 'react-router';
+import type { ComponentProps } from 'react';
+import { Link as RouterLink } from 'react-router';
 
 type LinkProps = ComponentProps<'a'>;
 
-export function Link({ href, children, onClick: onClickProp, ...props }: LinkProps) {
-  const navigate = useNavigate();
-
+export function Link({ href, children, ...props }: LinkProps) {
   if (!href) {
     return <span {...props}>{children}</span>;
   }
@@ -16,12 +14,7 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro
 
   if (isExternal) {
     return (
-      <ApsaraLink
-        href={href}
-        target='_blank'
-        rel='noopener noreferrer'
-        {...props}
-      >
+      <ApsaraLink href={href} external {...props}>
         {children}
       </ApsaraLink>
     );
@@ -35,27 +28,8 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro
     );
   }
 
-  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    if (
-      e.defaultPrevented ||
-      e.button !== 0 ||
-      e.metaKey ||
-      e.ctrlKey ||
-      e.shiftKey ||
-      e.altKey
-    ) {
-      return;
-    }
-
-    onClickProp?.(e);
-    if (e.defaultPrevented) return;
-
-    e.preventDefault();
-    navigate(href);
-  };
-
   return (
-    <ApsaraLink href={href} {...props} onClick={onClick}>
+    <ApsaraLink render={<RouterLink to={href} />} {...props}>
       {children}
     </ApsaraLink>
   );

From e619d6792a99dead9296bddbd119fdca3d1898a3 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 16:03:42 +0530
Subject: [PATCH 6/9] chore: upgrade @raystack/apsara to 1.0.0-rc.7

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 bun.lock                        | 4 ++--
 packages/chronicle/package.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/bun.lock b/bun.lock
index 4f95a8c..244ae2c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,7 +30,7 @@
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
         "@radix-ui/react-icons": "^1.3.2",
-        "@raystack/apsara": "1.0.0-rc.6",
+        "@raystack/apsara": "1.0.0-rc.7",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
         "chalk": "^5.6.2",
@@ -249,7 +249,7 @@
 
     "@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=="],
 
-    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.6", "", { "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-DWo5DVZbh5SND5XoKFKFlMlVYtHCnT3w+S7irbKAImV3N+aIeDoNeLa7bUAGzQfWpsm/jbwAwhEkuVqbnJEdmA=="],
+    "@raystack/apsara": ["@raystack/apsara@1.0.0-rc.7", "", { "dependencies": { "@base-ui/react": "^1.4.1", "@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-Rtg2BaehnAh1ypDmA5PEEkx5wNDnwZHaxoe+gBA7dkZB5YYaSiIdL1MPaGA7D2dahVl8aZ82vklfm0c9+xyRqw=="],
 
     "@raystack/chronicle": ["@raystack/chronicle@workspace:packages/chronicle"],
 
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index 96f014f..88f4e62 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -47,7 +47,7 @@
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "1.0.0-rc.6",
+    "@raystack/apsara": "1.0.0-rc.7",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",

From 047bca5dcd807fca42bc19f17e2504a134dc6aeb Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 14 May 2026 16:06:45 +0530
Subject: [PATCH 7/9] feat: auto-open sidebar folder when active page is inside
 it

Uses NodeType constants from tree-utils.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/themes/default/Layout.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 17843b6..5df8d57 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -22,6 +22,7 @@ import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir } from '@/lib/navigation';
 import { usePageContext } from '@/lib/page-context';
 import type { Node, Root } from 'fumadocs-core/page-tree';
+import { NodeType } from '@/lib/tree-utils';
 import type { ThemeLayoutProps } from '@/types';
 import styles from './Layout.module.css';
 import { OpenInAI } from './OpenInAI';
@@ -224,6 +225,15 @@ export function Layout({
   );
 }
 
+function hasActiveDescendant(node: Node, pathname: string): boolean {
+  if (node.type === NodeType.Page) return pathname === node.url;
+  if (node.type === NodeType.Folder) {
+    if (node.index && pathname === node.index.url) return true;
+    return node.children.some(child => hasActiveDescendant(child, pathname));
+  }
+  return false;
+}
+
 function SidebarNode({
   item,
   pathname,
@@ -240,6 +250,7 @@ function SidebarNode({
   if (item.type === 'folder') {
     if (depth > 1) return null;
     const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
+    const hasActiveChild = hasActiveDescendant(item, pathname);
     return (
       <Sidebar.Group
         className={styles.navGroup}
@@ -247,6 +258,7 @@ function SidebarNode({
         label={item.name?.toString() ?? ''}
         leadingIcon={icon ?? undefined}
         collapsible={depth === 1}
+        defaultOpen={hasActiveChild}
         classNames={{
           items: styles.groupItems,
           header: styles.navGroupHeader,

From b86e0eb90358a3f57666d9c8da76462fb9c30d3f Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 15 May 2026 09:45:17 +0530
Subject: [PATCH 8/9] chore: remove unused apsara re-export wrappers

All were pure 'use client' + re-export. Apsara rc.6+ already marks
its exports as client components. Only callout.tsx kept (has logic).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../chronicle/src/components/common/breadcrumb.tsx     |  3 ---
 packages/chronicle/src/components/common/button.tsx    |  3 ---
 .../chronicle/src/components/common/code-block.tsx     |  3 ---
 packages/chronicle/src/components/common/dialog.tsx    |  3 ---
 packages/chronicle/src/components/common/index.ts      | 10 ----------
 .../chronicle/src/components/common/input-field.tsx    |  3 ---
 packages/chronicle/src/components/common/sidebar.tsx   |  3 ---
 packages/chronicle/src/components/common/switch.tsx    |  3 ---
 packages/chronicle/src/components/common/table.tsx     |  3 ---
 packages/chronicle/src/components/common/tabs.tsx      |  3 ---
 10 files changed, 37 deletions(-)
 delete mode 100644 packages/chronicle/src/components/common/breadcrumb.tsx
 delete mode 100644 packages/chronicle/src/components/common/button.tsx
 delete mode 100644 packages/chronicle/src/components/common/code-block.tsx
 delete mode 100644 packages/chronicle/src/components/common/dialog.tsx
 delete mode 100644 packages/chronicle/src/components/common/index.ts
 delete mode 100644 packages/chronicle/src/components/common/input-field.tsx
 delete mode 100644 packages/chronicle/src/components/common/sidebar.tsx
 delete mode 100644 packages/chronicle/src/components/common/switch.tsx
 delete mode 100644 packages/chronicle/src/components/common/table.tsx
 delete mode 100644 packages/chronicle/src/components/common/tabs.tsx

diff --git a/packages/chronicle/src/components/common/breadcrumb.tsx b/packages/chronicle/src/components/common/breadcrumb.tsx
deleted file mode 100644
index a5cb899..0000000
--- a/packages/chronicle/src/components/common/breadcrumb.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Breadcrumb } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/button.tsx b/packages/chronicle/src/components/common/button.tsx
deleted file mode 100644
index e223853..0000000
--- a/packages/chronicle/src/components/common/button.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Button } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/code-block.tsx b/packages/chronicle/src/components/common/code-block.tsx
deleted file mode 100644
index 977a1cb..0000000
--- a/packages/chronicle/src/components/common/code-block.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { CodeBlock } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/dialog.tsx b/packages/chronicle/src/components/common/dialog.tsx
deleted file mode 100644
index 6652b4e..0000000
--- a/packages/chronicle/src/components/common/dialog.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Dialog } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/index.ts b/packages/chronicle/src/components/common/index.ts
deleted file mode 100644
index 7d359e8..0000000
--- a/packages/chronicle/src/components/common/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { Sidebar } from './sidebar'
-export { Table } from './table'
-export { Dialog } from './dialog'
-export { Input } from './input-field'
-export { Tabs } from './tabs'
-export { Breadcrumb } from './breadcrumb'
-export { Button } from './button'
-export { CodeBlock } from './code-block'
-export { Callout } from './callout'
-export { Switch } from './switch'
diff --git a/packages/chronicle/src/components/common/input-field.tsx b/packages/chronicle/src/components/common/input-field.tsx
deleted file mode 100644
index a68dfb6..0000000
--- a/packages/chronicle/src/components/common/input-field.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Input } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/sidebar.tsx b/packages/chronicle/src/components/common/sidebar.tsx
deleted file mode 100644
index b78768a..0000000
--- a/packages/chronicle/src/components/common/sidebar.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Sidebar } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/switch.tsx b/packages/chronicle/src/components/common/switch.tsx
deleted file mode 100644
index 8907ad9..0000000
--- a/packages/chronicle/src/components/common/switch.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Switch } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/table.tsx b/packages/chronicle/src/components/common/table.tsx
deleted file mode 100644
index bcea7ae..0000000
--- a/packages/chronicle/src/components/common/table.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Table } from '@raystack/apsara'
diff --git a/packages/chronicle/src/components/common/tabs.tsx b/packages/chronicle/src/components/common/tabs.tsx
deleted file mode 100644
index 22f4106..0000000
--- a/packages/chronicle/src/components/common/tabs.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client'
-
-export { Tabs } from '@raystack/apsara'

From 13cb191b285fc79d3bb7c9d11f6423aeda3e5418 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 15 May 2026 12:00:34 +0530
Subject: [PATCH 9/9] refactor: use onValueChange instead of onChange for Input

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/api/playground-dialog.tsx   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/chronicle/src/components/api/playground-dialog.tsx b/packages/chronicle/src/components/api/playground-dialog.tsx
index 36858a3..b2d7ec7 100644
--- a/packages/chronicle/src/components/api/playground-dialog.tsx
+++ b/packages/chronicle/src/components/api/playground-dialog.tsx
@@ -263,13 +263,13 @@ export function PlaygroundDialog({
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Username</span>
                             <div className={styles.fieldInput}>
-                              <Input size="small" placeholder="Enter username" value={basicUser} onChange={(e) => setBasicUser(e.target.value)} />
+                              <Input size="small" placeholder="Enter username" value={basicUser} onValueChange={setBasicUser} />
                             </div>
                           </div>
                           <div className={styles.fieldRow}>
                             <span className={styles.fieldLabel}>Password</span>
                             <div className={styles.fieldInput}>
-                              <Input size="small" type="password" placeholder="Enter password" value={basicPass} onChange={(e) => setBasicPass(e.target.value)} />
+                              <Input size="small" type="password" placeholder="Enter password" value={basicPass} onValueChange={setBasicPass} />
                             </div>
                           </div>
                         </>
@@ -277,7 +277,7 @@ export function PlaygroundDialog({
                         <div className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{currentScheme.headerName}</span>
                           <div className={styles.fieldInput}>
-                            <Input size="small" placeholder={currentScheme.placeholder} value={authToken} onChange={(e) => setAuthToken(e.target.value)} />
+                            <Input size="small" placeholder={currentScheme.placeholder} value={authToken} onValueChange={setAuthToken} />
                           </div>
                         </div>
                       ) : null}
@@ -285,7 +285,7 @@ export function PlaygroundDialog({
                         <div key={f.name} className={styles.fieldRow}>
                           <span className={styles.fieldLabel}>{f.name}</span>
                           <div className={styles.fieldInput}>
-                            <Input size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onChange={(e) => setHeaderValues({ ...headerValues, [f.name]: e.target.value })} />
+                            <Input size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onValueChange={(v) => setHeaderValues({ ...headerValues, [f.name]: v })} />
                           </div>
                         </div>
                       ))}
@@ -311,7 +311,7 @@ export function PlaygroundDialog({
                           size="small"
                           placeholder="Enter value"
                           value={pathValues[f.name] ?? ''}
-                          onChange={(e) => setPathValues({ ...pathValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setPathValues({ ...pathValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -336,7 +336,7 @@ export function PlaygroundDialog({
                           size="small"
                           placeholder={f.description ?? 'Enter value'}
                           value={queryValues[f.name] ?? ''}
-                          onChange={(e) => setQueryValues({ ...queryValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setQueryValues({ ...queryValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -498,9 +498,9 @@ function BodyFieldRow({ field, value, onChange }: {
                 size="small"
                 placeholder={`${field.name}[${i}]`}
                 value={String(item)}
-                onChange={(e) => {
+                onValueChange={(v) => {
                   const updated = [...items]
-                  updated[i] = e.target.value
+                  updated[i] = v
                   onChange(updated)
                 }}
               />
@@ -543,7 +543,7 @@ function BodyFieldRow({ field, value, onChange }: {
           size="small"
           placeholder={field.description ?? 'Enter value'}
           value={String(value ?? '')}
-          onChange={(e) => onChange(e.target.value)}
+          onValueChange={(v) => onChange(v)}
         />
       </div>
     </div>