@netlify/spark-ui 0.0.41 → 0.0.42-alpha.1

package/dist/analytics/logger.d.ts

@@ -0,0 +1,13 @@
+export declare class Logger {
+    private dataLayer;
+    /**
+     * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
+     */
+    constructor(dl?: any[]);
+    /**
+     * Pushes an event payload into the dataLayer.
+     * @param eventName e.g. 'searchResultClick'
+     * @param payload   additional key/value data
+     */
+    push(eventName: string, payload?: Record<string, any>): void;
+}

package/dist/chunks/{compat.module.AxtqoZMv.js → compat.module.DT16W4Wr.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.BFfOesdf.js";
+import "./hooks.module.CNV9mxng.js";
 function C(e, t) {
   for (var r in t) e[r] = t[r];
   return e;

package/dist/chunks/hooks.module.CNV9mxng.js

@@ -0,0 +1,138 @@
+import { options as x } from "preact";
+var v, n, H, y, m = 0, C = [], u = x, A = u.__b, q = u.__r, F = u.diffed, g = u.__c, k = u.unmount, T = u.__;
+function d(_, t) {
+  u.__h && u.__h(n, _, m || t), m = 0;
+  var r = n.__H || (n.__H = { __: [], __h: [] });
+  return _ >= r.__.length && r.__.push({}), r.__[_];
+}
+function S(_) {
+  return m = 1, z(j, _);
+}
+function z(_, t, r) {
+  var o = d(v++, 2);
+  if (o.t = _, !o.__c && (o.__ = [r ? r(t) : j(void 0, t), function(c) {
+    var e = o.__N ? o.__N[0] : o.__[0], f = o.t(e, c);
+    e !== f && (o.__N = [f, o.__[1]], o.__c.setState({}));
+  }], o.__c = n, !n.__f)) {
+    var a = function(c, e, f) {
+      if (!o.__c.__H) return !0;
+      var l = o.__c.__H.__.filter(function(i) {
+        return !!i.__c;
+      });
+      if (l.every(function(i) {
+        return !i.__N;
+      })) return !h || h.call(this, c, e, f);
+      var E = o.__c.props !== c;
+      return l.forEach(function(i) {
+        if (i.__N) {
+          var w = i.__[0];
+          i.__ = i.__N, i.__N = void 0, w !== i.__[0] && (E = !0);
+        }
+      }), h && h.call(this, c, e, f) || E;
+    };
+    n.__f = !0;
+    var h = n.shouldComponentUpdate, N = n.componentWillUpdate;
+    n.componentWillUpdate = function(c, e, f) {
+      if (this.__e) {
+        var l = h;
+        h = void 0, a(c, e, f), h = l;
+      }
+      N && N.call(this, c, e, f);
+    }, n.shouldComponentUpdate = a;
+  }
+  return o.__N || o.__;
+}
+function G(_, t) {
+  var r = d(v++, 3);
+  !u.__s && W(r.__H, t) && (r.__ = _, r.u = t, n.__H.__h.push(r));
+}
+function I(_) {
+  return m = 5, b(function() {
+    return { current: _ };
+  }, []);
+}
+function b(_, t) {
+  var r = d(v++, 7);
+  return W(r.__H, t) && (r.__ = _(), r.__H = t, r.__h = _), r.__;
+}
+function J(_, t) {
+  return m = 8, b(function() {
+    return _;
+  }, t);
+}
+function B() {
+  for (var _; _ = C.shift(); ) if (_.__P && _.__H) try {
+    _.__H.__h.forEach(s), _.__H.__h.forEach(p), _.__H.__h = [];
+  } catch (t) {
+    _.__H.__h = [], u.__e(t, _.__v);
+  }
+}
+u.__b = function(_) {
+  n = null, A && A(_);
+}, u.__ = function(_, t) {
+  _ && t.__k && t.__k.__m && (_.__m = t.__k.__m), T && T(_, t);
+}, u.__r = function(_) {
+  q && q(_), v = 0;
+  var t = (n = _.__c).__H;
+  t && (H === n ? (t.__h = [], n.__h = [], t.__.forEach(function(r) {
+    r.__N && (r.__ = r.__N), r.u = r.__N = void 0;
+  })) : (t.__h.forEach(s), t.__h.forEach(p), t.__h = [], v = 0)), H = n;
+}, u.diffed = function(_) {
+  F && F(_);
+  var t = _.__c;
+  t && t.__H && (t.__H.__h.length && (C.push(t) !== 1 && y === u.requestAnimationFrame || ((y = u.requestAnimationFrame) || D)(B)), t.__H.__.forEach(function(r) {
+    r.u && (r.__H = r.u), r.u = void 0;
+  })), H = n = null;
+}, u.__c = function(_, t) {
+  t.some(function(r) {
+    try {
+      r.__h.forEach(s), r.__h = r.__h.filter(function(o) {
+        return !o.__ || p(o);
+      });
+    } catch (o) {
+      t.some(function(a) {
+        a.__h && (a.__h = []);
+      }), t = [], u.__e(o, r.__v);
+    }
+  }), g && g(_, t);
+}, u.unmount = function(_) {
+  k && k(_);
+  var t, r = _.__c;
+  r && r.__H && (r.__H.__.forEach(function(o) {
+    try {
+      s(o);
+    } catch (a) {
+      t = a;
+    }
+  }), r.__H = void 0, t && u.__e(t, r.__v));
+};
+var U = typeof requestAnimationFrame == "function";
+function D(_) {
+  var t, r = function() {
+    clearTimeout(o), U && cancelAnimationFrame(t), setTimeout(_);
+  }, o = setTimeout(r, 100);
+  U && (t = requestAnimationFrame(r));
+}
+function s(_) {
+  var t = n, r = _.__c;
+  typeof r == "function" && (_.__c = void 0, r()), n = t;
+}
+function p(_) {
+  var t = n;
+  _.__c = _.__(), n = t;
+}
+function W(_, t) {
+  return !_ || _.length !== t.length || t.some(function(r, o) {
+    return r !== _[o];
+  });
+}
+function j(_, t) {
+  return typeof t == "function" ? t(_) : t;
+}
+export {
+  I as A,
+  b as T,
+  S as d,
+  J as q,
+  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.AxtqoZMv.js";
+import { D as d } from "../../../chunks/compat.module.DT16W4Wr.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.BFfOesdf.js";
+import { d as i, y as s } from "../../../../chunks/hooks.module.CNV9mxng.js";
 import h from "../../Icon/index.js";
 const m = (a) => {
   const [t, l] = i(""), c = (r) => {

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

@@ -1,17 +1,22 @@
 import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import s from "../../../Icon/index.js";
-import '../../../../../assets/SearchLink.css';const m = ({ icon: e, label: c, url: r, excerpt: l, resource: n }) => /* @__PURE__ */ a("a", { className: "n-search-link", href: r, children: [
-  e && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(s, { name: e }) }),
-  /* @__PURE__ */ a("div", { className: "n-search-link-body", children: [
-    /* @__PURE__ */ a("p", { className: "n-search-link-title", children: [
-      /* @__PURE__ */ a("span", { className: "n-search-link-label", children: c }),
-      " ",
-      n && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": n, children: n })
+import "../../../../../chunks/hooks.module.CNV9mxng.js";
+import { useSearchLogger as h } from "../../hooks/useSearchLogger.js";
+import c from "../../../Icon/index.js";
+import '../../../../../assets/SearchLink.css';const k = ({ icon: n, label: s, url: r, excerpt: l, resource: e }) => {
+  const { handleClick: i } = h();
+  return /* @__PURE__ */ a("a", { className: "n-search-link", href: r, onClick: i, children: [
+    n && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(c, { name: n }) }),
+    /* @__PURE__ */ a("div", { className: "n-search-link-body", children: [
+      /* @__PURE__ */ a("p", { className: "n-search-link-title", children: [
+        /* @__PURE__ */ a("span", { className: "n-search-link-label", children: s }),
+        " ",
+        e && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": e, children: e })
+      ] }),
+      l && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: l } })
     ] }),
-    l && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: l } })
-  ] }),
-  /* @__PURE__ */ a("div", { className: "n-search-link-icon", children: /* @__PURE__ */ a(s, { name: "caretRight" }) })
-] });
+    /* @__PURE__ */ a("div", { className: "n-search-link-icon", children: /* @__PURE__ */ a(c, { name: "caretRight" }) })
+  ] });
+};
 export {
-  m as default
+  k as default
 };

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

@@ -1,16 +1,17 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as N, y as u, d as v } from "../../../../../chunks/hooks.module.BFfOesdf.js";
+import { A as v, y as u, d as g } from "../../../../../chunks/hooks.module.CNV9mxng.js";
 import T from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
-import k from "../SearchWindow.js";
-import w from "../SearchInput.js";
-import { useSearch as I } from "../../hooks/useSearch.js";
-import { useKeyboardNav as L } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as O } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as P } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as E } from "../../hooks/useSearchToggles.js";
-import '../../../../../assets/SearchModal.css';function K(s) {
-  const r = N(null);
+import L from "../SearchWindow.js";
+import k from "../SearchInput.js";
+import { useSearch as w } from "../../hooks/useSearch.js";
+import { useSearchLogger as I } from "../../hooks/useSearchLogger.js";
+import { useKeyboardNav as O } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as P } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as E } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
+import '../../../../../assets/SearchModal.css';function M(s) {
+  const r = v(null);
   return u(() => {
     function t(i) {
       r.current && !r.current.contains(i.target) && s();
@@ -20,8 +21,8 @@ import '../../../../../assets/SearchModal.css';function K(s) {
     };
   }, [s]), r;
 }
-function j(s = { className: "", children: null }) {
-  const [r, t] = v(!1);
+function z(s = { className: "", children: null }) {
+  const [r, t] = g(!1);
   u(() => {
     let c;
     const S = () => {
@@ -29,17 +30,17 @@ function j(s = { className: "", children: null }) {
     };
     return S(), c = setInterval(S, 100), () => clearInterval(c);
   }, []);
-  const { children: i, className: f, ...g } = s, { state: n, actions: h } = I(), [o, p] = v(!1), l = () => p(!0), m = () => p(!1), a = N(null), y = K(m);
-  return E(r, l), P(r, h.setSearchTerm, l), O(r, o, l, m), L(r, a, o, m), u(() => {
-    a.current && (o ? a.current.showModal() : a.current.close());
-  }, [o]), /* @__PURE__ */ e(T, { ref: a, className: `n-search-modal ${f || ""}`, ...g, children: /* @__PURE__ */ e("div", { ref: y, className: "n-search-container", children: [
-    /* @__PURE__ */ e(w, { setSearchTerm: h.setSearchTerm, initialValue: n.searchTerm }),
+  const { children: i, className: f, ...N } = s, { state: a, actions: h } = w(), [n, p] = g(!1), m = () => p(!0), l = () => p(!1), o = v(null), y = M(l);
+  return I(a), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, o, n, l), u(() => {
+    o.current && (n ? o.current.showModal() : o.current.close());
+  }, [n]), /* @__PURE__ */ e(T, { ref: o, className: `n-search-modal ${f || ""}`, ...N, children: /* @__PURE__ */ e("div", { ref: y, className: "n-search-container", children: [
+    /* @__PURE__ */ e(k, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
     /* @__PURE__ */ e(
-      k,
+      L,
       {
-        searchLoading: n.isLoading,
-        searchTerm: n.searchTerm,
-        results: n.results,
+        searchLoading: a.isLoading,
+        searchTerm: a.searchTerm,
+        results: a.results,
         children: i
       }
     ),
@@ -58,5 +59,5 @@ function j(s = { className: "", children: null }) {
   ] }) });
 }
 export {
-  j as default
+  z 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.AxtqoZMv.js";
+import { D as t } from "../../../../../chunks/compat.module.DT16W4Wr.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,5 +1,5 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { T as o } from "../../../../chunks/hooks.module.CNV9mxng.js";
 import t from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
 const h = ({

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

@@ -1,4 +1,5 @@
 export { useSearch } from '../hooks/useSearch';
+export { useSearchLogger } from './useSearchLogger';
 export { useKeyboardNav } from '../hooks/useKeyboardNav';
 export { useSearchHotkeys } from '../hooks/useSearchHotkeys';
 export { useSearchParams } from '../hooks/useSearchParams';

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

@@ -1,12 +1,14 @@
 import { useSearch as o } from "./useSearch.js";
-import { useKeyboardNav as s } from "./useKeyboardNav.js";
-import { useSearchHotkeys as t } from "./useSearchHotkeys.js";
-import { useSearchParams as p } from "./useSearchParams.js";
-import { useSearchToggles as x } from "./useSearchToggles.js";
+import { useSearchLogger as s } from "./useSearchLogger.js";
+import { useKeyboardNav as t } from "./useKeyboardNav.js";
+import { useSearchHotkeys as p } from "./useSearchHotkeys.js";
+import { useSearchParams as x } from "./useSearchParams.js";
+import { useSearchToggles as h } from "./useSearchToggles.js";
 export {
-  s as useKeyboardNav,
+  t as useKeyboardNav,
   o as useSearch,
-  t as useSearchHotkeys,
-  p as useSearchParams,
-  x as useSearchToggles
+  p as useSearchHotkeys,
+  s as useSearchLogger,
+  x as useSearchParams,
+  h as useSearchToggles
 };

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function s(r, t, o, c) {
   l(() => {
     if (!r) return;

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

@@ -1,4 +1,4 @@
-import { A as i, y as S, d as T } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { A as i, y as S, d as T } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function L(o, n) {
   const e = i(null), s = i("");
   return S(() => () => {

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

@@ -1,4 +1,4 @@
-import { y as u } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { y as u } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function a(t, r, n, o) {
   u(() => {
     if (!t) return;

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

@@ -0,0 +1,18 @@
+import { SearchState } from '../types/search.types';
+/**
+ * Hook that logs search-related events to your analytics Logger.
+ *
+ * It will:
+ * - Push a `searchQueryChanged` event whenever the search term changes.
+ * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
+ * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ *
+ * @param {SearchState} state - The current search state, containing:
+ *   - `searchTerm` (string): the text the user has searched for.
+ *   - `results` (Array<any>): the array of result objects returned.
+ * @returns {{ handleClick: (e: Event) => void }}
+ *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ */
+export declare function useSearchLogger(state?: SearchState): {
+    handleClick: (e: Event) => void;
+};

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

@@ -0,0 +1,43 @@
+var a = Object.defineProperty;
+var y = (r, e, c) => e in r ? a(r, e, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[e] = c;
+var h = (r, e, c) => y(r, typeof e != "symbol" ? e + "" : e, c);
+import { A as d, y as l, q as g } from "../../../../chunks/hooks.module.CNV9mxng.js";
+class L {
+  /**
+   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
+   */
+  constructor(e) {
+    h(this, "dataLayer");
+    this.dataLayer = Array.isArray(e) ? e : window.dataLayer, Array.isArray(this.dataLayer) || (window.dataLayer = [], this.dataLayer = window.dataLayer);
+  }
+  /**
+   * Pushes an event payload into the dataLayer.
+   * @param eventName e.g. 'searchResultClick'
+   * @param payload   additional key/value data
+   */
+  push(e, c = {}) {
+    this.dataLayer.push({ event: e, ...c });
+  }
+}
+function m(r) {
+  const e = d(new L());
+  return l(() => {
+    r != null && r.searchTerm && (console.log("Pushing searchQueryChanged"), e.current.push("searchQueryChanged", { query: r == null ? void 0 : r.searchTerm }));
+  }, [r == null ? void 0 : r.searchTerm]), l(() => {
+    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && (console.log("Pushing searchNoResults"), e.current.push("searchNoResults", { query: r == null ? void 0 : r.searchTerm }));
+  }, [r == null ? void 0 : r.results]), {
+    handleClick: g((o) => {
+      var u;
+      const n = o.target.closest("a");
+      if (!n) return;
+      const i = (u = n.querySelector(".n-search-link-label")) == null ? void 0 : u.innerHTML, s = n.getAttribute("href");
+      e.current.push("searchResultClick", {
+        searchResultTitle: i,
+        searchResultURL: s
+      });
+    }, [])
+  };
+}
+export {
+  m as useSearchLogger
+};

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

@@ -1,4 +1,4 @@
-import { y as c } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { y as c } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function n(r, o, a) {
   c(() => {
     if (typeof location > "u" || r) return;

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function i(c, r) {
   l(() => {
     if (!c) return;

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.BFfOesdf.js";
+import "../../chunks/hooks.module.CNV9mxng.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.41",
+  "version": "0.0.42-alpha.1",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/analytics/logger.ts

@@ -0,0 +1,26 @@
+export class Logger {
+  private dataLayer: any[];
+
+  /**
+   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
+   */
+  constructor(dl?: any[]) {
+    // Use injected or global dataLayer
+    this.dataLayer = Array.isArray(dl) ? dl : (window as any).dataLayer;
+
+    // If for some reason it's not an array, initialize it
+    if (!Array.isArray(this.dataLayer)) {
+      (window as any).dataLayer = [];
+      this.dataLayer = (window as any).dataLayer;
+    }
+  }
+
+  /**
+   * Pushes an event payload into the dataLayer.
+   * @param eventName e.g. 'searchResultClick'
+   * @param payload   additional key/value data
+   */
+  push(eventName: string, payload: Record<string, any> = {}): void {
+    this.dataLayer.push({ event: eventName, ...payload });
+  }
+}

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

@@ -1,11 +1,14 @@
 import type { SearchLinkProps } from '../../types/search.types';
+import { useSearchLogger } from '../../hooks';
 import './SearchLink.css';
 
 import Icon from '../../../Icon';
 
 const SearchLink = ({ icon, label, url, excerpt, resource }: SearchLinkProps) => {
+  const { handleClick } = useSearchLogger()
+  
   return (
-    <a className="n-search-link" href={url}>
+    <a className="n-search-link" href={url} onClick={handleClick}>
       {icon && (
         <span className="n-search-link-icon">
           <Icon name={icon} />

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

@@ -12,6 +12,7 @@ import {
   useSearchHotkeys,
   useSearchParams,
   useSearchToggles,
+  useSearchLogger,
 } from '../../hooks';
 
 import './SearchModal.css';
@@ -54,7 +55,8 @@ function SearchModal(props: Props = {className: '', children: null}) {
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchToggles(isPagefindLoaded, openSearch);
+  useSearchLogger(state)
+  useSearchToggles(isPagefindLoaded,  openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);

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

@@ -1,4 +1,5 @@
 export { useSearch } from '../hooks/useSearch';
+export { useSearchLogger } from './useSearchLogger';
 export { useKeyboardNav } from '../hooks/useKeyboardNav';
 export { useSearchHotkeys } from '../hooks/useSearchHotkeys';
 export { useSearchParams } from '../hooks/useSearchParams';

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

@@ -0,0 +1,61 @@
+import type { SearchState } from '../types/search.types';
+import { useEffect, useRef, useCallback } from 'preact/hooks';
+import { Logger } from '../../../../analytics/logger';
+
+/**
+ * Hook that logs search-related events to your analytics Logger.
+ *
+ * It will:
+ * - Push a `searchQueryChanged` event whenever the search term changes.
+ * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
+ * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ *
+ * @param {SearchState} state - The current search state, containing:
+ *   - `searchTerm` (string): the text the user has searched for.
+ *   - `results` (Array<any>): the array of result objects returned.
+ * @returns {{ handleClick: (e: Event) => void }}
+ *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ */
+
+
+export function useSearchLogger(state?: SearchState) {
+  const loggerRef = useRef<Logger>(new Logger());
+
+  // Log search query
+  useEffect(() => {
+    if (!state?.searchTerm) return 
+      
+    console.log('Pushing searchQueryChanged')
+    loggerRef.current.push('searchQueryChanged', { query: state?.searchTerm });
+  }, [state?.searchTerm]);
+
+  // Log zero‑hit searches
+  useEffect(() => {
+    if (!state?.results) return 
+
+    if (state?.searchTerm && state.results.length === 0) {
+    console.log('Pushing searchNoResults')
+
+      loggerRef.current.push('searchNoResults', { query: state?.searchTerm });
+    }
+  }, [state?.results]);
+
+  const handleResultClick = useCallback((e: Event) => {
+    const anchor = (e.target as HTMLElement).closest('a');
+    
+    if (!anchor) return
+
+    const label = anchor.querySelector('.n-search-link-label')?.innerHTML
+    const url = anchor.getAttribute('href')
+
+    loggerRef.current.push('searchResultClick', {
+      searchResultTitle: label,
+      searchResultURL: url,
+    });
+  }, []);
+
+
+  return {
+    handleClick: handleResultClick
+  };
+}

package/dist/chunks/hooks.module.BFfOesdf.js

@@ -1,132 +0,0 @@
-import { options as w } from "preact";
-var v, u, H, y, s = 0, C = [], n = w, A = n.__b, F = n.__r, g = n.diffed, k = n.__c, q = n.unmount, T = n.__;
-function d(_, t) {
-  n.__h && n.__h(u, _, s || t), s = 0;
-  var r = u.__H || (u.__H = { __: [], __h: [] });
-  return _ >= r.__.length && r.__.push({}), r.__[_];
-}
-function S(_) {
-  return s = 1, x(W, _);
-}
-function x(_, t, r) {
-  var o = d(v++, 2);
-  if (o.t = _, !o.__c && (o.__ = [r ? r(t) : W(void 0, t), function(c) {
-    var e = o.__N ? o.__N[0] : o.__[0], f = o.t(e, c);
-    e !== f && (o.__N = [f, o.__[1]], o.__c.setState({}));
-  }], o.__c = u, !u.__f)) {
-    var a = function(c, e, f) {
-      if (!o.__c.__H) return !0;
-      var m = o.__c.__H.__.filter(function(i) {
-        return !!i.__c;
-      });
-      if (m.every(function(i) {
-        return !i.__N;
-      })) return !h || h.call(this, c, e, f);
-      var E = o.__c.props !== c;
-      return m.forEach(function(i) {
-        if (i.__N) {
-          var j = i.__[0];
-          i.__ = i.__N, i.__N = void 0, j !== i.__[0] && (E = !0);
-        }
-      }), h && h.call(this, c, e, f) || E;
-    };
-    u.__f = !0;
-    var h = u.shouldComponentUpdate, N = u.componentWillUpdate;
-    u.componentWillUpdate = function(c, e, f) {
-      if (this.__e) {
-        var m = h;
-        h = void 0, a(c, e, f), h = m;
-      }
-      N && N.call(this, c, e, f);
-    }, u.shouldComponentUpdate = a;
-  }
-  return o.__N || o.__;
-}
-function G(_, t) {
-  var r = d(v++, 3);
-  !n.__s && b(r.__H, t) && (r.__ = _, r.u = t, u.__H.__h.push(r));
-}
-function I(_) {
-  return s = 5, z(function() {
-    return { current: _ };
-  }, []);
-}
-function z(_, t) {
-  var r = d(v++, 7);
-  return b(r.__H, t) && (r.__ = _(), r.__H = t, r.__h = _), r.__;
-}
-function B() {
-  for (var _; _ = C.shift(); ) if (_.__P && _.__H) try {
-    _.__H.__h.forEach(l), _.__H.__h.forEach(p), _.__H.__h = [];
-  } catch (t) {
-    _.__H.__h = [], n.__e(t, _.__v);
-  }
-}
-n.__b = function(_) {
-  u = null, A && A(_);
-}, n.__ = function(_, t) {
-  _ && t.__k && t.__k.__m && (_.__m = t.__k.__m), T && T(_, t);
-}, n.__r = function(_) {
-  F && F(_), v = 0;
-  var t = (u = _.__c).__H;
-  t && (H === u ? (t.__h = [], u.__h = [], t.__.forEach(function(r) {
-    r.__N && (r.__ = r.__N), r.u = r.__N = void 0;
-  })) : (t.__h.forEach(l), t.__h.forEach(p), t.__h = [], v = 0)), H = u;
-}, n.diffed = function(_) {
-  g && g(_);
-  var t = _.__c;
-  t && t.__H && (t.__H.__h.length && (C.push(t) !== 1 && y === n.requestAnimationFrame || ((y = n.requestAnimationFrame) || D)(B)), t.__H.__.forEach(function(r) {
-    r.u && (r.__H = r.u), r.u = void 0;
-  })), H = u = null;
-}, n.__c = function(_, t) {
-  t.some(function(r) {
-    try {
-      r.__h.forEach(l), r.__h = r.__h.filter(function(o) {
-        return !o.__ || p(o);
-      });
-    } catch (o) {
-      t.some(function(a) {
-        a.__h && (a.__h = []);
-      }), t = [], n.__e(o, r.__v);
-    }
-  }), k && k(_, t);
-}, n.unmount = function(_) {
-  q && q(_);
-  var t, r = _.__c;
-  r && r.__H && (r.__H.__.forEach(function(o) {
-    try {
-      l(o);
-    } catch (a) {
-      t = a;
-    }
-  }), r.__H = void 0, t && n.__e(t, r.__v));
-};
-var U = typeof requestAnimationFrame == "function";
-function D(_) {
-  var t, r = function() {
-    clearTimeout(o), U && cancelAnimationFrame(t), setTimeout(_);
-  }, o = setTimeout(r, 100);
-  U && (t = requestAnimationFrame(r));
-}
-function l(_) {
-  var t = u, r = _.__c;
-  typeof r == "function" && (_.__c = void 0, r()), u = t;
-}
-function p(_) {
-  var t = u;
-  _.__c = _.__(), u = t;
-}
-function b(_, t) {
-  return !_ || _.length !== t.length || t.some(function(r, o) {
-    return r !== _[o];
-  });
-}
-function W(_, t) {
-  return typeof t == "function" ? t(_) : t;
-}
-export {
-  I as A,
-  z as T,
-  S as d,
-  G as y
-};