@veluai/velu 0.2.42 → 0.2.43

package/runtime/velu-ui/themes/vepa.css

@@ -40,7 +40,7 @@
   backdrop-filter: none;
 }
 [data-site-theme='vepa'] .velu-header__top {
-  height: 48px;
+  height: 56px;
   padding-inline: 24px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0;
@@ -48,7 +48,7 @@
 [data-site-theme='vepa'] .velu-header__col--center { width: 100%; padding-inline: 8px; }
 [data-site-theme='vepa'] .velu-header__col--center > * { justify-content: center !important; flex-wrap: nowrap !important; }
 [data-site-theme='vepa'] .velu-logo { height: 22px; }
-[data-site-theme='vepa'] .velu-header__wordmark { font-family: inherit; font-size: 30px; line-height: 35px; font-weight: 700; }
+[data-site-theme='vepa'] .velu-header__wordmark { font-family: var(--font-wordmark); font-size: 30px; line-height: 35px; font-weight: 300; }
 [data-site-theme='vepa'] .velu-header__mark { display: none; }
 [data-site-theme='vepa'] .velu-header__action { font-size: 14px; line-height: 20px; border-radius: 8px; padding: 6px 12px; border: 0; }
 [data-site-theme='vepa'] .velu-header__action--primary { font-weight: 500; }
@@ -57,8 +57,8 @@
 [data-site-theme='vepa'] .velu-search__trigger { inline-size: 256px !important; height: 32px; padding: 0 8px; gap: 4px; background: var(--surface-color); border-color: var(--vepa-hairline); border-radius: 8px; font-size: 14px; }
 [data-site-theme='vepa'] .velu-search__trigger-icon svg { width: 16px; height: 16px; }
 [data-site-theme='vepa'] .velu-search__kbd { background: var(--page-bg); border: 0; padding: 2px 6px; font: 500 12px/16px var(--font-sans); border-radius: 4px; }
-[data-site-theme='vepa'] .velu-header__tabs { height: 48px; padding: 0 24px; background: var(--surface-color); }
-[data-site-theme='vepa'] .velu-header__tab { height: 48px; padding-block: 0; font-size: 14px; line-height: 20px; }
+[data-site-theme='vepa'] .velu-header__tabs { height: 52px; padding: 0 24px; background: var(--surface-color); }
+[data-site-theme='vepa'] .velu-header__tab { height: 52px; padding-block: 0; font-size: 14px; line-height: 20px; }
 @container docs (min-width: 1024px) {
   [data-site-theme='vepa'] .velu-header[data-has-tabs='false'] .velu-header__tabs { display: none !important; }
   [data-site-theme='vepa'] .velu-header__crumbs,
@@ -71,6 +71,16 @@
 [data-site-theme='vepa'] .velu-docs-layout__main { padding: 24px; }
 [data-site-theme='vepa'] .velu-docs-layout__article { max-inline-size: 648px; position: relative; }
 [data-site-theme='vepa'] .velu-sidebar { margin: 0; width: 100%; }
+/* Disappearing rail scrollbar (Aspen-style): no permanent gutter — thumb
+   reveals on hover, like Nila. Overrides the always-on base rail. */
+[data-site-theme='vepa'] .velu-docs-nav-scroll { overflow-y: auto; background-image: none; scrollbar-color: transparent transparent; }
+[data-site-theme='vepa'] .velu-docs-nav-scroll:hover { scrollbar-color: var(--border-color) transparent; }
+[data-site-theme='vepa'] .velu-docs-nav-scroll::-webkit-scrollbar-track { background: transparent; }
+[data-site-theme='vepa'] .velu-docs-nav-scroll::-webkit-scrollbar-thumb { background: transparent; }
+[data-site-theme='vepa'] .velu-docs-nav-scroll:hover::-webkit-scrollbar-thumb { background: var(--border-color); }
+/* Ask AI entry keeps a hairline + surface wash like Mintlify Sequoia's Ask
+   button (the base vepa action style strips borders everywhere). */
+[data-site-theme='vepa'] #assistant-entry { border: var(--border-width) solid var(--vepa-hairline); background: var(--surface-color); }
 [data-site-theme='vepa'] :is(.velu-sidebar__section, .velu-api-sidebar__section) { position: static; font: 400 12px/16px var(--font-sans); text-transform: none; letter-spacing: 0; padding: 0 24px 8px; color: var(--vepa-heading); }
 [data-site-theme='vepa'] .velu-sidebar__section::after,
 [data-site-theme='vepa'] .velu-sidebar__indicator { display: none; }
@@ -119,7 +129,7 @@
 /* Sticky on-page TocBar (used below the right-rail breakpoint). */
 [data-site-theme='vepa'] .velu-toc-bar {
   border-block-end-color: var(--vepa-hairline);
-  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
+  background: rgb(from var(--page-bg) r g b / 88%);
 }
 [data-site-theme='vepa'] .velu-toc-bar__toggle {
   padding-block: 10px;
@@ -229,7 +239,7 @@
   [data-site-theme='vepa'] .velu-docs-layout__drawer-brand .velu-header__wordmark {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 700;
+    font-weight: 300;
   }
   [data-site-theme='vepa'] .velu-docs-layout__drawer-close {
     width: 32px;
@@ -341,14 +351,14 @@
 .vepa-footer__inner { display: flex; flex-direction: column; gap: 48px; max-width: 984px; width: 100%; margin: auto; padding: 112px 32px; }
 .vepa-footer__top { display: flex; justify-content: space-between; gap: 32px; }
 .vepa-footer__brand-column { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 192px; gap: 96px; }
-.vepa-footer__brand { color: var(--vepa-heading); text-decoration: none; font-family: inherit; font-size: 30px; line-height: 35px; font-weight: 700; }
+.vepa-footer__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--vepa-heading); text-decoration: none; font-family: var(--font-wordmark); font-size: 30px; line-height: 35px; font-weight: 700; }
 .vepa-footer__brand .velu-logo { height: 26px; max-width: 192px; }
 .vepa-footer__columns { display: grid; grid-template-columns: repeat(var(--footer-columns), minmax(0,1fr)); gap: 32px; flex: 1; min-width: 0; }
 .vepa-footer__column { display: flex; flex-direction: column; align-items: center; }
 .vepa-footer__links { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 100%; }
 .vepa-footer__heading { margin: 0 0 4px; color: var(--vepa-gray-950); font: 600 14px/20px var(--font-sans); }
-.vepa-footer__link { font: 400 14px/20px var(--font-sans); color: color-mix(in srgb, var(--vepa-gray-950) 50%, transparent); max-width: 144px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
-.vepa-footer__link:hover { color: color-mix(in srgb, var(--vepa-gray-950) 70%, transparent); }
+.vepa-footer__link { font: 400 14px/20px var(--font-sans); color: rgb(from var(--vepa-gray-950) r g b / 50%); max-width: 144px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
+.vepa-footer__link:hover { color: rgb(from var(--vepa-gray-950) r g b / 70%); }
 .vepa-footer .velu-socials { gap: 16px !important; min-width: 140px; max-width: 492px; height: fit-content; }
 .vepa-footer .velu-social { width: 20px; height: 20px; color: var(--vepa-gray-500); }
 .vepa-footer .velu-social svg { width: 20px; height: 20px; }
@@ -359,7 +369,8 @@
 .vepa-footer__divider { height: 1px; background: var(--vepa-hairline); }
 .vepa-footer__bottom { display: flex; justify-content: space-between; align-items: center; }
 .vepa-footer__powered { display: flex; align-items: baseline; gap: 4px; color: var(--vepa-gray-400); font: 400 14px/20px var(--font-sans); text-decoration: none; }
-.vepa-footer__powered strong { font-size: 16px; font-weight: 600; }
+.vepa-footer__powered strong { font-family: var(--font-wordmark); font-size: 16px; font-weight: 300; }
+.vepa-footer__powered-mark { flex: none; height: 1.1em; width: auto; }
 .vepa-footer-theme { display: flex; gap: 8px; }
 .vepa-footer-theme button { display: grid; place-items: center; padding: 6px; background: transparent; border: 0; border-radius: 8px; color: var(--vepa-gray-400); cursor: pointer; }
 .vepa-footer-theme button[aria-pressed='true'] { color: var(--vepa-gray-600); background: var(--vepa-gray-200); }

package/schema/velu.schema.json

@@ -9,7 +9,7 @@
   "properties": {
     "theme": {
       "type": "string",
-      "enum": ["velu", "vepa", "thulir", "aalam", "nila"],
+      "enum": ["velu", "vepa", "thulir", "aalam", "nila", "kadhir"],
       "description": "Visual preset. Vepa follows Mintlify Sequoia, Thulir follows Mintlify Mint, and Aalam follows Mintlify Maple; light/dark preference is independent. Defaults to velu."
     },
     "$schema": {

package/src/runtime/App.jsx

@@ -929,7 +929,7 @@ function DocsPage() {
   // against it like any other heading.
   const pageId = React.useMemo(() => {
     if (!frontmatter.title) return null;
-    if (site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme)) return 'page-title';
+    if (site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme)) return 'page-title';
     return new GithubSlugger().slug(frontmatter.title);
   }, [frontmatter.title, site.theme]);
 
@@ -969,7 +969,7 @@ function DocsPage() {
     const root = drawerRef.current?.parentElement;
     if (!root) return;
     const observer = new ResizeObserver(([entry]) => {
-      const narrow = entry.contentRect.width <= (['thulir', 'aalam', 'nila'].includes(site.theme) ? 1023 : 640);
+      const narrow = entry.contentRect.width <= (['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? 1023 : 640);
       setDrawerViewport(narrow);
       if (!narrow) setDrawerOpen(false);
     });
@@ -1254,34 +1254,39 @@ function DocsPage() {
     };
   }, [footerEl]);
 
-  // Sticky AskBar fades out once the user scrolls near the PageFeedback
-  // widget — so it doesn't sit on top of the page-foot widgets.
+  // Sticky AskBar fades out once the user scrolls near the page-foot
+  // widgets — so it doesn't sit on top of them. Anchor priority:
+  // PageFeedback (default theme) → pagination → site footer, so pages
+  // without feedback or prev/next links (e.g. changelogs) still fade
+  // the bar out at the bottom.
   const [feedbackEl, setFeedbackEl] = React.useState(null);
+  const [navAnchorEl, setNavAnchorEl] = React.useState(null);
   const [askBarHidden, setAskBarHidden] = React.useState(false);
   React.useEffect(() => {
-    if (!feedbackEl) {
+    const anchorEl = feedbackEl ?? navAnchorEl ?? footerEl;
+    if (!anchorEl) {
       setAskBarHidden(false);
       return undefined;
     }
     const FADE_BUFFER = 64; // matches the rootMargin below
     const apply = (rect) => {
-      // Hide whenever the feedback's top has reached the (effective)
-      // viewport-bottom line — covers both "feedback is in view" AND
-      // "feedback is already scrolled past" without flickering back on.
+      // Hide whenever the anchor's top has reached the (effective)
+      // viewport-bottom line — covers both "anchor is in view" AND
+      // "anchor is already scrolled past" without flickering back on.
       // Threshold matches the IO's rootMargin so the show/hide flip is
       // exactly at the same line in both scroll directions.
       setAskBarHidden(rect.top < window.innerHeight - FADE_BUFFER);
     };
-    apply(feedbackEl.getBoundingClientRect());
+    apply(anchorEl.getBoundingClientRect());
     const io = new IntersectionObserver(
       ([entry]) => apply(entry.boundingClientRect),
-      // Trigger ~64px before the feedback enters the viewport, so the
+      // Trigger ~64px before the anchor enters the viewport, so the
       // AskBar fades just as the widget starts to peek up from below.
       { rootMargin: '0px 0px -64px 0px' },
     );
-    io.observe(feedbackEl);
+    io.observe(anchorEl);
     return () => io.disconnect();
-  }, [feedbackEl]);
+  }, [feedbackEl, navAnchorEl, footerEl]);
 
   const scrollTo = React.useCallback(
     (id) => {
@@ -1350,8 +1355,8 @@ function DocsPage() {
           logo: site.logo,
         }}
         brandTrailing={
-          (versionSwitcher || (site.theme === 'nila' && productSwitcher)) && (
-            <span className="velu-hide-on-mobile">{versionSwitcher}{site.theme === 'nila' && productSwitcher}</span>
+          (versionSwitcher || (['nila', 'kadhir'].includes(site.theme) && productSwitcher)) && (
+            <span className="velu-hide-on-mobile">{versionSwitcher}{['nila', 'kadhir'].includes(site.theme) && productSwitcher}</span>
           )
         }
         center={
@@ -1382,7 +1387,7 @@ function DocsPage() {
           </Cluster>
         }
         actions={navActions}
-        trailing={<ThemeToggle variant={site.theme === 'aalam' ? 'inline' : site.theme === 'vepa' || ['thulir', 'nila'].includes(site.theme) ? 'menu' : undefined} />}
+        trailing={<ThemeToggle variant={site.theme === 'aalam' ? 'inline' : site.theme === 'vepa' || ['thulir', 'nila', 'kadhir'].includes(site.theme) ? 'menu' : undefined} />}
         tabsTrailing={
           chrome.mode === 'custom' || chrome.mode === 'assistant'
             ? undefined
@@ -1398,7 +1403,7 @@ function DocsPage() {
         breadcrumb={
           chrome.mode === 'custom' || chrome.mode === 'assistant'
             ? []
-            : ['thulir', 'aalam', 'nila'].includes(site.theme) ? (nav?.breadcrumb ?? []).slice(-2) : (nav?.breadcrumb ?? [])
+            : ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? (nav?.breadcrumb ?? []).slice(-2) : (nav?.breadcrumb ?? [])
         }
         activeTab={nav?.activeTab}
         tabs={
@@ -1444,7 +1449,10 @@ function DocsPage() {
               className="velu-docs-layout__drawer-brand"
             >
               {site.logo ? (
-                <Logo logo={site.logo} alt={site.name} />
+                <>
+                  <Logo logo={site.logo} alt="" />
+                  <span className="velu-header__wordmark" title={site.name}>{site.name}</span>
+                </>
               ) : (
                 <>
                   <VeluMark />
@@ -1452,7 +1460,7 @@ function DocsPage() {
                 </>
               )}
             </RouterLink>
-            <ThemeToggle variant={site.theme === 'vepa' || ['thulir', 'nila'].includes(site.theme) ? 'menu' : undefined} />
+            <ThemeToggle variant={site.theme === 'vepa' || ['thulir', 'nila', 'kadhir'].includes(site.theme) ? 'menu' : undefined} />
             <button
               type="button"
               className="velu-docs-layout__drawer-close"
@@ -1596,7 +1604,7 @@ function DocsPage() {
               left column, including anchors, in one overflow. */}
           <div className="velu-docs-nav-region">
             <div
-              id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? 'navigation-items' : 'sidebar-content'}
+              id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? 'navigation-items' : 'sidebar-content'}
               ref={leftAsideRef}
               className={`velu-docs-nav-scroll${site.theme === 'aalam' ? '' : ' velu-hide-scrollbar'}`}
               style={{
@@ -1694,12 +1702,12 @@ function DocsPage() {
             />
           ) : isChangelog && changelogTags.length && site.theme !== 'vepa' ? (
             <ChangelogFilters tags={changelogTags} />
-          ) : site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? (
+          ) : site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? (
             <>
               {isChangelog && changelogTags.length > 0 ? (
                 <ChangelogFilters tags={changelogTags} />
               ) : null}
-              <VepaToc items={pageToc} activeId={['thulir', 'aalam', 'nila'].includes(site.theme) && activeId === pageId ? pageToc[0]?.id : activeId} onSelect={scrollTo} />
+              <VepaToc items={pageToc} activeId={['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) && activeId === pageId ? pageToc[0]?.id : activeId} onSelect={scrollTo} />
             </>
           ) : (
             <Toc id="table-of-contents-content" items={toc} activeId={activeId} onSelect={scrollTo} />
@@ -1744,7 +1752,7 @@ function DocsPage() {
             on tab/mobile we keep the normal TOC bar (no filters). Hidden
             entirely when the page mode has no table of contents. */}
         {chrome.toc && (
-        <TocBar items={toc} activeId={activeId} onSelect={scrollTo} label={['thulir', 'aalam', 'nila'].includes(site.theme) ? 'On this page' : undefined} />
+        <TocBar items={toc} activeId={activeId} onSelect={scrollTo} label={['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? 'On this page' : undefined} />
         )}
       <main
         id="content-area"
@@ -1784,7 +1792,7 @@ function DocsPage() {
           </span>
         </button>
         )}
-        <div id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? undefined : 'content'} data-contextual-actions={site.contextual?.options?.length ? 'true' : 'false'} className="velu-docs-layout__article" data-pagefind-body={chrome.assistant ? undefined : ""}>
+        <div id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? undefined : 'content'} data-contextual-actions={site.contextual?.options?.length ? 'true' : 'false'} className="velu-docs-layout__article" data-pagefind-body={chrome.assistant ? undefined : ""}>
           {/* Per-page agent/IDE action bar: the section eyebrow + a
               "Copy Page" split-button whose dropdown is driven by the
               Mintlify-compatible `contextual` config. Renders nothing
@@ -1814,7 +1822,7 @@ function DocsPage() {
               Custom / frame / assistant are a blank canvas — no auto hero. */}
           {chrome.hero && (frontmatter.title || frontmatter.description) && (
             <div className="velu-hero">
-              {frontmatter.title && <h1 id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? 'page-title' : pageId}>{frontmatter.title}</h1>}
+              {frontmatter.title && <h1 id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? 'page-title' : pageId}>{frontmatter.title}</h1>}
               {frontmatter.description && (
                 <p
                   style={{
@@ -1835,7 +1843,7 @@ function DocsPage() {
               level. Falls back to a not-found / missing-file notice
               when the route has no page (or its file is absent). */}
           <MDXProvider components={defaultMdxComponents}>
-            <mdx-content key={site.theme === 'vepa' ? pathname : undefined} id={(site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme)) && !entry?.api ? 'content' : undefined} class="velu-prose">
+            <mdx-content key={site.theme === 'vepa' ? pathname : undefined} id={(site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme)) && !entry?.api ? 'content' : undefined} class="velu-prose">
               {PageComponent ? (
                 <ErrorBoundary key={pathname} file={entry?.relPath}>
                   {entry?.mdxApi ? <ApiReferencePage {...entry.mdxApi} preset={site.theme}><PageComponent /></ApiReferencePage> : <PageComponent />}
@@ -1851,7 +1859,7 @@ function DocsPage() {
           </MDXProvider>
           {/* Page-foot feedback widget — ref'd so the sticky AskBar
               above can hide as the user scrolls near it. */}
-          {chrome.articleChrome && !['thulir', 'aalam', 'nila'].includes(site.theme) && (
+          {chrome.articleChrome && !['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) && (
           <div ref={setFeedbackEl} style={{ marginTop: 'var(--s3)' }}>
             {/* key resets the widget's vote state on page change. "Yes"
                 submits immediately; "No" submits once its form is sent.
@@ -1868,16 +1876,20 @@ function DocsPage() {
           </div>
           )}
           {/* Previous / next page navigation — derived from the
-              sidebar reading order of the active section. */}
+              sidebar reading order of the active section. The wrapper
+              doubles as the AskBar fade anchor on themes without a
+              PageFeedback widget (see the observer above). */}
           {chrome.articleChrome && !frontmatter.hidePagination && (nav?.prev || nav?.next) && (
-            <PageNav
-              id="pagination"
-              style={['thulir', 'aalam', 'nila'].includes(site.theme) ? undefined : { marginTop: 'var(--s2)' }}
-              variant={site.theme === 'aalam' ? 'aalam' : 'default'}
-              prev={nav?.prev}
-              next={nav?.next}
-              linkComponent={RouterLink}
-            />
+          <div ref={setNavAnchorEl}>
+          <PageNav
+            id="pagination"
+            style={['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? undefined : { marginTop: 'var(--s2)' }}
+            variant={site.theme === 'aalam' ? 'aalam' : 'default'}
+            prev={nav?.prev}
+            next={nav?.next}
+            linkComponent={RouterLink}
+          />
+          </div>
           )}
           {/* "Ask a question" bar — sticky to viewport-bottom while the
               article column is in view; lives inside the prose-column
@@ -1913,7 +1925,7 @@ function DocsPage() {
               full footer section); with link columns they live in the full
               footer below instead. */}
           {chrome.articleChrome && (footerHasLinks ? (
-            site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? null : <PoweredBy />
+            site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? null : <PoweredBy />
           ) : (
             <div className="velu-content-foot">
               <SocialLinks socials={footerSocials} />
@@ -1932,7 +1944,7 @@ function DocsPage() {
           overlap via footerOverlap below. */}
       {footerHasLinks && chrome.footer && (
         <advanced-footer
-          id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila'].includes(site.theme) ? undefined : 'footer'}
+          id={site.theme === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(site.theme) ? undefined : 'footer'}
           ref={setFooterEl}
           data-velu-footer
           style={{ position: 'relative', zIndex: 20 }}