# Tasks — react-network-libp2p-demo

## Phase 1: Scaffold

- [ ] 1.1 Create `packages/react/react-network-libp2p-demo/`.
- [ ] 1.2 `package.json` at `0.1.0`, peer-deps on `react`, `react-dom`, `@suaveplan/network-transport-libp2p`.
- [ ] 1.3 Storybook + testing-dom configuration.

## Phase 2: Component extraction

- [ ] 2.1 Read upstream `libp2p-demo.tsx` (749 LOC).
- [ ] 2.2 Split into per-concern subcomponents ≤300 LOC each (panels, tabs, controls).
- [ ] 2.3 Sibling `.md` per component file.

## Phase 3: Bootstrap-list prop

- [ ] 3.1 Remove any hardcoded bootstrap defaults.
- [ ] 3.2 Accept bootstrap list as a required React prop.

## Phase 4: Storybook stories

- [ ] 4.1 Port `libp2p-demo.stories.tsx`.
- [ ] 4.2 Add `default` + `playground` + variant stories per subcomponent.

## Phase 5: Tests

- [ ] 5.1 Snapshot tests via `@suaveplan/testing-dom`.
- [ ] 5.2 Interaction tests for key flows (dial, message, disconnect).

## Phase 6: Verification

- [ ] 6.1 `bunx turbo lint typecheck --filter=@suaveplan/react-network-libp2p-demo` green.
- [ ] 6.2 No source file > 300 LOC.
- [ ] 6.3 Storybook covers every subcomponent.
- [ ] 6.4 `MANIFEST.md` regen.
- [ ] 6.5 `STATUS.md` row added.

## Pre-archive checklist

- [ ] Row 1 — Phase 6 green.
- [ ] Row 2 — Demo runs against a user-supplied bootstrap list.
- [ ] Row 3 — Folder archived.