@netlify/spark-ui 0.0.46 → 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.js

@@ -1,4 +1,4 @@
-import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.CNV9mxng.js";
+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.

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/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",
+  "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/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

package/packages/components/preact/ChatApp/ChatApp.css

@@ -0,0 +1,142 @@
+/* styles.css */
+
+/* Main container */
+.chatbot-container {
+  display: flex;
+  padding: 3rem;
+  height: 100vh;
+  background-color: #f7fafc;
+}
+
+.chatbot-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1024px;
+  margin: 0 auto;
+  background-color: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Header */
+.header {
+  background-color: #2d3748;
+  color: white;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-title {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.new-chat-button {
+  display: flex;
+  align-items: center;
+  background-color: #4a5568;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.icon {
+  margin-right: 0.25rem;
+}
+
+/* Chat container */
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+/* Error message */
+.error-message {
+  background-color: #fed7d7;
+  border: 1px solid #fbd5d5;
+  color: #9b2c2c;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+}
+
+.error-title {
+  font-weight: bold;
+}
+
+/* Message bubbles */
+.message {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.message-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.message-bubble {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  max-width: 75%;
+}
+
+.user-message {
+  background-color: #4299e1;
+  color: white;
+}
+
+.bot-message {
+  background-color: #edf2f7;
+  color: #2d3748;
+}
+
+/* Input area */
+.input-area {
+  border-top: 1px solid #e2e8f0;
+  padding: 1rem;
+}
+
+.input-form {
+  display: flex;
+  align-items: center;
+}
+
+.input-field {
+  flex: 1;
+  background-color: #edf2f7;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.input {
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.stop-button,
+.send-button {
+  margin-left: 0.5rem;
+  background-color: #3182ce;
+  border-radius: 9999px;
+  padding: 0.5rem;
+  color: white;
+}
+
+.stop-icon {
+  width: 1rem;
+  height: 1rem;
+}