aura-ui-library 1.0.1

package/dist/index.mjs

@@ -0,0 +1,3674 @@
+// src/components/Button/MagneticButton.jsx
+import React, { useState, useEffect, useRef, useCallback } from "react";
+var injectStyles = () => {
+  const id = "mb-global-v2";
+  if (document.getElementById(id)) return;
+  const s = document.createElement("style");
+  s.id = id;
+  s.innerHTML = `
+    @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
+
+    .mb-root *, .mb-root *::before, .mb-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    @keyframes mb-reveal    { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
+    @keyframes mb-shimmer   { from { transform:translateX(-120%) skewX(-15deg); } to { transform:translateX(220%) skewX(-15deg); } }
+    @keyframes mb-spin      { to   { transform:rotate(360deg); } }
+    @keyframes mb-tick      { 0%{stroke-dashoffset:24} 100%{stroke-dashoffset:0} }
+    @keyframes mb-burst     { 0%{transform:scale(0) translate(-50%,-50%);opacity:1} 100%{transform:scale(2.8) translate(-50%,-50%);opacity:0} }
+    @keyframes mb-particle  { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:var(--tx,0) var(--ty,0) scale(0)} }
+    @keyframes mb-pulse-ring{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.9);opacity:0} }
+    @keyframes mb-float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+    @keyframes mb-error-shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
+
+    @media (prefers-reduced-motion: reduce) {
+      .mb-root, .mb-root * { animation: none !important; transition: none !important; }
+    }
+  `;
+  document.head.appendChild(s);
+};
+var PRESETS = {
+  obsidian: {
+    bg: "linear-gradient(135deg,#1a1a2e,#16213e)",
+    glow: "rgba(99,102,241,.55)",
+    border: "rgba(99,102,241,.25)",
+    text: "#fff",
+    shimmer: "rgba(255,255,255,.12)"
+  },
+  crimson: {
+    bg: "linear-gradient(135deg,#7f0000,#c0392b)",
+    glow: "rgba(231,76,60,.6)",
+    border: "rgba(231,76,60,.3)",
+    text: "#fff",
+    shimmer: "rgba(255,255,255,.15)"
+  },
+  aurora: {
+    bg: "linear-gradient(135deg,#0d7377,#14a085)",
+    glow: "rgba(20,160,133,.6)",
+    border: "rgba(20,160,133,.3)",
+    text: "#fff",
+    shimmer: "rgba(255,255,255,.15)"
+  },
+  solar: {
+    bg: "linear-gradient(135deg,#e67e22,#f39c12)",
+    glow: "rgba(243,156,18,.65)",
+    border: "rgba(243,156,18,.3)",
+    text: "#1a1a1a",
+    shimmer: "rgba(255,255,255,.2)"
+  },
+  void: {
+    bg: "linear-gradient(135deg,#0f0f0f,#1a1a1a)",
+    glow: "rgba(255,255,255,.15)",
+    border: "rgba(255,255,255,.1)",
+    text: "#fff",
+    shimmer: "rgba(255,255,255,.07)"
+  },
+  neon: {
+    bg: "transparent",
+    glow: "rgba(0,255,170,.5)",
+    border: "rgba(0,255,170,.6)",
+    text: "#00ffaa",
+    shimmer: "rgba(0,255,170,.15)"
+  }
+};
+var SIZES = {
+  sm: {
+    padding: "9px 22px",
+    fontSize: "12px",
+    gap: 6,
+    iconSize: 13,
+    loaderSize: 13
+  },
+  md: {
+    padding: "13px 30px",
+    fontSize: "14px",
+    gap: 8,
+    iconSize: 15,
+    loaderSize: 15
+  },
+  lg: {
+    padding: "16px 40px",
+    fontSize: "16px",
+    gap: 10,
+    iconSize: 17,
+    loaderSize: 17
+  },
+  xl: {
+    padding: "20px 52px",
+    fontSize: "18px",
+    gap: 12,
+    iconSize: 20,
+    loaderSize: 20
+  }
+};
+var lerp = (a, b, t) => a + (b - a) * t;
+var clamp = (v, mn, mx) => Math.min(Math.max(v, mn), mx);
+var Loader = ({ size = 15, color = "#fff" }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: { animation: "mb-spin .7s linear infinite", flexShrink: 0 }
+  },
+  /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: color,
+      strokeOpacity: ".25",
+      strokeWidth: "3"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M12 2a10 10 0 0 1 10 10",
+      stroke: color,
+      strokeWidth: "3",
+      strokeLinecap: "round"
+    }
+  )
+);
+var TickIcon = ({ size = 15, color = "#fff" }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: { flexShrink: 0 }
+  },
+  /* @__PURE__ */ React.createElement(
+    "polyline",
+    {
+      points: "20 6 9 17 4 12",
+      stroke: color,
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: "24",
+      strokeDashoffset: "0",
+      style: { animation: "mb-tick .35s ease forwards" }
+    }
+  )
+);
+var XIcon = ({ size = 15, color = "#fff" }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: { flexShrink: 0 }
+  },
+  /* @__PURE__ */ React.createElement(
+    "line",
+    {
+      x1: "18",
+      y1: "6",
+      x2: "6",
+      y2: "18",
+      stroke: color,
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "line",
+    {
+      x1: "6",
+      y1: "6",
+      x2: "18",
+      y2: "18",
+      stroke: color,
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  )
+);
+var Particles = ({ active, color }) => {
+  if (!active) return null;
+  const count = 8;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, Array.from({ length: count }).map((_, i) => {
+    const angle = 360 / count * i;
+    const dist = 40 + Math.random() * 20;
+    const tx = `translateX(${Math.cos(angle * Math.PI / 180) * dist}px)`;
+    const ty = `translateY(${Math.sin(angle * Math.PI / 180) * dist}px)`;
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        key: i,
+        "aria-hidden": true,
+        style: {
+          "--tx": tx,
+          "--ty": ty,
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: 5,
+          height: 5,
+          borderRadius: "50%",
+          background: color,
+          pointerEvents: "none",
+          zIndex: 20,
+          animation: `mb-particle .55s cubic-bezier(.22,1,.36,1) forwards`,
+          animationDelay: `${i * 18}ms`
+        }
+      }
+    );
+  }));
+};
+var MagneticButton = ({
+  label = "Click Me",
+  preset = "obsidian",
+  size = "md",
+  variant = "solid",
+  leftIcon,
+  rightIcon,
+  showArrow = true,
+  magnetStrength = 22,
+  loading = false,
+  success = false,
+  error = false,
+  disabled = false,
+  float = false,
+  pulseRing = false,
+  borderRadius = "999px",
+  onClick,
+  className = "",
+  style: styleProp = {}
+}) => {
+  const btnRef = useRef(null);
+  const wrapRef = useRef(null);
+  const rafRef = useRef(null);
+  const magnetPos = useRef({ x: 0, y: 0 });
+  const targetPos = useRef({ x: 0, y: 0 });
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [shimmer, setShimmer] = useState(false);
+  const [burst, setBurst] = useState(false);
+  const [magXY, setMagXY] = useState({ x: 0, y: 0 });
+  const p = PRESETS[preset] ?? PRESETS.obsidian;
+  const sz = SIZES[size] ?? SIZES.md;
+  const isLocked = disabled || loading;
+  useEffect(() => {
+    injectStyles();
+    const t = setTimeout(() => setVisible(true), 120);
+    return () => clearTimeout(t);
+  }, []);
+  const animateMagnet = useCallback(() => {
+    magnetPos.current.x = lerp(magnetPos.current.x, targetPos.current.x, 0.12);
+    magnetPos.current.y = lerp(magnetPos.current.y, targetPos.current.y, 0.12);
+    setMagXY({ x: magnetPos.current.x, y: magnetPos.current.y });
+    rafRef.current = requestAnimationFrame(animateMagnet);
+  }, []);
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (isLocked) return;
+      setHovered(true);
+      rafRef.current = requestAnimationFrame(animateMagnet);
+      setShimmer(false);
+      requestAnimationFrame(() => setShimmer(true));
+      setTimeout(() => setShimmer(false), 700);
+    },
+    [isLocked, animateMagnet]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (isLocked || !btnRef.current) return;
+      const r = btnRef.current.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const dx = e.clientX - cx;
+      const dy = e.clientY - cy;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const maxDist = Math.max(r.width, r.height);
+      const factor = clamp(1 - dist / maxDist, 0, 1);
+      targetPos.current = {
+        x: dx * factor * (magnetStrength / 20),
+        y: dy * factor * (magnetStrength / 20)
+      };
+    },
+    [isLocked, magnetStrength]
+  );
+  const handleMouseLeave = useCallback(() => {
+    setHovered(false);
+    setPressed(false);
+    targetPos.current = { x: 0, y: 0 };
+    const spring = () => {
+      magnetPos.current.x = lerp(magnetPos.current.x, 0, 0.18);
+      magnetPos.current.y = lerp(magnetPos.current.y, 0, 0.18);
+      setMagXY({ ...magnetPos.current });
+      if (Math.abs(magnetPos.current.x) > 0.1 || Math.abs(magnetPos.current.y) > 0.1) {
+        rafRef.current = requestAnimationFrame(spring);
+      } else {
+        magnetPos.current = { x: 0, y: 0 };
+        setMagXY({ x: 0, y: 0 });
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(spring);
+  }, []);
+  useEffect(() => () => cancelAnimationFrame(rafRef.current), []);
+  const handleClick = useCallback(
+    (e) => {
+      if (isLocked) return;
+      setBurst(true);
+      setTimeout(() => setBurst(false), 600);
+      onClick == null ? void 0 : onClick(e);
+    },
+    [isLocked, onClick]
+  );
+  const getBackground = () => {
+    if (variant === "ghost") return "transparent";
+    if (variant === "outline") return "transparent";
+    return p.bg;
+  };
+  const getBorder = () => {
+    if (variant === "ghost") return "1px solid transparent";
+    if (variant === "outline")
+      return `1.5px solid ${p.border.replace(".3)", ".7)")}`;
+    return `1px solid ${p.border}`;
+  };
+  const errorAnim = error ? "mb-error-shake .4s ease" : "none";
+  const floatAnim = float && !hovered && !error ? "mb-float 4s ease-in-out infinite" : "none";
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: visible ? 1 : 0,
+    animation: visible ? `mb-reveal .55s cubic-bezier(.22,1,.36,1) forwards` : "none"
+  };
+  const buttonStyle = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sz.gap,
+    padding: sz.padding,
+    fontSize: sz.fontSize,
+    fontFamily: "Syne, sans-serif",
+    fontWeight: 600,
+    letterSpacing: "0.04em",
+    color: success ? "#fff" : error ? "#fff" : p.text,
+    background: success ? "linear-gradient(135deg,#059669,#10b981)" : error ? "linear-gradient(135deg,#dc2626,#ef4444)" : getBackground(),
+    border: getBorder(),
+    borderRadius,
+    cursor: isLocked ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.42 : 1,
+    outline: "none",
+    overflow: "hidden",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    transform: `
+      translate(${magXY.x}px, ${magXY.y}px)
+      scale(${pressed ? 0.95 : hovered ? 1.04 : 1})
+      translateY(${hovered ? "-2px" : "0px"})
+    `,
+    transition: "background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .25s ease",
+    boxShadow: hovered && !isLocked ? `0 18px 45px -8px ${p.glow}, 0 0 0 1px ${p.border}` : pressed ? `0 4px 14px -4px ${p.glow}` : `0 6px 22px -6px rgba(0,0,0,.4)`,
+    animation: error ? errorAnim : floatAnim,
+    ...styleProp
+  };
+  const shimmerStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "55%",
+    height: "100%",
+    background: `linear-gradient(105deg, transparent 20%, ${p.shimmer} 50%, transparent 80%)`,
+    pointerEvents: "none",
+    zIndex: 3,
+    animation: shimmer ? "mb-shimmer .6s ease forwards" : "none"
+  };
+  const glassOverlayStyle = {
+    position: "absolute",
+    inset: 0,
+    background: "linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 55%)",
+    pointerEvents: "none",
+    zIndex: 1,
+    borderRadius
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: `mb-root ${className}`, style: wrapperStyle }, pulseRing && !hovered && !isLocked && /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        inset: -6,
+        borderRadius,
+        border: `1.5px solid ${p.border}`,
+        animation: "mb-pulse-ring 2s ease-out infinite",
+        pointerEvents: "none"
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref: btnRef,
+      style: buttonStyle,
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onMouseDown: () => !isLocked && setPressed(true),
+      onMouseUp: () => setPressed(false),
+      onClick: handleClick,
+      disabled,
+      "aria-busy": loading,
+      "aria-label": label
+    },
+    /* @__PURE__ */ React.createElement("div", { style: glassOverlayStyle }),
+    /* @__PURE__ */ React.createElement("div", { style: shimmerStyle }),
+    burst && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: "100%",
+          height: "100%",
+          borderRadius,
+          border: `2px solid ${p.border}`,
+          pointerEvents: "none",
+          zIndex: 15,
+          animation: "mb-burst .5s ease-out forwards"
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Particles,
+      {
+        active: burst,
+        color: p.text === "#fff" ? "rgba(255,255,255,.7)" : "rgba(0,0,0,.3)"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          position: "relative",
+          zIndex: 5,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: sz.gap,
+          transition: "transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease",
+          transform: `translateX(${hovered && showArrow && !loading && !success && !error ? "2px" : "0"})`,
+          opacity: loading ? 0.2 : 1
+        }
+      },
+      !loading && !success && !error && leftIcon && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            transition: "transform .35s cubic-bezier(.22,1,.36,1)",
+            transform: hovered ? "translateX(-2px) scale(1.1)" : "translateX(0) scale(1)"
+          }
+        },
+        leftIcon
+      ),
+      loading && /* @__PURE__ */ React.createElement(Loader, { size: sz.loaderSize, color: p.text }),
+      success && /* @__PURE__ */ React.createElement(TickIcon, { size: sz.iconSize, color: "#fff" }),
+      error && /* @__PURE__ */ React.createElement(XIcon, { size: sz.iconSize, color: "#fff" }),
+      /* @__PURE__ */ React.createElement("span", { style: { whiteSpace: "nowrap" } }, label),
+      !loading && !success && !error && rightIcon && /* @__PURE__ */ React.createElement("span", { style: { display: "inline-flex", alignItems: "center" } }, rightIcon),
+      !loading && !success && !error && showArrow && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          style: {
+            display: "inline-flex",
+            opacity: hovered ? 1 : 0,
+            transform: hovered ? "translateX(0)" : "translateX(-8px)",
+            transition: "all .3s cubic-bezier(.22,1,.36,1)",
+            fontSize: sz.fontSize
+          }
+        },
+        "\u2192"
+      )
+    ),
+    loading && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          zIndex: 5,
+          fontSize: sz.fontSize,
+          fontFamily: "Syne, sans-serif",
+          fontWeight: 600,
+          color: p.text,
+          letterSpacing: "0.04em"
+        }
+      },
+      label
+    )
+  ));
+};
+
+// src/components/Navbar/Navbar.jsx
+import React2, {
+  useState as useState2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useCallback as useCallback2,
+  useReducer
+} from "react";
+Copy;
+var KEYFRAMES = `
+  @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
+ 
+  @keyframes nb-entrance   { from{opacity:0;transform:translateY(-110%)} to{opacity:1;transform:none} }
+  @keyframes nb-fade-up    { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
+  @keyframes nb-item-in    { from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:none} }
+  @keyframes nb-slide-left { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:none} }
+  @keyframes nb-overlay-in { from{opacity:0;clip-path:inset(0 0 100% 0)} to{opacity:1;clip-path:inset(0%)} }
+  @keyframes nb-banner-in  { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:none} }
+  @keyframes nb-badge-pop  { 0%{transform:scale(0)} 70%{transform:scale(1.18)} 100%{transform:scale(1)} }
+  @keyframes nb-ping       { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
+  @keyframes nb-glow-pulse { 0%,100%{box-shadow:0 0 8px 0 var(--nb-accent-glow)} 50%{box-shadow:0 0 22px 4px var(--nb-accent-glow)} }
+  @keyframes nb-tag-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
+  @keyframes nb-shimmer    { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
+  @keyframes nb-notif-in   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
+  @keyframes nb-cmd-in     { from{opacity:0;transform:scale(.96) translateY(-10px)} to{opacity:1;transform:none} }
+  @keyframes nb-mob-in     { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:none} }
+  @keyframes nb-mob-out    { from{opacity:1;transform:none} to{opacity:0;transform:translateX(100%)} }
+ 
+  @media(prefers-reduced-motion:reduce){
+    .nb-root,.nb-root *{ animation:none!important; transition:none!important; }
+  }
+`;
+function injectKeyframes() {
+  const id = "nb-kf-v4";
+  if (document.getElementById(id)) return;
+  const s = document.createElement("style");
+  s.id = id;
+  s.textContent = KEYFRAMES;
+  document.head.appendChild(s);
+}
+var DEFAULT_PRODUCTS = [
+  {
+    id: "analytics",
+    icon: "\u25C8",
+    label: "Analytics",
+    tag: "Core",
+    tagColor: "#63D2B1",
+    desc: "Real-time dashboards, event tracking, and funnels.",
+    href: "#",
+    hot: false
+  },
+  {
+    id: "pipeline",
+    icon: "\u2B21",
+    label: "Pipeline",
+    tag: "New",
+    tagColor: "#F0A050",
+    desc: "Visual data pipeline builder with drag-and-drop nodes.",
+    href: "#",
+    hot: true
+  },
+  {
+    id: "inference",
+    icon: "\u25C9",
+    label: "Inference",
+    tag: "Beta",
+    tagColor: "#A78BFA",
+    desc: "Deploy and scale ML models with one-click infra.",
+    href: "#",
+    hot: false
+  },
+  {
+    id: "streams",
+    icon: "\u25A3",
+    label: "Streams",
+    tag: "Popular",
+    tagColor: "#F472B6",
+    desc: "High-throughput event streaming at any scale.",
+    href: "#",
+    hot: false
+  }
+];
+var DEFAULT_LINKS = [
+  {
+    label: "Solutions",
+    href: "#",
+    children: [
+      { label: "Enterprise", desc: "Scale with SLA guarantees", href: "#" },
+      { label: "Startups", desc: "Launch fast, pay as you grow", href: "#" },
+      { label: "Education", desc: "Free for academic teams", href: "#" }
+    ]
+  },
+  { label: "Pricing", href: "#" },
+  { label: "Docs", href: "#" },
+  { label: "Blog", href: "#" }
+];
+var DEFAULT_NOTIFICATIONS = [
+  {
+    id: 1,
+    type: "update",
+    read: false,
+    title: "Pipeline v2.4 released",
+    time: "2m ago",
+    body: "Drag-to-connect nodes, live preview, 3\xD7 faster build."
+  },
+  {
+    id: 2,
+    type: "alert",
+    read: false,
+    title: "Usage at 89% of quota",
+    time: "1h ago",
+    body: "Consider upgrading before your monthly reset on the 1st."
+  },
+  {
+    id: 3,
+    type: "success",
+    read: true,
+    title: "Deployment successful",
+    time: "3h ago",
+    body: "prod-api-v3 is live on 12 edge regions with zero errors."
+  },
+  {
+    id: 4,
+    type: "mention",
+    read: true,
+    title: "Jamie mentioned you",
+    time: "Yesterday",
+    body: `"Let's loop @you in on the inference budget conversation"`
+  }
+];
+var NOTIF_COLOR = {
+  update: "#63D2B1",
+  alert: "#F0A050",
+  success: "#4ADE80",
+  mention: "#A78BFA"
+};
+var NOTIF_ICON = { update: "\u2191", alert: "!", success: "\u2713", mention: "@" };
+var useOutsideClick = (ref, fn) => {
+  useEffect2(() => {
+    const h = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) fn();
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [ref, fn]);
+};
+var useScrollProgress = () => {
+  const [pct, setPct] = useState2(0);
+  useEffect2(() => {
+    const h = () => {
+      const el = document.documentElement;
+      const total = el.scrollHeight - el.clientHeight;
+      setPct(total > 0 ? window.scrollY / total * 100 : 0);
+    };
+    window.addEventListener("scroll", h, { passive: true });
+    return () => window.removeEventListener("scroll", h);
+  }, []);
+  return pct;
+};
+var useIsMobile = (bp = 768) => {
+  const [mob, setMob] = useState2(false);
+  useEffect2(() => {
+    const mq = window.matchMedia(`(max-width:${bp}px)`);
+    const h = (e) => setMob(e.matches);
+    setMob(mq.matches);
+    mq.addEventListener("change", h);
+    return () => mq.removeEventListener("change", h);
+  }, [bp]);
+  return mob;
+};
+function HamburgerIcon({ open, accent, textColor, skip }) {
+  const L = (ex) => ({
+    display: "block",
+    height: "1.5px",
+    background: open ? accent : textColor,
+    borderRadius: "2px",
+    transformOrigin: "center",
+    transition: skip ? "none" : "all .4s cubic-bezier(.34,1.56,.64,1)",
+    ...ex
+  });
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        width: 22,
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: L({
+          width: open ? "22px" : "18px",
+          transform: open ? "translateY(6.5px) rotate(45deg)" : "none"
+        })
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: L({
+          width: "22px",
+          opacity: open ? 0 : 1,
+          transform: open ? "scaleX(0)" : "none"
+        })
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: L({
+          width: open ? "22px" : "14px",
+          transform: open ? "translateY(-6.5px) rotate(-45deg)" : "none"
+        })
+      }
+    )
+  );
+}
+function Tooltip({ label, children }) {
+  const [show, setShow] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(false)
+    },
+    children,
+    show && /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          bottom: "calc(100% + 7px)",
+          left: "50%",
+          transform: "translateX(-50%)",
+          background: "rgba(30,30,36,.98)",
+          border: "0.5px solid rgba(255,255,255,.12)",
+          borderRadius: 6,
+          padding: "4px 9px",
+          fontFamily: "DM Sans",
+          fontSize: 11,
+          color: "rgba(255,255,255,.7)",
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          zIndex: 999,
+          animation: "nb-fade-up .15s ease both"
+        }
+      },
+      label
+    )
+  );
+}
+function AnnouncementBanner({
+  message,
+  href,
+  cta,
+  accent,
+  onDismiss,
+  skip,
+  topOffset
+}) {
+  const [hov, setHov] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: topOffset ?? 0,
+        left: 0,
+        right: 0,
+        zIndex: 90,
+        background: `linear-gradient(90deg,${accent}22,${accent}14,${accent}22)`,
+        borderBottom: `0.5px solid ${accent}30`,
+        backdropFilter: "blur(12px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        padding: "9px 48px 9px 20px",
+        animation: skip ? "none" : "nb-banner-in .45s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          background: accent,
+          flexShrink: 0,
+          animation: "nb-ping 1.6s ease-out infinite",
+          opacity: 0.8
+        }
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "DM Sans",
+          fontSize: 13,
+          color: "rgba(255,255,255,.65)"
+        }
+      },
+      message
+    ),
+    cta && href && /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        href,
+        style: {
+          fontFamily: "Syne",
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: ".04em",
+          color: accent,
+          textDecoration: "none",
+          padding: "3px 10px",
+          borderRadius: 5,
+          background: hov ? `${accent}22` : `${accent}12`,
+          border: `0.5px solid ${accent}40`,
+          transition: "background .2s"
+        },
+        onMouseEnter: () => setHov(true),
+        onMouseLeave: () => setHov(false)
+      },
+      cta,
+      " \u2192"
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: onDismiss,
+        style: {
+          position: "absolute",
+          right: 16,
+          background: "none",
+          border: "none",
+          color: "rgba(255,255,255,.3)",
+          cursor: "pointer",
+          fontSize: 13,
+          padding: 4,
+          lineHeight: 1,
+          transition: "color .2s"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,.7)",
+        onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,.3)"
+      },
+      "\u2715"
+    )
+  );
+}
+function ProductCard({ p, idx, accent, text, muted, skip, compact, onClick }) {
+  const [hov, setHov] = useState2(false);
+  const [pr, setPr] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(
+    "a",
+    {
+      href: p.href,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(p);
+      },
+      onMouseEnter: () => setHov(true),
+      onMouseLeave: () => {
+        setHov(false);
+        setPr(false);
+      },
+      onMouseDown: () => setPr(true),
+      onMouseUp: () => setPr(false),
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 12,
+        padding: compact ? "10px 12px" : "13px 14px",
+        borderRadius: 10,
+        textDecoration: "none",
+        cursor: "pointer",
+        background: hov ? "rgba(255,255,255,.055)" : "transparent",
+        border: `0.5px solid ${hov ? "rgba(255,255,255,.1)" : "transparent"}`,
+        transform: skip ? "none" : pr ? "scale(.98)" : hov ? "translateX(4px)" : "none",
+        transition: skip ? "none" : "all .22s cubic-bezier(.34,1.56,.64,1)",
+        animation: skip ? "none" : `nb-fade-up .4s cubic-bezier(.16,1,.3,1) ${idx * 55 + 60}ms both`
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          width: 36,
+          height: 36,
+          borderRadius: 9,
+          flexShrink: 0,
+          background: `${p.tagColor}18`,
+          border: `0.5px solid ${p.tagColor}30`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 16,
+          color: p.tagColor,
+          position: "relative",
+          transform: hov && !skip ? "scale(1.1) rotate(-5deg)" : "none",
+          transition: skip ? "none" : "transform .3s cubic-bezier(.34,1.56,.64,1)"
+        }
+      },
+      p.icon,
+      p.hot && /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: -3,
+            right: -3,
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: p.tagColor,
+            border: "1.5px solid #0a0a0d"
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 7,
+          marginBottom: 3
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 13,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            color: hov ? p.tagColor : text,
+            transition: skip ? "none" : "color .2s"
+          }
+        },
+        p.label
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontSize: 9,
+            fontWeight: 700,
+            letterSpacing: ".08em",
+            textTransform: "uppercase",
+            color: p.tagColor,
+            background: `${p.tagColor}18`,
+            border: `0.5px solid ${p.tagColor}35`,
+            borderRadius: 4,
+            padding: "2px 6px",
+            animation: skip ? "none" : `nb-tag-pulse 2.5s ease-in-out ${idx * 300 + 800}ms infinite`
+          }
+        },
+        p.tag
+      )
+    ), !compact && /* @__PURE__ */ React2.createElement(
+      "p",
+      {
+        style: {
+          fontFamily: "DM Sans",
+          fontSize: 12,
+          fontWeight: 300,
+          color: muted,
+          lineHeight: 1.5,
+          margin: 0
+        }
+      },
+      p.desc
+    ))
+  );
+}
+function NotificationPanel({
+  notifications,
+  accent,
+  text,
+  muted,
+  onRead,
+  onClear,
+  skip
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 12px)",
+        right: 0,
+        width: 340,
+        background: "rgba(8,8,11,.98)",
+        backdropFilter: "blur(24px)",
+        WebkitBackdropFilter: "blur(24px)",
+        border: "0.5px solid rgba(255,255,255,.1)",
+        borderRadius: 14,
+        boxShadow: "0 28px 60px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.04)",
+        zIndex: 300,
+        overflow: "hidden",
+        animation: skip ? "none" : "nb-fade-up .28s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "14px 16px 10px",
+          borderBottom: "0.5px solid rgba(255,255,255,.06)"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 13,
+            fontWeight: 700,
+            color: text
+          }
+        },
+        "Notifications"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: onClear,
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 11,
+            color: muted,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            transition: "color .2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.color = accent,
+          onMouseLeave: (e) => e.currentTarget.style.color = muted
+        },
+        "Mark all read"
+      )
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { maxHeight: 320, overflowY: "auto" } }, notifications.length === 0 ? /* @__PURE__ */ React2.createElement("div", { style: { padding: "32px 16px", textAlign: "center" } }, /* @__PURE__ */ React2.createElement("div", { style: { fontSize: 28, marginBottom: 8 } }, "\u2713"), /* @__PURE__ */ React2.createElement(
+      "p",
+      {
+        style: {
+          fontFamily: "DM Sans",
+          fontSize: 13,
+          color: muted,
+          margin: 0
+        }
+      },
+      "You're all caught up"
+    )) : notifications.map((n, i) => {
+      const c = NOTIF_COLOR[n.type];
+      return /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          key: n.id,
+          onClick: () => onRead(n.id),
+          style: {
+            display: "flex",
+            gap: 12,
+            padding: "12px 16px",
+            borderBottom: "0.5px solid rgba(255,255,255,.04)",
+            background: n.read ? "transparent" : "rgba(255,255,255,.025)",
+            cursor: "pointer",
+            transition: "background .2s",
+            animation: skip ? "none" : `nb-notif-in .35s cubic-bezier(.16,1,.3,1) ${i * 50}ms both`
+          },
+          onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,.04)",
+          onMouseLeave: (e) => e.currentTarget.style.background = n.read ? "transparent" : "rgba(255,255,255,.025)"
+        },
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              flexShrink: 0,
+              background: `${c}18`,
+              border: `0.5px solid ${c}30`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 12,
+              fontWeight: 700,
+              color: c
+            }
+          },
+          NOTIF_ICON[n.type]
+        ),
+        /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              gap: 8
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                fontFamily: "Syne",
+                fontSize: 12,
+                fontWeight: 600,
+                color: n.read ? muted : text,
+                lineHeight: 1.3
+              }
+            },
+            n.title
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                fontFamily: "DM Sans",
+                fontSize: 10,
+                color: "rgba(255,255,255,.25)",
+                flexShrink: 0
+              }
+            },
+            n.time
+          )
+        ), /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 11,
+              fontWeight: 300,
+              color: "rgba(255,255,255,.35)",
+              margin: "3px 0 0",
+              lineHeight: 1.4,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          },
+          n.body
+        )),
+        !n.read && /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: accent,
+              flexShrink: 0,
+              marginTop: 4
+            }
+          }
+        )
+      );
+    })),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          padding: "10px 16px",
+          borderTop: "0.5px solid rgba(255,255,255,.05)"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          href: "#",
+          onClick: (e) => e.preventDefault(),
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 12,
+            color: muted,
+            textDecoration: "none",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 5,
+            transition: "color .2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.color = accent,
+          onMouseLeave: (e) => e.currentTarget.style.color = muted
+        },
+        "View all notifications \u2192"
+      )
+    )
+  );
+}
+function UserDropdown({ user, accent, text, muted, skip, onLogout }) {
+  const items = [
+    { icon: "\u2299", label: "Profile", sub: "Edit your info" },
+    { icon: "\u229E", label: "Workspace", sub: "Manage team & billing" },
+    {
+      icon: "\u2328",
+      label: "Keyboard shortcuts",
+      sub: "\u2318K to open command palette"
+    },
+    { icon: "\u25CE", label: "API Keys", sub: "Generate & manage tokens" }
+  ];
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 12px)",
+        right: 0,
+        width: 260,
+        background: "rgba(8,8,11,.98)",
+        backdropFilter: "blur(24px)",
+        WebkitBackdropFilter: "blur(24px)",
+        border: "0.5px solid rgba(255,255,255,.1)",
+        borderRadius: 14,
+        boxShadow: "0 28px 60px rgba(0,0,0,.6)",
+        zIndex: 300,
+        overflow: "hidden",
+        animation: skip ? "none" : "nb-fade-up .28s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          padding: 16,
+          borderBottom: "0.5px solid rgba(255,255,255,.06)",
+          display: "flex",
+          gap: 12,
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            width: 38,
+            height: 38,
+            borderRadius: "50%",
+            background: `linear-gradient(135deg,${accent},${accent}88)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: "Syne",
+            fontSize: 15,
+            fontWeight: 700,
+            color: "#000",
+            flexShrink: 0
+          }
+        },
+        user.initials
+      ),
+      /* @__PURE__ */ React2.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 13,
+            fontWeight: 700,
+            color: text,
+            margin: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        user.name
+      ), /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 11,
+            color: muted,
+            margin: "2px 0 0",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        user.email
+      ))
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { padding: 6 } }, items.map((item, i) => /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        key: item.label,
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "9px 10px",
+          borderRadius: 8,
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          textAlign: "left",
+          transition: "background .18s",
+          animation: skip ? "none" : `nb-item-in .35s cubic-bezier(.16,1,.3,1) ${i * 45}ms both`
+        },
+        onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,.05)",
+        onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+      },
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontSize: 14,
+            color: accent,
+            width: 20,
+            textAlign: "center"
+          }
+        },
+        item.icon
+      ),
+      /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: text,
+            margin: 0
+          }
+        },
+        item.label
+      ), /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 10,
+            color: "rgba(255,255,255,.28)",
+            margin: 0
+          }
+        },
+        item.sub
+      ))
+    ))),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: { padding: 6, borderTop: "0.5px solid rgba(255,255,255,.06)" }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: onLogout,
+          style: {
+            width: "100%",
+            padding: "9px 10px",
+            borderRadius: 8,
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: "#EF4444",
+            textAlign: "left",
+            transition: "background .18s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.background = "rgba(239,68,68,.08)",
+          onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+        },
+        "Sign out"
+      )
+    )
+  );
+}
+function CommandPalette({
+  open,
+  onClose,
+  products,
+  links,
+  accent,
+  text,
+  muted,
+  skip
+}) {
+  const [q, setQ] = useState2("");
+  const [sel, setSel] = useState2(0);
+  const inputRef = useRef2(null);
+  const allItems = [
+    ...products.map((p) => ({
+      type: "product",
+      icon: p.icon,
+      label: p.label,
+      sub: p.desc,
+      color: p.tagColor,
+      href: p.href
+    })),
+    ...links.flatMap((l) => [
+      {
+        type: "page",
+        icon: "\u2197",
+        label: l.label,
+        sub: `Navigate to ${l.label}`,
+        color: accent,
+        href: l.href
+      },
+      ...(l.children || []).map((c) => ({
+        type: "page",
+        icon: "\u21B3",
+        label: `${l.label} / ${c.label}`,
+        sub: c.desc,
+        color: "rgba(255,255,255,.3)",
+        href: c.href
+      }))
+    ]),
+    {
+      type: "action",
+      icon: "\u25D0",
+      label: "Toggle theme",
+      sub: "Switch between light and dark",
+      color: "#A78BFA"
+    },
+    {
+      type: "action",
+      icon: "\u2318",
+      label: "Keyboard shortcuts",
+      sub: "View all shortcuts",
+      color: "#F0A050"
+    },
+    {
+      type: "action",
+      icon: "\u25C8",
+      label: "Open notification panel",
+      sub: "See your latest updates",
+      color: "#63D2B1"
+    }
+  ];
+  const filtered = q.trim() ? allItems.filter(
+    (i) => `${i.label} ${i.sub}`.toLowerCase().includes(q.toLowerCase())
+  ) : allItems;
+  useEffect2(() => {
+    if (open) {
+      setTimeout(() => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }, 60);
+      setQ("");
+      setSel(0);
+    }
+  }, [open]);
+  useEffect2(() => {
+    const h = (e) => {
+      if (!open) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSel((s) => Math.min(s + 1, filtered.length - 1));
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSel((s) => Math.max(s - 1, 0));
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [open, filtered.length, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      onClick: onClose,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        background: "rgba(0,0,0,.65)",
+        backdropFilter: "blur(6px)",
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        paddingTop: "14vh"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        onClick: (e) => e.stopPropagation(),
+        style: {
+          width: "min(620px, 92vw)",
+          background: "rgba(10,10,13,.98)",
+          border: "0.5px solid rgba(255,255,255,.14)",
+          borderRadius: 16,
+          boxShadow: "0 40px 80px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.04)",
+          overflow: "hidden",
+          animation: skip ? "none" : "nb-cmd-in .25s cubic-bezier(.16,1,.3,1) both"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "14px 18px",
+            borderBottom: "0.5px solid rgba(255,255,255,.07)"
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 16, color: muted, flexShrink: 0 } }, "\u2315"),
+        /* @__PURE__ */ React2.createElement(
+          "input",
+          {
+            ref: inputRef,
+            value: q,
+            onChange: (e) => {
+              setQ(e.target.value);
+              setSel(0);
+            },
+            placeholder: "Search commands, pages, products\u2026",
+            style: {
+              flex: 1,
+              background: "none",
+              border: "none",
+              outline: "none",
+              fontFamily: "DM Sans",
+              fontSize: 15,
+              color: text,
+              caretColor: accent
+            }
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "kbd",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 10,
+              color: "rgba(255,255,255,.25)",
+              background: "rgba(255,255,255,.06)",
+              border: "0.5px solid rgba(255,255,255,.1)",
+              borderRadius: 5,
+              padding: "2px 7px"
+            }
+          },
+          "ESC"
+        )
+      ),
+      /* @__PURE__ */ React2.createElement("div", { style: { maxHeight: 360, overflowY: "auto" } }, filtered.length === 0 ? /* @__PURE__ */ React2.createElement("div", { style: { padding: "28px 18px", textAlign: "center" } }, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: muted,
+            margin: 0
+          }
+        },
+        'No results for "',
+        q,
+        '"'
+      )) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, !q && /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: ".09em",
+            textTransform: "uppercase",
+            color: "rgba(255,255,255,.2)",
+            margin: 0,
+            padding: "10px 18px 4px"
+          }
+        },
+        "All commands"
+      ), filtered.map((item, i) => /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          key: i,
+          onClick: onClose,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "10px 18px",
+            cursor: "pointer",
+            background: sel === i ? "rgba(255,255,255,.055)" : "transparent",
+            borderLeft: sel === i ? `2px solid ${accent}` : "2px solid transparent",
+            transition: "background .12s"
+          },
+          onMouseEnter: () => setSel(i)
+        },
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: 8,
+              flexShrink: 0,
+              background: `${item.color}18`,
+              border: `0.5px solid ${item.color}28`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              color: item.color
+            }
+          },
+          item.icon
+        ),
+        /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 13,
+              fontWeight: 500,
+              color: text,
+              margin: 0
+            }
+          },
+          item.label
+        ), /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 11,
+              color: muted,
+              margin: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          },
+          item.sub
+        )),
+        /* @__PURE__ */ React2.createElement(
+          "span",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 10,
+              color: "rgba(255,255,255,.2)",
+              flexShrink: 0
+            }
+          },
+          item.type === "product" ? "Product" : item.type === "page" ? "Page" : "Action"
+        )
+      )))),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            padding: "9px 18px",
+            borderTop: "0.5px solid rgba(255,255,255,.06)",
+            display: "flex",
+            gap: 14
+          }
+        },
+        [
+          ["\u2191\u2193", "Navigate"],
+          ["\u21B5", "Select"],
+          ["esc", "Close"]
+        ].map(([k, v]) => /* @__PURE__ */ React2.createElement(
+          "span",
+          {
+            key: k,
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 11,
+              color: "rgba(255,255,255,.25)",
+              display: "flex",
+              alignItems: "center",
+              gap: 5
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "kbd",
+            {
+              style: {
+                background: "rgba(255,255,255,.07)",
+                border: "0.5px solid rgba(255,255,255,.1)",
+                borderRadius: 4,
+                padding: "1px 5px",
+                fontSize: 10
+              }
+            },
+            k
+          ),
+          v
+        ))
+      )
+    )
+  );
+}
+function ProductsMegaMenu({
+  products,
+  accent,
+  text,
+  muted,
+  open,
+  skip,
+  onProductClick
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 14px)",
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: 460,
+        background: "rgba(8,8,11,.98)",
+        backdropFilter: "blur(24px)",
+        WebkitBackdropFilter: "blur(24px)",
+        border: "0.5px solid rgba(255,255,255,.1)",
+        borderRadius: 16,
+        padding: 12,
+        zIndex: 200,
+        boxShadow: "0 32px 64px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.04)",
+        animation: skip ? "none" : "nb-fade-up .28s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          padding: "7px 14px 10px",
+          borderBottom: "0.5px solid rgba(255,255,255,.06)",
+          marginBottom: 6,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: ".1em",
+            textTransform: "uppercase",
+            color: accent,
+            margin: 0
+          }
+        },
+        "All Products"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 10,
+            color: "rgba(255,255,255,.25)"
+          }
+        },
+        "4 tools"
+      )
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 } }, products.map((p, i) => /* @__PURE__ */ React2.createElement(
+      ProductCard,
+      {
+        key: p.id,
+        p,
+        idx: i,
+        accent,
+        text,
+        muted,
+        skip,
+        onClick: (pr) => {
+          onProductClick == null ? void 0 : onProductClick(pr);
+        }
+      }
+    ))),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          margin: "10px 0 4px",
+          padding: "13px 14px",
+          background: `linear-gradient(135deg,${accent}10,transparent)`,
+          border: `0.5px solid ${accent}20`,
+          borderRadius: 10,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          cursor: "pointer"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.background = `linear-gradient(135deg,${accent}1a,transparent)`,
+        onMouseLeave: (e) => e.currentTarget.style.background = `linear-gradient(135deg,${accent}10,transparent)`
+      },
+      /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 12,
+            fontWeight: 600,
+            color: text,
+            margin: "0 0 2px"
+          }
+        },
+        "\u26A1 Pipeline launch event"
+      ), /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 11,
+            color: muted,
+            margin: 0
+          }
+        },
+        "Watch the 12-min demo \u2014 live Q&A on Thursday"
+      )),
+      /* @__PURE__ */ React2.createElement("span", { style: { color: accent, fontSize: 16, flexShrink: 0 } }, "\u2192")
+    )
+  );
+}
+function SubDropdown({ link, accent, text, muted, open, skip }) {
+  var _a;
+  if (!open || !((_a = link.children) == null ? void 0 : _a.length)) return null;
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 12px)",
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: 240,
+        background: "rgba(8,8,11,.98)",
+        backdropFilter: "blur(24px)",
+        border: "0.5px solid rgba(255,255,255,.1)",
+        borderRadius: 12,
+        padding: 8,
+        zIndex: 200,
+        boxShadow: "0 24px 50px rgba(0,0,0,.5)",
+        animation: skip ? "none" : "nb-fade-up .25s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    link.children.map((child, i) => /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        key: child.label,
+        href: child.href,
+        onClick: (e) => e.preventDefault(),
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          padding: "9px 12px",
+          borderRadius: 8,
+          textDecoration: "none",
+          cursor: "pointer",
+          transition: "background .18s",
+          animation: skip ? "none" : `nb-item-in .3s cubic-bezier(.16,1,.3,1) ${i * 50}ms both`
+        },
+        onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,.05)",
+        onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+      },
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 13,
+            fontWeight: 600,
+            color: text
+          }
+        },
+        child.label
+      ),
+      child.desc && /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 11,
+            color: muted,
+            marginTop: 2
+          }
+        },
+        child.desc
+      )
+    ))
+  );
+}
+function MobileDrawer({
+  open,
+  onClose,
+  links,
+  products,
+  ctaLabel,
+  accent,
+  text,
+  muted,
+  skip,
+  onProductClick,
+  onCtaClick
+}) {
+  useEffect2(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 500,
+        background: "rgba(6,6,9,.98)",
+        backdropFilter: "blur(24px)",
+        WebkitBackdropFilter: "blur(24px)",
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        animation: skip ? "none" : "nb-mob-in .35s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          padding: "0 20px",
+          height: 62,
+          borderBottom: "0.5px solid rgba(255,255,255,.07)",
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 7,
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: muted,
+            background: "rgba(255,255,255,.05)",
+            border: "0.5px solid rgba(255,255,255,.1)",
+            borderRadius: 8,
+            padding: "8px 14px",
+            cursor: "pointer",
+            transition: "all .2s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.color = text;
+            e.currentTarget.style.background = "rgba(255,255,255,.09)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.color = muted;
+            e.currentTarget.style.background = "rgba(255,255,255,.05)";
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 10 } }, "\u2715"),
+        " Close"
+      )
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, padding: "24px 20px 40px" } }, /* @__PURE__ */ React2.createElement(
+      "p",
+      {
+        style: {
+          fontFamily: "Syne",
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: ".1em",
+          textTransform: "uppercase",
+          color: accent,
+          margin: "0 0 12px"
+        }
+      },
+      "Products"
+    ), /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          marginBottom: 28
+        }
+      },
+      products.map((p, i) => /* @__PURE__ */ React2.createElement(
+        ProductCard,
+        {
+          key: p.id,
+          p,
+          idx: i,
+          accent,
+          text,
+          muted,
+          skip,
+          onClick: (pr) => {
+            onProductClick == null ? void 0 : onProductClick(pr);
+            onClose();
+          }
+        }
+      ))
+    ), /* @__PURE__ */ React2.createElement(
+      "p",
+      {
+        style: {
+          fontFamily: "Syne",
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: ".1em",
+          textTransform: "uppercase",
+          color: muted,
+          margin: "0 0 8px"
+        }
+      },
+      "Navigate"
+    ), links.map((link, i) => /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        key: link.label,
+        href: link.href,
+        onClick: (e) => {
+          e.preventDefault();
+          onClose();
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          fontFamily: "Syne",
+          fontSize: "clamp(22px,5vw,28px)",
+          fontWeight: 700,
+          letterSpacing: "-0.03em",
+          color: text,
+          textDecoration: "none",
+          padding: "10px 0",
+          borderBottom: "0.5px solid rgba(255,255,255,.05)",
+          transition: skip ? "none" : "all .22s cubic-bezier(.34,1.56,.64,1)",
+          animation: skip ? "none" : `nb-slide-left .5s cubic-bezier(.16,1,.3,1) ${0.1 + i * 0.07}s both`
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.color = accent;
+          e.currentTarget.style.paddingLeft = "8px";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.color = text;
+          e.currentTarget.style.paddingLeft = "0";
+        }
+      },
+      link.label,
+      /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 13, opacity: 0.3 } }, "\u2197")
+    )), /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 32,
+          background: `linear-gradient(135deg,${accent}14,${accent}07)`,
+          border: `0.5px solid ${accent}2a`,
+          borderRadius: 14,
+          padding: 20
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 15,
+            fontWeight: 600,
+            color: text,
+            margin: "0 0 6px"
+          }
+        },
+        "Ready to ship?"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: muted,
+            margin: "0 0 16px"
+          }
+        },
+        "Free forever. No credit card needed."
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: () => {
+            onCtaClick == null ? void 0 : onCtaClick();
+            onClose();
+          },
+          style: {
+            fontFamily: "Syne",
+            fontSize: 14,
+            fontWeight: 600,
+            letterSpacing: ".04em",
+            color: "#000",
+            background: `linear-gradient(135deg,${accent},${accent}cc)`,
+            border: "none",
+            borderRadius: 10,
+            padding: "12px 20px",
+            cursor: "pointer",
+            width: "100%"
+          }
+        },
+        ctaLabel
+      )
+    ), /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: { display: "flex", gap: 20, marginTop: 24, flexWrap: "wrap" }
+      },
+      ["Twitter", "GitHub", "Discord", "LinkedIn"].map((s) => /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          key: s,
+          href: "#",
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 12,
+            color: muted,
+            textDecoration: "none",
+            transition: "color .2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.color = accent,
+          onMouseLeave: (e) => e.currentTarget.style.color = muted
+        },
+        s
+      ))
+    ))
+  );
+}
+function FullScreenMenu({
+  open,
+  onClose,
+  links,
+  products,
+  ctaLabel,
+  accent,
+  text,
+  muted,
+  skip,
+  activeIdx,
+  onLinkClick,
+  onProductClick,
+  onCtaClick
+}) {
+  const [search, setSearch] = useState2("");
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (open) setTimeout(() => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }, 120);
+  }, [open]);
+  if (!open) return null;
+  const sideLinks = [
+    "About",
+    "Careers",
+    "Contact",
+    "Status",
+    "Changelog",
+    "Security"
+  ];
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 500,
+        background: "rgba(4,4,6,.98)",
+        backdropFilter: "blur(28px)",
+        WebkitBackdropFilter: "blur(28px)",
+        display: "flex",
+        flexDirection: "column",
+        animation: skip ? "none" : "nb-overlay-in .42s cubic-bezier(.16,1,.3,1) both"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 36px",
+          height: 68,
+          flexShrink: 0,
+          borderBottom: "0.5px solid rgba(255,255,255,.06)"
+        }
+      },
+      /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 9 } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 20, color: accent } }, "\u25C8"), /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 17,
+            fontWeight: 800,
+            letterSpacing: "-0.02em",
+            color: text
+          }
+        },
+        "Axiom"
+      )),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            maxWidth: 400,
+            margin: "0 36px",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            background: "rgba(255,255,255,.05)",
+            border: "0.5px solid rgba(255,255,255,.1)",
+            borderRadius: 10,
+            padding: "9px 14px"
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 15, color: muted, flexShrink: 0 } }, "\u2315"),
+        /* @__PURE__ */ React2.createElement(
+          "input",
+          {
+            ref: inputRef,
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search products, docs, guides\u2026",
+            style: {
+              background: "none",
+              border: "none",
+              outline: "none",
+              fontFamily: "DM Sans",
+              fontSize: 14,
+              color: text,
+              flex: 1,
+              caretColor: accent
+            }
+          }
+        ),
+        search ? /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => setSearch(""),
+            style: {
+              background: "none",
+              border: "none",
+              color: muted,
+              cursor: "pointer",
+              fontSize: 11,
+              padding: 0
+            }
+          },
+          "\u2715"
+        ) : /* @__PURE__ */ React2.createElement(
+          "kbd",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 10,
+              color: "rgba(255,255,255,.2)",
+              background: "rgba(255,255,255,.06)",
+              border: "0.5px solid rgba(255,255,255,.1)",
+              borderRadius: 4,
+              padding: "2px 7px",
+              flexShrink: 0
+            }
+          },
+          "\u2318K"
+        )
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 7,
+            fontFamily: "DM Sans",
+            fontSize: 13,
+            color: muted,
+            background: "rgba(255,255,255,.05)",
+            border: "0.5px solid rgba(255,255,255,.1)",
+            borderRadius: 8,
+            padding: "8px 14px",
+            cursor: "pointer",
+            transition: "all .2s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.color = text;
+            e.currentTarget.style.background = "rgba(255,255,255,.09)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.color = muted;
+            e.currentTarget.style.background = "rgba(255,255,255,.05)";
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 10 } }, "\u2715"),
+        " Close"
+      )
+    ),
+    /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, display: "flex", overflow: "hidden" } }, /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          flex: "0 0 46%",
+          padding: "32px 36px",
+          borderRight: "0.5px solid rgba(255,255,255,.06)",
+          overflowY: "auto"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: ".1em",
+            textTransform: "uppercase",
+            color: accent,
+            margin: "0 0 16px"
+          }
+        },
+        "Products"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }
+        },
+        products.map((p, i) => /* @__PURE__ */ React2.createElement(
+          ProductCard,
+          {
+            key: p.id,
+            p,
+            idx: i,
+            accent,
+            text,
+            muted,
+            skip,
+            onClick: (pr) => {
+              onProductClick == null ? void 0 : onProductClick(pr);
+              onClose();
+            }
+          }
+        ))
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            marginTop: 18,
+            padding: "14px 16px",
+            background: "rgba(255,255,255,.03)",
+            borderRadius: 10,
+            border: "0.5px solid rgba(255,255,255,.07)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,.055)",
+          onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,.03)"
+        },
+        /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "Syne",
+              fontSize: 13,
+              fontWeight: 600,
+              color: text,
+              margin: "0 0 2px"
+            }
+          },
+          "Compare plans"
+        ), /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 11,
+              color: muted,
+              margin: 0
+            }
+          },
+          "Find the right tier for your team"
+        )),
+        /* @__PURE__ */ React2.createElement("span", { style: { color: accent, fontSize: 18 } }, "\u2192")
+      )
+    ), /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          padding: "32px 40px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          borderRight: "0.5px solid rgba(255,255,255,.06)"
+        }
+      },
+      /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: ".1em",
+            textTransform: "uppercase",
+            color: muted,
+            margin: "0 0 16px"
+          }
+        },
+        "Navigate"
+      ), links.map((link, i) => /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          key: link.label,
+          href: link.href,
+          onClick: (e) => {
+            e.preventDefault();
+            onLinkClick(link.label, i);
+            onClose();
+          },
+          style: {
+            fontFamily: "Syne",
+            fontSize: "clamp(22px,2.8vw,30px)",
+            fontWeight: 700,
+            letterSpacing: "-0.03em",
+            color: activeIdx === i ? accent : text,
+            textDecoration: "none",
+            padding: "10px 0",
+            borderBottom: "0.5px solid rgba(255,255,255,.05)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            transition: skip ? "none" : "all .22s cubic-bezier(.34,1.56,.64,1)",
+            animation: skip ? "none" : `nb-slide-left .5s cubic-bezier(.16,1,.3,1) ${0.18 + i * 0.07}s both`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.color = accent;
+            e.currentTarget.style.paddingLeft = "8px";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.color = activeIdx === i ? accent : text;
+            e.currentTarget.style.paddingLeft = "0";
+          }
+        },
+        link.label,
+        /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 13, opacity: 0.3 } }, "\u2197")
+      ))),
+      /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 20 } }, ["Twitter", "GitHub", "Discord", "LinkedIn"].map((s) => /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          key: s,
+          href: "#",
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 12,
+            color: muted,
+            textDecoration: "none",
+            transition: "color .2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.color = accent,
+          onMouseLeave: (e) => e.currentTarget.style.color = muted
+        },
+        s
+      )))
+    ), /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          flex: "0 0 230px",
+          padding: "32px 28px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between"
+        }
+      },
+      /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: ".1em",
+            textTransform: "uppercase",
+            color: muted,
+            margin: "0 0 16px"
+          }
+        },
+        "Company"
+      ), sideLinks.map((l, i) => /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          key: l,
+          href: "#",
+          style: {
+            display: "block",
+            fontFamily: "DM Sans",
+            fontSize: 14,
+            color: muted,
+            textDecoration: "none",
+            padding: "8px 0",
+            borderBottom: "0.5px solid rgba(255,255,255,.04)",
+            transition: "color .2s ease, padding-left .2s cubic-bezier(.34,1.56,.64,1)",
+            animation: skip ? "none" : `nb-item-in .45s cubic-bezier(.16,1,.3,1) ${0.2 + i * 0.06}s both`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.color = text;
+            e.currentTarget.style.paddingLeft = "6px";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.color = muted;
+            e.currentTarget.style.paddingLeft = "0";
+          }
+        },
+        l
+      ))),
+      /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            background: `linear-gradient(135deg,${accent}14,${accent}07)`,
+            border: `0.5px solid ${accent}2a`,
+            borderRadius: 12,
+            padding: 18,
+            marginBottom: 12
+          }
+        },
+        /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "Syne",
+              fontSize: 13,
+              fontWeight: 600,
+              color: text,
+              margin: "0 0 4px"
+            }
+          },
+          "Ready to ship?"
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 12,
+              color: muted,
+              margin: "0 0 14px"
+            }
+          },
+          "Free forever. No card needed."
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => {
+              onCtaClick == null ? void 0 : onCtaClick();
+              onClose();
+            },
+            style: {
+              fontFamily: "Syne",
+              fontSize: 13,
+              fontWeight: 600,
+              letterSpacing: ".04em",
+              color: "#000",
+              background: `linear-gradient(135deg,${accent},${accent}cc)`,
+              border: "none",
+              borderRadius: 8,
+              padding: "10px 16px",
+              cursor: "pointer",
+              width: "100%",
+              transition: "transform .2s ease"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.02)",
+            onMouseLeave: (e) => e.currentTarget.style.transform = "none"
+          },
+          ctaLabel
+        )
+      ), /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          style: {
+            fontFamily: "DM Sans",
+            fontSize: 11,
+            color: "rgba(255,255,255,.2)",
+            textAlign: "center",
+            margin: 0
+          }
+        },
+        "Trusted by 10,000+ teams"
+      ))
+    ))
+  );
+}
+function Navbar({
+  logo = "Axiom",
+  logoIcon = "\u25C8",
+  products = DEFAULT_PRODUCTS,
+  links = DEFAULT_LINKS,
+  notifications = DEFAULT_NOTIFICATIONS,
+  ctaLabel = "Get started \u2192",
+  badge,
+  user = { name: "Jamie Rivera", email: "jamie@axiom.co", initials: "JR" },
+  showUser = true,
+  showNotifs = true,
+  showSearch = true,
+  showProgress = true,
+  announcement,
+  loading = false,
+  defaultActive = null,
+  disableAnimation = false,
+  mobileBreakpoint = 768,
+  accent = "#63D2B1",
+  text = "#F2F0EB",
+  muted = "#888580",
+  surface = "rgba(8,8,10,.72)",
+  onClick,
+  onHover,
+  onCtaClick,
+  onProductClick,
+  onAnimationEnd,
+  onChange
+}) {
+  const navRef = useRef2(null);
+  const prodsRef = useRef2(null);
+  const notifRef = useRef2(null);
+  const userRef = useRef2(null);
+  const subRefs = useRef2({});
+  const [scrolled, setScrolled] = useState2(false);
+  const [menuOpen, setMenuOpen] = useState2(false);
+  const [mobOpen, setMobOpen] = useState2(false);
+  const [prodsOpen, setProdsOpen] = useState2(false);
+  const [notifOpen, setNotifOpen] = useState2(false);
+  const [userOpen, setUserOpen] = useState2(false);
+  const [cmdOpen, setCmdOpen] = useState2(false);
+  const [subOpen, setSubOpen] = useState2(null);
+  const [activeIdx, setActiveIdx] = useState2(defaultActive);
+  const [logoHov, setLogoHov] = useState2(false);
+  const [notifs, setNotifs] = useState2(notifications);
+  const [bannerVisible, setBannerVisible] = useState2(!!announcement);
+  const [isLoggedIn, setIsLoggedIn] = useState2(true);
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const scrollPct = useScrollProgress();
+  const unreadCount = notifs.filter((n) => !n.read).length;
+  const reduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion:reduce)").matches;
+  const skip = disableAnimation || reduced;
+  useEffect2(() => {
+    injectKeyframes();
+  }, []);
+  useEffect2(() => {
+    const h = () => setScrolled(window.scrollY > 24);
+    window.addEventListener("scroll", h, { passive: true });
+    return () => window.removeEventListener("scroll", h);
+  }, []);
+  useEffect2(() => {
+    if (!isMobile) setMobOpen(false);
+  }, [isMobile]);
+  useEffect2(() => {
+    document.body.style.overflow = menuOpen || mobOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [menuOpen, mobOpen]);
+  useEffect2(() => {
+    const h = (e) => {
+      if (e.key === "Escape") {
+        setMenuOpen(false);
+        setMobOpen(false);
+        setProdsOpen(false);
+        setNotifOpen(false);
+        setUserOpen(false);
+        setCmdOpen(false);
+        setSubOpen(null);
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setCmdOpen((v) => !v);
+      }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, []);
+  useOutsideClick(prodsRef, () => setProdsOpen(false));
+  useOutsideClick(notifRef, () => setNotifOpen(false));
+  useOutsideClick(userRef, () => setUserOpen(false));
+  const handleLink = useCallback2(
+    (label, idx) => {
+      setActiveIdx(idx);
+      onChange == null ? void 0 : onChange(label);
+      onClick == null ? void 0 : onClick(label);
+    },
+    [onChange, onClick]
+  );
+  const BANNER_H = bannerVisible ? 42 : 0;
+  const NAV_H = scrolled ? 58 : 68;
+  const TOTAL_H = BANNER_H + NAV_H;
+  const navStyle = {
+    position: "fixed",
+    top: BANNER_H,
+    left: 0,
+    right: 0,
+    zIndex: menuOpen || mobOpen ? 600 : 100,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `0 clamp(14px, 3vw, 28px)`,
+    height: NAV_H,
+    background: menuOpen ? "rgba(4,4,6,.98)" : scrolled ? "rgba(8,8,10,.92)" : surface,
+    backdropFilter: menuOpen ? "none" : "blur(20px) saturate(180%)",
+    WebkitBackdropFilter: menuOpen ? "none" : "blur(20px) saturate(180%)",
+    borderBottom: `0.5px solid ${menuOpen ? "rgba(255,255,255,.06)" : scrolled ? "rgba(255,255,255,.1)" : "rgba(255,255,255,.04)"}`,
+    transition: skip ? "none" : "height .35s cubic-bezier(.34,1.56,.64,1), background .35s ease, top .35s ease",
+    animation: skip ? "none" : "nb-entrance .5s cubic-bezier(.16,1,.3,1) both",
+    fontFamily: "Syne, sans-serif",
+    boxSizing: "border-box"
+  };
+  if (loading)
+    return /* @__PURE__ */ React2.createElement("nav", { style: { ...navStyle, animation: "none" } }, [1, 2, 3].map((k) => /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        key: k,
+        style: { display: "flex", gap: 12, alignItems: "center" }
+      },
+      [26, 68, 56, 48].map((w, i) => /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            width: w,
+            height: 13,
+            borderRadius: 5,
+            background: "linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 100%)",
+            backgroundSize: "600px 100%",
+            animation: "nb-shimmer 1.5s ease-in-out infinite"
+          }
+        }
+      ))
+    )));
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, announcement && bannerVisible && /* @__PURE__ */ React2.createElement(
+    AnnouncementBanner,
+    {
+      ...announcement,
+      accent,
+      skip,
+      onDismiss: () => setBannerVisible(false)
+    }
+  ), showProgress && /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: BANNER_H + NAV_H - 1,
+        left: 0,
+        right: 0,
+        zIndex: 101,
+        height: 2,
+        background: "rgba(255,255,255,.05)"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          height: "100%",
+          width: `${scrollPct}%`,
+          background: `linear-gradient(90deg,${accent},${accent}88)`,
+          transition: "width .1s linear",
+          boxShadow: `0 0 8px ${accent}66`
+        }
+      }
+    )
+  ), /* @__PURE__ */ React2.createElement(
+    "nav",
+    {
+      ref: navRef,
+      className: "nb-root",
+      style: navStyle,
+      onAnimationEnd
+    },
+    /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        href: "#",
+        onClick: (e) => e.preventDefault(),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          textDecoration: "none",
+          cursor: "pointer",
+          flexShrink: 0,
+          transform: logoHov && !skip ? "scale(1.04)" : "none",
+          transition: skip ? "none" : "transform .25s cubic-bezier(.34,1.56,.64,1)",
+          animation: skip ? "none" : "nb-item-in .5s cubic-bezier(.16,1,.3,1) 60ms both"
+        },
+        onMouseEnter: () => {
+          setLogoHov(true);
+          onHover == null ? void 0 : onHover(true);
+        },
+        onMouseLeave: () => {
+          setLogoHov(false);
+          onHover == null ? void 0 : onHover(false);
+        }
+      },
+      /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 20, color: accent } }, logoIcon),
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Syne",
+            fontSize: 17,
+            fontWeight: 800,
+            letterSpacing: "-0.025em",
+            color: text
+          }
+        },
+        logo
+      ),
+      badge && /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontSize: 9,
+            fontWeight: 700,
+            letterSpacing: ".08em",
+            textTransform: "uppercase",
+            color: accent,
+            background: `${accent}1a`,
+            border: `0.5px solid ${accent}44`,
+            borderRadius: 4,
+            padding: "2px 6px"
+          }
+        },
+        badge
+      )
+    ),
+    !isMobile && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 22 } }, /* @__PURE__ */ React2.createElement("div", { ref: prodsRef, style: { position: "relative" } }, /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => setProdsOpen((v) => !v),
+        onMouseEnter: () => setProdsOpen(true),
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "6px 0",
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          fontFamily: "DM Sans",
+          fontSize: 14,
+          color: prodsOpen ? text : muted,
+          transition: skip ? "none" : "color .2s",
+          animation: skip ? "none" : "nb-item-in .5s cubic-bezier(.16,1,.3,1) 160ms both"
+        }
+      },
+      "Products",
+      /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            fontSize: 8,
+            opacity: 0.6,
+            display: "inline-block",
+            transform: prodsOpen ? "rotate(180deg)" : "none",
+            transition: skip ? "none" : "transform .3s cubic-bezier(.34,1.56,.64,1)"
+          }
+        },
+        "\u25BC"
+      )
+    ), /* @__PURE__ */ React2.createElement(
+      ProductsMegaMenu,
+      {
+        products,
+        open: prodsOpen,
+        skip,
+        accent,
+        text,
+        muted,
+        onProductClick: (p) => {
+          onProductClick == null ? void 0 : onProductClick(p);
+          setProdsOpen(false);
+        }
+      }
+    )), links.map((link, i) => {
+      var _a;
+      if (!subRefs.current[link.label])
+        subRefs.current[link.label] = React2.createRef();
+      const hasSub = ((_a = link.children) == null ? void 0 : _a.length) > 0;
+      return /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          key: link.label,
+          ref: subRefs.current[link.label],
+          style: { position: "relative" }
+        },
+        /* @__PURE__ */ React2.createElement(
+          "a",
+          {
+            href: link.href,
+            onClick: (e) => {
+              e.preventDefault();
+              handleLink(link.label, i);
+              if (hasSub)
+                setSubOpen(
+                  (v) => v === link.label ? null : link.label
+                );
+            },
+            style: {
+              position: "relative",
+              padding: "6px 0",
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              textDecoration: "none",
+              fontFamily: "DM Sans",
+              fontSize: 14,
+              fontWeight: activeIdx === i ? "500" : "400",
+              color: activeIdx === i ? accent : muted,
+              cursor: "pointer",
+              transition: skip ? "none" : "color .25s ease",
+              animation: skip ? "none" : `nb-item-in .5s cubic-bezier(.16,1,.3,1) ${240 + 80 * i}ms both`
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = text;
+              if (hasSub) setSubOpen(link.label);
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = activeIdx === i ? accent : muted;
+              if (hasSub) setSubOpen(null);
+            }
+          },
+          link.label,
+          hasSub && /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                fontSize: 7,
+                opacity: 0.5,
+                transform: subOpen === link.label ? "rotate(180deg)" : "none",
+                transition: "transform .2s"
+              }
+            },
+            "\u25BC"
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                height: "1.5px",
+                background: accent,
+                borderRadius: 2,
+                transformOrigin: "left",
+                transform: activeIdx === i ? "scaleX(1)" : "scaleX(0)",
+                transition: skip ? "none" : "transform .3s cubic-bezier(.34,1.56,.64,1)"
+              }
+            }
+          )
+        ),
+        hasSub && /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            onMouseEnter: () => setSubOpen(link.label),
+            onMouseLeave: () => setSubOpen(null)
+          },
+          /* @__PURE__ */ React2.createElement(
+            SubDropdown,
+            {
+              link,
+              open: subOpen === link.label,
+              skip,
+              accent,
+              text,
+              muted
+            }
+          )
+        )
+      );
+    })),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flexShrink: 0
+        }
+      },
+      showSearch && !isMobile && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            animation: skip ? "none" : `nb-item-in .5s cubic-bezier(.16,1,.3,1) 460ms both`
+          }
+        },
+        /* @__PURE__ */ React2.createElement(Tooltip, { label: "Search (\u2318K)" }, /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => setCmdOpen(true),
+            style: {
+              background: "rgba(255,255,255,.05)",
+              border: "0.5px solid rgba(255,255,255,.1)",
+              borderRadius: 8,
+              padding: "7px 10px",
+              cursor: "pointer",
+              color: muted,
+              fontSize: 15,
+              display: "flex",
+              alignItems: "center",
+              transition: "all .2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = "rgba(255,255,255,.09)";
+              e.currentTarget.style.color = text;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "rgba(255,255,255,.05)";
+              e.currentTarget.style.color = muted;
+            }
+          },
+          "\u2315"
+        ))
+      ),
+      showNotifs && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ref: notifRef,
+          style: {
+            position: "relative",
+            animation: skip ? "none" : "nb-item-in .5s cubic-bezier(.16,1,.3,1) 500ms both"
+          }
+        },
+        /* @__PURE__ */ React2.createElement(Tooltip, { label: "Notifications" }, /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => {
+              setNotifOpen((v) => !v);
+              setUserOpen(false);
+            },
+            style: {
+              position: "relative",
+              background: notifOpen ? "rgba(255,255,255,.09)" : "rgba(255,255,255,.05)",
+              border: `0.5px solid ${notifOpen ? "rgba(255,255,255,.15)" : "rgba(255,255,255,.1)"}`,
+              borderRadius: 8,
+              padding: "7px 10px",
+              cursor: "pointer",
+              color: notifOpen ? text : muted,
+              fontSize: 15,
+              display: "flex",
+              alignItems: "center",
+              transition: "all .2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = "rgba(255,255,255,.09)";
+              e.currentTarget.style.color = text;
+            },
+            onMouseLeave: (e) => {
+              if (!notifOpen) {
+                e.currentTarget.style.background = "rgba(255,255,255,.05)";
+                e.currentTarget.style.color = muted;
+              }
+            }
+          },
+          "\u{1F514}",
+          unreadCount > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: -4,
+                right: -4,
+                width: 16,
+                height: 16,
+                borderRadius: "50%",
+                background: accent,
+                border: "1.5px solid #07070a",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontFamily: "Syne",
+                fontSize: 9,
+                fontWeight: 700,
+                color: "#000",
+                animation: skip ? "none" : "nb-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both"
+              }
+            },
+            unreadCount
+          ), /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: -4,
+                right: -4,
+                width: 16,
+                height: 16,
+                borderRadius: "50%",
+                background: accent,
+                opacity: 0.5,
+                pointerEvents: "none",
+                animation: "nb-ping 1.8s ease-out infinite"
+              }
+            }
+          ))
+        )),
+        notifOpen && /* @__PURE__ */ React2.createElement(
+          NotificationPanel,
+          {
+            notifications: notifs,
+            accent,
+            text,
+            muted,
+            skip,
+            onRead: (id) => setNotifs(
+              (ns) => ns.map((n) => n.id === id ? { ...n, read: true } : n)
+            ),
+            onClear: () => setNotifs((ns) => ns.map((n) => ({ ...n, read: true })))
+          }
+        )
+      ),
+      showUser && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ref: userRef,
+          style: {
+            position: "relative",
+            animation: skip ? "none" : "nb-item-in .5s cubic-bezier(.16,1,.3,1) 540ms both"
+          }
+        },
+        isLoggedIn ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Tooltip, { label: user.name }, /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => {
+              setUserOpen((v) => !v);
+              setNotifOpen(false);
+            },
+            style: {
+              width: 34,
+              height: 34,
+              borderRadius: "50%",
+              background: `linear-gradient(135deg,${accent},${accent}88)`,
+              border: `1.5px solid ${userOpen ? accent : "rgba(255,255,255,.1)"}`,
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontFamily: "Syne",
+              fontSize: 12,
+              fontWeight: 700,
+              color: "#000",
+              transition: "border-color .2s, transform .2s cubic-bezier(.34,1.56,.64,1)",
+              transform: userOpen ? "scale(1.08)" : "scale(1)"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.08)",
+            onMouseLeave: (e) => {
+              if (!userOpen)
+                e.currentTarget.style.transform = "scale(1)";
+            }
+          },
+          user.initials
+        )), userOpen && /* @__PURE__ */ React2.createElement(
+          UserDropdown,
+          {
+            user,
+            accent,
+            text,
+            muted,
+            skip,
+            onLogout: () => {
+              setIsLoggedIn(false);
+              setUserOpen(false);
+            }
+          }
+        )) : /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: () => setIsLoggedIn(true),
+            style: {
+              fontFamily: "DM Sans",
+              fontSize: 13,
+              color: muted,
+              background: "rgba(255,255,255,.05)",
+              border: "0.5px solid rgba(255,255,255,.1)",
+              borderRadius: 8,
+              padding: "7px 14px",
+              cursor: "pointer",
+              transition: "all .2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = text;
+              e.currentTarget.style.background = "rgba(255,255,255,.09)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = muted;
+              e.currentTarget.style.background = "rgba(255,255,255,.05)";
+            }
+          },
+          "Sign in"
+        )
+      ),
+      !isMobile && /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: onCtaClick,
+          style: {
+            fontFamily: "Syne",
+            fontSize: 13,
+            fontWeight: 600,
+            letterSpacing: ".04em",
+            color: "#000",
+            background: `linear-gradient(135deg,${accent}ee,${accent}bb)`,
+            border: "none",
+            borderRadius: 8,
+            padding: "8px 18px",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            transition: skip ? "none" : "all .25s cubic-bezier(.34,1.56,.64,1)",
+            animation: skip ? "none" : `nb-item-in .5s cubic-bezier(.16,1,.3,1) 580ms both, nb-glow-pulse 3s ease-in-out 1.1s infinite`,
+            "--nb-accent-glow": `${accent}55`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.transform = "translateY(-2px) scale(1.04)";
+            e.currentTarget.style.boxShadow = `0 8px 28px ${accent}42`;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.transform = "none";
+            e.currentTarget.style.boxShadow = "none";
+          },
+          onMouseDown: (e) => e.currentTarget.style.transform = "scale(.96)",
+          onMouseUp: (e) => e.currentTarget.style.transform = "translateY(-2px) scale(1.04)"
+        },
+        ctaLabel
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: () => isMobile ? setMobOpen((v) => !v) : setMenuOpen((v) => !v),
+          "aria-label": "Menu",
+          style: {
+            background: menuOpen || mobOpen ? "rgba(255,255,255,.08)" : "rgba(255,255,255,.04)",
+            border: `0.5px solid ${menuOpen || mobOpen ? "rgba(255,255,255,.15)" : "rgba(255,255,255,.08)"}`,
+            borderRadius: 9,
+            padding: "9px 11px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: skip ? "none" : "all .22s ease",
+            animation: skip ? "none" : "nb-item-in .5s cubic-bezier(.16,1,.3,1) 630ms both"
+          }
+        },
+        /* @__PURE__ */ React2.createElement(
+          HamburgerIcon,
+          {
+            open: isMobile ? mobOpen : menuOpen,
+            accent,
+            textColor: text,
+            skip
+          }
+        )
+      )
+    )
+  ), /* @__PURE__ */ React2.createElement(
+    CommandPalette,
+    {
+      open: cmdOpen,
+      onClose: () => setCmdOpen(false),
+      products,
+      links,
+      accent,
+      text,
+      muted,
+      skip
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    MobileDrawer,
+    {
+      open: mobOpen,
+      onClose: () => setMobOpen(false),
+      links,
+      products,
+      ctaLabel,
+      accent,
+      text,
+      muted,
+      skip,
+      onProductClick,
+      onCtaClick
+    }
+  ), !isMobile && /* @__PURE__ */ React2.createElement(
+    FullScreenMenu,
+    {
+      open: menuOpen,
+      onClose: () => setMenuOpen(false),
+      links,
+      products,
+      ctaLabel,
+      accent,
+      text,
+      muted,
+      skip,
+      activeIdx,
+      onLinkClick: handleLink,
+      onProductClick,
+      onCtaClick
+    }
+  ), /* @__PURE__ */ React2.createElement("div", { style: { height: TOTAL_H } }));
+}
+
+// src/components/Spotlight/Spotlight.jsx
+import React3, { useState as useState3, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+var THEMES = {
+  indigo: {
+    spotlight: "rgba(99,102,241,0.18)",
+    border: "99,102,241",
+    glow: "#6366f1",
+    bg: "#0a0a12",
+    inner: "rgba(10,10,18,0.96)"
+  },
+  rose: {
+    spotlight: "rgba(244,63,94,0.18)",
+    border: "244,63,94",
+    glow: "#f43f5e",
+    bg: "#12080a",
+    inner: "rgba(18,8,10,0.96)"
+  },
+  emerald: {
+    spotlight: "rgba(16,185,129,0.18)",
+    border: "16,185,129",
+    glow: "#10b981",
+    bg: "#08120f",
+    inner: "rgba(8,18,15,0.96)"
+  },
+  amber: {
+    spotlight: "rgba(245,158,11,0.18)",
+    border: "245,158,11",
+    glow: "#f59e0b",
+    bg: "#120f08",
+    inner: "rgba(18,15,8,0.96)"
+  },
+  sky: {
+    spotlight: "rgba(14,165,233,0.18)",
+    border: "14,165,233",
+    glow: "#0ea5e9",
+    bg: "#080f12",
+    inner: "rgba(8,15,18,0.96)"
+  },
+  aurora: {
+    spotlight: "rgba(168,85,247,0.18)",
+    border: "168,85,247",
+    glow: "#a855f7",
+    bg: "#0e0a12",
+    inner: "rgba(14,10,18,0.96)"
+  }
+};
+var clamp2 = (v, mn, mx) => Math.min(Math.max(v, mn), mx);
+var injectGlobalStyles = () => {
+  const id = "spotlight-card-global";
+  if (document.getElementById(id)) return;
+  const s = document.createElement("style");
+  s.id = id;
+  s.innerHTML = `
+    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');
+    .sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }
+    @keyframes sc-ripple     { 0%{transform:scale(0) translate(-50%,-50%);opacity:.6} 100%{transform:scale(4) translate(-50%,-50%);opacity:0} }
+    @keyframes sc-badge-pulse{ 0%,100%{box-shadow:0 0 0 0 var(--bpulse,rgba(99,102,241,.5))} 50%{box-shadow:0 0 0 5px rgba(0,0,0,0)} }
+    @keyframes sc-float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
+    @keyframes sc-shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    @media(prefers-reduced-motion:reduce){ .sc-root,.sc-root *{ animation:none!important; transition:none!important; } }
+  `;
+  document.head.appendChild(s);
+};
+var Badge = ({ label, color = "#6366f1" }) => {
+  const rgb = (() => {
+    const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+    return r ? `${parseInt(r[1], 16)},${parseInt(r[2], 16)},${parseInt(r[3], 16)}` : "99,102,241";
+  })();
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      style: {
+        "--bpulse": `rgba(${rgb},.5)`,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        padding: "3px 10px",
+        borderRadius: 999,
+        fontSize: 10,
+        fontWeight: 700,
+        letterSpacing: "0.07em",
+        textTransform: "uppercase",
+        color,
+        background: `rgba(${rgb},.12)`,
+        border: `1px solid rgba(${rgb},.3)`,
+        animation: "sc-badge-pulse 2s infinite",
+        fontFamily: "DM Sans, sans-serif"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      "span",
+      {
+        style: { width: 6, height: 6, borderRadius: "50%", background: color }
+      }
+    ),
+    label
+  );
+};
+var SpotlightCard = ({
+  children,
+  theme = "indigo",
+  customTheme = {},
+  tilt = true,
+  tiltStrength = 12,
+  ripple = true,
+  float = false,
+  glass = false,
+  loading = false,
+  disabled = false,
+  badge,
+  badgeColor,
+  borderRadius = "20px",
+  padding = "28px",
+  spotlightSize = "600px",
+  transitionDuration = 0.3,
+  onClick,
+  className = "",
+  style = {}
+}) => {
+  const ref = useRef3(null);
+  const rippleCount = useRef3(0);
+  const [pos, setPos] = useState3({ x: 0, y: 0 });
+  const [hovered, setHovered] = useState3(false);
+  const [tiltXY, setTiltXY] = useState3({ x: 0, y: 0 });
+  const [ripples, setRipples] = useState3([]);
+  useEffect3(() => {
+    injectGlobalStyles();
+  }, []);
+  const t = { ...THEMES[theme] ?? THEMES.indigo, ...customTheme };
+  const td = `${transitionDuration}s`;
+  const onMove = useCallback3(
+    (e) => {
+      if (disabled || !ref.current) return;
+      const r = ref.current.getBoundingClientRect();
+      const x = e.clientX - r.left, y = e.clientY - r.top;
+      setPos({ x, y });
+      if (tilt) {
+        const cx = r.width / 2, cy = r.height / 2;
+        setTiltXY({
+          x: clamp2((y - cy) / cy * tiltStrength, -tiltStrength, tiltStrength),
+          y: -clamp2(
+            (x - cx) / cx * tiltStrength,
+            -tiltStrength,
+            tiltStrength
+          )
+        });
+      }
+    },
+    [disabled, tilt, tiltStrength]
+  );
+  const onEnter = useCallback3(() => {
+    if (!disabled) setHovered(true);
+  }, [disabled]);
+  const onLeave = useCallback3(() => {
+    setHovered(false);
+    setTiltXY({ x: 0, y: 0 });
+  }, []);
+  const onClickHandler = useCallback3(
+    (e) => {
+      if (disabled) return;
+      onClick == null ? void 0 : onClick(e);
+      if (!ripple || !ref.current) return;
+      const r = ref.current.getBoundingClientRect();
+      const id = ++rippleCount.current;
+      setRipples((prev) => [
+        ...prev,
+        { x: e.clientX - r.left, y: e.clientY - r.top, id }
+      ]);
+      setTimeout(
+        () => setRipples((prev) => prev.filter((rp) => rp.id !== id)),
+        650
+      );
+    },
+    [disabled, onClick, ripple]
+  );
+  const transform = tilt && hovered ? `perspective(900px) rotateX(${tiltXY.x}deg) rotateY(${tiltXY.y}deg) scale(1.025)` : "perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)";
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ref,
+      className: `sc-root ${className}`,
+      onClick: onClickHandler,
+      onMouseMove: onMove,
+      onMouseEnter: onEnter,
+      onMouseLeave: onLeave,
+      onKeyDown: (e) => e.key === "Enter" && onClickHandler(e),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      "aria-disabled": disabled,
+      style: {
+        position: "relative",
+        borderRadius,
+        padding: "1.5px",
+        overflow: "hidden",
+        cursor: disabled ? "not-allowed" : onClick ? "pointer" : "default",
+        opacity: disabled ? 0.42 : 1,
+        transition: `transform ${td} cubic-bezier(.22,1,.36,1), box-shadow ${td} ease`,
+        transform,
+        boxShadow: hovered ? `0 22px 60px rgba(${t.border},.22), 0 0 0 1px rgba(${t.border},.22)` : "0 4px 28px rgba(0,0,0,.45)",
+        animation: float ? "sc-float 4s ease-in-out infinite" : "none",
+        background: t.bg,
+        ...style
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+          borderRadius,
+          transition: `opacity ${td} ease`,
+          opacity: hovered ? 1 : 0,
+          background: `radial-gradient(260px circle at ${pos.x}px ${pos.y}px, ${t.glow}, transparent 70%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          zIndex: 1,
+          borderRadius: `calc(${borderRadius} - 1.5px)`,
+          padding,
+          height: "100%",
+          color: "#fff",
+          display: "flex",
+          flexDirection: "column",
+          gap: 12,
+          fontFamily: "DM Sans, sans-serif",
+          overflow: "hidden",
+          ...glass ? {
+            backdropFilter: "blur(18px) saturate(1.7)",
+            background: "rgba(255,255,255,0.055)"
+          } : { background: t.inner },
+          ...loading ? {
+            background: "linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%)",
+            backgroundSize: "200% 100%",
+            animation: "sc-shimmer 1.6s infinite linear",
+            minHeight: 160
+          } : {}
+        }
+      },
+      /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            zIndex: 2,
+            borderRadius: `calc(${borderRadius} - 1.5px)`,
+            transition: `opacity ${td} ease`,
+            opacity: hovered ? 1 : 0,
+            background: `radial-gradient(${spotlightSize} circle at ${pos.x}px ${pos.y}px, ${t.spotlight}, transparent 40%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            inset: 0,
+            zIndex: 3,
+            pointerEvents: "none",
+            borderRadius: `calc(${borderRadius} - 1.5px)`,
+            opacity: 0.028,
+            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+            backgroundSize: "128px 128px"
+          }
+        }
+      ),
+      badge && !loading && /* @__PURE__ */ React3.createElement("div", { style: { position: "absolute", top: 14, right: 14, zIndex: 10 } }, /* @__PURE__ */ React3.createElement(Badge, { label: badge, color: badgeColor ?? t.glow })),
+      !loading && /* @__PURE__ */ React3.createElement("div", { style: { position: "relative", zIndex: 5 } }, children),
+      ripples.map((rp) => /* @__PURE__ */ React3.createElement(
+        "span",
+        {
+          key: rp.id,
+          "aria-hidden": true,
+          style: {
+            position: "absolute",
+            left: rp.x,
+            top: rp.y,
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            background: `rgba(${t.border},.38)`,
+            transform: "scale(0) translate(-50%,-50%)",
+            pointerEvents: "none",
+            animation: "sc-ripple 620ms ease-out forwards",
+            zIndex: 10
+          }
+        }
+      ))
+    )
+  );
+};
+export {
+  MagneticButton,
+  Navbar,
+  SpotlightCard
+};