@netlify/spark-ui 0.0.46-alpha.4 → 0.0.47-alpha

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.DT16W4Wr.js";
+import { D as d } from "../../../chunks/compat.module.BjTzMHXJ.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,6 +1,6 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as u, y as h } from "../../../../chunks/hooks.module.CNV9mxng.js";
-import { u as o } from "../../../../chunks/useTimeout.DOkYFG64.js";
+import { d as u, y as h } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { u as o } from "../../../../chunks/useTimeout.DYuvQwFN.js";
 import d from "../../Icon/index.js";
 const I = (a) => {
   const [r, t] = u(""), { reset: c, run: i } = o((l) => {

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

@@ -1,5 +1,5 @@
 import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import "../../../../../chunks/hooks.module.CNV9mxng.js";
+import "../../../../../chunks/hooks.module.DeYLzLnU.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 }) => {

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

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as v, y as u, d as S } from "../../../../../chunks/hooks.module.CNV9mxng.js";
+import { A as v, y as u, d as S } from "../../../../../chunks/hooks.module.DeYLzLnU.js";
 import L from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
 import k from "../SearchWindow.js";

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.DT16W4Wr.js";
+import { D as t } from "../../../../../chunks/compat.module.BjTzMHXJ.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.CNV9mxng.js";
+import { T as o } from "../../../../chunks/hooks.module.DeYLzLnU.js";
 import t from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
 const h = ({

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

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

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

@@ -1,5 +1,5 @@
-import { d as g, A as w } from "../../../../chunks/hooks.module.CNV9mxng.js";
-import { u as S } from "../../../../chunks/useTimeout.DOkYFG64.js";
+import { d as g, A as w } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { u as S } from "../../../../chunks/useTimeout.DYuvQwFN.js";
 function x() {
   const [l, r] = g({
     searchTerm: "",

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

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

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

@@ -3,9 +3,9 @@ import { SearchState } from '../types/search.types';
  * Custom hook that logs search-related events for analytics.
  *
  * This hook tracks the following search events:
- * - `spark_search:query_changed`: Logs when the search query changes.
- * - `spark_search:no_results`: Logs when no results are found for a search.
- * - `spark_search:result_clicked`: Logs when a search result is clicked.
+ * - `search:new_query`: Logs when the search query changes.
+ * - `search:no_results`: Logs when no results are found for a search.
+ * - `search:result_selected`: Logs when a search result is clicked.
  *
  * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
  *
@@ -15,7 +15,7 @@ import { SearchState } from '../types/search.types';
  * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  *
  * @returns {Object} - An object with the following function:
- *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *   - `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);

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

@@ -1,37 +1,37 @@
-import { A as g, y as f, q as k } from "../../../../chunks/hooks.module.CNV9mxng.js";
-class y {
+import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+class s {
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'www:search_query_changed'
+   * @param eventName e.g. 'www:search_new_query'
    * @param payload   additional key/value data
    */
-  track(e, o = {}) {
-    typeof gtag == "function" ? gtag("event", e, { ...o }) : console.error("gtag is not defined. Tracking event failed.", e);
+  track(n, i = {}) {
+    typeof gtag == "function" ? gtag("event", n, { ...i }) : console.error(`gtag is not defined. Event [${n}] failed.`);
   }
 }
-function s(r, e) {
-  const n = g(new y()).current;
-  return f(() => {
+function p(r, n) {
+  const l = y(new s()).current, e = (c) => c.debug_mode = !0;
+  return h(() => {
     if (!(r != null && r.searchTerm)) return;
     const c = { query: r == null ? void 0 : r.searchTerm };
-    e && (c.debug_mode = !0), n.track("spark_search:query_changed", c);
-  }, [r == null ? void 0 : r.searchTerm]), f(() => {
+    n && e(c), l.track("search:new_query", c);
+  }, [r == null ? void 0 : r.searchTerm]), h(() => {
     if (!(r != null && r.results)) return;
     const c = { query: r == null ? void 0 : r.searchTerm };
-    e && (c.debug_mode = !0), r != null && r.searchTerm && r.results.length === 0 && n.track("spark_search:no_results", c);
+    n && e(c), r != null && r.searchTerm && r.results.length === 0 && l.track("search:no_results", c);
   }, [r == null ? void 0 : r.results]), {
     handleClick: k((c) => {
-      var i;
-      const l = c.target.closest("a");
-      if (!l) return;
-      const h = (i = l.querySelector(".n-search-link-label")) == null ? void 0 : i.innerHTML, d = l.getAttribute("href"), u = {
-        resultTitle: h,
+      var f;
+      const o = c.target.closest("a");
+      if (!o) return;
+      const g = (f = o.querySelector(".n-search-link-label")) == null ? void 0 : f.innerHTML, d = o.getAttribute("href") || void 0, u = {
+        resultTitle: g,
         resultUrl: d
       };
-      e && (u.debug_mode = !0), n.track("spark_search:result_clicked", u);
+      n && e(u), l.track("search:result_selected", u);
     }, [])
   };
 }
 export {
-  s as useSearchLogger
+  p as useSearchLogger
 };

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

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

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

@@ -23,3 +23,9 @@ export interface SearchState {
     results: SearchLinkProps[];
     isLoading: boolean;
 }
+export interface SearchGTMObjectProps {
+    resultTitle?: string;
+    resultUrl?: string;
+    query?: string;
+    debug_mode?: boolean;
+}

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

@@ -4,5 +4,6 @@ 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 ChatApp } from './ChatApp/ChatApp';
 export { SearchModal } from './SearchModal';
 export { type IconName } from './Icon';

package/dist/components/preact/index.js

@@ -1,18 +1,20 @@
 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 l } 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 h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as S } from "./ChatApp/ChatApp.js";
 import "preact";
-import "../../chunks/hooks.module.CNV9mxng.js";
-import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
+import "../../chunks/hooks.module.DeYLzLnU.js";
+import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
-  m as Icon,
+  S as ChatApp,
+  l as Icon,
   t as KeyboardKey,
   d as Modal,
   x as SearchHeading,
   s as SearchLink,
-  S as SearchModal,
+  n as SearchModal,
   h as SearchToggle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.46-alpha.4",
+  "version": "0.0.47-alpha",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -32,8 +32,11 @@
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
+    "@kapaai/react-sdk": "^0.0.5",
     "@preact/preset-vite": "^2.10.1",
+    "@shikijs/transformers": "^3.3.0",
     "glob": "^11.0.1",
+    "marked": "^15.0.11",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",

package/packages/analytics/GoogleAnalytics.astro

@@ -1,14 +1,21 @@
 ---
-const { gaId } = Astro.props;
+interface Props {
+  gaId: string;
+}
 
-if (!gaId) console.error ('[GoogleTagManager] no GTM id provided')
+const { gaId } = Astro.props as Props;
 ---
 <!-- Google tag (gtag.js) -->
-<script async src=`https://www.googletagmanager.com/gtag/js?id=${gaId}`></script>
-<script define:vars={{id: gaId}}>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
 
-  gtag('config', id);
-</script>
+{gaId && 
+<>
+  <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
+  <script define:vars={{id: gaId}}>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', id);
+  </script>
+</>
+}

package/packages/analytics/GoogleTagManager.astro

@@ -1,11 +1,13 @@
 ---
-const { gtmId, gaId } = Astro.props;
+interface Props {
+  gtmId: string;
+  gaId: string;
+}
 
-if (!gtmId) console.error ('[GoogleTagManager] no GTM id provided')
-if (!gaId) console.error ('[GoogleTagManager] no GA id provided')
+const { gtmId, gaId } = Astro.props as Props;
 ---
 <!-- Google Tag Manager -->
-<script define:vars={{id: gtmId}}>
+{gtmId && <script define:vars={{id: gtmId}}>
   (function (w, d, s, l, i) {
     w[l] = w[l] || [];
     w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
@@ -16,14 +18,14 @@ if (!gaId) console.error ('[GoogleTagManager] no GA id provided')
     j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
     f.parentNode.insertBefore(j, f);
   })(window, document, 'script', 'dataLayer', id);
-</script>
+</script>}
 <!-- End Google Tag Manager -->
 
 <!-- Google Analytics (gtag.js) -->
-<script define:vars={{id: gaId}}>
+{gaId && <script define:vars={{id: gaId}}>
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
   gtag('config', id);
-</script>
+</script>}
 <!-- End Google Analytics (gtag.js) -->

package/packages/analytics/GoogleTagManagerNoscript.astro

@@ -1,9 +1,12 @@
-<noscript>
-  <iframe
-    src=`https://www.googletagmanager.com/ns.html?id=${Astro.props.gtmId}`
-    height="0"
-    width="0"
-    style="display:none;visibility:hidden"
-  >
-  </iframe>
-</noscript>
+{
+  Astro.props.gtmId && (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${Astro.props.gtmId}`}
+        height="0"
+        width="0"
+        style="display:none;visibility:hidden"
+      ></iframe>
+    </noscript>
+  )
+}

package/packages/analytics/analytics.ts

@@ -2,7 +2,7 @@ export default class Analytics {
 
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'www:search_query_changed'
+   * @param eventName e.g. 'www:search_new_query'
    * @param payload   additional key/value data
    */
   track(eventName: string, payload: Record<string, any> = {}): void {
@@ -10,7 +10,7 @@ export default class Analytics {
     if (typeof gtag === 'function') {
       gtag('event', eventName, { ...payload });
     } else {
-      console.error(`gtag is not defined. Tracking event failed.`, eventName);
+      console.error(`gtag is not defined. Event [${eventName}] failed.`);
     }
   }
 }

package/packages/components/CodeBlock.astro

@@ -0,0 +1,208 @@
+---
+import { Code } from 'astro:components';
+import '../styles/code-block.css';
+import poimandresTheme from '../../themes/poimandres.json';
+import {
+  transformerMetaHighlight,
+  transformerNotationDiff,
+  transformerNotationFocus,
+} from '@shikijs/transformers';
+
+interface Props {
+  code: string;
+  lang?: string;
+  highlight?: string;
+  del?: string;
+  ins?: string;
+  frame?: 'code' | 'terminal' | 'none';
+  theme?: string;
+  wrap?: boolean;
+  title?: string;
+  class?: string;
+  showLineNumbers?: boolean;
+}
+
+const {
+  code,
+  lang = '',
+  highlight = '',
+  del = '',
+  ins = '',
+  frame = 'none',
+  theme = 'poimandres',
+  wrap = false,
+  title = '',
+  class: className,
+  showLineNumbers = false,
+  ...rest
+} = Astro.props;
+
+// Process highlighting ranges (e.g. {2-3,6})
+const highlightRanges = highlight
+  ? highlight
+      .replace(/[{}]/g, '')
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Process deleted lines
+const delRanges = del
+  ? del
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Process inserted lines
+const insRanges = ins
+  ? ins
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Apply highlighting, deletions, and insertions using Shiki's transformers
+const codeWithMeta = code
+  .split('\n')
+  .map((line: string, i: number) => {
+    const lineNumber = i + 1;
+    const meta = [];
+
+    if (highlightRanges.includes(lineNumber)) {
+      meta.push('focus');
+    }
+    if (delRanges.includes(lineNumber)) {
+      meta.push('--');
+    }
+    if (insRanges.includes(lineNumber)) {
+      meta.push('++');
+    }
+
+    return meta.length > 0 ? `${line} // [!code ${meta.join(' ')}]` : line;
+  })
+  .join('\n');
+
+// Determine which theme to use
+const selectedTheme = theme === 'poimandres' ? poimandresTheme : theme;
+
+// Determine if we should show line numbers
+const showNumbers = showLineNumbers && code.split('\n').length > 1;
+---
+
+<div
+  class:list={[
+    'code-block',
+    frame === 'terminal' && 'terminal-frame',
+    frame === 'code' && 'code-frame',
+    frame === 'none' && 'no-frame',
+    showNumbers && 'with-line-numbers',
+    className,
+  ]}
+  {...rest}
+>
+  {
+    (title || lang) && frame !== 'none' && frame !== 'terminal' && (
+      <div class="code-block-title">
+        {lang && <span class="code-language">{lang}</span>}
+        {title && <span class="code-title">{title}</span>}
+      </div>
+    )
+  }
+  <div class="code-block-content">
+    <Code
+      code={codeWithMeta}
+      lang={lang}
+      theme={selectedTheme}
+      wrap={wrap}
+      transformers={[
+        transformerMetaHighlight(),
+        transformerNotationDiff(),
+        transformerNotationFocus(),
+      ]}
+    />
+    <button class="copy-button" aria-label="Copy code to clipboard" data-tooltip="Copy">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="copy-icon">
+        <path
+          d="M18 3c0-1.657-1.343-3-3-3v0h-12c-1.657 0-3 1.343-3 3v0 12c0 1.657 1.343 3 3 3v0h12c1.657 0 3-1.343 3-3v0zM15 1.5c0.828 0 1.5 0.672 1.5 1.5v0 12c0 0.828-0.672 1.5-1.5 1.5v0h-12c-0.828 0-1.5-0.672-1.5-1.5v0-12c0-0.828 0.672-1.5 1.5-1.5v0zM21 7.5c0.828 0 1.5 0.672 1.5 1.5v0 12c0 0.828-0.672 1.5-1.5 1.5v0h-12c-0.828 0-1.5-0.672-1.5-1.5v0-1.5h-1.5v1.5c0 1.657 1.343 3 3 3v0h12c1.657 0 3-1.343 3-3v0-12c0-1.657-1.343-3-3-3v0h-1.5v1.5z"
+        ></path>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="check-icon">
+        <path
+          d="M22.942 6.582l-13.778 13.778c-0.156 0.156-0.371 0.253-0.609 0.253s-0.453-0.097-0.609-0.253v0l-6.028-6.028c-0.156-0.156-0.252-0.371-0.252-0.609 0-0.476 0.386-0.862 0.862-0.862 0.238 0 0.453 0.096 0.609 0.252v0l5.418 5.42 13.168-13.169c0.156-0.156 0.371-0.252 0.609-0.252 0.476 0 0.862 0.386 0.862 0.862 0 0.238-0.096 0.453-0.252 0.609v0z"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    setupCopyBtn();
+  });
+
+  // Also initialize immediately in case the page is not using transitions
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setupCopyBtn();
+  } else {
+    document.addEventListener('DOMContentLoaded', setupCopyBtn);
+  }
+
+  function setupCopyBtn() {
+    const copyButtons = document.querySelectorAll(
+      '.code-block .copy-button'
+    ) as NodeListOf<HTMLButtonElement>;
+    copyButtons.forEach(button => {
+      button.addEventListener('click', async () => {
+        const codeBlock = button.closest('.code-block');
+        if (!codeBlock) return;
+
+        const pre = codeBlock.querySelector('pre');
+        if (!pre) return;
+
+        // Get the text content, remove the Shiki annotations if present
+        const rawText = pre.textContent || '';
+        const code = rawText.replace(/\/\/\s*\[!.*?\]/g, '').trim();
+
+        // Copy to clipboard
+        try {
+          await navigator.clipboard.writeText(code);
+          button.classList.add('copied');
+          button.setAttribute('data-tooltip', 'Copied!');
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.setAttribute('data-tooltip', 'Copy');
+            button.blur();
+          }, 2000);
+        } catch (error) {
+          console.error('Failed to copy code: ', error);
+          button.classList.add('error');
+          button.setAttribute('data-tooltip', 'Failed to copy!');
+          setTimeout(() => {
+            button.classList.remove('error');
+            button.setAttribute('data-tooltip', 'Copy');
+            button.blur();
+          }, 2000);
+        }
+      });
+    });
+  }
+</script>

package/packages/components/index.ts

@@ -6,6 +6,7 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
+export { default as ChatApp } from './preact/ChatApp/ChatApp';
 export { type IconName } from './preact/Icon';
 
 // Astro components