# GraphNodeList

## Overview

`GraphNodeList` renders a `NetworkGraph`'s content as an operable list. A canvas is one opaque element to a screen reader: it can carry a label, but not the nodes and relationships inside it. This gives the same information and the same actions through plain keyboard and screen-reader navigation.

---

## Import

```tsx
import { GraphNodeList } from 'xertica-ui/ui';
```

---

## Props

| Prop            | Type                           | Default              | Description                                       |
| --------------- | ------------------------------ | -------------------- | ------------------------------------------------- |
| `nodes`         | `GraphNode[]`                  | required             | The same array given to `<NetworkGraph>`.         |
| `edges`         | `GraphEdge[]`                  | `[]`                 | Needed to list each node's relationships.         |
| `selectedId`    | `string \| null`               | -                    | The shared selection.                             |
| `onSelect`      | `(id: string \| null) => void` | required             | Fires with `null` on Escape.                      |
| `typeTokens`    | `ColorToken[]`                 | chart palette        | Must match the graph's, or the swatches will lie. |
| `showRelations` | `boolean`                      | `true`               | Lists each node's relationships in words.         |
| `title`         | `string`                       | -                    | Heading, also the accessible name.                |
| `maxHeight`     | `string`                       | -                    | Caps the height and scrolls.                      |
| `emptyLabel`    | `string`                       | `"No nodes to list"` | Shown when `nodes` is empty.                      |

---

## Keyboard

| Key               | Action                               |
| ----------------- | ------------------------------------ |
| `Tab`             | Enters the list (a single tab stop). |
| `↑` / `↓`         | Moves between rows.                  |
| `Home` / `End`    | First or last row.                   |
| `Enter` / `Space` | Selects the focused row.             |
| `Escape`          | Clears the selection.                |

---

## AI Rules

- **Always** share one `selectedId` with `<NetworkGraph>`, in both directions.
- **Always** pass the same `edges` — without them the list names nodes but not how they relate, which is most of what an ontology is.
- **Always** pass the same `typeTokens` as the graph, or the color swatches will disagree with the canvas.
- **Never** hide the list at small breakpoints. It is the accessible path to the same data, not a desktop extra.
- Relationships are phrased as `predicate → target` on purpose: the arrow that conveys them on the canvas conveys nothing when read aloud.