Understanding

SourcesPanel

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

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

Use

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

Source: components/src/ · Guidelines: components/catalog/SourcesPanel/README.md