doccupine 0.0.78 → 0.0.80

package/dist/lib/layout.js

@@ -52,6 +52,7 @@ import { StyledComponentsRegistry } from "cherry-styled-components";
 import { theme, themeDark } from "@/app/theme";
 import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
 import { ChtProvider } from "@/components/Chat";
+import { SearchProvider } from "@/components/SearchDocs";
 ${hasSections
         ? ""
         : `import { Footer } from "@/components/layout/Footer";
@@ -133,19 +134,21 @@ ${hasSections
         <StyledComponentsRegistry>
 ${analyticsEnabled ? "          <PostHogProvider>\n" : ""}${a}          <CherryThemeProvider theme={theme} themeDark={themeDark}>
 ${a}            ${chtOpen}
-${a}              <Header>
-${a}                <SectionBar sections={doccupineSections} />
-${a}              </Header>
-${a}              {process.env.LLM_PROVIDER && <Chat />}
-${a}              <DocsWrapper>
-${a}                <SectionNavProvider
-${a}                  sections={doccupineSections}
-${a}                  allPages={pages}
-${a}                  hideBranding={hideBranding}
-${a}                >
-${a}                  {children}
-${a}                </SectionNavProvider>
-${a}              </DocsWrapper>
+${a}              <SearchProvider pages={pages}>
+${a}                <Header>
+${a}                  <SectionBar sections={doccupineSections} />
+${a}                </Header>
+${a}                {process.env.LLM_PROVIDER && <Chat />}
+${a}                <DocsWrapper>
+${a}                  <SectionNavProvider
+${a}                    sections={doccupineSections}
+${a}                    allPages={pages}
+${a}                    hideBranding={hideBranding}
+${a}                  >
+${a}                    {children}
+${a}                  </SectionNavProvider>
+${a}                </DocsWrapper>
+${a}              </SearchProvider>
 ${a}            </ChtProvider>
 ${a}          </CherryThemeProvider>
 ${analyticsEnabled ? "          </PostHogProvider>\n" : ""}        </StyledComponentsRegistry>
@@ -192,19 +195,21 @@ ${analyticsEnabled ? "          </PostHogProvider>\n" : ""}        </StyledCompo
         <StyledComponentsRegistry>
 ${analyticsEnabled ? "          <PostHogProvider>\n" : ""}${a}          <CherryThemeProvider theme={theme} themeDark={themeDark}>
 ${a}            ${chtOpen}
-${a}              <Header />
-${a}              {process.env.LLM_PROVIDER && <Chat />}
-${a}              <SectionBarProvider hasSectionBar={false}>
-${a}                <DocsWrapper>
-${a}                  <SideBar result={result.length ? result : defaultResults} />
-${a}                  {children}
-${a}                  <DocsNavigation
-${a}                    result={result.length ? result : defaultResults}
-${a}                  />
-${a}                  <StaticLinks />
-${a}                  <Footer hideBranding={hideBranding} />
-${a}                </DocsWrapper>
-${a}              </SectionBarProvider>
+${a}              <SearchProvider pages={pages}>
+${a}                <Header />
+${a}                {process.env.LLM_PROVIDER && <Chat />}
+${a}                <SectionBarProvider hasSectionBar={false}>
+${a}                  <DocsWrapper>
+${a}                    <SideBar result={result.length ? result : defaultResults} />
+${a}                    {children}
+${a}                    <DocsNavigation
+${a}                      result={result.length ? result : defaultResults}
+${a}                    />
+${a}                    <StaticLinks />
+${a}                    <Footer hideBranding={hideBranding} />
+${a}                  </DocsWrapper>
+${a}                </SectionBarProvider>
+${a}              </SearchProvider>
 ${a}            </ChtProvider>
 ${a}          </CherryThemeProvider>
 ${analyticsEnabled ? "          </PostHogProvider>\n" : ""}        </StyledComponentsRegistry>

package/dist/lib/structures.js

@@ -18,6 +18,7 @@ import { docsSideBarTemplate } from "../templates/components/DocsSideBar.js";
 import { mdxComponentsTemplate } from "../templates/components/MDXComponents.js";
 import { sectionNavProviderTemplate } from "../templates/components/SectionNavProvider.js";
 import { postHogProviderTemplate } from "../templates/components/PostHogProvider.js";
+import { searchDocsTemplate } from "../templates/components/SearchDocs.js";
 import { sideBarTemplate } from "../templates/components/SideBar.js";
 import { sectionBarTemplate } from "../templates/components/layout/SectionBar.js";
 import { accordionTemplate } from "../templates/components/layout/Accordion.js";
@@ -140,6 +141,7 @@ export const appStructure = {
     "components/MDXComponents.tsx": mdxComponentsTemplate,
     "components/SectionNavProvider.tsx": sectionNavProviderTemplate,
     "components/PostHogProvider.tsx": postHogProviderTemplate,
+    "components/SearchDocs.tsx": searchDocsTemplate,
     "components/SideBar.tsx": sideBarTemplate,
     "components/layout/Accordion.tsx": accordionTemplate,
     "components/layout/ActionBar.tsx": actionBarTemplate,

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

@@ -0,0 +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";

package/dist/templates/components/SearchDocs.js

@@ -0,0 +1,373 @@
+export const searchDocsTemplate = `"use client";
+import React, {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useRouter } from "next/navigation";
+import styled, { css, keyframes } from "styled-components";
+import { rgba } from "polished";
+import { Search } from "lucide-react";
+import { mq, Theme } from "@/app/theme";
+import { interactiveStyles } from "@/components/layout/SharedStyled";
+
+interface PageItem {
+  slug: string;
+  title: string;
+  description?: string;
+  category: string;
+  section?: string;
+}
+
+interface SearchContextValue {
+  openSearch: () => void;
+}
+
+const SearchContext = createContext<SearchContextValue>({
+  openSearch: () => {},
+});
+
+const ANIMATION_MS = 150;
+
+const backdropIn = keyframes\`
+  from { opacity: 0; }
+  to { opacity: 1; }
+\`;
+
+const backdropOut = keyframes\`
+  from { opacity: 1; }
+  to { opacity: 0; }
+\`;
+
+const modalIn = keyframes\`
+  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+\`;
+
+const modalOut = keyframes\`
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.96) translateY(-8px); }
+\`;
+
+const StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>\`
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: \${({ theme }) =>
+    rgba(theme.isDark ? theme.colors.light : theme.colors.dark, 0.5)};
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px;
+  animation: \${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}
+    \${ANIMATION_MS}ms ease forwards;
+
+  \${mq("lg")} {
+    padding: 120px 20px 20px 20px;
+  }
+\`;
+
+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};
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100dvh - 40px);
+  display: flex;
+  flex-direction: column;
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  animation: \${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}
+    \${ANIMATION_MS}ms ease forwards;
+
+  \${mq("lg")} {
+    max-height: calc(100dvh - 240px);
+  }
+\`;
+
+const StyledInputWrapper = styled.div<{ theme: Theme }>\`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  flex-shrink: 0;
+  border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
+
+  & svg.lucide {
+    color: \${({ theme }) => theme.colors.gray};
+    flex-shrink: 0;
+  }
+\`;
+
+const StyledInput = styled.input<{ theme: Theme }>\`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: \${({ theme }) => theme.fontSizes.text.lg};
+  line-height: \${({ theme }) => theme.lineHeights.text.lg};
+  color: \${({ theme }) => theme.colors.dark};
+  font-family: inherit;
+
+  &::placeholder {
+    color: \${({ theme }) => theme.colors.gray};
+  }
+\`;
+
+const StyledResults = styled.ul<{ theme: Theme }>\`
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+\`;
+
+const StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>\`
+  padding: 10px 12px;
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  \${({ $isActive, theme }) =>
+    $isActive &&
+    css\`
+      background: \${rgba(theme.colors.primaryLight, 0.2)};
+    \`}
+
+  &:hover {
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.15)};
+  }
+\`;
+
+const StyledResultTitle = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.text.lg};
+  font-weight: 500;
+  color: \${({ theme }) => theme.colors.dark};
+  display: block;
+\`;
+
+const StyledResultMeta = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.gray};
+  display: block;
+  margin-top: 2px;
+\`;
+
+const StyledEmpty = styled.div<{ theme: Theme }>\`
+  padding: 20px;
+  text-align: center;
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.gray};
+\`;
+
+const StyledKbd = styled.kbd<{ theme: Theme }>\`
+  font-size: 11px;
+  font-family: inherit;
+  background: \${({ theme }) => theme.colors.grayLight};
+  color: \${({ theme }) => theme.colors.grayDark};
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: auto;
+  font-weight: 600;
+  display: none;
+
+  \${mq("lg")} {
+    display: initial;
+  }
+\`;
+
+const StyledSearchButton = styled.button<{ theme: Theme }>\`
+  \${interactiveStyles};
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: \${({ theme }) => theme.colors.light};
+  color: \${({ theme }) => theme.colors.primary};
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  padding: 7px 8px;
+  font-family: inherit;
+  cursor: pointer;
+
+  \${mq("lg")} {
+    padding: 5px 8px;
+  }
+
+  & svg.lucide {
+    color: inherit;
+  }
+\`;
+
+function SearchProvider({
+  pages,
+  children,
+}: {
+  pages: PageItem[];
+  children: React.ReactNode;
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLUListElement>(null);
+  const closingTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const router = useRouter();
+
+  const openSearch = useCallback(() => {
+    if (closingTimer.current) clearTimeout(closingTimer.current);
+    setIsClosing(false);
+    setIsVisible(true);
+  }, []);
+
+  const closeSearch = useCallback(() => {
+    setIsClosing(true);
+    closingTimer.current = setTimeout(() => {
+      setIsVisible(false);
+      setIsClosing(false);
+      setQuery("");
+      setActiveIndex(0);
+    }, ANIMATION_MS);
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return pages;
+    const q = query.toLowerCase();
+    return pages.filter(
+      (p) =>
+        p.title.toLowerCase().includes(q) ||
+        p.description?.toLowerCase().includes(q),
+    );
+  }, [pages, query]);
+
+  const navigate = useCallback(
+    (slug: string) => {
+      closeSearch();
+      router.push(\`/\${slug}\`);
+    },
+    [closeSearch, router],
+  );
+
+  // Global Cmd+K / Ctrl+K listener
+  const isVisibleRef = useRef(false);
+
+  useEffect(() => {
+    isVisibleRef.current = isVisible;
+  }, [isVisible]);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        if (isVisibleRef.current) {
+          closeSearch();
+        } else {
+          openSearch();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [closeSearch, openSearch]);
+
+  // Focus input on open
+  useEffect(() => {
+    if (isVisible && !isClosing) {
+      setTimeout(() => inputRef.current?.focus(), 10);
+    }
+  }, [isVisible, isClosing]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (!resultsRef.current) return;
+    const active = resultsRef.current.children[activeIndex] as HTMLElement;
+    active?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => (i < filtered.length - 1 ? i + 1 : 0));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => (i > 0 ? i - 1 : filtered.length - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[activeIndex]) {
+        navigate(filtered[activeIndex].slug);
+      }
+    } else if (e.key === "Escape") {
+      closeSearch();
+    }
+  }
+
+  return (
+    <SearchContext.Provider value={{ openSearch }}>
+      {children}
+      {isVisible && (
+        <StyledBackdrop $isClosing={isClosing} onClick={closeSearch}>
+          <StyledModal
+            $isClosing={isClosing}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <StyledInputWrapper>
+              <Search size={18} />
+              <StyledInput
+                ref={inputRef}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActiveIndex(0);
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder="Search docs..."
+                autoComplete="off"
+                spellCheck={false}
+              />
+              <StyledKbd>esc</StyledKbd>
+            </StyledInputWrapper>
+            {filtered.length > 0 ? (
+              <StyledResults ref={resultsRef}>
+                {filtered.map((page, index) => (
+                  <StyledResultItem
+                    key={page.slug + page.section}
+                    $isActive={index === activeIndex}
+                    onClick={() => navigate(page.slug)}
+                    onMouseEnter={() => setActiveIndex(index)}
+                  >
+                    <StyledResultTitle>{page.title}</StyledResultTitle>
+                    <StyledResultMeta>
+                      {page.section ? \`\${page.section} / \` : ""}
+                      {page.category}
+                    </StyledResultMeta>
+                  </StyledResultItem>
+                ))}
+              </StyledResults>
+            ) : (
+              <StyledEmpty>No results found</StyledEmpty>
+            )}
+          </StyledModal>
+        </StyledBackdrop>
+      )}
+    </SearchContext.Provider>
+  );
+}
+
+export {
+  SearchProvider,
+  SearchContext,
+  StyledKbd as SearchKbd,
+  StyledSearchButton,
+};
+`;

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

@@ -1 +1 @@
-export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px\n    );\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 159px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              Copied!\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              Copy content\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";
+export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px\n    );\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 159px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              Copied!\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              Copy content\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle View\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";

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

@@ -176,7 +176,7 @@ function ActionBar({ children, content }: ActionBarProps) {
         <StyledActionBarContent>
           <StyledToggle
             onClick={() => setIsView(!isView)}
-            aria-label="Toggle Theme"
+            aria-label="Toggle View"
             $isActive={isView}
           >
             <Icon name="Eye" />

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

@@ -1 +1 @@
-export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      {children}\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";
+export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\nconst StyledChildren = styled.span`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      <StyledChildren>{children}</StyledChildren>\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";

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

@@ -84,6 +84,12 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
     \`}
 \`;
 
+const StyledChildren = styled.span\`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+\`;
+
 interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   icon?: IconProps;
@@ -106,7 +112,7 @@ function Callout({ children, type, icon }: CalloutProps) {
   return (
     <StyledCallout $type={type}>
       <Icon name={iconType} size={16} />
-      {children}
+      <StyledChildren>{children}</StyledChildren>
     </StyledCallout>
   );
 }

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

@@ -1 +1 @@
-export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } from \"@/components/Chat\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const theme = useTheme() as Theme;\n  const { isChatActive } = useContext(ChatContext);\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            theme.isDark ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            ) : (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            )\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledLeftWrapper>\n          {isChatActive && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";
+export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } from \"@/components/Chat\";\nimport {\n  SearchContext,\n  SearchKbd,\n  StyledSearchButton,\n} from \"@/components/SearchDocs\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const theme = useTheme() as Theme;\n  const { isChatActive } = useContext(ChatContext);\n  const { openSearch } = useContext(SearchContext);\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            theme.isDark ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            ) : (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            )\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledLeftWrapper>\n          <StyledSearchButton onClick={openSearch} aria-label=\"Search docs\">\n            <Search size={14} />\n            <SearchKbd>&#8984;K</SearchKbd>\n          </StyledSearchButton>\n          {isChatActive && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";

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

@@ -6,8 +6,14 @@ import Link from "next/link";
 import { rgba } from "polished";
 import { mq, Theme } from "@/app/theme";
 import { useOnClickOutside } from "@/components/ClickOutside";
+import { Search } from "lucide-react";
 import { Logo } from "@/components/layout/Pictograms";
 import { ChatContext, ChatButtonCTA } from "@/components/Chat";
+import {
+  SearchContext,
+  SearchKbd,
+  StyledSearchButton,
+} from "@/components/SearchDocs";
 import themeJson from "@/theme.json";
 
 const customThemeJson = themeJson as typeof themeJson & {
@@ -91,7 +97,7 @@ const StyledHeaderInner = styled.div<{ $hasChildren: boolean }>\`
 const StyledLeftWrapper = styled.div\`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   min-width: fit-content;
   padding-right: 20px;
 
@@ -123,6 +129,7 @@ function Header({ children }: HeaderProps) {
   useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});
   const theme = useTheme() as Theme;
   const { isChatActive } = useContext(ChatContext);
+  const { openSearch } = useContext(SearchContext);
 
   return (
     <StyledHeader $hasChildren={children ? true : false} id="header">
@@ -152,6 +159,10 @@ function Header({ children }: HeaderProps) {
         </Link>
         {children}
         <StyledLeftWrapper>
+          <StyledSearchButton onClick={openSearch} aria-label="Search docs">
+            <Search size={14} />
+            <SearchKbd>&#8984;K</SearchKbd>
+          </StyledSearchButton>
           {isChatActive && <ChatButtonCTA />}
         </StyledLeftWrapper>
       </StyledHeaderInner>

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

@@ -1 +1 @@
-export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      ${mq(\"lg\")} {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: transparent;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";
+export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      ${mq(\"lg\")} {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";

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

@@ -146,7 +146,7 @@ export const styledTable = css<{ theme: Theme }>\`
 
 export const StyledSmallButton = styled.button<{ theme: Theme }>\`
   \${interactiveStyles};
-  background: transparent;
+  background: \${({ theme }) => theme.colors.light};
   border: solid 1px \${({ theme }) => theme.colors.grayLight};
   color: \${({ theme }) => theme.colors.primary};
   border-radius: \${({ theme }) => theme.spacing.radius.xs};

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

@@ -1 +1 @@
-export declare const themeToggleTemplate = "\"use client\";\nimport { Theme, resetButton } from \"cherry-styled-components\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { theme as themeLight, themeDark } from \"@/app/theme\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 30px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ theme }) =>\n      theme.isDark &&\n      css`\n        transform: translateX(27px);\n      `}\n  }\n\n  ${({ $hidden }) =>\n    $hidden &&\n    css`\n      display: none;\n    `}\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-sun {\n    transform: translateX(1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n  const { setTheme } = useThemeOverride();\n  const theme = useTheme() as Theme;\n\n  return (\n    <StyledThemeToggle\n      onClick={async () => {\n        const nextTheme = theme.isDark ? \"light\" : \"dark\";\n        setTheme(nextTheme === \"light\" ? themeLight : themeDark);\n        await fetch(\"/api/theme\", {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({ theme: nextTheme }),\n        }).catch((err) => console.error(\"Failed to persist theme:\", err));\n      }}\n      $hidden={$hidden}\n      aria-label=\"Toggle Theme\"\n    >\n      <Icon name=\"Sun\" className=\"light\" />\n      <Icon name=\"MoonStar\" className=\"dark\" />\n    </StyledThemeToggle>\n  );\n}\n\nfunction ToggleThemeLoading() {\n  return (\n    <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";
+export declare const themeToggleTemplate = "\"use client\";\nimport { Theme, resetButton } from \"cherry-styled-components\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { theme as themeLight, themeDark } from \"@/app/theme\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n  ${resetButton}\n  width: 59px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ theme }) =>\n      theme.isDark &&\n      css`\n        transform: translateX(27px);\n      `}\n  }\n\n  ${({ $hidden }) =>\n    $hidden &&\n    css`\n      display: none;\n    `}\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-sun {\n    transform: translateX(1px);\n  }\n\n  & .lucide-moon-star {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n  const { setTheme } = useThemeOverride();\n  const theme = useTheme() as Theme;\n\n  return (\n    <StyledThemeToggle\n      onClick={async () => {\n        const nextTheme = theme.isDark ? \"light\" : \"dark\";\n        setTheme(nextTheme === \"light\" ? themeLight : themeDark);\n        await fetch(\"/api/theme\", {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({ theme: nextTheme }),\n        }).catch((err) => console.error(\"Failed to persist theme:\", err));\n      }}\n      $hidden={$hidden}\n      aria-label=\"Toggle Theme\"\n    >\n      <Icon name=\"Sun\" className=\"light\" />\n      <Icon name=\"MoonStar\" className=\"dark\" />\n    </StyledThemeToggle>\n  );\n}\n\nfunction ToggleThemeLoading() {\n  return (\n    <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";

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

@@ -8,14 +8,15 @@ import { useThemeOverride } from "@/components/layout/ClientThemeProvider";
 
 const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
   \${resetButton}
-  width: 56px;
-  height: 30px;
+  width: 59px;
+  height: 32px;
   border-radius: 30px;
   display: flex;
   position: relative;
   margin: auto 0;
   transform: scale(1);
   background: \${({ theme }) => theme.colors.light};
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
 
   &::after {
     content: "";
@@ -55,6 +56,10 @@ const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
     transform: translateX(1px);
   }
 
+  & .lucide-moon-star {
+    transform: translateX(-1px);
+  }
+
   & svg[stroke] {
     stroke: \${({ theme }) => theme.colors.primary};
   }

package/dist/templates/package.js

@@ -10,21 +10,21 @@ export const packageJsonTemplate = JSON.stringify({
         format: "prettier --write .",
     },
     dependencies: {
-        "@langchain/anthropic": "^1.3.23",
-        "@langchain/core": "^1.1.32",
-        "@langchain/google-genai": "^2.1.25",
-        "@langchain/openai": "^1.2.13",
+        "@langchain/anthropic": "^1.3.24",
+        "@langchain/core": "^1.1.33",
+        "@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.31",
+        langchain: "^1.2.34",
         "lucide-react": "^0.577.0",
-        next: "16.1.6",
+        next: "16.2.0",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
-        "posthog-js": "^1.360.1",
-        "posthog-node": "^5.28.1",
+        "posthog-js": "^1.362.0",
+        "posthog-node": "^5.28.4",
         react: "19.2.4",
         "react-dom": "19.2.4",
         "rehype-highlight": "^7.0.2",
@@ -39,9 +39,9 @@ export const packageJsonTemplate = JSON.stringify({
         "@types/node": "^25",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "baseline-browser-mapping": "^2.10.0",
+        "baseline-browser-mapping": "^2.10.8",
         eslint: "^9",
-        "eslint-config-next": "16.1.6",
+        "eslint-config-next": "16.2.0",
         prettier: "^3.8.1",
         typescript: "^5",
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "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": {
@@ -39,7 +39,7 @@
     "commander": "^14.0.3",
     "fs-extra": "^11.3.4",
     "gray-matter": "^4.0.3",
-    "next": "^16.1.6",
+    "next": "^16.2.0",
     "prompts": "^2.4.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
@@ -47,11 +47,11 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^25.4.0",
+    "@types/node": "^25.5.0",
     "@types/prompts": "^2.4.9",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "files": [
     "dist/**/*"