seemore 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/search/SearchDialog.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import {
@@ -7,7 +7,6 @@ import {
   SearchDialogContent,
   SearchDialogHeader,
   SearchDialogIcon,
-  SearchDialogInput,
   SearchDialogList,
   SearchDialogOverlay,
 } from 'fumadocs-ui/components/dialog/search';
@@ -44,14 +43,35 @@ export function SearchDialog(props: SharedProps) {
   const { search, setSearch, query } = useDocsSearch({ client });
   const results = query.data === 'empty' || query.data === undefined ? [] : query.data;
 
+  /**
+   * A long index is parsed on the first query, so the wait is seconds rather than
+   * milliseconds — long enough that the list's "No results found" reads as an answer.
+   *
+   * `query.isLoading` alone is not the whole wait: fumadocs debounces the input before it
+   * flips, so a keystroke's worth of that wrong answer shows first. A query is pending from
+   * the keystroke until the search settles.
+   */
+  const [pending, setPending] = useState(false);
+  useEffect(() => {
+    setPending(search !== '');
+  }, [search]);
+  useEffect(() => {
+    if (!query.isLoading) setPending(false);
+  }, [query.isLoading]);
+
   // `search.suggest`: complete the last word inline from the best result's title.
   const completion = useMemo(() => {
     if (!feature('search.suggest') || search === '' || results.length === 0) return '';
-    const title = results[0]?.content ?? '';
+    // A result's content arrives with the matched span wrapped in `<mark>` — and the match
+    // is the query itself, so leaving the markup in place is a prefix test that can never
+    // pass.
+    const title = (results[0]?.content ?? '').replaceAll('<mark>', '').replaceAll('</mark>', '');
     return title.toLowerCase().startsWith(search.toLowerCase()) ? title.slice(search.length) : '';
   }, [results, search]);
 
-  const items = results.map((result) => ({ ...result, external: false }));
+  // An empty box has nothing to answer: `null` collapses the list, where an empty array
+  // would answer "No results found".
+  const items = search === '' ? null : results.map((result) => ({ ...result, external: false }));
 
   return (
     <Dialog
@@ -67,11 +87,22 @@ export function SearchDialog(props: SharedProps) {
         void navigate(withHighlight(stripBase(config.base, item.url), search), { viewTransition: true });
       }}
     >
-      <SearchDialogOverlay />
-      <SearchDialogContent>
+      {/* The sticky header is `z-50` too, and it renders after this portal in the DOM — at
+          mobile's `top-4` it wins the tie and paints over the input row. fumadocs' own header
+          is `z-30`, so theirs never meets this; ours needs the dialog lifted above it. */}
+      <SearchDialogOverlay className="z-[60]" />
+      <SearchDialogContent className="z-[60]">
         <SearchDialogHeader>
           <SearchDialogIcon />
-          <SearchDialogInput
+          {/*
+            Our own input rather than fumadocs' `SearchDialogInput`: that one overwrites
+            `placeholder` with its own translated "Search" after spreading props, so the
+            wording here would never reach the box. The state is already ours.
+          */}
+          <input
+            className="seemore-search-input"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
             placeholder="Search documentation…"
             onKeyDown={(event) => {
               if (event.key !== 'ArrowRight' || completion === '') return;
@@ -87,13 +118,20 @@ export function SearchDialog(props: SharedProps) {
             <span>{completion}</span>
           </p>
         )}
-        {query.error === undefined ? (
-          <SearchDialogList items={items} />
-        ) : (
+        {query.error !== undefined ? (
           // A search box that silently finds nothing is worse than one that says why.
           <p className="seemore-search-error" role="alert">
             {query.error.message}
           </p>
+        ) : pending && (items?.length ?? 0) === 0 ? (
+          // Only with nothing to show: results already on screen stay put while the next
+          // query runs, under the input icon's own pulse.
+          <div className="seemore-search-loading" role="status">
+            <span className="seemore-search-spinner" aria-hidden="true" />
+            Searching…
+          </div>
+        ) : (
+          <SearchDialogList items={items} />
         )}
       </SearchDialogContent>
     </Dialog>

package/src/app/styles/globals.css

@@ -68,6 +68,18 @@
     @apply opacity-60;
   }
 
+  .seemore-search-input {
+    @apply w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none;
+  }
+
+  .seemore-search-loading {
+    @apply flex items-center justify-center gap-2 px-4 py-6 text-sm text-fd-muted-foreground;
+  }
+
+  .seemore-search-spinner {
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-fd-muted-foreground/30 border-t-fd-muted-foreground;
+  }
+
   .seemore-theme-toggle {
     @apply rounded-lg border border-fd-border p-2;
   }
@@ -386,5 +398,16 @@
   }
 }
 
+/* Unlayered, deliberately: fumadocs' `max-h-[460px]` utility lives in Tailwind's utilities
+   layer, which beats anything in `@layer components` regardless of specificity. fumadocs
+   caps the results list at 460px, but the dialog opens at `top-4` plus a ~3.5rem input row,
+   so on a short (landscape phone) viewport the list runs past the fold with its bottom
+   unreachable. Bind it to the real viewport height there instead. */
+@media (max-height: 600px) {
+  [role='dialog'] [class*='max-h-[460px]'] {
+    max-height: calc(100dvh - 6rem);
+  }
+}
+
 /* seemore:user-css — the stylesheet named by `css` in seemore.config.ts is inlined here, at
    the very end, so that it wins against everything above it. */