# Data and media - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/dados`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

The surfaces that bring a DEPENDENCY. Only include the one the page actually
uses.

```vue
<echo-chart :option="option" :summary="t('chartSummary')" height="280px" />
<echo-map :lat="-25.5" :lng="-54.6" :zoom="12" :markers="PINS" :summary="t('…')" />
<echo-map-google :lat="-25.5" :lng="-54.6" :zoom="12" :markers="PINS" :summary="t('…')" />
<echo-carousel :label="t('slides')" loop autoplay>…</echo-carousel>
<echo-editor v-model="html" :label="t('body')" />
<echo-player :src="video" />
<echo-qr-code value="https://example.com" :size="180" />
<echo-barcode value="ECHO-2026-0001" format="CODE128" />
```

The chart's `summary` is not decoration: it is what a screen reader announces in
place of the canvas. A chart with no summary is a mute rectangle.

Weights: echarts (chart), leaflet (map), swiper (carousel), tiptap (editor),
plyr (player). The last three load on the client only.

## The two maps

`<echo-map>` is Leaflet + OpenStreetMap: it costs nothing, needs no account and
ships with the bundle - it is the default. `<echo-map-google>` is the Google API
and needs the browser key `NUXT_PUBLIC_GOOGLE_PLACE_API_KEY`; without it, it
renders the explanation instead of a grey rectangle.

Both follow the theme, by different routes:

- Google is not dressed by CSS. Its palette is a JSON array, and ours is built
  from the tokens (`--panel`, `--fg2`, `--line`, `--brand-deep`) at runtime -
  switching theme or palette repaints the map;
- OSM's tiles are ready-made images in a single light set. In the dark theme
  they go through `invert(1) hue-rotate(180deg)` with lowered contrast and
  saturation, applied to the `.leaflet-tile-pane` ALONE: over the whole map the
  filter would invert markers and popups, which are already in the theme.

---

Source: `app/components/echo/{Chart,Map,MapGoogle,Carousel,Editor,Player,QrCode,Barcode}.vue`