@netlify/spark-ui 1.13.2 → 1.14.0

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,6 +1,6 @@
 import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as d } from "../../../chunks/AskNetlify.CNYCiNSp.js";
+import { A as d } from "../../../chunks/AskNetlify.hLTCaFLd.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";

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

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as g, y as h, d as k } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as w, K as b } from "../../../../../chunks/AskNetlify.CNYCiNSp.js";
+import { A as w, K as b } from "../../../../../chunks/AskNetlify.hLTCaFLd.js";
 import K from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
 import L from "../SearchWindow.js";
@@ -26,8 +26,8 @@ import '../../../../../assets/SearchModal.css';function D(t) {
   }, [t]), n;
 }
 function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
-  const { children: n, className: o, debug: m, ...T } = t, [s, c] = k({ current: "search" }), [i, f] = k(!1), l = () => f(!0), u = () => f(!1), a = g(null), v = D(u), { state: r, actions: p } = C();
-  q(l, c), R(p.setSearchTerm, l), P(i, l, u), Q(a, i, u), E(r, m);
+  const { children: n, className: o, debug: m, ...T } = t, [c, s] = k({ current: "search" }), [i, f] = k(!1), l = () => f(!0), u = () => f(!1), a = g(null), v = D(u), { state: r, actions: p } = C();
+  q(l, s), R(l, p.setSearchTerm, s), P(i, l, u), Q(a, i, u), E(r, m);
   const { handleNewQuery: A, handleAnswer: I } = x();
   return h(() => {
     a.current && (i ? a.current.showModal() : a.current.close());
@@ -35,7 +35,7 @@ function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId:
     var y;
     const S = (y = a.current) == null ? void 0 : y.querySelector("input");
     S && S.focus();
-  }, [s.current]), /* @__PURE__ */ e(
+  }, [c.current]), /* @__PURE__ */ e(
     b,
     {
       integrationId: t.kapaIntegrationId || "",
@@ -50,21 +50,21 @@ function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId:
         {
           ref: a,
           className: `n-search-modal ${o || ""}`,
-          "data-state": s.current,
+          "data-state": c.current,
           ...T,
           children: /* @__PURE__ */ e("div", { ref: v, className: "n-search-container", children: [
-            s.current === "ask" && /* @__PURE__ */ e(w, { setModalState: c, initialQuery: r.searchTerm }),
-            s.current === "search" && /* @__PURE__ */ e(N, { children: [
+            c.current === "ask" && /* @__PURE__ */ e(w, { setModalState: s, initialQuery: r.searchTerm }),
+            c.current === "search" && /* @__PURE__ */ e(N, { children: [
               /* @__PURE__ */ e(M, { setSearchTerm: p.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
                 L,
                 {
-                  setModalState: c,
+                  setModalState: s,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
                   children: /* @__PURE__ */ e(N, { children: [
-                    t.kapaIntegrationId && /* @__PURE__ */ e(O, { searchTerm: r.searchTerm, setModalState: c }),
+                    t.kapaIntegrationId && /* @__PURE__ */ e(O, { searchTerm: r.searchTerm, setModalState: s }),
                     n
                   ] })
                 }

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

@@ -1,11 +1,20 @@
 /**
- * Custom hook that checks the current URL for a `search` query parameter
- * and, if found, updates the search term and opens the search interface.
+ * Custom hook that checks the current URL for query parameters and updates
+ * search state or modal state accordingly:
  *
- * Useful for enabling deep linking to a search view with a pre-filled term,
- * such as when sharing URLs like `?search=netlify`.
+ * - If `?ask` is present (optionally with `?msg` or `?message`), it opens the modal and
+ *   optionally pre-fills the search term.
+ * - If only `?msg` or `?message` is present, it behaves similarly, opening the modal
+ *   and pre-filling the search term.
+ * - If only `?search` is present, it pre-fills the search input and opens the search view.
+ *
+ * The hook also waits for `window.pagefind` to load before evaluating parameters,
+ * ensuring deep linking doesn't interfere with pagefind initialization.
  *
- * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ * @param setSearchTerm - Function to update the search input state.
+ * @param setModalState - (Optional) Function to set modal state, useful for distinguishing modal views.
  */
-export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;
+export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setModalState?: (e: {
+    current: string;
+}) => void): void;

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

@@ -1,18 +1,24 @@
-import { d as c, y as n } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function d(t, o) {
-  const [a, i] = c(!1);
-  n(() => {
+import { d as u, y as t } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+function l(s, a, r) {
+  const [c, d] = u(!1);
+  t(() => {
     let e;
-    const r = () => {
-      window.pagefind && (i(!0), e && clearInterval(e));
+    const n = () => {
+      window.pagefind && (d(!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 && (t(e), o());
-  }, [a]);
+    return n(), e = setInterval(n, 100), () => clearInterval(e);
+  }, []), t(() => {
+    if (typeof location > "u" || c) return;
+    const e = new URLSearchParams(location.search), n = e.has("ask"), i = e.get("msg") || e.get("message"), o = e.get("search"), g = (f) => {
+      f && a(f), r == null || r({ current: "ask" }), s();
+    };
+    if (n || i) {
+      g(i);
+      return;
+    }
+    o && (a(o), s());
+  }, [c]);
 }
 export {
-  d as useSearchParams
+  l as useSearchParams
 };

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ 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.CNYCiNSp.js";
+import { A as S } from "../../chunks/AskNetlify.hLTCaFLd.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { pluralize } from './pluralize';
+export { kebabCase } from './kebab';

package/package.json

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

package/packages/components/ActionArrow.astro

@@ -0,0 +1,42 @@
+<div class="n-action-arrow">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
+    <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564" clip-path="url(#a)">
+      <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
+      <path d="M9.88 9.381V4.093H4.59"></path>
+    </g>
+  </svg>
+</div>
+
+<style>
+  .n-action-arrow {
+    display: inline-flex;
+    overflow: hidden;
+
+    svg {
+      color: var(--color-icon);
+      transition: translate 0.1s ease-out;
+    }
+  }
+
+  @media (any-hover: hover) {
+    :global(
+      :is(.n-card-clickable, .n-action-link):where(:hover, :focus-visible) .n-action-arrow svg
+    ) {
+      --_offset: 100%;
+      animation: n-action-link-hover 350ms cubic-bezier(0.85, 0, 0.15, 1) forwards;
+    }
+
+    @keyframes n-action-link-hover {
+      0%,
+      100% {
+        translate: 0 0;
+      }
+      30% {
+        translate: calc(var(--_offset) * 2) calc(var(--_offset) * -2);
+      }
+      31% {
+        translate: calc(var(--_offset) * -1) var(--_offset);
+      }
+    }
+  }
+</style>

package/packages/components/ActionLink.astro

@@ -1,4 +1,6 @@
 ---
+import ActionArrow from './ActionArrow.astro';
+
 interface Props {
   id?: string;
   href: string;
@@ -10,19 +12,14 @@ const { id, href, text, class: className, ...rest } = Astro.props;
 ---
 
 <a id={id} class:list={['n-action-link', className]} href={href} {...rest}>
-  <span>{text ? text : <slot />}</span><div class="n-action-link-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
-      <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564" clip-path="url(#a)">
-        <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
-        <path d="M9.88 9.381V4.093H4.59"></path>
-      </g>
-    </svg>
-  </div>
+  <span>{text ? text : <slot />}</span><ActionArrow />
 </a>
 
 <style>
   .n-action-link {
-    display: inline-block;
+    display: inline-flex;
+    gap: var(--space-3xs);
+    align-items: center;
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-text-md);
     text-wrap: pretty; /** Prevents orphan icon */
@@ -35,35 +32,4 @@ const { id, href, text, class: className, ...rest } = Astro.props;
       text-underline-offset: 0.1em;
     }
   }
-
-  .n-action-link-icon {
-    display: inline-flex;
-    overflow: hidden;
-    margin-inline-start: 0.1em;
-
-    svg {
-      color: var(--color-icon);
-      transition: translate 0.1s ease-out;
-    }
-  }
-
-  @media (any-hover: hover) {
-    .n-action-link:where(:hover, :focus-visible) .n-action-link-icon svg {
-      --_offset: 100%;
-      animation: n-action-link-hover 350ms cubic-bezier(0.85, 0, 0.15, 1) forwards;
-    }
-
-    @keyframes n-action-link-hover {
-      0%,
-      100% {
-        translate: 0 0;
-      }
-      30% {
-        translate: calc(var(--_offset) * 2) calc(var(--_offset) * -2);
-      }
-      31% {
-        translate: calc(var(--_offset) * -1) var(--_offset);
-      }
-    }
-  }
 </style>

package/packages/components/Card.astro

@@ -1,4 +1,5 @@
 ---
+import ActionArrow from './ActionArrow.astro';
 import ActionLink from './ActionLink.astro';
 import Eyebrow from './Eyebrow.astro';
 
@@ -25,9 +26,19 @@ const {
   class: className,
   ...rest
 } = Astro.props;
+
+const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.href;
 ---
 
-<Element class:list={['n-card n-flow', isCardClickable && 'n-card-clickable', className]} {...rest}>
+<Element
+  class:list={[
+    'n-card n-flow',
+    isCardClickable && 'n-card-clickable',
+    isAnchorHeadline && 'n-card-anchor-heaadline',
+    className,
+  ]}
+  {...rest}
+>
   {
     Astro.slots.has('icon') && (
       <div class="n-card-icon">
@@ -43,16 +54,25 @@ const {
     )
   }
   {eyebrow && <Eyebrow class="n-card-eyebrow">{eyebrow}</Eyebrow>}
-  {headline && <div class="n-card-headline" set:html={headline} />}
+  {
+    isAnchorHeadline ? (
+      <a class="n-card-link n-card-link-headline" href={link?.href} id={link.id}>
+        <div class="n-card-headline" set:html={headline} />
+      </a>
+    ) : (
+      <div class="n-card-headline" set:html={headline} />
+    )
+  }
   {paragraph && <div class="n-card-paragraph" set:html={paragraph} />}
   <slot />
   {
-    link && (
+    link && link.text && (
       <ActionLink class="n-card-link" id={link.id} href={link.href}>
         {link.text}
       </ActionLink>
     )
   }
+  {isAnchorHeadline && <ActionArrow />}
 </Element>
 
 <style>
@@ -72,6 +92,10 @@ const {
     --n-flow-space: var(--space-s);
   }
 
+  .n-card-link:has(> .n-card-headline) {
+    text-decoration: none;
+  }
+
   .n-card-headline {
     font-size: var(--font-size-display-sm);
     font-family: var(--font-family-display);
@@ -80,6 +104,29 @@ const {
     color: var(--heading-text-color);
   }
 
+  .n-card-headline:has(+ .n-action-link) {
+    margin-block-end: auto;
+  }
+
+  .n-card-link-headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-s);
+    width: 100%;
+  }
+
+  .n-card-link-headline .n-card-headline {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .n-card :global(.n-action-arrow) {
+    flex: 0 0 auto;
+    align-self: center;
+    margin-inline-start: auto;
+  }
+
   .n-card-paragraph {
     line-height: var(--line-height-text);
   }
@@ -119,4 +166,14 @@ const {
       inset: 0;
     }
   }
+
+  /* Focus for Anchor Headline */
+  .n-card-anchor-heaadline:focus-within {
+    box-shadow: 0 0 0 3px var(--color-focus-ring, Highlight);
+    border-radius: var(--radius-s, 0.25rem);
+  }
+
+  .n-card-anchor-heaadline a:focus {
+    outline: none;
+  }
 </style>

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -19,6 +19,7 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
   const [newMessageReady, setNewMessageReady] = useState(false);
   const chatRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
   const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
@@ -50,19 +51,38 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
   }, [newMessageReady]);
 
   useEffect(() => {
-    if (initialQuery) {
-      submitQuery(initialQuery.trim());
-      setNewMessageReady(true);
+    if (!initialQuery) return;
+
+    const trimmedQuery = initialQuery.trim();
+
+    /**
+     * When reCAPTCHA is ready, we know this was triggered by a user action
+     * (like clicking a button), so we can safely submit the query right away.
+     * If reCAPTCHA isn't ready, the modal was likely opened from an outside source,
+     * in that case, we populate the input and focus it, requiring manual submission
+     * to ensure a user action triggers reCAPTCHA.
+     */
+    if (window.grecaptcha) {
+      window.grecaptcha.enterprise.ready(() => {
+        submitQuery(trimmedQuery);
+      });
+    } else {
+      setMessage(trimmedQuery);
+      inputRef?.current?.focus();
     }
+
+    setNewMessageReady(true);
   }, [initialQuery]);
 
   return (
     <div className="n-ask-chat-container">
       <BackButton onClick={() => setModalState?.({ current: 'search' })} />
       <div ref={chatRef} className="n-ask-conversation n-search-window">
-        {!conversation.length ? (
+        {!conversation.length && !initialQuery && (
           <QuestionList onClick={handleSubmit} menuRef={menuRef} />
-        ) : (
+        )}
+
+        {conversation.length > 0 && (
           <ChatMessages
             isPreparingAnswer={isPreparingAnswer}
             conversation={conversation}
@@ -73,6 +93,7 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
 
       <form onSubmit={handleSubmit} className="n-ask-form n-search-input-wrapper">
         <input
+          ref={inputRef}
           className="n-ask-input n-search-input"
           type="text"
           value={message}

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

@@ -1,5 +1,5 @@
 import { type ComponentChildren } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
 
 import { KapaProvider } from '@kapaai/react-sdk';
 
@@ -45,7 +45,7 @@ function SearchModal(
 
   const { state, actions } = useSearch();
   useSearchToggles(openSearch, setModalState);
-  useSearchParams(actions.setSearchTerm, openSearch);
+  useSearchParams(openSearch, actions.setSearchTerm, setModalState);
   useSearchHotkeys(searchOpen, openSearch, closeSearch);
   useKeyboardNav(modalRef, searchOpen, closeSearch);
   useSearchAnalytics(state, debug);

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

@@ -1,17 +1,28 @@
 import { useEffect, useState } from 'preact/hooks';
 
 /**
- * Custom hook that checks the current URL for a `search` query parameter
- * and, if found, updates the search term and opens the search interface.
+ * Custom hook that checks the current URL for query parameters and updates
+ * search state or modal state accordingly:
  *
- * Useful for enabling deep linking to a search view with a pre-filled term,
- * such as when sharing URLs like `?search=netlify`.
+ * - If `?ask` is present (optionally with `?msg` or `?message`), it opens the modal and
+ *   optionally pre-fills the search term.
+ * - If only `?msg` or `?message` is present, it behaves similarly, opening the modal
+ *   and pre-filling the search term.
+ * - If only `?search` is present, it pre-fills the search input and opens the search view.
+ *
+ * The hook also waits for `window.pagefind` to load before evaluating parameters,
+ * ensuring deep linking doesn't interfere with pagefind initialization.
  *
- * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ * @param setSearchTerm - Function to update the search input state.
+ * @param setModalState - (Optional) Function to set modal state, useful for distinguishing modal views.
  */
 
-export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void) {
+export function useSearchParams(
+  onOpen: () => void,
+  setSearchTerm: (term: string) => void,
+  setModalState?: (e: { current: string }) => void
+) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
   // Poll for the existence of window.pagefind.
@@ -34,11 +45,27 @@ export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: (
   }, []);
 
   useEffect(() => {
-    // Cleanup the interval when the component unmounts.
     if (typeof location === 'undefined' || isPagefindLoaded) return;
-    const query = location?.search && new URLSearchParams(location.search).get('search');
-    if (query) {
-      setSearchTerm(query);
+
+    const params = new URLSearchParams(location.search);
+
+    const hasAsk = params.has('ask');
+    const msg = params.get('msg') || params.get('message');
+    const search = params.get('search');
+
+    const openAskModal = (term?: string | null) => {
+      if (term) setSearchTerm(term);
+      setModalState?.({ current: 'ask' });
+      onOpen();
+    };
+
+    if (hasAsk || msg) {
+      openAskModal(msg);
+      return;
+    }
+
+    if (search) {
+      setSearchTerm(search);
       onOpen();
     }
   }, [isPagefindLoaded]);

package/packages/utils/index.ts

@@ -1 +1,2 @@
 export { pluralize } from './pluralize';
+export { kebabCase } from './kebab';