Type components around ownership

First, build a mental model

Props are a public contract. Model relationships and valid combinations, rather than turning every field optional to make call sites quiet.

1. A generic item type can connect data and selection callbacks.
2. Controlled state receives a value and an update callback from its owner.
3. Discriminated props make mutually exclusive modes explicit.
4. Do not export broad any-shaped component interfaces just to avoid discussing ownership.

type SelectProps<T> = { items: readonly T[]; selected: T | null; onSelect: (item: T) => void };
type ButtonAction =
  | { mode: 'link'; href: string }
  | { mode: 'action'; onActivate: () => void };
const link: ButtonAction = { mode: 'link', href: '/learn' };
const playerSelect: SelectProps<{ id: string }> = {
  items: [{ id: 'p1' }], selected: null,
  onSelect: player => console.log(player.id)
};

1. Ownership

   selected belongs to the caller; the component reports intent through onSelect.

2. Generic

   items and the callback agree on the same player shape.

3. Mode

   The link variant requires href; action requires onActivate.