@veluai/velu 0.2.25 → 0.2.28

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

@@ -1,422 +1,422 @@
-import React from 'react';
-import { MoreVertical, Menu, ChevronRight } from 'lucide-react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Stack from '../primitives/Stack.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-import Logo from './Logo.jsx';
-
-/**
- * PageHeader — top of the docs site.
- *
- *   <PageHeader
- *     linkComponent={RouterLink}
- *     brand={{ label: 'Velu', href: '/' }}
- *     center={<Search />}                       // search + adjacent bits
- *     actions={[
- *       { label: 'Book Demo', kind: 'primary', href: '/demo' },
- *     ]}
- *     activeTab="/"
- *     tabs={[
- *       { label: 'Home', icon: 'home',  href: '/' },
- *       { label: 'Docs', icon: 'book',  href: '/docs', external: true },
- *       { label: 'Blog', icon: 'rss',   href: '/blog' },
- *     ]}
- *   />
- *
- * Layout: a top row (3-column grid — brand | center | actions) plus an
- * optional tabs row below. All slots are fully data-driven; pass any
- * number of actions and any number of tabs.
- *
- * @typedef {Object} HeaderTab
- * @property {string} label
- * @property {string|React.ReactNode} [icon]   lucide id or node
- * @property {string} [href]
- * @property {boolean} [active]                explicit override
- * @property {boolean} [external]              renders an outlink chip
- *
- * @typedef {Object} HeaderAction
- * @property {string} label
- * @property {string|React.ReactNode} [icon]
- * @property {'primary'|'outlined'} [kind]     default 'outlined'
- * @property {string} [href]
- * @property {() => void} [onClick]
- * @property {boolean} [external]
- *
- * @param {{ brand?: { label?: string, href?: string },
- *           center?: React.ReactNode, actions?: HeaderAction[],
- *           tabs?: HeaderTab[], activeTab?: string,
- *           linkComponent?: React.ElementType, className?: string }} props
- */
-
-/* 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. */
-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.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>
-  );
-}
-
-function ActionButton({ action, Link }) {
-  const { label, icon, kind = 'outlined', href, onClick, external } = action;
-  const cls = `velu-header__action velu-header__action--${kind}`;
-  const content = (
-    <>
-      {icon && (
-        <span className="velu-header__action-icon" aria-hidden="true">
-          {resolveIcon(icon, { size: '1em' })}
-        </span>
-      )}
-      <span>{label}</span>
-    </>
-  );
-  if (href) {
-    const Tag = external ? 'a' : Link;
-    const extraProps = external
-      ? { target: '_blank', rel: 'noreferrer' }
-      : {};
-    return (
-      <Tag className={cls} href={href} {...extraProps}>
-        {content}
-      </Tag>
-    );
-  }
-  return (
-    <button type="button" className={cls} onClick={onClick}>
-      {content}
-    </button>
-  );
-}
-
-function HeaderTab({ tab, isActive, Link }) {
-  const { label, icon, href = '#', external } = tab;
-  const cls = `velu-header__tab${isActive ? ' velu-header__tab--active' : ''}`;
-  const Tag = external ? 'a' : Link;
-  const extraProps = external
-    ? { target: '_blank', rel: 'noreferrer' }
-    : {};
-  return (
-    <Tag
-      className={cls}
-      href={href}
-      aria-current={isActive ? 'page' : undefined}
-      {...extraProps}
-    >
-      {icon && (
-        <span className="velu-header__tab-icon" aria-hidden="true">
-          {resolveIcon(icon, { size: '1.5em' })}
-        </span>
-      )}
-      <span>{label}</span>
-      {external && (
-        <span className="velu-header__tab-external" aria-hidden="true">
-          {resolveIcon('external-link', { size: '1em' })}
-        </span>
-      )}
-    </Tag>
-  );
-}
-
-/* Narrow-width overflow menu — the same `actions` items rendered as a
-   simple vertical dropdown under a triple-dot button. CSS in
-   page-header.css hides this component at wide widths and the inline
-   action list at narrow widths so only one is ever visible.
-   Click-outside + Escape close the menu. */
-function KebabMenu({ actions, Link }) {
-  const [open, setOpen] = React.useState(false);
-  const rootRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!open) return;
-    const onDocClick = (e) => {
-      if (!rootRef.current?.contains(e.target)) setOpen(false);
-    };
-    const onKey = (e) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  return (
-    <div
-      ref={rootRef}
-      className="velu-header__kebab"
-      data-open={open ? 'true' : 'false'}
-    >
-      <button
-        type="button"
-        className="velu-header__kebab-toggle"
-        aria-label="More actions"
-        aria-haspopup="menu"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-      >
-        <MoreVertical aria-hidden="true" focusable="false" />
-      </button>
-      <ul className="velu-header__kebab-menu" role="menu" aria-hidden={!open}>
-        {actions.map((a, i) => {
-          const { label, icon, href, onClick, external } = a;
-          const content = (
-            <>
-              {icon && (
-                <span className="velu-header__kebab-icon" aria-hidden="true">
-                  {resolveIcon(icon, { size: '1em' })}
-                </span>
-              )}
-              <span>{label}</span>
-            </>
-          );
-          const close = () => setOpen(false);
-          if (href) {
-            const Tag = external ? 'a' : Link;
-            const extra = external
-              ? { target: '_blank', rel: 'noreferrer' }
-              : {};
-            return (
-              <li key={i} role="none">
-                <Tag
-                  role="menuitem"
-                  className="velu-header__kebab-item"
-                  href={href}
-                  onClick={close}
-                  tabIndex={open ? 0 : -1}
-                  {...extra}
-                >
-                  {content}
-                </Tag>
-              </li>
-            );
-          }
-          return (
-            <li key={i} role="none">
-              <button
-                type="button"
-                role="menuitem"
-                className="velu-header__kebab-item"
-                onClick={() => {
-                  onClick?.();
-                  close();
-                }}
-                tabIndex={open ? 0 : -1}
-              >
-                {content}
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-export default function PageHeader({
-  brand,
-  brandTrailing,
-  center,
-  actions = [],
-  trailing,
-  tabs = [],
-  tabsTrailing,
-  activeTab,
-  breadcrumb,
-  onMenuClick,
-  linkComponent = 'a',
-  className = '',
-  ...rest
-}) {
-  const Link = linkComponent;
-  const brandLabel = brand?.label ?? 'Velu';
-  const brandHref = brand?.href;
-
-  // Track whether the page has been scrolled so the header can flip
-  // from solid to translucent / frosted. Edge-triggered (only updates
-  // when crossing scrollY=0) so React doesn't re-render the header on
-  // every scroll event.
-  const [scrolled, setScrolled] = React.useState(false);
-  React.useEffect(() => {
-    const onScroll = () => {
-      const next = window.scrollY > 0;
-      setScrolled((prev) => (prev === next ? prev : next));
-    };
-    onScroll();
-    window.addEventListener('scroll', onScroll, { passive: true });
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-
-  // A configured logo replaces the mark + wordmark entirely (Mintlify-style).
-  const brandBlock = (
-    <Cluster space="var(--s-3)" align="center" className="velu-header__brand">
-      {brand?.logo ? (
-        <Logo logo={brand.logo} alt={brandLabel} />
-      ) : (
-        <>
-          <VeluMark />
-          <span className="velu-header__wordmark">{brandLabel}</span>
-        </>
-      )}
-    </Cluster>
-  );
-
-  return (
-    <Stack
-      as="header"
-      space="var(--s0)"
-      className={`velu-header${scrolled ? ' velu-header--scrolled' : ''} ${className}`.trim()}
-      {...rest}
-    >
-      {/* Top row — 3-column grid: brand | center | actions. */}
-      <div className="velu-header__top">
-        <Cluster
-          space="var(--s-1)"
-          align="center"
-          className="velu-header__col velu-header__col--brand"
-        >
-          {brandHref ? (
-            <Link href={brandHref} className="velu-header__brand-link">
-              {brandBlock}
-            </Link>
-          ) : (
-            brandBlock
-          )}
-          {/* Slot rendered right after the brand (e.g. version pill). */}
-          {brandTrailing}
-        </Cluster>
-
-        {center && (
-          <div className="velu-header__col velu-header__col--center">
-            {center}
-          </div>
-        )}
-
-        {(actions.length > 0 || trailing) && (
-          <Cluster
-            space="var(--s-2)"
-            align="center"
-            className="velu-header__col velu-header__col--actions"
-          >
-            {/* Inline action buttons — hidden at narrow widths (where
-                the kebab takes over) via @container query in
-                page-header.css. */}
-            {actions.length > 0 && (
-              <div className="velu-header__actions-list">
-                {actions.map((a, i) => (
-                  <ActionButton key={i} action={a} Link={Link} />
-                ))}
-              </div>
-            )}
-            {trailing}
-            {/* Kebab — only displayed at narrow widths. The dropdown
-                surfaces the same `actions` items as the inline list,
-                so the data source stays single. */}
-            {actions.length > 0 && (
-              <KebabMenu actions={actions} Link={Link} />
-            )}
-          </Cluster>
-        )}
-      </div>
-
-      {/* Tabs row — at wide widths shows the `tabs` cluster; at mobile
-          the tabs are CSS-hidden and the `breadcrumb` (if provided)
-          takes their place. Burger stays at the trailing edge via
-          margin-inline-start: auto on the burger button itself, so
-          its position is unaffected by the breadcrumb's length. */}
-      {(tabs.length > 0 ||
-        (breadcrumb && breadcrumb.length > 0) ||
-        tabsTrailing ||
-        onMenuClick) && (
-        <Cluster
-          space="var(--s0)"
-          align="center"
-          className="velu-header__tabs"
-        >
-          {tabs.map((tab, i) => {
-            const isActive =
-              tab.active || (tab.href != null && tab.href === activeTab);
-            return (
-              <HeaderTab
-                key={i}
-                tab={tab}
-                isActive={isActive}
-                Link={Link}
-              />
-            );
-          })}
-          {/* Single-line breadcrumb. Hidden at wide widths (see
-              page-header.css). When `onMenuClick` is provided the
-              whole strip is a button that opens the nav drawer —
-              individual segment links are deliberately collapsed
-              into one tap target so the chevron + segments read as
-              "open menu" rather than separate links. */}
-          {breadcrumb && breadcrumb.length > 0 && (
-            <button
-              type="button"
-              className="velu-header__crumbs"
-              onClick={onMenuClick}
-              aria-label="Open navigation menu"
-            >
-              {breadcrumb.map((c, i) => {
-                const isLast = i === breadcrumb.length - 1;
-                return (
-                  <React.Fragment key={i}>
-                    {i > 0 && (
-                      <ChevronRight
-                        className="velu-header__crumb-sep"
-                        aria-hidden="true"
-                        focusable="false"
-                      />
-                    )}
-                    <span
-                      className={`velu-header__crumb${
-                        isLast ? ' velu-header__crumb--current' : ''
-                      }`}
-                    >
-                      {c.label}
-                    </span>
-                  </React.Fragment>
-                );
-              })}
-            </button>
-          )}
-          {/* Trailing slot at the bottom-right of the header (right end
-              of the tabs row) — e.g. the language switcher. Pushed
-              right via margin-auto; hidden on mobile (folds into the
-              drawer) via page-header.css. */}
-          {tabsTrailing && (
-            <div className="velu-header__tabs-trailing">{tabsTrailing}</div>
-          )}
-          {/* Mobile-only burger — sits at the trailing edge of the tabs
-              row via CSS (margin-inline-start: auto in page-header.css).
-              Hidden at wider widths; visible at < 640px. Fires the
-              consumer's `onMenuClick` so the parent decides what mobile
-              navigation to surface (e.g. a slide-down menu). */}
-          {onMenuClick && (
-            <button
-              type="button"
-              className="velu-header__menu"
-              aria-label="Open navigation menu"
-              onClick={onMenuClick}
-            >
-              <Menu aria-hidden="true" focusable="false" />
-            </button>
-          )}
-        </Cluster>
-      )}
-    </Stack>
-  );
-}
+import React from 'react';
+import { MoreVertical, Menu, ChevronRight } from 'lucide-react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Stack from '../primitives/Stack.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+import Logo from './Logo.jsx';
+
+/**
+ * PageHeader — top of the docs site.
+ *
+ *   <PageHeader
+ *     linkComponent={RouterLink}
+ *     brand={{ label: 'Velu', href: '/' }}
+ *     center={<Search />}                       // search + adjacent bits
+ *     actions={[
+ *       { label: 'Book Demo', kind: 'primary', href: '/demo' },
+ *     ]}
+ *     activeTab="/"
+ *     tabs={[
+ *       { label: 'Home', icon: 'home',  href: '/' },
+ *       { label: 'Docs', icon: 'book',  href: '/docs', external: true },
+ *       { label: 'Blog', icon: 'rss',   href: '/blog' },
+ *     ]}
+ *   />
+ *
+ * Layout: a top row (3-column grid — brand | center | actions) plus an
+ * optional tabs row below. All slots are fully data-driven; pass any
+ * number of actions and any number of tabs.
+ *
+ * @typedef {Object} HeaderTab
+ * @property {string} label
+ * @property {string|React.ReactNode} [icon]   lucide id or node
+ * @property {string} [href]
+ * @property {boolean} [active]                explicit override
+ * @property {boolean} [external]              renders an outlink chip
+ *
+ * @typedef {Object} HeaderAction
+ * @property {string} label
+ * @property {string|React.ReactNode} [icon]
+ * @property {'primary'|'outlined'} [kind]     default 'outlined'
+ * @property {string} [href]
+ * @property {() => void} [onClick]
+ * @property {boolean} [external]
+ *
+ * @param {{ brand?: { label?: string, href?: string },
+ *           center?: React.ReactNode, actions?: HeaderAction[],
+ *           tabs?: HeaderTab[], activeTab?: string,
+ *           linkComponent?: React.ElementType, className?: string }} props
+ */
+
+/* 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. */
+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.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>
+  );
+}
+
+function ActionButton({ action, Link }) {
+  const { label, icon, kind = 'outlined', href, onClick, external } = action;
+  const cls = `velu-header__action velu-header__action--${kind}`;
+  const content = (
+    <>
+      {icon && (
+        <span className="velu-header__action-icon" aria-hidden="true">
+          {resolveIcon(icon, { size: '1em' })}
+        </span>
+      )}
+      <span>{label}</span>
+    </>
+  );
+  if (href) {
+    const Tag = external ? 'a' : Link;
+    const extraProps = external
+      ? { target: '_blank', rel: 'noreferrer' }
+      : {};
+    return (
+      <Tag className={cls} href={href} {...extraProps}>
+        {content}
+      </Tag>
+    );
+  }
+  return (
+    <button type="button" className={cls} onClick={onClick}>
+      {content}
+    </button>
+  );
+}
+
+function HeaderTab({ tab, isActive, Link }) {
+  const { label, icon, href = '#', external } = tab;
+  const cls = `velu-header__tab${isActive ? ' velu-header__tab--active' : ''}`;
+  const Tag = external ? 'a' : Link;
+  const extraProps = external
+    ? { target: '_blank', rel: 'noreferrer' }
+    : {};
+  return (
+    <Tag
+      className={cls}
+      href={href}
+      aria-current={isActive ? 'page' : undefined}
+      {...extraProps}
+    >
+      {icon && (
+        <span className="velu-header__tab-icon" aria-hidden="true">
+          {resolveIcon(icon, { size: '1.5em' })}
+        </span>
+      )}
+      <span>{label}</span>
+      {external && (
+        <span className="velu-header__tab-external" aria-hidden="true">
+          {resolveIcon('external-link', { size: '1em' })}
+        </span>
+      )}
+    </Tag>
+  );
+}
+
+/* Narrow-width overflow menu — the same `actions` items rendered as a
+   simple vertical dropdown under a triple-dot button. CSS in
+   page-header.css hides this component at wide widths and the inline
+   action list at narrow widths so only one is ever visible.
+   Click-outside + Escape close the menu. */
+function KebabMenu({ actions, Link }) {
+  const [open, setOpen] = React.useState(false);
+  const rootRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className="velu-header__kebab"
+      data-open={open ? 'true' : 'false'}
+    >
+      <button
+        type="button"
+        className="velu-header__kebab-toggle"
+        aria-label="More actions"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <MoreVertical aria-hidden="true" focusable="false" />
+      </button>
+      <ul className="velu-header__kebab-menu" role="menu" aria-hidden={!open}>
+        {actions.map((a, i) => {
+          const { label, icon, href, onClick, external } = a;
+          const content = (
+            <>
+              {icon && (
+                <span className="velu-header__kebab-icon" aria-hidden="true">
+                  {resolveIcon(icon, { size: '1em' })}
+                </span>
+              )}
+              <span>{label}</span>
+            </>
+          );
+          const close = () => setOpen(false);
+          if (href) {
+            const Tag = external ? 'a' : Link;
+            const extra = external
+              ? { target: '_blank', rel: 'noreferrer' }
+              : {};
+            return (
+              <li key={i} role="none">
+                <Tag
+                  role="menuitem"
+                  className="velu-header__kebab-item"
+                  href={href}
+                  onClick={close}
+                  tabIndex={open ? 0 : -1}
+                  {...extra}
+                >
+                  {content}
+                </Tag>
+              </li>
+            );
+          }
+          return (
+            <li key={i} role="none">
+              <button
+                type="button"
+                role="menuitem"
+                className="velu-header__kebab-item"
+                onClick={() => {
+                  onClick?.();
+                  close();
+                }}
+                tabIndex={open ? 0 : -1}
+              >
+                {content}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default function PageHeader({
+  brand,
+  brandTrailing,
+  center,
+  actions = [],
+  trailing,
+  tabs = [],
+  tabsTrailing,
+  activeTab,
+  breadcrumb,
+  onMenuClick,
+  linkComponent = 'a',
+  className = '',
+  ...rest
+}) {
+  const Link = linkComponent;
+  const brandLabel = brand?.label ?? 'Velu';
+  const brandHref = brand?.href;
+
+  // Track whether the page has been scrolled so the header can flip
+  // from solid to translucent / frosted. Edge-triggered (only updates
+  // when crossing scrollY=0) so React doesn't re-render the header on
+  // every scroll event.
+  const [scrolled, setScrolled] = React.useState(false);
+  React.useEffect(() => {
+    const onScroll = () => {
+      const next = window.scrollY > 0;
+      setScrolled((prev) => (prev === next ? prev : next));
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // A configured logo replaces the mark + wordmark entirely (Mintlify-style).
+  const brandBlock = (
+    <Cluster space="var(--s-3)" align="center" className="velu-header__brand">
+      {brand?.logo ? (
+        <Logo logo={brand.logo} alt={brandLabel} />
+      ) : (
+        <>
+          <VeluMark />
+          <span className="velu-header__wordmark">{brandLabel}</span>
+        </>
+      )}
+    </Cluster>
+  );
+
+  return (
+    <Stack
+      as="header"
+      space="var(--s0)"
+      className={`velu-header${scrolled ? ' velu-header--scrolled' : ''} ${className}`.trim()}
+      {...rest}
+    >
+      {/* Top row — 3-column grid: brand | center | actions. */}
+      <div className="velu-header__top">
+        <Cluster
+          space="var(--s-1)"
+          align="center"
+          className="velu-header__col velu-header__col--brand"
+        >
+          {brandHref ? (
+            <Link href={brandHref} className="velu-header__brand-link">
+              {brandBlock}
+            </Link>
+          ) : (
+            brandBlock
+          )}
+          {/* Slot rendered right after the brand (e.g. version pill). */}
+          {brandTrailing}
+        </Cluster>
+
+        {center && (
+          <div className="velu-header__col velu-header__col--center">
+            {center}
+          </div>
+        )}
+
+        {(actions.length > 0 || trailing) && (
+          <Cluster
+            space="var(--s-2)"
+            align="center"
+            className="velu-header__col velu-header__col--actions"
+          >
+            {/* Inline action buttons — hidden at narrow widths (where
+                the kebab takes over) via @container query in
+                page-header.css. */}
+            {actions.length > 0 && (
+              <div className="velu-header__actions-list">
+                {actions.map((a, i) => (
+                  <ActionButton key={i} action={a} Link={Link} />
+                ))}
+              </div>
+            )}
+            {trailing}
+            {/* Kebab — only displayed at narrow widths. The dropdown
+                surfaces the same `actions` items as the inline list,
+                so the data source stays single. */}
+            {actions.length > 0 && (
+              <KebabMenu actions={actions} Link={Link} />
+            )}
+          </Cluster>
+        )}
+      </div>
+
+      {/* Tabs row — at wide widths shows the `tabs` cluster; at mobile
+          the tabs are CSS-hidden and the `breadcrumb` (if provided)
+          takes their place. Burger stays at the trailing edge via
+          margin-inline-start: auto on the burger button itself, so
+          its position is unaffected by the breadcrumb's length. */}
+      {(tabs.length > 0 ||
+        (breadcrumb && breadcrumb.length > 0) ||
+        tabsTrailing ||
+        onMenuClick) && (
+        <Cluster
+          space="var(--s0)"
+          align="center"
+          className="velu-header__tabs"
+        >
+          {tabs.map((tab, i) => {
+            const isActive =
+              tab.active || (tab.href != null && tab.href === activeTab);
+            return (
+              <HeaderTab
+                key={i}
+                tab={tab}
+                isActive={isActive}
+                Link={Link}
+              />
+            );
+          })}
+          {/* Single-line breadcrumb. Hidden at wide widths (see
+              page-header.css). When `onMenuClick` is provided the
+              whole strip is a button that opens the nav drawer —
+              individual segment links are deliberately collapsed
+              into one tap target so the chevron + segments read as
+              "open menu" rather than separate links. */}
+          {breadcrumb && breadcrumb.length > 0 && (
+            <button
+              type="button"
+              className="velu-header__crumbs"
+              onClick={onMenuClick}
+              aria-label="Open navigation menu"
+            >
+              {breadcrumb.map((c, i) => {
+                const isLast = i === breadcrumb.length - 1;
+                return (
+                  <React.Fragment key={i}>
+                    {i > 0 && (
+                      <ChevronRight
+                        className="velu-header__crumb-sep"
+                        aria-hidden="true"
+                        focusable="false"
+                      />
+                    )}
+                    <span
+                      className={`velu-header__crumb${
+                        isLast ? ' velu-header__crumb--current' : ''
+                      }`}
+                    >
+                      {c.label}
+                    </span>
+                  </React.Fragment>
+                );
+              })}
+            </button>
+          )}
+          {/* Trailing slot at the bottom-right of the header (right end
+              of the tabs row) — e.g. the language switcher. Pushed
+              right via margin-auto; hidden on mobile (folds into the
+              drawer) via page-header.css. */}
+          {tabsTrailing && (
+            <div className="velu-header__tabs-trailing">{tabsTrailing}</div>
+          )}
+          {/* Mobile-only burger — sits at the trailing edge of the tabs
+              row via CSS (margin-inline-start: auto in page-header.css).
+              Hidden at wider widths; visible at < 640px. Fires the
+              consumer's `onMenuClick` so the parent decides what mobile
+              navigation to surface (e.g. a slide-down menu). */}
+          {onMenuClick && (
+            <button
+              type="button"
+              className="velu-header__menu"
+              aria-label="Open navigation menu"
+              onClick={onMenuClick}
+            >
+              <Menu aria-hidden="true" focusable="false" />
+            </button>
+          )}
+        </Cluster>
+      )}
+    </Stack>
+  );
+}