@veluai/velu 0.2.0 → 0.2.2

package/runtime/velu-ui/components/Chatbot.jsx

@@ -13,15 +13,24 @@ import Cluster from '../primitives/Cluster.jsx';
  *     open={chatOpen}
  *     seedQuestion={question}      // first message — sent on open
  *     onClose={() => setChatOpen(false)}
+ *     ask={askDocs}                // OPTIONAL — real backend (see below)
+ *     onFeedback={(id, v) => …}    // OPTIONAL — 👍/👎 for a message
  *   />
  *
  * Slide: the panel is fixed to the inline-end edge; `open` toggles a
  * `translateX` between fully off-screen and 0. Width is the
  * `--vchat-width` variable (default 24rem ≈ the design's 384px).
  *
- * The AI reply is a canned, fake-streamed answer (token-by-token) with
- * inline citation chips, a Sources list, and follow-up suggestions —
- * a dummy stand-in until a real RAG backend is wired up.
+ * Backend seam (mirrors Search.jsx's injectable `search` prop):
+ *   ask(prompt, { conversationId, signal }) → AsyncIterable<AskEvent>
+ *   AskEvent = {
+ *     delta?: string,            // text chunk to append (streamed)
+ *     citations?: Source[],      // [{ num, title, path, url }] — replaces sources
+ *     messageId?: string,        // assistant message id (for feedback)
+ *     conversationId?: string,   // threaded across turns
+ *   }
+ * When `ask` is omitted the panel falls back to a canned, fake-streamed
+ * demo answer (so dev preview / offline still shows the experience).
  */
 
 /* ── Brand mark — the Velu double-hook logo ─────────────────────────── */
@@ -111,6 +120,34 @@ function buildAnswer() {
   };
 }
 
+/* Real-backend path: turn the accumulated answer TEXT into the same token
+   shape `renderStream` consumes. The assistant streams plain text with inline
+   `code` spans and bracketed citation markers ([1], [2]); split those out so
+   they render as <code> and citation chips, exactly like the canned path. */
+function textToTokens(text) {
+  const tokens = [];
+  const re = /(`[^`]*`|\[\d+\])/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) tokens.push({ kind: 't', v: text.slice(last, m.index) });
+    const tok = m[0];
+    if (tok[0] === '`') tokens.push({ kind: 'code', v: tok.slice(1, -1) });
+    else tokens.push({ kind: 'cite', n: Number(tok.slice(1, -1)) });
+    last = re.lastIndex;
+  }
+  if (last < text.length) tokens.push({ kind: 't', v: text.slice(last) });
+  return tokens;
+}
+
+/* Plain-text of an answer (for the Copy action). */
+function tokensToPlain(tokens) {
+  return tokens
+    .map((tk) => (tk.kind === 'cite' ? `[${tk.n}]` : tk.v))
+    .join('')
+    .trim();
+}
+
 /* Flatten an answer into a stream of small tokens for incremental render. */
 function tokenizeAnswer(answer) {
   const tokens = [];
@@ -286,8 +323,37 @@ function UserMsg({ text }) {
   );
 }
 
-function AiMsg({ tokens, sources, followups, streaming, onFollowup }) {
+function AiMsg({
+  tokens,
+  sources,
+  followups,
+  streaming,
+  onFollowup,
+  messageId,
+  onFeedback,
+}) {
   const thinking = tokens.length === 0;
+  const [vote, setVote] = useState(null); // 'up' | 'down' | null
+  const [copied, setCopied] = useState(false);
+
+  const onAction = (ic) => {
+    if (ic === 'copy') {
+      try {
+        navigator.clipboard?.writeText(tokensToPlain(tokens));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      } catch {
+        /* clipboard blocked — no-op */
+      }
+      return;
+    }
+    if (ic === 'thumbs-up' || ic === 'thumbs-down') {
+      const v = ic === 'thumbs-up' ? 'up' : 'down';
+      const next = vote === v ? null : v; // toggle off if re-clicked
+      setVote(next);
+      onFeedback?.(messageId, next); // null = retract
+    }
+  };
   return (
     <div className="velu-chatbot__msg velu-chatbot__msg--ai">
       <Cluster
@@ -345,16 +411,24 @@ function AiMsg({ tokens, sources, followups, streaming, onFollowup }) {
 
       {!streaming && !thinking && (
         <Cluster space="0" className="velu-chatbot__msg-actions">
-          {['copy', 'refresh-cw', 'thumbs-up', 'thumbs-down'].map((ic) => (
-            <button
-              key={ic}
-              type="button"
-              className="velu-chatbot__msg-action"
-              aria-label={ic}
-            >
-              {resolveIcon(ic, { size: '1em' })}
-            </button>
-          ))}
+          {['copy', 'thumbs-up', 'thumbs-down'].map((ic) => {
+            const active =
+              (ic === 'thumbs-up' && vote === 'up') ||
+              (ic === 'thumbs-down' && vote === 'down');
+            const label = ic === 'copy' && copied ? 'check' : ic;
+            return (
+              <button
+                key={ic}
+                type="button"
+                className={`velu-chatbot__msg-action${active ? ' is-active' : ''}`}
+                aria-label={ic}
+                aria-pressed={ic === 'copy' ? undefined : active}
+                onClick={() => onAction(ic)}
+              >
+                {resolveIcon(label, { size: '1em' })}
+              </button>
+            );
+          })}
         </Cluster>
       )}
     </div>
@@ -413,6 +487,8 @@ export default function Chatbot({
   open = false,
   seedQuestion,
   onClose,
+  ask,
+  onFeedback,
   className = '',
   ...rest
 }) {
@@ -422,48 +498,133 @@ export default function Chatbot({
   const bodyRef = useRef(null);
   const streamingRef = useRef(false);
   const lastSeedRef = useRef(undefined);
+  // Real-backend session: conversation id threads turns; the controller lets
+  // a new-chat / close / unmount abort an in-flight stream.
+  const convoRef = useRef(undefined);
+  const abortRef = useRef(null);
 
   useEffect(() => {
     const el = bodyRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [messages]);
 
-  const send = useCallback((text) => {
-    const prompt = String(text ?? '').trim();
-    if (!prompt || streamingRef.current) return;
-    setInput('');
-    const answer = buildAnswer();
-    const fullTokens = tokenizeAnswer(answer);
-    setMessages((prev) => [
-      ...prev,
-      { role: 'user', text: prompt },
-      { role: 'ai', answer, tokens: [], streaming: true },
-    ]);
-    streamingRef.current = true;
-
-    let i = 0;
-    const startDelay = 1400; // "thinking" pause
-    const stepDelay = 28; // per token
-    let timer = setTimeout(function step() {
-      i = Math.min(fullTokens.length, i + 1);
-      setMessages((prev) => {
-        const out = prev.slice();
-        const last = out[out.length - 1];
-        out[out.length - 1] = {
-          ...last,
-          tokens: fullTokens.slice(0, i),
-          streaming: i < fullTokens.length,
+  // Merge a patch into the last (assistant) message.
+  const patchLast = useCallback((patch) => {
+    setMessages((prev) => {
+      if (!prev.length) return prev;
+      const out = prev.slice();
+      out[out.length - 1] = { ...out[out.length - 1], ...patch };
+      return out;
+    });
+  }, []);
+
+  // Stop whatever is in flight — a canned setTimeout chain ({ timer }) or a
+  // real fetch stream (an AbortController). Safe to call any time.
+  const cancelInFlight = useCallback(() => {
+    const a = abortRef.current;
+    if (a) {
+      if (a.timer) clearTimeout(a.timer);
+      if (typeof a.abort === 'function') a.abort();
+    }
+    abortRef.current = null;
+    streamingRef.current = false;
+  }, []);
+
+  const send = useCallback(
+    async (text) => {
+      const prompt = String(text ?? '').trim();
+      if (!prompt || streamingRef.current) return;
+      setInput('');
+
+      // ── No backend wired → canned, fake-streamed demo answer ──────────
+      if (!ask) {
+        const answer = buildAnswer();
+        const fullTokens = tokenizeAnswer(answer);
+        setMessages((prev) => [
+          ...prev,
+          { role: 'user', text: prompt },
+          {
+            role: 'ai',
+            tokens: [],
+            sources: answer.sources,
+            followups: answer.followups,
+            streaming: true,
+          },
+        ]);
+        streamingRef.current = true;
+        let i = 0;
+        const step = () => {
+          i = Math.min(fullTokens.length, i + 1);
+          patchLast({
+            tokens: fullTokens.slice(0, i),
+            streaming: i < fullTokens.length,
+          });
+          if (i < fullTokens.length) {
+            abortRef.current = { timer: setTimeout(step, 28) };
+          } else {
+            streamingRef.current = false;
+            abortRef.current = null;
+          }
         };
-        return out;
-      });
-      if (i < fullTokens.length) {
-        timer = setTimeout(step, stepDelay);
-      } else {
+        abortRef.current = { timer: setTimeout(step, 1400) }; // "thinking" pause
+        return;
+      }
+
+      // ── Real backend → stream deltas + citations from `ask` ───────────
+      setMessages((prev) => [
+        ...prev,
+        { role: 'user', text: prompt },
+        { role: 'ai', tokens: [], sources: [], followups: [], streaming: true },
+      ]);
+      streamingRef.current = true;
+      const controller =
+        typeof AbortController !== 'undefined' ? new AbortController() : null;
+      abortRef.current = controller;
+
+      let acc = '';
+      let sources = [];
+      let messageId;
+      try {
+        for await (const ev of ask(prompt, {
+          conversationId: convoRef.current,
+          signal: controller?.signal,
+        })) {
+          if (ev.conversationId) convoRef.current = ev.conversationId;
+          if (ev.messageId) messageId = ev.messageId;
+          if (ev.delta) acc += ev.delta;
+          if (ev.citations) {
+            sources = ev.citations.map((c, idx) => ({
+              num: c.num ?? idx + 1,
+              title: c.title,
+              path: c.path ?? c.route_path,
+              url: c.url,
+            }));
+          }
+          patchLast({ tokens: textToTokens(acc), sources, streaming: true, messageId });
+        }
+        patchLast({ tokens: textToTokens(acc), sources, streaming: false, messageId });
+      } catch (err) {
+        if (controller?.signal?.aborted) {
+          patchLast({ streaming: false });
+        } else {
+          patchLast({
+            tokens: textToTokens(
+              acc || 'Sorry — I couldn’t reach the assistant. Please try again.'
+            ),
+            streaming: false,
+            error: true,
+          });
+        }
+      } finally {
         streamingRef.current = false;
+        abortRef.current = null;
       }
-    }, startDelay);
-    return () => clearTimeout(timer);
-  }, []);
+    },
+    [ask, patchLast]
+  );
+
+  // Abort any in-flight stream when the panel unmounts.
+  useEffect(() => () => cancelInFlight(), [cancelInFlight]);
 
   // A new seedQuestion (from the page's AskBar) sends the first message.
   useEffect(() => {
@@ -474,7 +635,8 @@ export default function Chatbot({
   }, [open, seedQuestion, send]);
 
   const newChat = () => {
-    if (streamingRef.current) return;
+    cancelInFlight();
+    convoRef.current = undefined; // fresh conversation thread
     setMessages([]);
     setInput('');
     setHistoryOpen(false);
@@ -574,9 +736,11 @@ export default function Chatbot({
                 <AiMsg
                   key={i}
                   tokens={m.tokens}
-                  sources={m.answer?.sources}
-                  followups={m.answer?.followups}
+                  sources={m.sources}
+                  followups={m.followups}
                   streaming={m.streaming}
+                  messageId={m.messageId}
+                  onFeedback={onFeedback}
                   onFollowup={(f) => send(f)}
                 />
               ),

package/runtime/velu-ui/components/ContextMenu.jsx

@@ -203,6 +203,7 @@ export default function ContextMenu({
       justify="space-between"
       align="flex-end"
       className="velu-context-bar"
+      data-pagefind-ignore=""
     >
       {eyebrow ? <span className="velu-context-bar__eyebrow">{eyebrow}</span> : <span />}
 

package/runtime/velu-ui/components/Search.jsx

@@ -162,10 +162,14 @@ function PaletteRow({ item, selected, navMode, onHover, onSelect }) {
   );
 }
 
-/* The revealed palette — scrim + centered panel. */
-function SearchPalette({ results, placeholder, onSelect, onClose }) {
+/* The revealed palette — scrim + centered panel. When `search` (an async
+   query → results function, e.g. the Pagefind client) is provided, results
+   come from it; otherwise the static `results` list is filtered in-memory. */
+function SearchPalette({ results, search, placeholder, onSelect, onClose }) {
   const [query, setQuery] = useState('');
   const [selected, setSelected] = useState(0);
+  const [asyncResults, setAsyncResults] = useState([]);
+  const [searching, setSearching] = useState(false);
   const inputRef = useRef(null);
   // 'keyboard' | 'mouse' — which input last moved the selection; gates
   // the rows' scrollIntoView so mouse hover doesn't jitter the list.
@@ -175,7 +179,32 @@ function SearchPalette({ results, placeholder, onSelect, onClose }) {
     inputRef.current?.focus();
   }, []);
 
+  // Async source (Pagefind): debounce the query, fetch results.
+  useEffect(() => {
+    if (!search) return undefined;
+    const q = query.trim();
+    if (!q) {
+      setAsyncResults([]);
+      setSearching(false);
+      return undefined;
+    }
+    let cancelled = false;
+    setSearching(true);
+    const t = setTimeout(async () => {
+      const r = await search(q).catch(() => []);
+      if (!cancelled) {
+        setAsyncResults(Array.isArray(r) ? r : []);
+        setSearching(false);
+      }
+    }, 150);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [query, search]);
+
   const filtered = useMemo(() => {
+    if (search) return asyncResults;
     const q = query.trim().toLowerCase();
     if (!q) {
       // Empty query → just the recents.
@@ -185,15 +214,18 @@ function SearchPalette({ results, placeholder, onSelect, onClose }) {
       const hay = `${r.title} ${r.breadcrumb.join(' ')} ${r.desc}`.toLowerCase();
       return hay.includes(q);
     });
-  }, [query, results]);
+  }, [search, asyncResults, query, results]);
 
   const grouped = useMemo(() => {
     const map = new Map();
     filtered.forEach((r) => {
-      if (!map.has(r.group)) map.set(r.group, []);
-      map.get(r.group).push(r);
+      const g = r.group || 'Pages';
+      if (!map.has(g)) map.set(g, []);
+      map.get(g).push(r);
     });
-    return GROUP_ORDER.filter((g) => map.has(g)).map((g) => [g, map.get(g)]);
+    const known = GROUP_ORDER.filter((g) => map.has(g));
+    const extra = [...map.keys()].filter((g) => !GROUP_ORDER.includes(g));
+    return [...known, ...extra].map((g) => [g, map.get(g)]);
   }, [filtered]);
 
   const flat = useMemo(
@@ -266,19 +298,34 @@ function SearchPalette({ results, placeholder, onSelect, onClose }) {
         </div>
 
         <div className="velu-search__list" role="listbox">
-          {grouped.length === 0 && (
-            <div className="velu-search__empty">
-              <span className="velu-search__empty-icon" aria-hidden="true">
-                {resolveIcon('search-x', { size: '1em' })}
-              </span>
-              <div className="velu-search__empty-title">
-                No results for &ldquo;{query}&rdquo;
+          {grouped.length === 0 &&
+            (search && !query.trim() ? (
+              <div className="velu-search__empty">
+                <span className="velu-search__empty-icon" aria-hidden="true">
+                  {resolveIcon('search', { size: '1em' })}
+                </span>
+                <div className="velu-search__empty-title">Search the docs</div>
+                <div className="velu-search__empty-sub">
+                  Type to find pages and sections.
+                </div>
               </div>
-              <div className="velu-search__empty-sub">
-                Try a different keyword or browse the sidebar.
+            ) : searching ? (
+              <div className="velu-search__empty">
+                <div className="velu-search__empty-sub">Searching…</div>
               </div>
-            </div>
-          )}
+            ) : (
+              <div className="velu-search__empty">
+                <span className="velu-search__empty-icon" aria-hidden="true">
+                  {resolveIcon('search-x', { size: '1em' })}
+                </span>
+                <div className="velu-search__empty-title">
+                  No results for &ldquo;{query}&rdquo;
+                </div>
+                <div className="velu-search__empty-sub">
+                  Try a different keyword or browse the sidebar.
+                </div>
+              </div>
+            ))}
           {grouped.map(([group, items]) => (
             <div key={group}>
               <div className="velu-search__group">{group}</div>
@@ -346,6 +393,7 @@ function SearchUnavailable({ message, onClose }) {
 
 export default function Search({
   results = DEFAULT_RESULTS,
+  search,
   placeholder = 'Search documentation',
   onSelect,
   unavailable = false,
@@ -401,6 +449,7 @@ export default function Search({
         ) : (
           <SearchPalette
             results={results}
+            search={search}
             placeholder={placeholder}
             onSelect={onSelect}
             onClose={() => setOpen(false)}

package/runtime/velu-ui/components/Sidebar.jsx

@@ -41,6 +41,11 @@ import scrollIntoNearestView from '../lib/scrollIntoNearestView.js';
 
 const SidebarCtx = React.createContext({ activeHref: undefined, Link: 'a' });
 
+// Positioning must happen before paint (no flash); fall back to useEffect on
+// the server so React doesn't warn about useLayoutEffect during SSR.
+const useIsoLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 function isActive(item, activeHref) {
   return Boolean(
     item.active || (item.href != null && item.href === activeHref)
@@ -166,6 +171,47 @@ export default function Sidebar({
     scrollIntoNearestView(el);
   }, [activeHref]);
 
+  // The single gliding active indicator (crimson tint + flush-left bar). One
+  // element animates its position/height to the active item, so selection feels
+  // continuous rather than each item popping its own bar. It lives in the scroll
+  // content, so its offset is scroll-stable (no re-measure on scroll) and a
+  // pinned sticky heading's opaque background covers it when an item tucks under.
+  const [ind, setInd] = React.useState({ top: 0, h: 0, show: false });
+  const measure = React.useCallback(() => {
+    const nav = rootRef.current;
+    if (!nav) return;
+    const el = nav.querySelector('[aria-current="page"]');
+    if (!el) {
+      setInd((s) => (s.show ? { ...s, show: false } : s));
+      return;
+    }
+    const top = el.getBoundingClientRect().top - nav.getBoundingClientRect().top;
+    const h = el.offsetHeight;
+    // Bail when nothing moved → no needless re-render (and no animation jitter).
+    setInd((s) =>
+      s.show && Math.abs(s.top - top) < 0.5 && Math.abs(s.h - h) < 0.5
+        ? s
+        : { top, h, show: true },
+    );
+  }, []);
+  // Re-measure on selection / tab change…
+  useIsoLayoutEffect(() => {
+    measure();
+  }, [activeHref, sections, measure]);
+  // …and whenever the nav's layout changes (a group expands/collapses → the
+  // active item moves), plus on viewport resize.
+  React.useEffect(() => {
+    const nav = rootRef.current;
+    if (!nav || typeof ResizeObserver === 'undefined') return undefined;
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(nav);
+    window.addEventListener('resize', measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, [measure]);
+
   return (
     <SidebarCtx.Provider value={ctx}>
       <Stack
@@ -176,6 +222,15 @@ export default function Sidebar({
         aria-label="Documentation"
         {...rest}
       >
+        <span
+          className="velu-sidebar__indicator"
+          aria-hidden="true"
+          style={{
+            transform: `translateY(${ind.top}px)`,
+            height: `${ind.h}px`,
+            opacity: ind.show ? 1 : 0,
+          }}
+        />
         {/* Each section is its own Stack so the heading sits TIGHT to
             its list (small inner gap), while the nav's larger gap
             separates one section from the next — compact but still

package/runtime/velu-ui/components/context-menu.css

@@ -3,7 +3,10 @@
    tokens, light/dark via [data-theme]. */
 
 .velu-context-bar {
-  margin-block-end: var(--s0);
+  /* Tight to the page title below — the eyebrow reads as a kicker on the
+     title, not a detached row. Negative pull cancels the h1's line-height
+     leading so the cap-height of the title sits right under the eyebrow. */
+  margin-block-end: calc(-1 * var(--s-5));
 }
 
 /* Section/group label, top-left — small, uppercase, accent (matches the

package/runtime/velu-ui/components/docs-layout.css

@@ -102,6 +102,16 @@
 /* Region wrapping the scroll area + the overlay arrows. Fills the
    remaining aside height; relative so the arrows position to its
    top/bottom edges. */
+/* Hairline between the top anchor links and the nav sections (the sidebar
+   design's anchor↔sidebar separator). Tokenized; sits flush in the aside flow. */
+.velu-docs-context-divider {
+  flex: none;
+  block-size: var(--border-width);
+  background: var(--border-color);
+  margin-block: var(--s-2);
+  margin-inline: var(--s-2);
+}
+
 .velu-docs-nav-region {
   position: relative;
   flex: 1 1 auto;
@@ -131,7 +141,12 @@
   padding: 0;
   border: var(--border-width) solid var(--border-color);
   border-radius: 999px;
-  background: var(--page-bg);
+  /* Frosted glass — same recipe as the scrolled header / toc-bar: 75%
+     --page-bg + a saturate/blur backdrop, so the nav content shows through
+     faintly behind the button. */
+  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
+  backdrop-filter: saturate(140%) blur(12px);
+  -webkit-backdrop-filter: saturate(140%) blur(12px);
   color: var(--muted-color);
   cursor: pointer;
   z-index: 3;
@@ -151,19 +166,21 @@
   block-size: 1.1em;
 }
 .velu-docs-nav-arrow--up {
-  inset-block-start: var(--s-3);
+  /* Float ABOVE the scroll region — up in the context-divider gap — instead
+     of over the first section heading. The lift is the arrow's own height
+     (2rem, matching block-size) plus a small gap, so its bottom clears the
+     scroll content and it never overlaps nav text. */
+  inset-block-start: calc(-2rem - var(--s-4));
 }
 .velu-docs-nav-arrow--down {
   inset-block-end: var(--s-3);
 }
-/* Reveal only while hovering the sidebar AND there's content beyond
-   that edge. */
-.velu-docs-layout__aside--left:hover
-  .velu-docs-nav-scroll[data-fade-top='true']
-  ~ .velu-docs-nav-arrow--up,
-.velu-docs-layout__aside--left:hover
-  .velu-docs-nav-scroll[data-fade-bottom='true']
-  ~ .velu-docs-nav-arrow--down {
+/* Reveal whenever there's content beyond that edge — always on (not just on
+   hover), so the scroll affordance is visible as long as there's more to
+   scroll. The data-fade-* attrs (set by the runtime from scroll position)
+   already gate each arrow to the direction that actually has overflow. */
+.velu-docs-nav-scroll[data-fade-top='true'] ~ .velu-docs-nav-arrow--up,
+.velu-docs-nav-scroll[data-fade-bottom='true'] ~ .velu-docs-nav-arrow--down {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) scale(1);
@@ -200,10 +217,13 @@
 .velu-docs-layout__aside--right[data-fade-top='true'] {
   --vf-top: var(--s2);
 }
-/* The left nav's under-heading fade (the ::after below each sticky
-   section heading) is shown only while the nav is scrolled up, so a
-   section's first item isn't dimmed at rest. */
-.velu-docs-nav-scroll[data-fade-top='true'] .velu-sidebar__section::after {
+/* The left nav's under-heading fade (the ::after below a sticky section
+   heading) is shown only while the nav is scrolled up AND only under the
+   currently-PINNED section ([data-stuck], set by the runtime). Other sections'
+   headings scroll normally, so their first item must not be dimmed — only the
+   item sliding under the top-pinned heading fades. */
+.velu-docs-nav-scroll[data-fade-top='true']
+  .velu-sidebar__section[data-stuck='true']::after {
   opacity: 1;
 }
 .velu-docs-nav-scroll[data-fade-bottom='true'],

package/runtime/velu-ui/components/page-header.css

@@ -147,6 +147,7 @@
   color: var(--text-color);
 }
 .velu-header__action--outlined:hover {
+  background: var(--surface-color);
   border-color: var(--accent-color);
   color: var(--accent-color);
 }