@nous-research/ui 0.13.2 → 0.14.1

package/dist/ui/components/watchlist.js

@@ -1,27 +1,79 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../utils';
-import { Scramble } from './ascii';
-import { LinkIcon } from './icons';
-import { Typography } from './typography';
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+import { Scramble } from "./ascii.js";
+import { LinkIcon } from "./icons/index.js";
+import { Typography } from "./typography/index.js";
 const ETH_RE = /^0x[a-fA-F0-9]{40}$/;
-const truncate = (a) => `${a.slice(0, 6)}${'·'.repeat(8)}${a.slice(-4)}`;
-export function Watchlist({ className, counter = false, items, scramble = false, ...props }) {
-    return (_jsx("div", { className: cn('flex flex-col gap-3', className), ...props, children: items.map(({ label, right, url }, i) => {
-            const isStr = typeof label === 'string';
-            const eth = isStr && ETH_RE.test(label);
-            const text = eth ? truncate(label) : label;
-            return (_jsxs("a", { className: cn('grid items-center gap-2.5 px-2.5 py-1.5', 'leading-[1.4] uppercase', 'hover:bg-midground/10! hover:ring-2 hover:ring-current/20', 'transition-all duration-500 hover:duration-0', 'opacity-(--midground-alpha)'), href: url, rel: "noopener noreferrer", style: {
-                    background: `color-mix(in oklch, var(--color-midground) ${10 * Math.max(0, 1 - i / 9)}%, transparent)`,
-                    gridTemplateColumns: [
-                        counter && 'auto auto',
-                        '1fr',
-                        right && 'auto',
-                        url && 'auto auto'
-                    ]
-                        .filter(Boolean)
-                        .join(' ')
-                }, target: "_blank", children: [counter && (_jsxs(_Fragment, { children: [_jsx(Typography, { className: "text-lg tracking-[0.35em] opacity-40", compressed: true, children: String(i + 1).padStart(2, '0') }), _jsx("span", { className: "text-[0.8125rem] font-bold tracking-[0.4em] opacity-20", children: ":" })] })), isStr ? (_jsx(Typography, { className: "min-w-0 overflow-hidden text-lg font-bold tracking-[0.35em]", ...(eth ? { mono: true } : { compressed: true }), children: scramble ? _jsx(Scramble, { delay: i * 80, text: text }) : text })) : (label), right && (_jsx(Typography, { className: "text-right text-sm tracking-widest opacity-40", mono: true, children: right })), url && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[0.8125rem] tracking-[0.4em] opacity-20", children: ":" }), _jsx(LinkIcon, { className: "text-midground size-3.5" })] }))] }, i));
-        }) }));
+const truncate = (a) => `${a.slice(0, 6)}${"\xB7".repeat(8)}${a.slice(-4)}`;
+export function Watchlist({
+  className,
+  counter = false,
+  items,
+  scramble = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), ...props, children: items.map(({ label, right, url }, i) => {
+    const isStr = typeof label === "string";
+    const eth = isStr && ETH_RE.test(label);
+    const text = eth ? truncate(label) : label;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: cn(
+          "grid items-center gap-2.5 px-2.5 py-1.5",
+          "leading-[1.4] uppercase",
+          "hover:bg-midground/10! hover:ring-2 hover:ring-current/20",
+          "transition-all duration-500 hover:duration-0",
+          "opacity-(--midground-alpha)"
+        ),
+        href: url,
+        rel: "noopener noreferrer",
+        style: {
+          background: `color-mix(in oklch, var(--color-midground) ${10 * Math.max(0, 1 - i / 9)}%, transparent)`,
+          gridTemplateColumns: [
+            counter && "auto auto",
+            "1fr",
+            right && "auto",
+            url && "auto auto"
+          ].filter(Boolean).join(" ")
+        },
+        target: "_blank",
+        children: [
+          counter && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                className: "text-lg tracking-[0.35em] opacity-40",
+                compressed: true,
+                children: String(i + 1).padStart(2, "0")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] font-bold tracking-[0.4em] opacity-20", children: ":" })
+          ] }),
+          isStr ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "min-w-0 overflow-hidden text-lg font-bold tracking-[0.35em]",
+              ...eth ? { mono: true } : { compressed: true },
+              children: scramble ? /* @__PURE__ */ jsx(Scramble, { delay: i * 80, text }) : text
+            }
+          ) : label,
+          right && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "text-right text-sm tracking-widest opacity-40",
+              mono: true,
+              children: right
+            }
+          ),
+          url && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] tracking-[0.4em] opacity-20", children: ":" }),
+            /* @__PURE__ */ jsx(LinkIcon, { className: "text-midground size-3.5" })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
 }
-//# sourceMappingURL=watchlist.js.map

package/dist/ui/fonts.css

@@ -3,7 +3,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Collapse-Regular.woff2) format('woff2');
+  src: url('../fonts/Collapse-Regular.woff2') format('woff2');
 }
 
 @font-face {
@@ -11,7 +11,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/Collapse-Bold.woff2) format('woff2');
+  src: url('../fonts/Collapse-Bold.woff2') format('woff2');
 }
 
 @font-face {
@@ -19,7 +19,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/RulesCompressed-Regular.woff2) format('woff2');
+  src: url('../fonts/RulesCompressed-Regular.woff2') format('woff2');
 }
 
 @font-face {
@@ -27,7 +27,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/RulesCompressed-Medium.woff2) format('woff2');
+  src: url('../fonts/RulesCompressed-Medium.woff2') format('woff2');
 }
 
 @font-face {
@@ -35,7 +35,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/RulesExpanded-Regular.woff2) format('woff2');
+  src: url('../fonts/RulesExpanded-Regular.woff2') format('woff2');
 }
 
 @font-face {
@@ -43,7 +43,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/RulesExpanded-Bold.woff2) format('woff2');
+  src: url('../fonts/RulesExpanded-Bold.woff2') format('woff2');
 }
 
 @font-face {
@@ -51,7 +51,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Mondwest-Regular.woff2) format('woff2');
+  src: url('../fonts/Mondwest-Regular.woff2') format('woff2');
 }
 
 :root {

package/dist/ui/footer.d.ts

@@ -1,5 +1,5 @@
 import { type SocialLink } from './components/socials';
-export declare function Footer({ className, groups, LinkComponent, socials, socialsLabel, style, themeLabel, themeToggle }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ className, groups, LinkComponent, socials, socialsLabel, style, themeLabel, themeToggle }: FooterProps): import("react").JSX.Element;
 export interface FooterGroup {
     label: string;
     links: (FooterLink | string)[];
@@ -18,4 +18,3 @@ export interface FooterProps {
     themeLabel?: string;
     themeToggle?: boolean;
 }
-//# sourceMappingURL=footer.d.ts.map

package/dist/ui/footer.js

@@ -1,28 +1,64 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useCssVarDims } from '../hooks/use-css-var-dims';
-import { Cell, Grid } from './components/grid';
-import { Socials } from './components/socials';
-import { ThemeToggle } from './components/theme-toggle';
-import { Small } from './components/typography/small';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useCssVarDims } from "../hooks/use-css-var-dims.js";
+import { Cell, Grid } from "./components/grid/index.js";
+import { Socials } from "./components/socials.js";
+import { ThemeToggle } from "./components/theme-toggle.js";
+import { Small } from "./components/typography/small.js";
 const DEFAULT_GROUPS = [
-    { label: 'Product', links: ['Overview', 'Features', 'Pricing'] },
-    { label: 'Resources', links: ['Docs', 'Blog', 'Support'] },
-    { label: 'Company', links: ['About', 'Careers', 'Contact'] },
-    { label: 'Legal', links: ['Privacy', 'Terms', 'License'] }
+  { label: "Product", links: ["Overview", "Features", "Pricing"] },
+  { label: "Resources", links: ["Docs", "Blog", "Support"] },
+  { label: "Company", links: ["About", "Careers", "Contact"] },
+  { label: "Legal", links: ["Privacy", "Terms", "License"] }
 ];
-export function Footer({ className, groups = DEFAULT_GROUPS, LinkComponent = 'a', socials, socialsLabel = 'Socials', style, themeLabel = 'Theme', themeToggle = false }) {
-    const ref = useRef(null);
-    useCssVarDims('footer', ref);
-    const hasSocials = (socials?.length ?? 0) > 0;
-    const hasChrome = hasSocials || themeToggle;
-    return (_jsxs("footer", { className: className, ref: ref, style: style, children: [_jsxs(Grid, { children: [_jsx(Cell, { children: _jsxs(Small, { className: "opacity-50", children: ["\u00A9", new Date().getFullYear()] }) }), groups.map(({ label, links }) => (_jsxs(Cell, { children: [_jsx(Small, { className: "opacity-50", children: label }), _jsx("nav", { className: "mt-3 flex flex-col gap-2", children: links.map(link => {
-                                    const href = typeof link === 'string'
-                                        ? `/${link.toLowerCase()}`
-                                        : link.href;
-                                    const label = typeof link === 'string' ? link : link.label;
-                                    return (_jsx(Small, { as: LinkComponent, className: "underline", href: href, children: label }, label));
-                                }) })] }, label)))] }), hasChrome && (_jsxs(Grid, { children: [hasSocials && (_jsxs(Cell, { className: "flex items-start justify-between", children: [_jsx(Small, { className: "opacity-50", children: socialsLabel }), _jsx(Socials, { items: socials })] })), themeToggle && (_jsxs(Cell, { className: "flex items-start justify-between", children: [_jsx(Small, { className: "opacity-50", children: themeLabel }), _jsx(ThemeToggle, {})] }))] }))] }));
+export function Footer({
+  className,
+  groups = DEFAULT_GROUPS,
+  LinkComponent = "a",
+  socials,
+  socialsLabel = "Socials",
+  style,
+  themeLabel = "Theme",
+  themeToggle = false
+}) {
+  const ref = useRef(null);
+  useCssVarDims("footer", ref);
+  const hasSocials = (socials?.length ?? 0) > 0;
+  const hasChrome = hasSocials || themeToggle;
+  return /* @__PURE__ */ jsxs("footer", { className, ref, style, children: [
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Small, { className: "opacity-50", children: [
+        "\xA9",
+        (/* @__PURE__ */ new Date()).getFullYear()
+      ] }) }),
+      groups.map(({ label, links }) => /* @__PURE__ */ jsxs(Cell, { children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: label }),
+        /* @__PURE__ */ jsx("nav", { className: "mt-3 flex flex-col gap-2", children: links.map((link) => {
+          const href = typeof link === "string" ? `/${link.toLowerCase()}` : link.href;
+          const label2 = typeof link === "string" ? link : link.label;
+          return /* @__PURE__ */ jsx(
+            Small,
+            {
+              as: LinkComponent,
+              className: "underline",
+              href,
+              children: label2
+            },
+            label2
+          );
+        }) })
+      ] }, label))
+    ] }),
+    hasChrome && /* @__PURE__ */ jsxs(Grid, { children: [
+      hasSocials && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: socialsLabel }),
+        /* @__PURE__ */ jsx(Socials, { items: socials })
+      ] }),
+      themeToggle && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: themeLabel }),
+        /* @__PURE__ */ jsx(ThemeToggle, {})
+      ] })
+    ] })
+  ] });
 }
-//# sourceMappingURL=footer.js.map

package/dist/ui/globals.css

@@ -1,5 +1,4 @@
 @source ".";
-@import './fonts.css';
 @import './components/fit-text/fit-text.css' layer(components);
 @import './components/grid/grid.css' layer(components);
 @import './components/modal/modal.css' layer(components);
@@ -145,6 +144,11 @@
   --foreground: color-mix(in srgb, #fff 100%, transparent);
   --foreground-base: #fff;
   --foreground-alpha: 1;
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
   --vsq: calc(0.5vw + 0.5vh);
 }
 

package/dist/ui/header.d.ts

@@ -1,5 +1,5 @@
 import { type SocialLink } from './components/socials';
-export declare function Header({ brand, brandHref, className, desktopGridStyle, links, LinkComponent, scramble: scrambleProp, socials, socialsLabel, style, themeLabel, themeToggle }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ brand, brandHref, className, desktopGridStyle, links, LinkComponent, scramble: scrambleProp, socials, socialsLabel, style, themeLabel, themeToggle }: HeaderProps): import("react").JSX.Element;
 export interface HeaderLink {
     external?: boolean;
     href: string;
@@ -39,4 +39,3 @@ export interface HeaderProps {
 }
 /** @deprecated Use `SocialLink` from `@nous-research/ui`. Same shape. */
 export type HeaderSocial = SocialLink;
-//# sourceMappingURL=header.d.ts.map

package/dist/ui/header.js

@@ -1,74 +1,269 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AnimatePresence, motion } from 'motion/react';
-import { createElement, useCallback, useRef, useState } from 'react';
-import { useCssVarDims } from '../hooks/use-css-var-dims';
-import { useGpuTier } from '../hooks/use-gpu-tier';
-import { cn } from '../utils';
-import { Blink } from './components/blink';
-import { Cell, Grid } from './components/grid';
-import { HoverBg } from './components/hover-bg';
-import { HamburgerIcon } from './components/icons/hamburger';
-import { Scramble } from './components/scramble';
-import { Socials } from './components/socials';
-import { ThemeToggle } from './components/theme-toggle';
-import { H2 } from './components/typography/h2';
-import { Small } from './components/typography/small';
-const DEFAULT_BRAND = (_jsxs("hgroup", { className: "flex flex-col gap-2", children: [_jsx(Small, { children: "Nous" }), _jsx(H2, { children: "Research" })] }));
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { createElement, useCallback, useRef, useState } from "react";
+import { useCssVarDims } from "../hooks/use-css-var-dims.js";
+import { useGpuTier } from "../hooks/use-gpu-tier.js";
+import { cn } from "../utils/index.js";
+import { Blink } from "./components/blink.js";
+import { Cell, Grid } from "./components/grid/index.js";
+import { HoverBg } from "./components/hover-bg.js";
+import { HamburgerIcon } from "./components/icons/hamburger.js";
+import { Scramble } from "./components/scramble.js";
+import { Socials } from "./components/socials.js";
+import { ThemeToggle } from "./components/theme-toggle.js";
+import { H2 } from "./components/typography/h2.js";
+import { Small } from "./components/typography/small.js";
+const DEFAULT_BRAND = /* @__PURE__ */ jsxs("hgroup", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ jsx(Small, { children: "Nous" }),
+  /* @__PURE__ */ jsx(H2, { children: "Research" })
+] });
 const DEFAULT_LINKS = [
-    { href: '/projects', label: 'Projects' },
-    { href: '/participants', label: 'Participants' },
-    { href: '/provenance', label: 'Provenance' },
-    { href: '/contribute', label: 'Contribute' }
+  { href: "/projects", label: "Projects" },
+  { href: "/participants", label: "Participants" },
+  { href: "/provenance", label: "Provenance" },
+  { href: "/contribute", label: "Contribute" }
 ];
-export function Header({ brand = DEFAULT_BRAND, brandHref = '/', className, desktopGridStyle, links = DEFAULT_LINKS, LinkComponent = 'a', scramble: scrambleProp = true, socials, socialsLabel = 'Socials', style, themeLabel = 'Theme', themeToggle = false }) {
-    const ref = useRef(null);
-    useCssVarDims('header', ref);
-    // Skip the hover-Scramble rAF loop on tier-0 devices (no GPU / software
-    // renderer / `prefers-reduced-motion: reduce`) regardless of the prop.
-    const gpuTier = useGpuTier();
-    const scramble = scrambleProp && gpuTier > 0;
-    const [open, setOpen] = useState(false);
-    const close = useCallback(() => setOpen(false), []);
-    const hasSocials = (socials?.length ?? 0) > 0;
-    const hasMobileChrome = themeToggle || hasSocials;
-    return (_jsxs("header", { className: className, ref: ref, style: style, children: [_jsxs(Grid, { className: "hidden border-t border-b lg:grid", style: desktopGridStyle, children: [_jsx(BrandCell, { brand: brand, href: brandHref, LinkComponent: LinkComponent }), links.map(link => (_jsx(NavCell, { link: link, LinkComponent: LinkComponent, scramble: scramble }, link.href))), hasSocials && (_jsxs(Cell, { className: "flex items-start justify-between", children: [_jsx(Small, { className: "opacity-50", children: socialsLabel }), _jsx(Socials, { items: socials })] })), themeToggle && (_jsxs(Cell, { className: "flex items-start justify-between", children: [_jsx(Small, { className: "opacity-50", children: themeLabel }), _jsx(ThemeToggle, {})] }))] }), _jsxs("div", { className: cn('flex items-center justify-between border border-current/20 p-4', 'lg:hidden'), children: [_jsx(BrandLink, { brand: brand, href: brandHref, LinkComponent: LinkComponent }), _jsxs("div", { className: "flex items-center gap-3", children: [themeToggle && _jsx(ThemeToggle, {}), _jsx("button", { "aria-label": open ? 'Close menu' : 'Open menu', className: "relative z-50 cursor-pointer bg-transparent p-2", onClick: () => setOpen(v => !v), type: "button", children: _jsx(HamburgerIcon, { open: open }) })] })] }), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, { animate: { opacity: 1 }, className: cn('bg-background/95 fixed inset-0 z-50 flex flex-col backdrop-blur-sm', 'p-8 lg:hidden'), exit: { opacity: 0 }, initial: { opacity: 0 }, transition: { duration: 0.2 }, children: _jsxs("div", { className: "flex flex-col border border-current/20", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-current/20 p-4", children: [_jsx(BrandLink, { brand: brand, href: brandHref, LinkComponent: LinkComponent, onClick: close }), _jsx("button", { "aria-label": "Close menu", className: "cursor-pointer bg-transparent p-2", onClick: close, type: "button", children: _jsx(HamburgerIcon, { open: true }) })] }), links.map(link => (_jsx(MobileNavLink, { link: link, LinkComponent: LinkComponent, onNavigate: close, scramble: scramble }, link.href))), hasMobileChrome && (_jsxs("div", { className: "flex items-center gap-3 border-b border-current/20 p-4", children: [hasSocials && (_jsxs(_Fragment, { children: [_jsx(Small, { className: "opacity-50", children: socialsLabel }), _jsx(Socials, { items: socials, onNavigate: close })] })), themeToggle && hasSocials && _jsx("span", { className: "flex-1" }), themeToggle && (_jsxs(_Fragment, { children: [_jsx(Small, { className: "opacity-50", children: themeLabel }), _jsx(ThemeToggle, {})] }))] }))] }) })) })] }));
+export function Header({
+  brand = DEFAULT_BRAND,
+  brandHref = "/",
+  className,
+  desktopGridStyle,
+  links = DEFAULT_LINKS,
+  LinkComponent = "a",
+  scramble: scrambleProp = true,
+  socials,
+  socialsLabel = "Socials",
+  style,
+  themeLabel = "Theme",
+  themeToggle = false
+}) {
+  const ref = useRef(null);
+  useCssVarDims("header", ref);
+  const gpuTier = useGpuTier();
+  const scramble = scrambleProp && gpuTier > 0;
+  const [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  const hasSocials = (socials?.length ?? 0) > 0;
+  const hasMobileChrome = themeToggle || hasSocials;
+  return /* @__PURE__ */ jsxs("header", { className, ref, style, children: [
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        className: "hidden border-t border-b lg:grid",
+        style: desktopGridStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            BrandCell,
+            {
+              brand,
+              href: brandHref,
+              LinkComponent
+            }
+          ),
+          links.map((link) => /* @__PURE__ */ jsx(
+            NavCell,
+            {
+              link,
+              LinkComponent,
+              scramble
+            },
+            link.href
+          )),
+          hasSocials && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+            /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: socialsLabel }),
+            /* @__PURE__ */ jsx(Socials, { items: socials })
+          ] }),
+          themeToggle && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+            /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: themeLabel }),
+            /* @__PURE__ */ jsx(ThemeToggle, {})
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between border border-current/20 p-4",
+          "lg:hidden"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            BrandLink,
+            {
+              brand,
+              href: brandHref,
+              LinkComponent
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            themeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": open ? "Close menu" : "Open menu",
+                className: "relative z-50 cursor-pointer bg-transparent p-2",
+                onClick: () => setOpen((v) => !v),
+                type: "button",
+                children: /* @__PURE__ */ jsx(HamburgerIcon, { open })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: { opacity: 1 },
+        className: cn(
+          "bg-background/95 fixed inset-0 z-50 flex flex-col backdrop-blur-sm",
+          "p-8 lg:hidden"
+        ),
+        exit: { opacity: 0 },
+        initial: { opacity: 0 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col border border-current/20", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-current/20 p-4", children: [
+            /* @__PURE__ */ jsx(
+              BrandLink,
+              {
+                brand,
+                href: brandHref,
+                LinkComponent,
+                onClick: close
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": "Close menu",
+                className: "cursor-pointer bg-transparent p-2",
+                onClick: close,
+                type: "button",
+                children: /* @__PURE__ */ jsx(HamburgerIcon, { open: true })
+              }
+            )
+          ] }),
+          links.map((link) => /* @__PURE__ */ jsx(
+            MobileNavLink,
+            {
+              link,
+              LinkComponent,
+              onNavigate: close,
+              scramble
+            },
+            link.href
+          )),
+          hasMobileChrome && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-current/20 p-4", children: [
+            hasSocials && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: socialsLabel }),
+              /* @__PURE__ */ jsx(Socials, { items: socials, onNavigate: close })
+            ] }),
+            themeToggle && hasSocials && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            themeToggle && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: themeLabel }),
+              /* @__PURE__ */ jsx(ThemeToggle, {})
+            ] })
+          ] })
+        ] })
+      }
+    ) })
+  ] });
 }
 function BrandCell({ brand, href, LinkComponent }) {
-    return isExternal(href) ? (_jsx(Cell, { href: href, ...EXTERNAL_REL, as: "a", children: brand })) : (_jsx(Cell, { as: LinkComponent, href: href, children: brand }));
+  return isExternal(href) ? /* @__PURE__ */ jsx(Cell, { href, ...EXTERNAL_REL, as: "a", children: brand }) : /* @__PURE__ */ jsx(Cell, { as: LinkComponent, href, children: brand });
 }
 function BrandLink({ brand, href, LinkComponent, onClick }) {
-    if (isExternal(href)) {
-        return (_jsx("a", { href: href, onClick: onClick, ...EXTERNAL_REL, children: brand }));
-    }
-    return createElement(LinkComponent, { href, onClick }, brand);
+  if (isExternal(href)) {
+    return /* @__PURE__ */ jsx("a", { href, onClick, ...EXTERNAL_REL, children: brand });
+  }
+  return createElement(
+    LinkComponent,
+    { href, onClick },
+    brand
+  );
 }
 function NavCell({ link, LinkComponent, scramble }) {
-    const ref = useRef(null);
-    const isExt = link.external ?? isExternal(link.href);
-    const inner = (_jsxs(_Fragment, { children: [_jsxs(Small, { children: [scramble ? (_jsx(Scramble, { target: ref, children: link.label })) : (link.label), _jsx(Blink, {})] }), _jsx(HoverBg, {})] }));
-    if (isExt) {
-        return (_jsx(Cell, { as: "a", className: "group relative cursor-pointer", href: link.href, onClick: link.onClick, ref: ref, ...EXTERNAL_REL, children: inner }));
+  const ref = useRef(null);
+  const isExt = link.external ?? isExternal(link.href);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Small, { children: [
+      scramble ? /* @__PURE__ */ jsx(Scramble, { target: ref, children: link.label }) : link.label,
+      /* @__PURE__ */ jsx(Blink, {})
+    ] }),
+    /* @__PURE__ */ jsx(HoverBg, {})
+  ] });
+  if (isExt) {
+    return /* @__PURE__ */ jsx(
+      Cell,
+      {
+        as: "a",
+        className: "group relative cursor-pointer",
+        href: link.href,
+        onClick: link.onClick,
+        ref,
+        ...EXTERNAL_REL,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Cell,
+    {
+      as: LinkComponent,
+      className: "group relative cursor-pointer",
+      href: link.href,
+      onClick: link.onClick,
+      ref,
+      children: inner
     }
-    return (_jsx(Cell, { as: LinkComponent, className: "group relative cursor-pointer", href: link.href, onClick: link.onClick, ref: ref, children: inner }));
+  );
 }
-function MobileNavLink({ link, LinkComponent, onNavigate, scramble }) {
-    const ref = useRef(null);
-    const isExt = link.external ?? isExternal(link.href);
-    const className = cn('group relative flex cursor-pointer items-center border-b border-current/20 p-4');
-    const onClick = (e) => {
-        link.onClick?.(e);
-        onNavigate();
-    };
-    const children = (_jsxs(_Fragment, { children: [_jsxs(Small, { children: [scramble ? (_jsx(Scramble, { target: ref, children: link.label })) : (link.label), _jsx(Blink, {})] }), _jsx(HoverBg, {})] }));
-    if (isExt) {
-        return (_jsx("a", { className: className, href: link.href, onClick: onClick, ref: ref, ...EXTERNAL_REL, children: children }));
-    }
-    return createElement(LinkComponent, { className, href: link.href, onClick, ref }, children);
+function MobileNavLink({
+  link,
+  LinkComponent,
+  onNavigate,
+  scramble
+}) {
+  const ref = useRef(null);
+  const isExt = link.external ?? isExternal(link.href);
+  const className = cn(
+    "group relative flex cursor-pointer items-center border-b border-current/20 p-4"
+  );
+  const onClick = (e) => {
+    link.onClick?.(e);
+    onNavigate();
+  };
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Small, { children: [
+      scramble ? /* @__PURE__ */ jsx(Scramble, { target: ref, children: link.label }) : link.label,
+      /* @__PURE__ */ jsx(Blink, {})
+    ] }),
+    /* @__PURE__ */ jsx(HoverBg, {})
+  ] });
+  if (isExt) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className,
+        href: link.href,
+        onClick,
+        ref,
+        ...EXTERNAL_REL,
+        children
+      }
+    );
+  }
+  return createElement(
+    LinkComponent,
+    { className, href: link.href, onClick, ref },
+    children
+  );
 }
 const EXTERNAL_REL = {
-    rel: 'noopener noreferrer',
-    target: '_blank'
+  rel: "noopener noreferrer",
+  target: "_blank"
 };
 const isExternal = (href) => /^(https?:|mailto:|tel:)/i.test(href);
-//# sourceMappingURL=header.js.map

package/dist/ui/layout-wrapper.d.ts

@@ -1,2 +1 @@
-export declare function LayoutWrapper({ children }: Readonly<React.PropsWithChildren>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=layout-wrapper.d.ts.map
+export declare function LayoutWrapper({ children }: Readonly<React.PropsWithChildren>): import("react").JSX.Element;