@netlify/spark-ui 1.9.1 → 1.11.0

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

@@ -1,3 +1,5 @@
+@import url('../../../styles/animations.css');
+
 /* ----------------------------- */
 /* Layout Containers             */
 /* ----------------------------- */
@@ -242,21 +244,6 @@
 /* ----------------------------- */
 /* Animations and Keyframes     */
 /* ----------------------------- */
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
 @keyframes askEyeBlink {
   0%,

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

@@ -5,23 +5,31 @@ import ChatInterface from './components/ChatInterface';
 import './AskNetlify.css';
 
 interface AskNetlifyProps {
-  setModalState?: (state?: { current: string }) => void;
+  kapaIntegrationId?: string;
+  setModalState?: (e: { current: string }) => void;
 }
 
 export default function AskNetlify(props: AskNetlifyProps) {
   const analyticsRef = useRef<Analytics>(new Analytics());
+
+  if (!props.kapaIntegrationId) return;
+
   return (
     <KapaProvider
-      integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
+      integrationId={props.kapaIntegrationId}
       callbacks={{
         askAI: {
           onQuerySubmit: data => {
+            if (!data.question || !data.threadId) return;
+
             analyticsRef?.current?.track('ask:new_query', {
               question: data.question,
               thread_id: data.threadId,
             });
           },
           onAnswerGenerationCompleted: data => {
+            if (!data.questionAnswerId || !data.answer) return;
+
             analyticsRef?.current?.track('ask:answer_generated', {
               question_id: data.questionAnswerId,
               answer_length: data.answer.length,
@@ -30,7 +38,7 @@ export default function AskNetlify(props: AskNetlifyProps) {
         },
       }}
     >
-      <ChatInterface {...props} />
+      <ChatInterface setModalState={props.setModalState} />
     </KapaProvider>
   );
 }

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

@@ -6,7 +6,7 @@ import { BackButton } from './BackButton';
 import { ChatMessages } from './ChatMessages';
 
 interface Props {
-  setModalState?: (state?: { current: string }) => void;
+  setModalState?: (e: { current: string }) => void;
 }
 
 export default function ChatInterface({ setModalState }: Props) {

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

@@ -5,6 +5,7 @@ import Modal from '../../../../preact/Modal/Modal';
 import KeyboardKey from '../../../../preact/KeyboardKey/KeyboardKey';
 import SearchWindow from '../../components/SearchWindow';
 import SearchInput from '../../components/SearchInput';
+import SearchLink from '../../components/SearchLink/SearchLink';
 import { useClickOutside } from '../../../../../utils/useClickOutside';
 import {
   useSearch,
@@ -23,9 +24,12 @@ interface Props {
   children: ComponentChildren;
   className?: string;
   debug?: boolean;
+  kapaIntegrationId?: string;
 }
 
-function SearchModal(props: Props = { className: '', children: null, debug: false }) {
+function SearchModal(
+  props: Props = { className: '', children: undefined, debug: false, kapaIntegrationId: undefined }
+) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
   const [modalState, setModalState] = useState({ current: 'search' });
 
@@ -93,18 +97,31 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
       {...rest}
     >
       <div ref={containerRef} className="n-search-container">
-        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
+        {modalState.current === 'ask' && (
+          <AskNetlify setModalState={setModalState} kapaIntegrationId={props.kapaIntegrationId} />
+        )}
         {modalState.current === 'search' && (
           <>
             <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
 
             <SearchWindow
-              setModalState={setModalState}
               searchLoading={state.isLoading}
               searchTerm={state.searchTerm}
               results={state.results}
             >
-              {children}
+              <>
+                {props.kapaIntegrationId && (
+                  <SearchLink
+                    as="button"
+                    icon="askNetlify"
+                    label="Ask Netlify AI"
+                    onClick={() => {
+                      setModalState({ current: 'ask' });
+                    }}
+                  />
+                )}
+                {children}
+              </>
             </SearchWindow>
 
             <div className="n-search-footer">

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

@@ -45,7 +45,6 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
 /* --- Main Search Results Component --- */
 export default function SearchWindow({
-  setModalState,
   searchLoading,
   searchTerm,
   results,
@@ -58,15 +57,6 @@ export default function SearchWindow({
           <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
         ) : DefaultWindow ? (
           <>
-            <SearchLink
-              as="button"
-              icon="askNetlify"
-              label="Ask Netlify AI"
-              onClick={() => {
-                setModalState({ current: 'ask' });
-              }}
-            />
-
             {DefaultWindow}
 
             <SearchHeading>Actions</SearchHeading>

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

@@ -12,7 +12,6 @@ export interface SearchLinkProps {
 }
 
 export interface SearchWindowProps {
-  setModalState: (e: { current: string }) => void;
   searchLoading: boolean;
   searchTerm?: string;
   results?: SearchLinkProps[];

package/packages/styles/animations.css

@@ -0,0 +1,26 @@
+.n-fadeIn {
+  opacity: 0;
+  animation: fadeIn var(--animation-duration, 300ms) ease-out forwards;
+}
+
+.n-fadeInUp {
+  opacity: 0;
+  transform: translateY(var(--animation-transformY, 5px));
+  animation: fadeInUp var(--animation-duration, 300ms) ease-out forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/packages/styles/tokens.css

@@ -7,6 +7,7 @@
   --badge-bg-color: var(--neutral-100);
   --badge-border-color: var(--neutral-300);
   --badge-text-color: var(--neutral-500);
+  --blockquote-accent-color: var(--blue-700);
   --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
   --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
   --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -196,6 +197,8 @@
   --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
   --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
   --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --testimonial-logo-hover-color: var(--neutral-500);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 
@@ -205,6 +208,7 @@
     --badge-bg-color: var(--neutral-700);
     --badge-border-color: var(--neutral-600);
     --badge-text-color: var(--neutral-100);
+    --blockquote-accent-color: var(--teal-200);
     --button-outline-bg-color: color(srgb 0 0 0 / 0);
     --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
     --button-outline-stroke-color: var(--teal-200);
@@ -277,6 +281,8 @@
     --tabbed-content-border-color: var(--color-icon);
     --tabbed-content-code-bg-color: var(--neutral-900);
     --tabbed-content-tab-text-color-active: var(--color-icon);
+    --testimonial-logo-hover-color: var(--neutral-300);
+    --testimonial-logo-inactive-color: var(--neutral-400);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
 }
@@ -286,6 +292,7 @@
   --badge-bg-color: var(--neutral-700);
   --badge-border-color: var(--neutral-600);
   --badge-text-color: var(--neutral-100);
+  --blockquote-accent-color: var(--teal-200);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
   --button-outline-stroke-color: var(--teal-200);
@@ -358,6 +365,8 @@
   --tabbed-content-border-color: var(--color-icon);
   --tabbed-content-code-bg-color: var(--neutral-900);
   --tabbed-content-tab-text-color-active: var(--color-icon);
+  --testimonial-logo-hover-color: var(--neutral-300);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }
 
@@ -366,6 +375,7 @@
   --badge-bg-color: var(--neutral-100);
   --badge-border-color: var(--neutral-300);
   --badge-text-color: var(--neutral-500);
+  --blockquote-accent-color: var(--blue-700);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
   --button-outline-stroke-color: var(--neutral-800);
@@ -437,6 +447,8 @@
   --tabbed-content-border-color: var(--color-icon);
   --tabbed-content-code-bg-color: var(--neutral-900);
   --tabbed-content-tab-text-color-active: var(--color-icon);
+  --testimonial-logo-hover-color: var(--neutral-500);
+  --testimonial-logo-inactive-color: var(--neutral-400);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 

package/packages/utils/fetch-svg.ts

@@ -0,0 +1,28 @@
+/**
+ * Fetches an SVG from a remote URL and strips any `fill` attributes
+ * to allow styling the SVG via CSS (e.g., using `currentColor` or masks).
+ *
+ * If the fetch fails or the response is not OK, logs the error and returns an empty string.
+ *
+ * @param {string} url - The URL of the SVG to fetch.
+ * @returns {Promise<string>} The cleaned SVG markup with `fill` attributes removed,
+ *                            or an empty string if the fetch fails.
+ */
+export async function fetchSvg(url: string): Promise<string> {
+  function stripFillAttributes(svg: string): string {
+    return svg.replace(/fill\s*=\s*["'][^"']*["']/gi, '');
+  }
+
+  try {
+    const res = await fetch(url);
+    if (!res.ok) {
+      console.error(`[fetchSvg] Failed to fetch: ${url}`);
+      return '';
+    }
+    const raw = await res.text();
+    return stripFillAttributes(raw);
+  } catch (err) {
+    console.error(`[fetchSvg] Error fetching ${url}:`, err);
+    return '';
+  }
+}

package/packages/utils/kebab.ts

@@ -0,0 +1,22 @@
+/**
+ * Converts a given string to kebab-case.
+ *
+ * - Converts camelCase to kebab-case.
+ * - Replaces spaces and underscores with dashes.
+ * - Removes all non-alphanumeric characters except dashes.
+ * - Converts the entire string to lowercase.
+ *
+ * @param {string} str - The input string to convert.
+ * @returns {string} The kebab-cased version of the input string.
+ *
+ * @example
+ * kebabCase('HelloWorld')         // 'hello-world'
+ * kebabCase('some_text Here')     // 'some-text-here'
+ * kebabCase('already-kebab-case') // 'already-kebab-case'
+ */
+export const kebabCase = (str: string) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // camelCase → kebab-case
+    .replace(/[\s_]+/g, '-') // spaces & underscores → dashes
+    .replace(/[^a-zA-Z0-9-]/g, '') // remove non-alphanumeric except dash
+    .toLowerCase();

package/packages/utils/types.ts

@@ -14,3 +14,17 @@ export interface ImageProps {
   width: string;
   height: string;
 }
+
+export interface Testimonial {
+  quote?: string;
+  author?: string;
+  title?: string;
+  company?: string;
+  logoSrc?: string;
+  avatarSrc?: string;
+  cta?: {
+    id?: string;
+    url?: string;
+    label?: string;
+  };
+}