# OpenSpec Change: enterprise-gaming-r3f-networking

- **Change ID**: enterprise-gaming-r3f-networking
- **Package**: `@suaveplan/r3f-networking`
- **Category**: gaming/gameplay
- **Target path**: `gaming/gameplay/r3f-networking`
- **Status**: SUPERSEDED-BY-GENESIS-WAVE
- **Date**: 2026-04-24

---

## Summary

Deliver `@suaveplan/r3f-networking` on the genesis branch from scratch at enterprise quality. The package provides multiplayer state synchronization for React Three Fiber: `NetworkedTransform` component applying snapshot interpolation (lerp/slerp per-axis with configurable extrapolation buffer), `NetworkedAnimator` syncing animation state across clients, `ClientPrediction` applying local-authoritative input with server reconciliation, `LagCompensation` utility for rollback-based hit detection, and `useNetworkPing` hook for RTT display. Built on WebSocket transport from `@suaveplan/game-server`. Genesis adds 100% coverage and Storybook stories.

---

## Available workspace deps

`@suaveplan/game-server`, `@suaveplan/game-state-schemas`, `@suaveplan/error`, `@suaveplan/types`, `@suaveplan/timing`, react, `@react-three/fiber`, three.

---

## Public API surface

```ts
function NetworkProvider(props: NetworkProviderProps): JSX.Element
// url, tickRate, interpolationDelay, onConnect, onDisconnect

function NetworkedTransform(props: NetworkedTransformProps): JSX.Element
// networkId, interpolation: 'lerp' | 'hermite', extrapolate

function NetworkedAnimator(props: NetworkedAnimatorProps): JSX.Element
// networkId, mixer

function ClientPrediction(props: ClientPredictionProps): JSX.Element
// networkId, applyInput, rollback

function useNetworkPing(): { ping: number; jitter: number }
function useNetworkProvider(): NetworkContext
// send(msg), latency, connected, tick
```

---

## File layout

```text
gaming/gameplay/r3f-networking/
  package.json / tsconfig.json / vitest.config.ts
  src/
    index.ts / error-codes.ts
    types/common.ts + md
    context/network-provider.tsx + md + test
    interpolation/ (snapshot-buffer.ts + md + test, hermite.ts + md + test)
    hooks/use-network-ping.ts + md + test
    components/
      NetworkedTransform/ (tsx + md + test + stories + index)
      NetworkedAnimator/ (tsx + md + test + stories + index)
      ClientPrediction/ (tsx + md + test + stories + index)
  tests/integration.test.ts
```