CCNA: OSPF adjacency formation (network-xray gallery)

Show the 7 states an OSPF adjacency goes through from Down to Full in a lecture, without booting Cisco / FRR. Switch states with the buttons. Click "Open the router" to open the cylinder and watch the adjacency form inside (hello, LSDB gather, tunnel).

1. Self → peer: Hello sent

2. Peer → self: Hello received

3. Bidirectional (peer lists our RID)

// load: xray-core.js (engine) + xray-api.js (facade) + ccna-data.js
var view = xrayCore.renderTopology('#topo', CCNA_CONFIG, { topology: TOPO });

// each state button = one snapshot
view.applyState(CCNA_STATES.exchange);   // → LSA gather animation plays
view.applyState(CCNA_STATES.full);       // → tunnel + LSDB green, gather stops

// "inside the router" cylinder:
view.openDeepDive();

Field shapes: see DATA-CONTRACT.md. Descriptive only — it visualizes OSPF FSM state, it is not a simulator. The 7 states map to the engine's neighbor_state field; ExStart/ Exchange/Loading drive the in-cylinder LSA gather, Full shows the established tunnel.
The live ping/packet animation is hidden here (this demo is about adjacency, not traffic).