doccupine 0.0.60 → 0.0.62

package/README.md

@@ -8,10 +8,12 @@
 
 - **Live preview** - watches your MDX files and regenerates pages on every save
 - **Auto-generated navigation** - sidebar built from frontmatter (`category`, `order`)
+- **Sections** - organize docs into tabbed sections via frontmatter or `sections.json`
 - **Theming** - dark/light mode with customizable theme via `theme.json`
 - **AI chat assistant** - built-in RAG-powered chat (OpenAI, Anthropic, or Google)
 - **MCP server** - exposes `search_docs`, `get_doc`, and `list_docs` tools for AI agents
 - **Custom fonts** - Google Fonts or local fonts via `fonts.json`
+- **Static assets** - `public/` directory is watched and synced to the generated app
 - **Zero config to start** - `npx doccupine` scaffolds everything and starts the server
 
 ## Quick Start
@@ -34,8 +36,8 @@ It then scaffolds the app, installs dependencies, and starts the dev server. Ope
 ```bash
 doccupine watch [options]   # Default. Watch MDX files and start dev server
 doccupine build [options]   # One-time build without starting the server
-doccupine config --show     # Show current configuration
-doccupine config --reset    # Re-prompt for configuration
+doccupine config -show      # Show current configuration
+doccupine config -reset     # Re-prompt for configuration
 ```
 
 ### Options
@@ -59,11 +61,66 @@ categoryOrder: 0 # Sort order for the category group
 order: 1 # Sort order within the category
 icon: "https://..." # Page favicon URL
 image: "https://..." # OpenGraph image URL
+date: "2025-01-01" # Page date metadata
+section: "API Reference" # Section this page belongs to
+sectionOrder: 1 # Sort order for the section in the tab bar
 ---
 ```
 
 Navigation is auto-generated from `category`, `categoryOrder`, and `order`. Pages without a category appear ungrouped.
 
+Use `sectionLabel` on your root `index.mdx` to rename the default "Docs" tab:
+
+```yaml
+---
+title: "Welcome"
+sectionLabel: "Guides"
+---
+```
+
+## Sections
+
+Sections let you split your docs into separate tabbed groups (e.g. "Docs", "API Reference", "SDKs"). There are two ways to configure them:
+
+### Via frontmatter
+
+Add a `section` field to your MDX files. The section slug is derived from the label automatically. Use `sectionOrder` to control tab order (lower numbers appear first):
+
+```yaml
+---
+title: "Authentication"
+section: "API Reference"
+sectionOrder: 1
+---
+```
+
+Pages without a `section` field stay at the root URL under the default "Docs" tab.
+
+### Via `sections.json`
+
+For full control, create a `sections.json` file in your project root:
+
+```json
+[
+  { "label": "Docs", "slug": "" },
+  { "label": "API Reference", "slug": "api" },
+  { "label": "SDKs", "slug": "sdks" }
+]
+```
+
+Each entry has:
+
+- `label` - display name shown in the section bar
+- `slug` - URL prefix for this section (use `""` for the root section)
+- `directory` (optional) - subdirectory containing this section's MDX files, only needed when the directory name differs from the slug
+
+```json
+[
+  { "label": "Guides", "slug": "", "directory": "guides" },
+  { "label": "API Reference", "slug": "api", "directory": "api-reference" }
+]
+```
+
 ## Configuration Files
 
 Place these JSON files in your project root (where you run `doccupine`). They are auto-copied to the generated app and watched for changes.
@@ -76,6 +133,11 @@ Place these JSON files in your project root (where you run `doccupine`). They ar
 | `navigation.json` | Manual navigation structure (overrides auto-generated)                                                    |
 | `links.json`      | Static header/footer links                                                                                |
 | `fonts.json`      | Font configuration (Google Fonts or local)                                                                |
+| `sections.json`   | Section definitions for tabbed doc groups (see [Sections](#sections))                                     |
+
+## Public Directory
+
+Place static assets (images, favicons, `robots.txt`, etc.) in a `public/` directory at your project root. Doccupine copies it to the generated Next.js app on startup and watches for changes, so added, modified, or deleted files are synced automatically.
 
 ## AI Chat Setup
 
@@ -83,13 +145,33 @@ The generated app includes an AI chat assistant. To enable it, create a `.env.lo
 
 ```env
 LLM_PROVIDER=openai # openai | anthropic | google
+
+# API Keys (set the one matching your provider)
 OPENAI_API_KEY=sk-...
-# Or: ANTHROPIC_API_KEY=sk-ant-...
-# Or: GOOGLE_API_KEY=...
+ANTHROPIC_API_KEY=sk-ant-...
+GOOGLE_API_KEY=...
 ```
 
 If `LLM_PROVIDER` is not set, the chat component is hidden automatically.
 
+> **Note:** Anthropic does not provide an embeddings API. When using `anthropic` as your provider, you must also set `OPENAI_API_KEY` for embeddings to work.
+
+### Optional overrides
+
+```env
+LLM_CHAT_MODEL=gpt-4.1-nano                 # Override the default chat model
+LLM_EMBEDDING_MODEL=text-embedding-3-small  # Override the default embedding model
+LLM_TEMPERATURE=0                           # Set temperature (0-1, default: 0)
+```
+
+Default models per provider:
+
+| Provider  | Chat model                   | Embedding model          |
+| --------- | ---------------------------- | ------------------------ |
+| OpenAI    | `gpt-4.1-nano`               | `text-embedding-3-small` |
+| Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback          |
+| Google    | `gemini-2.5-flash-lite`      | `text-embedding-004`     |
+
 ## MCP Server
 
 The generated app exposes an MCP endpoint at `/api/mcp` with three tools:

package/dist/index.js

@@ -259,15 +259,15 @@ class MDXToNextJSGenerator {
             ".gitignore": gitignoreTemplate,
             ".prettierrc": prettierrcTemplate,
             ".prettierignore": prettierignoreTemplate,
-            "config.json": `{}`,
+            "config.json": `{}\n`,
             "eslint.config.mjs": eslintConfigTemplate,
-            "links.json": `[]`,
-            "navigation.json": `[]`,
-            "sections.json": `[]`,
+            "links.json": `[]\n`,
+            "navigation.json": `[]\n`,
+            "sections.json": `[]\n`,
             "next.config.ts": nextConfigTemplate,
             "package.json": packageJsonTemplate,
             "proxy.ts": proxyTemplate,
-            "theme.json": `{}`,
+            "theme.json": `{}\n`,
             "tsconfig.json": tsconfigTemplate,
             "app/layout.tsx": this.generateRootLayout(),
             "app/not-found.tsx": notFoundTemplate,

package/dist/templates/app/api/rag/route.d.ts

@@ -1 +1 @@
-export declare const ragRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { getLLMConfig, createChatModel } from \"@/services/llm\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n} from \"@/services/mcp/server\";\nimport { rateLimit } from \"@/utils/rateLimit\";\nimport { config } from \"@/utils/config\";\n\nconst ragSchema = z.object({\n  question: z.string().min(1).max(2000),\n  refresh: z.boolean().optional(),\n});\n\nconst projectName = config.name || \"Doccupine\";\n\nconst systemContext = `You are AI Assistant, a documentation assistant for ${projectName}, Your name is ${projectName} AI Assistant.\n\n## Core Rules\n1. Answer ONLY from the provided context. Never fabricate information.\n2. If the answer isn't in the context, say so clearly and suggest relevant sections or pages the user might check.\n3. If the question is ambiguous, ask a brief clarifying question before answering.\n\n## Response Style\n- Be concise and direct. Lead with the answer, then provide details if needed.\n- Use code examples from the context when relevant.\n- Match the technical level of the user's question.\n\n## MDX/Code Formatting\nWhen including code blocks in your response:\n- Never nest fenced code blocks (triple backticks) inside other fenced code blocks.\n- If you need to show MDX source that itself contains code blocks, use indented code blocks or escape the inner backticks.\n- All output must be valid MDX that renders correctly.\n\n## Greetings & Small Talk\nIf the user sends a greeting or non-documentation question, respond briefly and ask how you can help with the documentation.`;\n\nexport async function POST(req: Request) {\n  // Rate limit by IP\n  const ip =\n    req.headers.get(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ?? \"unknown\";\n  const { allowed, retryAfter } = rateLimit(ip);\n  if (!allowed) {\n    return NextResponse.json(\n      { error: \"Too many requests\" },\n      { status: 429, headers: { \"Retry-After\": String(retryAfter) } },\n    );\n  }\n\n  try {\n    const body = await req.json();\n    const parsed = ragSchema.safeParse(body);\n    if (!parsed.success) {\n      return NextResponse.json(\n        { error: \"Invalid input\", details: parsed.error.issues },\n        { status: 400 },\n      );\n    }\n    const { question, refresh } = parsed.data;\n\n    let llmConfig;\n    try {\n      llmConfig = getLLMConfig();\n    } catch (error: unknown) {\n      const message =\n        error instanceof Error ? error.message : \"LLM configuration error\";\n      return NextResponse.json({ error: message }, { status: 500 });\n    }\n\n    // Use MCP service to ensure docs are indexed\n    await ensureDocsIndex(Boolean(refresh));\n\n    // Use MCP search_docs tool to find relevant documentation\n    const searchResults = await searchDocs(question, 6);\n\n    // Build context from search results\n    const context = searchResults\n      .map(\n        ({ chunk, score }) =>\n          `File: ${chunk.path}\\nScore: ${score.toFixed(3)}\\n----\\n${chunk.text}`,\n      )\n      .join(\"\\n\\n================\\n\\n\");\n\n    // Create chat model and stream response\n    const llm = createChatModel(llmConfig);\n    const prompt = [\n      {\n        role: \"system\" as const,\n        content: systemContext,\n      },\n      {\n        role: \"user\" as const,\n        content: `Question: ${question}\\n\\nContext:\\n${context}`,\n      },\n    ];\n\n    const stream = await llm.stream(prompt);\n\n    // Build metadata from MCP search results\n    const indexStatus = getIndexStatus();\n    const metadata = {\n      sources: searchResults.map(({ chunk, score }) => ({\n        id: chunk.id,\n        path: chunk.path,\n        uri: chunk.uri,\n        score,\n      })),\n      chunkCount: indexStatus.chunkCount,\n    };\n\n    const encoder = new TextEncoder();\n    const readableStream = new ReadableStream({\n      async start(controller) {\n        try {\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"metadata\", data: metadata })}\\n\\n`,\n            ),\n          );\n\n          for await (const chunk of stream) {\n            const content = chunk?.content || \"\";\n            if (content) {\n              controller.enqueue(\n                encoder.encode(\n                  `data: ${JSON.stringify({ type: \"content\", data: content })}\\n\\n`,\n                ),\n              );\n            }\n          }\n\n          controller.enqueue(\n            encoder.encode(`data: ${JSON.stringify({ type: \"done\" })}\\n\\n`),\n          );\n          controller.close();\n        } catch (error: unknown) {\n          const message =\n            error instanceof Error ? error.message : \"Stream error\";\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"error\", data: message })}\\n\\n`,\n            ),\n          );\n          controller.close();\n        }\n      },\n    });\n\n    return new Response(readableStream, {\n      headers: {\n        \"Content-Type\": \"text/event-stream\",\n        \"Cache-Control\": \"no-cache\",\n        Connection: \"keep-alive\",\n      },\n    });\n  } catch (e: unknown) {\n    const message = e instanceof Error ? e.message : \"Unknown error\";\n    return NextResponse.json({ error: message }, { status: 500 });\n  }\n}\n\nexport async function GET() {\n  const status = getIndexStatus();\n  return NextResponse.json({\n    ready: status.ready,\n    chunks: status.chunkCount,\n  });\n}\n";
+export declare const ragRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { getLLMConfig, createChatModel } from \"@/services/llm\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n} from \"@/services/mcp/server\";\nimport { rateLimit } from \"@/utils/rateLimit\";\nimport { config } from \"@/utils/config\";\n\nconst messageSchema = z.object({\n  role: z.enum([\"user\", \"assistant\"]),\n  content: z.string().max(4000),\n});\n\nconst ragSchema = z.object({\n  question: z.string().min(1).max(2000),\n  history: z.array(messageSchema).max(20).optional(),\n  refresh: z.boolean().optional(),\n});\n\nconst projectName = config.name || \"Doccupine\";\n\nconst systemContext = `You are AI Assistant, a documentation assistant for ${projectName}, Your name is ${projectName} AI Assistant.\n\n## Core Rules\n1. Answer ONLY from the provided context. Never fabricate information.\n2. If the answer isn't in the context, say so clearly and suggest relevant sections or pages the user might check.\n3. If the question is ambiguous, ask a brief clarifying question before answering.\n\n## Response Style\n- Be concise and direct. Lead with the answer, then provide details if needed.\n- Use code examples from the context when relevant.\n- Match the technical level of the user's question.\n\n## MDX/Code Formatting\nWhen including code blocks in your response:\n- Never nest fenced code blocks (triple backticks) inside other fenced code blocks.\n- If you need to show MDX source that itself contains code blocks, use indented code blocks or escape the inner backticks.\n- All output must be valid MDX that renders correctly.\n\n## Greetings & Small Talk\nIf the user sends a greeting or non-documentation question, respond briefly and ask how you can help with the documentation.`;\n\nexport async function POST(req: Request) {\n  // Rate limit by IP\n  const ip =\n    req.headers.get(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ?? \"unknown\";\n  const { allowed, retryAfter } = rateLimit(ip);\n  if (!allowed) {\n    return NextResponse.json(\n      { error: \"Too many requests\" },\n      { status: 429, headers: { \"Retry-After\": String(retryAfter) } },\n    );\n  }\n\n  try {\n    const body = await req.json();\n    const parsed = ragSchema.safeParse(body);\n    if (!parsed.success) {\n      return NextResponse.json(\n        { error: \"Invalid input\", details: parsed.error.issues },\n        { status: 400 },\n      );\n    }\n    const { question, history, refresh } = parsed.data;\n\n    let llmConfig;\n    try {\n      llmConfig = getLLMConfig();\n    } catch (error: unknown) {\n      const message =\n        error instanceof Error ? error.message : \"LLM configuration error\";\n      return NextResponse.json({ error: message }, { status: 500 });\n    }\n\n    // Use MCP service to ensure docs are indexed\n    await ensureDocsIndex(Boolean(refresh));\n\n    // Use MCP search_docs tool to find relevant documentation\n    const searchResults = await searchDocs(question, 6);\n\n    // Build context from search results\n    const context = searchResults\n      .map(\n        ({ chunk, score }) =>\n          `File: ${chunk.path}\\nScore: ${score.toFixed(3)}\\n----\\n${chunk.text}`,\n      )\n      .join(\"\\n\\n================\\n\\n\");\n\n    // Create chat model and stream response\n    const llm = createChatModel(llmConfig);\n    const prompt: { role: \"system\" | \"user\" | \"assistant\"; content: string }[] =\n      [\n        {\n          role: \"system\" as const,\n          content: systemContext,\n        },\n      ];\n\n    // Include conversation history for multi-turn context\n    if (history && history.length > 0) {\n      for (const msg of history) {\n        prompt.push({\n          role: msg.role,\n          content: msg.content,\n        });\n      }\n    }\n\n    prompt.push({\n      role: \"user\" as const,\n      content: `Question: ${question}\\n\\nContext:\\n${context}`,\n    });\n\n    const stream = await llm.stream(prompt);\n\n    // Build metadata from MCP search results\n    const indexStatus = getIndexStatus();\n    const metadata = {\n      sources: searchResults.map(({ chunk, score }) => ({\n        id: chunk.id,\n        path: chunk.path,\n        uri: chunk.uri,\n        score,\n      })),\n      chunkCount: indexStatus.chunkCount,\n    };\n\n    const encoder = new TextEncoder();\n    const readableStream = new ReadableStream({\n      async start(controller) {\n        try {\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"metadata\", data: metadata })}\\n\\n`,\n            ),\n          );\n\n          for await (const chunk of stream) {\n            const content = chunk?.content || \"\";\n            if (content) {\n              controller.enqueue(\n                encoder.encode(\n                  `data: ${JSON.stringify({ type: \"content\", data: content })}\\n\\n`,\n                ),\n              );\n            }\n          }\n\n          controller.enqueue(\n            encoder.encode(`data: ${JSON.stringify({ type: \"done\" })}\\n\\n`),\n          );\n          controller.close();\n        } catch (error: unknown) {\n          const message =\n            error instanceof Error ? error.message : \"Stream error\";\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"error\", data: message })}\\n\\n`,\n            ),\n          );\n          controller.close();\n        }\n      },\n    });\n\n    return new Response(readableStream, {\n      headers: {\n        \"Content-Type\": \"text/event-stream\",\n        \"Cache-Control\": \"no-cache\",\n        Connection: \"keep-alive\",\n      },\n    });\n  } catch (e: unknown) {\n    const message = e instanceof Error ? e.message : \"Unknown error\";\n    return NextResponse.json({ error: message }, { status: 500 });\n  }\n}\n\nexport async function GET() {\n  const status = getIndexStatus();\n  return NextResponse.json({\n    ready: status.ready,\n    chunks: status.chunkCount,\n  });\n}\n";

package/dist/templates/app/api/rag/route.js

@@ -9,8 +9,14 @@ import {
 import { rateLimit } from "@/utils/rateLimit";
 import { config } from "@/utils/config";
 
+const messageSchema = z.object({
+  role: z.enum(["user", "assistant"]),
+  content: z.string().max(4000),
+});
+
 const ragSchema = z.object({
   question: z.string().min(1).max(2000),
+  history: z.array(messageSchema).max(20).optional(),
   refresh: z.boolean().optional(),
 });
 
@@ -58,7 +64,7 @@ export async function POST(req: Request) {
         { status: 400 },
       );
     }
-    const { question, refresh } = parsed.data;
+    const { question, history, refresh } = parsed.data;
 
     let llmConfig;
     try {
@@ -85,16 +91,28 @@ export async function POST(req: Request) {
 
     // Create chat model and stream response
     const llm = createChatModel(llmConfig);
-    const prompt = [
-      {
-        role: "system" as const,
-        content: systemContext,
-      },
-      {
-        role: "user" as const,
-        content: \`Question: \${question}\\n\\nContext:\\n\${context}\`,
-      },
-    ];
+    const prompt: { role: "system" | "user" | "assistant"; content: string }[] =
+      [
+        {
+          role: "system" as const,
+          content: systemContext,
+        },
+      ];
+
+    // Include conversation history for multi-turn context
+    if (history && history.length > 0) {
+      for (const msg of history) {
+        prompt.push({
+          role: msg.role,
+          content: msg.content,
+        });
+      }
+    }
+
+    prompt.push({
+      role: "user" as const,
+      content: \`Question: \${question}\\n\\nContext:\\n\${context}\`,
+    });
 
     const stream = await llm.stream(prompt);
 

package/dist/templates/components/Chat.d.ts

@@ -1 +1 @@
-export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Button } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport { styledTable, stylesLists } from \"@/components/layout/SharedStyled\";\nimport links from \"@/links.json\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100vh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      ${rgba(\"#ff6b6b\", 0.4)},\n      ${rgba(\"#feca57\", 0.4)},\n      ${rgba(\"#48dbfb\", 0.4)},\n      ${rgba(\"#ff9ff3\", 0.4)},\n      ${rgba(\"#54a0ff\", 0.4)},\n      ${rgba(\"#5f27cd\", 0.4)},\n      ${rgba(\"#ff6b6b\", 0.4)}\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 14px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.4)};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.6)};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedForm = styled.form<{\n  theme: Theme;\n  $hide: boolean;\n}>`\n  transition: all 0.3s ease;\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n  width: calc(100% - 115px);\n  z-index: 998;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%) translateY(0);\n    bottom: initial;\n    position: absolute;\n    top: 153px;\n    width: calc(100% - 320px * 2 - 40px);\n    opacity: 1;\n  }\n\n  ${({ $hide }) =>\n    $hide &&\n    css`\n      transform: translateX(-100px);\n\n      ${mq(\"lg\")} {\n        opacity: 0;\n        transform: translateX(-50%) translateY(-20px);\n      }\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedInner = styled.div`\n  margin: auto;\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n\n  ${mq(\"lg\")} {\n    max-width: 640px;\n  }\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledChatCloseButton = styled.button<{ theme: Theme }>`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction Chat() {\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const endRef = useRef<HTMLDivElement | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const { isOpen, setIsOpen } = useContext(ChatContext);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      const el = document.getElementById(\n        \"chat-bottom-input\",\n      ) as HTMLInputElement | null;\n      el?.focus();\n    }\n  }, [answer]);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      // Add a placeholder for the streaming answer\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        // Keep the last (potentially incomplete) part in the buffer\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                // Finalize with MDX serialization\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  return (\n    <>\n      <StyledChatFixedForm onSubmit={ask} $hide={answer?.length > 0}>\n        <StyledChatFixedInner>\n          <RainbowInput\n            value={question}\n            onChange={(e) => setQuestion(e.target.value)}\n            placeholder=\"Ask AI Assistant...\"\n            autoComplete=\"off\"\n            aria-label=\"Ask a question about the documentation\"\n          />\n          <StyledRainbowButton\n            type=\"submit\"\n            disabled={loading}\n            $hasContent={question.trim().length > 0}\n            aria-label={loading ? \"Loading response\" : \"Submit question\"}\n          >\n            {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n          </StyledRainbowButton>\n        </StyledChatFixedInner>\n      </StyledChatFixedForm>\n\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatCloseButton\n            onClick={() => {\n              abortRef.current?.abort();\n              setAnswer([]);\n              setIsOpen(false);\n            }}\n            aria-label=\"Close chat\"\n          >\n            <X />\n          </StyledChatCloseButton>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>\n              {a.answer && a.mdx ? (\n                <MDXRemote {...a.mdx} components={mdxComponents} />\n              ) : (\n                a.text\n              )}\n            </StyledAnswer>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext };\n";
+export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Button } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport { styledTable, stylesLists } from \"@/components/layout/SharedStyled\";\nimport links from \"@/links.json\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100vh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      ${rgba(\"#ff6b6b\", 0.4)},\n      ${rgba(\"#feca57\", 0.4)},\n      ${rgba(\"#48dbfb\", 0.4)},\n      ${rgba(\"#ff9ff3\", 0.4)},\n      ${rgba(\"#54a0ff\", 0.4)},\n      ${rgba(\"#5f27cd\", 0.4)},\n      ${rgba(\"#ff6b6b\", 0.4)}\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 14px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.4)};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.6)};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedForm = styled.form<{\n  theme: Theme;\n  $hide: boolean;\n}>`\n  transition: all 0.3s ease;\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n  width: calc(100% - 115px);\n  z-index: 998;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%) translateY(0);\n    bottom: initial;\n    position: absolute;\n    top: 153px;\n    width: calc(100% - 320px * 2 - 40px);\n    opacity: 1;\n  }\n\n  ${({ $hide }) =>\n    $hide &&\n    css`\n      transform: translateX(-100px);\n\n      ${mq(\"lg\")} {\n        opacity: 0;\n        transform: translateX(-50%) translateY(-20px);\n      }\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedInner = styled.div`\n  margin: auto;\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n\n  ${mq(\"lg\")} {\n    max-width: 640px;\n  }\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledChatCloseButton = styled.button<{ theme: Theme }>`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction Chat() {\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const endRef = useRef<HTMLDivElement | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const { isOpen, setIsOpen } = useContext(ChatContext);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      const el = document.getElementById(\n        \"chat-bottom-input\",\n      ) as HTMLInputElement | null;\n      el?.focus();\n    }\n  }, [answer]);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      // Build conversation history from previous Q&A pairs\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      // Add a placeholder for the streaming answer\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        // Keep the last (potentially incomplete) part in the buffer\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                // Finalize with MDX serialization\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  return (\n    <>\n      <StyledChatFixedForm onSubmit={ask} $hide={answer?.length > 0}>\n        <StyledChatFixedInner>\n          <RainbowInput\n            value={question}\n            onChange={(e) => setQuestion(e.target.value)}\n            placeholder=\"Ask AI Assistant...\"\n            autoComplete=\"off\"\n            aria-label=\"Ask a question about the documentation\"\n          />\n          <StyledRainbowButton\n            type=\"submit\"\n            disabled={loading}\n            $hasContent={question.trim().length > 0}\n            aria-label={loading ? \"Loading response\" : \"Submit question\"}\n          >\n            {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n          </StyledRainbowButton>\n        </StyledChatFixedInner>\n      </StyledChatFixedForm>\n\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatCloseButton\n            onClick={() => {\n              abortRef.current?.abort();\n              setAnswer([]);\n              setIsOpen(false);\n            }}\n            aria-label=\"Close chat\"\n          >\n            <X />\n          </StyledChatCloseButton>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>\n              {a.answer && a.mdx ? (\n                <MDXRemote {...a.mdx} components={mdxComponents} />\n              ) : (\n                a.text\n              )}\n            </StyledAnswer>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext };\n";

package/dist/templates/components/Chat.js

@@ -726,10 +726,18 @@ function Chat() {
     abortRef.current = controller;
 
     try {
+      // Build conversation history from previous Q&A pairs
+      const history = answer
+        .filter((a) => a.text.trim() !== "")
+        .map((a) => ({
+          role: a.answer ? ("assistant" as const) : ("user" as const),
+          content: a.text,
+        }));
+
       const res = await fetch("/api/rag", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ question: currentQuestion }),
+        body: JSON.stringify({ question: currentQuestion, history }),
         signal: controller.signal,
       });
 

package/dist/templates/components/layout/SectionBar.d.ts

@@ -1 +1 @@
-export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -20px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 20px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 20px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";
+export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";

package/dist/templates/components/layout/SectionBar.js

@@ -19,7 +19,7 @@ const StyledSectionBar = styled.nav<{ theme: Theme }>\`
   display: flex;
   order: 3;
   width: calc(100% + 20px);
-  margin: 0 0 0 -20px;
+  margin: 0 0 0 -10px;
   padding: 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
@@ -30,7 +30,7 @@ const StyledSectionBar = styled.nav<{ theme: Theme }>\`
   }
 
   \${mq("lg")} {
-    padding: 0 20px;
+    padding: 0 10px;
     order: unset;
     width: 100%;
     margin: 0;
@@ -44,7 +44,7 @@ const StyledSectionLink = styled(Link)<{
 }>\`
   \${({ theme }) => styledText(theme)};
   text-decoration: none;
-  padding: 16px 20px;
+  padding: 16px 10px;
   white-space: nowrap;
   font-weight: \${({ $isActive }) => ($isActive ? "600" : "500")};
   color: \${({ theme, $isActive }) =>

package/dist/templates/mdx/navigation.mdx.d.ts

@@ -1 +1 @@
-export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n# Navigation\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same folder where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Array format\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"images-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"links\", \"title\": \"Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and Assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"deployment\", \"title\": \"Deployment\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n- **label**: The section header shown in the sidebar.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page's `title` frontmatter.\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";
+export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n# Navigation\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same folder where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Array format\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"buttons\", \"title\": \"Buttons\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"images-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"footer-links\", \"title\": \"Footer Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"deployment\", \"title\": \"Deployment\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n- **label**: The section header shown in the sidebar.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page's `title` frontmatter.\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";

package/dist/templates/mdx/navigation.mdx.js

@@ -56,6 +56,7 @@ The simplest format is an array of categories. When using [sections](/sections),
       { "slug": "accordion", "title": "Accordion" },
       { "slug": "tabs", "title": "Tabs" },
       { "slug": "cards", "title": "Cards" },
+      { "slug": "buttons", "title": "Buttons" },
       { "slug": "callouts", "title": "Callouts" },
       { "slug": "images-and-embeds", "title": "Images and embeds" },
       { "slug": "icons", "title": "Icons" },
@@ -71,9 +72,9 @@ The simplest format is an array of categories. When using [sections](/sections),
       { "slug": "globals", "title": "Globals" },
       { "slug": "navigation", "title": "Navigation" },
       { "slug": "sections", "title": "Sections" },
-      { "slug": "links", "title": "Links" },
+      { "slug": "footer-links", "title": "Footer Links" },
       { "slug": "theme", "title": "Theme" },
-      { "slug": "media-and-assets", "title": "Media and Assets" },
+      { "slug": "media-and-assets", "title": "Media and assets" },
       { "slug": "fonts", "title": "Fonts" },
       { "slug": "ai-assistant", "title": "AI Assistant" },
       { "slug": "model-context-protocol", "title": "Model Context Protocol" },

package/dist/templates/package.js

@@ -18,7 +18,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@modelcontextprotocol/sdk": "^1.26.0",
         "cherry-styled-components": "^0.1.12",
         langchain: "^1.2.25",
-        "lucide-react": "^0.574.0",
+        "lucide-react": "^0.575.0",
         next: "16.1.6",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
@@ -36,7 +36,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@types/node": "^25",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "baseline-browser-mapping": "^2.9.19",
+        "baseline-browser-mapping": "^2.10.0",
         eslint: "^9",
         "eslint-config-next": "16.1.6",
         prettier: "^3.8.1",

package/dist/templates/prettierignore.d.ts

@@ -1 +1 @@
-export declare const prettierignoreTemplate = "node_modules\nconvex/_generated\npackage.json\npackage-lock.json\n";
+export declare const prettierignoreTemplate = "node_modules\nconvex/_generated\npackage.json\npackage-lock.json\npnpm-lock.yaml\npnpm-workspace.yaml\n";

package/dist/templates/prettierignore.js

@@ -2,4 +2,6 @@ export const prettierignoreTemplate = `node_modules
 convex/_generated
 package.json
 package-lock.json
+pnpm-lock.yaml
+pnpm-workspace.yaml
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "description": "Document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
   "main": "dist/index.js",
   "bin": {