@veluai/velu 0.2.41 → 0.2.43

package/docs/kadhir.md

@@ -0,0 +1,31 @@
+# Kadhir
+
+Kadhir is Velu's independently implemented Luma equivalent. Mintlify migration maps `theme: "luma"` to `theme: "kadhir"`; native Velu sites can select Kadhir directly.
+
+The implementation uses the existing Velu component and navigation infrastructure, with a new single-row 48px desktop header, pill tabs, compact search, a 248px sidebar, a 648px reading column, and a separate API sample rail. Mobile uses the accessible left drawer and on-page TOC. Pagination has 48px separation from content.
+
+Reference: the cached npm renderer `@mintlify/client@0.0.3566`. Luma-specific classes were inspected in `.next/server/chunks/ssr/_6753cfba._.js` and `_450d9e92._.js`. These are reference inputs, not distributed code. Reference API data was generated using `@mintlify/validation@0.1.849` and its `openApiToSchemaGraph` export.
+
+## Local comparison
+
+The fresh fixture is `.incoming/kadhir/source`. It contains 220 pages, three products, two versions, API operations, component examples, and a custom stylesheet/script. The migrated output is `.incoming/kadhir/final`.
+
+```powershell
+node packages/velu-cli/scripts/build.mjs
+node packages/velu-cli/dist/cli.js migrate mintlify .incoming/kadhir/source --out .incoming/kadhir/fresh-output
+$env:PORT='8476'
+node packages/velu-cli/dist/cli.js dev .incoming/kadhir/fresh-output
+```
+
+Browser tests expect that fixture on port 8476:
+
+```powershell
+node --test packages/velu-cli/test/kadhir.test.mjs
+node packages/velu-cli/test/kadhir-tabs-browser.mjs
+node packages/velu-cli/test/kadhir-navigation-browser.mjs
+node packages/velu-cli/test/kadhir-mobile-browser.mjs
+```
+
+Tests cover tab clicks, API content, products/versions, reloads, long sidebars, drawer keyboard behavior, TOC clearance, and overflow. Screenshots and reference preparation scripts are under `.incoming/kadhir/`.
+
+This is not a pixel-perfect guarantee. Icon artwork, syntax highlighting, generated response examples, component spacing, and arbitrary custom DOM selectors can differ. The fixture migration reports compatibility warnings for endpoint snapshots, component adapters, and CSS selectors; review those before deploying a migrated site.

package/docs/mintlify-migration.md

@@ -163,3 +163,5 @@ Tests cover clean and review-required outputs, source immutability, JSONC/YAML
 references, ignore negation, collisions/junctions, script preservation, AST
 rewrites, assets, endpoint snapshots, generated-project validation, and CLI exit
 codes. No network is needed for the migration tests.
+
+Luma sites migrate to the Kadhir theme. See [Kadhir](kadhir.md) for layout details and verification.

package/package.json

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

package/runtime/velu-ui/base.css

@@ -107,6 +107,10 @@
   --font-sans: "Google Sans Flex", sans-serif;
   --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace;
   --font-brand: "Outfit", var(--font-sans);
+  /* Brand wordmark (header site name, footer credits) — always
+     Google Sans Flex on every theme for a consistent Velu identity,
+     even when a project overrides --font-sans. */
+  --font-wordmark: "Google Sans Flex", var(--font-sans);
   font-family: var(--font-sans);
 
   /* Approx height of the docs PageHeader (used as the offset for sticky

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', 'nila'].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', 'kadhir'].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', 'nila'].includes(preset) && operation.body.contentType && <span className="velu-api-body-type">{operation.body.contentType}</span>}
+          {['thulir', 'aalam', 'nila', 'kadhir'].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', 'nila'].includes(preset)) return <div className="velu-vepa-responses">{responses.map((r, i) => <section key={i}>
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].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', '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>)}
+    {(['thulir', 'aalam', 'nila', 'kadhir'].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', 'nila'].includes(preset) && sample?.key === 'curl'
+  const sampleCode = ['thulir', 'aalam', 'nila', 'kadhir'].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', 'nila'].includes(preset)) ? <section id={idPrefix + 'request-example'} className="velu-vepa-request">
+      {sample && (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].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/Card.jsx

@@ -117,6 +117,11 @@ export function CardGroup({
   className = '',
   ...rest
 }) {
+  // Grid column count follows the child count (capped by limit) so a group
+  // never renders emptier than it is: 2 cards fill 2 columns instead of
+  // leaving a third one blank. Mintlify's CardGroup defaults to 2 columns.
+  const count = React.Children.count(children);
+  const cols = Math.max(1, Math.min(4, Math.min(Number(limit) || 2, count || 1)));
   return (
     <Switcher
       as="card-group"
@@ -124,7 +129,7 @@ export function CardGroup({
       space={space}
       min={min}
       limit={limit}
-      style={{ '--vepa-columns': Math.max(1, Math.min(4, Number(limit) || 2)) }}
+      style={{ '--vepa-columns': cols }}
       {...rest}
     >
       {children}

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

@@ -57,7 +57,7 @@ export default function PageFooter({
   ...rest
 }) {
   const Link = linkComponent;
-  if (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) {
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset)) {
     return <VepaFooter preset={preset} brand={brand} columns={columns} socials={socials} linkComponent={Link} />;
   }
   const brandLabel = brand?.label ?? 'Velu';

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

@@ -53,22 +53,7 @@ import Logo from './Logo.jsx';
    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
-      className="velu-header__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.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>
-  );
-}
+export function VeluMark() { return null; }
 
 function ActionButton({ action, Link, id }) {
   const { label, icon, kind = 'outlined', href, onClick, external, component } = action;
@@ -277,11 +262,15 @@ export default function PageHeader({
     Boolean(tabsTrailing) ||
     Boolean(onMenuClick);
 
-  // A configured logo replaces the mark + wordmark entirely (Mintlify-style).
+  // A configured logo renders alongside the wordmark (Mintlify-style
+  // headers show mark + name together).
   const brandBlock = (
     <Cluster space="var(--s-3)" align="center" className="velu-header__brand" style={{ flexWrap: 'nowrap' }}>
       {brand?.logo ? (
-        <Logo logo={brand.logo} alt={brandLabel} />
+        <>
+          <Logo logo={brand.logo} alt="" />
+          <span className="velu-header__wordmark">{brandLabel}</span>
+        </>
       ) : (
         <>
           <VeluMark />
@@ -294,7 +283,7 @@ export default function PageHeader({
   return (
     <Stack
       as="header"
-      space={preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset) ? '0px' : 'var(--s0)'}
+      space={preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].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

@@ -1,4 +1,5 @@
 import React from 'react';
+import VeluMark from '../lib/velu-mark.jsx';
 
 /**
  * PoweredBy — "Powered by Velu" badge. Right-aligned, sits above the
@@ -23,6 +24,7 @@ export default function PoweredBy({
       >
         <span className="velu-powered-by__label">Powered by</span>
         <span className="velu-powered-by__brand">
+          <VeluMark className="velu-powered-by__mark" />
           <span className="velu-powered-by__wordmark">Velu</span>
         </span>
       </a>

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

@@ -1,20 +1,21 @@
 import React from 'react';
 import Logo from './Logo.jsx';
+import VeluMark from '../lib/velu-mark.jsx';
 import SocialLinks from './SocialLinks.jsx';
 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', 'nila'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
+  const root = ['thulir', 'aalam', 'nila', 'kadhir'].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`}>
         <div className={`${root}__brand-column`}>
           <Link href={brand?.href || '/'} className={`${root}__brand`}>
-            {brand?.logo ? <Logo logo={brand.logo} alt={brand.label} /> : <span>{brand?.label || 'Velu'}</span>}
+            {brand?.logo ? <><Logo logo={brand.logo} alt="" /><span>{brand?.label || 'Velu'}</span></> : <span>{brand?.label || 'Velu'}</span>}
           </Link>
-          {['thulir', 'aalam', 'nila'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
+          {['thulir', 'aalam', 'nila', 'kadhir'].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 }}>
@@ -34,7 +35,7 @@ export default function VepaFooter({ preset = 'vepa', brand, columns = [], socia
       {!completeHeadings && <SocialLinks socials={socials} className={`${root}__mobile-socials`} />}
       <div className={`${root}__divider`} />
       <div className={`${root}__bottom`}>
-        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className={`${root}__powered`}>Powered by <strong>Velu</strong></a>
+        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className={`${root}__powered`}>Powered by <VeluMark className={`${root}__powered-mark`} /><strong>Velu</strong></a>
         <ThemePreferenceMenu inline />
       </div>
     </div>

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

@@ -164,7 +164,7 @@
   justify-content: center;
   padding: clamp(var(--s1), 6vh, var(--s5)) var(--s2);
   overflow-y: auto;
-  background: color-mix(in srgb, var(--page-bg) 35%, rgba(0, 0, 0, 0.55));
+  background: rgb(from var(--page-bg) r g b / 40%), rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(6px) saturate(1.1);
   -webkit-backdrop-filter: blur(6px) saturate(1.1);
   animation: velu-api-modal-in 140ms ease-out;
@@ -204,8 +204,8 @@
   border-radius: var(--radius-xs, 4px);
   text-transform: uppercase;
 }
-.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: color-mix(in srgb, var(--get-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: color-mix(in srgb, var(--post-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: color-mix(in srgb, var(--put-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: color-mix(in srgb, var(--patch-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: color-mix(in srgb, var(--delete-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: rgb(from var(--get-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: rgb(from var(--post-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: rgb(from var(--put-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: rgb(from var(--patch-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: rgb(from var(--delete-pill-color) r g b / 14%); }

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

@@ -194,7 +194,7 @@
   cursor: pointer;
 }
 .velu-try-it__cta:hover {
-  background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
+  background: rgb(from var(--method-cta, var(--accent-color)) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-try-it__cta:disabled {
   cursor: default;
@@ -528,7 +528,7 @@
   align-items: center;
   padding-block: 0;
   padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  background: rgb(from var(--accent-color) r g b / 18%);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-size: var(--f-h6);

package/runtime/velu-ui/components/ask-bar.css

@@ -43,7 +43,7 @@
   border-color: var(--accent-color);
   box-shadow:
     0 0 0 var(--border-width) var(--accent-color),
-    0 0 var(--s1) color-mix(in srgb, var(--accent-color) 40%, transparent);
+    0 0 var(--s1) rgb(from var(--accent-color) r g b / 40%);
 }
 
 /* Multi-line input. padding-inline-end clears the send button so typed
@@ -87,7 +87,7 @@
   cursor: pointer;
 }
 .velu-ask-bar__send:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-ask-bar__send:focus-visible {
   outline: var(--border-width) solid var(--text-color);
@@ -97,7 +97,7 @@
    palette) so the button reads as "not yet ready" rather than a
    different control entirely. No pointer events / hover affordance. */
 .velu-ask-bar__send:disabled {
-  background: color-mix(in srgb, var(--accent-color) 35%, transparent);
+  background: rgb(from var(--accent-color) r g b / 35%);
   cursor: not-allowed;
   pointer-events: none;
 }

package/runtime/velu-ui/components/changelog-filters.css

@@ -26,18 +26,18 @@
   font-size: var(--f-h6);
   font-weight: var(--weight-medium);
   color: var(--text-color);
-  background: color-mix(in srgb, var(--muted-color) 14%, transparent);
+  background: rgb(from var(--muted-color) r g b / 14%);
   border: var(--border-width) solid transparent;
   transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
 .velu-changelog-filter:hover {
-  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  border-color: rgb(from var(--accent-color) r g b / 50%);
+  background: rgb(from var(--accent-color) r g b / 8%);
 }
 
 .velu-changelog-filter--active {
   color: var(--accent-color);
-  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  border-color: rgb(from var(--accent-color) r g b / 55%);
+  background: rgb(from var(--accent-color) r g b / 12%);
 }

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

@@ -215,7 +215,7 @@
   color: var(--text-color);
 }
 .velu-chatbot__iconbtn.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   color: var(--accent-color);
 }
 
@@ -322,7 +322,7 @@
 }
 .velu-chatbot__suggest:hover {
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+  background: rgb(from var(--accent-color) r g b / 6%);
 }
 .velu-chatbot__suggest svg {
   flex: none;
@@ -497,7 +497,7 @@
   font-size: var(--f-h7);
   font-weight: var(--weight-medium);
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  background: rgb(from var(--accent-color) r g b / 14%);
   border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
   text-decoration: none;
@@ -552,7 +552,7 @@
   font-size: var(--f-h7);
   font-weight: var(--weight-medium);
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  background: rgb(from var(--accent-color) r g b / 14%);
   border-radius: var(--radius-sm);
 }
 .velu-chatbot__source-meta {
@@ -635,7 +635,7 @@
 }
 /* Chosen thumb (up/down) — accent tint so the click is clearly registered. */
 .velu-chatbot__msg-action.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   color: var(--accent-color);
 }
 

package/runtime/velu-ui/components/code-block.css

@@ -128,7 +128,7 @@
   inline-size: 1.75em;
   block-size: 1.75em;
   padding: 0;
-  background: color-mix(in srgb, var(--surface-color) 75%, transparent);
+  background: rgb(from var(--surface-color) r g b / 75%);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border: var(--border-width) solid var(--border-color);
@@ -160,7 +160,7 @@
    the code text. The bg is a subtle accent tint — works in both
    light + dark via [data-theme] color-mix. */
 .velu-code-block__line--highlight {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   box-shadow: inset 2px 0 0 0 var(--accent-color);
   margin-inline: calc(var(--s0) * -1);
   padding-inline: var(--s0);

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

@@ -51,7 +51,7 @@
 .velu-context-menu__rss:hover {
   color: var(--accent-color);
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  background: rgb(from var(--accent-color) r g b / 8%);
 }
 
 /* The split button: "Copy Page" + a divider + a chevron toggle, joined as one

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

@@ -194,12 +194,12 @@
   scrollbar-width: thin;
   /* Firefox: thumb then track. */
   scrollbar-color: var(--muted-color)
-    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+    rgb(from var(--muted-color) r g b / 28%);
   /* Chromium overlay scrollbars often ignore ::-webkit-scrollbar-track,
      so paint a permanent rail on the inline-end edge as well. */
   background-image: linear-gradient(
     to left,
-    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg)) 10px,
+    rgb(from var(--muted-color) r g b / 28%) 10px,
     transparent 10px
   );
 }
@@ -207,7 +207,7 @@
   inline-size: 10px;
 }
 .velu-docs-nav-scroll::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+  background: rgb(from var(--muted-color) r g b / 28%);
   border-radius: 0;
 }
 .velu-docs-nav-scroll::-webkit-scrollbar-thumb {

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

@@ -46,7 +46,7 @@
   align-items: center;
   padding-block: 0;
   padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  background: rgb(from var(--accent-color) r g b / 18%);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-size: var(--f-h6);

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

@@ -205,7 +205,7 @@
   inline-size: 15%;
   block-size: 0.5em;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--text-color) 14%, transparent);
+  background: rgb(from var(--text-color) r g b / 14%);
 }
 
 /* ── Device-frame variant ───────────────────────────────────────────────── */

package/runtime/velu-ui/components/not-found.css

@@ -86,7 +86,7 @@
   font-weight: var(--weight-bold);
 }
 .velu-404__btn--primary:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-404__btn-ic {
   display: inline-flex;

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

@@ -45,7 +45,7 @@
    The vote stays changeable: clicking the other button moves it here. */
 .velu-feedback__btn--chosen {
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: rgb(from var(--accent-color) r g b / 10%);
   color: var(--accent-color);
 }
 .velu-feedback__btn--chosen svg {
@@ -168,7 +168,7 @@
   color: #fff;
 }
 .velu-feedback__action--submit:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 
 /* ── Submitted confirmation — sits below the divider line ───────────── */
@@ -214,13 +214,13 @@
   color: var(--accent-color);
 }
 .velu-feedback__heart--1 {
-  color: color-mix(in srgb, var(--accent-color) 60%, #fff);
+  color: rgb(from var(--accent-color) calc(r * 0.6 + 255 * 0.4) calc(g * 0.6 + 255 * 0.4) calc(b * 0.6 + 255 * 0.4));
 }
 .velu-feedback__heart--2 {
-  color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color));
+  color: rgb(from var(--accent-color) calc(r * 0.55) calc(g * 0.55) calc(b * 0.55));
 }
 .velu-feedback__heart--3 {
-  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
+  color: rgb(from var(--accent-color) calc(r * 0.82 + 255 * 0.18) calc(g * 0.82 + 255 * 0.18) calc(b * 0.82 + 255 * 0.18));
 }
 /* Register the per-heart custom props so they're typed + animatable inside the
    keyframes. WebKit (newer iOS Safari) won't interpolate UNregistered custom

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

@@ -58,7 +58,7 @@
 }
 /* Outfit Light, per the brand spec — falls back to --font-sans. */
 .velu-footer__wordmark {
-  font-family: var(--font-brand);
+  font-family: var(--font-wordmark);
   font-weight: var(--weight-light);
   font-size: var(--f-h4);
   line-height: 1;

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

@@ -54,7 +54,7 @@
    through faintly underneath. color-mix keeps the recipe token-driven:
    75% --page-bg + transparent → 75% opaque in either theme. */
 .velu-header--scrolled {
-  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
+  background: rgb(from var(--page-bg) r g b / 75%);
   backdrop-filter: saturate(140%) blur(12px);
   -webkit-backdrop-filter: saturate(140%) blur(12px);
   /* Lift shadow (theme-aware recipe defined on .velu-header) so the
@@ -108,7 +108,7 @@
   color: var(--accent-color);
 }
 .velu-header__wordmark {
-  font-family: var(--font-brand);
+  font-family: var(--font-wordmark);
   font-weight: var(--weight-light);
   /* 32px wordmark. */
   font-size: 2rem;
@@ -174,7 +174,7 @@
   color: #fff;
 }
 .velu-header__action--primary:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 /* Plain text link (navbar.links) — no fill or border, just text that goes
    accent on hover. Transparent border keeps it the same height as the
@@ -573,3 +573,11 @@
   font-size: var(--f-h7);
   opacity: 0.7;
 }
+/* Ask AI header entry — icon + "Ask AI" must stay on one line (no wrap
+   into a stacked pill) in every theme's header, where it shares a narrow
+   flex row with search. Icon-circle themes (kadhir) hide the label
+   separately; the nowrap + flex:none here keeps the pill intact. */
+#assistant-entry {
+  white-space: nowrap;
+  flex: none;
+}

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

@@ -194,7 +194,7 @@
   flex: none;
   width: 1px;
   height: 32px;
-  background: color-mix(in srgb, var(--muted-color) 14%, transparent);
+  background: rgb(from var(--muted-color) r g b / 14%);
 }
 
 [data-theme='dark'] .velu-pagenav__rule {

package/runtime/velu-ui/components/powered-by.css

@@ -81,7 +81,7 @@
 }
 
 .velu-powered-by__wordmark {
-  font-family: var(--font-brand);
+  font-family: var(--font-wordmark);
   font-weight: var(--weight-light);
   font-size: var(--f-h4);
   line-height: 1;

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

@@ -60,7 +60,7 @@
   cursor: pointer;
 }
 .velu-prompt__copy:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-prompt__copy:focus-visible {
   outline: var(--border-width) solid var(--text-color);
@@ -91,7 +91,7 @@
   text-decoration: none;
 }
 .velu-prompt__open-cursor:hover {
-  background: color-mix(in srgb, var(--text-color) 88%, var(--accent-color));
+  background: rgb(from var(--text-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-prompt__open-cursor:focus-visible {
   outline: var(--border-width) solid var(--accent-color);

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

@@ -199,7 +199,7 @@
   background: var(--surface-color);
 }
 .velu-search__row--selected {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
 }
 
 .velu-search__row-glyph {