@veluai/velu 0.1.13 → 0.1.14

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

@@ -1,213 +1,213 @@
-import React from 'react';
-import Stack from '../primitives/Stack.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-
-/**
- * PageFooter — the docs site's footer.
- *
- *   <PageFooter
- *     linkComponent={RouterLink}
- *     columns={[
- *       { title: 'Resources', items: [
- *         { label: 'Showcase',   href: '/showcase' },
- *         { label: 'Enterprise', href: '/enterprise' },
- *         { label: 'Status',     href: '/status' },
- *       ]},
- *       { title: 'Company',  items: […] },
- *       { title: 'Policies', items: […] },
- *     ]}
- *     socials={[
- *       { kind: 'github',   href: 'https://github.com/…'   },
- *       { kind: 'x',        href: 'https://x.com/…'        },
- *       { kind: 'youtube',  href: 'https://youtube.com/…'  },
- *       { kind: 'linkedin', href: 'https://linkedin.com/…' },
- *     ]}
- *   />
- *
- * Layout: a Switcher row of [brand | columns…] that flips to a vertical
- * stack on narrow widths, with a centered social-icon row below. The
- * number of link columns is whatever you pass — fully data-driven.
- *
- * @typedef {Object} FooterLink
- * @property {string} label
- * @property {string} [href]
- *
- * @typedef {Object} FooterColumn
- * @property {string} title
- * @property {FooterLink[]} items
- *
- * @typedef {Object} FooterSocial
- * @property {'github'|'x'|'youtube'|'linkedin'} kind
- * @property {string} href
- *
- * @param {{ columns?: FooterColumn[], socials?: FooterSocial[],
- *           brand?: { label?: string, href?: string },
- *           linkComponent?: React.ElementType, className?: string }} props
- */
-
-/* ── Brand mark — the Velu double-hook logo. Color: currentColor for
-   the surrounding wordmark; the mark itself uses --accent-color via
-   the wrapping span. ───────────────────────────────────────────────── */
-function VeluMark() {
-  return (
-    <svg
-      className="velu-footer__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.553L9.61081 13.5538Z"
-      />
-    </svg>
-  );
-}
-
-/* ── Social glyphs — inline SVGs with fill: currentColor so they
-   inherit color (themed) and flip with light/dark. ─────────────────── */
-function GithubIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
-      />
-    </svg>
-  );
-}
-function XIcon() {
-  return (
-    <svg viewBox="0 0 1200 1227" fill="currentColor" aria-hidden="true">
-      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
-    </svg>
-  );
-}
-function YoutubeIcon() {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-    </svg>
-  );
-}
-function LinkedinIcon() {
-  return (
-    <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" />
-    </svg>
-  );
-}
-
-const SOCIAL_ICONS = {
-  github: GithubIcon,
-  x: XIcon,
-  youtube: YoutubeIcon,
-  linkedin: LinkedinIcon,
-};
-const SOCIAL_LABELS = {
-  github: 'GitHub',
-  x: 'X',
-  youtube: 'YouTube',
-  linkedin: 'LinkedIn',
-};
-
-export default function PageFooter({
-  brand,
-  columns = [],
-  socials = [],
-  linkComponent = 'a',
-  className = '',
-  ...rest
-}) {
-  const Link = linkComponent;
-  const brandLabel = brand?.label ?? 'Velu';
-  const brandHref = brand?.href;
-
-  const brandNode = (
-    <Cluster space="var(--s-3)" align="center" className="velu-footer__brand">
-      <VeluMark />
-      <span className="velu-footer__wordmark">{brandLabel}</span>
-    </Cluster>
-  );
-
-  return (
-    <Stack
-      as="footer"
-      space="var(--s2)"
-      className={`velu-footer ${className}`.trim()}
-      {...rest}
-    >
-      {/* Container groups the brand row and the columns row. */}
-      <Stack space="var(--s2)" className="velu-footer__container">
-        {/* Row 1: brand */}
-        <div className="velu-footer__row velu-footer__row--brand">
-          {brandHref ? (
-            <Link href={brandHref} className="velu-footer__brand-link">
-              {brandNode}
-            </Link>
-          ) : (
-            brandNode
-          )}
-        </div>
-
-        {/* Row 2: link columns — each column hugs its content. Plain
-            flex row (not Cluster) so column-gap (large, between
-            columns) and row-gap (small, when columns wrap onto a new
-            line) can be set independently. CSS owns the gaps. */}
-        <div className="velu-footer__row velu-footer__row--columns">
-          {columns.map((col, i) => (
-            <Stack
-              key={i}
-              space="var(--s-2)"
-              className="velu-footer__column"
-            >
-              <span className="velu-footer__column-title">{col.title}</span>
-              <Stack space="var(--s-5)" as="ul" className="velu-footer__list">
-                {(col.items ?? []).map((it, j) => (
-                  <li key={j}>
-                    <Link
-                      href={it.href ?? '#'}
-                      className="velu-footer__link"
-                    >
-                      {it.label}
-                    </Link>
-                  </li>
-                ))}
-              </Stack>
-            </Stack>
-          ))}
-        </div>
-      </Stack>
-
-      {/* Socials sit OUTSIDE the container, at the bottom of the footer. */}
-      {socials.length > 0 && (
-        <Cluster
-          space="var(--s-2)"
-          justify="center"
-          align="center"
-          className="velu-footer__socials"
-        >
-          {socials.map((s, i) => {
-            const Icon = SOCIAL_ICONS[s.kind];
-            if (!Icon) return null;
-            return (
-              <a
-                key={i}
-                href={s.href}
-                target="_blank"
-                rel="noreferrer"
-                aria-label={SOCIAL_LABELS[s.kind] ?? s.kind}
-                className="velu-footer__social"
-                data-kind={s.kind}
-              >
-                <Icon />
-              </a>
-            );
-          })}
-        </Cluster>
-      )}
-    </Stack>
-  );
-}
+import React from 'react';
+import Stack from '../primitives/Stack.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+
+/**
+ * PageFooter — the docs site's footer.
+ *
+ *   <PageFooter
+ *     linkComponent={RouterLink}
+ *     columns={[
+ *       { title: 'Resources', items: [
+ *         { label: 'Showcase',   href: '/showcase' },
+ *         { label: 'Enterprise', href: '/enterprise' },
+ *         { label: 'Status',     href: '/status' },
+ *       ]},
+ *       { title: 'Company',  items: […] },
+ *       { title: 'Policies', items: […] },
+ *     ]}
+ *     socials={[
+ *       { kind: 'github',   href: 'https://github.com/…'   },
+ *       { kind: 'x',        href: 'https://x.com/…'        },
+ *       { kind: 'youtube',  href: 'https://youtube.com/…'  },
+ *       { kind: 'linkedin', href: 'https://linkedin.com/…' },
+ *     ]}
+ *   />
+ *
+ * Layout: a Switcher row of [brand | columns…] that flips to a vertical
+ * stack on narrow widths, with a centered social-icon row below. The
+ * number of link columns is whatever you pass — fully data-driven.
+ *
+ * @typedef {Object} FooterLink
+ * @property {string} label
+ * @property {string} [href]
+ *
+ * @typedef {Object} FooterColumn
+ * @property {string} title
+ * @property {FooterLink[]} items
+ *
+ * @typedef {Object} FooterSocial
+ * @property {'github'|'x'|'youtube'|'linkedin'} kind
+ * @property {string} href
+ *
+ * @param {{ columns?: FooterColumn[], socials?: FooterSocial[],
+ *           brand?: { label?: string, href?: string },
+ *           linkComponent?: React.ElementType, className?: string }} props
+ */
+
+/* ── Brand mark — the Velu double-hook logo. Color: currentColor for
+   the surrounding wordmark; the mark itself uses --accent-color via
+   the wrapping span. ───────────────────────────────────────────────── */
+function VeluMark() {
+  return (
+    <svg
+      className="velu-footer__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.553L9.61081 13.5538Z"
+      />
+    </svg>
+  );
+}
+
+/* ── Social glyphs — inline SVGs with fill: currentColor so they
+   inherit color (themed) and flip with light/dark. ─────────────────── */
+function GithubIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg viewBox="0 0 1200 1227" fill="currentColor" aria-hidden="true">
+      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
+    </svg>
+  );
+}
+function YoutubeIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+}
+function LinkedinIcon() {
+  return (
+    <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  github: GithubIcon,
+  x: XIcon,
+  youtube: YoutubeIcon,
+  linkedin: LinkedinIcon,
+};
+const SOCIAL_LABELS = {
+  github: 'GitHub',
+  x: 'X',
+  youtube: 'YouTube',
+  linkedin: 'LinkedIn',
+};
+
+export default function PageFooter({
+  brand,
+  columns = [],
+  socials = [],
+  linkComponent = 'a',
+  className = '',
+  ...rest
+}) {
+  const Link = linkComponent;
+  const brandLabel = brand?.label ?? 'Velu';
+  const brandHref = brand?.href;
+
+  const brandNode = (
+    <Cluster space="var(--s-3)" align="center" className="velu-footer__brand">
+      <VeluMark />
+      <span className="velu-footer__wordmark">{brandLabel}</span>
+    </Cluster>
+  );
+
+  return (
+    <Stack
+      as="footer"
+      space="var(--s2)"
+      className={`velu-footer ${className}`.trim()}
+      {...rest}
+    >
+      {/* Container groups the brand row and the columns row. */}
+      <Stack space="var(--s2)" className="velu-footer__container">
+        {/* Row 1: brand */}
+        <div className="velu-footer__row velu-footer__row--brand">
+          {brandHref ? (
+            <Link href={brandHref} className="velu-footer__brand-link">
+              {brandNode}
+            </Link>
+          ) : (
+            brandNode
+          )}
+        </div>
+
+        {/* Row 2: link columns — each column hugs its content. Plain
+            flex row (not Cluster) so column-gap (large, between
+            columns) and row-gap (small, when columns wrap onto a new
+            line) can be set independently. CSS owns the gaps. */}
+        <div className="velu-footer__row velu-footer__row--columns">
+          {columns.map((col, i) => (
+            <Stack
+              key={i}
+              space="var(--s-2)"
+              className="velu-footer__column"
+            >
+              <span className="velu-footer__column-title">{col.title}</span>
+              <Stack space="var(--s-5)" as="ul" className="velu-footer__list">
+                {(col.items ?? []).map((it, j) => (
+                  <li key={j}>
+                    <Link
+                      href={it.href ?? '#'}
+                      className="velu-footer__link"
+                    >
+                      {it.label}
+                    </Link>
+                  </li>
+                ))}
+              </Stack>
+            </Stack>
+          ))}
+        </div>
+      </Stack>
+
+      {/* Socials sit OUTSIDE the container, at the bottom of the footer. */}
+      {socials.length > 0 && (
+        <Cluster
+          space="var(--s-2)"
+          justify="center"
+          align="center"
+          className="velu-footer__socials"
+        >
+          {socials.map((s, i) => {
+            const Icon = SOCIAL_ICONS[s.kind];
+            if (!Icon) return null;
+            return (
+              <a
+                key={i}
+                href={s.href}
+                target="_blank"
+                rel="noreferrer"
+                aria-label={SOCIAL_LABELS[s.kind] ?? s.kind}
+                className="velu-footer__social"
+                data-kind={s.kind}
+              >
+                <Icon />
+              </a>
+            );
+          })}
+        </Cluster>
+      )}
+    </Stack>
+  );
+}