import {
  Meta,
  Title,
  Subtitle,
  Description,
  Primary,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as GraphNodeListStories from './graph-node-list.stories';

<Meta of={GraphNodeListStories} />

<Title />
<Subtitle>The graph's nodes and relationships as an operable list.</Subtitle>

<Description />

<Primary />

<Controls />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
>
> - **Share one `selectedId` with `<NetworkGraph>`**, in both directions. Selecting a row highlights the node; selecting the node highlights the row.
> - **Pass the same `edges`.** Without them the list names nodes but not how they relate, which is most of what an ontology is.
> - **Pass the same `typeTokens` as the graph**, or the colour swatches will disagree with the canvas.
> - **Never hide it at small breakpoints.** A canvas is one opaque element to a screen reader; this is the accessible path to the same data.
> - Relationships read as `predicate → target` on purpose: the arrow that conveys them on the canvas conveys nothing when read aloud.