Function OpenTraceLogo

ui/src/appComponents/OpenTraceLogo.tsx:177–352

({
  size = 80,
  animated = true,
  className,
}: OpenTraceLogoProps)

}

export function OpenTraceLogo({
  size = 80,
  animated = true,
  className,
}: OpenTraceLogoProps) {
  const [isDark, setIsDark] = useState(
    () =>
      typeof document !== 'undefined' &&
      document.documentElement.classList.contains('dark'),
  );

  useEffect(() => {
    if (!document.getElementById(STYLES_ID)) {
      const style = document.createElement('style');
      style.id = STYLES_ID;
      style.textContent = LOGO_CSS;
      document.head.appendChild(style);
    }
  }, []);

  useEffect(() => {
    const el = document.documentElement;
    const observer = new MutationObserver(() => {
      setIsDark(el.classList.contains('dark'));
    });
    observer.observe(el, { attributes: true, attributeFilter: ['class'] });
    return () => observer.disconnect();
  }, []);

  const t = isDark ? DARK_THEME : LIGHT_THEME;
  const glowSize = Math.round(size * 1.625);

  const nodeStrokeStyle = animated
    ? { animation: 'ot-nd-draw 6s ease-in-out infinite' }
    : { opacity: 1 as const };

  const nodeFillStyle = animated
    ? { animation: 'ot-nd-solid 6s ease-in-out infinite' }
    : { opacity: 1 as const };

  return (
    <div
      className={className}
      style={{
        position: 'relative',
        overflow: 'visible',
        width: size,
        height: size,
      }}
    >
      {/* Ambient glow */}
      <div
        style={{
          pointerEvents: 'none',
          position: 'absolute',
          top: '50%',
          left: '50%',
          borderRadius: '9999px',