doccupine 0.0.80 → 0.0.81

package/dist/lib/layout.js

@@ -134,7 +134,7 @@ ${hasSections
         <StyledComponentsRegistry>
 ${analyticsEnabled ? "          <PostHogProvider>\n" : ""}${a}          <CherryThemeProvider theme={theme} themeDark={themeDark}>
 ${a}            ${chtOpen}
-${a}              <SearchProvider pages={pages}>
+${a}              <SearchProvider pages={pages} sections={doccupineSections}>
 ${a}                <Header>
 ${a}                  <SectionBar sections={doccupineSections} />
 ${a}                </Header>

package/dist/lib/structures.js

@@ -7,6 +7,7 @@ import { prettierignoreTemplate } from "../templates/prettierignore.js";
 import { tsconfigTemplate } from "../templates/tsconfig.js";
 import { mcpRoutesTemplate } from "../templates/app/api/mcp/route.js";
 import { ragRoutesTemplate } from "../templates/app/api/rag/route.js";
+import { searchRoutesTemplate } from "../templates/app/api/search/route.js";
 import { routesTemplate } from "../templates/app/api/theme/routes.js";
 import { notFoundTemplate } from "../templates/app/not-found.js";
 import { themeTemplate } from "../templates/app/theme.js";
@@ -20,6 +21,7 @@ import { sectionNavProviderTemplate } from "../templates/components/SectionNavPr
 import { postHogProviderTemplate } from "../templates/components/PostHogProvider.js";
 import { searchDocsTemplate } from "../templates/components/SearchDocs.js";
 import { sideBarTemplate } from "../templates/components/SideBar.js";
+import { spinnerTemplate } from "../templates/components/Spinner.js";
 import { sectionBarTemplate } from "../templates/components/layout/SectionBar.js";
 import { accordionTemplate } from "../templates/components/layout/Accordion.js";
 import { actionBarTemplate } from "../templates/components/layout/ActionBar.js";
@@ -47,6 +49,7 @@ import { tabsTemplate } from "../templates/components/layout/Tabs.js";
 import { themeToggleTemplate } from "../templates/components/layout/ThemeToggle.js";
 import { typographyTemplate } from "../templates/components/layout/Typography.js";
 import { updateTemplate } from "../templates/components/layout/Update.js";
+import { searchServiceTemplate } from "../templates/services/search.js";
 import { mcpIndexTemplate } from "../templates/services/mcp/index.js";
 import { mcpServerTemplate } from "../templates/services/mcp/server.js";
 import { mcpToolsTemplate } from "../templates/services/mcp/tools.js";
@@ -118,7 +121,9 @@ export const appStructure = {
     "app/theme.ts": themeTemplate,
     "app/api/mcp/route.ts": mcpRoutesTemplate,
     "app/api/rag/route.ts": ragRoutesTemplate,
+    "app/api/search/route.ts": searchRoutesTemplate,
     "app/api/theme/route.ts": routesTemplate,
+    "services/search.ts": searchServiceTemplate,
     "services/mcp/index.ts": mcpIndexTemplate,
     "services/mcp/server.ts": mcpServerTemplate,
     "services/mcp/tools.ts": mcpToolsTemplate,
@@ -143,6 +148,7 @@ export const appStructure = {
     "components/PostHogProvider.tsx": postHogProviderTemplate,
     "components/SearchDocs.tsx": searchDocsTemplate,
     "components/SideBar.tsx": sideBarTemplate,
+    "components/Spinner.tsx": spinnerTemplate,
     "components/layout/Accordion.tsx": accordionTemplate,
     "components/layout/ActionBar.tsx": actionBarTemplate,
     "components/layout/Button.tsx": buttonTemplate,

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

@@ -0,0 +1 @@
+export declare const searchRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { searchContent } from \"@/services/search\";\n\nconst searchSchema = z.object({\n  q: z.string().min(1).max(200),\n  limit: z.coerce.number().int().min(1).max(30).optional(),\n});\n\nexport async function GET(req: Request) {\n  const url = new URL(req.url);\n  const limitParam = url.searchParams.get(\"limit\");\n  const parsed = searchSchema.safeParse({\n    q: url.searchParams.get(\"q\"),\n    ...(limitParam != null && { limit: limitParam }),\n  });\n\n  if (!parsed.success) {\n    return NextResponse.json(\n      { error: \"Invalid query\", details: parsed.error.issues },\n      { status: 400 },\n    );\n  }\n\n  const results = await searchContent(parsed.data.q, parsed.data.limit ?? 10);\n  return NextResponse.json({ results });\n}\n";

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

@@ -0,0 +1,28 @@
+export const searchRoutesTemplate = `import { NextResponse } from "next/server";
+import { z } from "zod";
+import { searchContent } from "@/services/search";
+
+const searchSchema = z.object({
+  q: z.string().min(1).max(200),
+  limit: z.coerce.number().int().min(1).max(30).optional(),
+});
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const limitParam = url.searchParams.get("limit");
+  const parsed = searchSchema.safeParse({
+    q: url.searchParams.get("q"),
+    ...(limitParam != null && { limit: limitParam }),
+  });
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid query", details: parsed.error.issues },
+      { status: 400 },
+    );
+  }
+
+  const results = await searchContent(parsed.data.q, parsed.data.limit ?? 10);
+  return NextResponse.json({ results });
+}
+`;

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

@@ -1 +1 @@
-export declare const searchDocsTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Search } from \"lucide-react\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\ninterface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\ninterface SearchContextValue {\n  openSearch: () => void;\n}\n\nconst SearchContext = createContext<SearchContextValue>({\n  openSearch: () => {},\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.xl};\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  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: 0;\n  padding: 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 StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px;\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\nconst StyledSearchButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: ${({ theme }) => theme.colors.light};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 7px 8px;\n  font-family: inherit;\n  cursor: pointer;\n\n  ${mq(\"lg\")} {\n    padding: 5px 8px;\n  }\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n\nfunction SearchProvider({\n  pages,\n  children,\n}: {\n  pages: PageItem[];\n  children: React.ReactNode;\n}) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const resultsRef = useRef<HTMLUListElement>(null);\n  const closingTimer = useRef<ReturnType<typeof setTimeout>>(null);\n  const router = useRouter();\n\n  const openSearch = useCallback(() => {\n    if (closingTimer.current) clearTimeout(closingTimer.current);\n    setIsClosing(false);\n    setIsVisible(true);\n  }, []);\n\n  const closeSearch = useCallback(() => {\n    setIsClosing(true);\n    closingTimer.current = setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n      setQuery(\"\");\n      setActiveIndex(0);\n    }, ANIMATION_MS);\n  }, []);\n\n  const filtered = useMemo(() => {\n    if (!query.trim()) return pages;\n    const q = query.toLowerCase();\n    return pages.filter(\n      (p) =>\n        p.title.toLowerCase().includes(q) ||\n        p.description?.toLowerCase().includes(q),\n    );\n  }, [pages, query]);\n\n  const navigate = useCallback(\n    (slug: string) => {\n      closeSearch();\n      router.push(`/${slug}`);\n    },\n    [closeSearch, router],\n  );\n\n  // Global Cmd+K / Ctrl+K listener\n  const isVisibleRef = useRef(false);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n  }, [isVisible]);\n\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        if (isVisibleRef.current) {\n          closeSearch();\n        } else {\n          openSearch();\n        }\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [closeSearch, openSearch]);\n\n  // Focus input on open\n  useEffect(() => {\n    if (isVisible && !isClosing) {\n      setTimeout(() => inputRef.current?.focus(), 10);\n    }\n  }, [isVisible, isClosing]);\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!resultsRef.current) return;\n    const active = resultsRef.current.children[activeIndex] as HTMLElement;\n    active?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i < filtered.length - 1 ? i + 1 : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i > 0 ? i - 1 : filtered.length - 1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (filtered[activeIndex]) {\n        navigate(filtered[activeIndex].slug);\n      }\n    } else if (e.key === \"Escape\") {\n      closeSearch();\n    }\n  }\n\n  return (\n    <SearchContext.Provider value={{ openSearch }}>\n      {children}\n      {isVisible && (\n        <StyledBackdrop $isClosing={isClosing} onClick={closeSearch}>\n          <StyledModal\n            $isClosing={isClosing}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <StyledInputWrapper>\n              <Search size={18} />\n              <StyledInput\n                ref={inputRef}\n                value={query}\n                onChange={(e) => {\n                  setQuery(e.target.value);\n                  setActiveIndex(0);\n                }}\n                onKeyDown={handleKeyDown}\n                placeholder=\"Search docs...\"\n                autoComplete=\"off\"\n                spellCheck={false}\n              />\n              <StyledKbd>esc</StyledKbd>\n            </StyledInputWrapper>\n            {filtered.length > 0 ? (\n              <StyledResults ref={resultsRef}>\n                {filtered.map((page, index) => (\n                  <StyledResultItem\n                    key={page.slug + page.section}\n                    $isActive={index === activeIndex}\n                    onClick={() => navigate(page.slug)}\n                    onMouseEnter={() => setActiveIndex(index)}\n                  >\n                    <StyledResultTitle>{page.title}</StyledResultTitle>\n                    <StyledResultMeta>\n                      {page.section ? `${page.section} / ` : \"\"}\n                      {page.category}\n                    </StyledResultMeta>\n                  </StyledResultItem>\n                ))}\n              </StyledResults>\n            ) : (\n              <StyledEmpty>No results found</StyledEmpty>\n            )}\n          </StyledModal>\n        </StyledBackdrop>\n      )}\n    </SearchContext.Provider>\n  );\n}\n\nexport {\n  SearchProvider,\n  SearchContext,\n  StyledKbd as SearchKbd,\n  StyledSearchButton,\n};\n";
+export declare const searchDocsTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Search } from \"lucide-react\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { Spinner } from \"@/components/Spinner\";\n\ninterface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\ninterface SectionItem {\n  label: string;\n  slug: string;\n}\n\ninterface ContentHit {\n  slug: string;\n  snippet: string;\n}\n\ninterface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\ninterface SearchContextValue {\n  openSearch: () => void;\n}\n\nconst SearchContext = createContext<SearchContextValue>({\n  openSearch: () => {},\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\nconst StyledSearchButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: ${({ theme }) => theme.colors.light};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 7px 8px;\n  font-family: inherit;\n  cursor: pointer;\n\n  ${mq(\"lg\")} {\n    padding: 5px 8px;\n  }\n\n  & svg.lucide {\n    color: inherit;\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\nfunction SearchProvider({\n  pages,\n  sections,\n  children,\n}: {\n  pages: PageItem[];\n  sections?: SectionItem[];\n  children: React.ReactNode;\n}) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [contentResults, setContentResults] = useState<ContentHit[]>([]);\n  const [isSearching, setIsSearching] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const resultsRef = useRef<HTMLUListElement>(null);\n  const closingTimer = useRef<ReturnType<typeof setTimeout>>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const router = useRouter();\n\n  const sectionLabels = useMemo(() => {\n    const map: Record<string, string> = {};\n    sections?.forEach((s) => {\n      map[s.slug] = s.label;\n    });\n    return map;\n  }, [sections]);\n\n  const openSearch = useCallback(() => {\n    if (closingTimer.current) clearTimeout(closingTimer.current);\n    setIsClosing(false);\n    setIsVisible(true);\n  }, []);\n\n  const closeSearch = useCallback(() => {\n    setIsClosing(true);\n    if (abortRef.current) abortRef.current.abort();\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    closingTimer.current = setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n      setQuery(\"\");\n      setActiveIndex(0);\n      setContentResults([]);\n      setIsSearching(false);\n    }, ANIMATION_MS);\n  }, []);\n\n  // Instant title/description filtering\n  const titleFiltered = useMemo(() => {\n    if (!query.trim()) return pages;\n    const q = query.toLowerCase();\n    return pages.filter(\n      (p) =>\n        p.title.toLowerCase().includes(q) ||\n        p.description?.toLowerCase().includes(q),\n    );\n  }, [pages, query]);\n\n  // Merge title matches with content matches\n  const merged = useMemo<MergedResult[]>(() => {\n    if (!query.trim()) {\n      return pages.map((p) => ({ page: p }));\n    }\n\n    const titleMatchSlugs = new Set(titleFiltered.map((p) => p.slug));\n    const titleMatches: MergedResult[] = titleFiltered.map((p) => {\n      const hit = contentResults.find((cr) => cr.slug === p.slug);\n      return { page: p, snippet: hit?.snippet };\n    });\n\n    const pageMap = new Map(pages.map((p) => [p.slug, p]));\n    const contentOnly: MergedResult[] = [];\n    for (const cr of contentResults) {\n      if (!titleMatchSlugs.has(cr.slug)) {\n        const page = pageMap.get(cr.slug);\n        if (page) {\n          contentOnly.push({ page, snippet: cr.snippet });\n        }\n      }\n    }\n\n    return [...titleMatches, ...contentOnly];\n  }, [pages, query, titleFiltered, contentResults]);\n\n  // Debounced content search\n  useEffect(() => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (abortRef.current) abortRef.current.abort();\n\n    const q = query.trim();\n    if (q.length < 2) {\n      setContentResults([]);\n      setIsSearching(false);\n      return;\n    }\n\n    setIsSearching(true);\n    debounceRef.current = setTimeout(async () => {\n      const controller = new AbortController();\n      abortRef.current = controller;\n      try {\n        const res = await fetch(\n          `/api/search?q=${encodeURIComponent(q)}&limit=15`,\n          { signal: controller.signal },\n        );\n        if (!res.ok) throw new Error(\"Search failed\");\n        const data = await res.json();\n        setContentResults(data.results ?? []);\n      } catch (err: unknown) {\n        if (err instanceof DOMException && err.name === \"AbortError\") return;\n        setContentResults([]);\n      } finally {\n        if (!controller.signal.aborted) {\n          setIsSearching(false);\n        }\n      }\n    }, 300);\n\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n    };\n  }, [query]);\n\n  const navigate = useCallback(\n    (slug: string) => {\n      closeSearch();\n      router.push(`/${slug}`);\n    },\n    [closeSearch, router],\n  );\n\n  // Global Cmd+K / Ctrl+K listener\n  const isVisibleRef = useRef(false);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n  }, [isVisible]);\n\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        if (isVisibleRef.current) {\n          closeSearch();\n        } else {\n          openSearch();\n        }\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [closeSearch, openSearch]);\n\n  // Focus input on open\n  useEffect(() => {\n    if (isVisible && !isClosing) {\n      setTimeout(() => inputRef.current?.focus(), 10);\n    }\n  }, [isVisible, isClosing]);\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!resultsRef.current) return;\n    const active = resultsRef.current.children[activeIndex] as HTMLElement;\n    active?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i < merged.length - 1 ? i + 1 : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i > 0 ? i - 1 : merged.length - 1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (merged[activeIndex]) {\n        navigate(merged[activeIndex].page.slug);\n      }\n    } else if (e.key === \"Escape\") {\n      closeSearch();\n    }\n  }\n\n  return (\n    <SearchContext.Provider value={{ openSearch }}>\n      {children}\n      {isVisible && (\n        <StyledBackdrop $isClosing={isClosing} onClick={closeSearch}>\n          <StyledModal\n            $isClosing={isClosing}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <StyledInputWrapper>\n              <Search size={18} />\n              <StyledInput\n                ref={inputRef}\n                value={query}\n                onChange={(e) => {\n                  setQuery(e.target.value);\n                  setActiveIndex(0);\n                }}\n                onKeyDown={handleKeyDown}\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    </SearchContext.Provider>\n  );\n}\n\nexport {\n  SearchProvider,\n  SearchContext,\n  StyledKbd as SearchKbd,\n  StyledSearchButton,\n};\n";

package/dist/templates/components/SearchDocs.js

@@ -13,6 +13,7 @@ import { rgba } from "polished";
 import { Search } from "lucide-react";
 import { mq, Theme } from "@/app/theme";
 import { interactiveStyles } from "@/components/layout/SharedStyled";
+import { Spinner } from "@/components/Spinner";
 
 interface PageItem {
   slug: string;
@@ -22,6 +23,21 @@ interface PageItem {
   section?: string;
 }
 
+interface SectionItem {
+  label: string;
+  slug: string;
+}
+
+interface ContentHit {
+  slug: string;
+  snippet: string;
+}
+
+interface MergedResult {
+  page: PageItem;
+  snippet?: string;
+}
+
 interface SearchContextValue {
   openSearch: () => void;
 }
@@ -75,13 +91,14 @@ const StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>\`
 const StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>\`
   background: \${({ theme }) => theme.colors.light};
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  box-shadow: \${({ theme }) => theme.shadows.xl};
+  box-shadow: \${({ theme }) => theme.shadows.xs};
   width: 100%;
   max-width: 560px;
   max-height: calc(100dvh - 40px);
   display: flex;
   flex-direction: column;
   border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  padding-bottom: 8px;
   animation: \${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}
     \${ANIMATION_MS}ms ease forwards;
 
@@ -121,8 +138,8 @@ const StyledInput = styled.input<{ theme: Theme }>\`
 
 const StyledResults = styled.ul<{ theme: Theme }>\`
   list-style: none;
-  margin: 0;
-  padding: 8px;
+  margin: 8px 0 0 0;
+  padding: 0 8px;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
@@ -164,8 +181,30 @@ const StyledResultMeta = styled.span<{ theme: Theme }>\`
   margin-top: 2px;
 \`;
 
+const StyledSnippet = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.grayDark};
+  display: block;
+  margin-top: 4px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  & mark {
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.35)};
+    color: inherit;
+    border-radius: 4px;
+    padding: 0 1px;
+  }
+\`;
+
 const StyledEmpty = styled.div<{ theme: Theme }>\`
-  padding: 20px;
+  padding: 20px 20px 12px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
   color: \${({ theme }) => theme.colors.gray};
@@ -209,22 +248,55 @@ const StyledSearchButton = styled.button<{ theme: Theme }>\`
   }
 \`;
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function highlightMatch(snippet: string, query: string): string {
+  const escaped = escapeHtml(snippet);
+  if (!query.trim()) return escaped;
+  const q = escapeHtml(query.trim());
+  const regex = new RegExp(
+    \`(\${q.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&")})\`,
+    "gi",
+  );
+  return escaped.replace(regex, "<mark>$1</mark>");
+}
+
 function SearchProvider({
   pages,
+  sections,
   children,
 }: {
   pages: PageItem[];
+  sections?: SectionItem[];
   children: React.ReactNode;
 }) {
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(0);
+  const [contentResults, setContentResults] = useState<ContentHit[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLUListElement>(null);
   const closingTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
   const router = useRouter();
 
+  const sectionLabels = useMemo(() => {
+    const map: Record<string, string> = {};
+    sections?.forEach((s) => {
+      map[s.slug] = s.label;
+    });
+    return map;
+  }, [sections]);
+
   const openSearch = useCallback(() => {
     if (closingTimer.current) clearTimeout(closingTimer.current);
     setIsClosing(false);
@@ -233,15 +305,20 @@ function SearchProvider({
 
   const closeSearch = useCallback(() => {
     setIsClosing(true);
+    if (abortRef.current) abortRef.current.abort();
+    if (debounceRef.current) clearTimeout(debounceRef.current);
     closingTimer.current = setTimeout(() => {
       setIsVisible(false);
       setIsClosing(false);
       setQuery("");
       setActiveIndex(0);
+      setContentResults([]);
+      setIsSearching(false);
     }, ANIMATION_MS);
   }, []);
 
-  const filtered = useMemo(() => {
+  // Instant title/description filtering
+  const titleFiltered = useMemo(() => {
     if (!query.trim()) return pages;
     const q = query.toLowerCase();
     return pages.filter(
@@ -251,6 +328,71 @@ function SearchProvider({
     );
   }, [pages, query]);
 
+  // Merge title matches with content matches
+  const merged = useMemo<MergedResult[]>(() => {
+    if (!query.trim()) {
+      return pages.map((p) => ({ page: p }));
+    }
+
+    const titleMatchSlugs = new Set(titleFiltered.map((p) => p.slug));
+    const titleMatches: MergedResult[] = titleFiltered.map((p) => {
+      const hit = contentResults.find((cr) => cr.slug === p.slug);
+      return { page: p, snippet: hit?.snippet };
+    });
+
+    const pageMap = new Map(pages.map((p) => [p.slug, p]));
+    const contentOnly: MergedResult[] = [];
+    for (const cr of contentResults) {
+      if (!titleMatchSlugs.has(cr.slug)) {
+        const page = pageMap.get(cr.slug);
+        if (page) {
+          contentOnly.push({ page, snippet: cr.snippet });
+        }
+      }
+    }
+
+    return [...titleMatches, ...contentOnly];
+  }, [pages, query, titleFiltered, contentResults]);
+
+  // Debounced content search
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (abortRef.current) abortRef.current.abort();
+
+    const q = query.trim();
+    if (q.length < 2) {
+      setContentResults([]);
+      setIsSearching(false);
+      return;
+    }
+
+    setIsSearching(true);
+    debounceRef.current = setTimeout(async () => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const res = await fetch(
+          \`/api/search?q=\${encodeURIComponent(q)}&limit=15\`,
+          { signal: controller.signal },
+        );
+        if (!res.ok) throw new Error("Search failed");
+        const data = await res.json();
+        setContentResults(data.results ?? []);
+      } catch (err: unknown) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setContentResults([]);
+      } finally {
+        if (!controller.signal.aborted) {
+          setIsSearching(false);
+        }
+      }
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query]);
+
   const navigate = useCallback(
     (slug: string) => {
       closeSearch();
@@ -298,14 +440,14 @@ function SearchProvider({
   function handleKeyDown(e: React.KeyboardEvent) {
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActiveIndex((i) => (i < filtered.length - 1 ? i + 1 : 0));
+      setActiveIndex((i) => (i < merged.length - 1 ? i + 1 : 0));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActiveIndex((i) => (i > 0 ? i - 1 : filtered.length - 1));
+      setActiveIndex((i) => (i > 0 ? i - 1 : merged.length - 1));
     } else if (e.key === "Enter") {
       e.preventDefault();
-      if (filtered[activeIndex]) {
-        navigate(filtered[activeIndex].slug);
+      if (merged[activeIndex]) {
+        navigate(merged[activeIndex].page.slug);
       }
     } else if (e.key === "Escape") {
       closeSearch();
@@ -335,27 +477,38 @@ function SearchProvider({
                 autoComplete="off"
                 spellCheck={false}
               />
-              <StyledKbd>esc</StyledKbd>
+              <StyledKbd>Esc</StyledKbd>
             </StyledInputWrapper>
-            {filtered.length > 0 ? (
+            {merged.length > 0 ? (
               <StyledResults ref={resultsRef}>
-                {filtered.map((page, index) => (
+                {merged.map((result, index) => (
                   <StyledResultItem
-                    key={page.slug + page.section}
+                    key={result.page.slug + result.page.section}
                     $isActive={index === activeIndex}
-                    onClick={() => navigate(page.slug)}
+                    onClick={() => navigate(result.page.slug)}
                     onMouseEnter={() => setActiveIndex(index)}
                   >
-                    <StyledResultTitle>{page.title}</StyledResultTitle>
+                    <StyledResultTitle>{result.page.title}</StyledResultTitle>
                     <StyledResultMeta>
-                      {page.section ? \`\${page.section} / \` : ""}
-                      {page.category}
+                      {result.page.section
+                        ? \`\${sectionLabels[result.page.section] || result.page.section} / \`
+                        : ""}
+                      {result.page.category}
                     </StyledResultMeta>
+                    {result.snippet && (
+                      <StyledSnippet
+                        dangerouslySetInnerHTML={{
+                          __html: highlightMatch(result.snippet, query),
+                        }}
+                      />
+                    )}
                   </StyledResultItem>
                 ))}
               </StyledResults>
             ) : (
-              <StyledEmpty>No results found</StyledEmpty>
+              <StyledEmpty>
+                {isSearching ? <Spinner size={18} /> : "No results found"}
+              </StyledEmpty>
             )}
           </StyledModal>
         </StyledBackdrop>

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

@@ -0,0 +1 @@
+export declare const spinnerTemplate = "\"use client\";\n\nimport styled, { keyframes } from \"styled-components\";\nimport { LoaderCircle } from \"lucide-react\";\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n`;\n\nconst SpinnerWrapper = styled.span<{ $size?: number }>`\n  display: inline-flex;\n  animation: ${spin} 1s linear infinite;\n  color: inherit;\n`;\n\ninterface SpinnerProps {\n  size?: number;\n  className?: string;\n}\n\nexport function Spinner({ size = 20, className }: SpinnerProps) {\n  return (\n    <SpinnerWrapper $size={size} className={className}>\n      <LoaderCircle size={size} />\n    </SpinnerWrapper>\n  );\n}\n";

package/dist/templates/components/Spinner.js

@@ -0,0 +1,29 @@
+export const spinnerTemplate = `"use client";
+
+import styled, { keyframes } from "styled-components";
+import { LoaderCircle } from "lucide-react";
+
+const spin = keyframes\`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+\`;
+
+const SpinnerWrapper = styled.span<{ $size?: number }>\`
+  display: inline-flex;
+  animation: \${spin} 1s linear infinite;
+  color: inherit;
+\`;
+
+interface SpinnerProps {
+  size?: number;
+  className?: string;
+}
+
+export function Spinner({ size = 20, className }: SpinnerProps) {
+  return (
+    <SpinnerWrapper $size={size} className={className}>
+      <LoaderCircle size={size} />
+    </SpinnerWrapper>
+  );
+}
+`;

package/dist/templates/package.js

@@ -10,16 +10,17 @@ export const packageJsonTemplate = JSON.stringify({
         format: "prettier --write .",
     },
     dependencies: {
-        "@langchain/anthropic": "^1.3.24",
-        "@langchain/core": "^1.1.33",
+        "@langchain/anthropic": "^1.3.25",
+        "@langchain/core": "^1.1.34",
         "@langchain/google-genai": "^2.1.26",
         "@langchain/openai": "^1.3.0",
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.27.1",
         "@posthog/react": "^1.8.2",
         "cherry-styled-components": "^0.1.13",
-        langchain: "^1.2.34",
+        langchain: "^1.2.35",
         "lucide-react": "^0.577.0",
+        minisearch: "^7.2.0",
         next: "16.2.0",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
@@ -31,7 +32,7 @@ export const packageJsonTemplate = JSON.stringify({
         "rehype-parse": "^9.0.1",
         "rehype-stringify": "^10.0.1",
         "remark-gfm": "^4.0.1",
-        "styled-components": "^6.3.11",
+        "styled-components": "^6.3.12",
         unified: "^11.0.5",
         zod: "^4.3.6",
     },
@@ -39,7 +40,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@types/node": "^25",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "baseline-browser-mapping": "^2.10.8",
+        "baseline-browser-mapping": "^2.10.9",
         eslint: "^9",
         "eslint-config-next": "16.2.0",
         prettier: "^3.8.1",

package/dist/templates/services/search.d.ts

@@ -0,0 +1 @@
+export declare const searchServiceTemplate = "import MiniSearch from \"minisearch\";\nimport { listDocs } from \"@/services/mcp/tools\";\n\ninterface IndexedDoc {\n  id: string;\n  slug: string;\n  title: string;\n  content: string;\n}\n\nexport interface SearchHit {\n  slug: string;\n  snippet: string;\n}\n\nlet index: MiniSearch<IndexedDoc> | null = null;\nlet docs: IndexedDoc[] = [];\nlet buildPromise: Promise<void> | null = null;\n\nconst CONTEXT_BEFORE = 60;\nconst CONTEXT_AFTER = 90;\n\nasync function ensureIndex(): Promise<MiniSearch<IndexedDoc>> {\n  if (index) return index;\n  if (buildPromise) {\n    await buildPromise;\n    return index!;\n  }\n\n  buildPromise = (async () => {\n    const resources = await listDocs();\n\n    docs = resources.map((doc) => {\n      const slug =\n        doc.path.replace(/^app\\//, \"\").replace(/\\/page\\.\\w+$/, \"\") || \"\";\n      const cleanContent = doc.content\n        .replace(/\\r\\n/g, \"\\n\")\n        .replace(/\\n{3,}/g, \"\\n\\n\")\n        .slice(0, 200_000);\n      return {\n        id: slug || \"__index__\",\n        slug,\n        title: doc.name,\n        content: cleanContent,\n      };\n    });\n\n    index = new MiniSearch<IndexedDoc>({\n      fields: [\"title\", \"content\"],\n      storeFields: [\"slug\", \"title\", \"content\"],\n      searchOptions: {\n        boost: { title: 3 },\n        fuzzy: 0.2,\n        prefix: true,\n      },\n    });\n\n    index.addAll(docs);\n  })();\n\n  await buildPromise;\n  return index!;\n}\n\nfunction extractSnippet(content: string, query: string): string {\n  const lower = content.toLowerCase();\n  const qLower = query.toLowerCase();\n  const matchIdx = lower.indexOf(qLower);\n\n  if (matchIdx === -1) {\n    // Fuzzy match - no exact substring. Return start of content.\n    const end = Math.min(content.length, CONTEXT_BEFORE + CONTEXT_AFTER);\n    const raw = content.slice(0, end).trim();\n    return raw.length < content.length ? raw + \"...\" : raw;\n  }\n\n  let start = Math.max(0, matchIdx - CONTEXT_BEFORE);\n  let end = Math.min(content.length, matchIdx + query.length + CONTEXT_AFTER);\n\n  // Align to word boundaries\n  if (start > 0) {\n    const space = content.indexOf(\" \", start);\n    if (space !== -1 && space < matchIdx) start = space + 1;\n  }\n  if (end < content.length) {\n    const space = content.lastIndexOf(\" \", end);\n    if (space > matchIdx + query.length) end = space;\n  }\n\n  const prefix = start > 0 ? \"...\" : \"\";\n  const suffix = end < content.length ? \"...\" : \"\";\n  const snippet = content.slice(start, end).replace(/\\n+/g, \" \").trim();\n\n  return prefix + snippet + suffix;\n}\n\nexport async function searchContent(\n  query: string,\n  limit = 10,\n): Promise<SearchHit[]> {\n  const q = query.trim();\n  if (!q) return [];\n\n  const idx = await ensureIndex();\n  const results = idx.search(q);\n\n  return results.slice(0, limit).map((result) => {\n    const doc = docs.find((d) => d.id === result.id);\n    const content = doc?.content || \"\";\n    return {\n      slug: doc?.slug || \"\",\n      snippet: extractSnippet(content, q),\n    };\n  });\n}\n";

package/dist/templates/services/search.js

@@ -0,0 +1,116 @@
+export const searchServiceTemplate = `import MiniSearch from "minisearch";
+import { listDocs } from "@/services/mcp/tools";
+
+interface IndexedDoc {
+  id: string;
+  slug: string;
+  title: string;
+  content: string;
+}
+
+export interface SearchHit {
+  slug: string;
+  snippet: string;
+}
+
+let index: MiniSearch<IndexedDoc> | null = null;
+let docs: IndexedDoc[] = [];
+let buildPromise: Promise<void> | null = null;
+
+const CONTEXT_BEFORE = 60;
+const CONTEXT_AFTER = 90;
+
+async function ensureIndex(): Promise<MiniSearch<IndexedDoc>> {
+  if (index) return index;
+  if (buildPromise) {
+    await buildPromise;
+    return index!;
+  }
+
+  buildPromise = (async () => {
+    const resources = await listDocs();
+
+    docs = resources.map((doc) => {
+      const slug =
+        doc.path.replace(/^app\\//, "").replace(/\\/page\\.\\w+$/, "") || "";
+      const cleanContent = doc.content
+        .replace(/\\r\\n/g, "\\n")
+        .replace(/\\n{3,}/g, "\\n\\n")
+        .slice(0, 200_000);
+      return {
+        id: slug || "__index__",
+        slug,
+        title: doc.name,
+        content: cleanContent,
+      };
+    });
+
+    index = new MiniSearch<IndexedDoc>({
+      fields: ["title", "content"],
+      storeFields: ["slug", "title", "content"],
+      searchOptions: {
+        boost: { title: 3 },
+        fuzzy: 0.2,
+        prefix: true,
+      },
+    });
+
+    index.addAll(docs);
+  })();
+
+  await buildPromise;
+  return index!;
+}
+
+function extractSnippet(content: string, query: string): string {
+  const lower = content.toLowerCase();
+  const qLower = query.toLowerCase();
+  const matchIdx = lower.indexOf(qLower);
+
+  if (matchIdx === -1) {
+    // Fuzzy match - no exact substring. Return start of content.
+    const end = Math.min(content.length, CONTEXT_BEFORE + CONTEXT_AFTER);
+    const raw = content.slice(0, end).trim();
+    return raw.length < content.length ? raw + "..." : raw;
+  }
+
+  let start = Math.max(0, matchIdx - CONTEXT_BEFORE);
+  let end = Math.min(content.length, matchIdx + query.length + CONTEXT_AFTER);
+
+  // Align to word boundaries
+  if (start > 0) {
+    const space = content.indexOf(" ", start);
+    if (space !== -1 && space < matchIdx) start = space + 1;
+  }
+  if (end < content.length) {
+    const space = content.lastIndexOf(" ", end);
+    if (space > matchIdx + query.length) end = space;
+  }
+
+  const prefix = start > 0 ? "..." : "";
+  const suffix = end < content.length ? "..." : "";
+  const snippet = content.slice(start, end).replace(/\\n+/g, " ").trim();
+
+  return prefix + snippet + suffix;
+}
+
+export async function searchContent(
+  query: string,
+  limit = 10,
+): Promise<SearchHit[]> {
+  const q = query.trim();
+  if (!q) return [];
+
+  const idx = await ensureIndex();
+  const results = idx.search(q);
+
+  return results.slice(0, limit).map((result) => {
+    const doc = docs.find((d) => d.id === result.id);
+    const content = doc?.content || "";
+    return {
+      slug: doc?.slug || "",
+      snippet: extractSnippet(content, q),
+    };
+  });
+}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "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": {