@netlify/spark-ui 1.12.0-alpha.0 → 1.12.0-alpha.2

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

@@ -1,56 +1,63 @@
-import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import m from "./SearchHeading/SearchHeading.js";
-import a from "./SearchLink/SearchLink.js";
-import { Fragment as h } from "preact";
-const d = {
-  light: "dark",
-  dark: "light"
-}, u = (n) => {
-  const t = document.getElementById("site-theme-select");
-  t && (t.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
-}, g = ({
-  searchLoading: n,
-  searchTerm: t,
-  results: r
+import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import h from "./SearchHeading/SearchHeading.js";
+import t from "./SearchLink/SearchLink.js";
+import m from "./SearchLinkThemeToggle.js";
+import { Fragment as r } from "preact";
+const o = ({
+  searchTerm: i,
+  setModalState: l
+}) => /* @__PURE__ */ n(
+  t,
+  {
+    as: "button",
+    icon: "askNetlify",
+    excerpt: "Get an instant AI-generated answer",
+    onClick: () => l({ current: "ask" }),
+    children: [
+      "Ask Netlify: ",
+      /* @__PURE__ */ n("span", { className: "n-search-term", children: i })
+    ]
+  }
+), f = ({ searchTerm: i }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
+  "0 results for ",
+  /* @__PURE__ */ n("span", { className: "n-search-term", children: i })
+] }) }), N = ({
+  setModalState: i,
+  searchLoading: l,
+  searchTerm: e,
+  results: s
 }) => {
-  if (n)
-    return /* @__PURE__ */ e(m, { children: [
-      "Searching for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: t }),
-      " ..."
-    ] });
-  if (!r || r.length === 0)
-    return /* @__PURE__ */ e(m, { children: [
-      "0 results for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: t })
-    ] });
-  const c = o(() => r.map((i, l) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...i }) }, l)), [r]);
-  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
+  const c = e === "no results" || !l && (!s || s.length === 0);
+  return /* @__PURE__ */ n(r, { children: [
+    /* @__PURE__ */ n(o, { searchTerm: e, setModalState: i }),
+    c ? /* @__PURE__ */ n(f, { searchTerm: e }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: s == null ? void 0 : s.map((a, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(t, { ...a }) }, d)) })
+  ] });
 };
-function N({
-  searchLoading: n,
-  searchTerm: t,
-  results: r,
+function w({
+  setModalState: i,
+  searchLoading: l,
+  searchTerm: e,
+  results: s,
   children: c
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(g, { searchLoading: n, searchTerm: t, results: r }) : c ? /* @__PURE__ */ e(h, { children: [
+  const a = (e == null ? void 0 : e.length) > 1;
+  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: a ? l ? /* @__PURE__ */ n(r, { children: [
+    /* @__PURE__ */ n(o, { searchTerm: e, setModalState: i }),
+    /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("div", { className: "n-loader-dots-spinner" }) })
+  ] }) : /* @__PURE__ */ n(
+    N,
+    {
+      setModalState: i,
+      searchLoading: l,
+      searchTerm: e,
+      results: s
+    }
+  ) : /* @__PURE__ */ n(r, { children: [
     c,
-    /* @__PURE__ */ e(m, { children: "Actions" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        as: "button",
-        icon: "lightbulb",
-        label: "Toggle theme",
-        onClick: () => {
-          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, l = document.documentElement.getAttribute("data-theme"), s = i ? "dark" : l || "light";
-          s && u(d[s]);
-        }
-      }
-    )
-  ] }) : null }) });
+    /* @__PURE__ */ n(h, { children: "Actions" }),
+    /* @__PURE__ */ n(m, {})
+  ] }) }) });
 }
 export {
-  N as default
+  w as default
 };

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

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

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

@@ -1,14 +1,14 @@
 import { useSearch as o } from "./useSearch.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 { useSearchAnalytics as s } from "./useSearchAnalytics.js";
+import { useKeyboardNav as m } from "./useKeyboardNav.js";
+import { useSearchHotkeys as f } from "./useSearchHotkeys.js";
+import { useSearchParams as u } from "./useSearchParams.js";
 import { useSearchToggles as h } from "./useSearchToggles.js";
 export {
-  t as useKeyboardNav,
+  m as useKeyboardNav,
   o as useSearch,
-  p as useSearchHotkeys,
-  s as useSearchLogger,
-  x as useSearchParams,
+  s as useSearchAnalytics,
+  f as useSearchHotkeys,
+  u as useSearchParams,
   h as useSearchToggles
 };

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(isPagefindLoaded: boolean, containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;
+export declare function useKeyboardNav(containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;

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

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

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

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

package/dist/components/preact/SearchModal/hooks/{useSearchLogger.d.ts → useSearchAnalytics.d.ts}

@@ -18,11 +18,11 @@ import { SearchState } from '../types/search.types';
  *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `search:result_selected` events with the clicked result's title and URL.
  *
  * @example
- * const { handleClick } = useSearchLogger(searchState);
+ * const { handleClick } = useSearchAnalytics(searchState);
  *
  * // In your component, attach handleClick to the search result links
  * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
-export declare function useSearchLogger(state?: SearchState, debug?: boolean): {
+export declare function useSearchAnalytics(state?: SearchState, debug?: boolean): {
     handleClick: (e: Event) => void;
 };

package/dist/components/preact/SearchModal/hooks/{useSearchLogger.js → useSearchAnalytics.js}

@@ -1,9 +1,9 @@
 import { A as y, y as h, q as d } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as k } from "../../../../chunks/analytics.Ch1vuuOl.js";
-function b(r, l) {
-  const n = y(new k()).current, e = (c) => c.debug_mode = !0;
+import { A as T } from "../../../../chunks/analytics.Ch1vuuOl.js";
+function A(r, l) {
+  const n = y(new T()).current, e = (c) => c.debug_mode = !0;
   return h(() => {
-    if (!(r != null && r.searchTerm)) return;
+    if (!(r != null && r.searchTerm) || (r == null ? void 0 : r.searchTerm.length) < 3) return;
     const c = { query: r == null ? void 0 : r.searchTerm };
     l && e(c), n.track("search:new_query", c);
   }, [r == null ? void 0 : r.searchTerm]), h(() => {
@@ -24,5 +24,5 @@ function b(r, l) {
   };
 }
 export {
-  b as useSearchLogger
+  A as useSearchAnalytics
 };

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(isPagefindLoaded: boolean, isOpen: boolean, onOpen: () => void, onClose: () => void): void;
+export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;

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

@@ -1,13 +1,12 @@
-import { y as u } from "../../../../chunks/hooks.module.DGkdD5n9.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());
+import { y as d } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+function m(t, n, o) {
+  d(() => {
+    const r = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
     };
-    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
-  }, [t, r, n, o]);
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [t, n, o]);
 }
 export {
-  a as useSearchHotkeys
+  m 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(isPagefindLoaded: boolean, setSearchTerm: (term: string) => void, onOpen: () => void): void;
+export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;

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

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

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

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

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

@@ -1,19 +1,18 @@
-import { y as a } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function s(c, t, l) {
-  a(() => {
-    if (!c) return;
+import { y as l } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+function n(t, c) {
+  l(() => {
     const r = document.querySelectorAll("[data-ntl-search-toggle]");
     if (r.length)
       return r.forEach((e) => {
-        const o = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
+        const a = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
         e.removeAttribute("disabled"), e.addEventListener("click", () => {
-          t(), l({ current: o });
+          t(), c({ current: a });
         });
       }), () => {
         r.forEach((e) => e.removeEventListener("click", t));
       };
-  }, [c, t]);
+  }, [t]);
 }
 export {
-  s as useSearchToggles
+  n as useSearchToggles
 };

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

@@ -2,22 +2,29 @@ import { ComponentChildren } from 'preact';
 import { IconName } from '../../Icon';
 export interface SearchLinkProps {
     as?: any;
-    icon: IconName;
-    label: string;
+    icon?: IconName;
+    label?: string;
     resource?: 'blog' | 'changelog' | 'docs' | 'guide';
     url?: string;
     excerpt?: string;
+    children?: ComponentChildren;
     onClick?: () => void;
 }
 export interface SearchWindowProps {
+    setModalState: (e: {
+        current: string;
+    }) => void;
     searchLoading: boolean;
-    searchTerm?: string;
+    searchTerm: string;
     results?: SearchLinkProps[];
     children: ComponentChildren;
 }
 export interface SearchResultsProps {
+    setModalState: (e: {
+        current: string;
+    }) => void;
     searchLoading: boolean;
-    searchTerm?: string;
+    searchTerm: string;
     results?: SearchLinkProps[];
 }
 export interface SearchState {

package/dist/components/preact/index.js

@@ -2,9 +2,9 @@ import { default as t } from "./KeyboardKey/KeyboardKey.js";
 import { default as d } from "./Modal/Modal.js";
 import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
-import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
+import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { default as S } from "./AskNetlify/AskNetlify.js";
+import { A as S } from "../../chunks/AskNetlify.lrswYyKn.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";
@@ -13,7 +13,7 @@ export {
   m as Icon,
   t as KeyboardKey,
   d as Modal,
-  x as SearchHeading,
+  u as SearchHeading,
   s as SearchLink,
   n as SearchModal,
   i as SearchToggle

package/package.json

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

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -12,11 +12,12 @@
 .n-ask-conversation {
   display: grid;
   align-items: flex-end;
+  gap: var(--space-s);
   height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
   padding: var(--n-search-padding-inline);
   overflow-y: auto;
   scroll-behavior: smooth;
-  gap: var(--space-s);
+  grid-template-rows: 1fr;
 }
 
 .n-ask-form {
@@ -84,6 +85,9 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-s);
+}
+
+.n-ask-message:first-of-type {
   margin-block-start: var(--space-2xl);
 }
 
@@ -114,6 +118,41 @@
   font-size: var(--step--1);
 }
 
+.n-ask-sources details summary::marker {
+  display: none;
+  content: none;
+}
+
+.n-ask-sources details {
+  background: var(--search-source-list-color);
+  padding: var(--space-xs) var(--space-xs);
+  border-radius: var(--radius-l);
+}
+
+.n-ask-sources details summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+  cursor: pointer;
+}
+
+.n-ask-sources details ul {
+  margin-block-start: var(--space-3xs);
+}
+
+.n-ask-sources [data-icon='caretRight'] {
+  width: 0.8em;
+  display: inline-block;
+  transform: rotate(90deg);
+  height: auto;
+  color: var(--color-text-weaker);
+}
+
+.n-ask-sources details[open] [data-icon='caretRight'] {
+  transform: rotate(270deg);
+}
+
 /* ----------------------------- */
 /* Form UI                      */
 /* ----------------------------- */
@@ -248,6 +287,7 @@
 }
 
 .n-ask-message-loader :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
+  --n-ask-netlify-eyelid-color: var(--search-bg-color);
   transform-origin: top center;
   transform: scaleY(1.035);
   animation: askEyeBlink 4s infinite;