# SemanticPeek

Group: Understanding

An idea's summary, one gesture away — hover or focus with a mouse, the first tap on touch. It "semantically peeks" out of the node.
- Provide children (one or two sentences — underline terms with `SemanticAnchor`), optional `title`, `color` (the idea's topic) and `source`.
- Actions, right to left by weight: **Step inside** (`onStepInside`, only when the idea has rings — enters its inner layer) and **Go deeper** (`onGoDeeper` — opens the `GoDeeper` facets for this idea). When there is no Step inside, Go deeper becomes the primary pill. `learnMoreHref` adds an external *Learn more ↗*.
- `variant="card"` (default) floats beside the node, never over it: hand-cut corners and an offset sheet in the topic color make it read as a note, not a dialog. `variant="sheet"` docks to the bottom of the canvas on touch: grab handle (tap or drag up to expand, down to collapse or dismiss), ✕ via `onClose`, 44px actions; a non-modal `dialog` labelled by its title.
- `onBack` + `backLabel` add "‹ backLabel" above the content — used when a term's definition takes over the sheet.
- Formerly `FactCard`; that name remains as a deprecated alias for one release (`onDeeper` → `onStepInside`). See *Canvas language › Understanding* for how peek, anchor and Go deeper fit together.


## Props

```ts
export interface SemanticPeekProps { title?: string; color?: NodeColor; source?: string; children: ReactNode;
```

## Use

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