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

<Meta of={NetworkGraphStories} />

<Title />
<Subtitle>Three-dimensional graph for ontologies and any information with relationships.</Subtitle>

<Description />

<Primary />

<Controls />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
>
> - **Type your nodes and edges, do not color them one by one.** `node.type` and `edge.relation` drive the palette and read as an ontology; per-item `colorToken` is the escape hatch, not the default.
> - **Always pair the graph with `<GraphNodeList>`.** A canvas is a single opaque element to a screen reader — it can carry a label, but not the hundred nodes inside it. The list states each relationship in words and shares `selectedId` in both directions.
> - **Keep `focusMode="neighbors"` beyond a few dozen nodes.** Dimming everything outside the selected node's neighbourhood is the only practical way to read a dense graph.
> - **Give every node a stable `id`.** The layout seeds each node from a hash of its id, so a diagram arranges the same way every time and "the node on the left" keeps meaning something between sessions.
> - **`ref` is the container element; the imperative handle is `controlRef`.** Same split as `<Map>`.
> - Under `prefers-reduced-motion` the layout is solved before the first paint and auto-rotation never starts — the diagram appears already arranged rather than visibly settling.