doccupine 0.0.99 → 0.0.101

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

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

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

@@ -44,6 +44,7 @@ When including code blocks in your response:
 Each context chunk includes a "URL:" line with the pre-computed page URL. Use it directly when linking:
 - Format links as markdown: [Page Title](/slug/).
 - Never expose raw file paths like "/app/.../page.tsx" to the user.
+- Never include route group segments in parentheses, like "(site)", in any link - they are internal folder names and do not exist in real URLs. Use "/code/" not "/(site)/code/".
 - Do NOT add a "Related Pages" section at the end - sources are shown separately by the UI.
 
 ## Greetings & Small Talk

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

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

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

@@ -154,7 +154,7 @@ const TopBarTitle = styled.span<{ theme: Theme }>\`
 
 /* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally
    with the thin scrollbar when the labels overflow the 33px bar. */
-const TabList = styled.div\`
+const TabList = styled.div<{ theme: Theme }>\`
   display: flex;
   align-items: center;
   gap: 2px;

package/dist/templates/package.js

@@ -17,7 +17,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
-        "cherry-styled-components": "^0.2.7",
+        "cherry-styled-components": "^0.2.8",
         langchain: "^1.5.2",
         "lucide-react": "^1.23.0",
         minisearch: "^7.2.0",

package/dist/templates/services/mcp/tools.d.ts

@@ -1 +1 @@
-export declare const mcpToolsTemplate = "import path from \"node:path\";\nimport fs from \"node:fs/promises\";\nimport type {\n  MCPToolDefinition,\n  DocsResource,\n  DocsChunk,\n  GetDocParams,\n  ListDocsParams,\n} from \"@/services/mcp/types\";\n\nconst APP_DIR = path.join(process.cwd(), \"app\");\nconst VALID_EXT = new Set([\".ts\", \".tsx\", \".js\", \".jsx\"]);\n\n/**\n * Tool definitions for MCP - these describe the available tools\n */\nexport const DOCS_TOOLS: MCPToolDefinition[] = [\n  {\n    name: \"search_docs\",\n    description:\n      \"Search through the documentation content using semantic search. Returns relevant chunks of documentation based on the query.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        query: {\n          type: \"string\",\n          description: \"The search query to find relevant documentation\",\n        },\n        limit: {\n          type: \"number\",\n          description: \"Maximum number of results to return (default: 6)\",\n        },\n      },\n      required: [\"query\"],\n    },\n  },\n  {\n    name: \"get_doc\",\n    description:\n      \"Get the full content of a specific documentation page by its path.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        path: {\n          type: \"string\",\n          description:\n            \"The file path to the documentation page (e.g., 'app/getting-started/page.tsx')\",\n        },\n      },\n      required: [\"path\"],\n    },\n  },\n  {\n    name: \"list_docs\",\n    description:\n      \"List all available documentation pages, optionally filtered by directory.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        directory: {\n          type: \"string\",\n          description:\n            \"Optional directory to filter results (e.g., 'components')\",\n        },\n      },\n    },\n  },\n];\n\n/**\n * Recursively walk directory to find documentation files\n */\nasync function* walkDocs(dir: string): AsyncGenerator<string> {\n  const entries = await fs.readdir(dir, { withFileTypes: true });\n  for (const entry of entries) {\n    const fullPath = path.join(dir, entry.name);\n    if (entry.isDirectory()) {\n      if ([\"node_modules\", \".next\", \".git\", \"api\"].includes(entry.name)) {\n        continue;\n      }\n      yield* walkDocs(fullPath);\n    } else {\n      const ext = path.extname(entry.name).toLowerCase();\n      if (VALID_EXT.has(ext) && entry.name.startsWith(\"page.\")) {\n        yield fullPath;\n      }\n    }\n  }\n}\n\n/**\n * Extract content blocks from a file\n */\nfunction extractContentBlocks(fileText: string): string[] {\n  const results: string[] = [];\n\n  const tplRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*`((?:\\\\`|[^`])*)`\\s*;/g;\n  let m: RegExpExecArray | null;\n  while ((m = tplRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  const sglRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*'([^']*)'\\s*;/g;\n  while ((m = sglRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  const dblRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*\"([^\"]*)\"\\s*;/g;\n  while ((m = dblRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  return results;\n}\n\n/**\n * Get the title from markdown content\n */\nfunction extractTitle(content: string): string {\n  const match = content.match(/^#\\s+(.+)$/m);\n  return match ? match[1].trim() : \"Untitled\";\n}\n\n/**\n * List all documentation resources\n */\nexport async function listDocs(\n  params?: ListDocsParams,\n): Promise<DocsResource[]> {\n  const resources: DocsResource[] = [];\n  const filterDir = params?.directory;\n\n  for await (const filePath of walkDocs(APP_DIR)) {\n    const relativePath = path.join(\"app\", path.relative(APP_DIR, filePath));\n\n    if (filterDir && !relativePath.includes(filterDir)) {\n      continue;\n    }\n\n    try {\n      const fileContent = await fs.readFile(filePath, \"utf8\");\n      const blocks = extractContentBlocks(fileContent);\n      const content = blocks.join(\"\\n\\n\");\n      const title = extractTitle(content);\n      const docPath = path.dirname(relativePath).replace(/^app\\/?/, \"\") || \"/\";\n\n      resources.push({\n        uri: `docs://${docPath}`,\n        name: title,\n        path: relativePath,\n        content,\n      });\n    } catch (error) {\n      console.warn(`Failed to read doc file: ${filePath}`, error);\n    }\n  }\n\n  return resources;\n}\n\n/**\n * Get a specific documentation page\n */\nexport async function getDoc(\n  params: GetDocParams,\n): Promise<DocsResource | null> {\n  let targetPath = params.path;\n\n  // Normalize path - strip leading \"app/\" if present to get the relative part\n  const relativePart = targetPath.replace(/^app\\//, \"\");\n  if (!relativePart.includes(\"page.\")) {\n    targetPath = path.join(\"app\", relativePart, \"page.tsx\");\n  } else if (!targetPath.startsWith(\"app/\")) {\n    targetPath = path.join(\"app\", relativePart);\n  }\n\n  const fullPath = path.join(APP_DIR, targetPath.replace(/^app\\//, \"\"));\n\n  // Prevent path traversal\n  const resolvedPath = path.resolve(fullPath);\n  if (!resolvedPath.startsWith(path.resolve(APP_DIR))) {\n    return null;\n  }\n\n  try {\n    const fileContent = await fs.readFile(fullPath, \"utf8\");\n    const blocks = extractContentBlocks(fileContent);\n    const content = blocks.join(\"\\n\\n\");\n    const title = extractTitle(content);\n    const docPath = path.dirname(targetPath).replace(/^app\\/?/, \"\") || \"/\";\n\n    return {\n      uri: `docs://${docPath}`,\n      name: title,\n      path: targetPath,\n      content,\n    };\n  } catch (error) {\n    console.warn(`Failed to read doc: ${targetPath}`, error);\n    return null;\n  }\n}\n\n/**\n * Chunk text for embeddings.\n * - chunkSize=800 chars balances granularity with embedding context window limits\n * - overlap=100 chars ensures continuity so searches don't miss content at chunk boundaries\n */\nfunction chunkText(text: string, chunkSize = 800, overlap = 100): string[] {\n  const chunks: string[] = [];\n  let i = 0;\n  while (i < text.length) {\n    const end = Math.min(i + chunkSize, text.length);\n    chunks.push(text.slice(i, end));\n    if (end === text.length) break;\n    i = end - overlap;\n    if (i < 0) i = 0;\n  }\n  return chunks;\n}\n\n/**\n * Get all documentation chunks for indexing\n */\nexport async function getAllDocsChunks(): Promise<DocsChunk[]> {\n  const allChunks: DocsChunk[] = [];\n  const docs = await listDocs();\n\n  for (const doc of docs) {\n    const cleanContent = doc.content\n      .replace(/\\r\\n/g, \"\\n\")\n      .replace(/\\n{3,}/g, \"\\n\\n\")\n      .slice(0, 200_000);\n\n    const textChunks = chunkText(cleanContent);\n    for (let i = 0; i < textChunks.length; i++) {\n      allChunks.push({\n        id: `${doc.path}:${i}`,\n        text: textChunks[i],\n        path: doc.path,\n        uri: doc.uri,\n      });\n    }\n  }\n\n  return allChunks;\n}\n";
+export declare const mcpToolsTemplate = "import path from \"node:path\";\nimport fs from \"node:fs/promises\";\nimport type {\n  MCPToolDefinition,\n  DocsResource,\n  DocsChunk,\n  GetDocParams,\n  ListDocsParams,\n} from \"@/services/mcp/types\";\n\nconst APP_DIR = path.join(process.cwd(), \"app\");\nconst VALID_EXT = new Set([\".ts\", \".tsx\", \".js\", \".jsx\"]);\n\n/**\n * Tool definitions for MCP - these describe the available tools\n */\nexport const DOCS_TOOLS: MCPToolDefinition[] = [\n  {\n    name: \"search_docs\",\n    description:\n      \"Search through the documentation content using semantic search. Returns relevant chunks of documentation based on the query.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        query: {\n          type: \"string\",\n          description: \"The search query to find relevant documentation\",\n        },\n        limit: {\n          type: \"number\",\n          description: \"Maximum number of results to return (default: 6)\",\n        },\n      },\n      required: [\"query\"],\n    },\n  },\n  {\n    name: \"get_doc\",\n    description:\n      \"Get the full content of a specific documentation page by its path.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        path: {\n          type: \"string\",\n          description:\n            \"The file path to the documentation page (e.g., 'app/getting-started/page.tsx')\",\n        },\n      },\n      required: [\"path\"],\n    },\n  },\n  {\n    name: \"list_docs\",\n    description:\n      \"List all available documentation pages, optionally filtered by directory.\",\n    inputSchema: {\n      type: \"object\",\n      properties: {\n        directory: {\n          type: \"string\",\n          description:\n            \"Optional directory to filter results (e.g., 'components')\",\n        },\n      },\n    },\n  },\n];\n\n/**\n * Recursively walk directory to find documentation files\n */\nasync function* walkDocs(dir: string): AsyncGenerator<string> {\n  const entries = await fs.readdir(dir, { withFileTypes: true });\n  for (const entry of entries) {\n    const fullPath = path.join(dir, entry.name);\n    if (entry.isDirectory()) {\n      if ([\"node_modules\", \".next\", \".git\", \"api\"].includes(entry.name)) {\n        continue;\n      }\n      yield* walkDocs(fullPath);\n    } else {\n      const ext = path.extname(entry.name).toLowerCase();\n      if (VALID_EXT.has(ext) && entry.name.startsWith(\"page.\")) {\n        yield fullPath;\n      }\n    }\n  }\n}\n\n/**\n * Extract content blocks from a file\n */\nfunction extractContentBlocks(fileText: string): string[] {\n  const results: string[] = [];\n\n  const tplRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*`((?:\\\\`|[^`])*)`\\s*;/g;\n  let m: RegExpExecArray | null;\n  while ((m = tplRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  const sglRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*'([^']*)'\\s*;/g;\n  while ((m = sglRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  const dblRegex = /(?:export\\s+)?const\\s+content\\s*=\\s*\"([^\"]*)\"\\s*;/g;\n  while ((m = dblRegex.exec(fileText)) !== null) {\n    results.push(m[1]);\n  }\n\n  return results;\n}\n\n/**\n * Convert a page file path to its URL path, stripping the leading \"app/\"\n * and Next.js route group segments like \"(site)\" which never appear in URLs.\n */\nfunction toDocPath(pagePath: string): string {\n  return (\n    path\n      .dirname(pagePath)\n      .replace(/^app\\/?/, \"\")\n      .split(\"/\")\n      .filter((seg) => !(seg.startsWith(\"(\") && seg.endsWith(\")\")))\n      .join(\"/\") || \"/\"\n  );\n}\n\n/**\n * Get the title from markdown content\n */\nfunction extractTitle(content: string): string {\n  const match = content.match(/^#\\s+(.+)$/m);\n  return match ? match[1].trim() : \"Untitled\";\n}\n\n/**\n * List all documentation resources\n */\nexport async function listDocs(\n  params?: ListDocsParams,\n): Promise<DocsResource[]> {\n  const resources: DocsResource[] = [];\n  const filterDir = params?.directory;\n\n  for await (const filePath of walkDocs(APP_DIR)) {\n    const relativePath = path.join(\"app\", path.relative(APP_DIR, filePath));\n\n    if (filterDir && !relativePath.includes(filterDir)) {\n      continue;\n    }\n\n    try {\n      const fileContent = await fs.readFile(filePath, \"utf8\");\n      const blocks = extractContentBlocks(fileContent);\n      const content = blocks.join(\"\\n\\n\");\n      const title = extractTitle(content);\n      const docPath = toDocPath(relativePath);\n\n      resources.push({\n        uri: `docs://${docPath}`,\n        name: title,\n        path: relativePath,\n        content,\n      });\n    } catch (error) {\n      console.warn(`Failed to read doc file: ${filePath}`, error);\n    }\n  }\n\n  return resources;\n}\n\n/**\n * Get a specific documentation page\n */\nexport async function getDoc(\n  params: GetDocParams,\n): Promise<DocsResource | null> {\n  let targetPath = params.path;\n\n  // Normalize path - strip leading \"app/\" if present to get the relative part\n  const relativePart = targetPath.replace(/^app\\//, \"\");\n  if (!relativePart.includes(\"page.\")) {\n    targetPath = path.join(\"app\", relativePart, \"page.tsx\");\n  } else if (!targetPath.startsWith(\"app/\")) {\n    targetPath = path.join(\"app\", relativePart);\n  }\n\n  const fullPath = path.join(APP_DIR, targetPath.replace(/^app\\//, \"\"));\n\n  // Prevent path traversal\n  const resolvedPath = path.resolve(fullPath);\n  if (!resolvedPath.startsWith(path.resolve(APP_DIR))) {\n    return null;\n  }\n\n  try {\n    const fileContent = await fs.readFile(fullPath, \"utf8\");\n    const blocks = extractContentBlocks(fileContent);\n    const content = blocks.join(\"\\n\\n\");\n    const title = extractTitle(content);\n    const docPath = toDocPath(targetPath);\n\n    return {\n      uri: `docs://${docPath}`,\n      name: title,\n      path: targetPath,\n      content,\n    };\n  } catch (error) {\n    console.warn(`Failed to read doc: ${targetPath}`, error);\n    return null;\n  }\n}\n\n/**\n * Chunk text for embeddings.\n * - chunkSize=800 chars balances granularity with embedding context window limits\n * - overlap=100 chars ensures continuity so searches don't miss content at chunk boundaries\n */\nfunction chunkText(text: string, chunkSize = 800, overlap = 100): string[] {\n  const chunks: string[] = [];\n  let i = 0;\n  while (i < text.length) {\n    const end = Math.min(i + chunkSize, text.length);\n    chunks.push(text.slice(i, end));\n    if (end === text.length) break;\n    i = end - overlap;\n    if (i < 0) i = 0;\n  }\n  return chunks;\n}\n\n/**\n * Get all documentation chunks for indexing\n */\nexport async function getAllDocsChunks(): Promise<DocsChunk[]> {\n  const allChunks: DocsChunk[] = [];\n  const docs = await listDocs();\n\n  for (const doc of docs) {\n    const cleanContent = doc.content\n      .replace(/\\r\\n/g, \"\\n\")\n      .replace(/\\n{3,}/g, \"\\n\\n\")\n      .slice(0, 200_000);\n\n    const textChunks = chunkText(cleanContent);\n    for (let i = 0; i < textChunks.length; i++) {\n      allChunks.push({\n        id: `${doc.path}:${i}`,\n        text: textChunks[i],\n        path: doc.path,\n        uri: doc.uri,\n      });\n    }\n  }\n\n  return allChunks;\n}\n";

package/dist/templates/services/mcp/tools.js

@@ -113,6 +113,21 @@ function extractContentBlocks(fileText: string): string[] {
   return results;
 }
 
+/**
+ * Convert a page file path to its URL path, stripping the leading "app/"
+ * and Next.js route group segments like "(site)" which never appear in URLs.
+ */
+function toDocPath(pagePath: string): string {
+  return (
+    path
+      .dirname(pagePath)
+      .replace(/^app\\/?/, "")
+      .split("/")
+      .filter((seg) => !(seg.startsWith("(") && seg.endsWith(")")))
+      .join("/") || "/"
+  );
+}
+
 /**
  * Get the title from markdown content
  */
@@ -142,7 +157,7 @@ export async function listDocs(
       const blocks = extractContentBlocks(fileContent);
       const content = blocks.join("\\n\\n");
       const title = extractTitle(content);
-      const docPath = path.dirname(relativePath).replace(/^app\\/?/, "") || "/";
+      const docPath = toDocPath(relativePath);
 
       resources.push({
         uri: \`docs://\${docPath}\`,
@@ -187,7 +202,7 @@ export async function getDoc(
     const blocks = extractContentBlocks(fileContent);
     const content = blocks.join("\\n\\n");
     const title = extractTitle(content);
-    const docPath = path.dirname(targetPath).replace(/^app\\/?/, "") || "/";
+    const docPath = toDocPath(targetPath);
 
     return {
       uri: \`docs://\${docPath}\`,

package/package.json

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