whole-library reference

Architecture & API Pipelines

A reference for how the 24 source files reference each other and which files each exported API call passes through.

Uses React 19.2's <Activity mode="visible|hidden"> to keep structurally different mobile/desktop trees mounted with state preserved across breakpoint switches. Scroll position, input values, and open states survive the switch. Automatically falls back to a clean swap on runtimes without Activity.
React 19.2 · <Activity> 7 public APIs 24 source files · 4 layers integer px breakpoints SSR-safe · useSyncExternalStore
layered architecture

4 Layers

Imports always flow from upper layers → down to lower layers (no cycles). Lower layers are more pure and less React-dependent. Click a chip to select that file in the graph below.

file reference graph

File Reference Graph

Click a node to highlight the files it imports (orange) and the files that import it (blue). Dashed lines are type-only imports.

← Left = pure / leaf  ·  Right = top-level (barrel index.ts). Solid line = value import, dashed = type-only import, bold = re-export from index.ts.
consumer api → data pipeline

Usage Examples & Data Pipelines per API

For each of the 7 exported APIs, shows consumer code and the file pipeline each call travels through. Click a file chip in any step to select that file in the graph above.

file-by-file

File Contents & Roles

Role and source code for all 24 source files (tests excluded). Click a header to expand. File chips in the graph and pipelines, and the "View source" button in the detail panel, also navigate here.