@veluai/velu 0.1.13 → 0.1.15

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

@@ -1,163 +1,163 @@
-import React from 'react';
-
-/**
- * Image — image content with optional caption and decorative chrome.
- *
- * Variants:
- *  - plain      <Image src alt />
- *  - captioned  <Image src alt caption="..." />
- *  - window     <Image src alt chrome="window" caption?/>
- *  - frame      <Image src alt chrome="frame"  caption?/>
- *
- * Window/frame use a pure SVG+CSS liquid-glass pattern (lucasromerodb/
- * liquid-glass-effect-macos): an SVG <filter> with feTurbulence →
- * feDisplacementMap provides real refraction; a 4-layer div stack
- * (effect/tint/shine/content) builds the glass material.
- * No library, no SSR/hydration concerns — pure declarative DOM + CSS.
- */
-
-const GLASS_FILTER_ID = 'velu-glass-distortion';
-
-function GlassFilterDefs() {
-  return (
-    <svg
-      aria-hidden="true"
-      style={{ position: 'absolute', inlineSize: 0, blockSize: 0 }}
-    >
-      {/* Turbulence-driven displacement of the backdrop. Used via
-          `backdrop-filter: url(#...)` so SourceGraphic IS the backdrop. */}
-      <filter
-        id={GLASS_FILTER_ID}
-        x="0%"
-        y="0%"
-        width="100%"
-        height="100%"
-        filterUnits="objectBoundingBox"
-      >
-        <feTurbulence
-          type="fractalNoise"
-          baseFrequency="0.008 0.008"
-          numOctaves="2"
-          seed="5"
-          result="noise"
-        />
-        <feDisplacementMap
-          in="SourceGraphic"
-          in2="noise"
-          scale="80"
-          xChannelSelector="R"
-          yChannelSelector="G"
-        />
-      </filter>
-    </svg>
-  );
-}
-
-function Glass({ className = '', children }) {
-  return (
-    <div className={`velu-glass ${className}`.trim()}>
-      <div className="velu-glass__effect" aria-hidden="true" />
-      <div className="velu-glass__tint" aria-hidden="true" />
-      <div className="velu-glass__shine" aria-hidden="true" />
-      <div className="velu-glass__content">{children}</div>
-    </div>
-  );
-}
-
-function WindowChrome({ src, alt }) {
-  return (
-    <div className="velu-image__window">
-      <GlassFilterDefs />
-      <div className="velu-image__glow" aria-hidden="true" />
-      <div className="velu-image__noise" aria-hidden="true" />
-      <Glass className="velu-image__window-surface">
-        <div className="velu-image__window-inner">
-          <Glass className="velu-image__chrome">
-            <span className="velu-image__dots" aria-hidden="true">
-              <span className="velu-image__dot velu-image__dot--red" />
-              <span className="velu-image__dot velu-image__dot--yellow" />
-              <span className="velu-image__dot velu-image__dot--green" />
-            </span>
-            <span className="velu-image__urlbar" aria-hidden="true" />
-          </Glass>
-          <img
-            src={src}
-            alt={alt}
-            loading="lazy"
-            className="velu-image__img velu-image__img--flush"
-          />
-        </div>
-      </Glass>
-    </div>
-  );
-}
-
-function DeviceFrame({ src, alt }) {
-  return (
-    <div className="velu-image__frame">
-      <GlassFilterDefs />
-      <div className="velu-image__glow" aria-hidden="true" />
-      <div className="velu-image__noise" aria-hidden="true" />
-      <Glass className="velu-image__frame-bezel">
-        <div className="velu-image__frame-screen">
-          <img
-            src={src}
-            alt={alt}
-            loading="lazy"
-            className="velu-image__img velu-image__img--flush"
-          />
-        </div>
-      </Glass>
-    </div>
-  );
-}
-
-export default function Image({
-  src,
-  alt = '',
-  caption,
-  chrome,
-  className = '',
-  ...rest
-}) {
-  // Fall back to the caption for alt text when no alt is provided, so a
-  // captioned image stays accessible without forcing duplication.
-  // Only string captions are usable as alt — React-node captions are
-  // ignored here.
-  const effectiveAlt = alt || (typeof caption === 'string' ? caption : '');
-
-  let body;
-  let variantClass = '';
-  if (chrome === 'window') {
-    body = <WindowChrome src={src} alt={effectiveAlt} />;
-    variantClass = 'velu-image--chrome';
-  } else if (chrome === 'frame') {
-    body = <DeviceFrame src={src} alt={effectiveAlt} />;
-    variantClass = 'velu-image--chrome';
-  } else {
-    body = (
-      <img
-        src={src}
-        alt={effectiveAlt}
-        loading="lazy"
-        className="velu-image__img"
-      />
-    );
-  }
-
-  const cls = `velu-image ${variantClass} ${className}`.trim();
-
-  if (caption) {
-    return (
-      <figure className={cls} {...rest}>
-        {body}
-        <figcaption className="velu-image__caption">{caption}</figcaption>
-      </figure>
-    );
-  }
-  return (
-    <div className={cls} {...rest}>
-      {body}
-    </div>
-  );
-}
+import React from 'react';
+
+/**
+ * Image — image content with optional caption and decorative chrome.
+ *
+ * Variants:
+ *  - plain      <Image src alt />
+ *  - captioned  <Image src alt caption="..." />
+ *  - window     <Image src alt chrome="window" caption?/>
+ *  - frame      <Image src alt chrome="frame"  caption?/>
+ *
+ * Window/frame use a pure SVG+CSS liquid-glass pattern (lucasromerodb/
+ * liquid-glass-effect-macos): an SVG <filter> with feTurbulence →
+ * feDisplacementMap provides real refraction; a 4-layer div stack
+ * (effect/tint/shine/content) builds the glass material.
+ * No library, no SSR/hydration concerns — pure declarative DOM + CSS.
+ */
+
+const GLASS_FILTER_ID = 'velu-glass-distortion';
+
+function GlassFilterDefs() {
+  return (
+    <svg
+      aria-hidden="true"
+      style={{ position: 'absolute', inlineSize: 0, blockSize: 0 }}
+    >
+      {/* Turbulence-driven displacement of the backdrop. Used via
+          `backdrop-filter: url(#...)` so SourceGraphic IS the backdrop. */}
+      <filter
+        id={GLASS_FILTER_ID}
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        filterUnits="objectBoundingBox"
+      >
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.008 0.008"
+          numOctaves="2"
+          seed="5"
+          result="noise"
+        />
+        <feDisplacementMap
+          in="SourceGraphic"
+          in2="noise"
+          scale="80"
+          xChannelSelector="R"
+          yChannelSelector="G"
+        />
+      </filter>
+    </svg>
+  );
+}
+
+function Glass({ className = '', children }) {
+  return (
+    <div className={`velu-glass ${className}`.trim()}>
+      <div className="velu-glass__effect" aria-hidden="true" />
+      <div className="velu-glass__tint" aria-hidden="true" />
+      <div className="velu-glass__shine" aria-hidden="true" />
+      <div className="velu-glass__content">{children}</div>
+    </div>
+  );
+}
+
+function WindowChrome({ src, alt }) {
+  return (
+    <div className="velu-image__window">
+      <GlassFilterDefs />
+      <div className="velu-image__glow" aria-hidden="true" />
+      <div className="velu-image__noise" aria-hidden="true" />
+      <Glass className="velu-image__window-surface">
+        <div className="velu-image__window-inner">
+          <Glass className="velu-image__chrome">
+            <span className="velu-image__dots" aria-hidden="true">
+              <span className="velu-image__dot velu-image__dot--red" />
+              <span className="velu-image__dot velu-image__dot--yellow" />
+              <span className="velu-image__dot velu-image__dot--green" />
+            </span>
+            <span className="velu-image__urlbar" aria-hidden="true" />
+          </Glass>
+          <img
+            src={src}
+            alt={alt}
+            loading="lazy"
+            className="velu-image__img velu-image__img--flush"
+          />
+        </div>
+      </Glass>
+    </div>
+  );
+}
+
+function DeviceFrame({ src, alt }) {
+  return (
+    <div className="velu-image__frame">
+      <GlassFilterDefs />
+      <div className="velu-image__glow" aria-hidden="true" />
+      <div className="velu-image__noise" aria-hidden="true" />
+      <Glass className="velu-image__frame-bezel">
+        <div className="velu-image__frame-screen">
+          <img
+            src={src}
+            alt={alt}
+            loading="lazy"
+            className="velu-image__img velu-image__img--flush"
+          />
+        </div>
+      </Glass>
+    </div>
+  );
+}
+
+export default function Image({
+  src,
+  alt = '',
+  caption,
+  chrome,
+  className = '',
+  ...rest
+}) {
+  // Fall back to the caption for alt text when no alt is provided, so a
+  // captioned image stays accessible without forcing duplication.
+  // Only string captions are usable as alt — React-node captions are
+  // ignored here.
+  const effectiveAlt = alt || (typeof caption === 'string' ? caption : '');
+
+  let body;
+  let variantClass = '';
+  if (chrome === 'window') {
+    body = <WindowChrome src={src} alt={effectiveAlt} />;
+    variantClass = 'velu-image--chrome';
+  } else if (chrome === 'frame') {
+    body = <DeviceFrame src={src} alt={effectiveAlt} />;
+    variantClass = 'velu-image--chrome';
+  } else {
+    body = (
+      <img
+        src={src}
+        alt={effectiveAlt}
+        loading="lazy"
+        className="velu-image__img"
+      />
+    );
+  }
+
+  const cls = `velu-image ${variantClass} ${className}`.trim();
+
+  if (caption) {
+    return (
+      <figure className={cls} {...rest}>
+        {body}
+        <figcaption className="velu-image__caption">{caption}</figcaption>
+      </figure>
+    );
+  }
+  return (
+    <div className={cls} {...rest}>
+      {body}
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * Logo — the configured site logo image(s), shown in the header (and mobile
+ * drawer) in place of the name wordmark.
+ *
+ * `logo` is `{ light, dark, mono }` where light/dark are URLs the dev server
+ * serves from the project's logo files. When `mono`, a single image covers
+ * both themes; otherwise both render and CSS shows the right one per
+ * `[data-theme]` (see page-header.css `.velu-logo--light/--dark`).
+ *
+ * SSR-safe: identical markup on server + client (the theme picks the visible
+ * image via CSS, not JS), so there's no hydration mismatch or flash.
+ */
+export default function Logo({ logo, alt = '' }) {
+  if (!logo) return null;
+  if (logo.mono) {
+    return <img className="velu-logo" src={logo.light} alt={alt} />;
+  }
+  return (
+    <>
+      <img className="velu-logo velu-logo--light" src={logo.light} alt={alt} />
+      <img
+        className="velu-logo velu-logo--dark"
+        src={logo.dark}
+        alt={alt}
+        aria-hidden="true"
+      />
+    </>
+  );
+}

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

@@ -1,31 +1,31 @@
-import React from 'react';
-
-/**
- * MethodBadge — colored monospace pill showing an HTTP method.
- *
- *   <MethodBadge method="POST" />
- *
- * Colors come from the per-method tokens in base.css:
- *   --post-pill-color / --post-pill-stroke-color  (and post-cta-color)
- *   --get-* / --put-* / --delete-* / --patch-*
- *
- * Used by <ApiPath>, <TryItBar>, and <ApiClient>; also exportable
- * standalone for inline endpoint references in prose.
- */
-
-const METHODS = ['get', 'post', 'put', 'patch', 'delete'];
-
-export default function MethodBadge({
-  method = 'GET',
-  className = '',
-  ...rest
-}) {
-  const key = String(method).toLowerCase();
-  const safe = METHODS.includes(key) ? key : 'get';
-  const cls = `velu-method-badge velu-method-badge--${safe} ${className}`.trim();
-  return (
-    <span className={cls} {...rest}>
-      {String(method).toUpperCase()}
-    </span>
-  );
-}
+import React from 'react';
+
+/**
+ * MethodBadge — colored monospace pill showing an HTTP method.
+ *
+ *   <MethodBadge method="POST" />
+ *
+ * Colors come from the per-method tokens in base.css:
+ *   --post-pill-color / --post-pill-stroke-color  (and post-cta-color)
+ *   --get-* / --put-* / --delete-* / --patch-*
+ *
+ * Used by <ApiPath>, <TryItBar>, and <ApiClient>; also exportable
+ * standalone for inline endpoint references in prose.
+ */
+
+const METHODS = ['get', 'post', 'put', 'patch', 'delete'];
+
+export default function MethodBadge({
+  method = 'GET',
+  className = '',
+  ...rest
+}) {
+  const key = String(method).toLowerCase();
+  const safe = METHODS.includes(key) ? key : 'get';
+  const cls = `velu-method-badge velu-method-badge--${safe} ${className}`.trim();
+  return (
+    <span className={cls} {...rest}>
+      {String(method).toUpperCase()}
+    </span>
+  );
+}

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

@@ -1,108 +1,108 @@
-import React from 'react';
-import { ChevronDown } from 'lucide-react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * NavSelect — a small dropdown for the navigation switchers
- * (product / version / language). Generalized from the mobile drawer's
- * doc-select: a button showing the current value + chevron, opening a
- * menu of link options. Click-outside + Escape close it. The options
- * are LINKS (the active axis is a URL path-prefix), so selecting one
- * navigates via `linkComponent`.
- *
- * @param {{
- *   value: string,                          // label shown on the button
- *   options?: Array<{ label, href, icon?, active? }>,
- *   icon?: string|React.ReactNode,          // optional leading button icon (e.g. 'globe')
- *   ariaLabel?: string,
- *   size?: 'sm'|'md',                        // 'sm' = compact (version pill)
- *   linkComponent?: React.ElementType,
- *   className?: string,
- * }} props
- */
-export default function NavSelect({
-  value,
-  valueCode,
-  options = [],
-  icon,
-  ariaLabel = 'Select',
-  size = 'md',
-  bare = false,
-  linkComponent = 'a',
-  className = '',
-  ...rest
-}) {
-  const Link = linkComponent;
-  const [open, setOpen] = React.useState(false);
-  const rootRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!open) return;
-    const onDoc = (e) => {
-      if (!rootRef.current?.contains(e.target)) setOpen(false);
-    };
-    const onKey = (e) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDoc);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDoc);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  return (
-    <div
-      ref={rootRef}
-      className={`velu-nav-select velu-nav-select--${size}${bare ? ' velu-nav-select--bare' : ''} ${className}`.trim()}
-      data-open={open ? 'true' : 'false'}
-      {...rest}
-    >
-      <button
-        type="button"
-        className="velu-nav-select__btn"
-        aria-haspopup="menu"
-        aria-expanded={open}
-        aria-label={ariaLabel}
-        onClick={() => setOpen((v) => !v)}
-      >
-        {icon && (
-          <span className="velu-nav-select__btn-icon" aria-hidden="true">
-            {resolveIcon(icon, { size: '1em' })}
-          </span>
-        )}
-        {valueCode && (
-          <span className="velu-nav-select__code">{valueCode}</span>
-        )}
-        <span className="velu-nav-select__value">{value}</span>
-        <ChevronDown
-          className="velu-nav-select__chev"
-          aria-hidden="true"
-          focusable="false"
-        />
-      </button>
-      <ul className="velu-nav-select__menu" role="menu" aria-hidden={!open}>
-        {options.map((o, i) => (
-          <li key={o.href ?? i} role="none">
-            <Link
-              role="menuitem"
-              className={`velu-nav-select__item${o.active ? ' velu-nav-select__item--active' : ''}`}
-              href={o.href}
-              tabIndex={open ? 0 : -1}
-              onClick={() => setOpen(false)}
-            >
-              {o.icon && (
-                <span className="velu-nav-select__item-icon" aria-hidden="true">
-                  {resolveIcon(o.icon, { size: '1em' })}
-                </span>
-              )}
-              {o.code && <span className="velu-nav-select__code">{o.code}</span>}
-              <span>{o.label}</span>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * NavSelect — a small dropdown for the navigation switchers
+ * (product / version / language). Generalized from the mobile drawer's
+ * doc-select: a button showing the current value + chevron, opening a
+ * menu of link options. Click-outside + Escape close it. The options
+ * are LINKS (the active axis is a URL path-prefix), so selecting one
+ * navigates via `linkComponent`.
+ *
+ * @param {{
+ *   value: string,                          // label shown on the button
+ *   options?: Array<{ label, href, icon?, active? }>,
+ *   icon?: string|React.ReactNode,          // optional leading button icon (e.g. 'globe')
+ *   ariaLabel?: string,
+ *   size?: 'sm'|'md',                        // 'sm' = compact (version pill)
+ *   linkComponent?: React.ElementType,
+ *   className?: string,
+ * }} props
+ */
+export default function NavSelect({
+  value,
+  valueCode,
+  options = [],
+  icon,
+  ariaLabel = 'Select',
+  size = 'md',
+  bare = false,
+  linkComponent = 'a',
+  className = '',
+  ...rest
+}) {
+  const Link = linkComponent;
+  const [open, setOpen] = React.useState(false);
+  const rootRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`velu-nav-select velu-nav-select--${size}${bare ? ' velu-nav-select--bare' : ''} ${className}`.trim()}
+      data-open={open ? 'true' : 'false'}
+      {...rest}
+    >
+      <button
+        type="button"
+        className="velu-nav-select__btn"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {icon && (
+          <span className="velu-nav-select__btn-icon" aria-hidden="true">
+            {resolveIcon(icon, { size: '1em' })}
+          </span>
+        )}
+        {valueCode && (
+          <span className="velu-nav-select__code">{valueCode}</span>
+        )}
+        <span className="velu-nav-select__value">{value}</span>
+        <ChevronDown
+          className="velu-nav-select__chev"
+          aria-hidden="true"
+          focusable="false"
+        />
+      </button>
+      <ul className="velu-nav-select__menu" role="menu" aria-hidden={!open}>
+        {options.map((o, i) => (
+          <li key={o.href ?? i} role="none">
+            <Link
+              role="menuitem"
+              className={`velu-nav-select__item${o.active ? ' velu-nav-select__item--active' : ''}`}
+              href={o.href}
+              tabIndex={open ? 0 : -1}
+              onClick={() => setOpen(false)}
+            >
+              {o.icon && (
+                <span className="velu-nav-select__item-icon" aria-hidden="true">
+                  {resolveIcon(o.icon, { size: '1em' })}
+                </span>
+              )}
+              {o.code && <span className="velu-nav-select__code">{o.code}</span>}
+              <span>{o.label}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}