@netlify/spark-ui 1.23.0 → 1.24.0

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

@@ -1,34 +1,40 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as K, K as L } from "../../../../../chunks/AskNetlify.CpaPeYsd.js";
-import P from "../../../Modal/Modal.js";
+import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DRcxknIz.js";
+import { A as L, K as P } from "../../../../../chunks/AskNetlify.BiMhcpol.js";
+import M from "../../../Modal/Modal.js";
 import h from "../../../KeyboardKey/KeyboardKey.js";
-import M from "../SearchWindow.js";
-import O from "../SearchInput.js";
-import Q from "../AskNetlifyLink.js";
-import { useSearch as C } from "../../hooks/useSearch.js";
-import { useSearchAnalytics as E } from "../../hooks/useSearchAnalytics.js";
-import { useKeyboardNav as R } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as q } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as x } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as D } from "../../hooks/useSearchToggles.js";
-import { useAskAnalytics as F } from "../../../AskNetlify/hooks/useAskAnalytics.js";
+import O from "../SearchWindow.js";
+import Q from "../SearchInput.js";
+import C from "../AskNetlifyLink.js";
+import { useSearch as E } from "../../hooks/useSearch.js";
+import { useSearchAnalytics as R } from "../../hooks/useSearchAnalytics.js";
+import { useKeyboardNav as q } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as x } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as D } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as F } from "../../hooks/useSearchToggles.js";
+import { useAskAnalytics as G } from "../../../AskNetlify/hooks/useAskAnalytics.js";
 import { Fragment as N } from "preact";
-import '../../../../../assets/SearchModal.css';function G(a) {
-  const n = g(null);
+import '../../../../../assets/SearchModal.css';function H(a) {
+  const s = g(null);
   return f(() => {
-    function s(m) {
-      n.current && !n.current.contains(m.target) && a();
+    function n(m) {
+      s.current && !s.current.contains(m.target) && a();
     }
-    return document.addEventListener("mousedown", s), () => {
-      document.removeEventListener("mousedown", s);
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
     };
-  }, [a]), n;
+  }, [a]), s;
 }
-function te(a = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
-  const { children: n, className: s, debug: m, ...T } = a, [c, o] = d({ current: "search" }), [i, p] = d(!1), [v, A] = d(""), l = () => p(!0), u = () => p(!1), t = g(null), I = G(u), { state: r, actions: S } = C();
-  D(l, o), x(l, S.setSearchTerm, A, o), q(i, l, u), R(t, i, u), E(r, m);
-  const { handleNewQuery: w, handleAnswer: b } = F();
+function se(a = {
+  className: "",
+  children: void 0,
+  debug: !1,
+  kapaIntegrationId: void 0,
+  filters: void 0
+}) {
+  const { children: s, className: n, debug: m, filters: T, ...v } = a, [c, o] = d({ current: "search" }), [i, p] = d(!1), [A, I] = d(""), l = () => p(!0), u = () => p(!1), t = g(null), w = H(u), { state: r, actions: S } = E(T);
+  F(l, o), D(l, S.setSearchTerm, I, o), x(i, l, u), q(t, i, u), R(r, m);
+  const { handleNewQuery: b, handleAnswer: K } = G();
   return f(() => {
     t.current && (i ? t.current.showModal() : t.current.close());
   }, [i]), f(() => {
@@ -36,43 +42,43 @@ function te(a = { className: "", children: void 0, debug: !1, kapaIntegrationId:
     const y = (k = t.current) == null ? void 0 : k.querySelector("input");
     y && y.focus();
   }, [c.current]), /* @__PURE__ */ e(
-    L,
+    P,
     {
       integrationId: a.kapaIntegrationId || "",
       callbacks: {
         askAI: {
-          onQuerySubmit: w,
-          onAnswerGenerationCompleted: b
+          onQuerySubmit: b,
+          onAnswerGenerationCompleted: K
         }
       },
       children: /* @__PURE__ */ e(
-        P,
+        M,
         {
           ref: t,
-          className: `n-search-modal ${s || ""}`,
+          className: `n-search-modal ${n || ""}`,
           "data-state": c.current,
-          ...T,
-          children: /* @__PURE__ */ e("div", { ref: I, className: "n-search-container", children: [
+          ...v,
+          children: /* @__PURE__ */ e("div", { ref: w, className: "n-search-container", children: [
             c.current === "ask" && /* @__PURE__ */ e(
-              K,
+              L,
               {
                 setModalState: o,
                 searchQuery: r.searchTerm,
-                urlParamQuery: v
+                urlParamQuery: A
               }
             ),
             c.current === "search" && /* @__PURE__ */ e(N, { children: [
-              /* @__PURE__ */ e(O, { setSearchTerm: S.setSearchTerm, initialValue: r.searchTerm }),
+              /* @__PURE__ */ e(Q, { setSearchTerm: S.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
-                M,
+                O,
                 {
                   setModalState: o,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
                   children: /* @__PURE__ */ e(N, { children: [
-                    a.kapaIntegrationId && /* @__PURE__ */ e(Q, { searchTerm: r.searchTerm, setModalState: o }),
-                    n
+                    a.kapaIntegrationId && /* @__PURE__ */ e(C, { searchTerm: r.searchTerm, setModalState: o }),
+                    s
                   ] })
                 }
               ),
@@ -96,5 +102,5 @@ function te(a = { className: "", children: void 0, debug: !1, kapaIntegrationId:
   );
 }
 export {
-  te as default
+  se 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 a } from "../../../../../chunks/compat.module.8cuvf1_R.js";
+import { D as a } from "../../../../../chunks/compat.module.BaLKWB4y.js";
 import o from "../../../Icon/index.js";
 import '../../../../../assets/SearchToggle.css';const s = a(function(r, t) {
   return /* @__PURE__ */ e("button", { id: r.id, ref: t, class: "n-search-toggle button", disabled: !0, "data-ntl-search-toggle": !0, children: [

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { y as l } from "../../../../chunks/hooks.module.DRcxknIz.js";
 function a(r, t, o) {
   l(() => {
     const c = (e) => {

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

@@ -1,4 +1,4 @@
-import { SearchState } from '../types/search.types';
+import { PagefindFilters, SearchState } from '../types/search.types';
 /**
  * Hook that encapsulates client-side search logic:
  *
@@ -8,7 +8,7 @@ import { SearchState } from '../types/search.types';
  * - Maps and formats raw search results into a consistent shape with title, excerpt, url, and icon
  * - Exposes `setSearchTerm` for live input handling and `submitSearch` for manual triggering
  */
-export declare function useSearch(): {
+export declare function useSearch(filters?: PagefindFilters): {
     state: SearchState;
     actions: {
         setSearchTerm: (query: string) => void;

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

@@ -1,52 +1,54 @@
-import { d as p, A as w } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { u as S } from "../../../../chunks/useTimeout.Cq4aqnDe.js";
-function x() {
-  const [d, s] = p({
+import { d as w, A as L } from "../../../../chunks/hooks.module.DRcxknIz.js";
+import { u as T } from "../../../../chunks/useTimeout.w16oNznN.js";
+function A(s) {
+  const [m, r] = w({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), n = w(/* @__PURE__ */ new Map()), { reset: h, run: m } = S((e) => {
-    e && e.length >= 2 && c(e);
-  }, 150), c = async (e) => {
-    var o;
+  }), o = L(/* @__PURE__ */ new Map()), { reset: g, run: p } = T((e) => {
+    e && e.length >= 2 && i(e);
+  }, 150), i = async (e) => {
+    var l;
     if (!(window != null && window.pagefind)) return;
-    if (s((a) => ({ ...a, isLoading: !0 })), n.current.has(e)) {
-      s((a) => ({
-        ...a,
-        results: n.current.get(e),
+    r((t) => ({ ...t, isLoading: !0 }));
+    const n = s ? `${e}::${JSON.stringify(s)}` : e;
+    if (o.current.has(n)) {
+      r((t) => ({
+        ...t,
+        results: o.current.get(n),
         isLoading: !1
       }));
       return;
     }
-    const t = await window.pagefind.debouncedSearch(e), i = (t == null ? void 0 : t.results) && await Promise.all(
-      (o = t == null ? void 0 : t.results) == null ? void 0 : o.slice(0, 15).map(async (a) => {
-        var l, u;
-        const r = await a.data(), f = (g) => g.replace("#", "");
+    const a = await window.pagefind.debouncedSearch(e, s ? { filters: s } : void 0), u = (a == null ? void 0 : a.results) && await Promise.all(
+      (l = a == null ? void 0 : a.results) == null ? void 0 : l.slice(0, 15).map(async (t) => {
+        var d, h;
+        const c = await t.data(), f = (S) => S.replace("#", "");
         return {
           icon: "pageWithLines",
-          resource: (l = r.meta) == null ? void 0 : l.resource,
-          label: (u = r.meta) == null ? void 0 : u.title,
-          url: r.url,
-          excerpt: f(r.excerpt)
+          resource: (d = c.meta) == null ? void 0 : d.resource,
+          label: (h = c.meta) == null ? void 0 : h.title,
+          url: c.url,
+          excerpt: f(c.excerpt)
         };
       })
     );
-    n.current.set(e, i), s((a) => ({
-      ...a,
-      results: i,
+    o.current.set(n, u), r((t) => ({
+      ...t,
+      results: u,
       isLoading: !1
     }));
   };
   return {
-    state: d,
+    state: m,
     actions: {
       setSearchTerm: (e) => {
-        s((t) => ({ ...t, searchTerm: e })), h(), m(e);
+        r((n) => ({ ...n, searchTerm: e })), g(), p(e);
       },
-      submitSearch: c
+      submitSearch: i
     }
   };
 }
 export {
-  x as useSearch
+  A as useSearch
 };

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

@@ -1,4 +1,4 @@
-import { A as y, y as h, q as d } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as y, y as h, q as d } from "../../../../chunks/hooks.module.DRcxknIz.js";
 import { A as T } from "../../../../chunks/analytics.D_dJH08O.js";
 function A(r, l) {
   const n = y(new T()).current, e = (c) => c.debug_mode = !0;

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

@@ -1,4 +1,4 @@
-import { y as d } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { y as d } from "../../../../chunks/hooks.module.DRcxknIz.js";
 function m(t, n, o) {
   d(() => {
     const r = (e) => {

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

@@ -1,4 +1,4 @@
-import { d as u, y as g } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { d as u, y as g } from "../../../../chunks/hooks.module.DRcxknIz.js";
 function m(a, c, i, r) {
   const [o, h] = u(!1);
   g(() => {

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { y as l } from "../../../../chunks/hooks.module.DRcxknIz.js";
 function n(t, c) {
   l(() => {
     const r = document.querySelectorAll("[data-ntl-search-toggle]");

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -38,3 +38,22 @@ export interface SearchGTMObjectProps {
     query?: string;
     debug_mode?: boolean;
 }
+/**
+ * A single Pagefind filter value. Either a direct match (string / array of
+ * strings) or an operator object for compound matching and exclusion.
+ *
+ * @see https://pagefind.app/docs/js-api-filtering/
+ */
+export type PagefindFilterValue = string | string[] | {
+    any?: string[];
+    all?: string[];
+    none?: string[];
+    not?: string[];
+};
+/**
+ * Pagefind filters passed to a search, keyed by filter name.
+ *
+ * @example { resource: 'docs' }              // only docs
+ * @example { tags: { none: ['blog'] } }      // everything except blog posts
+ */
+export type PagefindFilters = Record<string, PagefindFilterValue>;

package/dist/components/preact/index.js

@@ -4,9 +4,9 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.CpaPeYsd.js";
+import { A as S } from "../../chunks/AskNetlify.BiMhcpol.js";
 import "preact";
-import "../../chunks/hooks.module.DGkdD5n9.js";
+import "../../chunks/hooks.module.DRcxknIz.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
   S as AskNetlify,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -51,11 +51,11 @@
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/npm": "^13.0.0",
     "@terrazzo/cli": "^0.10.3",
     "@terrazzo/plugin-css": "^0.10.0",
     "@types/gtag.js": "^0.0.20",
-    "semantic-release": "^24.2.4",
+    "semantic-release": "^25.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   },
@@ -63,7 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",
     "astro-eslint-parser": "^1.2.1",
-    "eslint": "^8.57.1",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-astro": "^1.3.1",
     "preact": "^10.26.4",

package/packages/components/YoutubeVideo.astro

@@ -37,7 +37,7 @@ const hasPreviewVideo = previewVideo || previewVideoWebm;
       </div>
     )
   }
-  <div class="n-youtube-video__play-icon" aria-hidden="true" />
+  <div class="n-youtube-video__play-icon" aria-hidden="true"></div>
 </div>
 
 <style>
@@ -49,6 +49,7 @@ const hasPreviewVideo = previewVideo || previewVideoWebm;
     overflow: hidden;
     width: 100%;
     aspect-ratio: 16 / 9;
+    isolation: isolate;
   }
 
   .n-youtube-video :global(lite-youtube) {

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

@@ -9,6 +9,7 @@ import SearchWindow from '../../components/SearchWindow';
 import SearchInput from '../../components/SearchInput';
 import AskNetlifyLink from '../AskNetlifyLink';
 import { useClickOutside } from '../../../../../utils/useClickOutside';
+import type { PagefindFilters } from '../../types/search.types';
 import {
   useSearch,
   useKeyboardNav,
@@ -28,12 +29,19 @@ interface Props {
   className?: string;
   debug?: boolean;
   kapaIntegrationId?: string;
+  filters?: PagefindFilters;
 }
 
 function SearchModal(
-  props: Props = { className: '', children: undefined, debug: false, kapaIntegrationId: undefined }
+  props: Props = {
+    className: '',
+    children: undefined,
+    debug: false,
+    kapaIntegrationId: undefined,
+    filters: undefined,
+  }
 ) {
-  const { children, className, debug, ...rest } = props;
+  const { children, className, debug, filters, ...rest } = props;
 
   const [modalState, setModalState] = useState({ current: 'search' });
   const [searchOpen, setSearchOpen] = useState(false);
@@ -44,7 +52,7 @@ function SearchModal(
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  const { state, actions } = useSearch();
+  const { state, actions } = useSearch(filters);
   useSearchToggles(openSearch, setModalState);
   useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState);
   useSearchHotkeys(searchOpen, openSearch, closeSearch);

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

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'preact/hooks';
-import type { SearchState } from '../types/search.types';
+import type { PagefindFilters, SearchState } from '../types/search.types';
 import { useTimeout } from '../../../../utils/useTimeout';
 
 /**
@@ -12,7 +12,7 @@ import { useTimeout } from '../../../../utils/useTimeout';
  * - Exposes `setSearchTerm` for live input handling and `submitSearch` for manual triggering
  */
 
-export function useSearch() {
+export function useSearch(filters?: PagefindFilters) {
   const [state, setSearchState] = useState<SearchState>({
     searchTerm: '',
     results: [],
@@ -29,15 +29,17 @@ export function useSearch() {
 
     setSearchState(prev => ({ ...prev, isLoading: true }));
 
-    if (cacheRef.current.has(query)) {
+    const cacheKey = filters ? `${query}::${JSON.stringify(filters)}` : query;
+
+    if (cacheRef.current.has(cacheKey)) {
       setSearchState(prev => ({
         ...prev,
-        results: cacheRef.current.get(query),
+        results: cacheRef.current.get(cacheKey),
         isLoading: false,
       }));
       return;
     }
-    const search = await window.pagefind.debouncedSearch(query);
+    const search = await window.pagefind.debouncedSearch(query, filters ? { filters } : undefined);
     const results =
       search?.results &&
       (await Promise.all(
@@ -55,7 +57,7 @@ export function useSearch() {
         })
       ));
 
-    cacheRef.current.set(query, results);
+    cacheRef.current.set(cacheKey, results);
 
     setSearchState(prev => ({
       ...prev,

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

@@ -39,3 +39,27 @@ export interface SearchGTMObjectProps {
   query?: string;
   debug_mode?: boolean;
 }
+
+/**
+ * A single Pagefind filter value. Either a direct match (string / array of
+ * strings) or an operator object for compound matching and exclusion.
+ *
+ * @see https://pagefind.app/docs/js-api-filtering/
+ */
+export type PagefindFilterValue =
+  | string
+  | string[]
+  | {
+      any?: string[];
+      all?: string[];
+      none?: string[];
+      not?: string[];
+    };
+
+/**
+ * Pagefind filters passed to a search, keyed by filter name.
+ *
+ * @example { resource: 'docs' }              // only docs
+ * @example { tags: { none: ['blog'] } }      // everything except blog posts
+ */
+export type PagefindFilters = Record<string, PagefindFilterValue>;

package/packages/components/preact/index.ts

@@ -4,7 +4,7 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as AskNetlify } from "./AskNetlify/AskNetlify"
+export { default as AskNetlify } from './AskNetlify/AskNetlify';
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';