@raystack/chronicle 0.10.0 → 0.10.1

package/dist/cli/index.js

@@ -822,6 +822,18 @@ var devCommand = new Command2("dev").description("Start development server").opt
   });
   await server.listen();
   server.printUrls();
+  let shuttingDown = false;
+  const shutdown = async () => {
+    if (shuttingDown)
+      return;
+    shuttingDown = true;
+    try {
+      await server.close();
+    } catch {}
+    process.exit(0);
+  };
+  process.once("SIGINT", shutdown);
+  process.once("SIGTERM", shutdown);
 });
 
 // src/cli/commands/init.ts
@@ -953,6 +965,18 @@ var startCommand = new Command5("start").description("Start production server").
     preview: { port, host: options.host }
   });
   server.printUrls();
+  let shuttingDown = false;
+  const shutdown = async () => {
+    if (shuttingDown)
+      return;
+    shuttingDown = true;
+    try {
+      await server.close();
+    } catch {}
+    process.exit(0);
+  };
+  process.once("SIGINT", shutdown);
+  process.once("SIGTERM", shutdown);
 });
 
 // src/cli/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",
@@ -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.7",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",

package/src/cli/commands/dev.ts

@@ -28,4 +28,16 @@ export const devCommand = new Command('dev')
 
     await server.listen();
     server.printUrls();
+
+    let shuttingDown = false;
+    const shutdown = async () => {
+      if (shuttingDown) return;
+      shuttingDown = true;
+      try {
+        await server.close();
+      } catch { /* ignore close errors */ }
+      process.exit(0);
+    };
+    process.once('SIGINT', shutdown);
+    process.once('SIGTERM', shutdown);
   });

package/src/cli/commands/start.ts

@@ -26,4 +26,16 @@ export const startCommand = new Command('start')
     });
 
     server.printUrls();
+
+    let shuttingDown = false;
+    const shutdown = async () => {
+      if (shuttingDown) return;
+      shuttingDown = true;
+      try {
+        await server.close();
+      } catch { /* ignore close errors */ }
+      process.exit(0);
+    };
+    process.once('SIGINT', shutdown);
+    process.once('SIGTERM', shutdown);
   });

package/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} onValueChange={setBasicUser} />
                             </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} 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}>
-                            <InputField 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}>
-                            <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] ?? ''} onValueChange={(v) => setHeaderValues({ ...headerValues, [f.name]: v })} />
                           </div>
                         </div>
                       ))}
@@ -307,11 +307,11 @@ 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] ?? ''}
-                          onChange={(e) => setPathValues({ ...pathValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setPathValues({ ...pathValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -332,11 +332,11 @@ 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] ?? ''}
-                          onChange={(e) => setQueryValues({ ...queryValues, [f.name]: e.target.value })}
+                          onValueChange={(v) => setQueryValues({ ...queryValues, [f.name]: v })}
                         />
                       </div>
                     </div>
@@ -494,13 +494,13 @@ 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)}
-                onChange={(e) => {
+                onValueChange={(v) => {
                   const updated = [...items]
-                  updated[i] = e.target.value
+                  updated[i] = v
                   onChange(updated)
                 }}
               />
@@ -539,11 +539,11 @@ 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 ?? '')}
-          onChange={(e) => onChange(e.target.value)}
+          onValueChange={(v) => onChange(v)}
         />
       </div>
     </div>

package/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>
   );

package/src/server/entry-server.tsx

@@ -115,6 +115,8 @@ export default {
         <head>
           <meta charSet="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <link rel="icon" href="/favicon.ico" />
+          <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
           {assets.css.map((attr: { href: string }) => (
             <link key={attr.href} rel="stylesheet" {...attr} />
           ))}

package/src/server/routes/[...slug].md.ts

@@ -3,11 +3,15 @@ import matter from 'gray-matter';
 import { defineHandler, HTTPError } from 'nitro';
 import { getPage, getOriginalPath } from '@/lib/source';
 import { safePath } from '@/server/utils/safe-path';
+import { handleApiMarkdown } from '@/server/utils/api-markdown';
 
 export default defineHandler(async event => {
   const pathname = event.path || event.req.url?.split('?')[0] || '';
   if (!pathname.endsWith('.md')) return;
-  if (pathname.startsWith('/apis/')) return;
+
+  if (pathname.startsWith('/apis/')) {
+    return handleApiMarkdown(pathname);
+  }
 
   const stripped = pathname.replace(/\.md$/, '');
   const parts = stripped === '/index' || stripped === '/'

package/src/server/{routes/apis/[...slug].md.ts → utils/api-markdown.ts}

@@ -1,15 +1,12 @@
 import type { OpenAPIV3 } from 'openapi-types'
-import { defineHandler, HTTPError } from 'nitro'
+import { HTTPError } from 'nitro'
 import { loadConfig } from '@/lib/config'
 import { loadApiSpecs } from '@/lib/openapi'
 import { findApiOperation } from '@/lib/api-routes'
 import { flattenSchema, generateExampleJson, type SchemaField } from '@/lib/schema'
 import { generateCurl } from '@/lib/snippet-generators'
 
-export default defineHandler(async event => {
-  const pathname = event.path || event.req.url?.split('?')[0] || ''
-  if (!pathname.endsWith('.md')) return
-
+export async function handleApiMarkdown(pathname: string) {
   const stripped = pathname.replace(/\.md$/, '').replace(/^\/apis\//, '')
   const slug = stripped.split('/').filter(Boolean)
   if (slug.length < 2) {
@@ -26,7 +23,7 @@ export default defineHandler(async event => {
 
   const md = generateApiMarkdown(match.method, match.path, match.operation, match.spec.server.url, match.spec.auth)
   return new Response(md, { headers: { 'Content-Type': 'text/markdown; charset=utf-8' } })
-})
+}
 
 function generateApiMarkdown(
   method: string,

package/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}

package/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';
@@ -117,7 +118,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 +187,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 +208,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 />
@@ -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,
@@ -305,7 +317,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 +341,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} />}
     >

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

@@ -125,3 +125,12 @@
 .content details > :not(summary) {
   padding: var(--rs-space-4) var(--rs-space-5);
 }
+
+.loader {
+  flex: 1;
+  margin-bottom: var(--rs-space-3);
+}
+
+.headerLoader {
+  margin-bottom: var(--rs-space-5);
+}

package/src/themes/default/Skeleton.tsx

@@ -6,21 +6,11 @@ export function PageSkeleton() {
   return (
     <Flex className={styles.page}>
       <article className={styles.article}>
-        <Skeleton width="40%" height="32px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="95%" height="16px" />
-          <Skeleton width="80%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="60%" height="16px" />
-        </Skeleton.Provider>
-        <Skeleton width="30%" height="24px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="90%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="70%" height="16px" />
-        </Skeleton.Provider>
+        <Skeleton width="40%" height="var(--rs-line-height-t2)" containerClassName={styles.headerLoader} />
+        <Skeleton width="60%" height="var(--rs-line-height-regular)" containerClassName={styles.headerLoader} />
+        {[...new Array(20)].map((_, i) => (
+          <Skeleton key={i} width="100%" height="var(--rs-line-height-regular)" containerClassName={styles.loader} />
+        ))}
       </article>
     </Flex>
   );

package/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'>

package/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'>

package/src/components/common/breadcrumb.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Breadcrumb } from '@raystack/apsara'

package/src/components/common/button.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Button } from '@raystack/apsara'

package/src/components/common/code-block.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { CodeBlock } from '@raystack/apsara'

package/src/components/common/dialog.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Dialog } from '@raystack/apsara'

package/src/components/common/index.ts

@@ -1,10 +0,0 @@
-export { Sidebar } from './sidebar'
-export { Table } from './table'
-export { Dialog } from './dialog'
-export { InputField } 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'

package/src/components/common/input-field.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { InputField } from '@raystack/apsara'

package/src/components/common/sidebar.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Sidebar } from '@raystack/apsara'

package/src/components/common/switch.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Switch } from '@raystack/apsara'

package/src/components/common/table.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Table } from '@raystack/apsara'

package/src/components/common/tabs.tsx

@@ -1,3 +0,0 @@
-'use client'
-
-export { Tabs } from '@raystack/apsara'