# DiagramInspector

What the reader just picked, written out beside the picture.

- Group: Diagrams
- Import: `import { DiagramInspector } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/diagram-inspector/
- Related: card, diagram-canvas

## When to reach for it

A node holds about eight words before it stops being a node. Everything past those — the port, the owner, the six relationships — belongs here.

## Accessibility

- A labelled region with aria-live="polite", not a dialog: the reader clicked a node, they did not open anything, so focus is never trapped or demanded.
- Relationships are real buttons when they carry onSelect, which is how the graph becomes walkable peer by peer from the keyboard.

## DiagramInspector

What the reader just picked, written out. A diagram can hold about eight words per node before it stops being a diagram and starts being a document with lines drawn on it. Everything past those eight — the port, the owning team, the file it was read out of, the six relationships it takes part in — belongs beside the picture rather than inside it, and this is that place. NOT A DIALOG, and that is deliberate. An inspector is a REGION that changes with the selection, not a modal. Giving it `role="dialog"` would trap focus and demand dismissal for something the reader never opened — they clicked a node, and the panel followed. So it is a labelled region with `aria-live="polite"`, which is what makes a screen reader announce the new selection without stealing the cursor from whatever the reader was doing. The relationships are real buttons when they carry `onSelect`, which is how the diagram becomes navigable from the keyboard: a reader can walk the graph peer by peer without ever touching the picture.

### Props

- `eyebrow` — `string`. The kicker over the title — what KIND of thing this panel is showing.
- `title` (required) — `string`.
- `description` — `ReactNode`.
- `facts` — `InspectorFact[]` default `[]`.
- `links` — `InspectorLink[]` default `[]`.
- `actions` — `ReactNode`. Buttons under the facts — copy a link, open the source.
- `onClose` — `() => void`.
- `className` — `string`.
- `floating` — `boolean`. Renders as a floating panel over the surface rather than in the flow.

## Example — default

```tsx
import { DiagramInspector } from '@misoto22/design/diagrams'

<DiagramInspector
  eyebrow="Service"
  title="API"
  description="FastAPI, behind the load balancer. Owns every read the cache misses."
  facts={[
    { label: 'Port', value: '8000', mono: true },
    { label: 'Region', value: 'ap-southeast-2', mono: true },
    { label: 'Id', value: 'api', mono: true },
  ]}
  links={[
    { direction: 'in', label: 'HTTPS', peer: 'CloudFront' },
    { direction: 'out', label: 'read-through', peer: 'Redis' },
    { direction: 'out', label: 'SQL', peer: 'Postgres' },
  ]}
  onClose={() => {}}
/>
```