doccupine 0.0.83 → 0.0.84

package/dist/templates/components/SearchDocs.js

@@ -8,20 +8,19 @@ import React, {
   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 dynamic from "next/dynamic";
+import styled from "styled-components";
 import { mq, Theme } from "@/app/theme";
 import { interactiveStyles } from "@/components/layout/SharedStyled";
-import { Spinner } from "@/components/Spinner";
+import type { PageItem, MergedResult } from "@/components/SearchModalContent";
 
-interface PageItem {
-  slug: string;
-  title: string;
-  description?: string;
-  category: string;
-  section?: string;
-}
+const SearchModalContent = dynamic(
+  () =>
+    import("@/components/SearchModalContent").then(
+      (mod) => mod.SearchModalContent,
+    ),
+  { ssr: false },
+);
 
 interface SectionItem {
   label: string;
@@ -33,11 +32,6 @@ interface ContentHit {
   snippet: string;
 }
 
-interface MergedResult {
-  page: PageItem;
-  snippet?: string;
-}
-
 interface SearchContextValue {
   openSearch: () => void;
 }
@@ -46,170 +40,6 @@ 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.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;
-
-  \${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: 8px 0 0 0;
-  padding: 0 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 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 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};
-\`;
-
 const StyledKbd = styled.kbd<{ theme: Theme }>\`
   font-size: 11px;
   font-family: inherit;
@@ -248,25 +78,6 @@ 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,
@@ -284,7 +95,7 @@ function SearchProvider({
   const [isSearching, setIsSearching] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLUListElement>(null);
-  const closingTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const closingRef = useRef(false);
   const abortRef = useRef<AbortController | null>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
   const router = useRouter();
@@ -298,23 +109,27 @@ function SearchProvider({
   }, [sections]);
 
   const openSearch = useCallback(() => {
-    if (closingTimer.current) clearTimeout(closingTimer.current);
+    closingRef.current = false;
     setIsClosing(false);
     setIsVisible(true);
   }, []);
 
   const closeSearch = useCallback(() => {
+    closingRef.current = true;
     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 handleCloseAnimationEnd = useCallback(() => {
+    if (!closingRef.current) return;
+    closingRef.current = false;
+    setIsVisible(false);
+    setIsClosing(false);
+    setQuery("");
+    setActiveIndex(0);
+    setContentResults([]);
+    setIsSearching(false);
   }, []);
 
   // Instant title/description filtering
@@ -423,13 +238,6 @@ function SearchProvider({
     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;
@@ -458,60 +266,22 @@ function SearchProvider({
     <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>
-            {merged.length > 0 ? (
-              <StyledResults ref={resultsRef}>
-                {merged.map((result, index) => (
-                  <StyledResultItem
-                    key={result.page.slug + result.page.section}
-                    $isActive={index === activeIndex}
-                    onClick={() => navigate(result.page.slug)}
-                    onMouseEnter={() => setActiveIndex(index)}
-                  >
-                    <StyledResultTitle>{result.page.title}</StyledResultTitle>
-                    <StyledResultMeta>
-                      {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>
-                {isSearching ? <Spinner size={18} /> : "No results found"}
-              </StyledEmpty>
-            )}
-          </StyledModal>
-        </StyledBackdrop>
+        <SearchModalContent
+          isClosing={isClosing}
+          closeSearch={closeSearch}
+          onCloseAnimationEnd={handleCloseAnimationEnd}
+          query={query}
+          setQuery={setQuery}
+          activeIndex={activeIndex}
+          setActiveIndex={setActiveIndex}
+          inputRef={inputRef}
+          resultsRef={resultsRef}
+          onKeyDown={handleKeyDown}
+          merged={merged}
+          sectionLabels={sectionLabels}
+          isSearching={isSearching}
+          navigate={navigate}
+        />
       )}
     </SearchContext.Provider>
   );

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

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