@netlify/spark-ui 0.0.23 → 0.0.25

package/dist/chunks/{compat.module.BPxt-oTe.js → compat.module.AxtqoZMv.js}

@@ -1,5 +1,5 @@
 import { Component as f, options as a, createElement as d, Fragment as h, toChildArray as v } from "preact";
-import "./hooks.module.ExpuRnbo.js";
+import "./hooks.module.BFfOesdf.js";
 function C(e, t) {
   for (var r in t) e[r] = t[r];
   return e;

package/dist/chunks/{hooks.module.ExpuRnbo.js → hooks.module.BFfOesdf.js}

@@ -126,6 +126,7 @@ function W(_, t) {
 }
 export {
   I as A,
+  z as T,
   S as d,
   G as y
 };

package/dist/components/preact/Modal/Modal.js

@@ -1,5 +1,5 @@
 import { u as l } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as d } from "../../../chunks/compat.module.BPxt-oTe.js";
+import { D as d } from "../../../chunks/compat.module.AxtqoZMv.js";
 const u = d(function({ children: o, className: r, ...a }, t) {
   return /* @__PURE__ */ l("dialog", { ref: t, className: r, role: "dialog", "aria-modal": "true", ...a, children: o });
 });

package/dist/components/preact/SearchModal/components/SearchInput.js

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as i, y as s } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { d as i, y as s } from "../../../../chunks/hooks.module.BFfOesdf.js";
 import h from "../../Icon/index.js";
 const m = (a) => {
   const [t, l] = i(""), c = (r) => {

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,98 +1,107 @@
-import { u as s } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as h, y as S, d as v } from "../../../../../chunks/hooks.module.ExpuRnbo.js";
-import N from "../../../Modal/Modal.js";
-import f from "../../../KeyboardKey/KeyboardKey.js";
-import O from "../SearchWindow.js";
-import T from "../SearchInput.js";
-import { useSearch as b } from "../../hooks/useSearch.js";
-import { useKeyboardNav as w } from "../../hooks/useKeyboardNav.js";
+import { u as n } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { A as O, y as v, d as N } from "../../../../../chunks/hooks.module.BFfOesdf.js";
+import T from "../../../Modal/Modal.js";
+import p from "../../../KeyboardKey/KeyboardKey.js";
+import b from "../SearchWindow.js";
+import I from "../SearchInput.js";
+import { useSearch as L } from "../../hooks/useSearch.js";
+import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
 import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as g } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as j } from "../../hooks/useSearchToggles.js";
+import { useSearchParams as j } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as k } from "../../hooks/useSearchToggles.js";
 import '../../../../../assets/SearchModal.css';function x(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var p = { exports: {} };
+var h = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var d;
+var w;
 function C() {
-  return d || (d = 1, function(t) {
+  return w || (w = 1, function(t) {
     (function() {
-      var a = {}.hasOwnProperty;
-      function n() {
+      var s = {}.hasOwnProperty;
+      function o() {
         for (var e = "", r = 0; r < arguments.length; r++) {
-          var o = arguments[r];
-          o && (e = c(e, i(o)));
+          var a = arguments[r];
+          a && (e = l(e, c(a)));
         }
         return e;
       }
-      function i(e) {
+      function c(e) {
         if (typeof e == "string" || typeof e == "number")
           return e;
         if (typeof e != "object")
           return "";
         if (Array.isArray(e))
-          return n.apply(null, e);
+          return o.apply(null, e);
         if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
           return e.toString();
         var r = "";
-        for (var o in e)
-          a.call(e, o) && e[o] && (r = c(r, o));
+        for (var a in e)
+          s.call(e, a) && e[a] && (r = l(r, a));
         return r;
       }
-      function c(e, r) {
+      function l(e, r) {
         return r ? e ? e + " " + r : e + r : e;
       }
-      t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+      t.exports ? (o.default = o, t.exports = o) : window.classNames = o;
     })();
-  }(p)), p.exports;
+  }(h)), h.exports;
 }
-var L = C();
-const M = /* @__PURE__ */ x(L);
-function k(t) {
-  const a = h(null);
-  return S(() => {
-    function n(i) {
-      a.current && !a.current.contains(i.target) && t();
+var M = C();
+const A = /* @__PURE__ */ x(M);
+function K(t) {
+  const s = O(null);
+  return v(() => {
+    function o(c) {
+      s.current && !s.current.contains(c.target) && t();
     }
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
     };
-  }, [t]), a;
+  }, [t]), s;
 }
-function W(t = { className: "", children: null }) {
-  const { children: a, className: n, ...i } = t, { state: c, actions: e } = b(), [r, o] = v(!1), l = () => o(!0), m = () => o(!1), u = h(null), y = k(m);
-  return j(l), g(e.setSearchTerm, l), E(r, l, m), w(u, r, m), S(() => {
-    u.current && (r ? u.current.showModal() : u.current.close());
-  }, [r]), /* @__PURE__ */ s(N, { ref: u, className: M(n, "n-search-modal"), ...i, children: /* @__PURE__ */ s("div", { ref: y, className: "n-search-container", children: [
-    /* @__PURE__ */ s("form", { className: "n-search-bar", children: /* @__PURE__ */ s(T, { setSearchTerm: e.setSearchTerm, initialValue: c.searchTerm }) }),
-    /* @__PURE__ */ s(
-      O,
+function J(t = { className: "", children: null }) {
+  const [s, o] = N(!1);
+  v(() => {
+    const y = () => {
+      window.pagefind && (o(!0), d && clearInterval(d));
+    };
+    y();
+    const d = setInterval(y, 100);
+    return () => clearInterval(d);
+  }, []);
+  const { children: c, className: l, ...e } = t, { state: r, actions: a } = L(), [u, S] = N(!1), f = () => S(!0), m = () => S(!1), i = O(null), g = K(m);
+  return k(s, f), j(s, a.setSearchTerm, f), E(s, u, f, m), P(s, i, u, m), v(() => {
+    i.current && (u ? i.current.showModal() : i.current.close());
+  }, [u]), /* @__PURE__ */ n(T, { ref: i, className: A(l, "n-search-modal"), ...e, children: /* @__PURE__ */ n("div", { ref: g, className: "n-search-container", children: [
+    /* @__PURE__ */ n("form", { className: "n-search-bar", children: /* @__PURE__ */ n(I, { setSearchTerm: a.setSearchTerm, initialValue: r.searchTerm }) }),
+    /* @__PURE__ */ n(
+      b,
       {
-        searchLoading: c.isLoading,
-        searchTerm: c.searchTerm,
-        results: c.results,
-        children: a
+        searchLoading: r.isLoading,
+        searchTerm: r.searchTerm,
+        results: r.results,
+        children: c
       }
     ),
-    /* @__PURE__ */ s("div", { className: "n-search-footer", children: [
-      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ s(f, { keyNames: ["Esc"] }),
+    /* @__PURE__ */ n("div", { className: "n-search-footer", children: [
+      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ n(p, { keyNames: ["Esc"] }),
         "to close"
       ] }),
-      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ s(f, { keyNames: ["Tab"] }),
-        /* @__PURE__ */ s("span", { children: "or" }),
-        /* @__PURE__ */ s(f, { keyNames: ["↑", "↓"] }),
+      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ n(p, { keyNames: ["Tab"] }),
+        /* @__PURE__ */ n("span", { children: "or" }),
+        /* @__PURE__ */ n(p, { keyNames: ["↑", "↓"] }),
         "to navigate"
       ] })
     ] })
   ] }) });
 }
 export {
-  W as default
+  J as default
 };

package/dist/components/preact/SearchModal/components/SearchToggle/SearchToggle.js

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as t } from "../../../../../chunks/compat.module.BPxt-oTe.js";
+import { D as t } from "../../../../../chunks/compat.module.AxtqoZMv.js";
 import o from "../../../Icon/index.js";
 import '../../../../../assets/SearchToggle.css';const s = t(function(r, a) {
   return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "n-search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [

package/dist/components/preact/SearchModal/components/SearchWindow.js

@@ -1,33 +1,41 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import a from "./SearchHeading/SearchHeading.js";
-import c from "./SearchLink/SearchLink.js";
-const t = ({
-  searchLoading: s,
-  searchTerm: l,
+import { T as o } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import t from "./SearchHeading/SearchHeading.js";
+import a from "./SearchLink/SearchLink.js";
+const h = ({
+  searchLoading: i,
+  searchTerm: n,
   results: r
-}) => s ? /* @__PURE__ */ e(a, { children: [
-  "Searching for ",
-  /* @__PURE__ */ e("span", { className: "n-search-term", children: l }),
-  " ..."
-] }) : !r || r.length === 0 ? /* @__PURE__ */ e(a, { children: [
-  "0 results for ",
-  /* @__PURE__ */ e("span", { className: "n-search-term", children: l })
-] }) : /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: r.slice(0, 15).map((i, n) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...i }) }, n)) });
-function m({
-  searchLoading: s,
-  searchTerm: l,
+}) => {
+  if (i)
+    return /* @__PURE__ */ e(t, { children: [
+      "Searching for ",
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: n }),
+      " ..."
+    ] });
+  if (!r || r.length === 0)
+    return /* @__PURE__ */ e(t, { children: [
+      "0 results for ",
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: n })
+    ] });
+  const l = o(() => r.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [r]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
+};
+function N({
+  searchLoading: i,
+  searchTerm: n,
   results: r,
-  children: i
+  children: l
 }) {
   return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
-    /* @__PURE__ */ e(c, { ...{
+    /* @__PURE__ */ e(a, { ...{
       icon: "askNetlify",
       label: "Ask Netlify AI",
       url: "https://docs.netlify.com/ask-netlify/"
     } }),
-    l ? /* @__PURE__ */ e(t, { searchLoading: s, searchTerm: l, results: r }) : i || null
+    n ? /* @__PURE__ */ e(h, { searchLoading: i, searchTerm: n, results: r }) : l || null
   ] }) });
 }
 export {
-  m as default
+  N as default
 };

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.d.ts

@@ -11,4 +11,4 @@ import { RefObject } from 'preact';
  * @param isOpen - Boolean indicating whether the navigation context is active
  * @param onClose - Callback to close the navigation UI when `Escape` is pressed
  */
-export declare function useKeyboardNav(containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;
+export declare function useKeyboardNav(isPagefindLoaded: boolean, containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.js

@@ -1,24 +1,25 @@
-import { y as a } from "../../../../chunks/hooks.module.ExpuRnbo.js";
-function l(r, t, o) {
-  a(() => {
-    const c = (e) => {
-      if (t) {
+import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function s(r, t, o, c) {
+  l(() => {
+    if (!r) return;
+    const u = (e) => {
+      if (o) {
         if (e.key === "Escape") {
-          o();
+          c();
           return;
         }
         if (e.key === "ArrowUp" || e.key === "ArrowDown") {
           e.preventDefault();
-          const d = r.current;
+          const d = t.current;
           if (!d) return;
-          const n = Array.from(d.querySelectorAll("a")), u = n.findIndex((i) => i === document.activeElement), y = e.key === "ArrowDown" ? (u + 1) % n.length : (u - 1 + n.length) % n.length;
-          n[y].focus();
+          const n = Array.from(d.querySelectorAll("a")), y = n.findIndex((i) => i === document.activeElement), f = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
+          n[f].focus();
         }
       }
     };
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [r, t, o]);
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [r, t, o, c]);
 }
 export {
-  l as useKeyboardNav
+  s as useKeyboardNav
 };

package/dist/components/preact/SearchModal/hooks/useSearch.js

@@ -1,36 +1,43 @@
-import { A as h, y as p, d as g } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { A as u, y as p, d as w } from "../../../../chunks/hooks.module.BFfOesdf.js";
 import { getSiteIcon as S } from "../utils/index.js";
-function w(s, r) {
-  const t = h(null), c = h("");
+function T(s, r) {
+  const t = u(null), c = u("");
   return p(() => () => {
     t.current && clearTimeout(t.current);
   }, []), { reset: () => {
     t.current && clearTimeout(t.current);
-  }, run: (e) => {
-    c.current = e, t.current = setTimeout(
+  }, run: (h) => {
+    c.current = h, t.current = setTimeout(
       () => s(c.current),
       r
     );
   } };
 }
-function y() {
-  const [s, r] = g({
+function R() {
+  const [s, r] = w({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), { reset: t, run: c } = w((e) => {
+  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = T((e) => {
     (e.length > 2 || e.length === 0) && o(e);
   }, 150), o = async (e) => {
     if (!(window != null && window.pagefind)) return;
-    r((n) => ({ ...n, isLoading: !0 }));
-    const i = await window.pagefind.search(e), d = await Promise.all(
-      i.results.map(async (n) => {
-        var u, l, m;
+    if (r((n) => ({ ...n, isLoading: !0 })), t.current.has(e)) {
+      r((n) => ({
+        ...n,
+        results: t.current.get(e),
+        isLoading: !1
+      }));
+      return;
+    }
+    const i = await window.pagefind.search(e), g = await Promise.all(
+      i.results.slice(0, 15).map(async (n) => {
+        var m, f, d;
         const a = await n.data();
         return {
-          icon: S((u = a.meta) == null ? void 0 : u.content_type),
-          content_type: (l = a.meta) == null ? void 0 : l.content_type,
-          label: (m = a.meta) == null ? void 0 : m.title,
+          icon: S((m = a.meta) == null ? void 0 : m.content_type),
+          content_type: (f = a.meta) == null ? void 0 : f.content_type,
+          label: (d = a.meta) == null ? void 0 : d.title,
           url: a.url,
           excerpt: a.excerpt
         };
@@ -38,7 +45,7 @@ function y() {
     );
     r((n) => ({
       ...n,
-      results: d,
+      results: g,
       isLoading: !1
     }));
   };
@@ -46,12 +53,12 @@ function y() {
     state: s,
     actions: {
       setSearchTerm: (e) => {
-        r((i) => ({ ...i, searchTerm: e })), t(), c(e);
+        r((i) => ({ ...i, searchTerm: e })), c(), l(e);
       },
       submitSearch: o
     }
   };
 }
 export {
-  y as useSearch
+  R as useSearch
 };

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.d.ts

@@ -10,4 +10,4 @@
  * @param onOpen - Callback to open the search interface.
  * @param onClose - Callback to close the search interface.
  */
-export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;
+export declare function useSearchHotkeys(isPagefindLoaded: boolean, isOpen: boolean, onOpen: () => void, onClose: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js

@@ -1,12 +1,13 @@
-import { y as d } from "../../../../chunks/hooks.module.ExpuRnbo.js";
-function m(t, n, o) {
-  d(() => {
-    const r = (e) => {
-      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
+import { y as u } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function a(t, r, n, o) {
+  u(() => {
+    if (!t) return;
+    const m = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), r ? o() : n());
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [t, n, o]);
+    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [t, r, n, o]);
 }
 export {
-  m as useSearchHotkeys
+  a as useSearchHotkeys
 };

package/dist/components/preact/SearchModal/hooks/useSearchParams.d.ts

@@ -8,4 +8,4 @@
  * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
  */
-export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;
+export declare function useSearchParams(isPagefindLoaded: boolean, setSearchTerm: (term: string) => void, onOpen: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchParams.js

@@ -1,11 +1,11 @@
-import { y as e } from "../../../../chunks/hooks.module.ExpuRnbo.js";
-function t(a, o) {
-  e(() => {
-    if (typeof location > "u") return;
-    const r = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
-    r && (a(r), o());
-  }, [a, o]);
+import { y as c } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function n(r, o, a) {
+  c(() => {
+    if (typeof location > "u" || r) return;
+    const e = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
+    e && (o(e), a());
+  }, [r]);
 }
 export {
-  t as useSearchParams
+  n as useSearchParams
 };

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -9,4 +9,4 @@
  *
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
-export declare function useSearchToggles(onOpen: () => void): void;
+export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.js

@@ -1,15 +1,16 @@
-import { y as c } from "../../../../chunks/hooks.module.ExpuRnbo.js";
-function l(t) {
-  c(() => {
-    const r = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (r.length)
-      return r.forEach((e) => {
-        e.removeAttribute("disabled"), e.addEventListener("click", t);
+import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function i(c, r) {
+  l(() => {
+    if (!c) return;
+    const t = document.querySelectorAll("[data-ntl-search-toggle]");
+    if (t.length)
+      return t.forEach((e) => {
+        e.removeAttribute("disabled"), e.addEventListener("click", r);
       }), () => {
-        r.forEach((e) => e.removeEventListener("click", t));
+        t.forEach((e) => e.removeEventListener("click", r));
       };
-  }, [t]);
+  }, [c, r]);
 }
 export {
-  l as useSearchToggles
+  i as useSearchToggles
 };

package/dist/components/preact/index.js

@@ -5,7 +5,7 @@ import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js"
 import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
 import "preact";
-import "../../chunks/hooks.module.ExpuRnbo.js";
+import "../../chunks/hooks.module.BFfOesdf.js";
 import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
   m as Icon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -2,11 +2,11 @@ import { type ComponentChildren } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import cn from "classnames"
 
-import Modal from '@components/preact/Modal/Modal';
-import KeyboardKey from '@components/preact/KeyboardKey/KeyboardKey';
+import Modal from '../../../../preact/Modal/Modal';
+import KeyboardKey from '../../../../preact/KeyboardKey/KeyboardKey';
 import SearchWindow from '../../components/SearchWindow';
 import SearchInput from '../../components/SearchInput';
-import { useClickOutside } from '@utils/useClickOutside';
+import { useClickOutside } from '../../../../../utils/useClickOutside';
 import {
   useSearch,
   useKeyboardNav,
@@ -23,6 +23,26 @@ interface Props {
 }
 
 function SearchModal(props: Props = {className: '', children: null}) {
+  const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
+
+  // Poll for the existence of window.pagefind.
+  useEffect(() => {
+    const checkForPagefind = () => {
+      if (window.pagefind) {
+        setIsPagefindLoaded(true);
+        if (intervalId) clearInterval(intervalId);
+      }
+    };
+
+    // Check immediately and then start polling every 100ms.
+    checkForPagefind();
+    const intervalId = setInterval(checkForPagefind, 100);
+
+    // Cleanup the interval when the component unmounts.
+    return () => clearInterval(intervalId);
+  }, []);
+
+
   const { children, className, ...rest } = props;
   const { state, actions } = useSearch();
   const [searchOpen, setSearchOpen] = useState(false);
@@ -33,10 +53,10 @@ function SearchModal(props: Props = {className: '', children: null}) {
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchToggles(openSearch);
-  useSearchParams(actions.setSearchTerm, openSearch);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
-  useKeyboardNav(modalRef, searchOpen, closeSearch);
+  useSearchToggles(isPagefindLoaded, openSearch);
+  useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
+  useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
+  useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
 
   useEffect(() => {
     if (!modalRef.current) return;

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'preact';
 import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
@@ -25,13 +26,17 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
     );
   }
 
+  const renderedResults = useMemo(() => {
+    return results.map((result, i) => (
+      <li key={i} className="n-results-list-item">
+        <SearchLink {...result} />
+      </li>
+    ));
+  }, [results]);
+
   return (
     <ul className="n-results-list" role="list">
-      {results.slice(0, 15).map((result, idx) => (
-        <li key={idx} className="n-results-list-item">
-          <SearchLink {...result} />
-        </li>
-      ))}
+      {renderedResults}
     </ul>
   );
 };

package/packages/components/preact/SearchModal/hooks/useKeyboardNav.ts

@@ -15,11 +15,13 @@ import { useEffect } from 'preact/hooks';
  */
 
 export function useKeyboardNav(
+  isPagefindLoaded: boolean,
   containerRef: RefObject<HTMLElement>,
   isOpen: boolean,
   onClose: () => void
 ) {
   useEffect(() => {
+    if (!isPagefindLoaded) return 
     const handleKeydown = (e: KeyboardEvent) => {
       if (!isOpen) return;
 
@@ -46,5 +48,5 @@ export function useKeyboardNav(
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [containerRef, isOpen, onClose]);
+  }, [isPagefindLoaded, containerRef, isOpen, onClose]);
 }

package/packages/components/preact/SearchModal/hooks/useSearch.ts

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState, useRef } from 'preact/hooks';
 import type { SearchState } from '../types/search.types';
 import { useTimeout } from '../../../../utils/useTimeout';
 import { getSiteIcon } from '../utils';
@@ -19,6 +19,7 @@ export function useSearch() {
     results: [],
     isLoading: false,
   });
+  const cacheRef = useRef(new Map());
 
   const { reset, run } = useTimeout((query: string) => {
     if (query.length > 2 || query.length === 0) {
@@ -30,10 +31,18 @@ export function useSearch() {
     if (!window?.pagefind) return;
 
     setSearchState(prev => ({ ...prev, isLoading: true }));
-
+    
+    if (cacheRef.current.has(query)) {
+      setSearchState(prev => ({
+        ...prev,
+        results: cacheRef.current.get(query),
+        isLoading: false,
+      }));
+      return;
+    }
     const search = await window.pagefind.search(query);
     const results = await Promise.all(
-      search.results.map(async (result: any) => {
+      search.results.slice(0, 15).map(async (result: any) => {
         const data = await result.data();
         return {
           icon: getSiteIcon(data.meta?.content_type),

package/packages/components/preact/SearchModal/hooks/useSearchHotkeys.ts

@@ -13,8 +13,10 @@ import { useEffect } from 'preact/hooks';
  * @param onClose - Callback to close the search interface.
  */
 
-export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void) {
+export function useSearchHotkeys(isPagefindLoaded: boolean, isOpen: boolean, onOpen: () => void, onClose: () => void) {
   useEffect(() => {
+    if (!isPagefindLoaded) return;
+    
     const handleKeydown = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === 'k') {
         e.preventDefault();
@@ -25,5 +27,5 @@ export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: (
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [isOpen, onOpen, onClose]);
+  }, [isPagefindLoaded, isOpen, onOpen, onClose]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchParams.ts

@@ -11,13 +11,13 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
  */
 
-export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void) {
+export function useSearchParams(isPagefindLoaded: boolean, setSearchTerm: (term: string) => void, onOpen: () => void) {
   useEffect(() => {
-    if (typeof location === 'undefined') return;
+    if (typeof location === 'undefined' || isPagefindLoaded) return;
     const query = location?.search && new URLSearchParams(location.search).get('search');
     if (query) {
       setSearchTerm(query);
       onOpen();
     }
-  }, [setSearchTerm, onOpen]);
+  }, [isPagefindLoaded]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -12,8 +12,9 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(onOpen: () => void) {
+export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
   useEffect(() => {
+    if (!isPagefindLoaded) return
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
@@ -26,5 +27,5 @@ export function useSearchToggles(onOpen: () => void) {
     return () => {
       toggles.forEach(t => t.removeEventListener('click', onOpen));
     };
-  }, [onOpen]);
+  }, [isPagefindLoaded, onOpen]);
 }