@veluai/velu 0.2.35 → 0.2.37

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

@@ -45,9 +45,10 @@ export default function ChangelogFilters({ tags = [] }) {
   };
 
   return (
-    <div className="velu-changelog-filters">
+    <div id="changelog-filters" className="velu-changelog-filters">
       <div className="velu-changelog-filters__heading">Filters</div>
       <div
+        id="changelog-filters-content"
         className="velu-changelog-filters__list"
         role="group"
         aria-label="Filter updates by tag"

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

@@ -336,9 +336,10 @@ function renderStream(tokens, sources, onNavigate) {
 }
 
 /* ── Header ─────────────────────────────────────────────────────────── */
-function ChatHeader({ onClose, onNew, onHistory, historyOpen }) {
+function ChatHeader({ onClose, onNew, onHistory, historyOpen, showClose = true }) {
   return (
     <Cluster
+      as="chat-assistant-sheet-header"
       space="var(--s-2)"
       justify="space-between"
       align="center"
@@ -369,6 +370,7 @@ function ChatHeader({ onClose, onNew, onHistory, historyOpen }) {
         >
           {resolveIcon('plus', { size: '1em' })}
         </button>
+        {showClose && (
         <button
           type="button"
           className="velu-chatbot__iconbtn"
@@ -377,6 +379,7 @@ function ChatHeader({ onClose, onNew, onHistory, historyOpen }) {
         >
           {resolveIcon('x', { size: '1em' })}
         </button>
+        )}
       </Cluster>
     </Cluster>
   );
@@ -461,7 +464,7 @@ function Welcome({ onPick, suggestions }) {
           >
             <Cluster space="var(--s-2)" align="center">
               {resolveIcon(s.icon, { size: '1em' })}
-              <span>{s.label}</span>
+              <starter-question-text>{s.label}</starter-question-text>
             </Cluster>
             {resolveIcon('arrow-right', { size: '1em' })}
           </button>
@@ -616,6 +619,8 @@ function Composer({ value, onChange, onSubmit, disabled }) {
       <div className="velu-chatbot__input-wrap">
         <textarea
           ref={taRef}
+          id="chat-assistant-textarea"
+          data-component="chat-assistant-input"
           className="velu-chatbot__input"
           placeholder="Ask anything about the docs…"
           rows={1}
@@ -625,6 +630,7 @@ function Composer({ value, onChange, onSubmit, disabled }) {
         />
         <button
           type="button"
+          data-component="chat-assistant-send-button"
           className={`velu-chatbot__send${active ? ' is-active' : ''}`}
           onClick={onSubmit}
           disabled={!active}
@@ -633,9 +639,9 @@ function Composer({ value, onChange, onSubmit, disabled }) {
           {resolveIcon('arrow-up', { size: '1em' })}
         </button>
       </div>
-      <div className="velu-chatbot__foot">
+      <chat-assistant-disclaimer-text class="velu-chatbot__foot">
         <kbd>Enter</kbd> to send · <kbd>⇧ Enter</kbd> for newline
-      </div>
+      </chat-assistant-disclaimer-text>
     </div>
   );
 }
@@ -651,6 +657,7 @@ export default function Chatbot({
   listHistory,
   loadConversation,
   suggestions,
+  layout = 'panel',
   className = '',
   ...rest
 }) {
@@ -878,8 +885,9 @@ export default function Chatbot({
   const isBottomSheet = () =>
     typeof window !== 'undefined' &&
     window.matchMedia('(max-width: 1024px)').matches;
+  const isPage = layout === 'page';
   const onDragStart = (e) => {
-    if (!isBottomSheet()) return;
+    if (isPage || !isBottomSheet()) return;
     dragRef.current = { active: true, startY: e.clientY, currentY: 0 };
     e.currentTarget.setPointerCapture?.(e.pointerId);
   };
@@ -902,7 +910,7 @@ export default function Chatbot({
     if (!open) setDragOffset(0);
   }, [open]);
 
-  const cls = `velu-chatbot${open ? ' velu-chatbot--open' : ''} ${className}`.trim();
+  const cls = `velu-chatbot${open || isPage ? ' velu-chatbot--open' : ''}${isPage ? ' velu-chatbot--page' : ''} ${className}`.trim();
   const dragStyle =
     dragOffset > 0
       ? { transform: `translateY(${dragOffset}px)`, transition: 'none' }
@@ -910,8 +918,10 @@ export default function Chatbot({
 
   return (
     <aside
+      id="chat-assistant-sheet"
+      data-component="chat-assistant-sheet"
       className={cls}
-      aria-hidden={!open}
+      aria-hidden={isPage ? false : !open}
       aria-label="Ask AI"
       style={dragStyle}
       {...rest}
@@ -933,6 +943,7 @@ export default function Chatbot({
         onNew={newChat}
         onHistory={() => setHistoryOpen((o) => !o)}
         historyOpen={historyOpen}
+        showClose={!isPage}
       />
 
       {historyOpen && (
@@ -944,7 +955,7 @@ export default function Chatbot({
         />
       )}
 
-      <div className="velu-chatbot__body" ref={bodyRef}>
+      <chat-assistant-sheet-content class="velu-chatbot__body" ref={bodyRef}>
         {messages.length === 0 ? (
           <Welcome onPick={(t) => send(t)} suggestions={suggestions} />
         ) : (
@@ -968,7 +979,7 @@ export default function Chatbot({
             )}
           </Stack>
         )}
-      </div>
+      </chat-assistant-sheet-content>
 
       <Composer
         value={input}

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

@@ -90,9 +90,9 @@ function TabLabel({ icon, label }) {
   return (
     <>
       {icon != null && (
-        <span className="velu-code-block__tab-icon" aria-hidden="true">
+        <code-block-icon class="velu-code-block__tab-icon" aria-hidden="true">
           {typeof icon === 'string' ? resolveIcon(icon, { size: '1em' }) : icon}
-        </span>
+        </code-block-icon>
       )}
       <span className="velu-code-block__tab-label">{label}</span>
     </>
@@ -143,6 +143,7 @@ function CopyButton({ code }) {
       type="button"
       onClick={copy}
       className="velu-code-block__copy"
+      data-component="code-block-copy-button"
       aria-label={copied ? 'Copied' : 'Copy code'}
       title={copied ? 'Copied' : 'Copy'}
     >
@@ -242,7 +243,7 @@ export function CodeBlock({
   const label = filename || title;
   const tabIcon = pickIcon({ icon, withIcon, language });
   return (
-    <div className={cls} {...rest}>
+    <code-block class={cls} {...rest}>
       {label && (
         <div className="velu-code-block__header">
           <Tab active icon={tabIcon} label={label} />
@@ -254,7 +255,7 @@ export function CodeBlock({
         lineNumbers={lineNumbers}
         highlight={highlight}
       />
-    </div>
+    </code-block>
   );
 }
 CodeBlock.displayName = 'CodeBlock';
@@ -340,7 +341,7 @@ export function CodeGroup({
   }
 
   return (
-    <div className={cls} {...rest}>
+    <code-group class={cls} {...rest}>
       <div className="velu-code-block__header">
         {canLeft && (
           <button
@@ -391,7 +392,7 @@ export function CodeGroup({
         lineNumbers={lineNumbers}
         highlight={highlight}
       />
-    </div>
+    </code-group>
   );
 }
 

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

@@ -44,10 +44,12 @@ export default function Columns({
 }) {
   return (
     <Switcher
+      as="columns"
       className={`velu-columns ${className}`.trim()}
       space={space}
       min={min}
       limit={cols}
+      style={{ '--vepa-columns': Math.max(1, Math.min(4, Number(cols) || 2)) }}
       {...rest}
     >
       {children}

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

@@ -256,11 +256,11 @@ export default function ContextMenu({
       className="velu-context-bar"
       data-pagefind-ignore=""
     >
-      {eyebrow ? <span className="velu-context-bar__eyebrow">{eyebrow}</span> : <span />}
+      {eyebrow ? <eyebrow className="velu-context-bar__eyebrow">{eyebrow}</eyebrow> : <span />}
 
       <div className="velu-context-bar__actions">
       {items.length > 0 && (
-        <div ref={rootRef} className="velu-context-menu" data-open={open ? 'true' : 'false'}>
+        <div ref={rootRef} id="page-context-menu" className="velu-context-menu" data-open={open ? 'true' : 'false'}>
           <div className="velu-context-menu__split">
             <button
               type="button"
@@ -275,6 +275,7 @@ export default function ContextMenu({
             </button>
             <button
               type="button"
+              id="page-context-menu-button"
               className="velu-context-menu__toggle"
               aria-haspopup="menu"
               aria-expanded={open}

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

@@ -46,7 +46,7 @@ export default function Field({
 }) {
   const hasDefault = defaultValue !== undefined && defaultValue !== null;
   return (
-    <div className={`velu-field ${className}`.trim()} {...rest}>
+    <field className={`velu-field ${className}`.trim()} {...rest}>
       {/* Cluster handles the wrap-friendly inline row layout — chips +
           name + type + required + default + post — with a 16px gap and
           baseline alignment so the bold name doesn't shift vertically
@@ -76,6 +76,6 @@ export default function Field({
       {children != null && children !== false && (
         <div className="velu-field__body">{children}</div>
       )}
-    </div>
+    </field>
   );
 }

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

@@ -40,6 +40,7 @@ export default function Icon({
         src={icon}
         alt={ariaLabel || ''}
         className={classes}
+        data-component="icon"
         style={sharedStyle}
         aria-hidden={ariaLabel ? undefined : true}
         {...rest}

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

@@ -149,14 +149,14 @@ export default function Image({
 
   if (caption) {
     return (
-      <figure className={cls} {...rest}>
+      <figure className={cls} data-component={chrome === 'frame' ? 'frame' : undefined} {...rest}>
         {body}
         <figcaption className="velu-image__caption">{caption}</figcaption>
       </figure>
     );
   }
   return (
-    <div className={cls} {...rest}>
+    <div className={cls} data-component={chrome === 'frame' ? 'frame' : undefined} {...rest}>
       {body}
     </div>
   );

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

@@ -24,8 +24,8 @@ export default function MethodBadge({
   const safe = METHODS.includes(key) ? key : 'get';
   const cls = `velu-method-badge velu-method-badge--${safe} ${className}`.trim();
   return (
-    <span className={cls} {...rest}>
+    <method-pill class={cls} {...rest}>
       {String(method).toUpperCase()}
-    </span>
+    </method-pill>
   );
 }

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

@@ -30,9 +30,16 @@ export default function NavSelect({
   bare = false,
   linkComponent = 'a',
   className = '',
+  // Mintlify-compatible hooks: id prefix for the trigger/menu
+  // (e.g. 'localization-select' → #localization-select-trigger /
+  // #localization-select-content / #localization-select-item) and the
+  // data-component family ('nav-dropdown' → nav-dropdown-trigger, …).
+  idPrefix,
+  component = 'nav-dropdown',
   ...rest
 }) {
   const Link = linkComponent;
+  const hookId = (suffix) => (idPrefix ? `${idPrefix}-${suffix}` : undefined);
   const [open, setOpen] = React.useState(false);
   const rootRef = React.useRef(null);
 
@@ -61,6 +68,8 @@ export default function NavSelect({
     >
       <button
         type="button"
+        id={hookId('trigger')}
+        data-component={`${component}-trigger`}
         className="velu-nav-select__btn"
         aria-haspopup="menu"
         aria-expanded={open}
@@ -82,23 +91,32 @@ export default function NavSelect({
           focusable="false"
         />
       </button>
-      <ul className="velu-nav-select__menu" role="menu" aria-hidden={!open}>
+      <ul
+        id={hookId('content')}
+        data-component={`${component}-content`}
+        className="velu-nav-select__menu"
+        role="menu"
+        aria-hidden={!open}
+      >
         {options.map((o, i) => (
           <li key={o.href ?? i} role="none">
             <Link
               role="menuitem"
+              id={i === 0 ? hookId('item') : undefined}
+              data-component={`${component}-item`}
+              data-active={o.active ? 'true' : undefined}
               className={`velu-nav-select__item${o.active ? ' velu-nav-select__item--active' : ''}`}
               href={o.href}
               tabIndex={open ? 0 : -1}
               onClick={() => setOpen(false)}
             >
               {o.icon && (
-                <span className="velu-nav-select__item-icon" aria-hidden="true">
+                <nav-dropdown-item-icon class="velu-nav-select__item-icon" aria-hidden="true">
                   {resolveIcon(o.icon, { size: '1em' })}
-                </span>
+                </nav-dropdown-item-icon>
               )}
               {o.code && <span className="velu-nav-select__code">{o.code}</span>}
-              <span>{o.label}</span>
+              <nav-dropdown-item-title>{o.label}</nav-dropdown-item-title>
             </Link>
           </li>
         ))}

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

@@ -27,15 +27,15 @@ export default function NotFound({
 }) {
   const Link = linkComponent;
   return (
-    <section className="velu-404">
+    <not-found-container class="velu-404">
       <p className="velu-404__eyebrow">{eyebrow}</p>
-      <div className="velu-404__num" aria-hidden="true">
+      <not-found-status-code class="velu-404__num" aria-hidden="true">
         404
-      </div>
-      <h1 className="velu-404__title">{title}</h1>
-      <p className="velu-404__body">{body}</p>
+      </not-found-status-code>
+      <h1 className="velu-404__title" data-component="not-found-title">{title}</h1>
+      <p className="velu-404__body" data-component="not-found-description">{body}</p>
       <div className="velu-404__actions">
-        <Link className="velu-404__btn velu-404__btn--primary" href={homeHref}>
+        <Link className="velu-404__btn velu-404__btn--primary" data-component="not-found-recommended-page-link" href={homeHref}>
           <span className="velu-404__btn-ic" aria-hidden="true">
             {resolveIcon('house', { size: '1em' })}
           </span>
@@ -58,6 +58,6 @@ export default function NotFound({
           </button>
         )}
       </div>
-    </section>
+    </not-found-container>
   );
 }

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

@@ -110,16 +110,19 @@ export default function PageFeedback({
 
   return (
     <Stack
+      as="contextual-feedback-container"
       space="var(--s0)"
       className={`velu-feedback ${className}`.trim()}
       {...rest}
     >
-      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
+      <Cluster as="feedback-toolbar" space="var(--s0)" align="center" className="velu-feedback__bar">
         <span className="velu-feedback__question">{question}</span>
 
         <Cluster space="var(--s-2)" align="center">
           <button
             type="button"
+            id="feedback-thumbs-up"
+            data-component="contextual-feedback-button"
             className={`velu-feedback__btn${
               vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
             }`}
@@ -132,6 +135,8 @@ export default function PageFeedback({
           </button>
           <button
             type="button"
+            id="feedback-thumbs-down"
+            data-component="contextual-feedback-button"
             className={`velu-feedback__btn${
               vote === 'no' ? ' velu-feedback__btn--chosen' : ''
             }`}
@@ -151,8 +156,8 @@ export default function PageFeedback({
       </Cluster>
 
       {showForm && (
-        <Stack space="var(--s1)" className="velu-feedback__form">
-          <h3 className="velu-feedback__form-title">
+        <Stack as="contextual-feedback-form" id="feedback-form" space="var(--s1)" className="velu-feedback__form">
+          <h3 className="velu-feedback__form-title" data-component="contextual-feedback-form-title">
             How can we improve our product?
           </h3>
 
@@ -176,6 +181,8 @@ export default function PageFeedback({
           </Stack>
 
           <textarea
+            id="feedback-form-input"
+            data-component="contextual-feedback-input"
             className="velu-feedback__detail"
             placeholder="(optional) Could you share more about your experience?"
             value={detail}
@@ -186,6 +193,7 @@ export default function PageFeedback({
           <Cluster space="var(--s-1)">
             <button
               type="button"
+              id="feedback-form-cancel"
               className="velu-feedback__action velu-feedback__action--cancel"
               onClick={cancel}
             >
@@ -193,6 +201,8 @@ export default function PageFeedback({
             </button>
             <button
               type="button"
+              id="feedback-form-submit"
+              data-component="contextual-feedback-form-submit-button"
               className="velu-feedback__action velu-feedback__action--submit"
               onClick={submit}
             >

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import VepaFooter from './VepaFooter.jsx';
 import Stack from '../primitives/Stack.jsx';
 import Cluster from '../primitives/Cluster.jsx';
 import SocialLinks from './SocialLinks.jsx';
@@ -67,6 +68,7 @@ function VeluMark() {
 }
 
 export default function PageFooter({
+  preset,
   brand,
   columns = [],
   socials = [],
@@ -75,6 +77,7 @@ export default function PageFooter({
   ...rest
 }) {
   const Link = linkComponent;
+  if (preset === 'vepa') return <VepaFooter brand={brand} columns={columns} socials={socials} linkComponent={Link} />;
   const brandLabel = brand?.label ?? 'Velu';
   const brandHref = brand?.href;
 

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

@@ -68,9 +68,13 @@ export function VeluMark() {
   );
 }
 
-function ActionButton({ action, Link }) {
-  const { label, icon, kind = 'outlined', href, onClick, external } = action;
+function ActionButton({ action, Link, id }) {
+  const { label, icon, kind = 'outlined', href, onClick, external, component } = action;
   const cls = `velu-header__action velu-header__action--${kind}`;
+  // Mintlify-compatible hooks: `#topbar-cta-button` on the first primary
+  // action, `[data-component="navbar-link"]` on every action (overridable per
+  // action, e.g. component: 'logout-link').
+  const hooks = { id, 'data-component': component ?? 'navbar-link', 'data-component-name': kind === 'primary' ? 'primary-header-button' : undefined };
   const content = (
     <>
       {icon && (
@@ -87,13 +91,13 @@ function ActionButton({ action, Link }) {
       ? { target: '_blank', rel: 'noreferrer' }
       : {};
     return (
-      <Tag className={cls} href={href} {...extraProps}>
+      <Tag className={cls} href={href} {...hooks} {...extraProps}>
         {content}
       </Tag>
     );
   }
   return (
-    <button type="button" className={cls} onClick={onClick}>
+    <button type="button" className={cls} onClick={onClick} {...hooks}>
       {content}
     </button>
   );
@@ -111,6 +115,8 @@ function HeaderTab({ tab, isActive, Link }) {
       className={cls}
       href={href}
       aria-current={isActive ? 'page' : undefined}
+      data-active={isActive ? 'true' : undefined}
+      data-component="nav-tabs-item"
       {...extraProps}
     >
       {icon && (
@@ -226,6 +232,7 @@ function KebabMenu({ actions, Link }) {
 }
 
 export default function PageHeader({
+  preset,
   brand,
   brandTrailing,
   center,
@@ -243,6 +250,7 @@ export default function PageHeader({
   const Link = linkComponent;
   const brandLabel = brand?.label ?? 'Velu';
   const brandHref = brand?.href;
+  const firstPrimary = actions.findIndex((a) => a.kind === 'primary');
 
   // Track whether the page has been scrolled so the header can flip
   // from solid to translucent / frosted. Edge-triggered (only updates
@@ -259,6 +267,12 @@ export default function PageHeader({
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  const showTabsRow =
+    tabs.length > 0 ||
+    (breadcrumb && breadcrumb.length > 0) ||
+    Boolean(tabsTrailing) ||
+    Boolean(onMenuClick);
+
   // A configured logo replaces the mark + wordmark entirely (Mintlify-style).
   const brandBlock = (
     <Cluster space="var(--s-3)" align="center" className="velu-header__brand" style={{ flexWrap: 'nowrap' }}>
@@ -276,8 +290,11 @@ export default function PageHeader({
   return (
     <Stack
       as="header"
-      space="var(--s0)"
-      className={`velu-header${scrolled ? ' velu-header--scrolled' : ''} ${className}`.trim()}
+      space={preset === 'vepa' ? '0px' : 'var(--s0)'}
+      data-has-tabs={tabs.length > 0 ? 'true' : 'false'}
+      className={`velu-header${scrolled ? ' velu-header--scrolled' : ''}${
+        showTabsRow ? '' : ' velu-header--no-tabs'
+      } ${className}`.trim()}
       {...rest}
     >
       {/* Top row — 3-column grid: brand | center | actions. */}
@@ -288,7 +305,7 @@ export default function PageHeader({
           className="velu-header__col velu-header__col--brand"
         >
           {brandHref ? (
-            <Link href={brandHref} className="velu-header__brand-link">
+            <Link href={brandHref} className="velu-header__brand-link" data-component="nav-logo">
               {brandBlock}
             </Link>
           ) : (
@@ -306,6 +323,7 @@ export default function PageHeader({
 
         {(actions.length > 0 || trailing) && (
           <Cluster
+            as="topbar-right-container"
             space="var(--s-2)"
             align="center"
             className="velu-header__col velu-header__col--actions"
@@ -316,7 +334,12 @@ export default function PageHeader({
             {actions.length > 0 && (
               <div className="velu-header__actions-list">
                 {actions.map((a, i) => (
-                  <ActionButton key={i} action={a} Link={Link} />
+                  <ActionButton
+                    key={i}
+                    action={a}
+                    Link={Link}
+                    id={i === firstPrimary ? 'topbar-cta-button' : undefined}
+                  />
                 ))}
               </div>
             )}
@@ -336,11 +359,9 @@ export default function PageHeader({
           takes their place. Burger stays at the trailing edge via
           margin-inline-start: auto on the burger button itself, so
           its position is unaffected by the breadcrumb's length. */}
-      {(tabs.length > 0 ||
-        (breadcrumb && breadcrumb.length > 0) ||
-        tabsTrailing ||
-        onMenuClick) && (
+      {showTabsRow && (
         <Cluster
+          as="nav-tabs"
           space="var(--s0)"
           align="center"
           className="velu-header__tabs"
@@ -367,6 +388,7 @@ export default function PageHeader({
             <button
               type="button"
               className="velu-header__crumbs"
+              data-component="breadcrumb-list"
               onClick={onMenuClick}
               aria-label="Open navigation menu"
             >
@@ -381,13 +403,13 @@ export default function PageHeader({
                         focusable="false"
                       />
                     )}
-                    <span
-                      className={`velu-header__crumb${
+                    <breadcrumb-item
+                      class={`velu-header__crumb${
                         isLast ? ' velu-header__crumb--current' : ''
                       }`}
                     >
                       {c.label}
-                    </span>
+                    </breadcrumb-item>
                   </React.Fragment>
                 );
               })}

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

@@ -32,9 +32,10 @@ function NavCard({ page, dir, Link }) {
   return (
     <Link
       className={`velu-pagenav__card velu-pagenav__card--${dir}`}
+      data-component={`pagination-${dir}`}
       href={page.href ?? '#'}
     >
-      <span className="velu-pagenav__title">{page.label}</span>
+      <pagination-title class="velu-pagenav__title">{page.label}</pagination-title>
       <Cluster
         space="var(--s-4)"
         align="center"

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

@@ -69,7 +69,7 @@ export default function Prompt({
   }
 
   return (
-    <div className={`velu-prompt ${className}`.trim()} {...rest}>
+    <prompt className={`velu-prompt ${className}`.trim()} {...rest}>
       {title != null && (
         <div className="velu-prompt__title">{title}</div>
       )}
@@ -110,6 +110,6 @@ export default function Prompt({
           {copied ? 'Copied' : 'Copy Prompt'}
         </button>
       </Cluster>
-    </div>
+    </prompt>
   );
 }

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

@@ -287,6 +287,7 @@ function SearchPalette({ results, search, placeholder, onSelect, onClose }) {
           </span>
           <input
             ref={inputRef}
+            id="search-input"
             className="velu-search__input"
             placeholder={placeholder}
             value={query}