big-picture · staging

Capability 4 — one folder → one bundle → three custom elements. The composite <bp-big-picture> stacks the Cat-1 <bp-research-header> (search + dropdowns) ON TOP of the Cat-2 <people-groups-grid> (the REAL live grid) and wires them via props/events: searching / picking a dropdown in the header filters the grid below it, and the header shows the live matched count. The grid's OWN search + dropdowns are turned off in the composite (show-search="false") so it is driven purely by props. Proves deployment method 3 (direct-JS + props/events + SRI).

1 · The composite dashboard (nested elements wired internally)

<bp-big-picture> — header event → parent → table props

2 · Direct-JS host-page wiring (each element embedded separately, wired by THIS page)

host page listens for the header's research-filter event and sets the grid's query/wagf-region/wagf-block/rop1/religion attributes