# SourcesPanel

Group: Understanding

What a Visualli is made from: every source that was brought in — PDFs, pages, videos, notes, images — one foldable row each, with the passages the map used and the ideas built from them.
- Opened from **Sources** in the top-right toolbar (paperclip + count). It replaces the old "View source" (`</>`): people want their material, not the file format. The raw `.visualli` file lives in *Export → .visualli file*.
- Provide `sources`: `{ id, kind, name, meta?, status?: 'ready' | 'reading' | 'error', error?, href?, text? (pasted notes), thumbnail? (images), passages?: [{ id, quote, locator?, ideas: [{ id, label, color }] }] }`.
- **Rows** are disclosure buttons (56px): a type icon tile, the name, then "PDF · 18 pages · added Oct 3 · 4 ideas". The first source opens by default (`defaultOpen` to change it); several can be open. *Reading…* shows a spinner; an error says what failed and what to do, in `danger`, with an icon.
- **Opened**, a source shows its note text or image, then **Used in this map**: each passage as a quote with its locator (`p. 5`, `12:40`), and ↳ chips for the ideas built from it. Hovering or focusing a passage calls `onHighlight(ideaIds)` — pass that to `VisualMap.highlight` so those ideas light up and the rest dim. A chip calls `onShowIdea(id)`. Then *Open original / page / video ↗* and a ⋯ menu (`sourceActions`: Download original, Replace…, Remove from this Visualli).
- Ends with **Bring another source** (`onBringMore`) — the brand's verb for adding.
- `layout` like `GoDeeper`: `panel` (web, docked right), `sheet` (touch), `stack` (MCP, compact extension). Render it through `VisualMap`'s `aside` prop so it gets the same slot, insets and layout choice; Go deeper and Sources share that slot, one at a time.


## Props

```ts
export interface SourcesPanelProps { sources: MapSource[]; layout?: 'panel' | 'sheet' | 'stack'; onClose?: () => void; onBack?: () => void; backLabel?: string;
```

## Use

```ts
import { SourcesPanel } from '@visualli/design-system/components';
```