doccupine 0.0.69 → 0.0.70

package/dist/index.js

@@ -11,6 +11,8 @@ import { layoutTemplate } from "./lib/layout.js";
 import { ConfigManager } from "./lib/config-manager.js";
 import { findAvailablePort, generateSlug, getFullSlug, escapeTemplateContent, } from "./lib/utils.js";
 import { generateMetadataBlock, generateRuntimeOnlyMetadataBlock, } from "./lib/metadata.js";
+import { nextConfigTemplate } from "./templates/next.config.js";
+import { proxyTemplate } from "./templates/proxy.js";
 export { generateSlug, getFullSlug, escapeTemplateContent, } from "./lib/utils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -24,6 +26,7 @@ class MDXToNextJSGenerator {
     configWatcher = null;
     fontWatcher = null;
     publicWatcher = null;
+    analyticsWatcher = null;
     configFiles = [
         "theme.json",
         "navigation.json",
@@ -32,6 +35,8 @@ class MDXToNextJSGenerator {
         "sections.json",
     ];
     fontConfigFile = "fonts.json";
+    analyticsConfigFile = "analytics.json";
+    analyticsConfig = null;
     sectionsConfig = null;
     /** Guards against recursive reprocessing when maybeUpdateSections() triggers processAllMDXFiles() */
     isReprocessing = false;
@@ -45,13 +50,18 @@ class MDXToNextJSGenerator {
         await fs.ensureDir(this.watchDir);
         await fs.ensureDir(this.outputDir);
         this.sectionsConfig = await this.resolveSections();
+        this.analyticsConfig = await this.loadAnalyticsConfig();
         if (this.sectionsConfig) {
             console.log(chalk.blue(`📑 Found ${this.sectionsConfig.length} section(s): ${this.sectionsConfig.map((s) => s.label).join(", ")}`));
         }
+        if (this.analyticsConfig) {
+            console.log(chalk.blue(`📊 Analytics enabled: ${this.analyticsConfig.provider}`));
+        }
         await this.createNextJSStructure();
         await this.createStartingDocs();
         await this.copyCustomConfigFiles();
         await this.copyFontConfig();
+        await this.copyAnalyticsConfig();
         await this.copyPublicFiles();
         await this.processAllMDXFiles();
         await this.generateSectionIndexPages();
@@ -63,6 +73,9 @@ class MDXToNextJSGenerator {
     async createNextJSStructure() {
         const structure = {
             ...appStructure,
+            "next.config.ts": nextConfigTemplate(this.analyticsConfig),
+            "proxy.ts": proxyTemplate(this.analyticsConfig),
+            "analytics.json": `{}\n`,
             "config.json": `{}\n`,
             "links.json": `[]\n`,
             "navigation.json": `[]\n`,
@@ -127,6 +140,34 @@ class MDXToNextJSGenerator {
         }
         return null;
     }
+    async loadAnalyticsConfig() {
+        const analyticsPath = path.join(this.rootDir, this.analyticsConfigFile);
+        try {
+            if (await fs.pathExists(analyticsPath)) {
+                const content = await fs.readFile(analyticsPath, "utf8");
+                const parsed = JSON.parse(content);
+                if (parsed?.provider === "posthog" && parsed.posthog?.key) {
+                    return parsed;
+                }
+            }
+        }
+        catch (error) {
+            console.warn(chalk.yellow(`⚠️ Error reading ${this.analyticsConfigFile}`), error);
+        }
+        return null;
+    }
+    async copyAnalyticsConfig() {
+        console.log(chalk.blue(`🔍 Checking for analytics configuration...`));
+        const sourcePath = path.join(this.rootDir, this.analyticsConfigFile);
+        const destPath = path.join(this.outputDir, this.analyticsConfigFile);
+        if (await fs.pathExists(sourcePath)) {
+            await fs.copy(sourcePath, destPath);
+            console.log(chalk.green(`  ✓ Copied ${this.analyticsConfigFile} to Next.js app`));
+        }
+        else {
+            console.log(chalk.gray(`  ✗ ${this.analyticsConfigFile} not found, skipping`));
+        }
+    }
     async loadSectionsConfig() {
         const sectionsPath = path.join(this.rootDir, "sections.json");
         try {
@@ -337,6 +378,44 @@ class MDXToNextJSGenerator {
             console.error(chalk.red(`❌ Error removing font configuration:`), error);
         }
     }
+    async handleAnalyticsConfigChange() {
+        console.log(chalk.cyan(`📊 Analytics configuration changed`));
+        const sourcePath = path.join(this.rootDir, this.analyticsConfigFile);
+        const destPath = path.join(this.outputDir, this.analyticsConfigFile);
+        try {
+            await fs.copy(sourcePath, destPath);
+            console.log(chalk.green(`📋 Updated ${this.analyticsConfigFile} in Next.js app`));
+            this.analyticsConfig = await this.loadAnalyticsConfig();
+            // Regenerate dynamic templates that depend on analytics config
+            await fs.writeFile(path.join(this.outputDir, "next.config.ts"), nextConfigTemplate(this.analyticsConfig), "utf8");
+            await fs.writeFile(path.join(this.outputDir, "proxy.ts"), proxyTemplate(this.analyticsConfig), "utf8");
+            await this.updateRootLayout();
+            console.log(chalk.green(`✅ Analytics configuration updated`));
+            if (this.analyticsConfig) {
+                console.log(chalk.yellow(`⚠️ Next.js dev server restart may be required for analytics proxy changes`));
+            }
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error updating analytics configuration:`), error);
+        }
+    }
+    async handleAnalyticsConfigDelete() {
+        console.log(chalk.red(`🗑️ Analytics configuration deleted`));
+        const destPath = path.join(this.outputDir, this.analyticsConfigFile);
+        try {
+            // Write empty analytics.json so runtime imports don't break
+            await fs.writeFile(destPath, `{}\n`, "utf8");
+            this.analyticsConfig = null;
+            // Regenerate dynamic templates without analytics
+            await fs.writeFile(path.join(this.outputDir, "next.config.ts"), nextConfigTemplate(null), "utf8");
+            await fs.writeFile(path.join(this.outputDir, "proxy.ts"), proxyTemplate(null), "utf8");
+            await this.updateRootLayout();
+            console.log(chalk.green(`✅ Analytics removed from Next.js app`));
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error removing analytics configuration:`), error);
+        }
+    }
     async copyPublicFiles() {
         const publicDir = path.join(this.rootDir, "public");
         const destDir = path.join(this.outputDir, "public");
@@ -452,6 +531,25 @@ class MDXToNextJSGenerator {
             .on("error", (error) => {
             console.error(chalk.red("❌ Font watcher error:"), error);
         });
+        const analyticsPath = path.join(this.rootDir, this.analyticsConfigFile);
+        this.analyticsWatcher = chokidar.watch(analyticsPath, {
+            persistent: true,
+            ignoreInitial: true,
+        });
+        this.analyticsWatcher
+            .on("add", () => {
+            console.log(chalk.cyan(`📊 Analytics configuration added`));
+            this.handleAnalyticsConfigChange();
+        })
+            .on("change", () => {
+            this.handleAnalyticsConfigChange();
+        })
+            .on("unlink", () => {
+            this.handleAnalyticsConfigDelete();
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Analytics watcher error:"), error);
+        });
         const publicDir = path.join(this.rootDir, "public");
         if (await fs.pathExists(publicDir)) {
             this.publicWatcher = chokidar.watch(publicDir, {
@@ -582,7 +680,8 @@ class MDXToNextJSGenerator {
     async generateRootLayout() {
         const pages = await this.buildAllPagesMeta();
         const fontConfig = await this.loadFontConfig();
-        return layoutTemplate(pages, fontConfig, this.sectionsConfig);
+        const analyticsEnabled = this.analyticsConfig !== null;
+        return layoutTemplate(pages, fontConfig, this.sectionsConfig, analyticsEnabled);
     }
     async generateSectionIndexPages() {
         if (!this.sectionsConfig || this.sectionsConfig.length === 0)
@@ -732,6 +831,10 @@ export default function Page() {
             await this.fontWatcher.close();
             console.log(chalk.yellow("👋 Stopped watching for font config changes"));
         }
+        if (this.analyticsWatcher) {
+            await this.analyticsWatcher.close();
+            console.log(chalk.yellow("👋 Stopped watching for analytics config changes"));
+        }
         if (this.publicWatcher) {
             await this.publicWatcher.close();
             console.log(chalk.yellow("👋 Stopped watching for public directory changes"));

package/dist/lib/layout.d.ts

@@ -26,5 +26,5 @@ interface FontConfig {
         src?: LocalFontSrc[];
     };
 }
-export declare const layoutTemplate: (pages: PageData[], fontConfig: FontConfig | null, sectionsConfig?: SectionConfig[] | null) => string;
+export declare const layoutTemplate: (pages: PageData[], fontConfig: FontConfig | null, sectionsConfig?: SectionConfig[] | null, analyticsEnabled?: boolean) => string;
 export {};

package/dist/lib/layout.js

@@ -35,8 +35,16 @@ function getLocalFontSrc(fc) {
         return `"${fc.localFonts}"`;
     return JSON.stringify(fc.localFonts?.src, null, 2).replace(/"([^"]+)":/g, "$1:");
 }
-export const layoutTemplate = (pages, fontConfig, sectionsConfig = null) => {
+export const layoutTemplate = (pages, fontConfig, sectionsConfig = null, analyticsEnabled = false) => {
     const hasSections = sectionsConfig !== null && sectionsConfig.length > 0;
+    // Extra indent when PostHogProvider wraps the inner content
+    const a = analyticsEnabled ? "  " : "";
+    // ChtProvider line wraps at wider indent
+    const chtOpen = analyticsEnabled
+        ? `<ChtProvider
+${a}              isChatActive={process.env.LLM_PROVIDER ? true : false}
+${a}            >`
+        : `<ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>`;
     return `import type { Metadata } from "next";
 ${isGoogleFont(fontConfig) ? `import { ${fontConfig.googleFont.fontName} } from "next/font/google";` : isLocalFont(fontConfig) ? 'import localFont from "next/font/local";' : 'import { Inter } from "next/font/google";'}
 import dynamic from "next/dynamic";
@@ -70,7 +78,7 @@ ${hasSections
         ? `import { SectionBar } from "@/components/layout/SectionBar";
 import { SectionNavProvider } from "@/components/SectionNavProvider";
 `
-        : ""}const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
+        : ""}${analyticsEnabled ? `import { PostHogProvider } from "@/components/PostHogProvider";\n` : ""}const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
 
 ${isGoogleFont(fontConfig)
         ? `const font = ${fontConfig.googleFont.fontName}({ ${[fontConfig.googleFont.subsets?.length ? `subsets: ${JSON.stringify(fontConfig.googleFont.subsets)}` : "", fontConfig.googleFont.weight?.length ? `weight: ${Array.isArray(fontConfig.googleFont.weight) ? JSON.stringify(fontConfig.googleFont.weight) : `"${fontConfig.googleFont.weight}"`}` : ""].filter(Boolean).join(", ")} });`
@@ -123,24 +131,24 @@ ${hasSections
       </head>
       <body className={font.className}>
         <StyledComponentsRegistry>
-          <CherryThemeProvider theme={theme} themeDark={themeDark}>
-            <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
-              <Header>
-                <SectionBar sections={doccupineSections} />
-              </Header>
-              {process.env.LLM_PROVIDER && <Chat />}
-              <DocsWrapper>
-                <SectionNavProvider
-                  sections={doccupineSections}
-                  allPages={pages}
-                  hideBranding={hideBranding}
-                >
-                  {children}
-                </SectionNavProvider>
-              </DocsWrapper>
-            </ChtProvider>
-          </CherryThemeProvider>
-        </StyledComponentsRegistry>
+${analyticsEnabled ? "          <PostHogProvider>\n" : ""}${a}          <CherryThemeProvider theme={theme} themeDark={themeDark}>
+${a}            ${chtOpen}
+${a}              <Header>
+${a}                <SectionBar sections={doccupineSections} />
+${a}              </Header>
+${a}              {process.env.LLM_PROVIDER && <Chat />}
+${a}              <DocsWrapper>
+${a}                <SectionNavProvider
+${a}                  sections={doccupineSections}
+${a}                  allPages={pages}
+${a}                  hideBranding={hideBranding}
+${a}                >
+${a}                  {children}
+${a}                </SectionNavProvider>
+${a}              </DocsWrapper>
+${a}            </ChtProvider>
+${a}          </CherryThemeProvider>
+${analyticsEnabled ? "          </PostHogProvider>\n" : ""}        </StyledComponentsRegistry>
       </body>
     </html>
   );
@@ -182,24 +190,24 @@ ${hasSections
       </head>
       <body className={font.className}>
         <StyledComponentsRegistry>
-          <CherryThemeProvider theme={theme} themeDark={themeDark}>
-            <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
-              <Header />
-              {process.env.LLM_PROVIDER && <Chat />}
-              <SectionBarProvider hasSectionBar={false}>
-                <DocsWrapper>
-                  <SideBar result={result.length ? result : defaultResults} />
-                  {children}
-                  <DocsNavigation
-                    result={result.length ? result : defaultResults}
-                  />
-                  <StaticLinks />
-                  <Footer hideBranding={hideBranding} />
-                </DocsWrapper>
-              </SectionBarProvider>
-            </ChtProvider>
-          </CherryThemeProvider>
-        </StyledComponentsRegistry>
+${analyticsEnabled ? "          <PostHogProvider>\n" : ""}${a}          <CherryThemeProvider theme={theme} themeDark={themeDark}>
+${a}            ${chtOpen}
+${a}              <Header />
+${a}              {process.env.LLM_PROVIDER && <Chat />}
+${a}              <SectionBarProvider hasSectionBar={false}>
+${a}                <DocsWrapper>
+${a}                  <SideBar result={result.length ? result : defaultResults} />
+${a}                  {children}
+${a}                  <DocsNavigation
+${a}                    result={result.length ? result : defaultResults}
+${a}                  />
+${a}                  <StaticLinks />
+${a}                  <Footer hideBranding={hideBranding} />
+${a}                </DocsWrapper>
+${a}              </SectionBarProvider>
+${a}            </ChtProvider>
+${a}          </CherryThemeProvider>
+${analyticsEnabled ? "          </PostHogProvider>\n" : ""}        </StyledComponentsRegistry>
       </body>
     </html>
   );

package/dist/lib/structures.js

@@ -1,11 +1,9 @@
 import { envExampleTemplate } from "../templates/env.example.js";
 import { gitignoreTemplate } from "../templates/gitignore.js";
 import { eslintConfigTemplate } from "../templates/eslint.config.js";
-import { nextConfigTemplate } from "../templates/next.config.js";
 import { packageJsonTemplate } from "../templates/package.js";
 import { prettierrcTemplate } from "../templates/prettierrc.js";
 import { prettierignoreTemplate } from "../templates/prettierignore.js";
-import { proxyTemplate } from "../templates/proxy.js";
 import { tsconfigTemplate } from "../templates/tsconfig.js";
 import { mcpRoutesTemplate } from "../templates/app/api/mcp/route.js";
 import { ragRoutesTemplate } from "../templates/app/api/rag/route.js";
@@ -19,6 +17,7 @@ import { docsTemplate } from "../templates/components/Docs.js";
 import { docsSideBarTemplate } from "../templates/components/DocsSideBar.js";
 import { mdxComponentsTemplate } from "../templates/components/MDXComponents.js";
 import { sectionNavProviderTemplate } from "../templates/components/SectionNavProvider.js";
+import { postHogProviderTemplate } from "../templates/components/PostHogProvider.js";
 import { sideBarTemplate } from "../templates/components/SideBar.js";
 import { sectionBarTemplate } from "../templates/components/layout/SectionBar.js";
 import { accordionTemplate } from "../templates/components/layout/Accordion.js";
@@ -54,6 +53,7 @@ import { llmConfigTemplate } from "../templates/services/llm/config.js";
 import { llmFactoryTemplate } from "../templates/services/llm/factory.js";
 import { llmIndexTemplate } from "../templates/services/llm/index.js";
 import { llmTypesTemplate } from "../templates/services/llm/types.js";
+import { posthogServerTemplate } from "../templates/lib/posthog.js";
 import { styledDTemplate } from "../templates/types/styled.js";
 import { orderNavItemsTemplate } from "../templates/utils/orderNavItems.js";
 import { rateLimitTemplate } from "../templates/utils/rateLimit.js";
@@ -61,6 +61,7 @@ import { brandingTemplate } from "../templates/utils/branding.js";
 import { configTemplate } from "../templates/utils/config.js";
 import { accordionMdxTemplate } from "../templates/mdx/accordion.mdx.js";
 import { aiAssistantMdxTemplate } from "../templates/mdx/ai-assistant.mdx.js";
+import { analyticsMdxTemplate } from "../templates/mdx/analytics.mdx.js";
 import { buttonsMdxTemplate } from "../templates/mdx/buttons.mdx.js";
 import { calloutsMdxTemplate } from "../templates/mdx/callouts.mdx.js";
 import { cardsMdxTemplate } from "../templates/mdx/cards.mdx.js";
@@ -107,9 +108,7 @@ export const appStructure = {
     ".prettierrc": prettierrcTemplate,
     ".prettierignore": prettierignoreTemplate,
     "eslint.config.mjs": eslintConfigTemplate,
-    "next.config.ts": nextConfigTemplate,
     "package.json": packageJsonTemplate,
-    "proxy.ts": proxyTemplate,
     "tsconfig.json": tsconfigTemplate,
     "app/not-found.tsx": notFoundTemplate,
     "app/theme.ts": themeTemplate,
@@ -125,6 +124,7 @@ export const appStructure = {
     "services/llm/index.ts": llmIndexTemplate,
     "services/llm/types.ts": llmTypesTemplate,
     "types/styled.d.ts": styledDTemplate,
+    "lib/posthog.ts": posthogServerTemplate,
     "utils/branding.ts": brandingTemplate,
     "utils/orderNavItems.ts": orderNavItemsTemplate,
     "utils/rateLimit.ts": rateLimitTemplate,
@@ -136,6 +136,7 @@ export const appStructure = {
     "components/DocsSideBar.tsx": docsSideBarTemplate,
     "components/MDXComponents.tsx": mdxComponentsTemplate,
     "components/SectionNavProvider.tsx": sectionNavProviderTemplate,
+    "components/PostHogProvider.tsx": postHogProviderTemplate,
     "components/SideBar.tsx": sideBarTemplate,
     "components/layout/Accordion.tsx": accordionTemplate,
     "components/layout/ActionBar.tsx": actionBarTemplate,
@@ -167,6 +168,7 @@ export const appStructure = {
 export const startingDocsStructure = {
     "accordion.mdx": accordionMdxTemplate,
     "ai-assistant.mdx": aiAssistantMdxTemplate,
+    "analytics.mdx": analyticsMdxTemplate,
     "buttons.mdx": buttonsMdxTemplate,
     "callouts.mdx": calloutsMdxTemplate,
     "cards.mdx": cardsMdxTemplate,

package/dist/lib/types.d.ts

@@ -28,3 +28,11 @@ export interface DoccupineConfig {
 export interface FontConfig {
     [key: string]: any;
 }
+export interface PostHogConfig {
+    key: string;
+    host?: string;
+}
+export interface AnalyticsConfig {
+    provider: "posthog";
+    posthog: PostHogConfig;
+}

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, RotateCcw, 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 Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n} from \"@/components/layout/SharedStyled\";\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(100dvh - 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  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\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  opacity: 0;\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      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\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: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\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: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\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  ${styledAnchor};\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 StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\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: 12px;\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 Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\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  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\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        ref={inputRef}\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 ChatButtonCTA() {\n  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =\n    useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={() => {\n        const next = !isOpen;\n        setIsOpen(next);\n        if (next) {\n          if (answer.length === 0) {\n            setAnswer([\n              { text: \"Hey there, how can I assist you?\", answer: true },\n            ]);\n          }\n          setTimeout(() => {\n            chatInputRef.current?.focus();\n          }, 350);\n        }\n      }}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <StyledChatCloseButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw size={18} />\n            </StyledChatCloseButton>\n            <StyledChatCloseButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </StyledChatCloseButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink key={src.id} href={href}>\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\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          inputRef={chatInputRef}\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  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\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  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 abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\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 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      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\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        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 === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else 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                    sources,\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                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                    sources,\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  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\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, RotateCcw, 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 Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n} from \"@/components/layout/SharedStyled\";\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(100dvh - 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  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\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  opacity: 0;\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      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\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: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\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: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\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  ${styledAnchor};\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 StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\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: 12px;\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 Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\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  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\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        ref={inputRef}\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 ChatButtonCTA() {\n  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =\n    useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={() => {\n        const next = !isOpen;\n        setIsOpen(next);\n        if (next) {\n          if (answer.length === 0) {\n            setAnswer([\n              { text: \"Hey there, how can I assist you?\", answer: true },\n            ]);\n          }\n          setTimeout(() => {\n            chatInputRef.current?.focus();\n          }, 350);\n        }\n      }}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <StyledChatCloseButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw size={18} />\n            </StyledChatCloseButton>\n            <StyledChatCloseButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </StyledChatCloseButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink\n                        key={src.id}\n                        href={href}\n                        onClick={() => {\n                          if (window.innerWidth <= 992) {\n                            closeChat();\n                          }\n                        }}\n                      >\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\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          inputRef={chatInputRef}\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  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\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  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 abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\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 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      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\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        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 === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else 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                    sources,\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                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                    sources,\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  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";

package/dist/templates/components/Chat.js

@@ -892,7 +892,15 @@ function Chat() {
                           .replace(/\\b\\w/g, (c: string) => c.toUpperCase())
                       : "Home";
                     return (
-                      <StyledSourceLink key={src.id} href={href}>
+                      <StyledSourceLink
+                        key={src.id}
+                        href={href}
+                        onClick={() => {
+                          if (window.innerWidth <= 992) {
+                            closeChat();
+                          }
+                        }}
+                      >
                         {label}
                       </StyledSourceLink>
                     );

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

@@ -0,0 +1 @@
+export declare const postHogProviderTemplate = "\"use client\";\n\nimport posthog from \"posthog-js\";\nimport { PostHogProvider as PHProvider } from \"posthog-js/react\";\nimport { Suspense, useEffect, useRef, useState } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport rawAnalyticsConfig from \"@/analytics.json\";\n\ninterface AnalyticsConfig {\n  provider?: string;\n  posthog?: {\n    key?: string;\n    host?: string;\n  };\n}\n\nconst analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;\n\nconst posthogKey =\n  analyticsConfig?.provider === \"posthog\" ? analyticsConfig.posthog?.key : null;\n\nfunction PostHogInit({ onReady }: { onReady: () => void }) {\n  const initRef = useRef(false);\n\n  useEffect(() => {\n    if (initRef.current || !posthogKey) return;\n    initRef.current = true;\n\n    posthog.init(posthogKey, {\n      api_host: \"/ingest\",\n      ui_host: analyticsConfig.posthog?.host || \"https://us.posthog.com\",\n      capture_pageview: false,\n      capture_pageleave: true,\n      loaded: onReady,\n    });\n  }, [onReady]);\n\n  return null;\n}\n\nfunction PostHogPageviewTracker() {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n\n  useEffect(() => {\n    if (pathname) {\n      const url = searchParams?.size\n        ? `${pathname}?${searchParams.toString()}`\n        : pathname;\n      posthog.capture(\"$pageview\", { $current_url: url });\n    }\n  }, [pathname, searchParams]);\n\n  return null;\n}\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  const [ready, setReady] = useState(false);\n\n  if (!posthogKey) {\n    return <>{children}</>;\n  }\n\n  return (\n    <PHProvider client={posthog}>\n      <PostHogInit onReady={() => setReady(true)} />\n      <Suspense fallback={null}>{ready && <PostHogPageviewTracker />}</Suspense>\n      {children}\n    </PHProvider>\n  );\n}\n";

package/dist/templates/components/PostHogProvider.js

@@ -0,0 +1,72 @@
+export const postHogProviderTemplate = `"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { Suspense, useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import rawAnalyticsConfig from "@/analytics.json";
+
+interface AnalyticsConfig {
+  provider?: string;
+  posthog?: {
+    key?: string;
+    host?: string;
+  };
+}
+
+const analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;
+
+const posthogKey =
+  analyticsConfig?.provider === "posthog" ? analyticsConfig.posthog?.key : null;
+
+function PostHogInit({ onReady }: { onReady: () => void }) {
+  const initRef = useRef(false);
+
+  useEffect(() => {
+    if (initRef.current || !posthogKey) return;
+    initRef.current = true;
+
+    posthog.init(posthogKey, {
+      api_host: "/ingest",
+      ui_host: analyticsConfig.posthog?.host || "https://us.posthog.com",
+      capture_pageview: false,
+      capture_pageleave: true,
+      loaded: onReady,
+    });
+  }, [onReady]);
+
+  return null;
+}
+
+function PostHogPageviewTracker() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      const url = searchParams?.size
+        ? \`\${pathname}?\${searchParams.toString()}\`
+        : pathname;
+      posthog.capture("$pageview", { $current_url: url });
+    }
+  }, [pathname, searchParams]);
+
+  return null;
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  const [ready, setReady] = useState(false);
+
+  if (!posthogKey) {
+    return <>{children}</>;
+  }
+
+  return (
+    <PHProvider client={posthog}>
+      <PostHogInit onReady={() => setReady(true)} />
+      <Suspense fallback={null}>{ready && <PostHogPageviewTracker />}</Suspense>
+      {children}
+    </PHProvider>
+  );
+}
+`;

package/dist/templates/lib/posthog.d.ts

@@ -0,0 +1 @@
+export declare const posthogServerTemplate = "import { PostHog } from \"posthog-node\";\nimport rawAnalyticsConfig from \"@/analytics.json\";\n\ninterface AnalyticsConfig {\n  provider?: string;\n  posthog?: {\n    key?: string;\n    host?: string;\n  };\n}\n\nconst analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;\n\nlet client: PostHog | null = null;\n\nexport function getPostHogServerClient(): PostHog | null {\n  if (\n    analyticsConfig?.provider !== \"posthog\" ||\n    !analyticsConfig.posthog?.key\n  ) {\n    return null;\n  }\n\n  if (!client) {\n    const host = analyticsConfig.posthog.host || \"https://us.i.posthog.com\";\n\n    client = new PostHog(analyticsConfig.posthog.key, {\n      host,\n      flushAt: 1,\n      flushInterval: 0,\n    });\n  }\n\n  return client;\n}\n";

package/dist/templates/lib/posthog.js

@@ -0,0 +1,36 @@
+export const posthogServerTemplate = `import { PostHog } from "posthog-node";
+import rawAnalyticsConfig from "@/analytics.json";
+
+interface AnalyticsConfig {
+  provider?: string;
+  posthog?: {
+    key?: string;
+    host?: string;
+  };
+}
+
+const analyticsConfig = rawAnalyticsConfig as AnalyticsConfig;
+
+let client: PostHog | null = null;
+
+export function getPostHogServerClient(): PostHog | null {
+  if (
+    analyticsConfig?.provider !== "posthog" ||
+    !analyticsConfig.posthog?.key
+  ) {
+    return null;
+  }
+
+  if (!client) {
+    const host = analyticsConfig.posthog.host || "https://us.i.posthog.com";
+
+    client = new PostHog(analyticsConfig.posthog.key, {
+      host,
+      flushAt: 1,
+      flushInterval: 0,
+    });
+  }
+
+  return client;
+}
+`;

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

@@ -0,0 +1 @@
+export declare const analyticsMdxTemplate = "---\ntitle: \"Analytics\"\ndescription: \"Add PostHog analytics to your documentation site with an analytics.json file for both client-side and server-side tracking.\"\ndate: \"2026-02-24\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 10\n---\n# Analytics\nTrack how users interact with your documentation using PostHog. Doccupine supports both client-side and server-side tracking out of the box, with a privacy-first proxy that routes analytics through your own domain.\n\n## analytics.json\nPlace an `analytics.json` at your project root (the same folder where you execute `npx doccupine`).\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://us.i.posthog.com\"\n  }\n}\n```\n\n## Fields\n\n- **provider**: The analytics provider to use. Currently only `\"posthog\"` is supported.\n- **posthog.key**: Your PostHog project API key. You can find this in your PostHog project settings under \"Project API Key\". This is a public identifier - it is safe to commit to version control.\n- **posthog.host**: The PostHog ingestion endpoint. Use `https://us.i.posthog.com` for US Cloud or `https://eu.i.posthog.com` for EU Cloud. If you self-host PostHog, use your instance URL.\n\n<Callout type=\"note\">\n  The PostHog project API key is a public identifier used to send events. It is not a secret and is safe to include in your repository.\n</Callout>\n\n## What gets tracked\nWhen `analytics.json` is configured, Doccupine enables two layers of tracking:\n\n### Client-side\n- **Page views**: Captured on every client-side navigation using Next.js router hooks.\n- **Page leave**: Automatically captured when a user navigates away from a page.\n\n### Server-side\n- **Page views**: Captured in middleware on every page request, including the initial server render.\n- **Request metadata**: URL, pathname, host, referrer, and user agent are sent with each event.\n- **Smart filtering**: API routes, internal Next.js routes, and prefetch requests are automatically excluded.\n\n## Privacy proxy\nDoccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through `/ingest` on your own domain and are proxied to PostHog.\n\nThis means:\n- No third-party domains appear in network requests.\n- Ad blockers are less likely to interfere with tracking.\n- Your users' browsing data stays within your domain boundary before reaching PostHog.\n\nThe proxy destinations are derived automatically from the `host` field in your configuration.\n\n## Getting a PostHog key\n1. Sign up at [posthog.com](https://posthog.com) (free tier available).\n2. Create a new project.\n3. Go to **Project Settings** and copy the **Project API Key**.\n4. Paste it into your `analytics.json` as the `posthog.key` value.\n\n## Behavior\n- **Placement**: Put `analytics.json` in the project root alongside `config.json` and `theme.json`.\n- **Hot reload**: Changes to `analytics.json` are picked up automatically in watch mode. The layout, middleware, and Next.js config are regenerated.\n- **Graceful degradation**: If `analytics.json` is missing, empty, or has an invalid configuration, no tracking code runs. Your site works exactly the same without it.\n- **Dev server restart**: After adding or removing `analytics.json` for the first time, you may need to restart the Next.js dev server for proxy rewrites to take effect.\n\n<Callout type=\"warning\">\n  After adding `analytics.json` for the first time, restart the dev server so the proxy rewrites are picked up by Next.js.\n</Callout>\n\n## Regions\nPostHog offers two cloud regions. Set the `host` field accordingly:\n\n| Region | Host |\n|---|---|\n| US Cloud | `https://us.i.posthog.com` |\n| EU Cloud | `https://eu.i.posthog.com` |\n\nIf you omit the `host` field, it defaults to the US Cloud endpoint.\n\n## Example\n\n### Minimal configuration (US Cloud)\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\"\n  }\n}\n```\n\n### EU Cloud\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://eu.i.posthog.com\"\n  }\n}\n```\n\n## Tips\n- **Start simple**: Add the config with just your key and verify events appear in your PostHog dashboard before customizing further.\n- **Check your dashboard**: After deploying, visit your PostHog project to confirm page view events are flowing in.\n- **Production only**: Consider adding `analytics.json` only in your production/deployment setup to avoid tracking local development traffic.\n";

package/dist/templates/mdx/analytics.mdx.js

@@ -0,0 +1,112 @@
+export const analyticsMdxTemplate = `---
+title: "Analytics"
+description: "Add PostHog analytics to your documentation site with an analytics.json file for both client-side and server-side tracking."
+date: "2026-02-24"
+category: "Configuration"
+categoryOrder: 3
+order: 10
+---
+# Analytics
+Track how users interact with your documentation using PostHog. Doccupine supports both client-side and server-side tracking out of the box, with a privacy-first proxy that routes analytics through your own domain.
+
+## analytics.json
+Place an \`analytics.json\` at your project root (the same folder where you execute \`npx doccupine\`).
+
+\`\`\`json
+{
+  "provider": "posthog",
+  "posthog": {
+    "key": "phc_your_project_api_key",
+    "host": "https://us.i.posthog.com"
+  }
+}
+\`\`\`
+
+## Fields
+
+- **provider**: The analytics provider to use. Currently only \`"posthog"\` is supported.
+- **posthog.key**: Your PostHog project API key. You can find this in your PostHog project settings under "Project API Key". This is a public identifier - it is safe to commit to version control.
+- **posthog.host**: The PostHog ingestion endpoint. Use \`https://us.i.posthog.com\` for US Cloud or \`https://eu.i.posthog.com\` for EU Cloud. If you self-host PostHog, use your instance URL.
+
+<Callout type="note">
+  The PostHog project API key is a public identifier used to send events. It is not a secret and is safe to include in your repository.
+</Callout>
+
+## What gets tracked
+When \`analytics.json\` is configured, Doccupine enables two layers of tracking:
+
+### Client-side
+- **Page views**: Captured on every client-side navigation using Next.js router hooks.
+- **Page leave**: Automatically captured when a user navigates away from a page.
+
+### Server-side
+- **Page views**: Captured in middleware on every page request, including the initial server render.
+- **Request metadata**: URL, pathname, host, referrer, and user agent are sent with each event.
+- **Smart filtering**: API routes, internal Next.js routes, and prefetch requests are automatically excluded.
+
+## Privacy proxy
+Doccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through \`/ingest\` on your own domain and are proxied to PostHog.
+
+This means:
+- No third-party domains appear in network requests.
+- Ad blockers are less likely to interfere with tracking.
+- Your users' browsing data stays within your domain boundary before reaching PostHog.
+
+The proxy destinations are derived automatically from the \`host\` field in your configuration.
+
+## Getting a PostHog key
+1. Sign up at [posthog.com](https://posthog.com) (free tier available).
+2. Create a new project.
+3. Go to **Project Settings** and copy the **Project API Key**.
+4. Paste it into your \`analytics.json\` as the \`posthog.key\` value.
+
+## Behavior
+- **Placement**: Put \`analytics.json\` in the project root alongside \`config.json\` and \`theme.json\`.
+- **Hot reload**: Changes to \`analytics.json\` are picked up automatically in watch mode. The layout, middleware, and Next.js config are regenerated.
+- **Graceful degradation**: If \`analytics.json\` is missing, empty, or has an invalid configuration, no tracking code runs. Your site works exactly the same without it.
+- **Dev server restart**: After adding or removing \`analytics.json\` for the first time, you may need to restart the Next.js dev server for proxy rewrites to take effect.
+
+<Callout type="warning">
+  After adding \`analytics.json\` for the first time, restart the dev server so the proxy rewrites are picked up by Next.js.
+</Callout>
+
+## Regions
+PostHog offers two cloud regions. Set the \`host\` field accordingly:
+
+| Region | Host |
+|---|---|
+| US Cloud | \`https://us.i.posthog.com\` |
+| EU Cloud | \`https://eu.i.posthog.com\` |
+
+If you omit the \`host\` field, it defaults to the US Cloud endpoint.
+
+## Example
+
+### Minimal configuration (US Cloud)
+
+\`\`\`json
+{
+  "provider": "posthog",
+  "posthog": {
+    "key": "phc_your_project_api_key"
+  }
+}
+\`\`\`
+
+### EU Cloud
+
+\`\`\`json
+{
+  "provider": "posthog",
+  "posthog": {
+    "key": "phc_your_project_api_key",
+    "host": "https://eu.i.posthog.com"
+  }
+}
+\`\`\`
+
+## Tips
+- **Start simple**: Add the config with just your key and verify events appear in your PostHog dashboard before customizing further.
+- **Check your dashboard**: After deploying, visit your PostHog project to confirm page view events are flowing in.
+- **Production only**: Consider adding \`analytics.json\` only in your production/deployment setup to avoid tracking local development traffic.
+`;

package/dist/templates/mdx/deployment-and-hosting.mdx.d.ts

@@ -1 +1 @@
-export declare const deploymentAndHostingMdxTemplate = "---\ntitle: \"Deployment & Hosting\"\ndescription: \"Deploy your documentation site with the Doccupine Platform or self-host on any platform that supports Next.js.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 10\n---\n# Deployment & Hosting\nThe fastest way to deploy your documentation is with the [Doccupine Platform](https://www.doccupine.com). If you prefer to manage your own infrastructure, you can self-host the generated Next.js app on any platform.\n\n## Doccupine Platform\n\nSign up at [doccupine.com](https://www.doccupine.com) and connect your repository. Your documentation site is live in minutes - no build configuration, no infrastructure to manage.\n\n<Callout type=\"success\">\n  The Doccupine Platform is the recommended way to deploy. It handles builds, hosting, SSL, and updates automatically so you can focus on writing documentation.\n</Callout>\n\n### What you get\n- **Automatic deployments** on every push to your repository\n- **Site customization** through a visual dashboard - no code changes needed\n- **Team collaboration** so your whole team can manage docs together\n- **Custom domains** with automatic SSL\n- **AI Assistant and MCP server** included out of the box, no API key required\n- **Zero maintenance** - no servers, no build pipelines, no dependency updates\n\n### Getting started\n1. Create an account at [doccupine.com](https://www.doccupine.com).\n2. Connect your GitHub repository.\n3. Your site is deployed automatically.\n\nEvery push to your repository triggers a new deployment. You can customize your site's appearance, domain, and settings from the dashboard. See the [Platform Overview](/platform) for a full walkthrough of the dashboard, editor, and configuration options.\n\n---\n\n## Self-hosting\n\nDoccupine generates a standard Next.js app, so you can deploy it anywhere that supports Node.js or Next.js.\n\n<Callout type=\"warning\">\n  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the root directory to the generated site folder.\n</Callout>\n\n<Callout type=\"note\">\n  Self-hosting requires you to manage your own build pipeline, hosting, SSL certificates, and AI provider API keys. For a hands-off experience, consider the [Doccupine Platform](https://www.doccupine.com).\n</Callout>\n\n### Popular hosting options\n\n- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app folder.\n- **Netlify** - supports Next.js via the `@netlify/plugin-nextjs` adapter. Works with the standard `next build` output.\n- **AWS Amplify** - fully managed hosting with CI/CD. Supports Next.js SSR out of the box.\n- **Cloudflare Pages** - deploy using the `@cloudflare/next-on-pages` adapter for edge-based hosting.\n- **Docker** - build a container from the generated app using the standard [Next.js Docker example](https://github.com/vercel/next.js/tree/canary/examples/with-docker) and deploy to any container platform.\n- **Node.js server** - run `next build && next start` on any server or VPS with Node.js installed.\n\n### Troubleshooting\n- **Build failed** - check build logs. Ensure your lockfile and correct Node.js version are present.\n- **Missing content** - verify your MDX files and assets are in the repository.\n- **SSR issues on edge platforms** - some features (like the AI chat API routes) require a Node.js runtime. Check your platform's documentation for SSR/API route support.";
+export declare const deploymentAndHostingMdxTemplate = "---\ntitle: \"Deployment & Hosting\"\ndescription: \"Deploy your documentation site with the Doccupine Platform or self-host on any platform that supports Next.js.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 11\n---\n# Deployment & Hosting\nThe fastest way to deploy your documentation is with the [Doccupine Platform](https://www.doccupine.com). If you prefer to manage your own infrastructure, you can self-host the generated Next.js app on any platform.\n\n## Doccupine Platform\n\nSign up at [doccupine.com](https://www.doccupine.com) and connect your repository. Your documentation site is live in minutes - no build configuration, no infrastructure to manage.\n\n<Callout type=\"success\">\n  The Doccupine Platform is the recommended way to deploy. It handles builds, hosting, SSL, and updates automatically so you can focus on writing documentation.\n</Callout>\n\n### What you get\n- **Automatic deployments** on every push to your repository\n- **Site customization** through a visual dashboard - no code changes needed\n- **Team collaboration** so your whole team can manage docs together\n- **Custom domains** with automatic SSL\n- **AI Assistant and MCP server** included out of the box, no API key required\n- **Zero maintenance** - no servers, no build pipelines, no dependency updates\n\n### Getting started\n1. Create an account at [doccupine.com](https://www.doccupine.com).\n2. Connect your GitHub repository.\n3. Your site is deployed automatically.\n\nEvery push to your repository triggers a new deployment. You can customize your site's appearance, domain, and settings from the dashboard. See the [Platform Overview](/platform) for a full walkthrough of the dashboard, editor, and configuration options.\n\n---\n\n## Self-hosting\n\nDoccupine generates a standard Next.js app, so you can deploy it anywhere that supports Node.js or Next.js.\n\n<Callout type=\"warning\">\n  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the root directory to the generated site folder.\n</Callout>\n\n<Callout type=\"note\">\n  Self-hosting requires you to manage your own build pipeline, hosting, SSL certificates, and AI provider API keys. For a hands-off experience, consider the [Doccupine Platform](https://www.doccupine.com).\n</Callout>\n\n### Popular hosting options\n\n- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app folder.\n- **Netlify** - supports Next.js via the `@netlify/plugin-nextjs` adapter. Works with the standard `next build` output.\n- **AWS Amplify** - fully managed hosting with CI/CD. Supports Next.js SSR out of the box.\n- **Cloudflare Pages** - deploy using the `@cloudflare/next-on-pages` adapter for edge-based hosting.\n- **Docker** - build a container from the generated app using the standard [Next.js Docker example](https://github.com/vercel/next.js/tree/canary/examples/with-docker) and deploy to any container platform.\n- **Node.js server** - run `next build && next start` on any server or VPS with Node.js installed.\n\n### Troubleshooting\n- **Build failed** - check build logs. Ensure your lockfile and correct Node.js version are present.\n- **Missing content** - verify your MDX files and assets are in the repository.\n- **SSR issues on edge platforms** - some features (like the AI chat API routes) require a Node.js runtime. Check your platform's documentation for SSR/API route support.";

package/dist/templates/mdx/deployment-and-hosting.mdx.js

@@ -4,7 +4,7 @@ description: "Deploy your documentation site with the Doccupine Platform or self
 date: "2026-02-19"
 category: "Configuration"
 categoryOrder: 3
-order: 10
+order: 11
 ---
 # Deployment & Hosting
 The fastest way to deploy your documentation is with the [Doccupine Platform](https://www.doccupine.com). If you prefer to manage your own infrastructure, you can self-host the generated Next.js app on any platform.

package/dist/templates/next.config.d.ts

@@ -1 +1,2 @@
-export declare const nextConfigTemplate = "import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  compiler: {\n    styledComponents: true,\n  },\n};\n\nexport default nextConfig;\n";
+import type { AnalyticsConfig } from "../lib/types.js";
+export declare const nextConfigTemplate: (analyticsConfig?: AnalyticsConfig | null) => string;

package/dist/templates/next.config.js

@@ -1,4 +1,7 @@
-export const nextConfigTemplate = `import type { NextConfig } from "next";
+export const nextConfigTemplate = (analyticsConfig = null) => {
+    const hasPostHog = analyticsConfig?.provider === "posthog" && !!analyticsConfig.posthog?.key;
+    if (!hasPostHog) {
+        return `import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   compiler: {
@@ -8,3 +11,32 @@ const nextConfig: NextConfig = {
 
 export default nextConfig;
 `;
+    }
+    const host = analyticsConfig.posthog.host || "https://us.i.posthog.com";
+    // Derive the assets host from the API host (e.g. https://us.i.posthog.com -> https://us-assets.i.posthog.com)
+    const assetsHost = host
+        .replace("://", "://" + "")
+        .replace(".i.", "-assets.i.");
+    return `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "${assetsHost}/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "${host}/:path*",
+      },
+    ];
+  },
+};
+
+export default nextConfig;
+`;
+};

package/dist/templates/package.js

@@ -22,6 +22,8 @@ export const packageJsonTemplate = JSON.stringify({
         next: "16.1.6",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
+        "posthog-js": "^1.353.0",
+        "posthog-node": "^5.25.0",
         react: "19.2.4",
         "react-dom": "19.2.4",
         "rehype-highlight": "^7.0.2",

package/dist/templates/proxy.d.ts

@@ -1 +1,2 @@
-export declare const proxyTemplate = "import { NextResponse } from \"next/server\";\nimport type { NextRequest } from \"next/server\";\n\nexport function proxy(req: NextRequest) {\n  // API key auth for /api/mcp when DOCS_API_KEY is configured\n  if (req.nextUrl.pathname.startsWith(\"/api/mcp\")) {\n    const apiKey = process.env.DOCS_API_KEY;\n    if (apiKey) {\n      const authHeader = req.headers.get(\"authorization\");\n      const token = authHeader?.startsWith(\"Bearer \")\n        ? authHeader.slice(7)\n        : null;\n\n      if (token !== apiKey) {\n        return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 });\n      }\n    }\n  }\n\n  const res = NextResponse.next();\n\n  res.headers.set(\"Accept-CH\", \"Sec-CH-Prefers-Color-Scheme\");\n  res.headers.set(\"Vary\", \"Sec-CH-Prefers-Color-Scheme\");\n  res.headers.set(\"Critical-CH\", \"Sec-CH-Prefers-Color-Scheme\");\n\n  const existing = req.cookies.get(\"theme\")?.value;\n  const hint = req.headers.get(\"Sec-CH-Prefers-Color-Scheme\");\n\n  if (!existing && hint) {\n    const value = hint === \"dark\" ? \"dark\" : \"light\";\n    res.cookies.set(\"theme\", value, {\n      path: \"/\",\n      maxAge: 60 * 60 * 24 * 365,\n      sameSite: \"lax\",\n    });\n  }\n\n  return res;\n}\n\nexport const config = {\n  matcher: [\"/:path*\"],\n};\n";
+import type { AnalyticsConfig } from "../lib/types.js";
+export declare const proxyTemplate: (analyticsConfig?: AnalyticsConfig | null) => string;

package/dist/templates/proxy.js

@@ -1,8 +1,68 @@
-export const proxyTemplate = `import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
+export const proxyTemplate = (analyticsConfig = null) => {
+    const hasPostHog = analyticsConfig?.provider === "posthog" && !!analyticsConfig.posthog?.key;
+    const posthogImport = hasPostHog
+        ? `import { getPostHogServerClient } from "@/lib/posthog";\n`
+        : "";
+    const posthogPageviewFn = hasPostHog
+        ? `
+const SKIP_PAGEVIEW_PATTERN = /^\\/(api|ingest|_next)\\//;
 
-export function proxy(req: NextRequest) {
-  // API key auth for /api/mcp when DOCS_API_KEY is configured
+function captureServerPageview(req: NextRequest, event: NextFetchEvent) {
+  const pathname = req.nextUrl.pathname;
+
+  if (SKIP_PAGEVIEW_PATTERN.test(pathname)) return;
+
+  const isPrefetch =
+    req.headers.get("next-router-prefetch") === "1" ||
+    req.headers.get("purpose") === "prefetch";
+  if (isPrefetch) return;
+
+  const posthog = getPostHogServerClient();
+  if (!posthog) return;
+
+  const phCookie = req.cookies.get(
+    "ph_${analyticsConfig.posthog.key}_posthog",
+  )?.value;
+  let distinctId: string | undefined;
+  if (phCookie) {
+    try {
+      distinctId = JSON.parse(phCookie).distinct_id;
+    } catch {
+      // ignore malformed cookie
+    }
+  }
+  if (!distinctId) {
+    distinctId = crypto.randomUUID();
+  }
+
+  posthog.capture({
+    distinctId,
+    event: "$pageview",
+    properties: {
+      $current_url: req.url,
+      $pathname: pathname,
+      $host: req.headers.get("host") ?? undefined,
+      $referrer: req.headers.get("referer") ?? undefined,
+      $user_agent: req.headers.get("user-agent") ?? undefined,
+      _server_side: true,
+    },
+  });
+  event.waitUntil(posthog.flush());
+}
+`
+        : "";
+    const posthogCall = hasPostHog
+        ? `  captureServerPageview(req, event);\n`
+        : "";
+    const fnSignature = hasPostHog
+        ? `export function proxy(req: NextRequest, event: NextFetchEvent)`
+        : `export function proxy(req: NextRequest)`;
+    const eventImport = hasPostHog ? ", NextFetchEvent" : "";
+    return `import { NextResponse } from "next/server";
+import type { NextRequest${eventImport} } from "next/server";
+${posthogImport}${posthogPageviewFn}
+${fnSignature} {
+${posthogCall}  // API key auth for /api/mcp when DOCS_API_KEY is configured
   if (req.nextUrl.pathname.startsWith("/api/mcp")) {
     const apiKey = process.env.DOCS_API_KEY;
     if (apiKey) {
@@ -42,3 +102,4 @@ export const config = {
   matcher: ["/:path*"],
 };
 `;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {