Surface

Mobile app

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.

How it works

• 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

14 of 14 features that apply here are UX ready · 1 N/A · Feature matrix for Mobile app

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:

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, 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.

Prototype source: components/catalog/MobileApp/preview.html · Build notes: docs/platforms/mobile.md