# Feature: Tankekart (radial grafvisning)

## Konsept

Tankekart-panelet viser noder og edges i radial layout — en
rotnode i sentrum, relaterte noder rundt, edges som linjer.
Det er kunnskapsgrafen i en annen layout: radial i stedet
for force-directed.

Ingen ny backend. Ingen nye tabeller. Ren frontend-visning
av eksisterende grafdata via WebSocket.

## Brukeropplevelse

1. Bruker åpner tankekart-panel i arbeidsflaten
2. Rotnoden er kontekst-headerens aktive node (eller manuelt valgt)
3. Relaterte noder (1-2 hopp) hentes og vises radialt
4. Klikk på en node → den blir ny rot (zoom inn)
5. Dobbeltklikk → åpne noden i editor/detalj
6. Drag fra node til node → opprett edge
7. Drag node ut av kartet → opprett ny node (universell overføring)

## Layout

```
              ┌─ Episode 42
              │
    ┌─ Podcast ──── Episode 41
    │         │
    │         └─ Show notes
    │
Sidelinja ─── Redaksjonen ─── Kanban
    │
    │         ┌─ Vegard
    └─ Team ──┤
              └─ Trond
```

Radial: rot i sentrum, barn i sirkel rundt, barnebarn lenger ut.
Alternativt: tree-layout (hierarkisk, topp-bunn).

## Datakilder

- Noder og edges fra WebSocket (sanntid, allerede tilgjengelig)
- Filtrer på edge-typer: `belongs_to`, `mentions`, `member_of`,
  `source_material` — konfigurerbart per bruker
- Dybde: 1-3 hopp fra rot (konfigurerbart)

## Interaksjon

| Handling | Resultat |
|----------|---------|
| Klikk node | Ny rotnode (re-layout rundt denne) |
| Dobbeltklikk | Åpne i editor/detalj |
| Drag node → node | Opprett edge (mentions) |
| Drag node → utenfor | Universell overføring |
| Scroll/pinch | Zoom inn/ut |
| Drag bakgrunn | Pan |
| Hover node | Vis tittel + node_kind + antall edges |

## Visuell stil

- Noder som sirkler/bokser, fargekodet etter `node_kind`
- Edges som linjer, stiplede for `mentions`, heltrukne for `belongs_to`
- Rotnode visuelt fremhevet (større, annen farge)
- Privacy-markering: 🔒 på private noder (se `docs/features/nodereferanser.md`)
- Animert overgang ved rot-bytte

## Trait

`mindmap`-trait på samlingsnoder:

```jsonc
{
  "traits": {
    "mindmap": {
      "default_depth": 2,
      "layout": "radial",
      "edge_types": ["belongs_to", "mentions", "source_material"]
    }
  }
}
```

Også tilgjengelig som frittstående panel i arbeidsflaten
(uten trait — bare velg en node som rot).

## Hva det IKKE er

- Ikke et tegneverktøy (det er whiteboard)
- Ikke fri plassering (det er canvas/arbeidsflaten)
- Ikke force-directed graf (det er kunnskapsgraf-visningen)
- Det er en **automatisk layoutet graf med rot** — data-drevet

## Teknisk

- Svelte-komponent med SVG eller Canvas
- Layout: `d3-hierarchy` for tree, trigonometri for radial
- Data fra eksisterende WebSocket-stores
- BlockShell-panel med fullskjerm/resize
- Responsivt: på mobil vises som vertikal trevisning

## Bygger på
- `docs/features/canvas_primitiv.md` — pan/zoom
- `docs/features/kunnskapsgraf_og_relasjoner.md` — grafdata
- `docs/features/universell_overfoering.md` — drag ut av kart
- `docs/retninger/interaksjonsmodell.md` — drag-and-drop grammatikk
- `docs/features/nodereferanser.md` — privacy-markering
