doccupine 0.0.113 → 0.0.115

package/dist/index.js

@@ -9,7 +9,7 @@ import chalk from "chalk";
 import { appStructure, obsoleteFiles, startingDocsStructure, } from "./lib/structures.js";
 import { rootLayoutTemplate, siteLayoutTemplate } from "./lib/layout.js";
 import { ConfigManager } from "./lib/config-manager.js";
-import { findAvailablePort, generateSlug, getFullSlug, escapeTemplateContent, } from "./lib/utils.js";
+import { findAvailablePort, generateSlug, getFullSlug, escapeTemplateContent, resolvePackageManager, } from "./lib/utils.js";
 import { generateMetadataBlock, generateRuntimeOnlyMetadataBlock, generateJsonLdScript, } from "./lib/metadata.js";
 import { nextConfigTemplate } from "./templates/next.config.js";
 import { pnpmWorkspaceTemplate } from "./templates/pnpmWorkspace.js";
@@ -60,9 +60,6 @@ class MDXToNextJSGenerator {
         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}`));
         }
@@ -72,8 +69,16 @@ class MDXToNextJSGenerator {
         await this.copyFontConfig();
         await this.copyAnalyticsConfig();
         await this.copyPublicFiles();
+        // createStartingDocs() may have written the sample docs - which carry
+        // section frontmatter - after the initial resolveSections() ran against an
+        // empty watch dir. Re-resolve now that every MDX file is on disk so the
+        // build applies the correct sections in a single O(n) pass, instead of
+        // rediscovering them per file (the old O(n²) behavior).
+        this.sectionsConfig = await this.resolveSections();
+        if (this.sectionsConfig) {
+            console.log(chalk.blue(`📑 Found ${this.sectionsConfig.length} section(s): ${this.sectionsConfig.map((s) => s.label).join(", ")}`));
+        }
         await this.processAllMDXFiles();
-        await this.generateSectionIndexPages();
         console.log(chalk.green("✅ Initial setup complete!"));
         console.log(chalk.cyan("💡 To start the Next.js dev server:"));
         console.log(chalk.white(`   cd ${path.relative(process.cwd(), this.outputDir)}`));
@@ -260,7 +265,6 @@ class MDXToNextJSGenerator {
         console.log(chalk.cyan("📑 Sections configuration changed"));
         this.sectionsConfig = await this.resolveSections();
         await this.processAllMDXFiles();
-        await this.generateSectionIndexPages();
     }
     async maybeUpdateSections() {
         if (this.isReprocessing)
@@ -278,8 +282,9 @@ class MDXToNextJSGenerator {
             this.sectionsConfig = newSections;
             this.isReprocessing = true;
             try {
+                // processAllMDXFiles() already refreshes section index pages via its
+                // aggregate pass, so no separate generateSectionIndexPages() here.
                 await this.processAllMDXFiles();
-                await this.generateSectionIndexPages();
             }
             finally {
                 this.isReprocessing = false;
@@ -681,36 +686,58 @@ class MDXToNextJSGenerator {
         const files = await this.getAllMDXFiles();
         return Promise.all(files.map((file) => this.parseMDXFile(file)));
     }
+    /**
+     * Writes the generated page(s) for a single MDX file: the doc page and, for a
+     * section-index file, the section landing page. Deliberately does NOT run the
+     * site-wide aggregations (pages index, layout, sitemap, llms, section
+     * redirects) - the caller batches those so a bulk build runs them once at the
+     * end instead of once per file (which is what made large builds O(n²)).
+     */
+    async writePageForFile(filePath) {
+        const fullPath = path.join(this.watchDir, filePath);
+        const content = await fs.readFile(fullPath, "utf8");
+        const { data: frontmatter, content: mdxContent } = matter(content);
+        const { sectionSlug, pageSlug } = this.determineSectionForFile(filePath, frontmatter);
+        const fullSlug = getFullSlug(pageSlug, sectionSlug);
+        const isIndex = filePath === "index.mdx" || filePath === "./index.mdx";
+        const isSectionIndex = this.sectionsConfig && pageSlug === "" && sectionSlug !== "";
+        if (isIndex) {
+            // The homepage is emitted by updatePagesIndex() in the aggregate pass, so
+            // there is no per-file page to write here.
+            console.log(chalk.blue("🏠 Updating homepage with index.mdx content"));
+        }
+        else {
+            const mdxFile = {
+                path: filePath,
+                content: mdxContent,
+                frontmatter,
+                slug: fullSlug,
+            };
+            await this.generatePageFromMDX(mdxFile);
+        }
+        if (isSectionIndex) {
+            await this.updateSectionIndex(sectionSlug, frontmatter, mdxContent);
+        }
+    }
+    /**
+     * Regenerates every file that depends on the full set of pages (pages index,
+     * root/site layout, sitemap, llms files, section redirects). Parses all MDX
+     * exactly once and threads the result through each generator, so one refresh
+     * is a single scan rather than one scan per generator.
+     */
+    async refreshSiteAggregates() {
+        const pages = await this.buildAllPagesMeta();
+        await this.updatePagesIndex();
+        await this.updateRootLayout(pages);
+        await this.updateSitemap(pages);
+        await this.updateLlmsFiles(pages);
+        await this.generateSectionIndexPages(pages);
+    }
     async handleFileChange(action, filePath) {
         console.log(chalk.cyan(`📝 File ${action}: ${filePath}`));
-        const fullPath = path.join(this.watchDir, filePath);
         try {
-            const content = await fs.readFile(fullPath, "utf8");
-            const { data: frontmatter, content: mdxContent } = matter(content);
-            const { sectionSlug, pageSlug } = this.determineSectionForFile(filePath, frontmatter);
-            const fullSlug = getFullSlug(pageSlug, sectionSlug);
-            const isIndex = filePath === "index.mdx" || filePath === "./index.mdx";
-            const isSectionIndex = this.sectionsConfig && pageSlug === "" && sectionSlug !== "";
-            if (isIndex) {
-                console.log(chalk.blue("🏠 Updating homepage with index.mdx content"));
-            }
-            else {
-                const mdxFile = {
-                    path: filePath,
-                    content: mdxContent,
-                    frontmatter,
-                    slug: fullSlug,
-                };
-                await this.generatePageFromMDX(mdxFile);
-            }
-            if (isSectionIndex) {
-                await this.updateSectionIndex(sectionSlug, frontmatter, mdxContent);
-            }
-            await this.updatePagesIndex();
-            await this.updateRootLayout();
-            await this.updateSitemap();
-            await this.updateLlmsFiles();
-            await this.generateSectionIndexPages();
+            await this.writePageForFile(filePath);
+            await this.refreshSiteAggregates();
             console.log(chalk.green(`✅ Generated page for: ${filePath}`));
             await this.maybeUpdateSections();
         }
@@ -744,9 +771,21 @@ class MDXToNextJSGenerator {
     }
     async processAllMDXFiles() {
         const files = await this.getAllMDXFiles();
+        // Write each page first (the only genuinely per-file work), then run the
+        // site-wide aggregations a single time. Doing the aggregations per file
+        // re-scanned and re-parsed every MDX file on each iteration, which made a
+        // full build O(n²); batching them makes it O(n). A single bad file is
+        // logged and skipped so it never aborts the whole build.
         for (const file of files) {
-            await this.handleFileChange("processed", file);
+            console.log(chalk.cyan(`📝 Processing: ${file}`));
+            try {
+                await this.writePageForFile(file);
+            }
+            catch (error) {
+                console.error(chalk.red(`❌ Error processing ${file}:`), error);
+            }
         }
+        await this.refreshSiteAggregates();
     }
     async getAllMDXFiles() {
         const files = [];
@@ -771,23 +810,23 @@ class MDXToNextJSGenerator {
         const analyticsEnabled = this.analyticsConfig !== null;
         return rootLayoutTemplate(fontConfig, analyticsEnabled);
     }
-    async generateSiteLayout() {
-        const pages = await this.buildAllPagesMeta();
-        return siteLayoutTemplate(pages, this.sectionsConfig);
+    async generateSiteLayout(pages) {
+        const resolvedPages = pages ?? (await this.buildAllPagesMeta());
+        return siteLayoutTemplate(resolvedPages, this.sectionsConfig);
     }
-    async generateSectionIndexPages() {
+    async generateSectionIndexPages(pages) {
         if (!this.sectionsConfig || this.sectionsConfig.length === 0)
             return;
-        const pages = await this.buildAllPagesMeta();
+        const resolvedPages = pages ?? (await this.buildAllPagesMeta());
         for (const section of this.sectionsConfig) {
             if (section.slug === "")
                 continue;
             // Check if a page already exists at the section root
-            const hasIndex = pages.some((p) => p.slug === section.slug);
+            const hasIndex = resolvedPages.some((p) => p.slug === section.slug);
             if (hasIndex)
                 continue;
             // Find the first page in this section
-            const sectionPages = pages
+            const sectionPages = resolvedPages
                 .filter((p) => p.section === section.slug)
                 .sort((a, b) => {
                 if (a.categoryOrder !== b.categoryOrder)
@@ -983,11 +1022,11 @@ export default function Page() {
         await fs.ensureDir(path.dirname(pagePath));
         await fs.writeFile(pagePath, indexContent, "utf8");
     }
-    async updateRootLayout() {
+    async updateRootLayout(pages) {
         await fs.writeFile(path.join(this.outputDir, "app", "layout.tsx"), await this.generateRootLayout(), "utf8");
         const siteLayoutPath = path.join(this.outputDir, "app", "(site)", "layout.tsx");
         await fs.ensureDir(path.dirname(siteLayoutPath));
-        await fs.writeFile(siteLayoutPath, await this.generateSiteLayout(), "utf8");
+        await fs.writeFile(siteLayoutPath, await this.generateSiteLayout(pages), "utf8");
     }
     async loadSiteUrl() {
         const configPath = path.join(this.rootDir, "config.json");
@@ -1033,7 +1072,7 @@ export default function Page() {
         }
         return entries;
     }
-    async updateSitemap() {
+    async updateSitemap(pages) {
         const sitemapPath = path.join(this.outputDir, "app", "sitemap.ts");
         const siteUrl = await this.loadSiteUrl();
         if (!siteUrl) {
@@ -1043,8 +1082,8 @@ export default function Page() {
             }
             return;
         }
-        const pages = await this.buildAllPagesMeta();
-        const entries = this.buildSitemapEntries(pages);
+        const resolvedPages = pages ?? (await this.buildAllPagesMeta());
+        const entries = this.buildSitemapEntries(resolvedPages);
         await fs.writeFile(sitemapPath, sitemapTemplate(entries), "utf8");
         console.log(chalk.green(`🗺️ Generated sitemap.ts with ${entries.length} page(s) using ${siteUrl}`));
     }
@@ -1116,17 +1155,17 @@ export default function Page() {
         const json = JSON.stringify(payload, null, 2) + "\n";
         await fs.writeFile(manifestPath, json, "utf8");
     }
-    async updateLlmsFiles() {
+    async updateLlmsFiles(pages) {
         const publicDir = path.join(this.outputDir, "public");
         await fs.ensureDir(publicDir);
         const { url: baseUrl, name, description } = await this.loadSiteMetadata();
-        const pages = await this.buildAllPagesMeta();
-        const pagesWithBodies = await Promise.all(pages.map((page) => this.readPageWithBody(page)));
+        const resolvedPages = pages ?? (await this.buildAllPagesMeta());
+        const pagesWithBodies = await Promise.all(resolvedPages.map((page) => this.readPageWithBody(page)));
         const indexContent = llmsIndexTemplate({
             siteName: name,
             siteDescription: description,
             baseUrl,
-            pages,
+            pages: resolvedPages,
             sectionsConfig: this.sectionsConfig,
         });
         const fullContent = llmsFullTemplate({
@@ -1167,7 +1206,7 @@ export default function Page() {
         }
         this.generatedLlmsPagePaths = nextRelativePaths;
         await this.writeLlmsManifest(nextRelativePaths);
-        console.log(chalk.green(`🤖 Generated llms.txt and llms-full.txt with ${pages.length} page(s)${baseUrl ? ` using ${baseUrl}` : " (relative URLs)"}`));
+        console.log(chalk.green(`🤖 Generated llms.txt and llms-full.txt with ${resolvedPages.length} page(s)${baseUrl ? ` using ${baseUrl}` : " (relative URLs)"}`));
     }
     async stop() {
         if (this.watcher) {
@@ -1205,6 +1244,7 @@ program
     .option("--port <port>", "Port for Next.js dev server", "3000")
     .option("--verbose", "Show verbose output")
     .option("--reset", "Reset configuration and prompt for new directories")
+    .option("--package-manager <name>", "Package manager for the generated app: pnpm or npm (default: auto-detect)")
     .action(async (options) => {
     const configManager = new ConfigManager();
     const config = await configManager.getConfig({
@@ -1215,18 +1255,13 @@ program
     await generator.init();
     let devServer = null;
     console.log(chalk.blue("📦 Installing dependencies..."));
-    const { spawn, execSync } = await import("child_process");
-    // Check if pnpm is available, fallback to npm
-    let packageManager = "npm";
-    try {
-        execSync("pnpm --version", { stdio: "ignore" });
-        packageManager = "pnpm";
-    }
-    catch {
-        // pnpm not available, use npm
-    }
-    console.log(chalk.blue(`📦 Using ${packageManager}...`));
-    const install = spawn(packageManager, ["install"], {
+    const { spawn } = await import("child_process");
+    // Prefer pnpm (the generated app ships a pnpm workspace) and fall back to
+    // npm. A --package-manager flag or a "packageManager" field in
+    // doccupine.json overrides detection; the flag wins.
+    const packageManager = resolvePackageManager(options.packageManager ?? config.packageManager);
+    console.log(chalk.blue(`📦 Using ${packageManager.name}...`));
+    const install = spawn(packageManager.bin, ["install"], {
         cwd: config.outputDir,
         stdio: "inherit",
     });
@@ -1237,7 +1272,7 @@ program
                 resolve(void 0);
             }
             else {
-                reject(new Error(`${packageManager} install failed with code ${code}`));
+                reject(new Error(`${packageManager.name} install failed with code ${code}`));
             }
         });
         install.on("error", reject);
@@ -1248,10 +1283,10 @@ program
     }
     console.log(chalk.blue(`🚀 Starting Next.js dev server on port ${port}...`));
     const portStr = String(port);
-    const devArgs = packageManager === "npm"
+    const devArgs = packageManager.name === "npm"
         ? ["run", "dev", "--", "--port", portStr]
         : ["run", "dev", "--port", portStr];
-    devServer = spawn(packageManager, devArgs, {
+    devServer = spawn(packageManager.bin, devArgs, {
         cwd: config.outputDir,
         stdio: ["ignore", "pipe", "pipe"],
     });

package/dist/lib/types.d.ts

@@ -27,6 +27,10 @@ export interface DoccupineConfig {
     watchDir: string;
     outputDir: string;
     port: string;
+    /** Force the package manager used to install and run the generated app
+     *  ("pnpm" or "npm"), overriding auto-detection. Also settable per run via
+     *  the `--package-manager` flag, which takes precedence over this field. */
+    packageManager?: string;
 }
 export interface FontConfig {
     [key: string]: any;

package/dist/lib/utils.d.ts

@@ -1,3 +1,19 @@
+export type PackageManagerName = "pnpm" | "npm";
+export interface ResolvedPackageManager {
+    name: PackageManagerName;
+    /** Absolute path when we can resolve one, otherwise the bare command name.
+     *  Spawning the resolved path (not the bare name) is what lets pnpm work
+     *  even when its install dir is missing from the process PATH. */
+    bin: string;
+}
+/**
+ * Chooses the package manager for the generated app. The app ships a pnpm
+ * workspace, so pnpm is preferred whenever it can be found; npm is the fallback.
+ * An explicit `override` (from `--package-manager` or doccupine.json) always
+ * wins. Auto-detection also trusts `npm_config_user_agent` when pnpm launched
+ * the CLI.
+ */
+export declare function resolvePackageManager(override?: string): ResolvedPackageManager;
 export declare function findAvailablePort(startPort: number): Promise<number>;
 export declare function generateSlug(filePath: string): string;
 export declare function getFullSlug(pageSlug: string, sectionSlug: string): string;

package/dist/lib/utils.js

@@ -1,3 +1,59 @@
+import fs from "fs-extra";
+import path from "path";
+import { execSync } from "child_process";
+import chalk from "chalk";
+/**
+ * Locates a usable pnpm binary without relying solely on the caller's PATH.
+ * Standalone pnpm installs (e.g. ~/Library/pnpm) expose PNPM_HOME but only add
+ * their bin dir to PATH via an interactive shell rc, so a CLI launched from an
+ * IDE terminal or GUI often can't see `pnpm` on PATH. Returns null if pnpm
+ * genuinely isn't available.
+ */
+function findPnpmBin() {
+    const exe = process.platform === "win32" ? "pnpm.exe" : "pnpm";
+    const home = process.env.PNPM_HOME;
+    if (home) {
+        const candidate = path.join(home, exe);
+        if (fs.existsSync(candidate))
+            return candidate;
+    }
+    try {
+        execSync("pnpm --version", { stdio: "ignore" });
+        return "pnpm";
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Chooses the package manager for the generated app. The app ships a pnpm
+ * workspace, so pnpm is preferred whenever it can be found; npm is the fallback.
+ * An explicit `override` (from `--package-manager` or doccupine.json) always
+ * wins. Auto-detection also trusts `npm_config_user_agent` when pnpm launched
+ * the CLI.
+ */
+export function resolvePackageManager(override) {
+    const requested = override?.trim().toLowerCase();
+    if (requested === "npm")
+        return { name: "npm", bin: "npm" };
+    if (requested === "pnpm") {
+        const bin = findPnpmBin();
+        if (bin)
+            return { name: "pnpm", bin };
+        console.warn(chalk.yellow("⚠️ packageManager is set to pnpm but pnpm could not be found; using npm."));
+        return { name: "npm", bin: "npm" };
+    }
+    if (requested) {
+        console.warn(chalk.yellow(`⚠️ Unknown packageManager "${override}" (expected "pnpm" or "npm"); auto-detecting instead.`));
+    }
+    const launchedByPnpm = (process.env.npm_config_user_agent || "").startsWith("pnpm");
+    if (launchedByPnpm)
+        return { name: "pnpm", bin: "pnpm" };
+    const bin = findPnpmBin();
+    if (bin)
+        return { name: "pnpm", bin };
+    return { name: "npm", bin: "npm" };
+}
 export async function findAvailablePort(startPort) {
     const net = await import("net");
     return new Promise((resolve) => {

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

@@ -1 +1 @@
-export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button, IconButton } 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  thinScrollbar,\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      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\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: 12px 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 }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\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 }) => theme.colors.surface};\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      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\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  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\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  ${thinScrollbar};\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  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\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 }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\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 }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\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 }) => theme.colors.accent};\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\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 { toggleChat, isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={toggleChat}\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            <IconButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw />\n            </IconButton>\n            <IconButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </IconButton>\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  toggleChat: () => 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  toggleChat: () => {},\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  const isOpenRef = useRef(isOpen);\n\n  useEffect(() => {\n    isOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  // Open the assistant, seeding a greeting the first time and focusing the\n  // input once the panel has slid in (matches the 0.3s panel transition).\n  const openChat = useCallback(() => {\n    setIsOpen(true);\n    setAnswer((prev) =>\n      prev.length === 0\n        ? [{ text: \"Hey there, how can I assist you?\", answer: true }]\n        : prev,\n    );\n    setTimeout(() => {\n      chatInputRef.current?.focus();\n    }, 350);\n  }, []);\n\n  const toggleChat = useCallback(() => {\n    if (isOpenRef.current) {\n      setIsOpen(false);\n    } else {\n      openChat();\n    }\n  }, [openChat]);\n\n  // Global Cmd/Ctrl+I toggles the assistant, but only when chat is enabled.\n  useEffect(() => {\n    if (!isChatActive) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"i\") {\n        e.preventDefault();\n        toggleChat();\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isChatActive, toggleChat]);\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        toggleChat,\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  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button, IconButton } 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  thinScrollbar,\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      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\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: 12px 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 }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\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 }) => theme.colors.surface};\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      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\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  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\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  ${thinScrollbar};\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  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px 15px;\n  border-radius: 18px;\n  margin: 20px 0 20px auto;\n  width: fit-content;\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      width: 100%;\n      max-width: 100%;\n      margin: 20px 0;\n      border-radius: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\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 }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\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 }) => theme.colors.accent};\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\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 { toggleChat, isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={toggleChat}\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            <IconButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw />\n            </IconButton>\n            <IconButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </IconButton>\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  toggleChat: () => 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  toggleChat: () => {},\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  const isOpenRef = useRef(isOpen);\n\n  useEffect(() => {\n    isOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  // Open the assistant, seeding a greeting the first time and focusing the\n  // input once the panel has slid in (matches the 0.3s panel transition).\n  const openChat = useCallback(() => {\n    setIsOpen(true);\n    setAnswer((prev) =>\n      prev.length === 0\n        ? [{ text: \"Hey there, how can I assist you?\", answer: true }]\n        : prev,\n    );\n    setTimeout(() => {\n      chatInputRef.current?.focus();\n    }, 350);\n  }, []);\n\n  const toggleChat = useCallback(() => {\n    if (isOpenRef.current) {\n      setIsOpen(false);\n    } else {\n      openChat();\n    }\n  }, [openChat]);\n\n  // Global Cmd/Ctrl+I toggles the assistant, but only when chat is enabled.\n  useEffect(() => {\n    if (!isChatActive) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"i\") {\n        e.preventDefault();\n        toggleChat();\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isChatActive, toggleChat]);\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        toggleChat,\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

@@ -523,10 +523,10 @@ const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
   \${thinScrollbar};
   background: \${({ theme }) => theme.colors.primary};
   color: \${({ theme }) => theme.colors.surface};
-  padding: 10px;
-  border-radius: 8px;
-  margin: 20px 0;
-  width: 100%;
+  padding: 10px 15px;
+  border-radius: 18px;
+  margin: 20px 0 20px auto;
+  width: fit-content;
   \${styledText};
 
   & p {
@@ -539,6 +539,10 @@ const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
       background: transparent;
       color: \${({ theme }) => theme.colors.dark};
       padding: 0;
+      width: 100%;
+      max-width: 100%;
+      margin: 20px 0;
+      border-radius: 0;
     \`}
 
   & code:not([class]) {

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

@@ -1 +1 @@
-export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  /* Callout tints are alert-semantic (info-blue, warning-amber, danger-red,\n     etc.) and intentionally independent of theme.json. Light-mode values are\n     defined by default; dark-mode overrides live in :root.dark & blocks so\n     the swap happens via the active <html> class with no re-render. */\n  ${({ $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: #0ea5e933;\n      background: #f0f9ff80;\n\n      & svg.lucide,\n      & p {\n        color: #0c4a6e;\n      }\n\n      :root.dark & {\n        border-color: #0ea5e94d;\n        background: #0ea5e91a;\n\n        & svg.lucide,\n        & p {\n          color: #bae6fd;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: #71717a33;\n      background: #fafafa80;\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: #18181b;\n      }\n\n      :root.dark & {\n        border-color: #71717a4d;\n        background: #71717a1a;\n\n        & svg.lucide,\n        & .lucide,\n        & p {\n          color: #e4e4e7;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: #f59e0b33;\n      background: #fffbeb80;\n\n      & svg.lucide,\n      & p {\n        color: #78350f;\n      }\n\n      :root.dark & {\n        border-color: #f59e0b4d;\n        background: #f59e0b1a;\n\n        & svg.lucide,\n        & p {\n          color: #fde68a;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: #ef444433;\n      background: #fef2f280;\n\n      & svg.lucide,\n      & p {\n        color: #7f1d1d;\n      }\n\n      :root.dark & {\n        border-color: #ef44444d;\n        background: #ef44441a;\n\n        & svg.lucide,\n        & p {\n          color: #fecaca;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: #10b98133;\n      background: #ecfdf580;\n\n      & svg.lucide,\n      & p {\n        color: #064e3b;\n      }\n\n      :root.dark & {\n        border-color: #10b9814d;\n        background: #10b9811a;\n\n        & svg.lucide,\n        & p {\n          color: #a7f3d0;\n        }\n      }\n    `}\n`;\n\nconst StyledChildren = styled.span`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      {iconType ? <Icon name={iconType} size={16} /> : null}\n      <StyledChildren>{children}</StyledChildren>\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";
+export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  max-width: 100%;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  /* Callout tints are alert-semantic (info-blue, warning-amber, danger-red,\n     etc.) and intentionally independent of theme.json. Light-mode values are\n     defined by default; dark-mode overrides live in :root.dark & blocks so\n     the swap happens via the active <html> class with no re-render. */\n  ${({ $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: #0ea5e933;\n      background: #f0f9ff80;\n\n      & svg.lucide,\n      & p {\n        color: #0c4a6e;\n      }\n\n      :root.dark & {\n        border-color: #0ea5e94d;\n        background: #0ea5e91a;\n\n        & svg.lucide,\n        & p {\n          color: #bae6fd;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: #71717a33;\n      background: #fafafa80;\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: #18181b;\n      }\n\n      :root.dark & {\n        border-color: #71717a4d;\n        background: #71717a1a;\n\n        & svg.lucide,\n        & .lucide,\n        & p {\n          color: #e4e4e7;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: #f59e0b33;\n      background: #fffbeb80;\n\n      & svg.lucide,\n      & p {\n        color: #78350f;\n      }\n\n      :root.dark & {\n        border-color: #f59e0b4d;\n        background: #f59e0b1a;\n\n        & svg.lucide,\n        & p {\n          color: #fde68a;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: #ef444433;\n      background: #fef2f280;\n\n      & svg.lucide,\n      & p {\n        color: #7f1d1d;\n      }\n\n      :root.dark & {\n        border-color: #ef44444d;\n        background: #ef44441a;\n\n        & svg.lucide,\n        & p {\n          color: #fecaca;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: #10b98133;\n      background: #ecfdf580;\n\n      & svg.lucide,\n      & p {\n        color: #064e3b;\n      }\n\n      :root.dark & {\n        border-color: #10b9814d;\n        background: #10b9811a;\n\n        & svg.lucide,\n        & p {\n          color: #a7f3d0;\n        }\n      }\n    `}\n`;\n\nconst StyledChildren = styled.span`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      {iconType ? <Icon name={iconType} size={16} /> : null}\n      <StyledChildren>{children}</StyledChildren>\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";

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

@@ -12,6 +12,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
   padding: 20px;
   margin: 0;
+  max-width: 100%;
   \${({ theme }) => styledSmall(theme)}
   color: \${({ theme }) => theme.colors.grayDark};
   display: flex;

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

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo, useId } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  title?: string;\n  theme?: Theme;\n}\n\ninterface CodeTab {\n  label: string;\n  code: string;\n  language?: string;\n}\n\ninterface CodeTabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  tabs: CodeTab[];\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  position: relative;\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* Centered file name in the TopBar. Sits absolutely over the flex row so the\n   dots and copy button keep their edge alignment. Monospace + muted GitHub\n   grays, swapped via :root.dark like the rest of the block. pointer-events off\n   so clicks fall through to nothing and never steal focus from the buttons. */\nconst TopBarTitle = styled.span<{ theme: Theme }>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 60%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 2;\n  color: #57606a;\n\n  :root.dark & {\n    color: #8b949e;\n  }\n`;\n\n/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally\n   with the thin scrollbar when the labels overflow the 33px bar. */\nconst TabList = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin-left: -6px;\n`;\n\n/* Individual tab button. Active tab reads as part of the window: a light body\n   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs\n   are muted and transparent. resetButton strips native styling; focus-visible\n   draws an inset brand primary ring on a pseudo-element so the scrolling\n   TabList can't clip it. All colors stay fixed and swap purely via :root.dark,\n   matching the no-re-render palette approach. */\nconst CodeTab = styled.button<{ theme: Theme; $active: boolean }>`\n  ${resetButton}\n  flex: 0 0 auto;\n  position: relative;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 1;\n  padding: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.15s ease,\n    background 0.15s ease,\n    border-color 0.15s ease;\n  border: solid 1px\n    ${({ $active }) => ($active ? \"rgba(0, 0, 0, 0.1)\" : \"transparent\")};\n  background: ${({ $active }) => ($active ? \"#ffffff\" : \"transparent\")};\n  color: ${({ $active }) => ($active ? \"#24292f\" : \"#57606a\")};\n\n  &:hover {\n    color: #24292f;\n    background: ${({ $active }) =>\n      $active ? \"#ffffff\" : \"rgba(0, 0, 0, 0.04)\"};\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border: solid 2px ${({ theme }) => theme.colors.primary};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    pointer-events: none;\n  }\n\n  :root.dark & {\n    border-color: ${({ $active }) =>\n      $active ? \"rgba(255, 255, 255, 0.15)\" : \"transparent\"};\n    background: ${({ $active }) => ($active ? \"#161b22\" : \"transparent\")};\n    color: ${({ $active }) => ($active ? \"#e6edf3\" : \"#8b949e\")};\n\n    &:hover {\n      color: #e6edf3;\n      background: ${({ $active }) =>\n        $active ? \"#161b22\" : \"rgba(255, 255, 255, 0.06)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n    min-width: min-content;\n    width: 100%;\n    display: block;\n    padding-right: 20px;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  /* Diff lines: highlight.js wraps each +/- line in a single span, so\n     stretching it to the full row reads like a GitHub diff. inline-block keeps\n     the trailing newline as the line break instead of adding an empty row. */\n  & .hljs-addition,\n  & .hljs-deletion {\n    display: inline-table;\n    width: 100%;\n  }\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({\n  code,\n  language = \"javascript\",\n  title,\n  theme,\n  className,\n}: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\n/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS\n   dots in the TopBar as a keyboard-accessible tablist; the copy button copies\n   whichever tab is active and resets its copied state when the tab changes. */\nfunction CodeTabs({ tabs, theme, className }: CodeTabsProps) {\n  const baseId = useId();\n  const [active, setActive] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const safeActive = active < tabs.length ? active : 0;\n  const activeTab = tabs[safeActive];\n\n  const highlightedCode = useMemo(\n    () =>\n      activeTab\n        ? highlightCode(activeTab.code, activeTab.language ?? \"bash\")\n        : \"\",\n    [activeTab],\n  );\n\n  const handleSelect = useCallback((index: number) => {\n    setActive(index);\n    setCopied(false);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!activeTab) return;\n    try {\n      await navigator.clipboard.writeText(activeTab.code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      let next = safeActive;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (safeActive + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (safeActive - 1 + tabs.length) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      handleSelect(next);\n      const target = document.getElementById(`${baseId}-tab-${next}`);\n      if (target) target.focus();\n    },\n    [baseId, handleSelect, safeActive, tabs.length],\n  );\n\n  if (!tabs || tabs.length === 0) return null;\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <TabList role=\"tablist\" aria-label=\"Code variants\">\n          {tabs.map((tab, index) => (\n            <CodeTab\n              key={`${tab.label}-${index}`}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${index}`}\n              aria-selected={index === safeActive}\n              aria-controls={`${baseId}-panel`}\n              tabIndex={index === safeActive ? 0 : -1}\n              onClick={() => handleSelect(index)}\n              onKeyDown={handleKeyDown}\n              $active={index === safeActive}\n              theme={theme}\n            >\n              {tab.label}\n            </CodeTab>\n          ))}\n        </TabList>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        id={`${baseId}-panel`}\n        role=\"tabpanel\"\n        aria-labelledby={`${baseId}-tab-${safeActive}`}\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code, CodeTabs };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo, useId } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  title?: string;\n  theme?: Theme;\n}\n\ninterface CodeTab {\n  label: string;\n  code: string;\n  language?: string;\n}\n\ninterface CodeTabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  tabs: CodeTab[];\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  position: relative;\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    margin: 0;\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* Centered file name in the TopBar. Sits absolutely over the flex row so the\n   dots and copy button keep their edge alignment. Monospace + muted GitHub\n   grays, swapped via :root.dark like the rest of the block. pointer-events off\n   so clicks fall through to nothing and never steal focus from the buttons. */\nconst TopBarTitle = styled.span<{ theme: Theme }>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 60%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 2;\n  color: #57606a;\n\n  :root.dark & {\n    color: #8b949e;\n  }\n`;\n\n/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally\n   with the thin scrollbar when the labels overflow the 33px bar. */\nconst TabList = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin-left: -6px;\n`;\n\n/* Individual tab button. Active tab reads as part of the window: a light body\n   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs\n   are muted and transparent. resetButton strips native styling; focus-visible\n   draws an inset brand primary ring on a pseudo-element so the scrolling\n   TabList can't clip it. All colors stay fixed and swap purely via :root.dark,\n   matching the no-re-render palette approach. */\nconst CodeTab = styled.button<{ theme: Theme; $active: boolean }>`\n  ${resetButton}\n  flex: 0 0 auto;\n  position: relative;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 1;\n  padding: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.15s ease,\n    background 0.15s ease,\n    border-color 0.15s ease;\n  border: solid 1px\n    ${({ $active }) => ($active ? \"rgba(0, 0, 0, 0.1)\" : \"transparent\")};\n  background: ${({ $active }) => ($active ? \"#ffffff\" : \"transparent\")};\n  color: ${({ $active }) => ($active ? \"#24292f\" : \"#57606a\")};\n\n  &:hover {\n    color: #24292f;\n    background: ${({ $active }) =>\n      $active ? \"#ffffff\" : \"rgba(0, 0, 0, 0.04)\"};\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border: solid 2px ${({ theme }) => theme.colors.primary};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    pointer-events: none;\n  }\n\n  :root.dark & {\n    border-color: ${({ $active }) =>\n      $active ? \"rgba(255, 255, 255, 0.15)\" : \"transparent\"};\n    background: ${({ $active }) => ($active ? \"#161b22\" : \"transparent\")};\n    color: ${({ $active }) => ($active ? \"#e6edf3\" : \"#8b949e\")};\n\n    &:hover {\n      color: #e6edf3;\n      background: ${({ $active }) =>\n        $active ? \"#161b22\" : \"rgba(255, 255, 255, 0.06)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n    min-width: min-content;\n    width: 100%;\n    display: block;\n    padding-right: 20px;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  /* Diff lines: highlight.js wraps each +/- line in a single span, so\n     stretching it to the full row reads like a GitHub diff. inline-block keeps\n     the trailing newline as the line break instead of adding an empty row. */\n  & .hljs-addition,\n  & .hljs-deletion {\n    display: inline-table;\n    width: 100%;\n  }\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({\n  code,\n  language = \"javascript\",\n  title,\n  theme,\n  className,\n}: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\n/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS\n   dots in the TopBar as a keyboard-accessible tablist; the copy button copies\n   whichever tab is active and resets its copied state when the tab changes. */\nfunction CodeTabs({ tabs, theme, className }: CodeTabsProps) {\n  const baseId = useId();\n  const [active, setActive] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const safeActive = active < tabs.length ? active : 0;\n  const activeTab = tabs[safeActive];\n\n  const highlightedCode = useMemo(\n    () =>\n      activeTab\n        ? highlightCode(activeTab.code, activeTab.language ?? \"bash\")\n        : \"\",\n    [activeTab],\n  );\n\n  const handleSelect = useCallback((index: number) => {\n    setActive(index);\n    setCopied(false);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!activeTab) return;\n    try {\n      await navigator.clipboard.writeText(activeTab.code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      let next = safeActive;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (safeActive + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (safeActive - 1 + tabs.length) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      handleSelect(next);\n      const target = document.getElementById(`${baseId}-tab-${next}`);\n      if (target) target.focus();\n    },\n    [baseId, handleSelect, safeActive, tabs.length],\n  );\n\n  if (!tabs || tabs.length === 0) return null;\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <TabList role=\"tablist\" aria-label=\"Code variants\">\n          {tabs.map((tab, index) => (\n            <CodeTab\n              key={`${tab.label}-${index}`}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${index}`}\n              aria-selected={index === safeActive}\n              aria-controls={`${baseId}-panel`}\n              tabIndex={index === safeActive ? 0 : -1}\n              onClick={() => handleSelect(index)}\n              onKeyDown={handleKeyDown}\n              $active={index === safeActive}\n              theme={theme}\n            >\n              {tab.label}\n            </CodeTab>\n          ))}\n        </TabList>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        id={`${baseId}-panel`}\n        role=\"tabpanel\"\n        aria-labelledby={`${baseId}-tab-${safeActive}`}\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code, CodeTabs };\n";

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

@@ -110,6 +110,7 @@ const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
   margin-right: -6px;
 
   & svg.lucide {
+    margin: 0;
     color: \${({ $copied }) => ($copied ? "#2da44e" : "#57606a")};
   }
 

package/dist/templates/package.js

@@ -12,19 +12,19 @@ export const packageJsonTemplate = JSON.stringify({
     },
     dependencies: {
         "@langchain/anthropic": "^1.5.1",
-        "@langchain/core": "^1.2.1",
+        "@langchain/core": "^1.2.2",
         "@langchain/google-genai": "^2.2.0",
-        "@langchain/openai": "^1.5.3",
+        "@langchain/openai": "^1.5.5",
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
         "cherry-styled-components": "^0.2.10",
-        langchain: "^1.5.2",
-        "lucide-react": "^1.23.0",
+        langchain: "^1.5.3",
+        "lucide-react": "^1.24.0",
         minisearch: "^7.2.0",
         next: "16.2.10",
         "next-mdx-remote": "^6.0.0",
-        "posthog-js": "^1.398.7",
+        "posthog-js": "^1.399.1",
         "posthog-node": "^5.40.0",
         react: "19.2.7",
         "react-dom": "19.2.7",
@@ -50,7 +50,7 @@ export const packageJsonTemplate = JSON.stringify({
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.1.1",
         globals: "^17.7.0",
-        prettier: "^3.9.4",
+        prettier: "^3.9.5",
         typescript: "npm:@typescript/typescript6@^6.0.2",
     },
 }, null, 2) + "\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.113",
+  "version": "0.0.115",
   "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": {
@@ -48,7 +48,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^26.1.1",
     "@types/prompts": "^2.4.9",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.5",
     "typescript": "^7.0.2",
     "vitest": "^4.1.10"
   },