Function bodies 642 total

function updateVisitData(): VisitData {
  const now = Date.now();
  const existing = getVisitData();

  const updated: VisitData = existing
    ? { count: existing.count + 1, firstSeen: existing.firstSeen, lastSeen: now }
    : { count: 1, firstSeen: now, lastSeen: now };

  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
  } catch {
    // localStorage full or unavailable — continue without persistence
  }

  return updated;
}

function loadMonetag() {
  if (document.querySelector('script[data-zone="211924"]')) return;

  const script = document.createElement('script');
  script.src = 'https://quge5.com/88/tag.min.js';
  script.dataset.zone = '211924';
  script.async = true;
  script.dataset.cfasync = 'false';
  document.head.appendChild(script);
}

export default function MonetAgAdLoader() {
  useEffect(() => {
    const visit = updateVisitData();
    const isFirstVisit = visit.count <= 1;
    const delay = isFirstVisit ? FIRST_VISIT_DELAY_MS : RETURN_VISIT_DELAY_MS;

    const timer = setTimeout(loadMonetag, delay);
    return () => clearTimeout(timer);
  }, []);

  return null;
}

export default function Navbar({ lastUpdatedText }: NavbarProps) {
  const pathname = usePathname();
  const { textSize } = useTextSize();
  const [mobileOpen, setMobileOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMobileOpen(false);
      }
    }
    if (mobileOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [mobileOpen]);

  useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = ''; };
    }
  }, [mobileOpen]);

  function isActive(href: string) {
    if (href === '/') return pathname === '/';
    return pathname === href || pathname.startsW

    function handleClickOutside(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMobileOpen(false);
      }
    }

  function isActive(href: string) {
    if (href === '/') return pathname === '/';
    return pathname === href || pathname.startsWith(href + '/');
  }

  function isLinkActive(href: string) {
    if (href === '/learn' && pathname === '/delivery') return false;
    return isActive(href);
  }

export default function NewsletterSignup() {
  return (
    <a
      href="https://buy.stripe.com/fZucN6fAj1e9fwugMpfw402"
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex items-center justify-center w-[114px] h-[27px] sm:w-[138px] sm:h-[32px] rounded-md font-semibold text-[8px] sm:text-[9.5px] text-amber-700 dark:text-amber-300 bg-amber-100 dark:bg-amber-500/15 border border-amber-300 dark:border-amber-500/25 hover:bg-amber-200 dark:hover:bg-amber-500/25 hover:text-amber-800 dark:hover:text-amber-200 backdrop-blur-sm no-underline"
    >
      Sign Up for Newsletter
    </a>
  );
}

function getRiskBorderColor(riskLevel: PaperPhysicalData['riskLevel']): string {
  switch (riskLevel) {
    case 'LOW': return 'border-emerald-500/20';
    case 'MODERATE': return 'border-amber-500/20';
    case 'HIGH': return 'border-orange-500/20';
    case 'EXTREME': return 'border-red-500/20';
  }
}

function getRiskGlowColor(riskLevel: PaperPhysicalData['riskLevel']): string {
  switch (riskLevel) {
    case 'LOW': return 'bg-emerald-500';
    case 'MODERATE': return 'bg-amber-500';
    case 'HIGH': return 'bg-orange-500';
    case 'EXTREME': return 'bg-red-500';
  }
}

export default function PaperPhysicalCard({ metalName, data, unit, compact = false }: PaperPhysicalCardProps) {
  const riskColor = getPaperPhysicalRiskColor(data.riskLevel);
  const bgColor = getPaperPhysicalBgColor(data.riskLevel);
  const borderColor = getRiskBorderColor(data.riskLevel);
  const glowColor = getRiskGlowColor(data.riskLevel);

  const physicalPercent = Math.min(100 / data.ratio, 100);
  const paperPercent = 100 - physicalPercent;

  if (compact) {
    return (
      <div className="flex flex-col items-center gap-1">
        <div className="flex items-center gap-1.5">
          <FileStack className="w-3 h-3 text-slate-400" />
          <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">
            Paper/Physical
          </span>
        </div>
        <p className={`text-lg font-black tabular-nums ${riskColor}`}>
          {data.ratio.toFixed(1)}:1
        </p>
        <span className={`text-[8px] font-black uppercase px-2 py-0.5 rounded

export default function RatioGauge({ ratio, label }: RatioGaugeProps) {
  // Clamp ratio for display (max 20x for gauge)
  const displayRatio = Math.min(ratio, 20);
  const percentage = (displayRatio / 20) * 100;
  
  // Determine color based on ratio
  const getColor = () => {
    if (ratio >= 12) return 'from-emerald-500 to-emerald-400';
    if (ratio >= 5) return 'from-amber-500 to-amber-400';
    return 'from-red-500 to-red-400';
  };

  const getTextColor = () => {
    if (ratio >= 12) return 'text-emerald-500 dark:text-emerald-400';
    if (ratio >= 5) return 'text-amber-500 dark:text-amber-400';
    return 'text-red-500 dark:text-red-400';
  };

  return (
    <div className="w-full">
      {label && (
        <div className="flex justify-between items-center mb-3">
          <span className="text-sm font-medium text-[var(--muted-foreground)]">{label}</span>
          <span className={`text-xl font-bold ${getTextColor()}`}>
            {ratio.toFixed(2)}x
          </span>
     

function FactorBar({ label, value, icon }: FactorBarProps) {
  const getBarColor = (val: number) => {
    if (val <= 25) return 'bg-emerald-500';
    if (val <= 50) return 'bg-amber-500';
    if (val <= 75) return 'bg-orange-500';
    return 'bg-red-500';
  };

  return (
    <div className="flex items-center gap-2">
      <div className="w-4 h-4 text-slate-400 flex-shrink-0">
        {icon}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex justify-between items-center mb-1">
          <span className="text-[10px] font-medium text-slate-500 dark:text-slate-400 truncate">
            {label}
          </span>
          <span className="text-[10px] font-bold text-slate-700 dark:text-slate-300 ml-2">
            {Math.round(value)}
          </span>
        </div>
        <div className="h-1.5 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full ${getBarColor(value)}`}
            style={{ w

export default function RiskScoreTooltip({ score, metalName }: RiskScoreTooltipProps) {
  const levelColor = getRiskLevelColor(score.level);
  const levelBgColor = getRiskLevelBgColor(score.level);

  return (
    <div className="w-64 p-4 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700">
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <AlertTriangle className={`w-4 h-4 ${levelColor}`} />
          <span className="text-xs font-bold text-slate-700 dark:text-slate-200 uppercase tracking-wide">
            {metalName} Risk
          </span>
        </div>
        <span className={`text-[10px] font-black uppercase px-2 py-0.5 rounded-full text-white ${levelBgColor}`}>
          {score.level}
        </span>
      </div>

      {/* Main Score */}
      <div className="mb-4">
        <div className="flex items-end gap-2 mb-2">
          <span className

export default function ScrollToHash() {
  useEffect(() => {
    const hash = typeof window !== 'undefined' ? window.location.hash : '';
    if (!hash || hash === '#') return;

    const id = hash.slice(1);
    const scroll = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    // Run after a short delay so client-rendered sections are in the DOM
    const t = setTimeout(scroll, 100);
    return () => clearTimeout(t);
  }, []);

  return null;
}

function XIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

export default function ShareButton({ text, url, variant = 'icon', className = '' }: ShareButtonProps) {
  const [copied, setCopied] = useState(false);
  const [open, setOpen] = useState(false);

  const shareUrl = url || SITE_URL;

  const shareToX = () => {
    const tweetUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(shareUrl)}`;
    window.open(tweetUrl, '_blank', 'width=550,height=420');
    setOpen(false);
  };

  const shareToReddit = () => {
    const redditUrl = `https://www.reddit.com/submit?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(text.split('\n')[0])}`;
    window.open(redditUrl, '_blank');
    setOpen(false);
  };

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      const textarea = document.createElement('textarea');
      textarea.value = shareUrl;
      document.body.appe

export default function StatusBadge({ status, size = 'md' }: StatusBadgeProps) {
  const sizeClasses = {
    sm: 'px-3 py-1 text-xs gap-1.5',
    md: 'px-4 py-1.5 text-sm gap-2',
    lg: 'px-5 py-2 text-base gap-2',
  };

  const iconSizes = {
    sm: 'w-3.5 h-3.5',
    md: 'w-4 h-4',
    lg: 'w-5 h-5',
  };

  const statusConfig = {
    ADEQUATE: {
      bg: 'bg-emerald-500/15 dark:bg-emerald-500/25',
      text: 'text-emerald-700 dark:text-emerald-400',
      border: 'border-emerald-500/30',
      icon: CheckCircle,
    },
    WATCH: {
      bg: 'bg-amber-500/15 dark:bg-amber-500/25',
      text: 'text-amber-700 dark:text-amber-400',
      border: 'border-amber-500/30',
      icon: AlertTriangle,
    },
    STRESS: {
      bg: 'bg-red-500/15 dark:bg-red-500/25',
      text: 'text-red-700 dark:text-red-400',
      border: 'border-red-500/30',
      icon: XCircle,
    },
  };

  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <span
      className={`
  

export function useTextSize() {
  return useContext(TextSizeContext);
}

export function TextSizeProvider({ children }: { children: ReactNode }) {
  const [textSize, setTextSizeState] = useState<TextSize>('default');
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY) as TextSize | null;
    if (stored && stored in TEXT_SIZE_MAP) {
      setTextSizeState(stored);
      document.documentElement.style.fontSize = `${TEXT_SIZE_MAP[stored]}px`;
    }
    setMounted(true);
  }, []);

  function setTextSize(size: TextSize) {
    setTextSizeState(size);
    localStorage.setItem(STORAGE_KEY, size);
    document.documentElement.style.fontSize = `${TEXT_SIZE_MAP[size]}px`;
  }

  if (!mounted) {
    return <>{children}</>;
  }

  return (
    <TextSizeContext.Provider value={{ textSize, setTextSize }}>
      {children}
    </TextSizeContext.Provider>
  );
}

  function setTextSize(size: TextSize) {
    setTextSizeState(size);
    localStorage.setItem(STORAGE_KEY, size);
    document.documentElement.style.fontSize = `${TEXT_SIZE_MAP[size]}px`;
  }

export default function TextSizeSelector({ variant = 'icon' }: { variant?: 'icon' | 'inline' }) {
  const { textSize, setTextSize } = useTextSize();
  const [open, setOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  if (!mounted) {
    if (variant === 'inline') return null;
    return <div style={{ width: 26, height: 26 }} />;
  }

  if (variant === 'inline') {
    return (
      <div className="flex items-center gap-2 px-4 py-2">
        <Type style={{ width: 16, height: 16 }} className="text-blue-400 opacity-60" a

    function handleClickOutside(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }

export function useThemeMode() {
  return useContext(ThemeModeContext);
}

function isDaytime(): boolean {
  const hour = new Date().getHours();
  return hour >= 7 && hour < 19;
}

function TimeBasedThemeSync({ children }: { children: ReactNode }) {
  const { setTheme } = useTheme();
  const [mode, setModeState] = useState<ThemeMode>('auto');
  const [mounted, setMounted] = useState(false);

  const applyAutoTheme = useCallback(() => {
    setTheme(isDaytime() ? 'light' : 'dark');
  }, [setTheme]);

  const setMode = useCallback((newMode: ThemeMode) => {
    setModeState(newMode);
    localStorage.setItem(STORAGE_KEY, newMode);
    if (newMode === 'auto') {
      applyAutoTheme();
    } else {
      setTheme(newMode);
    }
  }, [setTheme, applyAutoTheme]);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY) as ThemeMode | null;
    const initial = stored && ['auto', 'light', 'dark'].includes(stored) ? stored : 'auto';
    setModeState(initial);

    if (initial === 'auto') {
      applyAutoTheme();
    } else {
      setTheme(initial);
    }

    setMounted(true);
  }, [setTheme, applyAutoTheme]);

  useEffect(() => {
    if (!mounted || mo

export function ThemeProvider({ children }: { children: ReactNode }) {
  return (
    <NextThemesProvider attribute="class" defaultTheme="dark" enableSystem={false}>
      <TimeBasedThemeSync>
        {children}
      </TimeBasedThemeSync>
    </NextThemesProvider>
  );
}

export default function ThemeToggle() {
  const [mounted, setMounted] = useState(false);
  const { theme } = useTheme();
  const { setMode } = useThemeMode();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className="w-7 h-7 sm:w-8 sm:h-8" />;
  }

  function toggle() {
    setMode(theme === 'dark' ? 'light' : 'dark');
  }

  return (
    <button
      onClick={toggle}
      className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-[var(--muted)] hover:bg-[var(--muted)]/80 flex items-center justify-center transition-colors !min-h-0 !min-w-0"
      aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
      title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
    >
      {theme === 'dark' ? (
        <Sun className="w-4 h-4 text-amber-400" />
      ) : (
        <Moon className="w-4 h-4 text-slate-600" />
      )}
    </button>
  );
}

  function toggle() {
    setMode(theme === 'dark' ? 'light' : 'dark');
  }

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span"

  return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  )
}

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: "sm" | "default"
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:da

function SelectContent({
  className,
  children,
  position = "item-aligned",
  align = "center",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      )}
      {...props}
    >
      <span
        data-slot="select-item-indicator"
        className="absolute right-2 flex size-3.5 items-center justify-center"
      >
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}