spb/ai-atlas

1import { cn } from '@/lib/cn';2import { MarkArt, MARK_TOKENS } from './mark';34/**5 * The AI Atlas mark (atlas plate + "A" constellation + timeline "now" node). `plate` (default) follows the theme through the6 * `--brand-*` tokens; `mono` draws the graph alone in `currentColor` for footers and monochrome contexts.7 */8export function LogoMark({ size = 24, className, variant = 'plate', title }: { size?: number; className?: string; variant?: 'plate' | 'mono'; title?: string }) {9  const colors = variant === 'plate' ? MARK_TOKENS : { plate: 'transparent', ink: 'currentColor', grid: 'currentColor', accent: 'var(--accent)' };10  return (11    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn('shrink-0', className)} aria-hidden={title ? undefined : true} role={title ? 'img' : undefined}>12      {title && <title>{title}</title>}13      {variant === 'mono' ? (14        <g opacity={1}>15          <rect x="1" y="1" width="30" height="30" rx="7" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />16          <MarkArt colors={colors} plate={false} simplified={size <= 20} />17        </g>18      ) : (19        <MarkArt colors={colors} simplified={size <= 20} />20      )}21    </svg>22  );23}2425/** Lockup: mark + "AI Atlas" (Geist, "AI" heavy, "Atlas" medium). */26export function Wordmark({ className, markSize = 22, textClassName }: { className?: string; markSize?: number; textClassName?: string }) {27  return (28    <span className={cn('inline-flex items-center gap-2 text-ink', className)}>29      <LogoMark size={markSize} />30      <span className={cn('text-[17px] tracking-tight', textClassName)}>31        <span className="font-bold">AI</span> <span className="font-medium text-ink-2">Atlas</span>32      </span>33    </span>34  );35}36