astro-tractstack 2.0.0-rc.45 → 2.0.0-rc.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.45",
+  "version": "2.0.0-rc.47",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/search/SearchModal.tsx

@@ -189,7 +189,7 @@ export default function SearchModal({
                   {selectedTerms.map((term, index) => (
                     <div
                       key={index}
-                      className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800"
+                      className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-100 px-3 py-1 text-sm font-bold text-blue-800"
                     >
                       <span>{term}</span>
                       <button
@@ -205,26 +205,25 @@ export default function SearchModal({
               )}
 
               {!showResults && (
-                <div className="relative">
-                  <div className="relative w-full border-none bg-transparent px-6 py-2 text-xl">
-                    {/* Background layer with completion text */}
-                    {showCompletion && (
-                      <div className="pointer-events-none absolute inset-0 px-6 py-2 text-xl text-gray-400">
-                        {bestCompletion}
-                      </div>
-                    )}
-                    {/* Foreground input */}
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      value={query}
-                      onChange={handleInputChange}
-                      onKeyDown={handleKeyDown}
-                      placeholder="Search content..."
-                      className="text-mydarkgrey relative z-10 w-full border-none bg-transparent text-xl placeholder-gray-500 outline-none"
-                      style={{ background: 'transparent' }}
-                    />
-                  </div>
+                <div className="relative w-full px-6 py-2">
+                  {showCompletion && (
+                    <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center px-6 py-2 text-xl text-gray-400">
+                      <span style={{ visibility: 'hidden' }}>{query}</span>
+                      {bestCompletion
+                        .slice(query.length)
+                        .replace(/ /g, '\u00A0')}
+                    </div>
+                  )}
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={query}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Search content..."
+                    className="text-mydarkgrey relative z-10 w-full border-none bg-transparent text-xl placeholder-gray-500 outline-none"
+                    style={{ background: 'transparent', padding: '0' }}
+                  />
                 </div>
               )}
               <button
@@ -286,7 +285,7 @@ export default function SearchModal({
               {/* Suggestion Pills */}
               {showSuggestions && (
                 <div className="w-full p-6">
-                  <p className="text-mydarkgrey mb-4 text-sm font-medium">
+                  <p className="text-mydarkgrey mb-4 text-sm font-bold">
                     Suggestions ({suggestions.length})
                   </p>
                   <div className="flex flex-wrap gap-2">
@@ -294,7 +293,7 @@ export default function SearchModal({
                       <button
                         key={index}
                         onClick={() => handleSuggestionClick(suggestion)}
-                        className={`inline-flex items-center rounded-full border px-3 py-1.5 text-sm font-medium transition-all hover:shadow-md ${getTypeColor(suggestion.type)}`}
+                        className={`inline-flex items-center rounded-full border px-3 py-1.5 text-sm font-bold transition-all hover:shadow-md ${getTypeColor(suggestion.type)}`}
                       >
                         <span>{suggestion.term}</span>
                       </button>
@@ -342,7 +341,6 @@ export default function SearchModal({
                   <SearchResults
                     results={searchResults}
                     contentMap={contentMap}
-                    onResultClick={handleClose}
                   />
                 )}
             </div>

package/templates/src/components/search/SearchResults.tsx

@@ -14,7 +14,6 @@ const VERBOSE = false;
 interface SearchResultsProps {
   results: CategorizedResults;
   contentMap: FullContentMapItem[];
-  onResultClick: () => void;
 }
 
 interface ResultItem {
@@ -36,7 +35,6 @@ const ITEMS_PER_PAGE = 10;
 export default function SearchResults({
   results,
   contentMap,
-  onResultClick,
 }: SearchResultsProps) {
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -238,7 +236,7 @@ export default function SearchResults({
             key={item.id}
             className="rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
           >
-            <a href={item.url} onClick={onResultClick} className="group block">
+            <a href={item.url} className="group block">
               <div className="flex flex-col md:flex-row md:items-start md:gap-4">
                 {/* Mobile: Full width image with overlay badge */}
                 <div

package/templates/src/hooks/useSearch.ts

@@ -23,7 +23,7 @@ interface UseSearchReturn {
   clearAll: () => void;
 }
 
-const DEBOUNCE_MS = 100;
+const DEBOUNCE_MS = 150;
 const BACKEND_THROTTLE_MS = 1200;
 
 export function useSearch(): UseSearchReturn {
@@ -39,10 +39,11 @@ export function useSearch(): UseSearchReturn {
   const [isRetrieving, setIsRetrieving] = useState(false);
   const [retrieveError, setRetrieveError] = useState<string | null>(null);
 
-  const debounceRef = useRef<NodeJS.Timeout>();
-  const lastSearchTimeRef = useRef<number>(0);
+  // --- REVISED STATE FOR SEARCH LOGIC ---
+  const searchTimerRef = useRef<NodeJS.Timeout>();
+  const lastExecutionTimeRef = useRef<number>(0);
   const pendingQueryRef = useRef<string | null>(null);
-  const throttleTimeoutRef = useRef<NodeJS.Timeout>();
+  const inflightQueryRef = useRef<string | null>(null);
   const api = useMemo(() => new TractStackAPI(), []);
 
   const performDiscovery = useCallback(
@@ -52,26 +53,37 @@ export function useSearch(): UseSearchReturn {
         return;
       }
 
+      if (inflightQueryRef.current === query.trim()) {
+        return;
+      }
+
+      inflightQueryRef.current = query.trim();
       setIsDiscovering(true);
       setDiscoverError(null);
-      lastSearchTimeRef.current = Date.now();
 
       try {
         const response = await api.discover(query.trim());
 
-        if (response.success && response.data) {
-          setSuggestions(response.data.suggestions);
-        } else {
-          setDiscoverError(response.error || 'Discovery failed');
-          setSuggestions([]);
+        if (inflightQueryRef.current === query.trim()) {
+          if (response.success && response.data) {
+            setSuggestions(response.data.suggestions);
+          } else {
+            setDiscoverError(response.error || 'Discovery failed');
+            setSuggestions([]);
+          }
         }
       } catch (err) {
-        setDiscoverError(
-          err instanceof Error ? err.message : 'Discovery failed'
-        );
-        setSuggestions([]);
+        if (inflightQueryRef.current === query.trim()) {
+          setDiscoverError(
+            err instanceof Error ? err.message : 'Discovery failed'
+          );
+          setSuggestions([]);
+        }
       } finally {
-        setIsDiscovering(false);
+        if (inflightQueryRef.current === query.trim()) {
+          inflightQueryRef.current = null;
+          setIsDiscovering(false);
+        }
       }
     },
     [api]
@@ -103,24 +115,11 @@ export function useSearch(): UseSearchReturn {
     [api]
   );
 
-  const executePendingSearch = useCallback(() => {
-    if (pendingQueryRef.current) {
-      const queryToExecute = pendingQueryRef.current;
-      pendingQueryRef.current = null;
-      performDiscovery(queryToExecute);
-    }
-  }, [performDiscovery]);
-
   const discoverTerms = useCallback(
     (query: string) => {
-      // Clear existing debounce timer
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-
-      // Clear existing throttle timer
-      if (throttleTimeoutRef.current) {
-        clearTimeout(throttleTimeoutRef.current);
+      // Clear any existing timer.
+      if (searchTimerRef.current) {
+        clearTimeout(searchTimerRef.current);
       }
 
       // Clear results when starting new discovery
@@ -133,31 +132,37 @@ export function useSearch(): UseSearchReturn {
         setDiscoverError(null);
         setIsDiscovering(false);
         pendingQueryRef.current = null;
+        inflightQueryRef.current = null;
         return;
       }
 
-      // Always store the latest query
+      // Always store the latest query for the next execution
       pendingQueryRef.current = query;
 
-      // Debounce first - wait for user to stop typing
-      debounceRef.current = setTimeout(() => {
-        const now = Date.now();
-        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+      const now = Date.now();
+      const timeSinceLastSearch = now - lastExecutionTimeRef.current;
 
-        // If enough time has passed since last search, execute immediately
-        if (timeSinceLastSearch >= BACKEND_THROTTLE_MS) {
-          executePendingSearch();
-        } else {
-          // Need to wait for throttle - schedule execution
-          const remainingTime = BACKEND_THROTTLE_MS - timeSinceLastSearch;
-          throttleTimeoutRef.current = setTimeout(
-            executePendingSearch,
-            remainingTime
-          );
+      // Start with the basic debounce delay
+      let delay = DEBOUNCE_MS;
+
+      // If we are inside the throttle window, we must wait longer
+      if (timeSinceLastSearch < BACKEND_THROTTLE_MS) {
+        const remainingThrottle = BACKEND_THROTTLE_MS - timeSinceLastSearch;
+        delay = Math.max(delay, remainingThrottle);
+      }
+
+      searchTimerRef.current = setTimeout(() => {
+        // Double check there's a query to run
+        if (pendingQueryRef.current !== null) {
+          const queryToExecute = pendingQueryRef.current;
+
+          // Update execution time as soon as the search is initiated
+          lastExecutionTimeRef.current = Date.now();
+          performDiscovery(queryToExecute);
         }
-      }, DEBOUNCE_MS);
+      }, delay);
     },
-    [executePendingSearch]
+    [performDiscovery]
   );
 
   const selectSuggestion = useCallback(
@@ -191,12 +196,9 @@ export function useSearch(): UseSearchReturn {
   );
 
   const clearAll = useCallback(() => {
-    // Clear all timeouts
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-    if (throttleTimeoutRef.current) {
-      clearTimeout(throttleTimeoutRef.current);
+    // Clear the main search timer
+    if (searchTimerRef.current) {
+      clearTimeout(searchTimerRef.current);
     }
 
     // Reset all state
@@ -207,6 +209,8 @@ export function useSearch(): UseSearchReturn {
     setIsRetrieving(false);
     setRetrieveError(null);
     pendingQueryRef.current = null;
+    inflightQueryRef.current = null;
+    lastExecutionTimeRef.current = 0; // Reset throttle timer
   }, []);
 
   return {

package/templates/src/layouts/Layout.astro

@@ -273,8 +273,8 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
     }
     <div
       id="loading-indicator"
-      class="bg-myorange fixed left-0 top-0 z-50 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
-      style="opacity: 0.5; filter: blur(0.5px);"
+      class="bg-myorange fixed left-0 top-0 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
+      style="opacity: 0.5; filter: blur(0.5px); z-index: 10070;"
     >
     </div>