Themed map

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Themed map" pattern (@codeatlasdev/ui demo #800, map/stage) in my app.

Call get_demo({ ids: ["#800"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + maplibre-gl.
Use: A map-first screen whose basemap and data layers must follow the app's light and dark theme.

Keep these library parts, with the props and tokens the demo uses:
- MapControls, MapStage, mapColors, rgbaCss from "@codeatlasdev/ui/map"

Behaviour to keep:
- `<MapStage` with `{styles}`, `{layers}`, `label="Store map"`, `padding={{ top: 24, right: 24, bottom: 24, left: 24 }}` and a `fit` of the southeast Brazil bounds
- `styles` is a `$derived.by` whose `light` and `dark` entries are one inline style with a single `background` layer painted with `rgbaCss(mapColors().surface)`, so the demo needs no tiles, token or hex color
- `layers` is a `$derived.by` that calls `mapColors()` and returns a deck.gl `ScatterplotLayer` with `getFillColor: c.brandMuted` and `getLineColor: c.brand`, so it re-themes on scheme or preset change
- `<MapControls />` as the child of `MapStage`
- The stage box is `360px` high with `var(--ca-radius-lg)` corners

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• MapControls @codeatlasdev/ui/map
• MapStage @codeatlasdev/ui/map

How it is built

• `<MapStage` with `{styles}`, `{layers}`, `label="Store map"`, `padding={{ top: 24, right: 24, bottom: 24, left: 24 }}` and a `fit` of the southeast Brazil bounds
• `styles` is a `$derived.by` whose `light` and `dark` entries are one inline style with a single `background` layer painted with `rgbaCss(mapColors().surface)`, so the demo needs no tiles, token or hex color
• `layers` is a `$derived.by` that calls `mapColors()` and returns a deck.gl `ScatterplotLayer` with `getFillColor: c.brandMuted` and `getLineColor: c.brand`, so it re-themes on scheme or preset change
• `<MapControls />` as the child of `MapStage`
• The stage box is `360px` high with `var(--ca-radius-lg)` corners

Related

• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input
• #004 Sizes component/input
• #005 States component/input
• #006 Variants component/input