Default sort order is deterministic and explicitly labeled

Non-deterministic or unlabeled sort order is a functional suitability failure under ISO 25010:2011 — users cannot form a mental model of what they're looking at. A directory that silently returns results in insertion order, or randomizes on each page load, makes it impossible to compare two sessions or share a result. In practice, unnamed sort states generate support requests ("why did the top result change?") and break bookmark workflows entirely. The absence of a sort label also means users cannot tell whether they're browsing by relevance, recency, or rating — so they can't trust any individual result's position.

Expose a labeled sort control in components/SortControl.tsx and persist the active sort in the URL via ?sort=rating.

export function SortControl({ currentSort, onChange }) {
  return (
    <div>
      <label htmlFor="sort">Sort by:</label>
      <select
        id="sort"
        value={currentSort}
        onChange={e => onChange(e.target.value)}
      >
        <option value="relevance">Relevance</option>
        <option value="rating">Rating (highest)</option>
        <option value="newest">Newest</option>
        <option value="distance">Distance (nearest)</option>
      </select>
    </div>
  )
}

In the API handler, always include an explicit orderBy clause — never rely on database insertion order. Pair primary and secondary sort keys (e.g., rating DESC, createdAt DESC) to guarantee stable ordering across pages.