doccupine 0.0.87 → 0.0.89

package/dist/templates/app/robots.js

@@ -1,4 +1,6 @@
-export const robotsTemplate = `import type { MetadataRoute } from "next";
+export const robotsTemplate = (hasSiteUrl) => {
+    if (!hasSiteUrl) {
+        return `import type { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -9,3 +11,28 @@ export default function robots(): MetadataRoute.Robots {
   };
 }
 `;
+    }
+    return `import type { MetadataRoute } from "next";
+import { config } from "@/utils/config";
+
+function resolveBaseUrl(): string | null {
+  const raw = process.env.NEXT_PUBLIC_SITE_URL ?? config.url;
+  if (!raw) return null;
+  return raw.replace(/\\/$/, "");
+}
+
+export default function robots(): MetadataRoute.Robots {
+  const base = resolveBaseUrl();
+  const rules: MetadataRoute.Robots = {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+  };
+  if (base) {
+    rules.sitemap = \`\${base}/sitemap.xml\`;
+  }
+  return rules;
+}
+`;
+};

package/dist/templates/app/sitemap.d.ts

@@ -0,0 +1,7 @@
+export interface SitemapEntry {
+    slug: string;
+    lastModified?: string;
+    changeFrequency: "weekly";
+    priority: number;
+}
+export declare const sitemapTemplate: (entries: SitemapEntry[]) => string;

package/dist/templates/app/sitemap.js

@@ -0,0 +1,56 @@
+function formatEntries(entries) {
+    const lines = entries.map((entry) => {
+        const parts = [
+            `    slug: ${JSON.stringify(entry.slug)}`,
+            entry.lastModified
+                ? `    lastModified: ${JSON.stringify(entry.lastModified)}`
+                : null,
+            `    changeFrequency: ${JSON.stringify(entry.changeFrequency)}`,
+            `    priority: ${entry.priority}`,
+        ].filter(Boolean);
+        return `  {\n${parts.join(",\n")},\n  }`;
+    });
+    return `[\n${lines.join(",\n")},\n]`;
+}
+export const sitemapTemplate = (entries) => {
+    const entriesLiteral = formatEntries(entries);
+    return `import type { MetadataRoute } from "next";
+import { config } from "@/utils/config";
+
+type ChangeFrequency =
+  | "always"
+  | "hourly"
+  | "daily"
+  | "weekly"
+  | "monthly"
+  | "yearly"
+  | "never";
+
+interface Entry {
+  slug: string;
+  lastModified?: string;
+  changeFrequency: ChangeFrequency;
+  priority: number;
+}
+
+const ENTRIES: Entry[] = ${entriesLiteral};
+
+function resolveBaseUrl(): string | null {
+  const raw = process.env.NEXT_PUBLIC_SITE_URL ?? config.url;
+  if (!raw) return null;
+  return raw.replace(/\\/$/, "");
+}
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const base = resolveBaseUrl();
+  if (!base) return [];
+
+  return ENTRIES.map((entry) => ({
+    url: entry.slug === "" ? base : \`\${base}/\${entry.slug}\`,
+    lastModified: entry.lastModified ? new Date(entry.lastModified) : undefined,
+    changeFrequency: entry.changeFrequency,
+    priority: entry.priority,
+  }));
+}
+`;
+};

package/dist/templates/app/theme.d.ts

@@ -1,3 +1,3 @@
 export declare const SIDEBAR_WIDTH = 280;
 export declare const CHAT_WIDTH = 420;
-export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\ninterface CustomTheme {\n  default?: Partial<Colors>;\n  dark?: Partial<Colors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nconst breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nconst spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nconst colors: Colors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#556272\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),\n};\n\nconst colorsDark: Colors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),\n};\n\nconst shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nconst shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nconst fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nconst fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nconst lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\ninterface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\ninterface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\ninterface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\ninterface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\ninterface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\ninterface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";
+export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\n// Users can only override the brand palette via theme.json \u2014 semantic tokens\n// (accent, surface, etc.) are derived in GlobalStyles from the brand colors\n// and are not directly overridable.\ntype CustomColors = Omit<\n  Colors,\n  \"accent\" | \"accentStrong\" | \"accentMuted\" | \"surface\"\n>;\n\ninterface CustomTheme {\n  default?: Partial<CustomColors>;\n  dark?: Partial<CustomColors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nconst breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nconst spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\n// Resolved hex palettes for each mode. GlobalStyles emits these as CSS\n// custom properties on :root and :root.dark. Components never read these\n// directly \u2014 they read `theme.colors.*` which resolves to var(--color-\u2026)\n// and lets the browser pick the right value based on the active class.\nexport const colorsLight: CustomColors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#556272\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default\n    ? (customTheme.default as Partial<CustomColors>)\n    : {}),\n};\n\nexport const colorsDark: CustomColors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<CustomColors>) : {}),\n};\n\nexport const shadowsLight: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nconst fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nconst fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nconst lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\n// Single theme object exported to consumers. Every color/shadow value is a\n// CSS custom-property reference; the browser resolves it against :root or\n// :root.dark depending on the active class. Components access these exactly\n// like before \u2014 `theme.colors.primary`, `theme.shadows.sm` \u2014 but the values\n// flip without React re-rendering.\nconst colors: Colors = {\n  // Brand palette \u2014 directly customizable via theme.json's \"default\" / \"dark\".\n  primaryLight: \"var(--color-primaryLight)\",\n  primary: \"var(--color-primary)\",\n  primaryDark: \"var(--color-primaryDark)\",\n  secondaryLight: \"var(--color-secondaryLight)\",\n  secondary: \"var(--color-secondary)\",\n  secondaryDark: \"var(--color-secondaryDark)\",\n  tertiaryLight: \"var(--color-tertiaryLight)\",\n  tertiary: \"var(--color-tertiary)\",\n  tertiaryDark: \"var(--color-tertiaryDark)\",\n  grayLight: \"var(--color-grayLight)\",\n  gray: \"var(--color-gray)\",\n  grayDark: \"var(--color-grayDark)\",\n  success: \"var(--color-success)\",\n  error: \"var(--color-error)\",\n  warning: \"var(--color-warning)\",\n  info: \"var(--color-info)\",\n  dark: \"var(--color-dark)\",\n  light: \"var(--color-light)\",\n\n  // Semantic tokens \u2014 derived in GlobalStyles to capture the most common\n  // mode-aware swaps that components used to express via `theme.isDark ? A : B`.\n  // They follow the same single-noun convention as the brand palette.\n  accent: \"var(--color-accent)\",\n  accentStrong: \"var(--color-accentStrong)\",\n  accentMuted: \"var(--color-accentMuted)\",\n  surface: \"var(--color-surface)\",\n};\n\nconst shadows: Shadows = {\n  xs: \"var(--shadow-xs)\",\n  sm: \"var(--shadow-sm)\",\n  md: \"var(--shadow-md)\",\n  lg: \"var(--shadow-lg)\",\n  xl: \"var(--shadow-xl)\",\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  // Stub for type compatibility with cherry-styled-components' Theme. Mode\n  // switching lives entirely in CSS vars flipped by :root.dark, so our own\n  // code never branches on this. Cherry's internal `isDark ? \u2026 : \u2026` branches\n  // (e.g. buttonStyles' filled-button text) are handled where they surface\n  // by re-pinning to a mode-agnostic semantic token \u2014 see components/layout/Button.tsx.\n  isDark: false,\n};\n\ninterface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\ninterface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\n// Matches cherry-styled-components' Colors shape for the brand keys, plus a\n// handful of semantic tokens derived from the brand palette by GlobalStyles.\n// The brand keys (primaryLight\u2026light) are customizable via theme.json; the\n// semantic keys (accent*, surface) are derived and not overridable \u2014 see\n// CustomColors above.\ninterface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n\n  /** High-contrast accent text. Was: isDark ? primaryLight : primaryDark. */\n  accent: TString;\n  /** Slightly stronger accent (lightened/darkened by ~10%). */\n  accentStrong: TString;\n  /** Muted body text. Was: isDark ? grayDark : primary. */\n  accentMuted: TString;\n  /** Elevated surface color, white-ish in both modes. Was: isDark ? dark : light. */\n  surface: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\ninterface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\ninterface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\ninterface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";

package/dist/templates/app/theme.js

@@ -3,9 +3,17 @@ export const CHAT_WIDTH = 420;
 export const themeTemplate = `"use client";
 import customThemeJson from "@/theme.json";
 
+// Users can only override the brand palette via theme.json — semantic tokens
+// (accent, surface, etc.) are derived in GlobalStyles from the brand colors
+// and are not directly overridable.
+type CustomColors = Omit<
+  Colors,
+  "accent" | "accentStrong" | "accentMuted" | "surface"
+>;
+
 interface CustomTheme {
-  default?: Partial<Colors>;
-  dark?: Partial<Colors>;
+  default?: Partial<CustomColors>;
+  dark?: Partial<CustomColors>;
 }
 
 const customTheme = customThemeJson as CustomTheme;
@@ -31,7 +39,11 @@ const spacing: Spacing = {
   gridGap: { xs: "20px", lg: "40px" },
 };
 
-const colors: Colors = {
+// Resolved hex palettes for each mode. GlobalStyles emits these as CSS
+// custom properties on :root and :root.dark. Components never read these
+// directly — they read \`theme.colors.*\` which resolves to var(--color-…)
+// and lets the browser pick the right value based on the active class.
+export const colorsLight: CustomColors = {
   primaryLight: "#d1d5db",
   primary: "#556272",
   primaryDark: "#374151",
@@ -50,10 +62,12 @@ const colors: Colors = {
   info: "#06b6d4",
   dark: "#000000",
   light: "#ffffff",
-  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),
+  ...(customTheme.default
+    ? (customTheme.default as Partial<CustomColors>)
+    : {}),
 };
 
-const colorsDark: Colors = {
+export const colorsDark: CustomColors = {
   primaryLight: "#9ca3af",
   primary: "#6b7280",
   primaryDark: "#374151",
@@ -72,10 +86,10 @@ const colorsDark: Colors = {
   info: "#06b6d4",
   dark: "#ffffff",
   light: "#000000",
-  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),
+  ...(customTheme.dark ? (customTheme.dark as Partial<CustomColors>) : {}),
 };
 
-const shadows: Shadows = {
+export const shadowsLight: Shadows = {
   xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
   sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
   md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
@@ -83,7 +97,7 @@ const shadows: Shadows = {
   xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)",
 };
 
-const shadowsDark: Shadows = {
+export const shadowsDark: Shadows = {
   xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
   sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
   md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
@@ -153,6 +167,49 @@ const lineHeights: LineHeights = {
   inputSmall: { xs: "1", lg: "1" },
 };
 
+// Single theme object exported to consumers. Every color/shadow value is a
+// CSS custom-property reference; the browser resolves it against :root or
+// :root.dark depending on the active class. Components access these exactly
+// like before — \`theme.colors.primary\`, \`theme.shadows.sm\` — but the values
+// flip without React re-rendering.
+const colors: Colors = {
+  // Brand palette — directly customizable via theme.json's "default" / "dark".
+  primaryLight: "var(--color-primaryLight)",
+  primary: "var(--color-primary)",
+  primaryDark: "var(--color-primaryDark)",
+  secondaryLight: "var(--color-secondaryLight)",
+  secondary: "var(--color-secondary)",
+  secondaryDark: "var(--color-secondaryDark)",
+  tertiaryLight: "var(--color-tertiaryLight)",
+  tertiary: "var(--color-tertiary)",
+  tertiaryDark: "var(--color-tertiaryDark)",
+  grayLight: "var(--color-grayLight)",
+  gray: "var(--color-gray)",
+  grayDark: "var(--color-grayDark)",
+  success: "var(--color-success)",
+  error: "var(--color-error)",
+  warning: "var(--color-warning)",
+  info: "var(--color-info)",
+  dark: "var(--color-dark)",
+  light: "var(--color-light)",
+
+  // Semantic tokens — derived in GlobalStyles to capture the most common
+  // mode-aware swaps that components used to express via \`theme.isDark ? A : B\`.
+  // They follow the same single-noun convention as the brand palette.
+  accent: "var(--color-accent)",
+  accentStrong: "var(--color-accentStrong)",
+  accentMuted: "var(--color-accentMuted)",
+  surface: "var(--color-surface)",
+};
+
+const shadows: Shadows = {
+  xs: "var(--shadow-xs)",
+  sm: "var(--shadow-sm)",
+  md: "var(--shadow-md)",
+  lg: "var(--shadow-lg)",
+  xl: "var(--shadow-xl)",
+};
+
 export const theme: Theme = {
   breakpoints,
   spacing,
@@ -161,20 +218,14 @@ export const theme: Theme = {
   fonts,
   fontSizes,
   lineHeights,
+  // Stub for type compatibility with cherry-styled-components' Theme. Mode
+  // switching lives entirely in CSS vars flipped by :root.dark, so our own
+  // code never branches on this. Cherry's internal \`isDark ? … : …\` branches
+  // (e.g. buttonStyles' filled-button text) are handled where they surface
+  // by re-pinning to a mode-agnostic semantic token — see components/layout/Button.tsx.
   isDark: false,
 };
 
-export const themeDark: Theme = {
-  breakpoints,
-  spacing,
-  colors: colorsDark,
-  shadows: shadowsDark,
-  fonts,
-  fontSizes,
-  lineHeights,
-  isDark: true,
-};
-
 interface Breakpoints<TNumber = number> {
   xs: TNumber;
   sm: TNumber;
@@ -192,6 +243,11 @@ interface Spacing<TString = string> {
   gridGap: { xs: TString; lg: TString };
 }
 
+// Matches cherry-styled-components' Colors shape for the brand keys, plus a
+// handful of semantic tokens derived from the brand palette by GlobalStyles.
+// The brand keys (primaryLight…light) are customizable via theme.json; the
+// semantic keys (accent*, surface) are derived and not overridable — see
+// CustomColors above.
 interface Colors<TString = string> {
   primaryLight: TString;
   primary: TString;
@@ -216,6 +272,15 @@ interface Colors<TString = string> {
 
   dark: TString;
   light: TString;
+
+  /** High-contrast accent text. Was: isDark ? primaryLight : primaryDark. */
+  accent: TString;
+  /** Slightly stronger accent (lightened/darkened by ~10%). */
+  accentStrong: TString;
+  /** Muted body text. Was: isDark ? grayDark : primary. */
+  accentMuted: TString;
+  /** Elevated surface color, white-ish in both modes. Was: isDark ? dark : light. */
+  surface: TString;
 }
 
 interface Shadows<TString = string> {

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

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

package/dist/templates/components/Chat.js

@@ -8,7 +8,6 @@ import React, {
   useState,
 } from "react";
 import styled, { css, keyframes } from "styled-components";
-import { rgba } from "polished";
 import { Button } from "cherry-styled-components";
 import { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from "lucide-react";
 import remarkGfm from "remark-gfm";
@@ -166,13 +165,13 @@ const StyledRainbowInputWrapper = styled.div<{
     border-radius: 20px;
     background: conic-gradient(
       from var(--gradient-angle),
-      \${rgba("#ff6b6b", 0.4)},
-      \${rgba("#feca57", 0.4)},
-      \${rgba("#48dbfb", 0.4)},
-      \${rgba("#ff9ff3", 0.4)},
-      \${rgba("#54a0ff", 0.4)},
-      \${rgba("#5f27cd", 0.4)},
-      \${rgba("#ff6b6b", 0.4)}
+      #ff6b6b66,
+      #feca5766,
+      #48dbfb66,
+      #ff9ff366,
+      #54a0ff66,
+      #5f27cd66,
+      #ff6b6b66
     );
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -261,12 +260,14 @@ const StyledRainbowInput = styled.input<{ theme: Theme }>\`
   }
 
   &::placeholder {
-    color: \${({ theme }) => rgba(theme.colors.dark, 0.4)};
+    color: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.dark} 40%, transparent)\`};
     transition: color 0.3s ease;
   }
 
   &:focus::placeholder {
-    color: \${({ theme }) => rgba(theme.colors.dark, 0.6)};
+    color: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.dark} 60%, transparent)\`};
   }
 
   &:focus {
@@ -283,8 +284,7 @@ const StyledRainbowButton = styled(Button)<{
   position: relative;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.light};
+  color: \${({ theme }) => theme.colors.surface};
 
   &::before {
     content: "";
@@ -426,13 +426,13 @@ const StyledGlowSmallButton = styled(StyledSmallButton)<{
     border-radius: 14px;
     background: conic-gradient(
       from var(--gradient-angle),
-      \${rgba("#ff6b6b", 0.4)},
-      \${rgba("#feca57", 0.4)},
-      \${rgba("#48dbfb", 0.4)},
-      \${rgba("#ff9ff3", 0.4)},
-      \${rgba("#54a0ff", 0.4)},
-      \${rgba("#5f27cd", 0.4)},
-      \${rgba("#ff6b6b", 0.4)}
+      #ff6b6b66,
+      #feca5766,
+      #48dbfb66,
+      #ff9ff366,
+      #54a0ff66,
+      #5f27cd66,
+      #ff6b6b66
     );
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -471,8 +471,7 @@ const StyledGlowSmallButton = styled(StyledSmallButton)<{
 const StyledError = styled.div<{ theme: Theme }>\`
   overflow-x: auto;
   background: \${({ theme }) => theme.colors.error};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.light};
+  color: \${({ theme }) => theme.colors.surface};
   padding: 10px;
   border-radius: 8px;
   margin: 20px 0;
@@ -518,8 +517,7 @@ const StyledLoading = styled.div<{ theme: Theme }>\`
 const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
   overflow-x: auto;
   background: \${({ theme }) => theme.colors.primary};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.light};
+  color: \${({ theme }) => theme.colors.surface};
   padding: 10px;
   border-radius: 8px;
   margin: 20px 0;
@@ -539,7 +537,8 @@ const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
     \`}
 
   & code:not([class]) {
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
     color: \${({ theme }) => theme.colors.dark};
     padding: 2px 4px;
     border-radius: \${({ theme }) => theme.spacing.radius.xs};
@@ -630,7 +629,8 @@ const StyledSourceLink = styled(Link)<{ theme: Theme }>\`
   font-weight: 600;
   white-space: nowrap;
   min-width: fit-content;
-  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 10%, transparent)\`};
   padding: 6px 8px;
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   \${interactiveStyles};
@@ -640,8 +640,7 @@ const StyledSourceLink = styled(Link)<{ theme: Theme }>\`
   }
 
   &:hover {
-    color: \${({ theme }) =>
-      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+    color: \${({ theme }) => theme.colors.accent};
   }
 \`;
 

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

@@ -1 +1 @@
-export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Search } from \"lucide-react\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (slug: string) => void;\n}\n\nconst ANIMATION_MS = 150;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  background: ${({ theme }) =>\n    rgba(theme.isDark ? theme.colors.light : theme.colors.dark, 0.5)};\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  transition: background 0.15s ease;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      background: ${rgba(theme.colors.primaryLight, 0.2)};\n    `}\n\n  &:hover {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.15)};\n  }\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.35)};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledKbd = styled.kbd<{ theme: Theme }>`\n  font-size: 11px;\n  font-family: inherit;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: auto;\n  font-weight: 600;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: initial;\n  }\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n}: SearchModalContentProps) {\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={onCloseAnimationEnd}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          <StyledKbd>Esc</StyledKbd>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={() => navigate(result.page.slug)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";
+export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Search } from \"lucide-react\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (slug: string) => void;\n}\n\nconst ANIMATION_MS = 150;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  /* Backdrop is intentionally near-black in both modes \u2014 covers everything\n     behind the modal regardless of the user's theme. */\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  transition: background 0.15s ease;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      background: color-mix(\n        in srgb,\n        ${theme.colors.primaryLight} 20%,\n        transparent\n      );\n    `}\n\n  &:hover {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 15%, transparent)`};\n  }\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledKbd = styled.kbd<{ theme: Theme }>`\n  font-size: 11px;\n  font-family: inherit;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: auto;\n  font-weight: 600;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: initial;\n  }\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n}: SearchModalContentProps) {\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={onCloseAnimationEnd}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          <StyledKbd>Esc</StyledKbd>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={() => navigate(result.page.slug)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";