@veluai/velu 0.2.36 → 0.2.38

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

@@ -10,9 +10,11 @@ import resolveIcon from '../lib/resolveIcon.jsx';
  * description and tags) and a right column with the entry body (the MDX
  * children — usually `##` sub-headings and prose).
  *
- * The section gets a stable `id` derived from the label so it is linkable
- * and shows up in the table of contents. The id MUST match the slug the
- * `extract-toc` remark plugin computes for the same label (see
+ * The section gets a stable `id` derived from description (preferred) or
+ * label so each entry is linkable and shows up in the table of contents.
+ * Preferring `description` keeps same-month releases unique (e.g. two
+ * "September 2026" rows with 0.2.37 / 0.2.36). The id MUST match the slug
+ * the `extract-toc` remark plugin computes (see
  * velu-cli/src/mdx-plugins/extract-toc.js → `slugifyUpdate`), so click→scroll
  * and scroll-spy line up.
  *
@@ -25,12 +27,20 @@ import resolveIcon from '../lib/resolveIcon.jsx';
  *   tags?: string | string[], rss?: any, children?: React.ReactNode,
  *   className?: string }} props
  */
-export function slugifyUpdate(value) {
-  const base = String(value || '')
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-  return `update-${base || 'item'}`;
+export function slugifyUpdate(label, description) {
+  const slugPart = (value) =>
+    String(value || '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  const labelPart = slugPart(label);
+  const descPart = description == null || description === '' ? '' : slugPart(description);
+  const base = descPart
+    ? labelPart
+      ? `${labelPart}-${descPart}`
+      : descPart
+    : labelPart || 'item';
+  return `update-${base}`;
 }
 
 function toTagList(value) {
@@ -51,7 +61,9 @@ export default function Update({
 }) {
   void rss;
   const updateLabel = String(label ?? date ?? 'Update');
-  const anchorId = slugifyUpdate(updateLabel);
+  const updateDescription =
+    description == null || description === '' ? undefined : String(description);
+  const anchorId = slugifyUpdate(updateLabel, updateDescription);
   const tagList = toTagList(tags);
 
   return (

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import Logo from './Logo.jsx';
+import SocialLinks from './SocialLinks.jsx';
+import ThemePreferenceMenu from './ThemePreferenceMenu.jsx';
+
+export default function VepaFooter({ brand, columns = [], socials = [], linkComponent: Link = 'a' }) {
+  const single = columns.length === 1;
+  const completeHeadings = columns.every((c) => c.title);
+  return <footer id="footer" className="vepa-footer" data-layout={columns.length <= 3 ? 'compact' : 'expanded'} data-single={single} data-headings={completeHeadings}>
+    <div className="vepa-footer__inner">
+      <div className="vepa-footer__top">
+        <div className="vepa-footer__brand-column">
+          <Link href={brand?.href || '/'} className="vepa-footer__brand">
+            {brand?.logo ? <Logo logo={brand.logo} alt={brand.label} /> : <span>{brand?.label || 'Velu'}</span>}
+          </Link>
+          <SocialLinks socials={socials} className="vepa-footer__brand-socials" />
+        </div>
+        <div className="vepa-footer__columns" style={{ '--footer-columns': columns.length }}>
+          {columns.map((column, i) => <div className="vepa-footer__column" key={i}>
+            <div className="vepa-footer__links">
+              {column.title && !single && <p className="vepa-footer__heading">{column.title}</p>}
+              {(column.items || []).map((item, j) => {
+                const external = /^https?:\/\//.test(item.href || '');
+                const Tag = external ? 'a' : Link;
+                return <Tag className="vepa-footer__link" key={j} href={item.href || '#'} {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}>{item.label}</Tag>;
+              })}
+            </div>
+          </div>)}
+        </div>
+        <SocialLinks socials={socials} className="vepa-footer__end-socials" />
+      </div>
+      {!completeHeadings && <SocialLinks socials={socials} className="vepa-footer__mobile-socials" />}
+      <div className="vepa-footer__divider" />
+      <div className="vepa-footer__bottom">
+        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className="vepa-footer__powered">Powered by <strong>Velu</strong></a>
+        <ThemePreferenceMenu inline />
+      </div>
+    </div>
+  </footer>;
+}

package/runtime/velu-ui/components/card.css

@@ -2,6 +2,7 @@
    (cta hover, image clip, group grid) so this has CSS. Namespaced. */
 
 .velu-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   border: var(--border-width) solid var(--border-color);
@@ -11,6 +12,14 @@
   color: var(--text-color);
   text-decoration: none;
 }
+.velu-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
+.velu-card:has(> .velu-card__link):hover { border-color: var(--accent-color); }
+.velu-card__link:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
+/* Nested controls must sit above the stretched-link overlay, or clicks hit the card href. */
+.velu-card :is(a, button, input, select, textarea, summary, label):not(.velu-card__link) {
+  position: relative;
+  z-index: 2;
+}
 
 /* CTA card: the whole card is the click target (stretched-link pattern —
    the CTA stays the single real <a>; a ::after overlay makes the entire

package/runtime/velu-ui/components/chatbot.css

@@ -45,6 +45,31 @@
     0 0 var(--s2) color-mix(in srgb, #000 18%, transparent),
     0 0 var(--s0) color-mix(in srgb, #000 8%, transparent);
 }
+
+/* Full-page Ask AI (`mode: assistant`). Sits under the navbar and
+   replaces the docs body instead of sliding in as a side panel. */
+.velu-chatbot--page {
+  inset-block-start: var(--velu-header-height, 3.5rem);
+  inset-block-end: 0;
+  inset-inline: 0;
+  inline-size: 100%;
+  max-inline-size: none;
+  transform: none;
+  border-inline-start: 0;
+  border-block-start: var(--border-width) solid var(--surface-color);
+  box-shadow: none;
+  z-index: 5;
+  /* Side gutters so the full-page chat isn't flush to the viewport. */
+  padding-inline: var(--s4);
+}
+.velu-chatbot--page .velu-chatbot__header,
+.velu-chatbot--page .velu-chatbot__body,
+.velu-chatbot--page .velu-chatbot__composer,
+.velu-chatbot--page .velu-chatbot__history {
+  max-inline-size: 42rem;
+  inline-size: 100%;
+  margin-inline: auto;
+}
 /* base.css applies a global `* { max-width: 66ch }`; reset it so the
    panel's structural elements size to flex/the panel, not 66ch. */
 .velu-chatbot * {
@@ -118,6 +143,23 @@
   .velu-chatbot--open {
     transform: translateY(0);
   }
+  /* Page-mode assistant stays a full-viewport chat, not a bottom sheet. */
+  .velu-chatbot--page,
+  .velu-chatbot--page.velu-chatbot--open {
+    inset-block-start: var(--velu-header-height, 3.5rem);
+    inset-block-end: 0;
+    inset-inline: 0;
+    inline-size: 100%;
+    max-inline-size: none;
+    block-size: auto;
+    transform: none;
+    border-radius: 0;
+    padding-block-start: 0;
+    box-shadow: none;
+  }
+  .velu-chatbot--page .velu-chatbot__drag-handle {
+    display: none;
+  }
 }
 
 /* ── Header ─────────────────────────────────────────────────────────── */

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

@@ -808,6 +808,81 @@
   }
 }
 
+/* ── Page modes (frontmatter `mode`) ─────────────────────────────────── */
+/* Mintlify-compatible layouts. Default is the current chrome (sidebar +
+   TOC + footer) and needs no extra rules. */
+
+/* Wide: drop the right rail, keep the right gutter, let the article
+   use the extra width inside that gutter. */
+.velu-docs-layout[data-page-mode='wide'] .velu-docs-layout__aside--right,
+.velu-docs-layout[data-page-mode='frame'] .velu-docs-layout__aside--right {
+  display: none;
+}
+.velu-docs-layout[data-page-mode='wide'] .velu-docs-layout__article {
+  max-inline-size: none;
+}
+
+/* Frame is custom canvas + sidebar: no TOC gutter; the landing column
+   is centered in the remaining width next to the sidebar. */
+.velu-docs-layout[data-page-mode='frame'] .velu-docs-layout__center {
+  margin-inline-end: 0;
+}
+
+/* Custom / center / assistant: no sidebar, no TOC. */
+.velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__aside,
+.velu-docs-layout[data-page-mode='center'] .velu-docs-layout__aside,
+.velu-docs-layout[data-page-mode='assistant'] .velu-docs-layout__aside {
+  display: none;
+}
+.velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__center,
+.velu-docs-layout[data-page-mode='center'] .velu-docs-layout__center,
+.velu-docs-layout[data-page-mode='assistant'] .velu-docs-layout__center {
+  margin-inline: 0;
+}
+.velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__sidebar-toggle,
+.velu-docs-layout[data-page-mode='center'] .velu-docs-layout__sidebar-toggle,
+.velu-docs-layout[data-page-mode='assistant'] .velu-docs-layout__sidebar-toggle,
+.velu-docs-layout[data-page-mode='wide'] .velu-toc-bar,
+.velu-docs-layout[data-page-mode='custom'] .velu-toc-bar,
+.velu-docs-layout[data-page-mode='frame'] .velu-toc-bar,
+.velu-docs-layout[data-page-mode='center'] .velu-toc-bar,
+.velu-docs-layout[data-page-mode='assistant'] .velu-toc-bar {
+  display: none;
+}
+
+/* Custom / frame are a landing canvas: center a max-w-4xl column.
+   Frame keeps the sidebar; custom does not. */
+.velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__main,
+.velu-docs-layout[data-page-mode='frame'] .velu-docs-layout__main {
+  padding-block: calc(var(--s5) * 2);
+  padding-inline: var(--s4);
+}
+.velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__article,
+.velu-docs-layout[data-page-mode='frame'] .velu-docs-layout__article {
+  max-inline-size: 56rem;
+  margin-inline: auto;
+}
+.velu-docs-layout[data-page-mode='custom'] .velu-prose > :is(h1, h2, h3, p),
+.velu-docs-layout[data-page-mode='frame'] .velu-prose > :is(h1, h2, h3, p) {
+  max-width: none;
+  text-align: center;
+}
+
+/* Assistant page: the chat fills the viewport below the header. Hide
+   the empty centre column when the chat is showing (no disabled-search
+   fallback). */
+.velu-docs-layout[data-page-mode='assistant']
+  .velu-docs-layout__center:not(:has(.velu-assistant-disabled)) {
+  display: none;
+}
+.velu-assistant-disabled {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 70vh;
+  padding: var(--s4) var(--s2);
+}
+
 /* ── 404 takeover ─────────────────────────────────────────────────────── */
 /* On a not-found route the docs chrome (both fixed asides) is hidden and the
    centre column spans full width to center the <NotFound> content. The header

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

@@ -39,6 +39,12 @@
     color-mix(in srgb, #000 55%, transparent);
 }
 
+.velu-header--no-tabs {
+  /* Tabs row is gone — restore bottom padding so brand / search /
+     actions don't sit on the header hairline. Matches the top inset. */
+  padding-block-end: var(--s-1);
+}
+
 /* Once the user has scrolled even a single pixel, the header becomes
    a translucent frosted-glass overlay so the article content shows
    through faintly underneath. color-mix keeps the recipe token-driven:

package/runtime/velu-ui/styles.css

@@ -63,3 +63,4 @@
 @import './components/docs-layout.css' layer(velu);
 @import './components/toc-bar.css' layer(velu);
 @import './components/search.css' layer(velu);
+@import './themes/vepa.css' layer(velu);