@veluai/velu 0.2.43 → 0.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

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

@@ -16,13 +16,19 @@ import Switcher from '../primitives/Switcher.jsx';
  * Variants (combinable):
  *  - basic: icon (accent, --f-h2) + title (--f-h4) + body
  *  - `horizontal`: icon vertically centered on the left, title+body right
- *  - `img`: image fills the top, clipped to the radius
+ *  - `img`: image fills the top, clipped to the radius. Covers both themes,
+ *    unless `imgLight`/`imgDark` override per theme.
+ *  - `imgLight` / `imgDark`: per-theme image. When the effective light and
+ *    dark sources differ, both render and CSS shows the right one per
+ *    `[data-theme]` (same pattern as Logo's light/dark swap). When only one
+ *    of the three is present, it covers both themes.
  *  - `cta`: { label, href } → the single clickable "Click Here ›" link
  *
  * `icon` is a lucide id string (shared resolveIcon).
  *
  * @param {{ title?: React.ReactNode, icon?: string, horizontal?: boolean,
- *   img?: string, imgAlt?: string, href?: string,
+ *   img?: string, imgAlt?: string, imgLight?: string, imgDark?: string,
+ *   href?: string,
  *   cta?: {label: React.ReactNode, href: string},
  *   children?: React.ReactNode, className?: string }} props
  */
@@ -33,6 +39,8 @@ export function Card({
   horizontal = false,
   img,
   imgAlt = '',
+  imgLight,
+  imgDark,
   cta,
   href,
   children,
@@ -74,11 +82,40 @@ export function Card({
   return (
     <card className={cls} {...rest}>
       {href && !cta && <a className="velu-card__link" href={href} aria-label={typeof title === 'string' ? title : 'Read more'} />}
-      {img && (
-        <div className="velu-card__media" data-component-part="card-image">
-          <img src={img} alt={imgAlt} loading="lazy" />
-        </div>
-      )}
+      {(() => {
+        const lightSrc = imgLight ?? img;
+        const darkSrc = imgDark ?? img;
+        if (lightSrc && darkSrc && lightSrc !== darkSrc) {
+          return (
+            <div className="velu-card__media" data-component-part="card-image">
+              <img
+                className="velu-card__img velu-card__img--light"
+                src={lightSrc}
+                alt={imgAlt}
+                loading="lazy"
+              />
+              <img
+                className="velu-card__img velu-card__img--dark"
+                src={darkSrc}
+                alt=""
+                aria-hidden="true"
+                loading="lazy"
+              />
+            </div>
+          );
+        }
+        const singleSrc = imgLight ?? imgDark ?? img;
+        return singleSrc ? (
+          <div className="velu-card__media" data-component-part="card-image">
+            <img
+              className="velu-card__img"
+              src={singleSrc}
+              alt={imgAlt}
+              loading="lazy"
+            />
+          </div>
+        ) : null;
+      })()}
 
       <div className="velu-card__body" data-component-part="card-content-container">
         {horizontal ? (

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

@@ -4,6 +4,7 @@ import resolveIcon from '../lib/resolveIcon.jsx';
 import Stack from '../primitives/Stack.jsx';
 import Cluster from '../primitives/Cluster.jsx';
 import Logo from './Logo.jsx';
+import VeluMarkArt from '../lib/velu-mark.jsx';
 
 /**
  * PageHeader — top of the docs site.
@@ -51,9 +52,13 @@ 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.
-   Only the default theme shows it — the vepa / thulir / aalam / nila
-   presets hide it via CSS (text-only branding). */
-export function VeluMark() { return null; }
+   Only the default theme shows it — the vepa / thulir / aalam / nila /
+   kadhir presets hide it via CSS (text-only branding). */
+export function VeluMark({ className = '', ...rest }) {
+  return (
+    <VeluMarkArt className={`velu-header__mark ${className}`.trim()} {...rest} />
+  );
+}
 
 function ActionButton({ action, Link, id }) {
   const { label, icon, kind = 'outlined', href, onClick, external, component } = action;

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

@@ -46,6 +46,7 @@
   flex-direction: column;
   gap: var(--s-2);
   padding: var(--s0) var(--s3);
+  flex: 1; /* fill the card so a CTA can pin to the bottom across a row */
 }
 .velu-card--horizontal .velu-card__body {
   flex-direction: row;
@@ -81,7 +82,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--s-3);
-  margin-block-start: var(--s-2);
+  margin-block-start: auto; /* pin to the card bottom so CTAs line up across a row */
+  padding-block-start: var(--s-2); /* keep the text gap when there is no free space */
   font-weight: 500;
   color: var(--text-color);
   text-decoration: none;
@@ -106,6 +108,19 @@
   block-size: auto;
   object-fit: cover;
 }
+/* Per-theme swap (same pattern as Logo): light image by default, `img` under
+   [data-theme=dark]. `display` (not opacity) so the inactive one leaves the
+   a11y tree too. A lone `img` (no `imgLight`) has neither modifier and always
+   shows. */
+.velu-card__media .velu-card__img--dark {
+  display: none;
+}
+[data-theme='dark'] .velu-card__media .velu-card__img--light {
+  display: none;
+}
+[data-theme='dark'] .velu-card__media .velu-card__img--dark {
+  display: block;
+}
 
 /* CardGroup layout is the Switcher primitive (composed in Card.jsx). Its
    threshold is computed count-aware in Card.jsx so the row flips to a full

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

@@ -7,8 +7,9 @@ import React from 'react';
  * 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).
+ * family footer bottom row), the header brand, and the mobile nav drawer.
+ * Theme presets that want text-only branding hide `.velu-header__mark`
+ * via CSS.
  */
 export default function VeluMark({ className = '', ...rest }) {
   return (