Function CommitGraph

packages/docs/src/components/commit-graph.tsx:571–724

({
  commits,
  truncateHash = 7,
  railWidth = 24,
  railColors,
  refColors,
  tagColors,
  className,
  ...props
}: CommitGraphProps)

// Main component

function CommitGraph({
  commits,
  truncateHash = 7,
  railWidth = 24,
  railColors,
  refColors,
  tagColors,
  className,
  ...props
}: CommitGraphProps) {
  const resolveColor = (rail: number) => railColors?.[rail] ?? color(rail)
  const resolveRefColor = (rail: number, ref: string) =>
    refColors?.[ref] ?? resolveColor(rail)
  const resolveTagColor = (rail: number, tag: string) =>
    tagColors?.[tag] ?? resolveColor(rail)

  // Simple mode: if no commit has parents, infer a linear topology
  const hasTopology = commits.some(c => c.parents && c.parents.length > 0)
  const resolvedCommits = hasTopology
    ? commits
    : commits.map((c, i) => ({
        ...c,
        parents: i < commits.length - 1 ? [commits[i + 1].hash] : []
      }))

  if (resolvedCommits.length === 0) {
    return (
      <div
        data-slot="commit-graph"
        className={cn(
          'border-border/60 bg-card text-muted-foreground flex items-center justify-center rounded-xl border py-10 text-sm shadow-sm',
          className
        )}
        {...props}
      >
        No commits.
      </div>
    )
  }

  const rows = computeLayout(resolvedCommits)
  const maxRails = Math.max(
    ...rows.map(r =>
      Math.max(
        r.rail + 1,
        r.rails.length,
        ...r.edges.map(e => Math.max(e.fromRail, e.toRail) + 1)
      )
    )
  )
  const svgWidth = maxRails * railWidth

  return (
    <div
      data-slot="commit-graph"
      className={cn(
        'border-border/60 bg-card overflow-hidden rounded-xl border shadow-sm',
        className