@veluai/velu 0.2.41 → 0.2.43

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

@@ -27,7 +27,7 @@
   opacity: 0;
   z-index: 0;
   pointer-events: none;
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  background: rgb(from var(--accent-color) r g b / 8%);
   border-radius: var(--radius-sm);
   transition:
     transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
@@ -91,7 +91,7 @@
   pointer-events: none;
   background: linear-gradient(
     to bottom,
-    color-mix(in srgb, var(--velu-sidebar-bg, var(--page-bg)) 55%, transparent),
+    rgb(from var(--velu-sidebar-bg, var(--page-bg)) r g b / 55%),
     transparent
   );
 }

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

@@ -22,7 +22,7 @@
      so the bar reads as a layer over the page rather than a solid
      band. The dropdown below uses the same recipe so the bar +
      expanded list look like one continuous translucent fabric. */
-  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);
   border-block-end: var(--border-width) solid var(--surface-color);
@@ -165,7 +165,7 @@
   /* Same frosted recipe as the bar above (no shadow, no top
      border) so the open dropdown reads as the bar EXTENDED DOWN,
      not a separate floating panel. */
-  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);
   /* Bottom border terminates the combined bar+dropdown against

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

@@ -55,7 +55,7 @@
 }
 
 .velu-update__label:hover {
-  background: color-mix(in srgb, var(--accent-color) 85%, black);
+  background: rgb(from var(--accent-color) calc(r * 0.85) calc(g * 0.85) calc(b * 0.85));
 }
 
 .velu-update__description {

package/runtime/velu-ui/lib/velu-mark.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * VeluMark — the Velu brand mark (32x24 comet), inlined as JSX like the
+ * lucide icons (no SVG loader). Artwork from velu-mark.svg; fill follows
+ * `currentColor` so it inherits the surrounding text color across
+ * light/dark themes.
+ *
+ * Used by the "Powered by Velu" credits (PoweredBy badge + vepa/thulir
+ * family footer bottom row). NOT used in headers — those render the
+ * wordmark alone (PageHeader's VeluMark stub stays null).
+ */
+export default function VeluMark({ className = '', ...rest }) {
+  return (
+    <svg viewBox="0 0 32 24" fill="none" aria-hidden="true" className={className} {...rest}>
+      <path fill-rule="evenodd" clip-rule="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.8569 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.452799 11.5415 0.658813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5528V13.5538Z" fill="currentColor"/>
+    </svg>
+  );
+}
+

package/runtime/velu-ui/styles.css

@@ -10,7 +10,17 @@
    `card { border-radius: 0 }` (specificity 0,0,1) overrides `.velu-card`
    (0,1,0) because velu-ui lives in a layer and the project sheet does not.
    The `velu` layer is declared after Tailwind's, so our fluid type/measure
-   still beat Tailwind's preflight, as before. */
+   still beat Tailwind's preflight, as before.
+
+   NOTE — do NOT use color-mix() with var() arguments anywhere in this
+   package. The static-build pipeline (@tailwindcss/vite → LightningCSS)
+   splits every color-mix into a solid fallback + an @supports upgrade,
+   and the upgrade loses its selector inside @layer/@container nesting
+   (emitted as a bare `{...}` block browsers drop). The solid fallback
+   then wins, so tints render as SOLID colors in `velu build` output
+   while `velu dev` (no Lightning pass) looks correct. Write var-based
+   tints as rgb(from var(--x) r g b / N%) instead — same rendering in
+   dev and build on all supported browsers. */
 @layer theme, base, components, utilities, velu;
 
 @import 'tailwindcss';
@@ -67,3 +77,5 @@
 @import './themes/thulir.css' layer(velu);
 @import './themes/aalam.css' layer(velu);
 @import './themes/nila.css' layer(velu);
+
+@import './themes/kadhir.css' layer(velu);

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

@@ -48,7 +48,9 @@
   }
   [data-site-theme='aalam'] .velu-docs-layout__drawer-close { display: none; }
   [data-site-theme='aalam'] .velu-docs-layout__drawer-brand {
-    display: block;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
     flex: none;
     max-width: 12rem;
   }
@@ -57,7 +59,7 @@
     display: block;
     font-size: 30px;
     line-height: 1.15;
-    font-weight: 700;
+    font-weight: 300;
     letter-spacing: -0.025em;
   }
   [data-site-theme='aalam'] .velu-docs-layout__drawer-head .velu-theme-toggle {
@@ -76,7 +78,7 @@
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: color-mix(in srgb, var(--text-color) 10%, transparent);
+    background: rgb(from var(--text-color) r g b / 10%);
     transition: transform 0.2s ease;
     pointer-events: none;
   }
@@ -123,6 +125,15 @@
   [data-site-theme='aalam'] .velu-docs-layout__center { margin-right: 0; }
   [data-site-theme='aalam'] .velu-toc-bar { inset-block-start: 48px; }
 }
+/* Center page mode (changelogs) keeps Aalam's left rail — brand, search
+   and nav are integral chrome, not a collapsible aside. Base center-mode
+   hides all asides and zeroes the tracked margins; restore the rail and
+   its margins here (header is already offset 19rem). */
+@container docs (min-width: 1024px) {
+  .velu-docs-layout[data-site-theme='aalam'][data-page-mode='center'] .velu-docs-layout__aside--left { display: flex; }
+  .velu-docs-layout[data-site-theme='aalam'][data-page-mode='center'] .velu-docs-layout__center { margin-inline-start: 19rem; }
+  .velu-docs-layout[data-site-theme='aalam'][data-page-mode='center'] > [data-velu-footer] { margin-inline-start: 19rem; }
+}
 [data-site-theme='aalam'] .velu-docs-aside-product .velu-nav-select { display: block; width: 100%; }
 [data-site-theme='aalam'] .velu-docs-aside-product .velu-nav-select__btn {
   min-height: 32px;
@@ -133,10 +144,10 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  background: color-mix(in srgb, var(--text-color) 5%, transparent);
+  background: rgb(from var(--text-color) r g b / 5%);
 }
 [data-site-theme='aalam'] .velu-docs-aside-product .velu-nav-select__btn:hover {
-  background: color-mix(in srgb, var(--text-color) 8%, transparent);
+  background: rgb(from var(--text-color) r g b / 8%);
 }
 [data-site-theme='aalam'] .velu-docs-aside-footer {
   flex: none;
@@ -160,7 +171,7 @@
   background: transparent;
 }
 [data-site-theme='aalam'] .velu-docs-aside-footer .velu-nav-select__btn:hover {
-  background: color-mix(in srgb, var(--text-color) 5%, transparent);
+  background: rgb(from var(--text-color) r g b / 5%);
 }
 [data-site-theme='aalam'] .velu-docs-aside-footer .velu-nav-select__menu {
   inset-block-start: auto;
@@ -189,14 +200,14 @@
   width: calc(100% - 1rem);
   box-sizing: border-box;
   border-radius: 0;
-  border-left: 1px solid color-mix(in srgb, var(--text-color) 5%, transparent);
+  border-left: 1px solid rgb(from var(--text-color) r g b / 5%);
   gap: 12px;
   font: 400 14px/20px var(--font-sans);
   background: transparent;
 }
 [data-site-theme='aalam'] :is(.velu-sidebar__item,.velu-api-sidebar__item):hover {
   background: transparent;
-  border-left-color: color-mix(in srgb, var(--text-color) 20%, transparent);
+  border-left-color: rgb(from var(--text-color) r g b / 20%);
   color: var(--thulir-heading);
 }
 [data-site-theme='aalam'] :is(.velu-sidebar__item--active,.velu-api-sidebar__item--active) {

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

@@ -0,0 +1,77 @@
+/* Kadhir: independent Luma layout, measured with @mintlify/client 0.0.3566.
+   Shared reading components and accessible drawer behavior use thulir.css. */
+[data-site-theme='kadhir'] .velu-pagenav { margin-block: 48px 64px; }
+[data-site-theme='kadhir'] .velu-hero h1 { font-size: 36px; line-height: 36px; font-weight: 500; letter-spacing: -.8px; }
+[data-site-theme='kadhir'] .velu-sidebar__item { background: transparent; min-height: 32px; padding-right: 12px; }
+[data-site-theme='kadhir'] .velu-sidebar__item--active { font-weight: 400; }
+/* Mint Luma marks the selected API endpoint with accent text only — no
+   persistent tint band (thulir.css paints one for the whole family). */
+[data-site-theme='kadhir'] .velu-api-sidebar__item--active { background: transparent; font-weight: 400; }
+/* Mint Luma hover: text shifts to accent, no background wash
+   (thulir.css paints a surface-color bg for the whole family). */
+[data-site-theme='kadhir'] :is(.velu-sidebar__item, .velu-api-sidebar__item):hover { background: transparent; color: var(--accent-color); }
+[data-site-theme='kadhir'] .velu-sidebar__label { white-space: normal; overflow-wrap: anywhere; }
+[data-site-theme='kadhir'] .velu-sidebar__indicator { display: none; }
+[data-site-theme='kadhir'] .velu-sidebar__section { text-transform: capitalize; font-size: 12px; font-weight: 600; }
+[data-site-theme='kadhir'] .velu-docs-nav-scroll { overflow-x: hidden; }
+[data-site-theme='kadhir'] .velu-sidebar__section { padding-inline: 0; }
+[data-site-theme='kadhir'] .velu-docs-nav-scroll { background-image: none; scrollbar-width: thin; scrollbar-color: transparent transparent; }
+[data-site-theme='kadhir'] .velu-docs-nav-scroll:hover { scrollbar-color: var(--border-color) transparent; }
+[data-site-theme='kadhir'] .velu-header__action { border-radius: 999px; }
+[data-site-theme='kadhir'] .velu-header__action--primary { background: var(--accent-color); padding-inline: 16px; }
+[data-site-theme='kadhir'] .velu-header__action--primary::after { display: none; }
+[data-site-theme='kadhir'] .velu-header__action:not(.velu-header__action--primary) { border: 1px solid var(--border-color); padding: 7px 16px; }
+[data-site-theme='kadhir'] .velu-vepa-toc { padding-top: 16px; width: 100%; }
+@container docs (min-width: 1024px) {
+  [data-site-theme='kadhir'] .velu-header { display: grid !important; grid-template-columns: 248px minmax(0,1fr) auto auto; align-items: center; gap: 8px !important; height: 48px; padding: 0 36px; border-bottom: 1px solid var(--border-color); }
+  [data-site-theme='kadhir'] .velu-header__top { display: contents; }
+  [data-site-theme='kadhir'] .velu-header__top::after { display: none; }
+  [data-site-theme='kadhir'] .velu-header__col--brand { grid-column: 1; grid-row: 1; flex-wrap: nowrap !important; }
+  [data-site-theme='kadhir'] .velu-header__col--brand > .velu-hide-on-mobile { display: flex; gap: 28px; }
+  [data-site-theme='kadhir'] .velu-header .velu-nav-select__btn { border: 0; padding: 4px 8px; background: transparent; font-size: 14px; }
+  [data-site-theme='kadhir'] .velu-header .velu-nav-select__btn-icon { display: none; }
+  [data-site-theme='kadhir'] .velu-docs-context:not(:has(.velu-docs-anchors)) { display: none !important; }
+  [data-site-theme='kadhir'] .velu-header__col--center { grid-column: 3; grid-row: 1; width: auto; }
+  [data-site-theme='kadhir'] .velu-header__col--actions { grid-column: 4; grid-row: 1; gap: 8px !important; }
+  [data-site-theme='kadhir'] .velu-header__actions-list { gap: 8px !important; }
+  [data-site-theme='kadhir'] .velu-header__tabs { grid-column: 2; grid-row: 1; padding: 0; height: 48px; justify-content: safe center !important; gap: 4px !important; overflow-x: auto; flex-wrap: nowrap !important; }
+  [data-site-theme='kadhir'] .velu-header__tab { padding: 8px 16px; height: 36px; border-radius: 999px; flex: none; }
+  [data-site-theme='kadhir'] .velu-header__tab::after { display: none; }
+  [data-site-theme='kadhir'] .velu-header__tab--active { background: var(--surface-color); font-weight: 500; border-bottom-color: transparent; }
+  [data-site-theme='kadhir'] .velu-search__trigger { width: 36px !important; height: 36px; border-radius: 50%; padding: 0; justify-content: center; border: 0; background: var(--surface-color); font-size: 0; gap: 0; }
+  [data-site-theme='kadhir'] .velu-search__trigger .velu-search__kbd { display: none; }
+  [data-site-theme='kadhir'] .velu-search__trigger-label { display: none; }
+  [data-site-theme='kadhir'] .velu-search__trigger-icon { font-size: 12px; }
+  /* Ask AI entry renders beside search in static builds — same 36px
+     icon-circle treatment (label hidden), mirroring Luma's icon entry. */
+  [data-site-theme='kadhir'] #assistant-entry { width: 36px !important; height: 36px; border-radius: 50%; padding: 0; justify-content: center; border: 0; background: var(--surface-color); }
+  [data-site-theme='kadhir'] #assistant-entry > span:last-child { display: none; }
+  [data-site-theme='kadhir'] .velu-docs-layout__aside--left { top: 48px; bottom: 0; left: 0; width: 248px; padding: 16px 20px 24px 20px; }
+  [data-site-theme='kadhir'] .velu-sidebar { width: 100%; }
+  [data-site-theme='kadhir'] .velu-docs-layout__center { margin-left: 248px; margin-right: 224px; }
+  [data-site-theme='kadhir'] .velu-docs-layout__main { padding: 28px 24px 0; }
+  [data-site-theme='kadhir'] .velu-docs-layout__article { max-inline-size: 648px; margin-inline: auto; }
+  [data-site-theme='kadhir'] .velu-docs-layout__aside--right { top: 48px; right: 20px; width: 236px; }
+  [data-site-theme='kadhir'] > [data-velu-footer] { margin-left: 248px; }
+  [data-site-theme='kadhir'] .velu-toc-bar { inset-block-start: 48px; }
+}
+@container docs (min-width: 1280px) {
+  [data-site-theme='kadhir'][data-api='true'] .velu-docs-layout__center { margin-right: 496px; }
+  [data-site-theme='kadhir'][data-api='true'] .velu-docs-layout__article { max-inline-size: 648px; }
+  [data-site-theme='kadhir'][data-api='true'] .velu-docs-layout__main { padding-inline: 48px 24px; }
+  [data-site-theme='kadhir'][data-api='true'] .velu-docs-layout__aside--right { right: 24px; width: 448px; padding-top: 24px; }
+}
+@container docs (min-width: 1024px) and (max-width: 1279px) {
+  [data-site-theme='kadhir'] .velu-docs-layout__center { margin-right: 0; }
+  [data-site-theme='kadhir'] .velu-header { grid-template-columns: 300px minmax(0,1fr) 36px auto; padding-inline: 20px; }
+  [data-site-theme='kadhir'] .velu-header__tab { padding-inline: 10px; }
+}
+@container docs (max-width: 1023px) {
+  [data-site-theme='kadhir'] .velu-hero h1 { font-size: 30px; line-height: 36px; }
+  [data-site-theme='kadhir'] .velu-hide-on-mobile { display: none; }
+  [data-site-theme='kadhir'] .velu-show-on-mobile { display: contents; }
+  [data-site-theme='kadhir'] .velu-docs-context { padding-inline: 16px; }
+}
+
+
+

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

@@ -12,6 +12,11 @@
 [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; }
+/* Pull the scroller to the rail's right divider so its scrollbar sticks to
+   the border line instead of floating a padding-step inside it. Content
+   width is unchanged (the negative margin only reclaims the aside's own
+   inline-end padding around the scroll box). */
+[data-site-theme='nila'] .velu-docs-nav-scroll { margin-inline-end: -20px; padding-inline-end: 20px; }
 [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; }
@@ -19,7 +24,7 @@
 [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__item--active { background: rgb(from var(--accent-color) r g b / 10%); }
 [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; }