@veluai/velu 0.2.39 → 0.2.41

package/docs/mintlify-migration.md

@@ -116,6 +116,7 @@ equivalents. Original references in code examples and prose remain unchanged.
 Mintlify's `theme: "sequoia"` is converted to `theme: "vepa"` and activates the [Vepa preset](vepa.md).
 Mintlify's `theme: "mint"` is converted to `theme: "thulir"` and activates the [Thulir preset](thulir.md).
 Mintlify's `theme: "maple"` is converted to `theme: "aalam"` and activates the [Aalam preset](aalam.md).
+Mintlify's `theme: "aspen"` is converted to `theme: "nila"` and activates the [Nila preset](nila.md).
 The presets are not a certification of pixel equality for every component or custom script.
 
 Features without full Velu equivalents require review: remaining Mintlify themes, advanced

package/docs/nila.md

@@ -0,0 +1,13 @@
+# Nila theme
+
+Nila is Velu's independently implemented Aspen equivalent. Set `"theme": "nila"` in `velu.json`, or run `velu migrate mintlify SOURCE --out DESTINATION` to map Mintlify's `"theme": "aspen"` automatically. The existing `maple` to `aalam` mapping remains supported.
+
+The layout uses a compact 96px desktop header, sidebar group separators, a 632px reading column at a 1440px viewport, page icons, and light/dark/system preferences. Nila shares the responsive navigation foundation with Thulir: a left-opening drawer, labeled section picker, focus trapping, Escape dismissal, scroll locking, and an on-page TOC dropdown when the right rail is hidden. Vertical hierarchy lines remain disabled in the drawer and mobile TOC.
+
+The reference is the cached npm renderer `@mintlify/client@0.0.3566`, displaying the same source showcase. Theme matching is not a guarantee of identical component behavior: icon artwork, custom CSS selectors, compatibility adapters, generated API examples and interactive playgrounds still require review.
+
+For the migrated showcase, set `VELU_TEST_URL=http://localhost:8474` and run `node packages/velu-cli/test/aalam-browser.mjs`. This shared browser regression covers drawer behavior, section selection, content tabs, responsive widths, and TOC heading clearance.
+
+Mintlify migration enables `navigation.preservePagePaths` when the source uses product, version, or language axes. These axes select the navigation context while retaining source page URLs, rather than adding another path prefix. Native Velu configurations retain their existing prefix behavior unless they opt into this setting.
+
+The navigation stress fixture adds three products (Platform, Analytics, Automation), two versions each, and 32 guides per product/version pair. With that migrated fixture running on port 8474, `node packages/velu-cli/test/nila-navigation-browser.mjs` checks five viewport widths, sidebar scrolling, product/version switching, direct reloads, horizontal overflow, and nested Escape behavior. This fixture has 220 pages including the existing component/API showcase; its additional Guides tab differs from the original four-tab showcase used by the shared browser test above.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {
@@ -20,7 +20,8 @@
     "docs/mintlify-migration.md",
     "docs/vepa.md",
     "docs/thulir.md",
-    "docs/aalam.md"
+    "docs/aalam.md",
+    "docs/nila.md"
   ],
   "scripts": {
     "build": "node scripts/build.mjs",

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

@@ -78,7 +78,7 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
         className="velu-api-page__tryit"
       />
 
-      {(preset === 'vepa' || ['thulir', 'aalam'].includes(preset)) && <div className="velu-api-page__inline-samples"><ApiSamples idPrefix="inline-" samples={samples} responses={operation.responses} preset={preset} title={operation.title} /></div>}
+      {(preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) && <div className="velu-api-page__inline-samples"><ApiSamples idPrefix="inline-" samples={samples} responses={operation.responses} preset={preset} title={operation.title} /></div>}
       {children && <div className="velu-api-page__custom-content">{children}</div>}
 
       {/* Authorizations */}
@@ -114,7 +114,7 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
       {operation.body?.fields?.length > 0 && (
         <api-section class="velu-api-page__section">
           <h2 data-component="api-section-heading">Body</h2>
-          {['thulir', 'aalam'].includes(preset) && operation.body.contentType && <span className="velu-api-body-type">{operation.body.contentType}</span>}
+          {['thulir', 'aalam', 'nila'].includes(preset) && operation.body.contentType && <span className="velu-api-body-type">{operation.body.contentType}</span>}
           {operation.body.fields.map((f, i) => (
             <Field key={i} name={f.name} type={f.type} required={f.required}>
               {f.description}
@@ -180,10 +180,10 @@ function EnumHint({ values }) {
 }
 
 function ResponseSections({ responses, preset }) {
-  if (preset === 'vepa' || ['thulir', 'aalam'].includes(preset)) return <div className="velu-vepa-responses">{responses.map((r, i) => <section key={i}>
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) return <div className="velu-vepa-responses">{responses.map((r, i) => <section key={i}>
     <div className="velu-vepa-responses__status">{r.status}{r.contentType && ` · ${r.contentType}`}</div>
     {r.description && <p>{r.description}</p>}
-    {(['thulir', 'aalam'].includes(preset) ? [...(r.fields || [])].sort((a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required))) : r.fields)?.map((f, j) => <Field key={f.name || j} name={f.name} type={f.type} required={f.required}>{f.description}</Field>)}
+    {(['thulir', 'aalam', 'nila'].includes(preset) ? [...(r.fields || [])].sort((a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required))) : r.fields)?.map((f, j) => <Field key={f.name || j} name={f.name} type={f.type} required={f.required}>{f.description}</Field>)}
   </section>)}</div>;
   return (
     <AccordionGroup className="velu-api-resp">

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

@@ -14,7 +14,7 @@ export default function ApiSamples({ samples = [], responses = [], preset, title
   const sample = samples.find((s) => s.key === selected) || samples[0];
   // Mint displays JSON request bodies across lines. Keep custom/non-JSON
   // snippets intact, and change whitespace only in a valid JSON body.
-  const sampleCode = ['thulir', 'aalam'].includes(preset) && sample?.key === 'curl'
+  const sampleCode = ['thulir', 'aalam', 'nila'].includes(preset) && sample?.key === 'curl'
     ? sample.code.replace(/(--data )'([\s\S]*)'$/, (original, prefix, body) => {
       try { return `${prefix}'\n${JSON.stringify(JSON.parse(body), null, 2)}\n'`; }
       catch { return original; }
@@ -22,7 +22,7 @@ export default function ApiSamples({ samples = [], responses = [], preset, title
   const withExample = responses.filter((r) => r.example != null);
   return (
     <div className="velu-api-samples">
-      {sample && (preset === 'vepa' || ['thulir', 'aalam'].includes(preset)) ? <section id={idPrefix + 'request-example'} className="velu-vepa-request">
+      {sample && (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) ? <section id={idPrefix + 'request-example'} className="velu-vepa-request">
         <div className="velu-vepa-request__header"><span>{title}</span><select aria-label="Request example language" value={sample.key} onChange={(e) => setSelected(e.target.value)}>{samples.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}</select></div>
         <CodeBlock language={sample.language}>{sampleCode}</CodeBlock>
       </section> : samples.length > 0 && (

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

@@ -33,21 +33,6 @@ import Cluster from '../primitives/Cluster.jsx';
  * demo answer (so dev preview / offline still shows the experience).
  */
 
-/* ── Brand mark — the Velu double-hook logo ─────────────────────────── */
-// `size` is the glyph height; width derives from the 32:24 viewBox.
-function VeluMark({ size = 'var(--icon-size-lg)' }) {
-  return (
-    <svg
-      className="velu-chatbot__mark"
-      viewBox="0 0 32 24"
-      fill="currentColor"
-      aria-hidden="true"
-      style={{ width: `calc(${size} * (32 / 24))`, height: size }}
-    >
-      <path d="M 29.656 14.153 C 29.574 14.562 29.351 14.929 29.025 15.193 C 28.699 15.457 28.291 15.601 27.869 15.601 L 21.37 15.601 C 20.534 15.601 19.805 16.163 19.603 16.964 L 18.167 22.637 C 18.068 23.026 17.841 23.372 17.521 23.619 C 17.2 23.866 16.805 24 16.399 24 L 10.438 24 C 10.161 24 9.888 23.938 9.639 23.818 C 9.39 23.698 9.172 23.524 9.001 23.308 C 8.831 23.092 8.712 22.841 8.655 22.574 C 8.598 22.306 8.603 22.029 8.67 21.764 L 10.189 15.764 C 10.287 15.374 10.515 15.029 10.835 14.782 C 11.155 14.535 11.55 14.401 11.956 14.4 L 18.393 14.4 C 19.262 14.4 20.01 13.795 20.18 12.953 L 22.388 2.048 C 22.471 1.639 22.694 1.272 23.019 1.008 C 23.345 0.744 23.754 0.6 24.175 0.6 L 30.177 0.6 C 30.447 0.6 30.713 0.659 30.957 0.773 C 31.201 0.886 31.416 1.052 31.587 1.258 C 31.758 1.464 31.881 1.705 31.946 1.964 C 32.011 2.222 32.017 2.492 31.964 2.753 L 29.656 14.153 Z M 9.611 13.554 C 9.528 13.962 9.305 14.329 8.979 14.593 C 8.653 14.857 8.245 15.001 7.824 15.001 L 1.823 15.001 C 1.553 15.001 1.287 14.942 1.043 14.828 C 0.799 14.714 0.584 14.548 0.413 14.342 C 0.242 14.136 0.119 13.895 0.054 13.637 C -0.011 13.378 -0.017 13.109 0.036 12.848 L 2.344 1.447 C 2.426 1.039 2.649 0.672 2.975 0.408 C 3.301 0.144 3.709 0 4.131 0 L 10.132 0 C 10.402 0 10.668 0.059 10.912 0.173 C 11.155 0.287 11.371 0.453 11.541 0.659 C 11.712 0.865 11.835 1.106 11.9 1.364 C 11.965 1.623 11.972 1.892 11.919 2.153 L 9.611 13.553 L 9.611 13.554 Z" />
-    </svg>
-  );
-}
 
 /* ── "Thinking" loader — 3x3 grid of squares, opacity wave sweeps the
    anti-diagonal so it ripples top-left → bottom-right. ─────────────── */
@@ -346,7 +331,6 @@ function ChatHeader({ onClose, onNew, onHistory, historyOpen, showClose = true }
       className="velu-chatbot__header"
     >
       <Cluster space="var(--s-2)" align="center">
-        <VeluMark />
         <span className="velu-chatbot__brand">
           <span className="velu-chatbot__brand-name">Velu</span>
           <span className="velu-chatbot__brand-sep">/</span>

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

@@ -49,7 +49,7 @@ export default function NavSelect({
       if (!rootRef.current?.contains(e.target)) setOpen(false);
     };
     const onKey = (e) => {
-      if (e.key === 'Escape') setOpen(false);
+      if (e.key === 'Escape') { setOpen(false); rootRef.current?.querySelector('button')?.focus(); }
     };
     document.addEventListener('mousedown', onDoc);
     document.addEventListener('keydown', onKey);
@@ -124,3 +124,4 @@ export default function NavSelect({
     </div>
   );
 }
+

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

@@ -47,26 +47,6 @@ import SocialLinks from './SocialLinks.jsx';
  *           linkComponent?: React.ElementType, className?: string }} props
  */
 
-/* ── Brand mark — the Velu double-hook logo. Color: currentColor for
-   the surrounding wordmark; the mark itself uses --accent-color via
-   the wrapping span. ───────────────────────────────────────────────── */
-function VeluMark() {
-  return (
-    <svg
-      className="velu-footer__mark"
-      viewBox="0 0 32 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70537 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.553L9.61081 13.5538Z"
-      />
-    </svg>
-  );
-}
-
 export default function PageFooter({
   preset,
   brand,
@@ -77,7 +57,7 @@ export default function PageFooter({
   ...rest
 }) {
   const Link = linkComponent;
-  if (preset === 'vepa' || ['thulir', 'aalam'].includes(preset)) {
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) {
     return <VepaFooter preset={preset} brand={brand} columns={columns} socials={socials} linkComponent={Link} />;
   }
   const brandLabel = brand?.label ?? 'Velu';
@@ -85,7 +65,6 @@ export default function PageFooter({
 
   const brandNode = (
     <Cluster space="var(--s-3)" align="center" className="velu-footer__brand">
-      <VeluMark />
       <span className="velu-footer__wordmark">{brandLabel}</span>
     </Cluster>
   );

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

@@ -50,7 +50,9 @@ import Logo from './Logo.jsx';
 
 /* Velu brand mark. Color: --accent-color via the wrapping wordmark
    span; the path uses currentColor. Exported so consumers (e.g. the
-   mobile nav drawer) can render the mark alongside its own chrome. */
+   mobile nav drawer) can render the mark alongside its own chrome.
+   Only the default theme shows it — the vepa / thulir / aalam / nila
+   presets hide it via CSS (text-only branding). */
 export function VeluMark() {
   return (
     <svg
@@ -62,7 +64,7 @@ export function VeluMark() {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70537 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
+        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70535 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
       />
     </svg>
   );
@@ -292,7 +294,7 @@ export default function PageHeader({
   return (
     <Stack
       as="header"
-      space={preset === 'vepa' || ['thulir', 'aalam'].includes(preset) ? '0px' : 'var(--s0)'}
+      space={preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset) ? '0px' : 'var(--s0)'}
       data-has-tabs={tabs.length > 0 ? 'true' : 'false'}
       className={`velu-header${scrolled ? ' velu-header--scrolled' : ''}${
         showTabsRow ? '' : ' velu-header--no-tabs'

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

@@ -8,25 +8,6 @@ import React from 'react';
  * @param {{ href?: string, className?: string }} props
  */
 
-/* Velu brand mark — same path as PageHeader's mark, sized for the
-   badge via .velu-powered-by__mark CSS. */
-function VeluMark() {
-  return (
-    <svg
-      className="velu-powered-by__mark"
-      viewBox="0 0 32 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70537 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
-      />
-    </svg>
-  );
-}
-
 export default function PoweredBy({
   href = 'https://veludocs.com',
   className = '',
@@ -42,7 +23,6 @@ export default function PoweredBy({
       >
         <span className="velu-powered-by__label">Powered by</span>
         <span className="velu-powered-by__brand">
-          <VeluMark />
           <span className="velu-powered-by__wordmark">Velu</span>
         </span>
       </a>

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

@@ -6,7 +6,7 @@ import ThemePreferenceMenu from './ThemePreferenceMenu.jsx';
 export default function VepaFooter({ preset = 'vepa', brand, columns = [], socials = [], linkComponent: Link = 'a' }) {
   const single = columns.length === 1;
   const completeHeadings = columns.every((c) => c.title);
-  const root = ['thulir', 'aalam'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
+  const root = ['thulir', 'aalam', 'nila'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
   return <footer id="footer" className={root} data-layout={columns.length <= 3 ? 'compact' : 'expanded'} data-single={single} data-headings={completeHeadings}>
     <div className={`${root}__inner`}>
       <div className={`${root}__top`}>
@@ -14,7 +14,7 @@ export default function VepaFooter({ preset = 'vepa', brand, columns = [], socia
           <Link href={brand?.href || '/'} className={`${root}__brand`}>
             {brand?.logo ? <Logo logo={brand.logo} alt={brand.label} /> : <span>{brand?.label || 'Velu'}</span>}
           </Link>
-          {['thulir', 'aalam'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
+          {['thulir', 'aalam', 'nila'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
           <SocialLinks socials={socials} className={`${root}__brand-socials`} />
         </div>
         <div className={`${root}__columns`} style={{ '--footer-columns': columns.length }}>

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

@@ -427,7 +427,11 @@
     opacity 0.15s ease,
     transform 0.15s ease,
     visibility 0s linear 0.15s;
-  z-index: 1;
+  /* Above the sidebar nav: its items are `z-index: 1` and sticky
+     section headers `z-index: 2` (sidebar.css), all in the same
+     stacking context as this menu (the drawer aside), so a tie would
+     let the nav paint OVER the dropdown and show through it. */
+  z-index: 30;
 }
 .velu-docs-layout__drawer-docselect[data-open='true']
   .velu-docs-layout__drawer-docselect-menu {
@@ -835,6 +839,16 @@
   display: none;
 }
 
+/* Center mode (changelogs) hides the aside above; at mobile the aside
+   IS the nav drawer, so re-show it there — otherwise changelog pages
+   have no way to reach the navigation. Must come after the page-mode
+   hide rule above (same specificity, later source order wins). */
+@container docs (max-width: 640px) {
+  .velu-docs-layout[data-page-mode='center'] .velu-docs-layout__aside--left {
+    display: flex;
+  }
+}
+
 /* 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,

package/runtime/velu-ui/styles.css

@@ -66,3 +66,4 @@
 @import './themes/vepa.css' layer(velu);
 @import './themes/thulir.css' layer(velu);
 @import './themes/aalam.css' layer(velu);
+@import './themes/nila.css' layer(velu);

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

@@ -0,0 +1,62 @@
+/* Nila: Aspen's compact header and divided sidebar groups.
+   Shared components and accessible responsive navigation live in thulir.css. */
+[data-site-theme='nila'] .velu-header__top { height: 56px; padding-inline: 36px; }
+[data-site-theme='nila'] .velu-header__top::after { display: none; }
+[data-site-theme='nila'] .velu-header__tabs { height: 40px; padding-inline: 36px; }
+[data-site-theme='nila'] .velu-header__tab { height: 40px; }
+[data-site-theme='nila'] #search-bar-entry { border: 0; border-radius: 999px; background: var(--surface-color); }
+[data-site-theme='nila'] .velu-header__action:not(.velu-header__action--primary) { padding: 8px 14px; background: var(--surface-color); border-radius: 14px; }
+[data-site-theme='nila'] .velu-sidebar__indicator { display: none; }
+/* Keep reading content separate from the next/previous navigation. */
+[data-site-theme='nila'] .velu-pagenav { margin-block-start: 48px; }
+[data-site-theme='nila'] .velu-sidebar { gap: 0 !important; }
+[data-site-theme='nila'] .velu-docs-nav-scroll { overflow-y: auto; background-image: none; scrollbar-color: transparent transparent; }
+[data-site-theme='nila'] .velu-docs-nav-scroll { overflow-x: hidden; min-width: 0; }
+[data-site-theme='nila'] .velu-sidebar__label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
+[data-site-theme='nila'] .velu-sidebar__item { align-items: flex-start; }
+[data-site-theme='nila'] .velu-sidebar__icon { flex: none; }
+[data-site-theme='nila'] .velu-docs-nav-scroll:hover { scrollbar-color: var(--border-color) transparent; }
+[data-site-theme='nila'] .velu-docs-nav-scroll::-webkit-scrollbar-track { background: transparent; }
+[data-site-theme='nila'] .velu-docs-nav-scroll::-webkit-scrollbar-thumb { background: transparent; }
+[data-site-theme='nila'] .velu-docs-nav-scroll:hover::-webkit-scrollbar-thumb { background: var(--border-color); }
+[data-site-theme='nila'] .velu-sidebar__item--active { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
+[data-site-theme='nila'] .velu-sidebar__section { font-size: 12px; font-weight: 600; line-height: 20px; }
+[data-site-theme='nila'] .velu-sidebar > sidebar-group { margin-bottom: 16px; padding-bottom: 16px; }
+[data-site-theme='nila'] .velu-sidebar > sidebar-group + sidebar-group { border-top: 1px solid var(--border-color); padding-top: 16px; }
+[data-site-theme='nila'] .velu-sidebar__item { min-height: 32px; padding-block: 4px; }
+@container docs (min-width: 1024px) {
+  [data-site-theme='nila'] .velu-header__col--brand > .velu-hide-on-mobile { display: flex; align-items: center; gap: 36px; }
+  [data-site-theme='nila'] .velu-header__col--brand { min-width: 0; flex-wrap: nowrap !important; }
+  [data-site-theme='nila'] .velu-header .velu-nav-select__btn { border: 0; background: transparent; padding: 4px 8px; font-size: 14px; }
+  [data-site-theme='nila'] .velu-header .velu-nav-select__btn-icon { display: none; }
+  [data-site-theme='nila'] .velu-docs-context:not(:has(.velu-docs-anchors)) { display: none !important; }
+  [data-site-theme='nila'] .velu-header { height: 96px; }
+  [data-site-theme='nila'] .velu-docs-layout__aside--left { left: 0; top: 96px; bottom: 0; width: 308px; padding: 16px 20px; border-right: 1px solid var(--border-color); }
+  [data-site-theme='nila'] .velu-sidebar { width: 268px; }
+  [data-site-theme='nila'] .velu-docs-layout__center { margin-left: 308px; margin-right: 324px; }
+  [data-site-theme='nila'] .velu-docs-layout__main { padding: 44px 32px 0; }
+  [data-site-theme='nila'] .velu-docs-layout__article { max-inline-size: 632px; margin-inline: auto; }
+  [data-site-theme='nila'] .velu-docs-layout__aside--right { top: 96px; right: 36px; width: 288px; }
+  [data-site-theme='nila'] > [data-velu-footer] { margin-left: 308px; }
+}
+@container docs (min-width: 1024px) and (max-width: 1399px) {
+  [data-site-theme='nila'] .velu-header__top { grid-template-columns: auto minmax(100px, 1fr) auto; gap: 20px !important; }
+  [data-site-theme='nila'] .velu-header__col--brand > .velu-hide-on-mobile { gap: 8px; }
+  [data-site-theme='nila'] .velu-header__col--center { width: 100%; }
+}
+@container docs (min-width: 1024px) and (max-width: 1279px) {
+  [data-site-theme='nila'] .velu-docs-layout__center { margin-right: 0; }
+  [data-site-theme='nila'] .velu-toc-bar { inset-block-start: 96px; }
+}
+@container docs (max-width: 1023px) {
+  [data-site-theme='nila'] .velu-hide-on-mobile { display: none; }
+  [data-site-theme='nila'] .velu-show-on-mobile { display: contents; }
+  [data-site-theme='nila'] .velu-docs-context { padding-inline: 16px; position: relative; z-index: 9; }
+  [data-site-theme='nila'] .velu-docs-context .velu-nav-select { width: 100%; min-width: 0; }
+  [data-site-theme='nila'] .velu-nav-select__menu { max-width: 100%; }
+  [data-site-theme='nila'] .velu-nav-select__item { white-space: normal; overflow-wrap: anywhere; }
+  [data-site-theme='nila'] .velu-header__top { height: 64px; padding-inline: 16px; }
+  [data-site-theme='nila'] .velu-header__tabs { height: 56px; padding-inline: 16px; }
+  [data-site-theme='nila'] .velu-header__tab { height: 56px; }
+}
+