Migrate MDX components and update documentation styling

mdx-components.tsx

@@ -0,0 +1,9 @@
+import type { MDXComponents } from 'mdx/types'
+import { components as mdxComponents } from '@/components/mdx-components'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+    return { 
+        ...components,
+        ...mdxComponents 
+    }
+}

src/app/docs/page.mdx

@@ -67,12 +67,32 @@ NeuroLab is a layered application, not a single monolithic service. The product
 
 This mono-repo mixes product code, service code, and documentation. The table below explains the primary directories you will interact with.
 
-| Directory | Current Role |
-| :--- | :--- |
-| **`backend/`** | Main Express application and primary client-facing API surface. |
-| **`AI Service/backend/`** | Canonical AI runtime for analysis, reports, and chat workflows. |
-| **`platform/` & `webapp/`** | User-facing clients that consume backend APIs and operational workflows. |
-| **`docs/`** | This documentation application detailing the runtime and integration model. |
+<table>
+  <thead>
+    <tr>
+      <th>Directory</th>
+      <th>Current Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`backend/`</td>
+      <td>Main Express application and primary client-facing API surface.</td>
+    </tr>
+    <tr>
+      <td>`AI Service/backend/`</td>
+      <td>Canonical AI runtime for analysis, reports, and chat workflows.</td>
+    </tr>
+    <tr>
+      <td>`platform/` & `webapp/`</td>
+      <td>User-facing clients that consume backend APIs and operational workflows.</td>
+    </tr>
+    <tr>
+      <td>`docs/`</td>
+      <td>This documentation application detailing the runtime and integration model.</td>
+    </tr>
+  </tbody>
+</table>
 
 ## Next Steps
 

src/app/globals.css

@@ -135,4 +135,72 @@
   .container {
     @apply mx-auto px-6 md:px-10 lg:px-12 max-w-[1400px];
   }
+
+  .docs-content {
+    @apply text-base text-zinc-700 dark:text-zinc-300;
+  }
+
+  .docs-content > h1,
+  .docs-content h1 {
+    @apply text-[2.5rem] leading-[1.08] sm:text-[3rem] font-bold tracking-[-0.04em] text-zinc-950 dark:text-zinc-50;
+  }
+
+  .docs-content > h2,
+  .docs-content h2 {
+    @apply mt-14 text-[1.875rem] leading-[1.15] sm:text-[2.125rem] font-semibold tracking-[-0.03em] text-zinc-950 dark:text-zinc-50;
+  }
+
+  .docs-content > h3,
+  .docs-content h3 {
+    @apply mt-10 text-[1.375rem] leading-[1.25] sm:text-[1.5rem] font-semibold tracking-[-0.025em] text-zinc-950 dark:text-zinc-50;
+  }
+
+  .docs-content > h4,
+  .docs-content h4 {
+    @apply mt-8 text-[1.125rem] leading-[1.35] font-semibold tracking-[-0.02em] text-zinc-950 dark:text-zinc-50;
+  }
+
+  .docs-content > p,
+  .docs-content p,
+  .docs-content li {
+    @apply text-[1rem] leading-8;
+  }
+
+  .docs-content > p + p,
+  .docs-content p + p {
+    @apply mt-5;
+  }
+
+  .docs-content > h1 + p,
+  .docs-content h1 + p {
+    @apply mt-5 text-[1.125rem] leading-8 text-zinc-600 dark:text-zinc-400;
+  }
+
+  .docs-content > h2 + p,
+  .docs-content h2 + p,
+  .docs-content > h3 + p,
+  .docs-content h3 + p,
+  .docs-content > h4 + p,
+  .docs-content h4 + p {
+    @apply mt-3;
+  }
+
+  .docs-content > ul,
+  .docs-content > ol,
+  .docs-content ul,
+  .docs-content ol {
+    @apply my-6 ml-6;
+  }
+
+  .docs-content blockquote {
+    @apply my-8;
+  }
+
+  .docs-content pre {
+    @apply my-8;
+  }
+
+  .docs-content table {
+    @apply my-8;
+  }
 }

src/components/docs-layout.tsx

@@ -17,7 +17,7 @@ export function DocsLayout({ children }: DocsLayoutProps) {
         <div className='container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10 xl:grid-cols-[240px_minmax(0,1fr)_200px]'>
           <DocsSidebar />
           <main className='relative py-8 lg:py-12'>
-            <div className='mx-auto w-full max-w-4xl min-w-0'>
+            <div className='docs-content mx-auto w-full max-w-4xl min-w-0'>
               {children}
               <DocsFooter />
             </div>