# Mobile app

Surface. Prototype: previews/MobileApp.html

The phone app as one interactive prototype: full-bleed canvas, title pill, the Composer and receipts pinned at the bottom, and the Vault as a bottom sheet over the map. Everything the mobile app does works in place.
- **Map:** tap an idea to peek, tap a term to define it, tap again or *Step inside* to open its layer; Go deeper and Map it open as sheets; drag an idea to move it (a tip in the chat offers Edit). The map is pinned to touch (`interaction="touch"`) so a mouse behaves like a finger.
- **Top bar:** Vault (opens the sheet), the title, Edit and Sources (both as sheets; the Composer steps aside while any sheet or selection is open — `onSelect`).
- **Chat:** type and send — Visualli works (the ThinkingTree), then a receipt with Undo; *+* attaches a file or link. The last two turns stay above the Composer.
- **Vault sheet:** open another Visualli (*Opening…* then its map), *New Visualli* (an empty canvas — "Bring anything." — whose first message grows the map and adds it to the vault), ⋯ to rename, duplicate, export or delete, and *Comfort & appearance* in the footer.
- Demo note: every Visualli opens the same sample map.


## Features

- VI-001 Visualize this page (toolbar, right-click) · Open in Visualli: N/A (Share a link into Visualli from the phone's share sheet (not designed yet))
- VI-002 Map: bloom, step inside, depth trail: UX ready
- VI-003 Touch: tap to peek, tap again to step inside: UX ready
- VI-004 SemanticPeek (an idea's summary): UX ready
- VI-005 SemanticAnchor (term definitions): UX ready
- VI-006 Go deeper (facets for an idea or term): UX ready
- VI-007 Map it (inside this map / new Visualli): UX ready
- VI-008 Movable ideas and Reset layout: UX ready
- VI-009 Edit mode (ideas, connectors, groups): UX ready
- VI-010 Sources panel: UX ready
- VI-011 Export: single-page PDF, multi-page PDF, .visualli file (no share link): UX ready
- VI-012 Chat: Composer and receipts: UX ready
- VI-013 Vault (library of Visuallis): UX ready
- VI-014 Comfort & appearance: UX ready
- VI-015 Tips in the chat stack (e.g. "Layout saved. Want to edit the content too?"): UX ready

## Build it

Mobile shares **tokens, guidelines, vocabulary and component APIs** with the web, not DOM components.

### Tokens

`@visualli/design-system/tokens` exports a typed object generated from `tokens/tokens.json`:

```ts
import { tokens, typeStyles, fontFamilies } from '@visualli/design-system/tokens';

const theme = tokens[colorScheme === 'dark' ? 'dark' : 'light'];
<View style={{ backgroundColor: theme.canvas, borderRadius: parseFloat(theme['radius-lg']) }} />
```

Values are CSS strings (`"16px"`, `"#f6f3ee"`, `"240ms"`); convert units at the edge. Comfort palettes are available as the other theme ids.

### Components

When mobile work starts, add React Native components under `components/native/`, mirroring the web prop names in `components/dist/index.d.ts` so docs and designs describe one API. The blob, ring and connector geometry in `components/src/blob.ts` is plain math and can be shared as-is with `react-native-svg`.

### Interaction

Touch follows *tap to peek, tap again to step inside* (see [Canvas language](../guidelines/canvas-language.html), section Navigation). On web, `VisualMap` does this for you: `interaction="auto"` reads the pointer in use via `usePointerMode`, the fact card becomes a bottom sheet (`FactCard variant="sheet"`), and `onSelect` lets the screen hide the Composer while a sheet is up. Native builds should reproduce the same gestures and timings: first tap selects and opens the sheet, second tap on the same idea dives, *Go deeper* opens as a sheet below the top bar with *‹ back* to the peek, swipe-down to dismiss past 80px, press-and-move past 10px drags the idea (connectors follow) and the drop is saved to the node's `position`.

### Layout rules

Full-bleed canvas, Composer pinned above the home indicator, the Vault as a bottom sheet, touch targets ≥ 44px. See [Surfaces](../guidelines/surfaces.html).