feat: show example values in API fields, increase section spacing (#60)

- Add example field to SchemaField from OpenAPI schema examples
- Display example values inline with field description
- Increase divider margin between sections for better readability

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/components/api/api-field-list.module.css

@@ -30,6 +30,20 @@
   color: var(--rs-color-foreground-base-secondary);
 }
 
+.fieldExample {
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.fieldExample code {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  background: var(--rs-color-background-neutral-secondary);
+  padding: 1px var(--rs-space-2);
+  border-radius: 3px;
+}
+
 .statusDescription {
   font-size: var(--rs-font-size-regular);
   line-height: var(--rs-line-height-regular);

packages/chronicle/src/components/api/api-field-list.tsx

@@ -44,10 +44,14 @@ function FieldItem({ field }: { field: SchemaField }) {
       <Flex align="center" gap={3}>
         <Badge variant="neutral" size="micro">{field.name}</Badge>
         <span className={styles.fieldType}>{field.type}</span>
+        {field.required && <Badge variant="danger" size="micro">required</Badge>}
       </Flex>
       {field.description && (
         <span className={styles.fieldDescription}>{field.description}</span>
       )}
+      {field.example !== undefined && (
+        <span className={styles.fieldExample}>Example: <code>{JSON.stringify(field.example)}</code></span>
+      )}
       {hasChildren && <ExpandableChildren field={field} />}
     </Flex>
   )

packages/chronicle/src/components/api/api-overview.module.css

@@ -49,7 +49,7 @@
 
 .divider {
   padding: 0;
-  margin: var(--rs-space-2) 0;
+  margin: var(--rs-space-4) 0;
 }
 
 @media (max-width: 1100px) {

packages/chronicle/src/components/api/api-overview.tsx

@@ -47,7 +47,7 @@ export function ApiOverview({ method, path, operation, auth }: ApiOverviewProps)
 
   return (
     <Flex className={styles.layout}>
-      <Flex direction='column' gap={10} className={styles.left}>
+      <Flex direction='column' gap={9} className={styles.left}>
         <Flex direction='column' gap={7}>
           <Flex direction='column' gap={4}>
             {operation.summary && (

packages/chronicle/src/components/api/playground-dialog.tsx

@@ -486,7 +486,7 @@ function BodyFieldRow({ field, value, onChange }: {
     return (
       <div className={styles.arrayField}>
         <div className={styles.fieldRow}>
-          <span className={styles.fieldLabel}>{field.name}</span>
+          <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
           <IconButton size={2} onClick={() => onChange([...items, ''])} aria-label="Add item">
             <PlusIcon />
           </IconButton>
@@ -537,7 +537,7 @@ function BodyFieldRow({ field, value, onChange }: {
 
   return (
     <div className={styles.fieldRow}>
-      <span className={styles.fieldLabel}>{field.name}</span>
+      <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
       <div className={styles.fieldInput}>
         <InputField
           size="small"

packages/chronicle/src/lib/schema.ts

@@ -19,6 +19,7 @@ export interface SchemaField {
   required: boolean
   description?: string
   default?: unknown
+  example?: unknown
   enum?: unknown[]
   children?: SchemaField[]
 }
@@ -90,6 +91,7 @@ export function flattenSchema(
         required: required.includes(name),
         description: rawProp.description ?? prop.description,
         default: prop.default,
+        example: prop.example,
         enum: prop.enum,
         children: children?.length ? children : undefined,
       }