diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 1c5a96907..3e8bc5e19 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -69,6 +69,134 @@ jobs:
             echo "########## $f"; tail -80 "$f"
           done || true
 
+      # -----------------------------------------------------------------------
+      # Web UI (WebUI/). Build the JS/Python components against the freshly
+      # built kernel, then bring the whole stack up (SecondoMonitor + FastAPI
+      # bridge) and confirm SECONDO answers a real query through the REST
+      # interface. The headless-browser end-to-end tests (WebUI/frontend/e2e)
+      # are intentionally NOT run here.
+      # -----------------------------------------------------------------------
+      - name: Build the SECONDO client library
+        # The bridge's native module links libsecondo.a, which the top-level
+        # make does not build.
+        run: make -C apis/api_cpp/cs
+
+      - name: Setup Node
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24'
+          cache: 'npm'
+          cache-dependency-path: WebUI/frontend/package-lock.json
+
+      - name: Build the WebUI frontend
+        working-directory: WebUI/frontend
+        run: |
+          npm ci
+          npm run build
+
+      - name: Build and test the WebUI backend
+        # Builds the pybind11 module over libsecondo.a and runs the backend
+        # unit tests (which fake the SECONDO connection, so no monitor needed).
+        working-directory: WebUI/backend
+        run: |
+          python3 -m venv .venv
+          . .venv/bin/activate
+          pip install -r requirements.txt
+          make -C native
+          python -m pytest -q
+
+      - name: Restore the berlintest database
+        # A dedicated database home for the WebUI monitor, shared with the
+        # following steps via $GITHUB_ENV.
+        run: |
+          echo "${GITHUB_WORKSPACE}/bin" >> "$GITHUB_PATH"
+          echo "SECONDO_CONFIG=${GITHUB_WORKSPACE}/bin/SecondoConfig.ini" >> "$GITHUB_ENV"
+          echo "SECONDO_PARAM_SecondoHome=${RUNNER_TEMP}/webui-dbs" >> "$GITHUB_ENV"
+          export PATH="${GITHUB_WORKSPACE}/bin:${PATH}"
+          export SECONDO_CONFIG="${GITHUB_WORKSPACE}/bin/SecondoConfig.ini"
+          export SECONDO_PARAM_SecondoHome="${RUNNER_TEMP}/webui-dbs"
+          mkdir -p "$SECONDO_PARAM_SecondoHome"
+          cd bin
+          printf 'create database berlintest;\nrestore database berlintest from berlintest;\nclose database;\nquit;\n' \
+            | ./SecondoTTYBDB
+
+      - name: Start the SECONDO monitor
+        working-directory: bin
+        run: |
+          nohup ./SecondoMonitor -s > "${RUNNER_TEMP}/secondo-monitor.log" 2>&1 &
+          echo "SECONDO_MONITOR_PID=$!" >> "$GITHUB_ENV"
+          for i in $(seq 1 60); do
+            if (exec 3<>/dev/tcp/127.0.0.1/1234) 2>/dev/null; then
+              exec 3>&- 3<&-; echo "Monitor is listening on port 1234"; exit 0
+            fi
+            sleep 1
+          done
+          echo "SECONDO monitor did not come up"; cat "${RUNNER_TEMP}/secondo-monitor.log"; exit 1
+
+      - name: Start the WebUI backend bridge
+        working-directory: WebUI/backend
+        run: |
+          . .venv/bin/activate
+          nohup uvicorn app.main:app --host 127.0.0.1 --port 8000 \
+            > "${RUNNER_TEMP}/webui-backend.log" 2>&1 &
+          echo "WEBUI_BACKEND_PID=$!" >> "$GITHUB_ENV"
+
+      - name: Query SECONDO through the REST interface
+        run: |
+          # Wait for the bridge to accept requests.
+          for i in $(seq 1 60); do
+            if curl -sf http://127.0.0.1:8000/api/health > /dev/null; then break; fi
+            if [ "$i" = 60 ]; then
+              echo "Backend did not come up"; cat "${RUNNER_TEMP}/webui-backend.log"; exit 1
+            fi
+            sleep 1
+          done
+
+          # The first SECONDO command races the monitor's per-connection
+          # server fork, so retry until the catalog lists BERLINTEST.
+          echo "== /api/databases =="
+          dbs=""
+          for i in $(seq 1 30); do
+            dbs=$(curl -sf http://127.0.0.1:8000/api/databases || true)
+            if echo "$dbs" | grep -q BERLINTEST; then break; fi
+            if [ "$i" = 30 ]; then
+              echo "BERLINTEST not listed (last response: ${dbs:-<none>})"; exit 1
+            fi
+            sleep 1
+          done
+          echo "$dbs"
+
+          # Open the database and run a real spatial query, keeping the session
+          # cookie so both land on the same SECONDO connection.
+          jar="${RUNNER_TEMP}/webui-cookies.txt"
+          curl -sf -c "$jar" -b "$jar" -X POST http://127.0.0.1:8000/api/query \
+            -H 'Content-Type: application/json' \
+            -d '{"command":"open database berlintest"}' > /dev/null
+
+          echo "== query mehringdamm =="
+          res=$(curl -sf -c "$jar" -b "$jar" -X POST http://127.0.0.1:8000/api/query \
+            -H 'Content-Type: application/json' \
+            -d '{"command":"query mehringdamm"}')
+          echo "$res"
+          # The point value and its GeoJSON conversion must both be present.
+          echo "$res" | grep -q '(point (9396.0 9871.0))'
+          echo "$res" | grep -q '"geojson"'
+          echo "SECONDO answered a query through the REST bridge."
+
+      - name: Stop the WebUI stack
+        if: always()
+        run: |
+          kill "${WEBUI_BACKEND_PID:-}" 2>/dev/null || true
+          kill "${SECONDO_MONITOR_PID:-}" 2>/dev/null || true
+
+      - name: Show WebUI logs on failure
+        if: failure()
+        run: |
+          echo "########## SECONDO monitor"
+          cat "${RUNNER_TEMP}/secondo-monitor.log" 2>/dev/null || true
+          echo "########## WebUI backend"
+          cat "${RUNNER_TEMP}/webui-backend.log" 2>/dev/null || true
+
    build-macos:
     # Builds the C++ kernel + TTY, the Java GUI, the embedded-Prolog optimizer
     # engine and the JPL optimizer server (OptServer), then runs the full test
diff --git a/WebUI/.gitignore b/WebUI/.gitignore
new file mode 100644
index 000000000..361d19c1f
--- /dev/null
+++ b/WebUI/.gitignore
@@ -0,0 +1,18 @@
+# Python
+backend/.venv/
+__pycache__/
+*.pyc
+.pytest_cache/
+
+# Native build artifacts
+backend/native/*.so
+backend/native/*.o
+
+# Node / Vite
+frontend/node_modules/
+frontend/dist/
+frontend/e2e/out/
+frontend/.vite/
+
+# Local logs
+*.log
diff --git a/WebUI/README.md b/WebUI/README.md
new file mode 100644
index 000000000..a551d9e09
--- /dev/null
+++ b/WebUI/README.md
@@ -0,0 +1,304 @@
+# SECONDO Web UI
+
+A modern web replacement for the Java Swing **HoeseViewer**: send SECONDO
+commands, view results as text and (from Milestone 2 on) on a map, and animate
+moving objects on a timeline.
+
+See the design/plan write-up for the full stack rationale and milestone
+breakdown. This README covers running what exists today.
+
+## Architecture
+
+```
+Browser (React + Vite)
+   │  HTTP  /api/*
+   ▼
+FastAPI bridge (backend/)
+   │  in-process call
+   ▼
+secondo_native  (pybind11 wrapper, backend/native/)
+   │  links libsecondo.a
+   ▼
+SECONDO C++ client  (apis/api_cpp/cs)  ──TCP 1234──►  SecondoMonitor
+```
+
+The bridge is mandatory: a browser cannot speak SECONDO's raw TCP nested-list
+protocol. Crucially, the **wire protocol is never reimplemented** — the pybind11
+module wraps the in-tree, prebuilt reference client (`apis/api_cpp/cs`,
+`libsecondo.a`). Only nested-list *text* crosses into Python, where it is turned
+into GeoJSON (Milestone 2+).
+
+## Status
+
+**Milestone 1 (pipeline spike) — done & verified end-to-end.**
+Connect · `list databases` · `open database` · run a command · get the result
+nested list as text, with SECONDO errors surfaced to the UI. A command console
+frontend drives it.
+
+**Milestone 2 (static spatial rendering) — done & verified end-to-end.**
+The bridge parses the result nested list and converts `point` / `points` /
+`line` / `region` / `rect` (and relations carrying such attributes) into
+GeoJSON (`app/nlparser.py`, `app/geojson.py`). The frontend renders it with
+**deck.gl** in a Cartesian orthographic view, auto-fit to the data bounds, with
+hover tooltips for relation attributes. Verified in a headless browser
+(`npm run e2e`) drawing point, line and region from berlintest onto the WebGL
+canvas.
+
+**Milestone 3 (moving objects + timeline) — done & verified end-to-end.**
+The bridge converts `mpoint` (and relations of `mpoint`, e.g. `Trains`) into
+deck.gl **TripsLayer** data — per continuous run a `path` of waypoints and
+matching `timestamps`, plus a `timeDomain` (`app/temporal.py`). Instant strings
+(`2003-11-20-06:03:52.685`) are parsed to POSIX seconds. The frontend animates a
+single `currentTime` clock via `requestAnimationFrame` (`useAnimator`, replacing
+the HoeseViewer's Swing timer) with a play/pause/scrub/speed timeline; the
+moving object's position is interpolated on the GPU. Verified in a headless
+browser (`npm run e2e -- animation`): the trail head moves >500px along the
+Trains trajectories between t=20% and t=80% of the domain.
+
+**Milestone 4 (layers, styling, selection) — done & verified end-to-end.**
+Query results now accumulate as **layers** instead of replacing one another
+(`layers/useLayers.ts`). A **layers panel** (`layers/LayersPanel.tsx`) toggles
+visibility, reorders draw order, removes layers, and edits each layer's style
+(color, opacity, point radius, line width, region fill) via a category editor.
+The map renders N styled layers, auto-fits to their combined bounds, animates
+all visible moving-object layers on one shared clock, and supports
+**click-to-select** a feature with a details panel of its attributes. Verified
+in a headless browser (`npm run e2e -- layers`): two layers listed, recolor
+updates the swatch, hiding a layer changes what's drawn, reordering swaps the
+top layer, and clicking a region shows its `Name`.
+
+**Milestone 5 (catalog, geographic basemap, export) — done & verified end-to-end.**
+- **DB & object browser** (`catalog/Catalog.tsx`, backend `/api/objects` +
+  `app/catalog.py`): pick a database to open, then click a typed object to query
+  it; objects show a kind hint (spatial ◆ / temporal ◷) and filter box.
+- **Geographic MapLibre + OSM basemap** (`map/MapView.tsx`): when a result's
+  coordinates fall within lon/lat ranges the map switches from the Cartesian
+  orthographic view to a geographic `MapView` with a raster **OpenStreetMap**
+  basemap (no API key), deck.gl layers reprojected to `LNGLAT`; otherwise it
+  stays Cartesian. Also **fixed `sline`** decoding (its value wraps the segment
+  list with a direction flag).
+- **Export**: the layers panel exports all visible layers (static features +
+  moving-object trips as LineStrings) as a downloadable `.geojson`
+  (`layers/exportGeoJSON.ts`).
+- Verified in a headless browser (`npm run e2e -- catalog`): catalog lists
+  databases, opening SYMTRAJSMALL lists 27 objects, clicking `EdgesExtDo`
+  (lon/lat) activates geographic mode and loads real OSM tiles with the road
+  segments aligned to the Hagen street grid, and export yields a valid
+  FeatureCollection.
+
+**Milestone 6 (moving regions + value plots) — done & verified end-to-end.**
+- **`mregion`** (`app/temporal.py`, `map/MapView.tsx`): a moving region is units
+  of faces whose *vertices* each move linearly (`xStart yStart xEnd yEnd`), so
+  the polygon is rebuilt at the current instant every frame — the same
+  piecewise-linear model as moving points. `mrain` / `msnow` drift across the
+  map on the timeline, and work under the BerlinMOD projection.
+- **`mreal` / `mint` / `mbool` value plots** (`app/temporal.py`,
+  `plots/PlotPanel.tsx`): scalar moving values are sampled into a series and
+  drawn as **small multiples** — one plot per measure, each with its own y
+  scale (never a second y-axis), coloured by its layer, directly labelled, with
+  a cursor and readout that track the timeline. A `ureal` unit is
+  `a·t² + b·t + c` (square-rooted when its flag is TRUE) with **t in days** —
+  verified against SECONDO's own `val(… atinstant …)` to the 8th decimal.
+  Objects with no geometry (e.g. `mreal5000`) plot without touching the map.
+
+### A note on coordinates & the basemap
+
+SECONDO spatial values carry coordinates in the dataset's *own* world system
+(berlintest uses a local planar system, not WGS84), so the default view is a
+non-geographic **Cartesian** one — correct for any dataset, with no basemap.
+Geographic rendering on an **OSM basemap** is opt-in on top of that, exactly as
+the HoeseViewer treats its OSM background: automatic for datasets already in
+lon/lat, and via the BerlinMOD transform for berlintest. See **Projections**
+below.
+
+## Prerequisites
+
+- A built SECONDO tree with the environment sourced (`source ~/.secondorc`, which
+  sets `SECONDO_BUILD_DIR`, `SECONDO_PLATFORM`, `BERKELEY_DB_DIR`).
+- The prebuilt client lib `apis/api_cpp/cs/lib/libsecondo.a` (built via
+  `cd apis/api_cpp/cs && make`).
+- Python 3.11+ and Node 20.19+ (required by Vite 8).
+
+## Build & run
+
+### 1. Backend (native module + FastAPI)
+
+```bash
+source ~/.secondorc
+cd WebUI/backend
+python3 -m venv .venv && . .venv/bin/activate
+pip install -r requirements.txt
+
+# Build the pybind11 wrapper over libsecondo.a
+make -C native
+
+# Run the bridge (reads SECONDO_HOST/PORT/CONFIG from env; defaults to
+# 127.0.0.1:1234 and $SECONDO_BUILD_DIR/bin/SecondoConfig.ini)
+uvicorn app.main:app --host 127.0.0.1 --port 8000
+```
+
+### 2. A running SecondoMonitor
+
+```bash
+cd $SECONDO_BUILD_DIR/bin
+./SecondoMonitor -s      # listens on port 1234
+```
+
+### 3. Frontend
+
+```bash
+cd WebUI/frontend
+npm install
+npm run dev              # http://localhost:5173  (proxies /api -> :8000)
+```
+
+Open http://localhost:5173 and try (each spatial result draws on the map):
+
+```
+open database berlintest
+query mehringdamm      # a point
+query BGrenzenLine     # district boundaries (line)
+query thecenter        # a region
+query Flaechen feed head[5] consume            # a relation of regions
+query Trains feed head[3] project[Id, Trip] consume   # moving points -> animated
+```
+
+## Tests
+
+Backend unit/API tests (no live monitor required — the connection is faked):
+
+```bash
+cd WebUI/backend && . .venv/bin/activate
+python -m pytest            # nested-list parser, GeoJSON converter, API routes
+```
+
+Frontend end-to-end map test (needs the full stack up: monitor + bridge + vite):
+
+```bash
+cd WebUI/frontend
+npm run e2e                # the whole suite
+npm run e2e -- plots       # only checks whose name matches "plots"
+```
+
+`e2e/run.mjs` discovers every `e2e/verify-*.mjs`, runs them sequentially and
+reports pass/fail by **exit code** (each check is a standalone program), echoing
+the output of any failure. It preflights the stack and tells you what is missing
+rather than dumping navigation timeouts. Screenshots land in `e2e/out/`.
+Override with `CHROMIUM=`, `WEBUI_URL=`, `WEBUI_API=`.
+
+Current checks: `animation`, `catalog-basemap`, `catalog-race`, `console`,
+`layers`, `map`, `mpoint-fit`, `mregion`, `plots`, `projection`, `remove-layer`,
+`render-modes`, `ui-polish`, `viewfit`.
+
+Real end-to-end sanity check (needs a monitor + berlintest):
+`query mehringdamm` should return `(point (9396.0 9871.0))` and draw a dot.
+
+## Layout
+
+```
+backend/
+  native/        pybind11 wrapper (secondo_native.cpp, Makefile)
+  app/           FastAPI app: config, session, main,
+                 nlparser + geojson (static) + temporal (moving) + convert
+  tests/         parser / geojson / temporal / API tests + fixtures
+frontend/
+  src/api/       bridge client + types
+  src/catalog/   database + object browser
+  src/console/   command console (history recall, focus retention)
+  src/layers/    useLayers state + LayersPanel (style/reorder) + GeoJSON export
+  src/map/       deck.gl MapView (Cartesian OR geographic MapLibre + OSM)
+                 + projection (Berlin2WGS)
+  src/plots/     PlotPanel: mreal/mint value plots as small multiples
+  src/timeline/  useAnimator hook + Timeline controls
+  e2e/           headless-browser checks + run.mjs (the suite runner)
+```
+
+## Projections
+
+A projection selector on the map (top-left) controls how world coordinates are
+placed:
+
+- **Flat (no map)** — the Cartesian orthographic view (default); correct for any
+  dataset, no basemap.
+- **BerlinMOD → OSM** — applies SECONDO's `Berlin2WGS` BBBike→WGS84 transform
+  (`src/map/projection.ts`, constants from `Algebras/Spatial/Berlin2WGS.cpp`) to
+  every layer, so berlintest / BerlinMOD data lands at its real Berlin location
+  on the OpenStreetMap basemap (e.g. `mehringdamm` → 13.389°E, 52.495°N). Points,
+  lines, regions and moving objects are all projected.
+
+Datasets already in WGS84 (e.g. SYMTRAJSMALL `EdgesExtDo`) render on OSM
+automatically under "Flat" via lon/lat detection — leave the selector on Flat for
+those.
+
+## Layout
+
+The map is the product, so the layout defaults to giving it the space:
+
+- **Console docked to the bottom** by default (the map keeps the full width) and
+  kept short. Toggle it to the left with `⇦ left` / `⇩ bottom`.
+- **Query history collapses** (`▾ history`) to leave just the command input as a
+  slim bar — the history is rarely needed at length, and the map takes the
+  freed height.
+- **Catalog collapses** to a thin rail (`◂` / `▸`), handing its width to the map.
+- **All panels are drag-resizable** via the splitters between them.
+- Layout, sizes and collapse state persist in `localStorage`.
+
+Note that the map only auto-fits when new data arrives or the projection
+changes — editing a layer's style, toggling visibility or removing a layer
+leaves the view exactly where you put it. Use the `⤢` button to re-fit on demand.
+
+## UX / rendering options
+
+- **Loading indicator** while a query runs.
+- **Moving-object render mode** (per layer, in the style editor): `trail`
+  (animated fading trail), `positions` (a dot at each object's exact current
+  position — clearer when many objects move at once), or `both`. The layer's
+  **point radius** sizes the position dots and **line width** sizes the trail,
+  so those style controls now affect moving objects too, not just static ones.
+- Internal keys (`_attr`, `_layer`) are hidden from the map tooltip and the
+  selection details panel.
+- **View fitting & zoom controls:** the map view is controlled and auto-fits to
+  the visible data when new data arrives or the projection changes (so toggling
+  BerlinMOD→OSM re-centers instead of showing the whole world). On-map buttons
+  provide zoom in / zoom out / fit-to-data.
+
+## Notes
+
+- **Text encoding:** SECONDO stores strings in Latin-1 (ISO-8859-1). The native
+  binding decodes results as Latin-1 (lossless) rather than UTF-8, so names with
+  umlauts (e.g. `Stölpchensee`, `UFA-Filmbühne Wien` in berlintest `Kinos` /
+  `WFlaechen`) round-trip correctly instead of crashing the query.
+- **Error handling:** any backend failure returns a JSON body (global exception
+  handler), and the frontend parses responses defensively, so a server error can
+  never surface as a raw "JSON.parse: unexpected character" in the UI.
+- **Session cookie / request ordering:** API requests are serialized in a single
+  queue (`src/api/client.ts`) so the first request establishes the session
+  cookie before others fire. Without this, clicking a database immediately on
+  load could mint a second session and leave the object list empty. The catalog
+  also shows a loading spinner while objects are fetched and ignores repeat
+  clicks while a database is opening.
+- **Connections are a scarce resource.** Every session holds one SECONDO
+  connection and the server forks a process (`SecondoBDB -srv`) per connection,
+  so they must be reclaimed:
+  - the frontend releases its session on `pagehide` via `sendBeacon`;
+  - the backend reaps sessions idle beyond `SECONDO_SESSION_IDLE_TIMEOUT`
+    (default 1800s, swept every `SECONDO_SESSION_REAP_INTERVAL`, default 60s),
+    never reaping one that is mid-command;
+  - all sessions are closed on shutdown.
+- **The native binding must never hold the GIL during server I/O.**
+  `Connection`'s connect/terminate/`secondo` all release it. A connect that
+  hangs (slow or wedged SECONDO) would otherwise freeze the whole Python
+  process — including endpoints that never touch SECONDO.
+
+## Roadmap (next)
+
+- Streaming large results over the WebSocket (`/api/stream`) and query-history
+  persistence.
+- Include the optimizer (add it to the REST backend, implement the port), allow
+  to run SQL-line queries from the WebUI. In the existing UI, you need to start
+  the OptServer for that.
+- Additional projections beyond BerlinMOD as needed.
+- Remaining long-tail types (network/JNet, precise geometry, raster) still fall
+  back to the textual nested-list view, as `DsplGeneric` does in the Java GUI.
+- Implement a regular table view that also allows updates (like the UpdateViewer
+  in the Java GUI).
diff --git a/WebUI/backend/app/__init__.py b/WebUI/backend/app/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/WebUI/backend/app/catalog.py b/WebUI/backend/app/catalog.py
new file mode 100644
index 000000000..23fbc45cc
--- /dev/null
+++ b/WebUI/backend/app/catalog.py
@@ -0,0 +1,73 @@
+"""Parse SECONDO's ``list objects`` inquiry into a browsable catalog.
+
+Result shape:
+
+    (inquiry (objects (OBJECTS
+        (OBJECT <name> (<args>) (<typeexpr>))
+        ...)))
+
+For each object we surface its name, a short type label (the outermost type
+constructor, e.g. ``rel`` / ``mpoint`` / ``region``) and a ``kind`` hint
+(``spatial`` / ``temporal`` / ``other``) so the UI can flag what will draw.
+"""
+from __future__ import annotations
+
+from .nlparser import Node, parse
+
+_SPATIAL = {"point", "points", "line", "sline", "dline", "region", "rect"}
+_TEMPORAL = {
+    "mpoint", "mregion", "mreal", "mint", "mbool", "mstring",
+    "mlabel", "mlabels", "mplace", "mplaces", "upoint", "intime",
+}
+
+
+def _symbols(node: Node) -> list[str]:
+    out: list[str] = []
+    if isinstance(node, str):
+        out.append(node)
+    elif isinstance(node, list):
+        for n in node:
+            out.extend(_symbols(n))
+    return out
+
+
+def _first_symbol(node: Node) -> str | None:
+    for s in _symbols(node):
+        return s
+    return None
+
+
+def parse_objects(text: str) -> list[dict]:
+    tree = parse(text)
+    # Drill down to the OBJECTS list.
+    try:
+        # (inquiry (objects (OBJECTS obj*)))
+        objects = tree[1][1]  # type: ignore[index]
+        if not (isinstance(objects, list) and objects and objects[0] == "OBJECTS"):
+            return []
+        entries = objects[1:]
+    except (IndexError, TypeError):
+        return []
+
+    result: list[dict] = []
+    for obj in entries:
+        if not (isinstance(obj, list) and len(obj) >= 4 and obj[0] == "OBJECT"):
+            continue
+        name = obj[1]
+        type_expr = obj[3]
+        syms = set(_symbols(type_expr))
+        if syms & _TEMPORAL:
+            kind = "temporal"
+        elif syms & _SPATIAL:
+            kind = "spatial"
+        else:
+            kind = "other"
+        result.append(
+            {
+                "name": name,
+                "type": _first_symbol(type_expr) or "?",
+                "kind": kind,
+            }
+        )
+    result.sort(key=lambda o: str(o["name"]).lower())
+    return result
diff --git a/WebUI/backend/app/config.py b/WebUI/backend/app/config.py
new file mode 100644
index 000000000..59959a8ea
--- /dev/null
+++ b/WebUI/backend/app/config.py
@@ -0,0 +1,45 @@
+"""Runtime configuration for the SECONDO web bridge.
+
+All values come from the environment so nothing (host/port/credentials) is
+hard-coded -- unlike the retired WebGui2, which baked in a personal hostname.
+"""
+from __future__ import annotations
+
+import os
+import sys
+from pathlib import Path
+
+# The compiled `secondo_native` extension lives in ../native next to this
+# package. Make it importable without an install step.
+_NATIVE_DIR = Path(__file__).resolve().parent.parent / "native"
+if str(_NATIVE_DIR) not in sys.path:
+    sys.path.insert(0, str(_NATIVE_DIR))
+
+
+class Settings:
+    # SECONDO server the bridge connects to on behalf of browser sessions.
+    secondo_host: str = os.environ.get("SECONDO_HOST", "127.0.0.1")
+    secondo_port: str = os.environ.get("SECONDO_PORT", "1234")
+    secondo_user: str = os.environ.get("SECONDO_USER", "")
+    secondo_passwd: str = os.environ.get("SECONDO_PASSWD", "")
+
+    # Path to a SecondoConfig.ini (the client reads a few runtime flags from it).
+    secondo_config: str = os.environ.get(
+        "SECONDO_CONFIG",
+        str(Path(os.environ.get("SECONDO_BUILD_DIR", "")) / "bin" / "SecondoConfig.ini"),
+    )
+
+    # CORS origin for the Vite dev server.
+    cors_origin: str = os.environ.get("WEBUI_CORS_ORIGIN", "http://localhost:5173")
+
+    # Each session holds a SECONDO connection (the server forks a process per
+    # connection), so idle sessions are closed to avoid leaking them.
+    session_idle_timeout: float = float(
+        os.environ.get("SECONDO_SESSION_IDLE_TIMEOUT", "1800")  # 30 min
+    )
+    session_reap_interval: float = float(
+        os.environ.get("SECONDO_SESSION_REAP_INTERVAL", "60")
+    )
+
+
+settings = Settings()
diff --git a/WebUI/backend/app/convert.py b/WebUI/backend/app/convert.py
new file mode 100644
index 000000000..b659a0ee9
--- /dev/null
+++ b/WebUI/backend/app/convert.py
@@ -0,0 +1,16 @@
+"""Parse a SECONDO result nested list once and derive all render payloads.
+
+Keeps parsing in one place so ``/api/query`` can attach both the static
+GeoJSON (Milestone 2) and the temporal trips (Milestone 3) without walking the
+text twice.
+"""
+from __future__ import annotations
+
+from . import geojson, temporal
+from .nlparser import parse
+
+
+def convert(nested_text: str) -> tuple[dict | None, dict | None]:
+    """Return ``(geojson, temporal)`` for a result nested list (text)."""
+    tree = parse(nested_text)
+    return geojson.from_tree(tree), temporal.from_tree(tree)
diff --git a/WebUI/backend/app/geojson.py b/WebUI/backend/app/geojson.py
new file mode 100644
index 000000000..96652edd7
--- /dev/null
+++ b/WebUI/backend/app/geojson.py
@@ -0,0 +1,213 @@
+"""Convert parsed SECONDO nested lists into GeoJSON.
+
+This mirrors, in spirit, the Hoese display classes
+(``Javagui/viewer/hoese/algebras/Dspl*.java``) but emits GeoJSON geometries
+instead of ``java.awt.Shape``. Milestone 2 covers the static spatial types;
+moving/temporal types are added in Milestone 3.
+
+IMPORTANT about coordinates: SECONDO spatial values carry coordinates in the
+dataset's own world/coordinate system (e.g. berlintest uses a local planar
+system, not WGS84). The GeoJSON produced here therefore holds *native* world
+coordinates. The frontend renders them in a Cartesian view; geographic
+reprojection / OSM background is a later milestone.
+"""
+from __future__ import annotations
+
+import math
+from typing import Any
+
+from .nlparser import Node, parse
+
+# Static spatial types understood so far (attribute-type names as they appear
+# in a relation's tuple schema).
+SPATIAL_TYPES = {"point", "points", "line", "sline", "dline", "region", "rect"}
+
+_UNDEF = {"undef", "undefined"}
+
+
+def _num(x: Any) -> float | None:
+    if isinstance(x, bool):
+        return None
+    if isinstance(x, (int, float)):
+        return float(x)
+    return None
+
+
+def _coord(pair: Any) -> list[float] | None:
+    """A ``(x y)`` nested list -> ``[x, y]``."""
+    if not isinstance(pair, list) or len(pair) < 2:
+        return None
+    x, y = _num(pair[0]), _num(pair[1])
+    if x is None or y is None:
+        return None
+    return [x, y]
+
+
+def geometry_from(type_name: str, value: Node) -> dict | None:
+    """Build a GeoJSON geometry from a type name and its *value* nested list."""
+    if isinstance(value, str) and value in _UNDEF:
+        return None
+
+    if type_name == "point":
+        c = _coord(value)
+        return {"type": "Point", "coordinates": c} if c else None
+
+    if type_name == "points":
+        if not isinstance(value, list):
+            return None
+        pts = [c for c in (_coord(p) for p in value) if c]
+        return {"type": "MultiPoint", "coordinates": pts} if pts else None
+
+    if type_name in ("line", "sline", "dline"):
+        if not isinstance(value, list):
+            return None
+        # sline/dline wrap the segment list with a direction flag:
+        #   (sline ( (seg*) bool ))   vs   (line ( seg* ))
+        segments = value
+        if (
+            len(value) == 2
+            and isinstance(value[0], list)
+            and isinstance(value[1], bool)
+        ):
+            segments = value[0]
+        segs = []
+        for seg in segments:
+            if isinstance(seg, list) and len(seg) >= 4:
+                a, b, c, d = (_num(seg[0]), _num(seg[1]), _num(seg[2]), _num(seg[3]))
+                if None not in (a, b, c, d):
+                    segs.append([[a, b], [c, d]])
+        return {"type": "MultiLineString", "coordinates": segs} if segs else None
+
+    if type_name == "region":
+        return _region(value)
+
+    if type_name == "rect":
+        if isinstance(value, list) and len(value) >= 4:
+            x1, x2, y1, y2 = (_num(value[0]), _num(value[1]),
+                              _num(value[2]), _num(value[3]))
+            if None not in (x1, x2, y1, y2):
+                ring = [[x1, y1], [x2, y1], [x2, y2], [x1, y2], [x1, y1]]
+                return {"type": "Polygon", "coordinates": [ring]}
+        return None
+
+    return None
+
+
+def _region(value: Node) -> dict | None:
+    """SECONDO region: a list of faces; each face is a list of cycles; the
+    first cycle is the outer boundary, the rest are holes."""
+    if not isinstance(value, list):
+        return None
+    polygons = []
+    for face in value:
+        if not isinstance(face, list):
+            continue
+        rings = []
+        for cycle in face:
+            if not isinstance(cycle, list):
+                continue
+            ring = [c for c in (_coord(p) for p in cycle) if c]
+            if len(ring) < 3:
+                continue
+            if ring[0] != ring[-1]:  # GeoJSON rings must be closed
+                ring.append(ring[0])
+            rings.append(ring)
+        if rings:
+            polygons.append(rings)
+    if not polygons:
+        return None
+    return {"type": "MultiPolygon", "coordinates": polygons}
+
+
+def _feature(geometry: dict, properties: dict | None = None) -> dict:
+    return {"type": "Feature", "geometry": geometry, "properties": properties or {}}
+
+
+def _scalar(v: Any) -> Any | None:
+    """Keep only scalar attribute values as GeoJSON properties."""
+    if isinstance(v, (int, float, bool, str)):
+        return v
+    return None
+
+
+def _relation_features(type_expr: list, tuples: Node) -> list[dict]:
+    # type_expr = ['rel', ['tuple', [[name, atype], ...]]]
+    try:
+        attrs = type_expr[1][1]
+        names = [a[0] for a in attrs]
+        types = [a[1] for a in attrs]
+    except (IndexError, TypeError):
+        return []
+    spatial_idx = [i for i, t in enumerate(types) if t in SPATIAL_TYPES]
+    if not spatial_idx or not isinstance(tuples, list):
+        return []
+
+    features: list[dict] = []
+    for tup in tuples:
+        if not isinstance(tup, list):
+            continue
+        props = {
+            names[i]: _scalar(tup[i])
+            for i in range(min(len(names), len(tup)))
+            if i not in spatial_idx and _scalar(tup[i]) is not None
+        }
+        for i in spatial_idx:
+            if i < len(tup):
+                geom = geometry_from(types[i], tup[i])
+                if geom:
+                    features.append(_feature(geom, {**props, "_attr": names[i]}))
+    return features
+
+
+def _iter_coords(geometry: dict):
+    def walk(coords):
+        if (isinstance(coords, list) and len(coords) == 2
+                and all(isinstance(v, (int, float)) for v in coords)):
+            yield coords
+        elif isinstance(coords, list):
+            for c in coords:
+                yield from walk(c)
+
+    yield from walk(geometry.get("coordinates", []))
+
+
+def _bbox(features: list[dict]) -> list[float] | None:
+    minx = miny = math.inf
+    maxx = maxy = -math.inf
+    for f in features:
+        for x, y in _iter_coords(f["geometry"]):
+            minx, miny = min(minx, x), min(miny, y)
+            maxx, maxy = max(maxx, x), max(maxy, y)
+    if minx is math.inf:
+        return None
+    return [minx, miny, maxx, maxy]
+
+
+def from_tree(tree: Node) -> dict | None:
+    """Turn a parsed ``(type value)`` (or relation) tree into a
+    GeoJSON FeatureCollection, or ``None`` if nothing spatial is present."""
+    if not isinstance(tree, list) or len(tree) < 2:
+        return None
+
+    type_expr, value = tree[0], tree[1]
+    features: list[dict] = []
+
+    if isinstance(type_expr, str):  # atomic spatial type: (point (...)) etc.
+        geom = geometry_from(type_expr, value)
+        if geom:
+            features.append(_feature(geom))
+    elif isinstance(type_expr, list) and type_expr and type_expr[0] == "rel":
+        features = _relation_features(type_expr, value)
+
+    if not features:
+        return None
+    fc: dict = {"type": "FeatureCollection", "features": features}
+    bbox = _bbox(features)
+    if bbox:
+        fc["bbox"] = bbox
+    return fc
+
+
+def to_geojson(nested_text: str) -> dict | None:
+    """Parse nested-list text and convert to a GeoJSON FeatureCollection."""
+    return from_tree(parse(nested_text))
diff --git a/WebUI/backend/app/main.py b/WebUI/backend/app/main.py
new file mode 100644
index 000000000..94bc5c4e0
--- /dev/null
+++ b/WebUI/backend/app/main.py
@@ -0,0 +1,155 @@
+"""FastAPI bridge between the web UI and a SECONDO server.
+
+Milestone 1 (pipeline spike): connect, run a command, return the result nested
+list as text. GeoJSON conversion is layered on top in Milestone 2 (the response
+already carries a `geojson` field, currently null).
+"""
+from __future__ import annotations
+
+import asyncio
+import contextlib
+import logging
+import re
+from collections.abc import AsyncIterator
+from contextlib import asynccontextmanager
+
+from fastapi import Cookie, FastAPI, HTTPException, Request, Response
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+
+from .catalog import parse_objects
+from .config import settings
+from .convert import convert
+from .session import Session, manager
+
+logger = logging.getLogger("secondo.webui")
+
+SESSION_COOKIE = "secondo_sid"
+
+
+async def _reaper() -> None:
+    """Periodically close idle sessions so their SECONDO connections (and the
+    per-connection server processes) are reclaimed."""
+    while True:
+        await asyncio.sleep(settings.session_reap_interval)
+        try:
+            n = await manager.reap(settings.session_idle_timeout)
+            if n:
+                logger.info("Closed %d idle SECONDO session(s)", n)
+        except Exception:  # noqa: BLE001 - the reaper must never die
+            logger.exception("Session reaper failed")
+
+
+@asynccontextmanager
+async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
+    task = asyncio.create_task(_reaper())
+    try:
+        yield
+    finally:
+        task.cancel()
+        with contextlib.suppress(asyncio.CancelledError):
+            await task
+        with contextlib.suppress(Exception):
+            await manager.close_all()
+
+
+app = FastAPI(title="SECONDO Web UI bridge", version="0.1.0", lifespan=lifespan)
+
+
+@app.exception_handler(Exception)
+async def unhandled_exception(_request: Request, exc: Exception) -> JSONResponse:
+    """Guarantee a JSON body for *any* failure so the browser never receives a
+    plain-text 500 (which would fail `response.json()`)."""
+    logger.exception("Unhandled error")
+    return JSONResponse(
+        status_code=500, content={"detail": f"{type(exc).__name__}: {exc}"}
+    )
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[settings.cors_origin],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class QueryRequest(BaseModel):
+    command: str
+
+
+class QueryResponse(BaseModel):
+    text: str  # result nested list as text
+    geojson: dict | None = None  # static spatial features (Milestone 2)
+    temporal: dict | None = None  # moving-object trips + time domain (Milestone 3)
+
+
+async def _session_for(response: Response, sid: str | None) -> Session:
+    """Return the session for this cookie, creating one on first contact."""
+    session = manager.get(sid)
+    if session is None:
+        session = await manager.create()
+        response.set_cookie(
+            SESSION_COOKIE, session.id, httponly=True, samesite="lax"
+        )
+    return session
+
+
+@app.get("/api/health")
+async def health() -> dict:
+    return {"status": "ok", "secondo": f"{settings.secondo_host}:{settings.secondo_port}"}
+
+
+@app.post("/api/query", response_model=QueryResponse)
+async def query(
+    req: QueryRequest,
+    response: Response,
+    secondo_sid: str | None = Cookie(default=None),
+) -> QueryResponse:
+    session = await _session_for(response, secondo_sid)
+    try:
+        text = await session.run(req.command)
+    except RuntimeError as exc:  # SECONDO error / connection error
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+    # Track the open database so the UI can show it.
+    m = re.match(r"\s*open\s+database\s+(\w+)", req.command, re.IGNORECASE)
+    if m:
+        session.open_db = m.group(1)
+    # Best-effort conversion; never let it break a successful query.
+    geojson = temporal = None
+    try:
+        geojson, temporal = convert(text)
+    except Exception:  # noqa: BLE001 - conversion must not fail the request
+        logger.exception("Result conversion failed for command: %s", req.command)
+    return QueryResponse(text=text, geojson=geojson, temporal=temporal)
+
+
+@app.get("/api/databases")
+async def databases(
+    response: Response, secondo_sid: str | None = Cookie(default=None)
+) -> dict:
+    session = await _session_for(response, secondo_sid)
+    text = await session.run("list databases")
+    # (inquiry (databases (NAME1 NAME2 ...)))  -> pull the names out
+    names = re.findall(r"\b[A-Z][A-Z0-9_]*\b", text)
+    return {"databases": names, "open": session.open_db}
+
+
+@app.get("/api/objects")
+async def objects(
+    response: Response, secondo_sid: str | None = Cookie(default=None)
+) -> dict:
+    """List objects in the currently open database (name/type/kind)."""
+    session = await _session_for(response, secondo_sid)
+    try:
+        text = await session.run("list objects")
+    except RuntimeError as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+    return {"objects": parse_objects(text), "open": session.open_db}
+
+
+@app.post("/api/close")
+async def close(secondo_sid: str | None = Cookie(default=None)) -> dict:
+    if secondo_sid:
+        await manager.close(secondo_sid)
+    return {"closed": True}
diff --git a/WebUI/backend/app/nlparser.py b/WebUI/backend/app/nlparser.py
new file mode 100644
index 000000000..717056d7a
--- /dev/null
+++ b/WebUI/backend/app/nlparser.py
@@ -0,0 +1,123 @@
+"""Parser for SECONDO nested lists in their *text* representation.
+
+The heavy lifting (wire protocol, binary list decoding) happens in the trusted
+C++ client; what reaches Python is a nested list already rendered as text by
+``NestedList::ToString``. This module turns that text into a Python tree so the
+GeoJSON converter can walk it. Keeping only text parsing on the Python side is
+deliberate -- it is small and easy to fixture-test.
+
+Grammar (informal):
+
+    list   := '(' item* ')'
+    item   := list | atom
+    atom   := int | real | bool | string | symbol | text
+
+Atoms are returned as native Python values:
+
+* int     -> int
+* real    -> float
+* TRUE/FALSE -> bool
+* "..."   -> str        (quoted string; quotes stripped)
+* <text>...</text---> -> str
+* symbol  -> str        (e.g. type names like ``point``)
+
+Quoted strings and symbols both become ``str``; the distinction never matters
+for the positions the GeoJSON converter inspects (a type name is always a
+symbol, never a quoted string).
+"""
+from __future__ import annotations
+
+from typing import Union
+
+Node = Union[list, int, float, bool, str]
+
+_TEXT_OPEN = "<text>"
+_TEXT_CLOSE = "</text--->"
+
+
+def _classify(token: str) -> Node:
+    """Turn a bare atom token into a Python value."""
+    try:
+        return int(token)
+    except ValueError:
+        pass
+    try:
+        return float(token)
+    except ValueError:
+        pass
+    if token == "TRUE":
+        return True
+    if token == "FALSE":
+        return False
+    return token  # symbol (or undefined marker like ``undef``)
+
+
+def parse(text: str) -> Node:
+    """Parse a nested-list text into a Python tree. Returns the first element."""
+    pos = 0
+    n = len(text)
+
+    def skip_ws() -> None:
+        nonlocal pos
+        while pos < n and text[pos].isspace():
+            pos += 1
+
+    def parse_item() -> Node:
+        nonlocal pos
+        skip_ws()
+        if pos >= n:
+            raise ValueError("unexpected end of nested list")
+        c = text[pos]
+        if c == "(":
+            return parse_list()
+        if c == ")":
+            raise ValueError(f"unexpected ')' at {pos}")
+        if c == '"':
+            return parse_string()
+        if text.startswith(_TEXT_OPEN, pos):
+            return parse_text_atom()
+        return parse_atom()
+
+    def parse_list() -> list:
+        nonlocal pos
+        pos += 1  # consume '('
+        items: list[Node] = []
+        while True:
+            skip_ws()
+            if pos >= n:
+                raise ValueError("unterminated list")
+            if text[pos] == ")":
+                pos += 1
+                return items
+            items.append(parse_item())
+
+    def parse_string() -> str:
+        nonlocal pos
+        pos += 1  # consume opening quote
+        start = pos
+        while pos < n and text[pos] != '"':
+            pos += 1
+        s = text[start:pos]
+        pos += 1  # consume closing quote
+        return s
+
+    def parse_text_atom() -> str:
+        nonlocal pos
+        start = pos + len(_TEXT_OPEN)
+        end = text.find(_TEXT_CLOSE, start)
+        if end == -1:
+            end = n
+            pos = n
+        else:
+            pos = end + len(_TEXT_CLOSE)
+        return text[start:end]
+
+    def parse_atom() -> Node:
+        nonlocal pos
+        start = pos
+        while pos < n and not text[pos].isspace() and text[pos] not in "()":
+            pos += 1
+        return _classify(text[start:pos])
+
+    result = parse_item()
+    return result
diff --git a/WebUI/backend/app/session.py b/WebUI/backend/app/session.py
new file mode 100644
index 000000000..71bb713a1
--- /dev/null
+++ b/WebUI/backend/app/session.py
@@ -0,0 +1,105 @@
+"""Per-browser-session SECONDO connections.
+
+Mirrors WebGui2's per-session connection model: each browser session owns one
+`secondo_native.Connection`. A Connection is not thread-safe and SECONDO runs
+one command at a time per client, so every command on a session is serialized
+behind an asyncio lock and the blocking C++ call is run in a worker thread.
+"""
+from __future__ import annotations
+
+import asyncio
+import logging
+import secrets
+import time
+from dataclasses import dataclass, field
+
+import secondo_native  # provided by ../native (see config.py)
+
+from .config import settings
+
+logger = logging.getLogger("secondo.webui")
+
+
+@dataclass
+class Session:
+    id: str
+    conn: "secondo_native.Connection"
+    open_db: str | None = None
+    lock: asyncio.Lock = field(default_factory=asyncio.Lock)
+    # Monotonic timestamp of the last use, for idle reaping.
+    last_used: float = field(default_factory=time.monotonic)
+
+    def touch(self) -> None:
+        self.last_used = time.monotonic()
+
+    async def run(self, command: str) -> str:
+        """Execute one command; returns the result nested list as text."""
+        async with self.lock:
+            self.touch()
+            try:
+                return await asyncio.to_thread(self.conn.secondo, command)
+            finally:
+                self.touch()
+
+
+class SessionManager:
+    def __init__(self) -> None:
+        self._sessions: dict[str, Session] = {}
+        self._create_lock = asyncio.Lock()
+
+    async def create(self) -> Session:
+        """Open a fresh SECONDO connection and register a session for it."""
+        async with self._create_lock:
+            conn = await asyncio.to_thread(
+                secondo_native.Connection,
+                settings.secondo_host,
+                settings.secondo_port,
+                settings.secondo_user,
+                settings.secondo_passwd,
+                settings.secondo_config,
+            )
+            sid = secrets.token_urlsafe(24)
+            session = Session(id=sid, conn=conn)
+            self._sessions[sid] = session
+            return session
+
+    def get(self, sid: str | None) -> Session | None:
+        if not sid:
+            return None
+        session = self._sessions.get(sid)
+        if session is not None:
+            session.touch()  # keep active sessions from being reaped
+        return session
+
+    async def close(self, sid: str) -> None:
+        session = self._sessions.pop(sid, None)
+        if session is not None:
+            await asyncio.to_thread(session.conn.close)
+
+    async def reap(self, max_idle: float) -> int:
+        """Close sessions idle longer than `max_idle` seconds.
+
+        Every session holds a SECONDO connection, and the server forks a
+        process per connection -- without this, closed tabs and crashed
+        clients would leak server processes indefinitely. Sessions currently
+        running a command are never reaped.
+        """
+        now = time.monotonic()
+        closed = 0
+        for sid, session in list(self._sessions.items()):
+            if session.lock.locked():
+                continue  # busy running a command
+            if now - session.last_used > max_idle:
+                await self.close(sid)
+                closed += 1
+        return closed
+
+    async def close_all(self) -> None:
+        for sid in list(self._sessions):
+            await self.close(sid)
+
+    def count(self) -> int:
+        return len(self._sessions)
+
+
+manager = SessionManager()
diff --git a/WebUI/backend/app/temporal.py b/WebUI/backend/app/temporal.py
new file mode 100644
index 000000000..64b30e069
--- /dev/null
+++ b/WebUI/backend/app/temporal.py
@@ -0,0 +1,424 @@
+"""Convert SECONDO moving/temporal nested lists into animation trips.
+
+Milestone 3 handles ``mpoint`` (and relations carrying ``mpoint`` attributes),
+the signature HoeseViewer feature. An ``mpoint`` is a list of *units*:
+
+    (mpoint ( unit* ))
+    unit     = ( interval mapping )
+    interval = ( "start-instant" "end-instant" lc rc )
+    mapping  = ( x0 y0 x1 y1 )     ; linear from (x0,y0)@start to (x1,y1)@end
+
+This mirrors the piecewise-linear model the HoeseViewer interpolates at render
+time (``Dsplmovingpoint`` + ``IntervalSearch``). We emit deck.gl ``TripsLayer``
+data: for each continuous run of units, a ``path`` of waypoints and a matching
+list of ``timestamps`` (seconds). The frontend interpolates position from a
+single animated ``currentTime`` -- the same math, moved to the GPU/JS side.
+"""
+from __future__ import annotations
+
+import datetime as _dt
+import math
+
+from .nlparser import Node
+
+MOVING_POINT_TYPES = {"mpoint"}
+MOVING_REGION_TYPES = {"mregion"}
+# Scalar-valued moving types: plotted as a value/time series rather than drawn.
+PLOT_TYPES = {"mreal", "mint", "mbool"}
+MOVING_TYPES = MOVING_POINT_TYPES | MOVING_REGION_TYPES | PLOT_TYPES
+
+# Instants SECONDO uses for unbounded intervals.
+_UNBOUNDED = {"begin of time", "end of time"}
+# Samples per non-linear mreal unit (a quadratic needs a few points to curve).
+_UREAL_SAMPLES = 16
+_SECONDS_PER_DAY = 86400.0
+
+_UNDEF = {"undef", "undefined"}
+# Split a moving point into separate trips when the temporal gap between two
+# consecutive units exceeds this (seconds); within a run, units are contiguous.
+_GAP_EPS = 1e-3
+
+
+def _num(x: object) -> float | None:
+    if isinstance(x, bool):
+        return None
+    if isinstance(x, (int, float)):
+        return float(x)
+    return None
+
+
+def parse_instant(s: str) -> float | None:
+    """SECONDO instant string -> POSIX seconds (UTC).
+
+    Formats seen: ``2003-11-20`` (date only -> midnight), ``2003-11-20-06:03``,
+    ``2003-11-20-06:04:50``, ``2003-11-20-06:03:52.685`` (date and time
+    separated by ``-``). Unbounded markers ("begin of time" / "end of time")
+    return None; callers resolve them against the object's finite extent.
+    """
+    if not isinstance(s, str):
+        return None
+    s = s.strip()
+    if len(s) == 10:  # date only
+        date_part, time_part = s, ""
+    elif len(s) >= 12 and s[10] == "-":
+        date_part, time_part = s[:10], s[11:]
+    else:
+        return None
+    try:
+        year, month, day = (int(v) for v in date_part.split("-"))
+        hour = minute = 0
+        seconds = 0.0
+        if time_part:
+            hms = time_part.split(":")
+            hour = int(hms[0])
+            minute = int(hms[1])
+            seconds = float(hms[2]) if len(hms) > 2 else 0.0
+        whole = int(seconds)
+        micro = int(round((seconds - whole) * 1_000_000))
+        dt = _dt.datetime(
+            year, month, day, hour, minute, whole, micro,
+            tzinfo=_dt.timezone.utc,
+        )
+    except (ValueError, IndexError):
+        return None
+    return dt.timestamp()
+
+
+def _parse_unit(unit: Node) -> tuple[float, float, float, float, float, float] | None:
+    try:
+        interval, mapping = unit[0], unit[1]  # type: ignore[index]
+        t0 = parse_instant(interval[0])
+        t1 = parse_instant(interval[1])
+        if t0 is None or t1 is None:
+            return None
+        x0, y0, x1, y1 = (float(mapping[i]) for i in range(4))
+    except (IndexError, TypeError, ValueError):
+        return None
+    return t0, t1, x0, y0, x1, y1
+
+
+def mpoint_to_trips(value: Node, properties: dict | None = None) -> list[dict]:
+    """Turn an ``mpoint`` value (list of units) into TripsLayer trips."""
+    if isinstance(value, str) and value in _UNDEF:
+        return []
+    if not isinstance(value, list):
+        return []
+
+    props = properties or {}
+    trips: list[dict] = []
+    path: list[list[float]] = []
+    timestamps: list[float] = []
+    prev_t1: float | None = None
+
+    def flush() -> None:
+        if len(path) >= 2:
+            trips.append(
+                {"path": list(path), "timestamps": list(timestamps), "properties": props}
+            )
+
+    for unit in value:
+        parsed = _parse_unit(unit)
+        if parsed is None:
+            continue
+        t0, t1, x0, y0, x1, y1 = parsed
+        if prev_t1 is None or t0 > prev_t1 + _GAP_EPS:
+            flush()
+            path = [[x0, y0]]
+            timestamps = [t0]
+        path.append([x1, y1])
+        timestamps.append(t1)
+        prev_t1 = t1
+    flush()
+    return trips
+
+
+def mregion_to_moving(value: Node, properties: dict | None = None) -> dict | None:
+    """Turn an ``mregion`` value into time-interpolatable moving faces.
+
+        (mregion ( uregion* ))
+        uregion = ( interval ( face* ) )
+        face    = ( cycle* )                  ; first cycle outer, rest holes
+        cycle   = ( vertex* )
+        vertex  = ( xStart yStart xEnd yEnd ) ; moves linearly across the unit
+
+    Emitted shape: ``{units: [{interval: [t0, t1], faces: [[cycle, ...], ...]}]}``
+    so the client can interpolate each vertex at the current instant -- the same
+    piecewise-linear model as moving points.
+    """
+    if isinstance(value, str) and value in _UNDEF:
+        return None
+    if not isinstance(value, list):
+        return None
+
+    units: list[dict] = []
+    for uregion in value:
+        try:
+            interval, faces = uregion[0], uregion[1]  # type: ignore[index]
+            t0 = parse_instant(interval[0])
+            t1 = parse_instant(interval[1])
+        except (IndexError, TypeError):
+            continue
+        if t0 is None or t1 is None or not isinstance(faces, list):
+            continue
+
+        parsed_faces: list[list[list[list[float]]]] = []
+        for face in faces:
+            if not isinstance(face, list):
+                continue
+            cycles: list[list[list[float]]] = []
+            for cycle in face:
+                if not isinstance(cycle, list):
+                    continue
+                verts: list[list[float]] = []
+                for v in cycle:
+                    if isinstance(v, list) and len(v) >= 4:
+                        vals = [_num(v[i]) for i in range(4)]
+                        if None not in vals:
+                            verts.append([float(x) for x in vals])  # type: ignore[arg-type]
+                if len(verts) >= 3:
+                    cycles.append(verts)
+            if cycles:
+                parsed_faces.append(cycles)
+        if parsed_faces:
+            units.append({"interval": [t0, t1], "faces": parsed_faces})
+
+    if not units:
+        return None
+    return {"units": units, "properties": properties or {}}
+
+
+def _ureal_value(a: float, b: float, c: float, root: bool, t_days: float) -> float:
+    """Evaluate a SECONDO ``ureal`` unit function.
+
+    The unit stores ``(a b c r)`` and the value is ``a*t^2 + b*t + c``, square
+    rooted when ``r`` is TRUE. ``t`` is the time since the unit's start **in
+    days** -- verified against SECONDO itself (`val(mreal atinstant i)`).
+    """
+    v = a * t_days * t_days + b * t_days + c
+    if root:
+        return math.sqrt(max(v, 0.0))  # guard tiny negatives from rounding
+    return v
+
+
+def _plot_units(value: Node) -> list[tuple[float, float, Node]] | None:
+    """Units as ``(t0, t1, unit_value)``, resolving unbounded instants
+    ("begin of time" / "end of time") to the object's finite extent."""
+    if not isinstance(value, list):
+        return None
+    raw: list[tuple[float | None, float | None, Node]] = []
+    for unit in value:
+        try:
+            interval, uval = unit[0], unit[1]  # type: ignore[index]
+            raw.append((parse_instant(interval[0]), parse_instant(interval[1]), uval))
+        except (IndexError, TypeError):
+            continue
+    finite = [t for a, b, _ in raw for t in (a, b) if t is not None]
+    if not finite:
+        return None
+    lo, hi = min(finite), max(finite)
+    return [(a if a is not None else lo, b if b is not None else hi, v) for a, b, v in raw]
+
+
+def scalar_to_plot(type_name: str, value: Node, label: str) -> dict | None:
+    """Turn an ``mreal`` / ``mint`` / ``mbool`` into a value-over-time series."""
+    if isinstance(value, str) and value in _UNDEF:
+        return None
+    units = _plot_units(value)
+    if not units:
+        return None
+
+    series: list[list[float]] = []
+    for t0, t1, uval in units:
+        if type_name == "mreal":
+            try:
+                a, b, c = (float(uval[i]) for i in range(3))  # type: ignore[index]
+                root = bool(uval[3])  # type: ignore[index]
+            except (IndexError, TypeError, ValueError):
+                continue
+            span_days = (t1 - t0) / _SECONDS_PER_DAY
+            # A linear unit only needs its endpoints; a quadratic needs samples.
+            n = 1 if a == 0 else _UREAL_SAMPLES
+            for i in range(n + 1):
+                f = i / n
+                series.append([t0 + f * (t1 - t0), _ureal_value(a, b, c, root, f * span_days)])
+        else:  # mint / mbool: piecewise constant -> a step
+            v = uval
+            if isinstance(v, bool):
+                v = 1.0 if v else 0.0
+            num = _num(v)
+            if num is None:
+                continue
+            series.append([t0, num])
+            series.append([t1, num])
+
+    if not series:
+        return None
+    values = [v for _, v in series]
+    return {
+        "label": label,
+        "kind": "step" if type_name in ("mint", "mbool") else "line",
+        "type": type_name,
+        "series": series,
+        "valueRange": [min(values), max(values)],
+        "timeDomain": [series[0][0], series[-1][0]],
+    }
+
+
+def _plot_time_domain(plots: list[dict]) -> list[float] | None:
+    if not plots:
+        return None
+    return [
+        min(p["timeDomain"][0] for p in plots),
+        max(p["timeDomain"][1] for p in plots),
+    ]
+
+
+def _region_bbox(regions: list[dict]) -> list[float] | None:
+    minx = miny = math.inf
+    maxx = maxy = -math.inf
+    for region in regions:
+        for unit in region["units"]:
+            for face in unit["faces"]:
+                for cycle in face:
+                    for x0, y0, x1, y1 in cycle:
+                        minx = min(minx, x0, x1)
+                        maxx = max(maxx, x0, x1)
+                        miny = min(miny, y0, y1)
+                        maxy = max(maxy, y0, y1)
+    if minx is math.inf:
+        return None
+    return [minx, miny, maxx, maxy]
+
+
+def _region_time_domain(regions: list[dict]) -> list[float] | None:
+    tmin = math.inf
+    tmax = -math.inf
+    for region in regions:
+        for unit in region["units"]:
+            tmin = min(tmin, unit["interval"][0])
+            tmax = max(tmax, unit["interval"][1])
+    if tmin is math.inf:
+        return None
+    return [tmin, tmax]
+
+
+def _merge(a: list[float] | None, b: list[float] | None, bbox: bool) -> list[float] | None:
+    """Union two bboxes or two time domains."""
+    if a is None:
+        return b
+    if b is None:
+        return a
+    if bbox:
+        return [min(a[0], b[0]), min(a[1], b[1]), max(a[2], b[2]), max(a[3], b[3])]
+    return [min(a[0], b[0]), max(a[1], b[1])]
+
+
+def _bbox(trips: list[dict]) -> list[float] | None:
+    minx = miny = math.inf
+    maxx = maxy = -math.inf
+    for trip in trips:
+        for x, y in trip["path"]:
+            minx, miny = min(minx, x), min(miny, y)
+            maxx, maxy = max(maxx, x), max(maxy, y)
+    if minx is math.inf:
+        return None
+    return [minx, miny, maxx, maxy]
+
+
+def _time_domain(trips: list[dict]) -> list[float] | None:
+    tmin = math.inf
+    tmax = -math.inf
+    for trip in trips:
+        if trip["timestamps"]:
+            tmin = min(tmin, trip["timestamps"][0])
+            tmax = max(tmax, trip["timestamps"][-1])
+    if tmin is math.inf:
+        return None
+    return [tmin, tmax]
+
+
+def _scalar(v: object) -> object | None:
+    return v if isinstance(v, (int, float, bool, str)) else None
+
+
+def _relation_moving(
+    type_expr: list, tuples: Node
+) -> tuple[list[dict], list[dict], list[dict]]:
+    """Collect trips, moving regions and scalar plots from a relation."""
+    try:
+        attrs = type_expr[1][1]
+        names = [a[0] for a in attrs]
+        types = [a[1] for a in attrs]
+    except (IndexError, TypeError):
+        return [], [], []
+    moving_idx = [i for i, t in enumerate(types) if t in MOVING_TYPES]
+    if not moving_idx or not isinstance(tuples, list):
+        return [], [], []
+
+    trips: list[dict] = []
+    regions: list[dict] = []
+    plots: list[dict] = []
+    for row, tup in enumerate(tuples):
+        if not isinstance(tup, list):
+            continue
+        props = {
+            names[i]: _scalar(tup[i])
+            for i in range(min(len(names), len(tup)))
+            if i not in moving_idx and _scalar(tup[i]) is not None
+        }
+        for i in moving_idx:
+            if i >= len(tup):
+                continue
+            attr_props = {**props, "_attr": names[i]}
+            if types[i] in MOVING_POINT_TYPES:
+                trips.extend(mpoint_to_trips(tup[i], attr_props))
+            elif types[i] in MOVING_REGION_TYPES:
+                region = mregion_to_moving(tup[i], attr_props)
+                if region:
+                    regions.append(region)
+            elif types[i] in PLOT_TYPES:
+                # Label plots so several rows stay distinguishable.
+                label = names[i] if len(tuples) == 1 else f"{names[i]} #{row + 1}"
+                plot = scalar_to_plot(types[i], tup[i], label)
+                if plot:
+                    plots.append(plot)
+    return trips, regions, plots
+
+
+def from_tree(tree: Node) -> dict | None:
+    """Turn a parsed ``(type value)`` (or relation) tree into a temporal payload
+    ``{trips, regions, timeDomain, bbox}``, or ``None`` if nothing temporal."""
+    if not isinstance(tree, list) or len(tree) < 2:
+        return None
+    type_expr, value = tree[0], tree[1]
+
+    trips: list[dict] = []
+    regions: list[dict] = []
+    plots: list[dict] = []
+
+    if isinstance(type_expr, str) and type_expr in MOVING_POINT_TYPES:
+        trips = mpoint_to_trips(value)
+    elif isinstance(type_expr, str) and type_expr in MOVING_REGION_TYPES:
+        region = mregion_to_moving(value)
+        if region:
+            regions = [region]
+    elif isinstance(type_expr, str) and type_expr in PLOT_TYPES:
+        plot = scalar_to_plot(type_expr, value, type_expr)
+        if plot:
+            plots = [plot]
+    elif isinstance(type_expr, list) and type_expr and type_expr[0] == "rel":
+        trips, regions, plots = _relation_moving(type_expr, value)
+    else:
+        return None
+
+    if not trips and not regions and not plots:
+        return None
+    time_domain = _merge(_time_domain(trips), _region_time_domain(regions), bbox=False)
+    time_domain = _merge(time_domain, _plot_time_domain(plots), bbox=False)
+    return {
+        "trips": trips,
+        "regions": regions,
+        "plots": plots,
+        "timeDomain": time_domain,
+        "bbox": _merge(_bbox(trips), _region_bbox(regions), bbox=True),
+    }
diff --git a/WebUI/backend/native/Makefile b/WebUI/backend/native/Makefile
new file mode 100644
index 000000000..1571cbc3e
--- /dev/null
+++ b/WebUI/backend/native/Makefile
@@ -0,0 +1,35 @@
+# Builds the secondo_native Python extension by wrapping the prebuilt
+# SECONDO client-server library (apis/api_cpp/cs/lib/libsecondo.a).
+#
+# Mirrors the include/link setup of apis/api_cpp/cs/example/makefile so it
+# stays consistent with how the reference client is meant to be linked.
+#
+# Requires the SECONDO build environment (source ~/.secondorc) so that
+# SECONDO_BUILD_DIR / SECONDO_PLATFORM / BERKELEY_DB_* are set, and a Python
+# with pybind11 available (source the backend .venv).
+
+include $(SECONDO_BUILD_DIR)/makefile.env
+
+CS_DIR   = $(SECONDO_BUILD_DIR)/apis/api_cpp/cs
+BDBINCLUDE ?= $(BERKELEY_DB_DIR)/include
+BDB_LIB_DIR ?= $(BERKELEY_DB_DIR)/lib
+BERKELEY_DB_LIB ?= db_cxx
+
+PYINCLUDES = $(shell python -m pybind11 --includes)
+EXTSUFFIX  = $(shell python -c "import sysconfig;print(sysconfig.get_config_var('EXT_SUFFIX'))")
+
+MODULE = secondo_native$(EXTSUFFIX)
+
+INCLUDES = $(PYINCLUDES) -I$(CS_DIR)/include -I$(BDBINCLUDE)
+LIBS     = -L$(CS_DIR)/lib -lsecondo -L$(BDB_LIB_DIR) -l$(BERKELEY_DB_LIB) \
+           -lpthread -lstdc++
+
+.PHONY: all clean
+all: $(MODULE)
+
+$(MODULE): secondo_native.cpp
+	$(CPPC) -O2 -Wall -shared -std=c++17 -fPIC $(CCFLAGS) $(INCLUDES) \
+	    secondo_native.cpp -o $(MODULE) $(LIBS)
+
+clean:
+	rm -f secondo_native*.so
diff --git a/WebUI/backend/native/secondo_native.cpp b/WebUI/backend/native/secondo_native.cpp
new file mode 100644
index 000000000..1b8631355
--- /dev/null
+++ b/WebUI/backend/native/secondo_native.cpp
@@ -0,0 +1,144 @@
+/*
+----
+This file is part of SECONDO.
+
+Copyright (C) 2026, Faculty of Mathematics and Computer Science,
+Database Systems for New Applications.
+
+SECONDO is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; either version 2 of the License, or
+(at your option) any later version.
+----
+
+1 secondo\_native -- pybind11 wrapper over the SECONDO C++ client
+
+This module is a *thin* wrapper over the in-tree, prebuilt client-server
+interface (~apis/api\_cpp/cs~, linking ~libsecondo.a~). It deliberately
+does NOT reimplement any part of the SECONDO wire protocol: connecting,
+binary nested-list decoding, framing and heartbeats all stay inside the
+trusted C++ code that the rest of the system uses.
+
+The only thing crossing the language boundary is the nested list rendered
+as *text* (~NestedList::ToString~). Turning that text into GeoJSON is done
+in Python, where it is easy to fixture-test.
+
+*/
+
+#include <pybind11/pybind11.h>
+
+#include <string>
+#include <stdexcept>
+
+#include "SecondoInterface.h"
+#include "SecondoInterfaceCS.h"
+#include "NestedList.h"
+#include "NList.h"
+
+namespace py = pybind11;
+
+// One SECONDO client session. Not thread-safe on its own: callers must
+// serialize access to a single Connection (the FastAPI layer keeps one
+// Connection per browser session and guards it with a lock).
+class Connection
+{
+ public:
+  Connection(const std::string& host,
+             const std::string& port,
+             const std::string& user,
+             const std::string& passwd,
+             const std::string& config)
+  {
+    si = new SecondoInterfaceCS(true, 0, false);
+    si->InitRTFlags(config);
+
+    std::string errMsg;
+    const bool multiUser = true;  // host/port take precedence over config
+    bool ok;
+    {
+      // Connecting blocks on network I/O and can hang if the SECONDO server is
+      // slow or wedged. Without releasing the GIL that would freeze the whole
+      // Python process (even endpoints that never touch SECONDO).
+      py::gil_scoped_release release;
+      ok = si->Initialize(user, passwd, host, port, config, "",
+                          errMsg, multiUser);
+    }
+    if (!ok) {
+      delete si;
+      si = nullptr;
+      throw std::runtime_error("Cannot connect to SECONDO server at " +
+                               host + ":" + port + " - " + errMsg);
+    }
+    nl = si->GetNestedList();
+    NList::setNLRef(nl);
+  }
+
+  ~Connection() { close(); }
+
+  // Run one SECONDO command and return the result nested list as text.
+  // Raises RuntimeError on a SECONDO error (non-zero error code).
+  //
+  // SECONDO stores strings in Latin-1 (ISO-8859-1), so the nested-list text
+  // may contain bytes (e.g. 0xfc for 'u"'/umlaut) that are invalid UTF-8.
+  // pybind11's default std::string -> str conversion assumes UTF-8 and would
+  // raise UnicodeDecodeError on such results (Kinos, WFlaechen, ...). Decode
+  // Latin-1 explicitly: it is lossless for any byte and yields correct Unicode.
+  py::str secondo(const std::string& command)
+  {
+    if (!si) {
+      throw std::runtime_error("connection is closed");
+    }
+    ListExpr res = nl->TheEmptyList();
+    SecErrInfo err;
+    {
+      // The call blocks on network I/O; let other Python threads run.
+      py::gil_scoped_release release;
+      si->Secondo(command, res, err);
+    }
+    if (err.code != 0) {
+      throw std::runtime_error("SECONDO error " + std::to_string(err.code) +
+                               " (pos " + std::to_string(err.pos) + "): " +
+                               err.msg);
+    }
+    std::string out = nl->ToString(res);
+    return py::reinterpret_steal<py::str>(
+        PyUnicode_DecodeLatin1(out.data(), out.size(), "replace"));
+  }
+
+  void close()
+  {
+    if (si) {
+      {
+        // Terminate talks to the server too; same reasoning as above.
+        py::gil_scoped_release release;
+        si->Terminate();
+      }
+      delete si;
+      si = nullptr;
+      nl = nullptr;
+    }
+  }
+
+ private:
+  SecondoInterfaceCS* si = nullptr;
+  NestedList* nl = nullptr;
+};
+
+PYBIND11_MODULE(secondo_native, m)
+{
+  m.doc() = "Thin pybind11 wrapper over the SECONDO C++ client (libsecondo.a)";
+
+  py::class_<Connection>(m, "Connection")
+      .def(py::init<const std::string&, const std::string&,
+                    const std::string&, const std::string&,
+                    const std::string&>(),
+           py::arg("host"),
+           py::arg("port"),
+           py::arg("user") = "",
+           py::arg("passwd") = "",
+           py::arg("config") = "",
+           "Open a client-server connection to a running SecondoMonitor.")
+      .def("secondo", &Connection::secondo, py::arg("command"),
+           "Execute a SECONDO command; return the result nested list as text.")
+      .def("close", &Connection::close, "Close the connection.");
+}
diff --git a/WebUI/backend/requirements.txt b/WebUI/backend/requirements.txt
new file mode 100644
index 000000000..0d9189fc0
--- /dev/null
+++ b/WebUI/backend/requirements.txt
@@ -0,0 +1,5 @@
+fastapi>=0.110
+uvicorn[standard]>=0.29
+pybind11>=2.12
+pytest>=8.0
+httpx>=0.27
diff --git a/WebUI/backend/tests/fixtures/nested_lists.md b/WebUI/backend/tests/fixtures/nested_lists.md
new file mode 100644
index 000000000..f1218fae8
--- /dev/null
+++ b/WebUI/backend/tests/fixtures/nested_lists.md
@@ -0,0 +1,36 @@
+# Captured nested-list samples (berlintest)
+
+Real `NestedList::ToString` output captured from a live SecondoMonitor via the
+`secondo_native` binding. Used as fixtures for the nested-list parser and the
+GeoJSON converter (Milestone 2+).
+
+## point (`query mehringdamm`)
+```
+(point (9396.0 9871.0))
+```
+
+## region (`query thecenter`) — truncated
+```
+(region ((((4751.258065743784 11098.44273821416) (5174.969135626282 10226.09641786784) ...) )))
+```
+Structure: `(region ( face* ))`, `face = ( cycle* )`, `cycle = ( (x y)* )`.
+First cycle of a face is the outer boundary, following cycles are holes.
+
+## line (`query BGrenzenLine`) — truncated
+```
+(line ((-10849.0 1142.0 -10720.0 454.0) (-10849.0 1142.0 -10349.0 1402.0) ...))
+```
+Structure: `(line ( segment* ))`, `segment = (x1 y1 x2 y2)`.
+
+## relation (`query Trains feed head[1] project[Id, Line] consume`)
+```
+((rel (tuple ((Id int) (Line int)))) ((1 1)))
+```
+Structure: `((rel (tuple ( (attrname attrtype)* ))) ( tuple* ))`,
+`tuple = ( attrvalue* )`.
+
+## scalars
+```
+(int 13)
+(inquiry (databases (BERLINTEST OPT SYMTRAJSMALL)))
+```
diff --git a/WebUI/backend/tests/test_api.py b/WebUI/backend/tests/test_api.py
new file mode 100644
index 000000000..1c5a737ae
--- /dev/null
+++ b/WebUI/backend/tests/test_api.py
@@ -0,0 +1,113 @@
+"""API smoke tests that do NOT require a live SecondoMonitor.
+
+The SECONDO connection is faked so the FastAPI routing, session cookie handling
+and error mapping can be tested in isolation. Real end-to-end verification
+against a monitor is documented in WebUI/README.md.
+"""
+from __future__ import annotations
+
+import sys
+import types
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    # Stub the native module before app import so config/session load cleanly.
+    fake = types.ModuleType("secondo_native")
+
+    class FakeConnection:
+        def __init__(self, *_args, **_kwargs):
+            self.db = None
+
+        def secondo(self, command: str) -> str:
+            if command.strip() == "list databases":
+                return "(inquiry (databases (BERLINTEST OPT)))"
+            if command.startswith("open database"):
+                return "()"
+            if command == "query mehringdamm":
+                return "(point (9396.0 9871.0))"
+            if command == "query umlaut":
+                # names decoded from Latin-1 arrive as ordinary Python str
+                return '((rel (tuple ((Name string) (Pos point)))) (("Stölpchensee" (1.0 2.0))))'
+            if command == "query boom":
+                raise ValueError("unexpected non-RuntimeError")
+            raise RuntimeError("SECONDO error 3 (pos 0): not evaluable")
+
+        def close(self):
+            pass
+
+    fake.Connection = FakeConnection
+    monkeypatch.setitem(sys.modules, "secondo_native", fake)
+
+    from app.main import app  # imported after the stub is in place
+
+    return TestClient(app)
+
+
+def test_health(client):
+    r = client.get("/api/health")
+    assert r.status_code == 200
+    assert r.json()["status"] == "ok"
+
+
+def test_query_and_session_cookie(client):
+    r = client.post("/api/query", json={"command": "query mehringdamm"})
+    assert r.status_code == 200
+    assert r.json()["text"] == "(point (9396.0 9871.0))"
+    assert "secondo_sid" in r.cookies
+
+
+def test_secondo_error_maps_to_400(client):
+    r = client.post("/api/query", json={"command": "query bogus"})
+    assert r.status_code == 400
+    assert "not evaluable" in r.json()["detail"]
+
+
+def test_unexpected_error_still_returns_json(client, monkeypatch):
+    # A non-RuntimeError from the connection must not become a plain-text 500
+    # (which would break the browser's response.json()). Patch the reference
+    # bound in app.session directly (module-level `import secondo_native`).
+    import app.session as session_mod
+
+    class Boom:
+        def __init__(self, *a, **k):
+            pass
+
+        def secondo(self, command):
+            raise ValueError("kaboom")
+
+        def close(self):
+            pass
+
+    import types
+
+    fake = types.ModuleType("secondo_native")
+    fake.Connection = Boom
+    monkeypatch.setattr(session_mod, "secondo_native", fake)
+
+    from app.main import app
+
+    c = TestClient(app, raise_server_exceptions=False)  # observe the JSON 500
+    r = c.post("/api/query", json={"command": "anything"})
+    assert r.status_code == 500
+    assert r.headers["content-type"].startswith("application/json")
+    assert "ValueError" in r.json()["detail"]
+
+
+def test_unicode_names_roundtrip(client):
+    r = client.post("/api/query", json={"command": "query umlaut"})
+    assert r.status_code == 200
+    body = r.json()
+    assert body["geojson"]["features"][0]["properties"]["Name"] == "Stölpchensee"
+
+
+def test_databases_and_open_tracking(client):
+    client.post("/api/query", json={"command": "open database berlintest"})
+    r = client.get("/api/databases")
+    assert r.status_code == 200
+    body = r.json()
+    assert "BERLINTEST" in body["databases"]
+    assert body["open"] == "berlintest"
diff --git a/WebUI/backend/tests/test_catalog.py b/WebUI/backend/tests/test_catalog.py
new file mode 100644
index 000000000..d91bd3b01
--- /dev/null
+++ b/WebUI/backend/tests/test_catalog.py
@@ -0,0 +1,49 @@
+"""Tests for `list objects` parsing and the sline fix (Milestone 5).
+
+Inputs are real captures from SYMTRAJSMALL / berlintest.
+"""
+from __future__ import annotations
+
+from app.catalog import parse_objects
+from app.geojson import to_geojson
+
+OBJECTS = (
+    "(inquiry (objects (OBJECTS "
+    "(OBJECT Part () ((rel (tuple ((Moid int) (MP mpoint) (ML mlabels)))))) "
+    "(OBJECT EdgesExtDo () ((rel (tuple ((WayId longint) (Segment sline)))))) "
+    "(OBJECT thecenter () ((region))) "
+    "(OBJECT Orte () ((rel (tuple ((Ort string)))))) "
+    ")))"
+)
+
+
+def test_parse_objects_names_sorted():
+    objs = parse_objects(OBJECTS)
+    names = [o["name"] for o in objs]
+    assert names == ["EdgesExtDo", "Orte", "Part", "thecenter"]
+
+
+def test_parse_objects_kinds():
+    by_name = {o["name"]: o for o in parse_objects(OBJECTS)}
+    assert by_name["Part"]["kind"] == "temporal"  # has mpoint
+    assert by_name["EdgesExtDo"]["kind"] == "spatial"  # has sline
+    assert by_name["thecenter"]["kind"] == "spatial"  # region
+    assert by_name["Orte"]["kind"] == "other"  # plain relation
+    assert by_name["Part"]["type"] == "rel"
+
+
+def test_sline_wrapped_with_direction_flag():
+    # sline value is ( (segments) bool ) -- must not be treated as segments.
+    text = "(sline (((7.4699 51.5132 7.4699 51.5124) (7.47 51.51 7.48 51.52)) TRUE))"
+    fc = to_geojson(text)
+    geom = fc["features"][0]["geometry"]
+    assert geom["type"] == "MultiLineString"
+    assert len(geom["coordinates"]) == 2
+    assert geom["coordinates"][0][0] == [7.4699, 51.5132]
+
+
+def test_plain_line_still_works():
+    text = "(line ((0.0 0.0 1.0 1.0) (1.0 1.0 2.0 2.0)))"
+    geom = to_geojson(text)["features"][0]["geometry"]
+    assert geom["type"] == "MultiLineString"
+    assert len(geom["coordinates"]) == 2
diff --git a/WebUI/backend/tests/test_geojson.py b/WebUI/backend/tests/test_geojson.py
new file mode 100644
index 000000000..b5b420e14
--- /dev/null
+++ b/WebUI/backend/tests/test_geojson.py
@@ -0,0 +1,104 @@
+"""Parser + GeoJSON converter tests.
+
+Inputs are real ``NestedList::ToString`` outputs captured from a live
+SecondoMonitor (berlintest); see tests/fixtures/nested_lists.md.
+"""
+from __future__ import annotations
+
+from app.geojson import to_geojson
+from app.nlparser import parse
+
+# --- parser ---------------------------------------------------------------
+
+
+def test_parse_atoms_and_nesting():
+    assert parse("(point (9396.0 9871.0))") == ["point", [9396.0, 9871.0]]
+    assert parse("(int 13)") == ["int", 13]
+    assert parse("(a (b c) TRUE)") == ["a", ["b", "c"], True]
+
+
+def test_parse_string_and_symbol():
+    assert parse('(x "hello world")') == ["x", "hello world"]
+
+
+# --- point ----------------------------------------------------------------
+
+
+def test_point():
+    fc = to_geojson("(point (9396.0 9871.0))")
+    assert fc["type"] == "FeatureCollection"
+    (feat,) = fc["features"]
+    assert feat["geometry"] == {"type": "Point", "coordinates": [9396.0, 9871.0]}
+    assert fc["bbox"] == [9396.0, 9871.0, 9396.0, 9871.0]
+
+
+# --- line -----------------------------------------------------------------
+
+
+def test_line_segments_to_multilinestring():
+    text = "(line ((-10849.0 1142.0 -10720.0 454.0) (-10720.0 454.0 -10688.0 243.0)))"
+    fc = to_geojson(text)
+    geom = fc["features"][0]["geometry"]
+    assert geom["type"] == "MultiLineString"
+    assert geom["coordinates"][0] == [[-10849.0, 1142.0], [-10720.0, 454.0]]
+    assert len(geom["coordinates"]) == 2
+
+
+# --- region ---------------------------------------------------------------
+
+
+def test_region_face_with_hole():
+    # one face: outer square + inner (hole) square
+    text = (
+        "(region ("
+        "(((0.0 0.0) (10.0 0.0) (10.0 10.0) (0.0 10.0))"
+        " ((2.0 2.0) (4.0 2.0) (4.0 4.0) (2.0 4.0)))"
+        "))"
+    )
+    fc = to_geojson(text)
+    geom = fc["features"][0]["geometry"]
+    assert geom["type"] == "MultiPolygon"
+    (poly,) = geom["coordinates"]
+    outer, hole = poly
+    assert outer[0] == outer[-1]  # closed ring
+    assert len(outer) == 5
+    assert hole[0] == [2.0, 2.0]
+
+
+# --- rect -----------------------------------------------------------------
+
+
+def test_rect():
+    fc = to_geojson("(rect (0.0 5.0 0.0 3.0))")
+    geom = fc["features"][0]["geometry"]
+    assert geom["type"] == "Polygon"
+    assert geom["coordinates"][0][0] == [0.0, 0.0]
+    assert geom["coordinates"][0][2] == [5.0, 3.0]
+
+
+# --- relation -------------------------------------------------------------
+
+
+def test_relation_without_spatial_attr_yields_none():
+    fc = to_geojson("((rel (tuple ((Id int) (Line int)))) ((1 1) (2 3)))")
+    assert fc is None
+
+
+def test_relation_with_point_attr():
+    text = (
+        "((rel (tuple ((Name string) (Pos point)))) "
+        '(("a" (1.0 2.0)) ("b" (3.0 4.0))))'
+    )
+    fc = to_geojson(text)
+    assert len(fc["features"]) == 2
+    f0 = fc["features"][0]
+    assert f0["geometry"] == {"type": "Point", "coordinates": [1.0, 2.0]}
+    assert f0["properties"]["Name"] == "a"
+    assert f0["properties"]["_attr"] == "Pos"
+
+
+# --- non-spatial ----------------------------------------------------------
+
+
+def test_scalar_has_no_geojson():
+    assert to_geojson("(int 13)") is None
diff --git a/WebUI/backend/tests/test_session.py b/WebUI/backend/tests/test_session.py
new file mode 100644
index 000000000..6a8f472d7
--- /dev/null
+++ b/WebUI/backend/tests/test_session.py
@@ -0,0 +1,86 @@
+"""Session lifecycle tests.
+
+Every session holds a SECONDO connection and the server forks a process per
+connection, so idle sessions must be reclaimed or they leak (observed as
+orphaned SecondoBDB processes).
+"""
+from __future__ import annotations
+
+import asyncio
+import types
+
+import pytest
+
+
+@pytest.fixture()
+def session_mod(monkeypatch):
+    import app.session as session_mod
+
+    closed: list[str] = []
+
+    class FakeConnection:
+        def __init__(self, *_a, **_k):
+            pass
+
+        def secondo(self, command: str) -> str:
+            return "()"
+
+        def close(self) -> None:
+            closed.append("closed")
+
+    fake = types.ModuleType("secondo_native")
+    fake.Connection = FakeConnection
+    monkeypatch.setattr(session_mod, "secondo_native", fake)
+    session_mod._closed = closed  # expose for assertions
+    return session_mod
+
+
+def test_idle_session_is_reaped(session_mod):
+    mgr = session_mod.SessionManager()
+
+    async def scenario():
+        session = await mgr.create()
+        session.last_used -= 10_000  # pretend it has been idle for ages
+        reaped = await mgr.reap(max_idle=60)
+        return reaped, mgr.count()
+
+    reaped, remaining = asyncio.run(scenario())
+    assert reaped == 1
+    assert remaining == 0
+    assert session_mod._closed == ["closed"]  # connection really was closed
+
+
+def test_recent_session_is_kept(session_mod):
+    mgr = session_mod.SessionManager()
+
+    async def scenario():
+        await mgr.create()
+        return await mgr.reap(max_idle=60), mgr.count()
+
+    reaped, remaining = asyncio.run(scenario())
+    assert reaped == 0
+    assert remaining == 1
+
+
+def test_busy_session_is_never_reaped(session_mod):
+    mgr = session_mod.SessionManager()
+
+    async def scenario():
+        session = await mgr.create()
+        session.last_used -= 10_000
+        async with session.lock:  # simulate a command in flight
+            return await mgr.reap(max_idle=60)
+
+    assert asyncio.run(scenario()) == 0
+
+
+def test_get_touches_session_so_it_survives(session_mod):
+    mgr = session_mod.SessionManager()
+
+    async def scenario():
+        session = await mgr.create()
+        session.last_used -= 10_000
+        mgr.get(session.id)  # an active client keeps it alive
+        return await mgr.reap(max_idle=60)
+
+    assert asyncio.run(scenario()) == 0
diff --git a/WebUI/backend/tests/test_temporal.py b/WebUI/backend/tests/test_temporal.py
new file mode 100644
index 000000000..5a322bbe0
--- /dev/null
+++ b/WebUI/backend/tests/test_temporal.py
@@ -0,0 +1,208 @@
+"""Tests for moving-object (mpoint) -> trips conversion.
+
+Inputs are in the real ``mpoint`` text form captured from berlintest Trains.
+"""
+from __future__ import annotations
+
+from app.convert import convert
+from app.nlparser import parse
+from app.temporal import from_tree, parse_instant
+
+# Two contiguous units of a single train's trip.
+MPOINT = (
+    "(mpoint ("
+    '(("2003-11-20-06:03" "2003-11-20-06:03:52.685" TRUE FALSE)'
+    " (13506.0 11159.0 13336.0 10785.0))"
+    '(("2003-11-20-06:03:52.685" "2003-11-20-06:04:08" TRUE FALSE)'
+    " (13336.0 10785.0 13287.0 10675.0))"
+    "))"
+)
+
+
+def test_parse_instant_formats():
+    a = parse_instant("2003-11-20-06:03")
+    b = parse_instant("2003-11-20-06:03:52.685")
+    assert a is not None and b is not None
+    assert abs((b - a) - 52.685) < 1e-6  # 52.685 s apart
+
+
+def test_mpoint_to_single_trip():
+    payload = from_tree(parse(MPOINT))
+    assert payload is not None
+    (trip,) = payload["trips"]
+    # 2 contiguous units -> 3 waypoints / 3 timestamps
+    assert trip["path"] == [
+        [13506.0, 11159.0],
+        [13336.0, 10785.0],
+        [13287.0, 10675.0],
+    ]
+    assert len(trip["timestamps"]) == 3
+    assert trip["timestamps"][0] < trip["timestamps"][1] < trip["timestamps"][2]
+
+
+def test_time_domain_and_bbox():
+    payload = from_tree(parse(MPOINT))
+    ts = payload["trips"][0]["timestamps"]
+    assert payload["timeDomain"] == [ts[0], ts[-1]]
+    assert payload["bbox"] == [13287.0, 10675.0, 13506.0, 11159.0]
+
+
+def test_temporal_gap_splits_into_two_trips():
+    # second unit starts an hour after the first ends -> separate trips
+    gapped = (
+        "(mpoint ("
+        '(("2003-11-20-06:00" "2003-11-20-06:01" TRUE FALSE) (0.0 0.0 1.0 1.0))'
+        '(("2003-11-20-07:00" "2003-11-20-07:01" TRUE FALSE) (5.0 5.0 6.0 6.0))'
+        "))"
+    )
+    payload = from_tree(parse(gapped))
+    assert len(payload["trips"]) == 2
+
+
+def test_relation_of_mpoint():
+    rel = (
+        "((rel (tuple ((Id int) (Trip mpoint)))) ("
+        '(1 (('
+        '("2003-11-20-06:00" "2003-11-20-06:01" TRUE FALSE) (0.0 0.0 1.0 1.0))))'
+        "))"
+    )
+    payload = from_tree(parse(rel))
+    assert len(payload["trips"]) == 1
+    assert payload["trips"][0]["properties"]["Id"] == 1
+    assert payload["trips"][0]["properties"]["_attr"] == "Trip"
+
+
+def test_convert_returns_both_channels_independently():
+    geo, temp = convert("(point (1.0 2.0))")
+    assert geo is not None and temp is None
+    geo, temp = convert(MPOINT)
+    assert geo is None and temp is not None
+
+
+# --- moving regions (Milestone 6) ------------------------------------------
+
+# One unit, one face, one triangular cycle translating +10 east / +5 north.
+MREGION = (
+    "(mregion ("
+    '(("2003-11-20-06:00" "2003-11-20-07:00" TRUE TRUE)'
+    " ((((0.0 0.0 10.0 5.0) (4.0 0.0 14.0 5.0) (0.0 3.0 10.0 8.0))))"
+    ")))"
+)
+
+
+def test_mregion_units_and_vertices():
+    payload = from_tree(parse(MREGION))
+    assert payload is not None
+    assert payload["trips"] == []
+    (region,) = payload["regions"]
+    (unit,) = region["units"]
+    (face,) = unit["faces"]
+    (cycle,) = face
+    # moving vertices keep both endpoints so the client can interpolate
+    assert cycle[0] == [0.0, 0.0, 10.0, 5.0]
+    assert len(cycle) == 3
+    assert unit["interval"][0] < unit["interval"][1]
+
+
+def test_mregion_bbox_spans_start_and_end_positions():
+    payload = from_tree(parse(MREGION))
+    # bbox must cover the region across its whole motion, not just t0
+    assert payload["bbox"] == [0.0, 0.0, 14.0, 8.0]
+
+
+def test_mregion_time_domain():
+    payload = from_tree(parse(MREGION))
+    unit = payload["regions"][0]["units"][0]
+    assert payload["timeDomain"] == [unit["interval"][0], unit["interval"][1]]
+
+
+def test_relation_mixing_mpoint_and_mregion():
+    rel = (
+        "((rel (tuple ((Id int) (Trip mpoint) (Area mregion)))) ("
+        '(1 ((("2003-11-20-06:00" "2003-11-20-06:01" TRUE FALSE) (0.0 0.0 1.0 1.0)))'
+        '   ((("2003-11-20-06:00" "2003-11-20-07:00" TRUE TRUE)'
+        "     ((((0.0 0.0 10.0 5.0) (4.0 0.0 14.0 5.0) (0.0 3.0 10.0 8.0))))))"
+        ")))"
+    )
+    payload = from_tree(parse(rel))
+    assert len(payload["trips"]) == 1
+    assert len(payload["regions"]) == 1
+    assert payload["regions"][0]["properties"]["_attr"] == "Area"
+    assert payload["trips"][0]["properties"]["_attr"] == "Trip"
+
+
+def test_mpoint_payload_still_has_empty_regions():
+    payload = from_tree(parse(MPOINT))
+    assert payload["regions"] == []
+
+
+# --- scalar value plots: mreal / mint (Milestone 6) -------------------------
+
+
+def test_mreal_constant():
+    payload = from_tree(parse('(mreal ((("2003-11-20" "2003-11-21" TRUE TRUE)'
+                              " (0.0 0.0 5000.0 FALSE))))"))
+    (plot,) = payload["plots"]
+    assert plot["kind"] == "line"
+    assert plot["valueRange"] == [5000.0, 5000.0]  # mreal5000 really is constant
+    assert all(v == 5000.0 for _, v in plot["series"])
+
+
+def test_mreal_sqrt_matches_secondo_ground_truth():
+    # Real unit 0 of `distance(train7, mehringdamm)` from berlintest. SECONDO's
+    # own val(... atinstant ...) gives 11376.19382746268 at the start and
+    # 11177.34248379283 at the end -- t is measured in DAYS.
+    text = (
+        '(mreal ((("2003-11-20-06:06" "2003-11-20-06:06:08.692" TRUE FALSE)'
+        " (3965029173458.559 -44978595490.10584 129417786.0 TRUE))))"
+    )
+    plot = from_tree(parse(text))["plots"][0]
+    first_v = plot["series"][0][1]
+    last_v = plot["series"][-1][1]
+    assert abs(first_v - 11376.19382746268) < 1e-4
+    assert abs(last_v - 11177.34248379283) < 1e-4
+
+
+def test_mreal_quadratic_is_sampled_not_just_endpoints():
+    text = (
+        '(mreal ((("2003-11-20-06:06" "2003-11-20-06:06:08.692" TRUE FALSE)'
+        " (3965029173458.559 -44978595490.10584 129417786.0 TRUE))))"
+    )
+    plot = from_tree(parse(text))["plots"][0]
+    assert len(plot["series"]) > 2  # curved unit needs intermediate samples
+
+
+def test_mint_is_a_step_series_and_handles_begin_of_time():
+    text = (
+        '(mint ((("begin of time" "2003-11-20-06:18:16.027" TRUE FALSE) 0)'
+        ' (("2003-11-20-06:18:16.027" "2003-11-20-06:35:29.353" TRUE FALSE) 1)'
+        ' (("2003-11-20-06:35:29.353" "2003-11-20-06:37:30.647" TRUE TRUE) 2)))'
+    )
+    payload = from_tree(parse(text))
+    (plot,) = payload["plots"]
+    assert plot["kind"] == "step"
+    assert plot["valueRange"] == [0.0, 2.0]
+    # the unbounded "begin of time" is resolved to the finite extent, not dropped
+    assert all(t == t and abs(t) != float("inf") for t, _ in plot["series"])
+    assert len(plot["series"]) == 6  # two points per unit
+
+
+def test_plot_only_object_has_no_bbox_but_has_a_time_domain():
+    payload = from_tree(parse('(mreal ((("2003-11-20" "2003-11-21" TRUE TRUE)'
+                              " (0.0 0.0 5000.0 FALSE))))"))
+    assert payload["bbox"] is None
+    assert payload["timeDomain"][0] < payload["timeDomain"][1]
+    assert payload["trips"] == [] and payload["regions"] == []
+
+
+def test_parse_instant_date_only():
+    # mreal5000 uses date-only instants; these must not be rejected.
+    a = parse_instant("2003-11-20")
+    b = parse_instant("2003-11-21")
+    assert a is not None and b is not None
+    assert abs((b - a) - 86400) < 1e-6
+
+
+def test_parse_instant_rejects_unbounded_markers():
+    assert parse_instant("begin of time") is None
+    assert parse_instant("end of time") is None
diff --git a/WebUI/frontend/e2e/run.mjs b/WebUI/frontend/e2e/run.mjs
new file mode 100644
index 000000000..5ec98cc6e
--- /dev/null
+++ b/WebUI/frontend/e2e/run.mjs
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+// Runs the end-to-end suite: every e2e/verify-*.mjs, sequentially, against a
+// running stack (SecondoMonitor + FastAPI bridge + Vite dev server).
+//
+//   node e2e/run.mjs            # everything
+//   node e2e/run.mjs plots      # only files whose name contains "plots"
+//   npm run e2e -- plots        # same, via npm
+//
+// Each check script is a standalone program that exits 0 on success and
+// non-zero on failure, so this runner keys off exit codes rather than parsing
+// their output. Output from a failing script is echoed for diagnosis.
+import { readdirSync } from "fs";
+import { spawnSync } from "child_process";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const filter = process.argv[2];
+const TIMEOUT_MS = 180_000;
+
+const BACKEND = process.env.WEBUI_API ?? "http://127.0.0.1:8000/api/health";
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+
+async function reachable(url) {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(3000) });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+// Fail fast with a useful message instead of a wall of navigation timeouts.
+const [apiUp, webUp] = await Promise.all([reachable(BACKEND), reachable(URL)]);
+if (!apiUp || !webUp) {
+  console.error("The e2e stack is not reachable:");
+  if (!apiUp) console.error(`  bridge  ${BACKEND}  DOWN  (uvicorn app.main:app --port 8000)`);
+  if (!webUp) console.error(`  web     ${URL}  DOWN  (npm run dev)`);
+  console.error("Also make sure a SecondoMonitor is listening on port 1234.");
+  process.exit(2);
+}
+
+const files = readdirSync(HERE)
+  .filter((f) => /^verify-.*\.mjs$/.test(f))
+  .filter((f) => !filter || f.includes(filter))
+  .sort();
+
+if (files.length === 0) {
+  console.error(filter ? `No e2e checks match "${filter}".` : "No e2e checks found.");
+  process.exit(2);
+}
+
+const name = (f) => f.replace(/^verify-/, "").replace(/\.mjs$/, "");
+const failed = [];
+const started = Date.now();
+
+for (const file of files) {
+  const t0 = Date.now();
+  const run = spawnSync(process.execPath, [join(HERE, file)], {
+    encoding: "utf8",
+    timeout: TIMEOUT_MS,
+    env: process.env,
+  });
+  const secs = ((Date.now() - t0) / 1000).toFixed(0);
+  const ok = run.status === 0;
+  const why = run.signal ? ` (killed: ${run.signal})` : "";
+  console.log(`${ok ? "PASS" : "FAIL"}  ${name(file).padEnd(16)} ${secs}s${why}`);
+  if (!ok) {
+    failed.push(name(file));
+    const noise = /\[vite\]|DevTools|React DevTools|Download the React/;
+    const body = `${run.stdout ?? ""}${run.stderr ?? ""}`
+      .split("\n")
+      .filter((l) => l.trim() && !noise.test(l))
+      .map((l) => `      ${l}`)
+      .join("\n");
+    if (body) console.log(body);
+  }
+}
+
+const total = ((Date.now() - started) / 1000).toFixed(0);
+console.log(
+  `\n${files.length - failed.length}/${files.length} checks passed in ${total}s` +
+    (failed.length ? `  —  failed: ${failed.join(", ")}` : "")
+);
+process.exit(failed.length === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-animation.mjs b/WebUI/frontend/e2e/verify-animation.mjs
new file mode 100644
index 000000000..357bc27d8
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-animation.mjs
@@ -0,0 +1,135 @@
+// Verifies moving-object animation: queries Trains, pauses the timeline, seeks
+// to two different instants, and asserts (a) the TripsLayer draws and (b) the
+// moving head's position changes between the two instants (i.e. it animates).
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: [
+    "--no-sandbox",
+    "--use-gl=angle",
+    "--use-angle=swiftshader",
+    "--enable-unsafe-swiftshader",
+    "--enable-webgl",
+    "--window-size=1200,800",
+  ],
+});
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1200, height: 800 });
+  page.on("pageerror", (e) => console.log("  [pageerror]", e.message));
+
+  async function runCmd(command) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", command);
+    await page.keyboard.press("Enter");
+  }
+
+  // Move the timeline slider to a fraction of the domain (0..1) and let React
+  // apply it. The animation is paused first so the value sticks.
+  async function seekFraction(frac) {
+    await page.$eval(
+      ".tl-range",
+      (el, f) => {
+        const max = Number(el.max);
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        ).set;
+        nativeSetter.call(el, String(max * f));
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+      },
+      frac
+    );
+    // A single thin trail needs a moment to be drawn; too short a wait here
+    // sampled an empty frame and made this test flaky.
+    await new Promise((r) => setTimeout(r, 1500));
+  }
+
+  // Centroid + count of the trail pixels. The trail is drawn in the *layer's*
+  // colour, so read that from the layer swatch rather than hard-coding a hue
+  // (the palette is a design decision and must not break this test). The faint
+  // full-trajectory context path blends far darker than the trail, so a tight
+  // tolerance around the full-intensity colour isolates the moving trail.
+  async function trailStats() {
+    return page.evaluate(() => {
+      const swatch = document.querySelector(".lp-swatch");
+      const m = getComputedStyle(swatch).backgroundColor.match(/\d+/g);
+      const [tr, tg, tb] = m.map(Number);
+      const c = document.querySelector(".mapview canvas");
+      const gl =
+        c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+        c.getContext("webgl", { preserveDrawingBuffer: true });
+      const w = c.width,
+        h = c.height;
+      const px = new Uint8Array(w * h * 4);
+      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0,
+        sx = 0,
+        sy = 0;
+      for (let i = 0; i < px.length; i += 4) {
+        const a = px[i + 3];
+        if (
+          a > 10 &&
+          Math.abs(px[i] - tr) < 60 &&
+          Math.abs(px[i + 1] - tg) < 60 &&
+          Math.abs(px[i + 2] - tb) < 60
+        ) {
+          const p = i / 4;
+          sx += p % w;
+          sy += Math.floor(p / w);
+          n++;
+        }
+      }
+      return n ? { n, cx: sx / n, cy: sy / n } : { n: 0, cx: 0, cy: 0 };
+    });
+  }
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await page.waitForFunction(
+    () => document.querySelectorAll(".entry").length >= 1,
+    { timeout: 8000 }
+  );
+
+  await runCmd("query Trains feed head[3] project[Id, Trip] consume");
+  await page.waitForSelector(".timeline", { timeout: 12000 });
+  // Pause so seeks are stable.
+  await page.click(".tl-play");
+  await new Promise((r) => setTimeout(r, 300));
+
+  await seekFraction(0.2);
+  const a = await trailStats();
+  await page.screenshot({ path: `${OUT}/anim-t20.png` });
+
+  await seekFraction(0.8);
+  const b = await trailStats();
+  await page.screenshot({ path: `${OUT}/anim-t80.png` });
+
+  const moved = Math.hypot(a.cx - b.cx, a.cy - b.cy);
+  console.log("t=20%:", JSON.stringify(a));
+  console.log("t=80%:", JSON.stringify(b));
+  console.log("head moved (px):", moved.toFixed(1));
+
+  const ok = a.n > 20 && b.n > 20 && moved > 15;
+  console.log(ok ? "PASS animation" : "FAIL animation");
+  process.exitCode = ok ? 0 : 1;
+} finally {
+  await browser.close();
+}
diff --git a/WebUI/frontend/e2e/verify-catalog-basemap.mjs b/WebUI/frontend/e2e/verify-catalog-basemap.mjs
new file mode 100644
index 000000000..5eeddb50d
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-catalog-basemap.mjs
@@ -0,0 +1,97 @@
+// Verifies Milestone 5: catalog DB/object browser, geographic MapLibre + OSM
+// basemap for lon/lat data, and GeoJSON export.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  // Count successful OSM tile loads to prove the basemap really renders.
+  let osmTiles = 0;
+  page.on("response", (r) => {
+    if (r.url().includes("tile.openstreetmap.org") && r.status() === 200) osmTiles++;
+  });
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await new Promise((r) => setTimeout(r, 800));
+
+  // 1) Catalog lists databases.
+  const dbs = await page.$$eval(".cat-db", (els) => els.map((e) => e.textContent));
+  check(dbs.includes("SYMTRAJSMALL"), `catalog lists databases (${dbs.join(",")})`);
+
+  // 2) Open SYMTRAJSMALL from the catalog -> object list appears.
+  const target = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".cat-db")].find((b) => b.textContent === "SYMTRAJSMALL"));
+  await target.asElement().click();
+  await page.waitForSelector(".cat-obj", { timeout: 8000 });
+  const objNames = await page.$$eval(".cat-obj .cat-oname", (els) =>
+    els.map((e) => e.textContent));
+  check(objNames.includes("EdgesExtDo"),
+        `objects listed after open (${objNames.length} objects)`);
+
+  // 3) Click EdgesExtDo (lon/lat sline) -> geographic mode + OSM basemap.
+  const edges = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".cat-obj")].find((b) =>
+      b.textContent.includes("EdgesExtDo")));
+  await edges.asElement().click();
+  await page.waitForSelector(".maplibregl-map", { timeout: 10000 });
+  check((await page.$eval(".mapview", (e) => e.dataset.geographic)) === "true",
+        "geographic mode activated (MapLibre basemap present)");
+
+  const hasMapLibre = await page.$(".maplibregl-map");
+  check(!!hasMapLibre, "MapLibre basemap container present");
+
+  await new Promise((r) => setTimeout(r, 3500)); // let tiles load
+  check(osmTiles > 0, `OSM tiles loaded (${osmTiles})`);
+  await page.screenshot({ path: `${OUT}/map-geo.png` });
+
+  // 4) Export visible layers as GeoJSON (capture the blob).
+  await page.evaluate(() => {
+    window.__exports = [];
+    const orig = URL.createObjectURL;
+    URL.createObjectURL = (blob) => {
+      blob.text().then((t) => window.__exports.push(t));
+      return orig(blob);
+    };
+  });
+  const exportBtn = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".lp-clear")].find((b) => b.textContent === "export"));
+  await exportBtn.asElement().click();
+  await new Promise((r) => setTimeout(r, 600));
+  const exported = await page.evaluate(() => window.__exports[0] ?? null);
+  let ok = false;
+  if (exported) {
+    const fc = JSON.parse(exported);
+    ok = fc.type === "FeatureCollection" && fc.features.length > 0 &&
+         !!fc.features[0].geometry;
+  }
+  check(ok, `export produced a GeoJSON FeatureCollection with features`);
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-catalog-race.mjs b/WebUI/frontend/e2e/verify-catalog-race.mjs
new file mode 100644
index 000000000..78d9d6646
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-catalog-race.mjs
@@ -0,0 +1,79 @@
+// Verifies the catalog open/refresh race is fixed: clicking a database as soon
+// as the page loads (before the session cookie settles) still fills the object
+// list, and a loading spinner shows while objects are fetched.
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  // --- Test 1: fast first click still fills objects (run several times) ---
+  let filledRuns = 0;
+  const RUNS = 4;
+  for (let i = 0; i < RUNS; i++) {
+    const page = await browser.newPage();
+    const client = await page.target().createCDPSession();
+    await client.send("Network.clearBrowserCookies"); // force a fresh session
+    // Load without waiting for network idle, then click ASAP.
+    await page.goto(URL, { waitUntil: "domcontentloaded" });
+    await page.waitForSelector(".cat-db", { timeout: 8000 });
+    // Click SYMTRAJSMALL the instant the button exists (races the cookie).
+    await page.evaluate(() => {
+      const b = [...document.querySelectorAll(".cat-db")]
+        .find((x) => x.textContent.includes("SYMTRAJSMALL"));
+      b && b.click();
+    });
+    try {
+      await page.waitForSelector(".cat-obj", { timeout: 8000 });
+      const n = await page.$$eval(".cat-obj", (els) => els.length);
+      if (n > 0) filledRuns++;
+    } catch { /* stayed empty */ }
+    await page.close();
+  }
+  check(filledRuns === RUNS,
+        `fast first click fills objects on every run (${filledRuns}/${RUNS})`);
+
+  // --- Test 2: loading spinner shows while objects load (throttled) ---
+  const page = await browser.newPage();
+  await page.setRequestInterception(true);
+  page.on("request", async (r) => {
+    if (r.url().includes("/api/objects")) {
+      await new Promise((x) => setTimeout(x, 700));
+    }
+    r.continue();
+  });
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await page.waitForSelector(".cat-db", { timeout: 8000 });
+  await page.evaluate(() => {
+    const b = [...document.querySelectorAll(".cat-db")]
+      .find((x) => x.textContent.includes("BERLINTEST"));
+    b && b.click();
+  });
+  let sawSpinner = false;
+  for (let i = 0; i < 25; i++) {
+    if (await page.$(".cat-spin")) { sawSpinner = true; break; }
+    await new Promise((r) => setTimeout(r, 40));
+  }
+  check(sawSpinner, "loading spinner shown while objects load");
+  await page.waitForSelector(".cat-obj", { timeout: 8000 });
+  const finalN = await page.$$eval(".cat-obj", (els) => els.length);
+  check(finalN > 0, `objects fill after load (${finalN})`);
+  await page.close();
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-console.mjs b/WebUI/frontend/e2e/verify-console.mjs
new file mode 100644
index 000000000..a6284aaa0
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-console.mjs
@@ -0,0 +1,79 @@
+// Verifies the command console UX: focus retention after Enter, input clearing,
+// and arrow-up/down history recall.
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1200,800"],
+});
+const page = await browser.newPage();
+await page.setViewport({ width: 1200, height: 800 });
+page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+const val = () => page.$eval(".input input", (el) => el.value);
+const focused = () => page.evaluate(() => document.activeElement === document.querySelector(".input input"));
+
+async function type(cmd) {
+  await page.click(".input input");
+  await page.$eval(".input input", (el) => (el.value = ""));
+  await page.type(".input input", cmd);
+}
+async function enter() { await page.keyboard.press("Enter"); await new Promise(r=>setTimeout(r,400)); }
+
+await page.goto(URL, { waitUntil: "networkidle0" });
+let fails = 0;
+
+// Submit three commands.
+await type("open database berlintest"); await enter();
+await type("query mehringdamm"); await enter();
+await type("query 3 + 4"); await enter();
+
+// 1) Focus retained after Enter, input cleared.
+const f1 = await focused(); const v1 = await val();
+console.log(`after Enter: focused=${f1} value="${v1}"`);
+if (!f1) { console.log("FAIL: input lost focus after Enter"); fails++; }
+if (v1 !== "") { console.log("FAIL: input not cleared"); fails++; }
+
+// 2) ArrowUp recalls most recent, then older.
+await page.click(".input input");
+await page.keyboard.press("ArrowUp");
+const up1 = await val();
+await page.keyboard.press("ArrowUp");
+const up2 = await val();
+await page.keyboard.press("ArrowUp");
+const up3 = await val();
+console.log(`ArrowUp x3: "${up1}" | "${up2}" | "${up3}"`);
+if (up1 !== "query 3 + 4") { console.log("FAIL: 1st ArrowUp"); fails++; }
+if (up2 !== "query mehringdamm") { console.log("FAIL: 2nd ArrowUp"); fails++; }
+if (up3 !== "open database berlintest") { console.log("FAIL: 3rd ArrowUp"); fails++; }
+
+// 3) ArrowDown walks back toward newest, then to empty draft.
+await page.keyboard.press("ArrowDown");
+const dn1 = await val();
+await page.keyboard.press("ArrowDown");
+const dn2 = await val();
+await page.keyboard.press("ArrowDown");
+const dn3 = await val();
+console.log(`ArrowDown x3: "${dn1}" | "${dn2}" | "${dn3}"`);
+if (dn1 !== "query mehringdamm") { console.log("FAIL: 1st ArrowDown"); fails++; }
+if (dn2 !== "query 3 + 4") { console.log("FAIL: 2nd ArrowDown"); fails++; }
+if (dn3 !== "") { console.log("FAIL: ArrowDown past newest should clear"); fails++; }
+
+// 4) Recall + submit works, and refocuses.
+await page.keyboard.press("ArrowUp");   // "query 3 + 4"
+await enter();
+const f2 = await focused(); const v2 = await val();
+console.log(`recall+submit: focused=${f2} value="${v2}"`);
+if (!f2) { console.log("FAIL: focus after recall submit"); fails++; }
+
+await browser.close();
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-layers.mjs b/WebUI/frontend/e2e/verify-layers.mjs
new file mode 100644
index 000000000..da6518c54
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-layers.mjs
@@ -0,0 +1,203 @@
+// Verifies the layers/styling/selection milestone: multiple layers accumulate,
+// per-layer recolor updates the swatch, visibility toggling changes what's
+// drawn, reordering swaps draw order, and clicking a feature shows its details.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1200,800"],
+});
+
+let fails = 0;
+const check = (cond, msg) => { console.log(`${cond ? "PASS" : "FAIL"} ${msg}`); if (!cond) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1200, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 700));
+  }
+  const drawn = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const px = new Uint8Array(c.width * c.height * 4);
+      gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0;
+      for (let i = 0; i < px.length; i += 4) if (px[i + 3] > 10) n++;
+      return n;
+    });
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query Flaechen feed head[5] consume"); // regions with Name
+  await runCmd("query BGrenzenLine"); // a line
+
+  // 1) Two layers listed.
+  const items = await page.$$eval(".lp-item", (els) => els.length);
+  check(items === 2, `two layers listed (got ${items})`);
+
+  // Panel shows topmost first; the line (added last) should be on top.
+  const firstName = await page.$eval(".lp-name", (el) => el.textContent);
+  check(/BGrenzenLine/.test(firstName ?? ""), `top layer is the line (got "${firstName}")`);
+
+  // 2) Expand the top layer and recolor it -> swatch updates.
+  await page.click(".lp-name");
+  await page.waitForSelector(".lp-style", { timeout: 3000 });
+  const before = await page.$eval(".lp-swatch", (el) => el.style.background);
+  await page.$eval(".lp-style input[type=color]", (el) => {
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype, "value").set;
+    set.call(el, "#ff0000");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  await new Promise((r) => setTimeout(r, 300));
+  const after = await page.$eval(".lp-swatch", (el) => el.style.background);
+  check(before !== after && /255|#ff0000|rgb\(255/.test(after),
+        `recolor updates swatch ("${before}" -> "${after}")`);
+
+  // 3) Visibility toggle changes drawn pixels (hide the big regions layer).
+  const withAll = await drawn();
+  // second checkbox in list = the regions layer (bottom item)
+  const boxes = await page.$$(".lp-item input[type=checkbox]");
+  await boxes[boxes.length - 1].click(); // hide bottom (regions)
+  await new Promise((r) => setTimeout(r, 400));
+  const withoutRegions = await drawn();
+  check(withoutRegions < withAll - 500,
+        `hiding regions reduces drawn pixels (${withAll} -> ${withoutRegions})`);
+  await boxes[boxes.length - 1].click(); // show again
+  await new Promise((r) => setTimeout(r, 400));
+
+  // 4) Reorder: send the top (line) backward; a region name becomes first.
+  await page.click(".lp-name"); // collapse style so rows are simple
+  await new Promise((r) => setTimeout(r, 150));
+  const sendBack = await page.$('.lp-item button[title="Send backward"]');
+  await sendBack.click();
+  await new Promise((r) => setTimeout(r, 250));
+  const newFirst = await page.$eval(".lp-name", (el) => el.textContent);
+  check(!/BGrenzenLine/.test(newFirst ?? ""),
+        `reorder moved line down (top now "${newFirst}")`);
+
+  // 5) Collapse: the panel folds to its header, freeing the map corner, and
+  // restores the same rows. Collapsing must not drop or hide any layer.
+  const panelH = () => page.$eval(".layers-panel", (el) => Math.round(el.getBoundingClientRect().height));
+  // The header must not shift: hiding the export/clear buttons used to shrink
+  // it and bounce the title by a few px.
+  const titleY = () => page.$eval(".lp-collapse", (el) => el.getBoundingClientRect().top);
+  const headH = () => page.$eval(".lp-head", (el) => el.getBoundingClientRect().height);
+  const openH = await panelH();
+  const openTitleY = await titleY();
+  const openHeadH = await headH();
+  const drawnOpen = await drawn();
+  await page.click(".lp-collapse");
+  await new Promise((r) => setTimeout(r, 250));
+  check(Math.abs((await titleY()) - openTitleY) < 0.5,
+        `"Layers" title does not move when collapsing (${openTitleY.toFixed(1)} -> ${(await titleY()).toFixed(1)})`);
+  check(Math.abs((await headH()) - openHeadH) < 0.5,
+        `header keeps its height when collapsed (${openHeadH.toFixed(1)} -> ${(await headH()).toFixed(1)})`);
+  const shutH = await panelH();
+  check(shutH < openH - 40, `collapse folds the panel to its header (${openH} -> ${shutH}px)`);
+  check((await page.$$(".lp-item")).length === 0, `collapsed panel hides the layer rows`);
+  // The map is untouched: collapsing is a panel affordance, not a layer edit.
+  check(Math.abs((await drawn()) - drawnOpen) < drawnOpen * 0.02,
+        `collapsing does not change what is drawn`);
+  await page.click(".lp-collapse");
+  await new Promise((r) => setTimeout(r, 250));
+  check((await page.$$(".lp-item")).length === 2,
+        `expanding restores both layer rows`);
+
+  // 6) Selection: isolate the regions layer so it fills the viewport, then
+  // click a filled region -> details panel shows its Name property.
+  // NB: several buttons share `.lp-clear`, so target "clear" by its text --
+  // a bare page.click(".lp-clear") hits "export" and silently leaves the
+  // layers in place, which then keeps the view fit to another layer's bounds.
+  const clearBtn = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".lp-clear")].find((b) => b.textContent.trim() === "clear"));
+  await clearBtn.asElement().click();
+  await page.waitForFunction(() => document.querySelectorAll(".lp-item").length === 0,
+                             { timeout: 3000 });
+  await runCmd("query Flaechen feed head[5] consume");
+  await new Promise((r) => setTimeout(r, 600));
+
+  // Locate a filled pixel in the *interior* of a polygon. Requiring the
+  // neighbourhood to be filled too avoids landing on a thin line or an
+  // anti-aliased edge, where picking legitimately misses. Colour-agnostic: the
+  // layer palette is a design choice and must not break this test.
+  const findTarget = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const rect = c.getBoundingClientRect();
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const w = c.width, h = c.height;
+      const px = new Uint8Array(w * h * 4);
+      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      const filled = (x, y) => {
+        const i = (y * w + x) * 4;
+        return px[i + 3] > 60 && Math.max(px[i], px[i + 1], px[i + 2]) > 60;
+      };
+      const R = 4; // interior margin
+      for (let y = R; y < h - R; y++) {
+        for (let x = R; x < w - R; x++) {
+          if (
+            filled(x, y) && filled(x + R, y) && filled(x - R, y) &&
+            filled(x, y + R) && filled(x, y - R)
+          ) {
+            // readPixels is bottom-up; CSS is top-down.
+            return {
+              x: rect.left + (x / w) * rect.width,
+              y: rect.top + ((h - y) / h) * rect.height,
+            };
+          }
+        }
+      }
+      return null;
+    });
+
+  // Snapshot -> click -> verify, and retry. Under full-suite load the regions
+  // aren't always drawn (and re-fitted) within the fixed wait above, so the
+  // first snapshot can find no interior pixel or an off frame and the pick
+  // misses. Re-snapshotting between attempts waits for a settled frame and a
+  // correct coordinate rather than flaking on a single early look.
+  let hasName = false;
+  for (let attempt = 0; attempt < 5 && !hasName; attempt++) {
+    const target = await findTarget();
+    if (!target) { await new Promise((r) => setTimeout(r, 300)); continue; }
+    await page.mouse.click(target.x, target.y);
+    await new Promise((r) => setTimeout(r, 300));
+    if (await page.$(".details")) {
+      hasName = await page.$$eval(".details .dk", (els) =>
+        els.some((e) => e.textContent === "Name"));
+    }
+  }
+  check(hasName, `clicking a region shows its Name in details`);
+
+  await page.screenshot({ path: `${OUT}/layers.png` });
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-map.mjs b/WebUI/frontend/e2e/verify-map.mjs
new file mode 100644
index 000000000..81a3b260b
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-map.mjs
@@ -0,0 +1,103 @@
+// End-to-end map verification: drives the running app with a headless browser,
+// runs spatial queries, and asserts the deck.gl WebGL canvas actually draws.
+//
+// Prereqs (all three must be up):
+//   - SecondoMonitor on :1234 with berlintest
+//   - FastAPI bridge on :8000
+//   - Vite dev server on :5173
+//
+// Usage:  CHROMIUM=/usr/bin/chromium node e2e/verify-map.mjs
+// Writes screenshots to e2e/out/.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const CASES = [
+  { name: "region", command: "query thecenter" },
+  { name: "line", command: "query BGrenzenLine" },
+  { name: "point", command: "query mehringdamm" },
+];
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: [
+    "--no-sandbox",
+    "--use-gl=angle",
+    "--use-angle=swiftshader",
+    "--enable-unsafe-swiftshader",
+    "--enable-webgl",
+    "--window-size=1200,800",
+  ],
+});
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1200, height: 800 });
+  page.on("pageerror", (e) => console.log("  [pageerror]", e.message));
+
+  async function runCmd(command) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", command);
+    await page.keyboard.press("Enter");
+  }
+
+  async function drawnPixels() {
+    return page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      if (!c) return -1;
+      const gl =
+        c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+        c.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) return -1;
+      const px = new Uint8Array(c.width * c.height * 4);
+      gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let drawn = 0;
+      for (let i = 0; i < px.length; i += 4)
+        if (px[i + 3] > 10 && px[i + 2] > 40) drawn++;
+      return drawn;
+    });
+  }
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await page.waitForFunction(
+    () => document.querySelectorAll(".entry").length >= 1,
+    { timeout: 8000 }
+  );
+
+  let failures = 0;
+  let expected = 0;
+  for (const { name, command } of CASES) {
+    expected += 1; // each spatial query adds one ".geohint" marker
+    await runCmd(command);
+    await page.waitForFunction(
+      (n) => document.querySelectorAll(".geohint").length >= n,
+      { timeout: 10000 },
+      expected
+    );
+    await new Promise((r) => setTimeout(r, 1200));
+    const drawn = await drawnPixels();
+    await page.screenshot({ path: `${OUT}/map-${name}.png` });
+    // A lone point is a ~4px dot (~80px); regions/lines are far larger.
+    const ok = drawn >= 30;
+    console.log(`${ok ? "PASS" : "FAIL"} ${name}: drawn=${drawn}`);
+    if (!ok) failures++;
+  }
+
+  process.exitCode = failures === 0 ? 0 : 1;
+} finally {
+  await browser.close();
+}
diff --git a/WebUI/frontend/e2e/verify-mpoint-fit.mjs b/WebUI/frontend/e2e/verify-mpoint-fit.mjs
new file mode 100644
index 000000000..c9cd8a9f2
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-mpoint-fit.mjs
@@ -0,0 +1,104 @@
+// Regression: a moving-object (mpoint) layer must fit correctly under the
+// BerlinMOD projection. The temporal bbox used to stay in raw BBBike
+// coordinates while the trips were projected, so the view fell back to a
+// whole-world Mercator view (reported for `train7`).
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const tileLon = (x, z) => (x / 2 ** z) * 360 - 180;
+const tileLat = (y, z) => {
+  const n = Math.PI - (2 * Math.PI * y) / 2 ** z;
+  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+};
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  const tiles = [];
+  page.on("response", (r) => {
+    const m = r.url().match(/tile\.openstreetmap\.org\/(\d+)\/(\d+)\/(\d+)\.png/);
+    if (m && r.status() === 200) {
+      const z = +m[1], x = +m[2], y = +m[3];
+      tiles.push({ z, lon: tileLon(x + 0.5, z), lat: tileLat(y + 0.5, z) });
+    }
+  });
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 800));
+  }
+  // A single mpoint draws only a faint context path, a thin trail and one dot,
+  // so use a lower brightness threshold than the multi-train tests.
+  const drawn = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const px = new Uint8Array(c.width * c.height * 4);
+      gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0;
+      for (let i = 0; i < px.length; i += 4)
+        if (px[i + 3] > 10 && Math.max(px[i], px[i + 1], px[i + 2]) > 40) n++;
+      return n;
+    });
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query train7"); // a bare mpoint: temporal-only layer
+  // Let the animation advance so the trail has actually been drawn.
+  await new Promise((r) => setTimeout(r, 2000));
+
+  // Flat first.
+  const flatPx = await drawn();
+  check(flatPx > 50, `mpoint visible in flat view (${flatPx})`);
+
+  // Now the projection: must fit Berlin, not the globe.
+  await page.select(".projection-ctl select", "berlinmod");
+  await page.waitForSelector(".maplibregl-map", { timeout: 8000 });
+  await new Promise((r) => setTimeout(r, 3500));
+
+  check(tiles.length > 0, `OSM tiles loaded (${tiles.length})`);
+  const nearBerlin = tiles.some(
+    (t) => Math.abs(t.lon - 13.4) < 1.0 && Math.abs(t.lat - 52.5) < 1.0
+  );
+  check(nearBerlin, `mpoint basemap centered on Berlin, not the world`);
+  // A whole-world view would be zoom 0-3; a fitted city view is much closer in.
+  const maxZoom = Math.max(...tiles.map((t) => t.z));
+  check(maxZoom >= 8, `zoomed to city level, not world (max tile z=${maxZoom})`);
+
+  const geoPx = await drawn();
+  check(geoPx > 50, `mpoint drawn under projection (${geoPx})`);
+
+  await page.screenshot({ path: `${OUT}/mpoint-projected.png` });
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-mregion.mjs b/WebUI/frontend/e2e/verify-mregion.mjs
new file mode 100644
index 000000000..a91fb9b15
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-mregion.mjs
@@ -0,0 +1,101 @@
+// Verifies moving regions (mregion): the polygon is rebuilt at the current
+// instant, so it visibly moves/changes as the timeline advances.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,850"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 850 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 900));
+  }
+  // Drawn-pixel count + centroid of the rendered region.
+  const shape = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const w = c.width, h = c.height;
+      const px = new Uint8Array(w * h * 4);
+      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0, sx = 0, sy = 0;
+      for (let i = 0; i < px.length; i += 4) {
+        if (px[i + 3] > 10 && Math.max(px[i], px[i + 1], px[i + 2]) > 40) {
+          const p = i / 4; sx += p % w; sy += Math.floor(p / w); n++;
+        }
+      }
+      return { n, cx: n ? sx / n : 0, cy: n ? sy / n : 0 };
+    });
+  const seek = async (frac) => {
+    await page.$eval(".tl-range", (el, f) => {
+      const set = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype, "value").set;
+      set.call(el, String(Number(el.max) * f));
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }, frac);
+    await new Promise((r) => setTimeout(r, 600));
+  };
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query mrain"); // a moving region (rain cloud drifting NE)
+
+  await page.waitForSelector(".timeline", { timeout: 10000 });
+  check(true, "mregion produces a timeline (temporal layer)");
+  await page.click(".tl-play"); // pause for deterministic sampling
+  await new Promise((r) => setTimeout(r, 300));
+
+  await seek(0.1);
+  const a = await shape();
+  await page.screenshot({ path: `${OUT}/mregion-t10.png` });
+  check(a.n > 500, `moving region is drawn (${a.n} px)`);
+
+  await seek(0.9);
+  const b = await shape();
+  await page.screenshot({ path: `${OUT}/mregion-t90.png` });
+  check(b.n > 500, `still drawn later in the domain (${b.n} px)`);
+
+  const moved = Math.hypot(a.cx - b.cx, a.cy - b.cy);
+  check(moved > 20,
+        `region moves as time advances (centroid drift ${moved.toFixed(1)}px)`);
+
+  // It must also work under the BerlinMOD projection (vertices projected).
+  await page.select(".projection-ctl select", "berlinmod");
+  await page.waitForSelector(".maplibregl-map", { timeout: 8000 });
+  await new Promise((r) => setTimeout(r, 2500));
+  const geo = await shape();
+  check(geo.n > 500, `moving region renders under BerlinMOD projection (${geo.n} px)`);
+  await page.screenshot({ path: `${OUT}/mregion-projected.png` });
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-plots.mjs b/WebUI/frontend/e2e/verify-plots.mjs
new file mode 100644
index 000000000..55fb0aa4c
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-plots.mjs
@@ -0,0 +1,99 @@
+// Verifies mreal/mint value plots: they render as small multiples (one y-scale
+// each, never a dual axis), the readout tracks the timeline cursor, and a
+// plot-only object (no geometry) still works.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,850"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 850 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 900));
+  }
+  const seek = async (frac) => {
+    await page.$eval(".tl-range", (el, f) => {
+      const set = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype, "value").set;
+      set.call(el, String(Number(el.max) * f));
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }, frac);
+    await new Promise((r) => setTimeout(r, 400));
+  };
+  const values = () => page.$$eval(".plot-value", (els) => els.map((e) => e.textContent));
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+
+  // A plot-only object: no geometry at all, just a value over time.
+  await runCmd("query mreal5000");
+  await page.waitForSelector(".plot", { timeout: 8000 });
+  check(true, "plot-only object (mreal, no geometry) renders a plot");
+  const constVals = await values();
+  check(constVals[0] === "5000", `mreal5000 reads 5000 (${constVals[0]})`);
+
+  // A varying mreal + a mint on different scales -> small multiples.
+  await runCmd("query distance(train7, mehringdamm)");
+  await runCmd("query noAtCenter");
+  await new Promise((r) => setTimeout(r, 500));
+  const plots = await page.$$eval(".plot", (els) => els.length);
+  check(plots === 3, `three measures -> three small multiples, not one axis (${plots})`);
+  const svgs = await page.$$eval(".plot-svg", (els) => els.length);
+  check(svgs === plots, `each measure has its own plot/y-scale (${svgs})`);
+
+  // Each plot is labelled and swatched (identity never colour-alone).
+  const labels = await page.$$eval(".plot-label", (els) => els.map((e) => e.textContent));
+  const swatches = await page.$$eval(".plot-swatch", (els) => els.length);
+  check(labels.every((l) => l && l.length > 0) && swatches === plots,
+        `every plot is directly labelled + swatched (${labels.join(", ")})`);
+
+  // The readout must follow the timeline cursor.
+  await page.click(".tl-play"); // pause
+  await new Promise((r) => setTimeout(r, 300));
+  await seek(0.05);
+  const early = await values();
+  await seek(0.55);
+  const mid = await values();
+  check(early.join("|") !== mid.join("|"),
+        `readouts track the timeline cursor (${early.join(",")} -> ${mid.join(",")})`);
+  // The constant series must NOT change, the varying one must.
+  check(early[0] === "5000" && mid[0] === "5000", `constant series stays constant`);
+
+  await page.screenshot({ path: `${OUT}/plots.png` });
+
+  // Collapsing keeps the map clear.
+  await page.click(".plots-toggle");
+  await new Promise((r) => setTimeout(r, 250));
+  check((await page.$$(".plot")).length === 0, `plots collapse away`);
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-projection.mjs b/WebUI/frontend/e2e/verify-projection.mjs
new file mode 100644
index 000000000..e16a242fa
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-projection.mjs
@@ -0,0 +1,90 @@
+// Verifies the BerlinMOD projection: querying berlintest data and selecting the
+// "BerlinMOD -> OSM" projection renders it on the OpenStreetMap basemap at the
+// real Berlin location (checked via the tile coordinates actually requested).
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+// OSM tile -> lon/lat of tile center.
+const tileLon = (x, z) => (x / 2 ** z) * 360 - 180;
+const tileLat = (y, z) => {
+  const n = Math.PI - (2 * Math.PI * y) / 2 ** z;
+  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+};
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  const tileCenters = [];
+  page.on("response", (r) => {
+    const m = r.url().match(/tile\.openstreetmap\.org\/(\d+)\/(\d+)\/(\d+)\.png/);
+    if (m && r.status() === 200) {
+      const z = +m[1], x = +m[2], y = +m[3];
+      tileCenters.push([tileLon(x + 0.5, z), tileLat(y + 0.5, z)]);
+    }
+  });
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 700));
+  }
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query thecenter"); // a region in BBBike coordinates
+
+  // Default: flat/Cartesian, no basemap.
+  const mode = () => page.$eval(".mapview", (e) => e.dataset.geographic);
+  check((await mode()) === "false", "flat by default (no basemap)");
+  check(!(await page.$(".maplibregl-map")), "no MapLibre basemap while flat");
+
+  // Switch projection to BerlinMOD -> OSM.
+  await page.select(".projection-ctl select", "berlinmod");
+  await page.waitForSelector(".maplibregl-map", { timeout: 8000 });
+  const proj = await page.$eval(".mapview", (e) => e.dataset.projection);
+  check(proj === "berlinmod", `map switched to the BerlinMOD projection (${proj})`);
+  check((await mode()) === "true", "map is in geographic mode");
+  check(!!(await page.$(".maplibregl-map")), "MapLibre basemap present");
+
+  await new Promise((r) => setTimeout(r, 3500)); // let tiles load
+  check(tileCenters.length > 0, `OSM tiles loaded (${tileCenters.length})`);
+
+  // At least one requested tile must be centered near Berlin (~13.4E, 52.5N).
+  const nearBerlin = tileCenters.some(
+    ([lon, lat]) => Math.abs(lon - 13.4) < 1.0 && Math.abs(lat - 52.5) < 1.0
+  );
+  check(nearBerlin,
+        `basemap is over Berlin (sample tile: ${tileCenters[0]?.map((v) => v.toFixed(2)).join(",")})`);
+
+  await page.screenshot({ path: `${OUT}/berlinmod-osm.png` });
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-remove-layer.mjs b/WebUI/frontend/e2e/verify-remove-layer.mjs
new file mode 100644
index 000000000..566f3e897
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-remove-layer.mjs
@@ -0,0 +1,61 @@
+// Regression: removing the last layer while a projection is active must not
+// crash the map (fitGeographic used to destructure an undefined bbox).
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  const errors = [];
+  page.on("pageerror", (e) => errors.push(e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 700));
+  }
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query thecenter");
+  await page.select(".projection-ctl select", "berlinmod"); // projection active
+  await page.waitForSelector(".maplibregl-map", { timeout: 8000 });
+  await new Promise((r) => setTimeout(r, 800));
+
+  // Remove the (only/last) layer via the ✕ button.
+  const removeBtn = await page.$(".lp-item .lp-x");
+  await removeBtn.click();
+  await new Promise((r) => setTimeout(r, 800));
+
+  const layerItems = await page.$$eval(".lp-item", (els) => els.length).catch(() => 0);
+  check(layerItems === 0, "last layer removed");
+  const crash = errors.find((e) => /bbox|Symbol\.iterator|undefined/.test(e));
+  check(!crash, `no crash removing last layer under projection (errors: ${errors.length ? errors.join(" | ") : "none"})`);
+
+  // The app must still be alive: run another query and see it render.
+  await runCmd("query mehringdamm");
+  await new Promise((r) => setTimeout(r, 600));
+  const back = await page.$$eval(".lp-item", (els) => els.length).catch(() => 0);
+  check(back === 1, "app still works after removal (new query adds a layer)");
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-render-modes.mjs b/WebUI/frontend/e2e/verify-render-modes.mjs
new file mode 100644
index 000000000..31ba1acec
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-render-modes.mjs
@@ -0,0 +1,141 @@
+// Verifies the render-mode + style polish: moving-object "positions" mode draws
+// discrete dots (fewer pixels than the trail), pointRadius affects them, and
+// internal _attr/_layer keys are hidden from the details panel.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 700));
+  }
+  const drawn = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const px = new Uint8Array(c.width * c.height * 4);
+      gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0;
+      for (let i = 0; i < px.length; i += 4)
+        if (px[i + 3] > 10 && Math.max(px[i], px[i + 1], px[i + 2]) > 70) n++;
+      return n;
+    });
+  async function setMode(mode) {
+    await page.select(".lp-style select", mode);
+    await new Promise((r) => setTimeout(r, 500));
+  }
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query Trains feed head[10] project[Id, Trip] consume");
+  await page.waitForSelector(".timeline", { timeout: 12000 });
+
+  // Pause and seek to mid-domain so measurements are stable.
+  await page.click(".tl-play");
+  await new Promise((r) => setTimeout(r, 200));
+  await page.$eval(".tl-range", (el) => {
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype, "value").set;
+    set.call(el, String(Number(el.max) * 0.5));
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+  await new Promise((r) => setTimeout(r, 400));
+
+  // Expand the layer style; the moving-mode <select> must be present.
+  await page.click(".lp-name");
+  await page.waitForSelector(".lp-style select", { timeout: 3000 });
+  check(true, "moving-mode selector shown for temporal layer");
+
+  await setMode("trail");
+  const trailPx = await drawn();
+  await page.screenshot({ path: `${OUT}/mode-trail.png` });
+
+  await setMode("points");
+  const pointsPx = await drawn();
+  await page.screenshot({ path: `${OUT}/mode-points.png` });
+  check(pointsPx > 0 && pointsPx < trailPx,
+        `positions mode draws discrete dots, fewer px than trail (${pointsPx} < ${trailPx})`);
+
+  // pointRadius affects the moving-position dots (item 3).
+  await page.$$eval(".lp-style input[type=range]", (els) => {
+    // order: opacity, point, line  -> index 1 is point radius
+    const el = els[1];
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype, "value").set;
+    set.call(el, "12");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+  await new Promise((r) => setTimeout(r, 400));
+  const biggerDots = await drawn();
+  check(biggerDots > pointsPx,
+        `increasing pointRadius enlarges position dots (${biggerDots} > ${pointsPx})`);
+
+  // Details panel hides internal _attr / _layer (item 2 parity).
+  const clearBtn = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".lp-clear")].find((b) => b.textContent === "clear"));
+  await clearBtn.asElement().click(); // remove the Trains layer first
+  await new Promise((r) => setTimeout(r, 200));
+  await runCmd("query Flaechen feed head[5] consume");
+  await new Promise((r) => setTimeout(r, 500));
+  const target = await page.evaluate(() => {
+    const c = document.querySelector(".mapview canvas");
+    const rect = c.getBoundingClientRect();
+    const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+               c.getContext("webgl", { preserveDrawingBuffer: true });
+    const w = c.width, h = c.height;
+    const px = new Uint8Array(w * h * 4);
+    gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, px);
+    for (let i = 0; i < px.length; i += 4) {
+      const r = px[i], g = px[i + 1], b = px[i + 2], a = px[i + 3];
+      if (a > 60 && b > 90 && r < 150) {
+        const p = i / 4, x = p % w, y = Math.floor(p / w);
+        if (x > w * 0.3 && x < w * 0.7 && y > h * 0.3 && y < h * 0.7)
+          return { x: rect.left + (x / w) * rect.width,
+                   y: rect.top + ((h - y) / h) * rect.height };
+      }
+    }
+    return null;
+  });
+  if (target) {
+    await page.mouse.click(target.x, target.y);
+    await new Promise((r) => setTimeout(r, 300));
+  }
+  const keys = await page.$$eval(".details .dk", (els) => els.map((e) => e.textContent))
+    .catch(() => []);
+  check(keys.includes("Name") && !keys.includes("_attr") && !keys.includes("_layer"),
+        `details hides _attr/_layer, keeps Name (keys: ${keys.join(",")})`);
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-ui-polish.mjs b/WebUI/frontend/e2e/verify-ui-polish.mjs
new file mode 100644
index 000000000..65b889c8b
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-ui-polish.mjs
@@ -0,0 +1,184 @@
+// Verifies: (1) the map does not move when editing layer style / removing a
+// layer, (2) the database list is not duplicated in the console header and the
+// open-db shown there matches the catalog, (3) panels resize by dragging the
+// splitters, (4) the console can be docked to the bottom.
+import { createRequire } from "module";
+import { mkdirSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+const HERE = dirname(fileURLToPath(import.meta.url));
+const OUT = `${HERE}/out`;
+mkdirSync(OUT, { recursive: true });
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1400,850"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1400, height: 850 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+  await page.evaluateOnNewDocument(() => localStorage.clear());
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 800));
+  }
+  // A fingerprint of what's on the map: total drawn pixels + their centroid.
+  const frame = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const w = c.width, h = c.height;
+      const px = new Uint8Array(w * h * 4);
+      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0, sx = 0, sy = 0;
+      for (let i = 0; i < px.length; i += 4) {
+        if (px[i + 3] > 10 && Math.max(px[i], px[i + 1], px[i + 2]) > 40) {
+          const p = i / 4; sx += p % w; sy += Math.floor(p / w); n++;
+        }
+      }
+      return { n, cx: n ? sx / n : 0, cy: n ? sy / n : 0 };
+    });
+  const rect = (sel) => page.$eval(sel, (el) => {
+    const r = el.getBoundingClientRect();
+    return { w: Math.round(r.width), h: Math.round(r.height), x: Math.round(r.x), y: Math.round(r.y) };
+  });
+  const drag = async (sel, dx, dy) => {
+    const r = await rect(sel);
+    await page.mouse.move(r.x + r.w / 2, r.y + r.h / 2);
+    await page.mouse.down();
+    await page.mouse.move(r.x + r.w / 2 + dx, r.y + r.h / 2 + dy, { steps: 8 });
+    await page.mouse.up();
+    await new Promise((r2) => setTimeout(r2, 250));
+  };
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query Flaechen feed head[5] consume");
+  await runCmd("query BGrenzenLine");
+  await new Promise((r) => setTimeout(r, 600));
+
+  // --- 1) Map must not re-fit on style change / layer removal ---
+  // Measuring a centroid over *coloured* pixels is the wrong instrument here: a
+  // recolour alone shifts it, because a brighter hue pushes more anti-aliased
+  // edge pixels past the brightness threshold. Instead, zoom out so the view is
+  // clearly not the auto-fit framing, then assert the framing survives: a re-fit
+  // would snap back and multiply the drawn-pixel count (viewfit measures ~10x).
+  const zoomOut = async (n) => {
+    const btn = await page.evaluateHandle(() =>
+      [...document.querySelectorAll(".zoom-ctl button")].find((b) => b.title === "Zoom out"));
+    for (let i = 0; i < n; i++) {
+      await btn.asElement().click();
+      await new Promise((r) => setTimeout(r, 200));
+    }
+    await new Promise((r) => setTimeout(r, 300));
+  };
+  await zoomOut(3);
+  const zoomed = await frame();
+  check(zoomed.n > 0, `zoomed-out baseline drawn (${zoomed.n} px)`);
+
+  await page.click(".lp-name"); // expand style editor of the top layer
+  await page.waitForSelector(".lp-style", { timeout: 3000 });
+  await page.$eval(".lp-style input[type=color]", (el) => {
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype, "value").set;
+    set.call(el, "#ff0000");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+  await new Promise((r) => setTimeout(r, 400));
+  const afterStyle = await frame();
+  check(afterStyle.n < zoomed.n * 3,
+        `map keeps its framing on style change (${zoomed.n} -> ${afterStyle.n} px; a re-fit would ~10x)`);
+
+  // Remove the top layer: the view must still not snap back to a fit.
+  await page.click(".lp-item .lp-x");
+  await new Promise((r) => setTimeout(r, 500));
+  const afterRemove = await frame();
+  check(afterRemove.n < zoomed.n * 3,
+        `map keeps its framing on layer removal (${zoomed.n} -> ${afterRemove.n} px)`);
+
+  // --- 2) No duplicated database list; console shows the open db ---
+  const headerText = await page.$eval(".console header", (el) => el.textContent);
+  check(!/BERLINTEST\s*·\s*OPT/.test(headerText ?? ""),
+        `console header no longer duplicates the database list`);
+  check(/db:\s*berlintest/.test(headerText ?? ""),
+        `console header shows the open database (${headerText?.trim()})`);
+  const catalogDbs = await page.$$eval(".cat-db", (els) => els.length);
+  check(catalogDbs >= 3, `catalog is the single place listing databases (${catalogDbs})`);
+
+  // --- 3) Default layout gives the map the full width (console bottom-docked) ---
+  const con0 = await rect(".console-pane");
+  const map0 = await rect(".map-pane");
+  check(con0.y > map0.y, `console is bottom-docked by default (map on top)`);
+
+  // --- 4) Resizable panels ---
+  const catBefore = (await rect(".catalog-pane")).w;
+  await drag(".split-a", 80, 0);
+  const catAfter = (await rect(".catalog-pane")).w;
+  check(catAfter > catBefore + 50, `catalog resizes by drag (${catBefore} -> ${catAfter})`);
+
+  const hBefore = (await rect(".console-pane")).h;
+  await drag(".split-b", 0, -70);
+  const hAfter = (await rect(".console-pane")).h;
+  check(hAfter > hBefore + 40, `bottom console resizes vertically (${hBefore} -> ${hAfter})`);
+
+  // --- 5) Collapsing panels frees space for the map ---
+  const mapBefore = await rect(".map-pane");
+  await page.click(".cat-collapse"); // catalog -> rail
+  await new Promise((r) => setTimeout(r, 300));
+  const mapWider = await rect(".map-pane");
+  check(mapWider.w > mapBefore.w + 150,
+        `collapsing the catalog widens the map (${mapBefore.w} -> ${mapWider.w})`);
+
+  // Collapse the query history -> console shrinks to an input bar.
+  const conFull = (await rect(".console-pane")).h;
+  const histBtn = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".dock-btn")].find((b) => /history/.test(b.textContent)));
+  await histBtn.asElement().click();
+  await new Promise((r) => setTimeout(r, 300));
+  const conSlim = await rect(".console-pane");
+  const mapTaller = await rect(".map-pane");
+  check(conSlim.h < conFull - 100,
+        `hiding history shrinks the console to an input bar (${conFull} -> ${conSlim.h})`);
+  check(mapTaller.h > mapWider.h + 100,
+        `map gains the freed height (${mapWider.h} -> ${mapTaller.h})`);
+  // The command input must remain usable while history is hidden.
+  check(!!(await page.$(".input input")), `query input still available when collapsed`);
+  await page.screenshot({ path: `${OUT}/layout-max-map.png` });
+
+  // Restore the catalog from the rail.
+  await page.click(".rail-btn");
+  await new Promise((r) => setTimeout(r, 300));
+  const catBack = await rect(".catalog-pane");
+  check(catBack.w > 100, `catalog restores from the rail (${catBack.w})`);
+
+  // --- 6) Docking back to the left still works ---
+  const dockBtn = await page.evaluateHandle(() =>
+    [...document.querySelectorAll(".dock-btn")].find((b) => /left|bottom/.test(b.textContent)));
+  await dockBtn.asElement().click();
+  await new Promise((r) => setTimeout(r, 300));
+  const back = await rect(".console-pane");
+  check(back.y < 60, `console docks to the left on demand`);
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/e2e/verify-viewfit.mjs b/WebUI/frontend/e2e/verify-viewfit.mjs
new file mode 100644
index 000000000..8dd62436c
--- /dev/null
+++ b/WebUI/frontend/e2e/verify-viewfit.mjs
@@ -0,0 +1,94 @@
+// Verifies auto-fit on projection change and the zoom/fit controls: toggling the
+// projection re-centers/zooms to the data (no "whole world"), and the +/-/fit
+// buttons change the view.
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const puppeteer = require("puppeteer-core");
+
+const URL = process.env.WEBUI_URL ?? "http://127.0.0.1:5173/";
+const CHROMIUM = process.env.CHROMIUM ?? "/usr/bin/chromium";
+
+const browser = await puppeteer.launch({
+  executablePath: CHROMIUM,
+  headless: "new",
+  args: ["--no-sandbox", "--use-gl=angle", "--use-angle=swiftshader",
+         "--enable-unsafe-swiftshader", "--window-size=1280,800"],
+});
+
+let fails = 0;
+const check = (c, m) => { console.log(`${c ? "PASS" : "FAIL"} ${m}`); if (!c) fails++; };
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 800 });
+  page.on("pageerror", (e) => console.log("[pageerror]", e.message));
+
+  async function runCmd(cmd) {
+    await page.click(".input input");
+    await page.$eval(".input input", (el) => (el.value = ""));
+    await page.type(".input input", cmd);
+    await page.keyboard.press("Enter");
+    await new Promise((r) => setTimeout(r, 700));
+  }
+  const drawn = () =>
+    page.evaluate(() => {
+      const c = document.querySelector(".mapview canvas");
+      const gl = c.getContext("webgl2", { preserveDrawingBuffer: true }) ||
+                 c.getContext("webgl", { preserveDrawingBuffer: true });
+      const px = new Uint8Array(c.width * c.height * 4);
+      gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      let n = 0;
+      for (let i = 0; i < px.length; i += 4)
+        if (px[i + 3] > 10 && Math.max(px[i], px[i + 1], px[i + 2]) > 70) n++;
+      return n;
+    });
+  const clickTitle = async (t) => {
+    const h = await page.evaluateHandle(
+      (title) => [...document.querySelectorAll(".zoom-ctl button")]
+        .find((b) => b.title === title), t);
+    await h.asElement().click();
+    await new Promise((r) => setTimeout(r, 350));
+  };
+
+  await page.goto(URL, { waitUntil: "networkidle0" });
+  await runCmd("open database berlintest");
+  await runCmd("query thecenter");
+  await new Promise((r) => setTimeout(r, 500));
+  const flatPx = await drawn();
+  check(flatPx > 1000, `data visible in flat view (${flatPx})`);
+
+  // Toggle projection on -> data must still be well-framed on OSM.
+  await page.select(".projection-ctl select", "berlinmod");
+  await page.waitForSelector(".maplibregl-map", { timeout: 8000 });
+  await new Promise((r) => setTimeout(r, 2500));
+  const geoPx = await drawn();
+  check(geoPx > 1000, `data auto-fit under BerlinMOD projection (${geoPx})`);
+
+  // Toggle projection back off -> must re-fit (NOT show the whole world/empty).
+  await page.select(".projection-ctl select", "none");
+  await new Promise((r) => setTimeout(r, 600));
+  const backPx = await drawn();
+  check(backPx > 1000, `data re-fit after turning projection off (${backPx})`);
+
+  // Zoom controls.
+  await clickTitle("Zoom out");
+  await clickTitle("Zoom out");
+  await clickTitle("Zoom out");
+  const outPx = await drawn();
+  check(outPx < backPx, `zoom-out shrinks the data (${outPx} < ${backPx})`);
+
+  await clickTitle("Fit to data");
+  const fitPx = await drawn();
+  check(Math.abs(fitPx - backPx) < backPx * 0.25,
+        `fit restores framing (${fitPx} ~ ${backPx})`);
+
+  await clickTitle("Zoom in");
+  await clickTitle("Zoom in");
+  const inPx = await drawn();
+  check(inPx > fitPx, `zoom-in enlarges the data (${inPx} > ${fitPx})`);
+} finally {
+  await browser.close();
+}
+
+console.log(fails === 0 ? "RESULT: PASS" : `RESULT: FAIL (${fails})`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/WebUI/frontend/index.html b/WebUI/frontend/index.html
new file mode 100644
index 000000000..2db200060
--- /dev/null
+++ b/WebUI/frontend/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SECONDO Web UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/WebUI/frontend/package-lock.json b/WebUI/frontend/package-lock.json
new file mode 100644
index 000000000..1603c0f4f
--- /dev/null
+++ b/WebUI/frontend/package-lock.json
@@ -0,0 +1,3644 @@
+{
+  "name": "secondo-webui",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "secondo-webui",
+      "version": "0.1.0",
+      "dependencies": {
+        "@deck.gl/core": "^9.3.6",
+        "@deck.gl/geo-layers": "^9.3.6",
+        "@deck.gl/layers": "^9.3.6",
+        "@deck.gl/react": "^9.3.6",
+        "maplibre-gl": "^4.7.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-map-gl": "^7.1.9"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^6.0.3",
+        "puppeteer-core": "^25.3.0",
+        "typescript": "^5.5.3",
+        "vite": "^8.1.5"
+      }
+    },
+    "node_modules/@deck.gl/core": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-9.3.6.tgz",
+      "integrity": "sha512-dCwF+ATE382DdbIqbaoHYCTAW7vutkVlQvWlmMebTDW1j7rPnKrT6ZPa0Y996U/8ZL5NNWc2/wWWY9LYhZVm2Q==",
+      "dependencies": {
+        "@loaders.gl/core": "^4.4.3",
+        "@loaders.gl/images": "^4.4.3",
+        "@luma.gl/core": "^9.3.3",
+        "@luma.gl/engine": "^9.3.3",
+        "@luma.gl/shadertools": "^9.3.3",
+        "@luma.gl/webgl": "^9.3.3",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/sun": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@probe.gl/env": "^4.1.1",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1",
+        "@types/offscreencanvas": "^2019.6.4",
+        "gl-matrix": "^3.0.0",
+        "mjolnir.js": "^3.0.0"
+      }
+    },
+    "node_modules/@deck.gl/extensions": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/extensions/-/extensions-9.3.6.tgz",
+      "integrity": "sha512-zWAyeyFlbryrjvlQYYUn+0g7u7LUtS4J6WDWMjrJOP89WCiYitWPz+aqL+0x6iNTZk5xz0YK5FxSarDRCWxZCQ==",
+      "peer": true,
+      "dependencies": {
+        "@luma.gl/shadertools": "^9.3.3",
+        "@luma.gl/webgl": "^9.3.3",
+        "@math.gl/core": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@luma.gl/core": "~9.3.3",
+        "@luma.gl/engine": "~9.3.3"
+      }
+    },
+    "node_modules/@deck.gl/geo-layers": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-9.3.6.tgz",
+      "integrity": "sha512-qhRrbVQ05nuxM4H8DnA6kuikTFDZWXVvOMDFBeOHF5k4rsjiyIg5ahIJG0AYuYKMzAeYMNyPDR+diFH1JV0yLg==",
+      "dependencies": {
+        "@loaders.gl/3d-tiles": "^4.4.3",
+        "@loaders.gl/gis": "^4.4.3",
+        "@loaders.gl/loader-utils": "^4.4.3",
+        "@loaders.gl/mvt": "^4.4.3",
+        "@loaders.gl/schema": "^4.4.3",
+        "@loaders.gl/terrain": "^4.4.3",
+        "@loaders.gl/tiles": "^4.4.3",
+        "@loaders.gl/wms": "^4.4.3",
+        "@luma.gl/gltf": "^9.3.3",
+        "@luma.gl/shadertools": "^9.3.3",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/culling": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@types/geojson": "^7946.0.8",
+        "a5-js": "^0.7.2",
+        "h3-js": "^4.4.0",
+        "long": "^3.2.0"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@deck.gl/extensions": "~9.3.0",
+        "@deck.gl/layers": "~9.3.0",
+        "@deck.gl/mesh-layers": "~9.3.0",
+        "@loaders.gl/core": "^4.4.3",
+        "@luma.gl/core": "~9.3.3",
+        "@luma.gl/engine": "~9.3.3"
+      }
+    },
+    "node_modules/@deck.gl/layers": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-9.3.6.tgz",
+      "integrity": "sha512-Ex3Lh4AIQ4zi8iojyWr/kpjwdY9HFKkR0iLeNt0hgz3fOmgL8++5jwUuzt+VOQnjE+x7TsNlM1B1fLciHnH4Xg==",
+      "dependencies": {
+        "@loaders.gl/images": "^4.4.3",
+        "@loaders.gl/schema": "^4.4.3",
+        "@luma.gl/shadertools": "^9.3.3",
+        "@mapbox/tiny-sdf": "^2.0.5",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/polygon": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@types/geojson": "^7946.0.16",
+        "earcut": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@loaders.gl/core": "^4.4.3",
+        "@luma.gl/core": "~9.3.3",
+        "@luma.gl/engine": "~9.3.3"
+      }
+    },
+    "node_modules/@deck.gl/mesh-layers": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-9.3.6.tgz",
+      "integrity": "sha512-tKG+gqwSfVQTocH2XlV5o3otUQ/DARJ5vj/JpRv6FTWhUkHo5Acp9BDkvv3Lb5KYx0MkLZyjSKsvai1oAxVAIQ==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/gltf": "^4.4.3",
+        "@loaders.gl/schema": "^4.4.3",
+        "@luma.gl/gltf": "^9.3.3",
+        "@luma.gl/shadertools": "^9.3.3"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@luma.gl/core": "~9.3.3",
+        "@luma.gl/engine": "~9.3.3",
+        "@luma.gl/gltf": "~9.3.3",
+        "@luma.gl/shadertools": "~9.3.3"
+      }
+    },
+    "node_modules/@deck.gl/react": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/react/-/react-9.3.6.tgz",
+      "integrity": "sha512-oZ8Bvj8GzTU50864X4aujrlzeGytf60Azd7pAeotQO+8vZkIw8e9pxoZo6S4NM2NOtHKHWkGVCy08Fx9482lpA==",
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@deck.gl/widgets": "~9.3.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
+    "node_modules/@deck.gl/widgets": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@deck.gl/widgets/-/widgets-9.3.6.tgz",
+      "integrity": "sha512-45A0rjEuOYr+rAs2RqSgjCOVz8zlkzQLFLskcrA2pQgc1+zFmIzgcncE9Hi2aque87Chb1oZ5BdGMLA0jl5Lnw==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.5",
+        "preact": "^10.17.0"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.3.0",
+        "@luma.gl/core": "~9.3.3"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "peer": true
+    },
+    "node_modules/@loaders.gl/3d-tiles": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/3d-tiles/-/3d-tiles-4.4.3.tgz",
+      "integrity": "sha512-trKDXRYE7xIyH0g2tvDG0SHo/J5sCUhOec70Ne1a5t64/yY+yifQ4B67n4AnSOnZ+l4sxjUypjxhHUqoAeWieQ==",
+      "dependencies": {
+        "@loaders.gl/compression": "4.4.3",
+        "@loaders.gl/crypto": "4.4.3",
+        "@loaders.gl/draco": "4.4.3",
+        "@loaders.gl/gltf": "4.4.3",
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/math": "4.4.3",
+        "@loaders.gl/tiles": "4.4.3",
+        "@loaders.gl/zip": "4.4.3",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/culling": "^4.1.0",
+        "@math.gl/geospatial": "^4.1.0",
+        "@probe.gl/log": "^4.1.1",
+        "long": "^5.2.1"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/3d-tiles/node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="
+    },
+    "node_modules/@loaders.gl/compression": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/compression/-/compression-4.4.3.tgz",
+      "integrity": "sha512-v3feEE48FblxBPaILwejV48plcLmjvOh2yBQrgvKvLCaQdQ9bVz7PzhrUdLW0VDVlGnoR1NUJtI833627U8Heg==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "@types/pako": "^1.0.1",
+        "fflate": "0.7.4",
+        "pako": "1.0.11",
+        "snappyjs": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "@types/brotli": "^1.3.0",
+        "brotli": "^1.3.2",
+        "lz4js": "^0.2.0",
+        "zstd-codec": "^0.1"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/core": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-4.4.3.tgz",
+      "integrity": "sha512-D6kXFdpUtYwoqS5OQLLaLELkHlS3qIdcSgzVvsh/MinRteeVIITJojqEc/lmDx1zVR3j6WND7yPGF4i4aOwiOg==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/schema-utils": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "@probe.gl/log": "^4.1.1"
+      }
+    },
+    "node_modules/@loaders.gl/crypto": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/crypto/-/crypto-4.4.3.tgz",
+      "integrity": "sha512-zratEvtj/Mdbu0NwwwzdbP1oyY4FNxLcOY2JRcYqe3wzw+0kyeK7THdaVPcduZAnQ06HtpwHls61ONZunjMtXA==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "@types/crypto-js": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/draco": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/draco/-/draco-4.4.3.tgz",
+      "integrity": "sha512-YNI1MUDDIbrJBamgU1emLBC2kQUbESNIOZv9bcS8xwxr9SNMfnAMZWgdUJkYcC5xzV2q6ty2I/b2eGhXQkd9EQ==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/schema-utils": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "draco3d": "1.5.7"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/geoarrow": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/geoarrow/-/geoarrow-4.4.3.tgz",
+      "integrity": "sha512-P0TSbtsw1UI1rZnp1tGHuqPVHcH7Yc14q9jZLIcrjhQOzol55YDI0/hYSXpA73794nR6o8ALxNwiy7/4HlBlcA==",
+      "dependencies": {
+        "@math.gl/polygon": "^4.1.0",
+        "apache-arrow": ">= 17.0.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/gis": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gis/-/gis-4.4.3.tgz",
+      "integrity": "sha512-2dhhzfCT1cXQQLZ1lMtb2Y+pX414qaeLL8Wpx7FJu/ar1HJfKL6Fb3juTR+2WzMybkAOX5zLxYh6+y7LqiPjgA==",
+      "dependencies": {
+        "@loaders.gl/geoarrow": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/schema-utils": "4.4.3",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@math.gl/polygon": "^4.1.0",
+        "pbf": "^3.2.1"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/gltf": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gltf/-/gltf-4.4.3.tgz",
+      "integrity": "sha512-OYE/0nGLYm3weiCb78+ROwdNVyuLS8IZwN8NvGqctqt0HS4ZD40biu7b9L8xkFbVTZQkQZXDpyZ61n5PSQeU1A==",
+      "dependencies": {
+        "@loaders.gl/draco": "4.4.3",
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/textures": "4.4.3",
+        "@math.gl/core": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/images": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-4.4.3.tgz",
+      "integrity": "sha512-a4C6x+4GZUchf+IwpdBOvyGeLGSbGOVob+WSWfGUezEQ4gqu1zS1pn3lCX3ZTL5P+Ch3v6KKwPGdO5YdTd52Ew==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/loader-utils": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-4.4.3.tgz",
+      "integrity": "sha512-5yt1OqZPYR3d+xFAqtzSKO24Hd7019KqN+iOWp7XBKPQBS+sAEhAnmSTnO1axo45IEi14J3FhMDk+ndqBoSKEQ==",
+      "dependencies": {
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1"
+      }
+    },
+    "node_modules/@loaders.gl/math": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-4.4.3.tgz",
+      "integrity": "sha512-EdEsZGqo1AX3sqgXt8bSBmdo+8ncURXjWucyQ8eeIJ2h0VIqM3bLkOGKk/D1ngeqK4hJXcjiturYHBW1B286lw==",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/mvt": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/mvt/-/mvt-4.4.3.tgz",
+      "integrity": "sha512-s2R8GRlaWDfZ7oKDFiY0c5EJ8elkf2VbPvdC0eoh69DN71y+AKngDSB+7h4veH/oueLEjmV7tNlF0+Snv58CPw==",
+      "dependencies": {
+        "@loaders.gl/gis": "4.4.3",
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@math.gl/polygon": "^4.1.0",
+        "@probe.gl/stats": "^4.1.1",
+        "pbf": "^3.2.1"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/schema": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/schema/-/schema-4.4.3.tgz",
+      "integrity": "sha512-tDb/rOn44nHWvMFSOaAk1/pQcQcusxirGCM1O5BMJR0PQ71UrCHey56rsbcf7/wGhvyRwPtX+oiMzlJ9TmN8vQ==",
+      "dependencies": {
+        "@types/geojson": "^7946.0.7",
+        "apache-arrow": ">= 17.0.0"
+      }
+    },
+    "node_modules/@loaders.gl/schema-utils": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/schema-utils/-/schema-utils-4.4.3.tgz",
+      "integrity": "sha512-TggzQWkzf9pIYbj8I9RlTk33kwXslvDkY1nnw/OL/hika6qTls1G127qK5m9skiAjElk5ZkvQLQcwhOboZXZeA==",
+      "dependencies": {
+        "@loaders.gl/schema": "4.4.3",
+        "@types/geojson": "^7946.0.7",
+        "apache-arrow": ">= 17.0.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/terrain": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/terrain/-/terrain-4.4.3.tgz",
+      "integrity": "sha512-wu7O3FVXE6D1kSm5inRu8M8V1Vv5AYlnlNB0EJIOSSXBLhfNbPL5oHjlD2wIlag0gSxOVlhWjCUcWS3/Nb0P8Q==",
+      "dependencies": {
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@mapbox/martini": "^0.2.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/textures": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/textures/-/textures-4.4.3.tgz",
+      "integrity": "sha512-QNC+anwJJcHsLsaAzXozJ+IUNxBnqWsZLUMkUZIorVey+XQcp2hcYng5iOmUQnCZdIR9gYe53VJa0j1C0JXRSg==",
+      "dependencies": {
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/worker-utils": "4.4.3",
+        "@math.gl/types": "^4.1.0",
+        "ktx-parse": "^0.7.0",
+        "texture-compressor": "^1.0.2"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/tiles": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-4.4.3.tgz",
+      "integrity": "sha512-8ZkPMe+daMV5mHKTEU591mJSp6pswdWliI+PcNhSOkpeuvyjecaYKSzuzMFMmaywfgOLpYl+lpfzKUEmCcE5vQ==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/math": "4.4.3",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/culling": "^4.1.0",
+        "@math.gl/geospatial": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@probe.gl/stats": "^4.1.1"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/wms": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/wms/-/wms-4.4.3.tgz",
+      "integrity": "sha512-fKYCdIp6xQcucbm42bztprlfMJ5SZKx5f2ZwWLcj+kwv53U7hjcbIl04uMAk/i/7Xw/I4QEyA/XnPnxquuIFHQ==",
+      "dependencies": {
+        "@loaders.gl/images": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "@loaders.gl/xml": "4.4.3",
+        "@turf/rewind": "^5.1.5",
+        "deep-strict-equal": "^0.2.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/worker-utils": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/worker-utils/-/worker-utils-4.4.3.tgz",
+      "integrity": "sha512-RZt/NwFXm6Kx3Fn/rqiW3Alse9Z0XtBktH/EFAp8W6LvsKuxpRMjULqGfybTu2waRXRYUNYZ6zGs9aOWbtDRLw==",
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/xml": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/xml/-/xml-4.4.3.tgz",
+      "integrity": "sha512-/CtpIWaPKBs/AaX7MqUGSSE1OAhq78nDrJ5xPExYdIQAw5gl5OSmLZobUSSxV5FGaqkJRVbtC/sj5sUpci7doA==",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.4.3",
+        "@loaders.gl/schema": "4.4.3",
+        "fast-xml-parser": "^5.3.6"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@loaders.gl/zip": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/zip/-/zip-4.4.3.tgz",
+      "integrity": "sha512-HH/JLulJJVyqmbQYp4e/9MPjaTnUFnWfhgza8sMGIBYZ/YuZXOc6Ad2vvmyFQHvNbVr+NLrRZODASEjNZQ5rfQ==",
+      "dependencies": {
+        "@loaders.gl/compression": "4.4.3",
+        "@loaders.gl/crypto": "4.4.3",
+        "@loaders.gl/loader-utils": "4.4.3",
+        "jszip": "^3.1.5",
+        "md5": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.4.0"
+      }
+    },
+    "node_modules/@luma.gl/core": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-9.3.6.tgz",
+      "integrity": "sha512-eqHnCPh2xHYkdd9rEkiIIkGMixNiJkq1ROrnTob6npvmZNVHXL0ubIw5KueL7rqW0+J1tm+p2+TXZaCmn0sP7Q==",
+      "dependencies": {
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.1.1",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1",
+        "@types/offscreencanvas": "^2019.7.3"
+      }
+    },
+    "node_modules/@luma.gl/engine": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-9.3.6.tgz",
+      "integrity": "sha512-NYTdhn2NaH/MjN8qXCl2ukrT1Ac9iTKu1mgN0wz11XRd1QYnlMNBXswRROD7IZ2PUsBWdmYHc9qE8wKBQqMuIA==",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.3.0",
+        "@luma.gl/shadertools": "~9.3.0"
+      }
+    },
+    "node_modules/@luma.gl/gltf": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@luma.gl/gltf/-/gltf-9.3.6.tgz",
+      "integrity": "sha512-9R27aYwvu6KBJzd9Kxs4cqIJpgJsI1AyL6Pn6+5CrmGbaCqMtgWi7Sf9Wo+bqv0PRxwzH0j1oAv7qRk0hGbstw==",
+      "dependencies": {
+        "@loaders.gl/core": "~4.4.0",
+        "@loaders.gl/gltf": "~4.4.0",
+        "@loaders.gl/textures": "~4.4.0",
+        "@math.gl/core": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.3.0",
+        "@luma.gl/engine": "~9.3.0",
+        "@luma.gl/shadertools": "~9.3.0"
+      }
+    },
+    "node_modules/@luma.gl/shadertools": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-9.3.6.tgz",
+      "integrity": "sha512-dDuD8lCOkAE1L7hJGZEyZAi7upR1HG3wEEIQ1gCLaTTbJWC7tNtnVz853lqUA+VXgjgS9NiQFFRcosiIZmW4Vg==",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.3.0"
+      }
+    },
+    "node_modules/@luma.gl/webgl": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-9.3.6.tgz",
+      "integrity": "sha512-tGm7FGWPmJKxGZMvkRPRi219x3tKmBxR7Uke09nTp2ujNak/O5V9xPIQ9lUBGTxqAb8U2yjKkXG8j+f/4b2+sw==",
+      "dependencies": {
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.1.1"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.3.0"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.3.tgz",
+      "integrity": "sha512-0SElaV0uMxEnxzBhhX9WTuPyUeMsAN/SS0i16tjuba4/mio63MG9khjC1a0JAiPGXAwvwm4UfHJURCN7nyudQg==",
+      "engines": {
+        "node": ">= 22"
+      }
+    },
+    "node_modules/@mapbox/martini": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/martini/-/martini-0.2.0.tgz",
+      "integrity": "sha512-7hFhtkb0KTLEls+TRw/rWayq5EeHtTaErgm/NskVoXmtgAQu/9D299aeyj6mzAR/6XUnYRp2lU+4IcrYRFjVsQ=="
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz",
+      "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "20.4.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz",
+      "integrity": "sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^4.0.0",
+        "minimist": "^1.2.8",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "tinyqueue": "^3.0.0"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/@math.gl/core": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-4.1.0.tgz",
+      "integrity": "sha512-FrdHBCVG3QdrworwrUSzXIaK+/9OCRLscxI2OUy6sLOHyHgBMyfnEGs99/m3KNvs+95BsnQLWklVfpKfQzfwKA==",
+      "dependencies": {
+        "@math.gl/types": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/culling": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/culling/-/culling-4.1.0.tgz",
+      "integrity": "sha512-jFmjFEACnP9kVl8qhZxFNhCyd47qPfSVmSvvjR0/dIL6R9oD5zhR1ub2gN16eKDO/UM7JF9OHKU3EBIfeR7gtg==",
+      "dependencies": {
+        "@math.gl/core": "4.1.0",
+        "@math.gl/types": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/geospatial": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/geospatial/-/geospatial-4.1.0.tgz",
+      "integrity": "sha512-BzsUhpVvnmleyYF6qdqJIip6FtIzJmnWuPTGhlBuPzh7VBHLonCFSPtQpbkRuoyAlbSyaGXcVt6p6lm9eK2vtg==",
+      "dependencies": {
+        "@math.gl/core": "4.1.0",
+        "@math.gl/types": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/polygon": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-4.1.0.tgz",
+      "integrity": "sha512-YA/9PzaCRHbIP5/0E9uTYrqe+jsYTQoqoDWhf6/b0Ixz8bPZBaGDEafLg3z7ffBomZLacUty9U3TlPjqMtzPjA==",
+      "dependencies": {
+        "@math.gl/core": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/sun": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/sun/-/sun-4.1.0.tgz",
+      "integrity": "sha512-i3q6OCBLSZ5wgZVhXg+X7gsjY/TUtuFW/2KBiq/U1ypLso3S4sEykoU/MGjxUv1xiiGtr+v8TeMbO1OBIh/HmA=="
+    },
+    "node_modules/@math.gl/types": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/types/-/types-4.1.0.tgz",
+      "integrity": "sha512-clYZdHcmRvMzVK5fjeDkQlHUzXQSNdZ7s4xOqC3nJPgz4C/TZkUecTo9YS4PruZqtDda/ag4erndP0MIn40dGA=="
+    },
+    "node_modules/@math.gl/web-mercator": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-4.1.0.tgz",
+      "integrity": "sha512-HZo3vO5GCMkXJThxRJ5/QYUYRr3XumfT8CzNNCwoJfinxy5NtKUd7dusNTXn7yJ40UoB8FMIwkVwNlqaiRZZAw==",
+      "dependencies": {
+        "@math.gl/core": "4.1.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@nodable/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@nodable/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-9uGyhaQavEUMC8AIddIjau4NsnsXhou+j5sBAGojCM1oxmQpVKTWR/9JxABD6UAv12vpIms55fPZKFQEhG6uBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodable"
+        }
+      ]
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.139.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.139.0.tgz",
+      "integrity": "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@probe.gl/env": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@probe.gl/env/-/env-4.1.1.tgz",
+      "integrity": "sha512-+68seNDMVsEegRB47pFA/Ws1Fjy8agcFYXxzorKToyPcD6zd+gZ5uhwoLd7TzsSw6Ydns//2KEszWn+EnNHTbA=="
+    },
+    "node_modules/@probe.gl/log": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@probe.gl/log/-/log-4.1.1.tgz",
+      "integrity": "sha512-kcZs9BT44pL7hS1OkRGKYRXI/SN9KejUlPD+BY40DguRLzdC5tLG/28WGMyfKdn/51GT4a0p+0P8xvDn1Ez+Kg==",
+      "dependencies": {
+        "@probe.gl/env": "4.1.1"
+      }
+    },
+    "node_modules/@probe.gl/stats": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-4.1.1.tgz",
+      "integrity": "sha512-4VpAyMHOqydSvPlEyHwXaE+AkIdR03nX+Qhlxsk2D/IW4OVmDZgIsvJB1cDzyEEtcfKcnaEbfXeiPgejBceT6g=="
+    },
+    "node_modules/@puppeteer/browsers": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.0.6.tgz",
+      "integrity": "sha512-B/gKoqlFkzhvzsI6jo9K1cZz9o5ypviVv/xu8CwA4grZzyVwN+XfkT+tu8T1zrauuEXv6VhS2oGX+6NL95WcKA==",
+      "dev": true,
+      "dependencies": {
+        "modern-tar": "^0.7.6",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "browsers": "lib/main-cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "proxy-agent": ">=8.0.1",
+        "yauzl": "^2.10.0 || ^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "proxy-agent": {
+          "optional": true
+        },
+        "yauzl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
+      "integrity": "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz",
+      "integrity": "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz",
+      "integrity": "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz",
+      "integrity": "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz",
+      "integrity": "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz",
+      "integrity": "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz",
+      "integrity": "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz",
+      "integrity": "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz",
+      "integrity": "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz",
+      "integrity": "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz",
+      "integrity": "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz",
+      "integrity": "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz",
+      "integrity": "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz",
+      "integrity": "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz",
+      "integrity": "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@turf/boolean-clockwise": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-5.1.5.tgz",
+      "integrity": "sha512-FqbmEEOJ4rU4/2t7FKx0HUWmjFEVqR+NJrFP7ymGSjja2SQ7Q91nnBihGuT+yuHHl6ElMjQ3ttsB/eTmyCycxA==",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/invariant": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/clone": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-5.1.5.tgz",
+      "integrity": "sha512-//pITsQ8xUdcQ9pVb4JqXiSqG4dos5Q9N4sYFoWghX21tfOV2dhc5TGqYOhnHrQS7RiKQL1vQ48kIK34gQ5oRg==",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw=="
+    },
+    "node_modules/@turf/invariant": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-5.2.0.tgz",
+      "integrity": "sha512-28RCBGvCYsajVkw2EydpzLdcYyhSA77LovuOvgCJplJWaNVyJYH6BOR3HR9w50MEkPqb/Vc/jdo6I6ermlRtQA==",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/meta": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-5.2.0.tgz",
+      "integrity": "sha512-ZjQ3Ii62X9FjnK4hhdsbT+64AYRpaI8XMBMcyftEOGSmPMUVnkbvuv3C9geuElAXfQU7Zk1oWGOcrGOD9zr78Q==",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/rewind": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/rewind/-/rewind-5.1.5.tgz",
+      "integrity": "sha512-Gdem7JXNu+G4hMllQHXRFRihJl3+pNl7qY+l4qhQFxq+hiU1cQoVFnyoleIqWKIrdK/i2YubaSwc3SCM7N5mMw==",
+      "dependencies": {
+        "@turf/boolean-clockwise": "^5.1.5",
+        "@turf/clone": "^5.1.5",
+        "@turf/helpers": "^5.1.5",
+        "@turf/invariant": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/brotli": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/brotli/-/brotli-1.3.5.tgz",
+      "integrity": "sha512-9xoNr+bcxT236/7ZgcWw/6Pb2RRetE13p4bFy1xYSckKwyOiRfmInay8baUWZgH7/284Wl6IPe7+nOI9+OQg/A==",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/command-line-args": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.3.tgz",
+      "integrity": "sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw=="
+    },
+    "node_modules/@types/command-line-usage": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/command-line-usage/-/command-line-usage-5.0.4.tgz",
+      "integrity": "sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg=="
+    },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+    },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/mapbox__point-geometry": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+      "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
+    },
+    "node_modules/@types/mapbox__vector-tile": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+      "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/mapbox__point-geometry": "*",
+        "@types/pbf": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
+      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
+    },
+    "node_modules/@types/pako": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.7.tgz",
+      "integrity": "sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A=="
+    },
+    "node_modules/@types/pbf": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
+      "integrity": "sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==",
+      "dev": true,
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/a5-js": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/a5-js/-/a5-js-0.7.3.tgz",
+      "integrity": "sha512-3aoMwHmNkyuMDHS4q6GRRInpOawamen2pokIbc0MQmR9cqG0Y9+B0bZpzswwetjrSG2ckbYtShH+nKru6+3O5Q==",
+      "dependencies": {
+        "gl-matrix": "^3.4.3"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anynum": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/anynum/-/anynum-1.0.1.tgz",
+      "integrity": "sha512-N6//FLET/tXYNM/F6ABca1oH6fWB+KlTt909Le28WMDBk8oaT4vY17DCrwg2MvmuqUKt3Ni4N5dGJ/EoBgcO6A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ]
+    },
+    "node_modules/apache-arrow": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-21.1.0.tgz",
+      "integrity": "sha512-kQrYLxhC+NTVVZ4CCzGF6L/uPVOzJmD1T3XgbiUnP7oTeVFOFgEUu6IKNwCDkpFoBVqDKQivlX4RUFqqnWFlEA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.11",
+        "@types/command-line-args": "^5.2.3",
+        "@types/command-line-usage": "^5.0.4",
+        "@types/node": "^24.0.3",
+        "command-line-args": "^6.0.1",
+        "command-line-usage": "^7.0.1",
+        "flatbuffers": "^25.1.24",
+        "json-bignum": "^0.0.3",
+        "tslib": "^2.6.2"
+      },
+      "bin": {
+        "arrow2csv": "bin/arrow2csv.js"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-back": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.3.tgz",
+      "integrity": "sha512-SGDvmg6QTYiTxCBkYVmThcoa67uLl35pyzRHdpCGBOcqFy6BtwnphoFPk7LhJshD+Yk1Kt35WGWeZPTgwR4Fhw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/buf-compare": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buf-compare/-/buf-compare-1.0.1.tgz",
+      "integrity": "sha512-Bvx4xH00qweepGc43xFvMs5BKASXTbHaHm6+kDYIK9p/4iFwjATQkmPKHQSgJZzKbAymhztRbXUf1Nqhzl73/Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bytewise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
+      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
+      "dependencies": {
+        "bytewise-core": "^1.2.2",
+        "typewise": "^1.0.3"
+      }
+    },
+    "node_modules/bytewise-core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
+      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
+      "dependencies": {
+        "typewise-core": "^1.2"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/chromium-bidi": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-16.0.1.tgz",
+      "integrity": "sha512-J63PGu/9PpeCwLIcKYyzWP6yaVL5pxuBc0shlYCYM8BaAkmlwiQboXO1iNbOgSDbVklEyYFfNEcHD8oOAWacUA==",
+      "dev": true,
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=20.19.0 <22.0.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/command-line-args": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-6.0.2.tgz",
+      "integrity": "sha512-AIjYVxrV9X752LmPDLbVYv8aMCuHPSLZJXEo2qo/xJfv+NYhaZ4sMSF01rM+gHPaMgvPM0l5D/F+Qx+i2WfSmQ==",
+      "dependencies": {
+        "array-back": "^6.2.3",
+        "find-replace": "^5.0.2",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^7.3.0"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "peerDependencies": {
+        "@75lb/nature": "latest"
+      },
+      "peerDependenciesMeta": {
+        "@75lb/nature": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/command-line-usage": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.4.tgz",
+      "integrity": "sha512-85UdvzTNx/+s5CkSgBm/0hzP80RFHAa7PsfeADE5ezZF3uHz3/Tqj9gIKGT9PTtpycc3Ua64T0oVulGfKxzfqg==",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "chalk-template": "^0.4.0",
+        "table-layout": "^4.1.1",
+        "typical": "^7.3.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/core-assert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/core-assert/-/core-assert-0.2.1.tgz",
+      "integrity": "sha512-IG97qShIP+nrJCXMCgkNZgH7jZQ4n8RpPyPeXX++T6avR/KhLhgLiHKoEn5Rc1KjfycSfA9DMa6m+4C4eguHhw==",
+      "dependencies": {
+        "buf-compare": "^1.0.0",
+        "is-error": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true
+    },
+    "node_modules/deep-strict-equal": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/deep-strict-equal/-/deep-strict-equal-0.2.0.tgz",
+      "integrity": "sha512-3daSWyvZ/zwJvuMGlzG1O+Ow0YSadGfb3jsh9xoCutv2tWyB9dA4YvR9L9/fSdDZa2dByYQe+TqapSGUrjnkoA==",
+      "dependencies": {
+        "core-assert": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1638949",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1638949.tgz",
+      "integrity": "sha512-mXwg4Fqnv0WR4iuAT/gYUmctNkjILwXFHyZ+m7Ty1dfr0ezZt2U3gnrrJTfRobJTHoXf+IbuFvFITzLrLFjwJA==",
+      "dev": true
+    },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ=="
+    },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-xml-builder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.3.0.tgz",
+      "integrity": "sha512-F74cZEdCvuw9P41GAC3rod4X04jjWGM1JPEv/GWSqFTWLsdyMSBMBMlm9Hk3GLBgLBbdBNY8yee0pQh2RBVESQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "dependencies": {
+        "path-expression-matcher": "^1.6.2",
+        "xml-naming": "^0.3.0"
+      }
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.10.0.tgz",
+      "integrity": "sha512-SLhnTEqE5QpJHq/6zl9bsmImEP2adv+y6Wy+cJa7nVTRzQh1OZfCe9k29M5xN74LWnu0xa1zrUrq3KnOKl92Fg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "dependencies": {
+        "@nodable/entities": "^2.2.0",
+        "fast-xml-builder": "^1.2.0",
+        "is-unsafe": "^2.0.0",
+        "path-expression-matcher": "^1.6.2",
+        "strnum": "^2.4.1",
+        "xml-naming": "^0.3.0"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fflate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
+      "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw=="
+    },
+    "node_modules/find-replace": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-5.0.2.tgz",
+      "integrity": "sha512-Y45BAiE3mz2QsrN2fb5QEtO4qb44NcS7en/0y9PEVsg351HsLeVclP8QPMH79Le9sH3rs5RSwJu99W0WPZO43Q==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@75lb/nature": "latest"
+      },
+      "peerDependenciesMeta": {
+        "@75lb/nature": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/flatbuffers": {
+      "version": "25.9.23",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
+      "integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/geojson-vt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.3.tgz",
+      "integrity": "sha512-jR1MwkLaZGa8Zftct9ZFruyWFrdl9ZyD2OliXNy9Qq5bBPeg5wHVpBQF9p5GjnicSDQqvBVpysxTPKmWdsfWMA=="
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ=="
+    },
+    "node_modules/global-prefix": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+      "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
+      "dependencies": {
+        "ini": "^4.1.3",
+        "kind-of": "^6.0.3",
+        "which": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/h3-js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.5.0.tgz",
+      "integrity": "sha512-uKmdPc+DuarnR+XqZxEuWOMw7KzzKROrx3MLeJpFnMOs78S9M5eZ+X5RieS9UcSFQqbeXzbfWuX/W9Pyajinqw==",
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3",
+        "yarn": ">=1.3.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/image-size": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.7.5.tgz",
+      "integrity": "sha512-Hiyv+mXHfFEP7LzUL/llg9RwFxxY+o9N3JVLIeG5E7iFIFAalxvRU9UZthBdYDEVnzHMgjnKJPPpay5BWf1g9g==",
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-error": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-error/-/is-error-2.2.2.tgz",
+      "integrity": "sha512-IOQqts/aHWbiisY5DuPJQ0gcbvaLFCa7fBa9xoLfxBZvQ+ZI/Zh9xoI7Gk+G64N0FdK4AbibytHht2tWgpJWLg=="
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-unsafe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-unsafe/-/is-unsafe-2.0.0.tgz",
+      "integrity": "sha512-2LdV822R+wmI86unXA93WCFpL6g+av8ynWk0nrHyJqGop5VoocYsSLFgN8jrfalT6iGeLNM4KXuVSsULP53kEA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ]
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/json-bignum": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json-bignum/-/json-bignum-0.0.3.tgz",
+      "integrity": "sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q=="
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/kdbush": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.1.0.tgz",
+      "integrity": "sha512-e9vurzrXJQrFX6ckpHP3bvj5l+9CnYzkxDNnNQ1h2QTqdWsUAJgXiKdGNcOa1EY85dU8KbQ+z/FdQdB7P+9yfQ=="
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ktx-parse": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.7.1.tgz",
+      "integrity": "sha512-FeA3g56ksdFNwjXJJsc1CCc7co+AJYDp6ipIp878zZ2bU8kWROatLYf39TQEd4/XRSUvBXovQ8gaVKWPXsCLEQ=="
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
+    "node_modules/long": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+      "integrity": "sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lz4js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/lz4js/-/lz4js-0.2.0.tgz",
+      "integrity": "sha512-gY2Ia9Lm7Ep8qMiuGRhvUq0Q7qUereeldZPP1PMEJxPtEWHJLqw9pgX68oHajBH0nzJK4MaZEA/YNV3jT8u8Bg==",
+      "optional": true
+    },
+    "node_modules/mapbox-gl": {
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.26.0.tgz",
+      "integrity": "sha512-N+Y8VmvpD6xDeP0hAbegPZeEMY5TtnLcV0gEUBZ/KHq3s/yUKQm0PVG9JEkId0QFMMe5/W+FEjoyV4NI3B/N7A==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/maplibre-gl": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.1.tgz",
+      "integrity": "sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@maplibre/maplibre-gl-style-spec": "^20.3.1",
+        "@types/geojson": "^7946.0.14",
+        "@types/geojson-vt": "3.2.5",
+        "@types/mapbox__point-geometry": "^0.1.4",
+        "@types/mapbox__vector-tile": "^1.3.4",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
+        "earcut": "^3.0.0",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.3",
+        "global-prefix": "^4.0.0",
+        "kdbush": "^4.0.2",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.3.0",
+        "potpack": "^2.0.0",
+        "quickselect": "^3.0.0",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0",
+        "vt-pbf": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=16.14.0",
+        "npm": ">=8.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
+      }
+    },
+    "node_modules/maplibre-gl/node_modules/earcut": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.3.tgz",
+      "integrity": "sha512-vnS4AVwp1KHAF13i1vp1/2D5evWy3k5u/iW/B81QVsUZtV8cv2tU0b2VNFlqvh4kYwrFMDdjPCfAmfyJW9y14Q=="
+    },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true
+    },
+    "node_modules/mjolnir.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-3.0.1.tgz",
+      "integrity": "sha512-/RMi8Jm3NKleOkVI8D2ai+1OVwtfRJsSVBVjbTXNm83nfsN4uORYaN3u1/hsg5CqVI+di8enTkvgDNDOywn6cQ=="
+    },
+    "node_modules/modern-tar": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.6.tgz",
+      "integrity": "sha512-sweCIVXzx1aIGTCdzcMlSZt1h8k5Tmk08VNAuRk3IU28XamGiOH5ypi11g6De2CH7PhYqSSnGy2A/EFhbWnVKg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "node_modules/path-expression-matcher": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.6.2.tgz",
+      "integrity": "sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz",
+      "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/potpack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz",
+      "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ=="
+    },
+    "node_modules/preact": {
+      "version": "10.29.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
+      "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
+      "integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ=="
+    },
+    "node_modules/puppeteer-core": {
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.3.0.tgz",
+      "integrity": "sha512-fm+wpUr2oigH1PXZvwgATrM2tYWHMDG8ASzTEe9uukCye4X5Ldx1K5BTHPFKITrIWvQQAQ256d1NpbEveBcKjA==",
+      "dev": true,
+      "dependencies": {
+        "@puppeteer/browsers": "3.0.6",
+        "chromium-bidi": "16.0.1",
+        "devtools-protocol": "0.0.1638949",
+        "typed-query-selector": "^2.12.2",
+        "webdriver-bidi-protocol": "0.4.2",
+        "ws": "^8.21.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-map-gl": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.9.tgz",
+      "integrity": "sha512-KsCc8Gyn05wVGlHZoopaiiCr0RCAQ6LDISo5sEy1/pV/d7RlozkF946tiX7IgyijJQMRujHol5QdwUPESjh73w==",
+      "dependencies": {
+        "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+        "@types/mapbox-gl": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "mapbox-gl": ">=1.13.0",
+        "maplibre-gl": ">=1.13.0 <5.0.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "mapbox-gl": {
+          "optional": true
+        },
+        "maplibre-gl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-map-gl/node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "19.3.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.3.tgz",
+      "integrity": "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^3.0.0",
+        "minimist": "^1.2.8",
+        "rw": "^1.3.3",
+        "sort-object": "^3.0.3"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
+    "node_modules/react-map-gl/node_modules/@types/mapbox-gl": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.0.tgz",
+      "integrity": "sha512-tbn++Mm94H1kE7W6FF0oVC9rMXHVzDDNUbS7KfBMRF8NV/8csFi+67ytKcZJ4LsrpsJ+8MC6Os6ZinEDCsrunw==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/react-map-gl/node_modules/json-stringify-pretty-compact": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+      "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",
+      "integrity": "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==",
+      "dev": true,
+      "dependencies": {
+        "@oxc-project/types": "=0.139.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.1.5",
+        "@rolldown/binding-darwin-arm64": "1.1.5",
+        "@rolldown/binding-darwin-x64": "1.1.5",
+        "@rolldown/binding-freebsd-x64": "1.1.5",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.5",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.5",
+        "@rolldown/binding-linux-arm64-musl": "1.1.5",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.5",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-musl": "1.1.5",
+        "@rolldown/binding-openharmony-arm64": "1.1.5",
+        "@rolldown/binding-wasm32-wasi": "1.1.5",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.5",
+        "@rolldown/binding-win32-x64-msvc": "1.1.5"
+      }
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
+    "node_modules/snappyjs": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/snappyjs/-/snappyjs-0.6.1.tgz",
+      "integrity": "sha512-YIK6I2lsH072UE0aOFxxY1dPDCS43I5ktqHpeAsuLNYWkE5pGxRGWfDM4/vSUfNzXjC1Ivzt3qx31PCLmc9yqg=="
+    },
+    "node_modules/sort-asc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
+      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
+      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
+      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
+      "dependencies": {
+        "bytewise": "^1.1.0",
+        "get-value": "^2.0.2",
+        "is-extendable": "^0.1.1",
+        "sort-asc": "^0.2.0",
+        "sort-desc": "^0.2.0",
+        "union-value": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strnum": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.4.1.tgz",
+      "integrity": "sha512-M9eUSMT2dCB2cTNPG7UYj6KuK7RJR2SN2+yCV/fTW3xzTCS6EaGZ5pSMgDIjB7r8zSfTGk+dvvn9rTjpVS9Mwg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "dependencies": {
+        "anynum": "^1.0.1"
+      }
+    },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table-layout": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-4.1.1.tgz",
+      "integrity": "sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "wordwrapjs": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/texture-compressor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/texture-compressor/-/texture-compressor-1.0.2.tgz",
+      "integrity": "sha512-dStVgoaQ11mA5htJ+RzZ51ZxIZqNOgWKAIvtjLrW1AliQQLCmrDqNzQZ8Jh91YealQ95DXt4MEduLzJmbs6lig==",
+      "dependencies": {
+        "argparse": "^1.0.10",
+        "image-size": "^0.7.4"
+      },
+      "bin": {
+        "texture-compressor": "bin/texture-compressor.js"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
+      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typewise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
+      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
+      "dependencies": {
+        "typewise-core": "^1.2.0"
+      }
+    },
+    "node_modules/typewise-core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
+      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg=="
+    },
+    "node_modules/typical": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-7.3.0.tgz",
+      "integrity": "sha512-ya4mg/30vm+DOWfBg4YK3j2WD6TWtRkCbasOJr40CseYENzCUby/7rIvXA99JGsQHeNxLbnXdyLLxKSv3tauFw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="
+    },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/vite": {
+      "version": "8.1.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.5.tgz",
+      "integrity": "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==",
+      "dev": true,
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.17",
+        "rolldown": "~1.1.5",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.3.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.2.tgz",
+      "integrity": "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA==",
+      "dev": true
+    },
+    "node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/wordwrapjs": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.1.tgz",
+      "integrity": "sha512-0yweIbkINJodk27gX9LBGMzyQdBDan3s/dEAiwBOj+Mf0PPyWL6/rikalkv8EeD0E8jm4o5RXEOrFTP3NXbhJg==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.1.tgz",
+      "integrity": "sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-naming": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/xml-naming/-/xml-naming-0.3.0.tgz",
+      "integrity": "sha512-ghig2TBE/H11aOVgmahA3MhimvkBr6JIYknH/Dhdk10nXwdbIqBJsbfMxpvFPG8bAw77gN29aQWvKpmVoPlvPQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zstd-codec": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/zstd-codec/-/zstd-codec-0.1.5.tgz",
+      "integrity": "sha512-v3fyjpK8S/dpY/X5WxqTK3IoCnp/ZOLxn144GZVlNUjtwAchzrVo03h+oMATFhCIiJ5KTr4V3vDQQYz4RU684g==",
+      "optional": true
+    }
+  }
+}
diff --git a/WebUI/frontend/package.json b/WebUI/frontend/package.json
new file mode 100644
index 000000000..60b310c57
--- /dev/null
+++ b/WebUI/frontend/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "secondo-webui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "e2e": "node e2e/run.mjs"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^9.3.6",
+    "@deck.gl/geo-layers": "^9.3.6",
+    "@deck.gl/layers": "^9.3.6",
+    "@deck.gl/react": "^9.3.6",
+    "maplibre-gl": "^4.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^7.1.9"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "puppeteer-core": "^25.3.0",
+    "typescript": "^5.5.3",
+    "vite": "^8.1.5"
+  },
+  "overrides": {
+    "@types/mapbox-gl": "3.4.0"
+  }
+}
diff --git a/WebUI/frontend/src/App.tsx b/WebUI/frontend/src/App.tsx
new file mode 100644
index 000000000..02f285e6e
--- /dev/null
+++ b/WebUI/frontend/src/App.tsx
@@ -0,0 +1,354 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { runQuery } from "./api/client";
+import { Console, type Entry } from "./console/Console";
+import { Catalog } from "./catalog/Catalog";
+import { MapView } from "./map/MapView";
+import { Timeline } from "./timeline/Timeline";
+import { useAnimator } from "./timeline/useAnimator";
+import { useLayers } from "./layers/useLayers";
+import { LayersPanel } from "./layers/LayersPanel";
+import { PlotPanel, type PlotEntry } from "./plots/PlotPanel";
+import { PROJECTION_LABEL, type Projection } from "./map/projection";
+
+const DB_CMD = /^\s*(open|close|create|delete|restore)\s+database/i;
+
+type Layout = "side" | "bottom";
+
+// Persisted panel geometry.
+interface Geometry {
+  layout: Layout;
+  catalogW: number;
+  consoleW: number;
+  consoleH: number;
+  catalogCollapsed: boolean;
+  consoleCollapsed: boolean;
+}
+const GEO_KEY = "secondo.webui.geometry";
+// The map is the product, so it gets the space by default: the console is
+// docked to the bottom (map keeps full width) and kept short, since the query
+// history is rarely needed at length. Both side panels collapse away.
+const DEFAULT_GEO: Geometry = {
+  layout: "bottom",
+  catalogW: 210,
+  consoleW: 430,
+  consoleH: 220,
+  catalogCollapsed: false,
+  consoleCollapsed: false,
+};
+const RAIL = 34; // collapsed catalog width
+
+function loadGeometry(): Geometry {
+  try {
+    const raw = localStorage.getItem(GEO_KEY);
+    return raw ? { ...DEFAULT_GEO, ...JSON.parse(raw) } : DEFAULT_GEO;
+  } catch {
+    return DEFAULT_GEO;
+  }
+}
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+// Drag a splitter: capture the size at mousedown and apply deltas until mouseup.
+function startDrag(
+  e: React.MouseEvent,
+  start: number,
+  apply: (start: number, dx: number, dy: number) => void
+) {
+  e.preventDefault();
+  const sx = e.clientX;
+  const sy = e.clientY;
+  const move = (ev: MouseEvent) => apply(start, ev.clientX - sx, ev.clientY - sy);
+  const up = () => {
+    window.removeEventListener("mousemove", move);
+    window.removeEventListener("mouseup", up);
+    document.body.classList.remove("dragging");
+  };
+  window.addEventListener("mousemove", move);
+  window.addEventListener("mouseup", up);
+  document.body.classList.add("dragging");
+}
+
+export function App() {
+  const {
+    layers,
+    add,
+    remove,
+    toggle,
+    move,
+    setStyle,
+    clear,
+    selected,
+    setSelected,
+  } = useLayers();
+
+  const [history, setHistory] = useState<Entry[]>([]);
+  const [busy, setBusy] = useState(false);
+  // Authoritative database state comes from the catalog (see Catalog.onState).
+  const [openDb, setOpenDb] = useState<string | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [projection, setProjection] = useState<Projection>("none");
+  const [geo, setGeo] = useState<Geometry>(loadGeometry);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(GEO_KEY, JSON.stringify(geo));
+    } catch {
+      /* storage unavailable */
+    }
+  }, [geo]);
+
+  // Release the SECONDO connection when the tab goes away. Each session holds a
+  // server-side process, so waiting for the idle timeout would pile them up.
+  // `pagehide` fires for closes, navigations and reloads (unlike `unload` it is
+  // bfcache-safe), and sendBeacon still delivers during teardown.
+  useEffect(() => {
+    const release = () => navigator.sendBeacon?.("/api/close");
+    window.addEventListener("pagehide", release);
+    return () => window.removeEventListener("pagehide", release);
+  }, []);
+
+  // Single command runner shared by the console and the catalog. Returns
+  // whether the command succeeded so callers can refresh.
+  const run = useCallback(
+    async (command: string): Promise<boolean> => {
+      setBusy(true);
+      try {
+        const res = await runQuery(command);
+        const fc = res.geojson ?? null;
+        const temp = res.temporal ?? null;
+        setHistory((h) => [
+          ...h,
+          { command, result: res.text, hasGeometry: !!fc, hasMotion: !!temp },
+        ]);
+        if (fc || temp) add(command, fc, temp);
+        // The catalog refreshes on this and reports the new database state back.
+        if (DB_CMD.test(command)) setRefreshKey((k) => k + 1);
+        return true;
+      } catch (e) {
+        setHistory((h) => [
+          ...h,
+          { command, error: e instanceof Error ? e.message : String(e) },
+        ]);
+        return false;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [add]
+  );
+
+  const visible = useMemo(() => layers.filter((l) => l.visible), [layers]);
+
+  const domain = useMemo(() => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const l of visible) {
+      if (l.temporal) {
+        min = Math.min(min, l.temporal.timeDomain[0]);
+        max = Math.max(max, l.temporal.timeDomain[1]);
+      }
+    }
+    return min < max ? ([min, max] as [number, number]) : null;
+  }, [visible]);
+
+  const duration = domain ? domain[1] - domain[0] : 0;
+  const { time, setTime, playing, setPlaying, speed, setSpeed } =
+    useAnimator(duration);
+
+  // Scalar moving values (mreal/mint) from every visible layer, each carrying
+  // its layer's colour so identity matches the map.
+  const plotEntries = useMemo<PlotEntry[]>(
+    () =>
+      visible.flatMap((l) =>
+        (l.temporal?.plots ?? []).map((plot) => ({
+          plot,
+          color: l.style.color,
+          layerName: l.name,
+        }))
+      ),
+    [visible]
+  );
+  const [plotsCollapsed, setPlotsCollapsed] = useState(false);
+
+  return (
+    <div
+      className={
+        `app ${geo.layout}` +
+        (geo.catalogCollapsed ? " cat-collapsed" : "") +
+        (geo.consoleCollapsed ? " con-collapsed" : "")
+      }
+      style={
+        {
+          "--cat": geo.catalogCollapsed ? `${RAIL}px` : `${geo.catalogW}px`,
+          "--con": `${geo.consoleW}px`,
+          "--conh": `${geo.consoleH}px`,
+        } as React.CSSProperties
+      }
+    >
+      <div className="pane catalog-pane">
+        {geo.catalogCollapsed ? (
+          <button
+            className="rail-btn"
+            title="Show catalog"
+            onClick={() => setGeo((g) => ({ ...g, catalogCollapsed: false }))}
+          >
+            ▸
+          </button>
+        ) : (
+          <Catalog
+            onRun={run}
+            refreshKey={refreshKey}
+            onState={({ open }) => setOpenDb(open)}
+            onCollapse={() => setGeo((g) => ({ ...g, catalogCollapsed: true }))}
+          />
+        )}
+      </div>
+
+      {/* Catalog | rest splitter (no resizing while collapsed) */}
+      <div
+        className="split split-a"
+        onMouseDown={(e) =>
+          geo.catalogCollapsed
+            ? undefined
+            : startDrag(e, geo.catalogW, (start, dx) =>
+                setGeo((g) => ({ ...g, catalogW: clamp(start + dx, 140, 460) }))
+              )
+        }
+      />
+
+      <div className="pane console-pane">
+        <Console
+          history={history}
+          busy={busy}
+          openDb={openDb}
+          layout={geo.layout}
+          collapsed={geo.consoleCollapsed}
+          onToggleCollapse={() =>
+            setGeo((g) => ({ ...g, consoleCollapsed: !g.consoleCollapsed }))
+          }
+          onToggleLayout={() =>
+            setGeo((g) => ({ ...g, layout: g.layout === "side" ? "bottom" : "side" }))
+          }
+          onSubmit={run}
+        />
+      </div>
+
+      {/* Console | map splitter: horizontal drag when side-docked, vertical when
+          bottom-docked. Collapsed console is input-height only, so no resize. */}
+      <div
+        className="split split-b"
+        onMouseDown={(e) =>
+          geo.consoleCollapsed
+            ? undefined
+            : geo.layout === "side"
+              ? startDrag(e, geo.consoleW, (start, dx) =>
+                  setGeo((g) => ({ ...g, consoleW: clamp(start + dx, 240, 900) }))
+                )
+              : startDrag(e, geo.consoleH, (start, _dx, dy) =>
+                  setGeo((g) => ({ ...g, consoleH: clamp(start - dy, 120, 640) }))
+                )
+        }
+      />
+
+      <div className="pane map-pane">
+        {busy && (
+          <div className="loading" role="status">
+            <span className="spinner" />
+            running query…
+          </div>
+        )}
+        <div className="projection-ctl">
+          <select
+            value={projection}
+            onChange={(e) => setProjection(e.target.value as Projection)}
+            title="Coordinate projection for the map"
+          >
+            {(Object.keys(PROJECTION_LABEL) as Projection[]).map((p) => (
+              <option key={p} value={p}>
+                {PROJECTION_LABEL[p]}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <MapView
+          layers={visible}
+          globalT0={domain ? domain[0] : 0}
+          currentTime={time}
+          projection={projection}
+          onSelect={(layerId, object) => {
+            const props =
+              object &&
+              (object as { properties?: Record<string, unknown> }).properties;
+            if (layerId && props) {
+              const layer = layers.find((l) => l.id === layerId);
+              setSelected({
+                layerId,
+                layerName: layer?.name ?? layerId,
+                properties: props as Record<string, unknown>,
+              });
+            } else {
+              setSelected(null);
+            }
+          }}
+        />
+
+        <LayersPanel
+          layers={layers}
+          onToggle={toggle}
+          onRemove={remove}
+          onMove={move}
+          onStyle={setStyle}
+          onClear={clear}
+        />
+
+        {selected && (
+          <div className="details">
+            <div className="details-head">
+              <span>{selected.layerName}</span>
+              <button onClick={() => setSelected(null)} title="Close">
+                ✕
+              </button>
+            </div>
+            <table>
+              <tbody>
+                {Object.entries(selected.properties)
+                  .filter(([k]) => !k.startsWith("_"))
+                  .map(([k, v]) => (
+                    <tr key={k}>
+                      <td className="dk">{k}</td>
+                      <td className="dv">{String(v)}</td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {domain && (
+          <PlotPanel
+            entries={plotEntries}
+            t0={domain[0]}
+            time={time}
+            duration={duration}
+            collapsed={plotsCollapsed}
+            onToggle={() => setPlotsCollapsed((c) => !c)}
+          />
+        )}
+
+        {domain && (
+          <Timeline
+            time={time}
+            duration={duration}
+            t0={domain[0]}
+            playing={playing}
+            speed={speed}
+            onPlay={setPlaying}
+            onSeek={setTime}
+            onSpeed={setSpeed}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/api/client.ts b/WebUI/frontend/src/api/client.ts
new file mode 100644
index 000000000..7f186bd0c
--- /dev/null
+++ b/WebUI/frontend/src/api/client.ts
@@ -0,0 +1,126 @@
+// Thin client for the FastAPI bridge. Cookies (the session id) are sent
+// automatically because requests are same-origin via the Vite proxy.
+
+export interface Trip {
+  path: [number, number][];
+  timestamps: number[];
+  properties: Record<string, unknown>;
+}
+
+/** A vertex of a moving region: [xStart, yStart, xEnd, yEnd] across the unit. */
+export type MovingVertex = [number, number, number, number];
+
+export interface MovingRegionUnit {
+  interval: [number, number];
+  /** face -> cycle (first outer, rest holes) -> moving vertices */
+  faces: MovingVertex[][][];
+}
+
+export interface MovingRegion {
+  units: MovingRegionUnit[];
+  properties: Record<string, unknown>;
+}
+
+/** A scalar moving value (mreal/mint/mbool) sampled over time. */
+export interface Plot {
+  label: string;
+  kind: "line" | "step";
+  type: string;
+  /** [posixSeconds, value] pairs */
+  series: [number, number][];
+  valueRange: [number, number];
+  timeDomain: [number, number];
+}
+
+export interface TemporalPayload {
+  trips: Trip[];
+  regions: MovingRegion[];
+  plots: Plot[];
+  timeDomain: [number, number];
+  bbox: [number, number, number, number] | null;
+}
+
+export interface FeatureCollection {
+  type: "FeatureCollection";
+  features: unknown[];
+  bbox?: [number, number, number, number];
+}
+
+export interface QueryResponse {
+  text: string;
+  geojson: FeatureCollection | null;
+  temporal: TemporalPayload | null;
+}
+
+// Parse a response body defensively: a failing backend may return a non-JSON
+// body (e.g. a plain-text 500), which must surface as a readable error rather
+// than a cryptic "JSON.parse: unexpected character" from res.json().
+async function parseResponse<T>(res: Response): Promise<T> {
+  const text = await res.text();
+  let data: unknown;
+  try {
+    data = text ? JSON.parse(text) : {};
+  } catch {
+    data = { detail: text.slice(0, 500) || `Request failed (${res.status})` };
+  }
+  if (!res.ok) {
+    const detail = (data as { detail?: string })?.detail;
+    throw new Error(detail ?? `Request failed (${res.status})`);
+  }
+  return data as T;
+}
+
+// Serialize all API calls into a single in-order queue. The session cookie is
+// minted by the backend on the first request; running requests concurrently
+// before that cookie is set would create multiple sessions (and e.g. leave the
+// object list querying a session where no database is open). One-at-a-time also
+// matches SECONDO, which handles one command per connection anyway.
+let chain: Promise<unknown> = Promise.resolve();
+function enqueue<T>(task: () => Promise<T>): Promise<T> {
+  const result = chain.then(task, task);
+  chain = result.then(
+    () => undefined,
+    () => undefined
+  );
+  return result;
+}
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  return enqueue(async () => {
+    const res = await fetch(path, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify(body),
+    });
+    return parseResponse<T>(res);
+  });
+}
+
+async function get<T>(path: string): Promise<T> {
+  return enqueue(async () => {
+    const res = await fetch(path, { credentials: "same-origin" });
+    return parseResponse<T>(res);
+  });
+}
+
+export function runQuery(command: string): Promise<QueryResponse> {
+  return post<QueryResponse>("/api/query", { command });
+}
+
+export async function listDatabases(): Promise<{ databases: string[]; open: string | null }> {
+  return get("/api/databases");
+}
+
+export interface CatalogObject {
+  name: string;
+  type: string;
+  kind: "spatial" | "temporal" | "other";
+}
+
+export async function listObjects(): Promise<{
+  objects: CatalogObject[];
+  open: string | null;
+}> {
+  return get("/api/objects");
+}
diff --git a/WebUI/frontend/src/catalog/Catalog.tsx b/WebUI/frontend/src/catalog/Catalog.tsx
new file mode 100644
index 000000000..38a9aaad5
--- /dev/null
+++ b/WebUI/frontend/src/catalog/Catalog.tsx
@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  listDatabases,
+  listObjects,
+  type CatalogObject,
+} from "../api/client";
+
+// A left-hand browser: pick a database to open, then click an object to query
+// it. Mirrors the HoeseViewer's object list; the console still works alongside.
+interface Props {
+  // Run a SECONDO command through the same session as the console, and report
+  // whether it succeeded so the catalog can refresh.
+  onRun: (command: string) => Promise<boolean>;
+  // Bumped by the parent whenever a command that changes catalog state runs
+  // (open/close/create/delete database, or object creation) so we refresh.
+  refreshKey: number;
+  // The catalog owns the authoritative database state (it is what queries the
+  // backend); it reports it up so the rest of the UI doesn't fetch it twice.
+  onState?: (state: { open: string | null; databases: string[] }) => void;
+  // Collapse the whole catalog to a rail, giving the space to the map.
+  onCollapse?: () => void;
+}
+
+const KIND_ICON: Record<CatalogObject["kind"], string> = {
+  spatial: "◆",
+  temporal: "◷",
+  other: "·",
+};
+
+export function Catalog({ onRun, refreshKey, onState, onCollapse }: Props) {
+  const [databases, setDatabases] = useState<string[]>([]);
+  const [open, setOpen] = useState<string | null>(null);
+  const [objects, setObjects] = useState<CatalogObject[]>([]);
+  const [filter, setFilter] = useState("");
+  const [loadingObjects, setLoadingObjects] = useState(false);
+  const [pendingDb, setPendingDb] = useState<string | null>(null);
+  // Monotonic id so a slower, stale refresh can't overwrite a newer one.
+  const seqRef = useRef(0);
+  // Held in a ref so `refresh` stays stable regardless of the callback identity.
+  const onStateRef = useRef(onState);
+  onStateRef.current = onState;
+
+  const refresh = useCallback(async () => {
+    const seq = ++seqRef.current;
+    try {
+      const dbs = await listDatabases();
+      if (seq !== seqRef.current) return;
+      setDatabases(dbs.databases);
+      setOpen(dbs.open);
+      onStateRef.current?.({ open: dbs.open, databases: dbs.databases });
+      if (dbs.open) {
+        setLoadingObjects(true);
+        const objs = await listObjects();
+        if (seq !== seqRef.current) return;
+        setObjects(objs.objects);
+      } else {
+        setObjects([]);
+      }
+    } catch {
+      /* backend not reachable yet */
+    } finally {
+      if (seq === seqRef.current) setLoadingObjects(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh, refreshKey]);
+
+  async function openDb(name: string) {
+    if (pendingDb) return; // ignore rapid repeat clicks while one is in flight
+    setPendingDb(name);
+    const lname = name.toLowerCase();
+    try {
+      if (open && open !== lname) await onRun("close database");
+      if (open !== lname) await onRun(`open database ${name}`);
+      await refresh();
+    } finally {
+      setPendingDb(null);
+    }
+  }
+
+  const shown = objects.filter((o) =>
+    o.name.toLowerCase().includes(filter.toLowerCase())
+  );
+  const busy = loadingObjects || pendingDb !== null;
+  const shownDb = open ?? pendingDb;
+
+  return (
+    <div className="catalog">
+      <div className="cat-section">
+        databases
+        {onCollapse && (
+          <button className="cat-collapse" onClick={onCollapse} title="Hide catalog">
+            ◂
+          </button>
+        )}
+      </div>
+      <div className="cat-dbs">
+        {databases.map((db) => (
+          <button
+            key={db}
+            className={
+              "cat-db" +
+              (open === db.toLowerCase() ? " active" : "") +
+              (pendingDb === db ? " pending" : "")
+            }
+            disabled={pendingDb !== null}
+            onClick={() => void openDb(db)}
+            title={`open database ${db}`}
+          >
+            {db}
+            {pendingDb === db && <span className="cat-spin" />}
+          </button>
+        ))}
+      </div>
+
+      {shownDb && (
+        <>
+          <div className="cat-section">
+            objects in {shownDb}
+            {busy ? (
+              <span className="cat-spin" />
+            ) : (
+              <span className="cat-count">{objects.length}</span>
+            )}
+          </div>
+          {open && (
+            <input
+              className="cat-filter"
+              placeholder="filter objects…"
+              value={filter}
+              spellCheck={false}
+              onChange={(e) => setFilter(e.target.value)}
+            />
+          )}
+          <ul className="cat-objs">
+            {busy && objects.length === 0 && (
+              <li className="cat-loading">
+                <span className="cat-spin" /> loading objects…
+              </li>
+            )}
+            {shown.map((o) => (
+              <li key={o.name}>
+                <button
+                  className={"cat-obj kind-" + o.kind}
+                  onClick={() => void onRun(`query ${o.name}`)}
+                  title={`query ${o.name}   (${o.type})`}
+                >
+                  <span className="cat-ic">{KIND_ICON[o.kind]}</span>
+                  <span className="cat-oname">{o.name}</span>
+                  <span className="cat-otype">{o.type}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/console/Console.tsx b/WebUI/frontend/src/console/Console.tsx
new file mode 100644
index 000000000..345d15b1e
--- /dev/null
+++ b/WebUI/frontend/src/console/Console.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface Entry {
+  command: string;
+  result?: string;
+  error?: string;
+  hasGeometry?: boolean;
+  hasMotion?: boolean;
+}
+
+interface Props {
+  history: Entry[];
+  busy: boolean;
+  openDb: string | null;
+  layout: "side" | "bottom";
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  onToggleLayout: () => void;
+  onSubmit: (command: string) => Promise<boolean | void>;
+}
+
+export function Console({
+  history,
+  busy,
+  openDb,
+  layout,
+  collapsed,
+  onToggleCollapse,
+  onToggleLayout,
+  onSubmit,
+}: Props) {
+  const [command, setCommand] = useState("");
+  const [commands, setCommands] = useState<string[]>([]);
+  const [histIndex, setHistIndex] = useState(-1);
+  const bottom = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    bottom.current?.scrollIntoView({ behavior: "smooth" });
+  }, [history]);
+
+  function recall(text: string) {
+    setCommand(text);
+    requestAnimationFrame(() => {
+      const el = inputRef.current;
+      if (el) el.setSelectionRange(el.value.length, el.value.length);
+    });
+  }
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowUp") {
+      if (commands.length === 0) return;
+      e.preventDefault();
+      const next =
+        histIndex === -1 ? commands.length - 1 : Math.max(0, histIndex - 1);
+      setHistIndex(next);
+      recall(commands[next]);
+    } else if (e.key === "ArrowDown") {
+      if (histIndex === -1) return;
+      e.preventDefault();
+      const next = histIndex + 1;
+      if (next >= commands.length) {
+        setHistIndex(-1);
+        recall("");
+      } else {
+        setHistIndex(next);
+        recall(commands[next]);
+      }
+    }
+  }
+
+  async function submit(cmd: string) {
+    const trimmed = cmd.trim();
+    if (!trimmed || busy) return;
+    setCommand("");
+    setHistIndex(-1);
+    setCommands((c) => (c[c.length - 1] === trimmed ? c : [...c, trimmed]));
+    await onSubmit(trimmed);
+    inputRef.current?.focus();
+  }
+
+  return (
+    <div className={"console" + (collapsed ? " collapsed" : "")}>
+      <header>
+        <strong>SECONDO</strong>
+        {/* The database list lives in the catalog panel; don't duplicate it. */}
+        <span className="db">{openDb ? `db: ${openDb}` : "no database open"}</span>
+        <button
+          className="dock-btn"
+          onClick={onToggleCollapse}
+          title={collapsed ? "Show query history" : "Hide query history"}
+        >
+          {collapsed ? "▴ history" : "▾ history"}
+        </button>
+        <button
+          className="dock-btn"
+          onClick={onToggleLayout}
+          title={
+            layout === "side" ? "Dock console to the bottom" : "Dock console to the left"
+          }
+        >
+          {layout === "side" ? "⇩ bottom" : "⇦ left"}
+        </button>
+      </header>
+
+      <div className="log">
+        {history.map((e, i) => (
+          <div key={i} className="entry">
+            <div className="cmd">
+              <span className="prompt">&gt;</span> {e.command}
+            </div>
+            {e.hasGeometry && <div className="geohint">▸ rendered on map</div>}
+            {e.hasMotion && <div className="geohint">▸ animated on timeline</div>}
+            {e.result !== undefined && (
+              <pre className="ok">
+                {e.result.length > 4000
+                  ? e.result.slice(0, 4000) + "\n… (truncated)"
+                  : e.result}
+              </pre>
+            )}
+            {e.error !== undefined && <pre className="err">{e.error}</pre>}
+          </div>
+        ))}
+        <div ref={bottom} />
+      </div>
+
+      <form
+        className="input"
+        onSubmit={(ev) => {
+          ev.preventDefault();
+          void submit(command);
+        }}
+      >
+        <span className="prompt">&gt;</span>
+        <input
+          ref={inputRef}
+          autoFocus
+          spellCheck={false}
+          placeholder="e.g. open database berlintest   |   query mehringdamm   (↑/↓ history)"
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          onKeyDown={onKeyDown}
+        />
+        <button type="submit" disabled={busy}>
+          {busy ? "…" : "Run"}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/layers/LayersPanel.tsx b/WebUI/frontend/src/layers/LayersPanel.tsx
new file mode 100644
index 000000000..56d53a89e
--- /dev/null
+++ b/WebUI/frontend/src/layers/LayersPanel.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import type { Layer, LayerStyle, RGB, TemporalMode } from "./useLayers";
+import { downloadGeoJSON } from "./exportGeoJSON";
+
+const toHex = ([r, g, b]: RGB): string =>
+  "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+
+const fromHex = (h: string): RGB => [
+  parseInt(h.slice(1, 3), 16),
+  parseInt(h.slice(3, 5), 16),
+  parseInt(h.slice(5, 7), 16),
+];
+
+interface Props {
+  layers: Layer[];
+  onToggle: (id: string) => void;
+  onRemove: (id: string) => void;
+  onMove: (id: string, dir: "up" | "down") => void;
+  onStyle: (id: string, patch: Partial<LayerStyle>) => void;
+  onClear: () => void;
+}
+
+export function LayersPanel({
+  layers,
+  onToggle,
+  onRemove,
+  onMove,
+  onStyle,
+  onClear,
+}: Props) {
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (layers.length === 0) return null;
+
+  // Show topmost draw layer first.
+  const ordered = [...layers].reverse();
+
+  return (
+    <div className="layers-panel">
+      <div className="lp-head">
+        <button
+          className="lp-collapse"
+          onClick={() => setCollapsed((c) => !c)}
+          title={collapsed ? "Show layers" : "Hide layers"}
+          aria-expanded={!collapsed}
+        >
+          <span className="lp-chevron">{collapsed ? "▸" : "▾"}</span>
+          Layers
+          <span className="lp-count">{layers.length}</span>
+        </button>
+        <span className={"lp-actions" + (collapsed ? " lp-hidden" : "")}>
+          <button
+            className="lp-clear"
+            onClick={() => downloadGeoJSON(layers)}
+            title="Export visible layers as GeoJSON"
+          >
+            export
+          </button>
+          <button className="lp-clear" onClick={onClear} title="Remove all layers">
+            clear
+          </button>
+        </span>
+      </div>
+      {!collapsed && (
+      <ul className="lp-list">
+        {ordered.map((layer, idx) => {
+          const isTop = idx === 0;
+          const isBottom = idx === ordered.length - 1;
+          const open = expanded === layer.id;
+          return (
+            <li key={layer.id} className="lp-item">
+              <div className="lp-row">
+                <input
+                  type="checkbox"
+                  checked={layer.visible}
+                  onChange={() => onToggle(layer.id)}
+                  title="Toggle visibility"
+                />
+                <span
+                  className="lp-swatch"
+                  style={{ background: toHex(layer.style.color) }}
+                />
+                <button
+                  className="lp-name"
+                  title={layer.command}
+                  onClick={() => setExpanded(open ? null : layer.id)}
+                >
+                  {layer.name}
+                  {layer.temporal ? " ◷" : ""}
+                </button>
+                <button
+                  className="lp-mini"
+                  disabled={isTop}
+                  onClick={() => onMove(layer.id, "up")}
+                  title="Bring forward"
+                >
+                  ↑
+                </button>
+                <button
+                  className="lp-mini"
+                  disabled={isBottom}
+                  onClick={() => onMove(layer.id, "down")}
+                  title="Send backward"
+                >
+                  ↓
+                </button>
+                <button
+                  className="lp-mini lp-x"
+                  onClick={() => onRemove(layer.id)}
+                  title="Remove layer"
+                >
+                  ✕
+                </button>
+              </div>
+
+              {open && (
+                <div className="lp-style">
+                  <label>
+                    color
+                    <input
+                      type="color"
+                      value={toHex(layer.style.color)}
+                      onChange={(e) =>
+                        onStyle(layer.id, { color: fromHex(e.target.value) })
+                      }
+                    />
+                  </label>
+                  <label>
+                    opacity
+                    <input
+                      type="range"
+                      min={0.1}
+                      max={1}
+                      step={0.05}
+                      value={layer.style.opacity}
+                      onChange={(e) =>
+                        onStyle(layer.id, { opacity: Number(e.target.value) })
+                      }
+                    />
+                  </label>
+                  <label>
+                    point
+                    <input
+                      type="range"
+                      min={1}
+                      max={14}
+                      step={1}
+                      value={layer.style.pointRadius}
+                      onChange={(e) =>
+                        onStyle(layer.id, { pointRadius: Number(e.target.value) })
+                      }
+                    />
+                  </label>
+                  <label>
+                    line
+                    <input
+                      type="range"
+                      min={0.5}
+                      max={8}
+                      step={0.5}
+                      value={layer.style.lineWidth}
+                      onChange={(e) =>
+                        onStyle(layer.id, { lineWidth: Number(e.target.value) })
+                      }
+                    />
+                  </label>
+                  <label className="lp-check">
+                    <input
+                      type="checkbox"
+                      checked={layer.style.filled}
+                      onChange={(e) =>
+                        onStyle(layer.id, { filled: e.target.checked })
+                      }
+                    />
+                    fill regions
+                  </label>
+                  {/* Trail/positions only apply to moving points. */}
+                  {layer.temporal && layer.temporal.trips.length > 0 && (
+                    <label className="lp-check">
+                      moving
+                      <select
+                        value={layer.style.temporalMode}
+                        onChange={(e) =>
+                          onStyle(layer.id, {
+                            temporalMode: e.target.value as TemporalMode,
+                          })
+                        }
+                      >
+                        <option value="trail">trail</option>
+                        <option value="points">positions</option>
+                        <option value="both">both</option>
+                      </select>
+                    </label>
+                  )}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      )}
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/layers/exportGeoJSON.ts b/WebUI/frontend/src/layers/exportGeoJSON.ts
new file mode 100644
index 000000000..1f085ae0f
--- /dev/null
+++ b/WebUI/frontend/src/layers/exportGeoJSON.ts
@@ -0,0 +1,54 @@
+import type { Layer } from "./useLayers";
+
+// Build one GeoJSON FeatureCollection from the visible layers. Static layers
+// contribute their features directly; moving-object layers contribute each
+// trip as a LineString carrying its timestamps, so the export is self-contained.
+export function buildExportFC(layers: Layer[]): {
+  type: "FeatureCollection";
+  features: unknown[];
+} {
+  const features: unknown[] = [];
+  for (const l of layers) {
+    if (!l.visible) continue;
+    if (l.geojson) {
+      for (const f of l.geojson.features as Array<{
+        properties?: Record<string, unknown>;
+      }>) {
+        features.push({
+          ...f,
+          properties: { ...(f.properties ?? {}), _layer: l.name },
+        });
+      }
+    }
+    if (l.temporal) {
+      for (const trip of l.temporal.trips) {
+        features.push({
+          type: "Feature",
+          geometry: { type: "LineString", coordinates: trip.path },
+          properties: {
+            ...trip.properties,
+            _layer: l.name,
+            timestamps: trip.timestamps,
+          },
+        });
+      }
+    }
+  }
+  return { type: "FeatureCollection", features };
+}
+
+// Trigger a browser download of the visible layers as a .geojson file.
+export function downloadGeoJSON(layers: Layer[]): void {
+  const fc = buildExportFC(layers);
+  const blob = new Blob([JSON.stringify(fc, null, 2)], {
+    type: "application/geo+json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "secondo-export.geojson";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
diff --git a/WebUI/frontend/src/layers/useLayers.ts b/WebUI/frontend/src/layers/useLayers.ts
new file mode 100644
index 000000000..1cd23898e
--- /dev/null
+++ b/WebUI/frontend/src/layers/useLayers.ts
@@ -0,0 +1,141 @@
+import { useCallback, useRef, useState } from "react";
+import type { FeatureCollection, TemporalPayload } from "../api/client";
+
+export type RGB = [number, number, number];
+
+export type TemporalMode = "trail" | "points" | "both";
+
+export interface LayerStyle {
+  color: RGB;
+  opacity: number; // 0..1
+  pointRadius: number; // px (also the moving-object position-dot radius)
+  lineWidth: number; // px (also the moving-object trail width)
+  filled: boolean;
+  temporalMode: TemporalMode; // how moving objects render
+}
+
+export interface Layer {
+  id: string;
+  name: string;
+  command: string;
+  geojson: FeatureCollection | null;
+  temporal: TemporalPayload | null;
+  visible: boolean;
+  style: LayerStyle;
+}
+
+export interface Selection {
+  layerId: string;
+  layerName: string;
+  properties: Record<string, unknown>;
+}
+
+// Categorical palette, assigned in fixed order (never cycled by rank) so a
+// layer keeps its colour as others come and go. These are the dark-surface
+// steps of a validated categorical theme -- they pass the lightness-band,
+// chroma-floor, CVD-separation and contrast checks against a dark chart
+// surface, and being mid-dark they also read against the light OSM basemap.
+// The one adjacent pair below CVD 12 (green/yellow) is always accompanied by
+// secondary encoding: a swatch, the layer name and direct labels.
+const PALETTE: RGB[] = [
+  [57, 135, 229], // blue    #3987e5
+  [25, 158, 112], // aqua    #199e70
+  [201, 133, 0], //  yellow  #c98500
+  [0, 131, 0], //    green   #008300
+  [144, 133, 233], // violet #9085e9
+  [230, 103, 103], // red    #e66767
+  [213, 81, 129], //  magenta #d55181
+  [217, 89, 38], //   orange #d95926
+];
+
+function deriveName(command: string): string {
+  const s = command.replace(/^\s*query\s+/i, "").trim();
+  return s.length > 30 ? s.slice(0, 30) + "…" : s;
+}
+
+export function useLayers() {
+  const [layers, setLayers] = useState<Layer[]>([]);
+  const [selected, setSelected] = useState<Selection | null>(null);
+  const idRef = useRef(0);
+
+  const add = useCallback(
+    (
+      command: string,
+      geojson: FeatureCollection | null,
+      temporal: TemporalPayload | null
+    ) => {
+      idRef.current += 1;
+      const id = `layer${idRef.current}`;
+      setLayers((prev) => {
+        const color = PALETTE[prev.length % PALETTE.length];
+        const layer: Layer = {
+          id,
+          name: deriveName(command),
+          command,
+          geojson,
+          temporal,
+          visible: true,
+          style: {
+            color,
+            opacity: 0.85,
+            pointRadius: 4,
+            lineWidth: 1.5,
+            filled: true,
+            temporalMode: "both",
+          },
+        };
+        return [...prev, layer];
+      });
+    },
+    []
+  );
+
+  const remove = useCallback((id: string) => {
+    setLayers((prev) => prev.filter((l) => l.id !== id));
+    setSelected((s) => (s?.layerId === id ? null : s));
+  }, []);
+
+  const toggle = useCallback((id: string) => {
+    setLayers((prev) =>
+      prev.map((l) => (l.id === id ? { ...l, visible: !l.visible } : l))
+    );
+  }, []);
+
+  // Move a layer up (toward the top of the draw order) or down.
+  const move = useCallback((id: string, dir: "up" | "down") => {
+    setLayers((prev) => {
+      const i = prev.findIndex((l) => l.id === id);
+      if (i < 0) return prev;
+      const j = dir === "up" ? i + 1 : i - 1; // higher index = drawn on top
+      if (j < 0 || j >= prev.length) return prev;
+      const next = [...prev];
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  }, []);
+
+  const setStyle = useCallback((id: string, patch: Partial<LayerStyle>) => {
+    setLayers((prev) =>
+      prev.map((l) =>
+        l.id === id ? { ...l, style: { ...l.style, ...patch } } : l
+      )
+    );
+  }, []);
+
+  const clear = useCallback(() => {
+    setLayers([]);
+    setSelected(null);
+  }, []);
+
+  return {
+    layers,
+    add,
+    remove,
+    toggle,
+    move,
+    setStyle,
+    clear,
+    selected,
+    setSelected,
+  };
+}
diff --git a/WebUI/frontend/src/main.tsx b/WebUI/frontend/src/main.tsx
new file mode 100644
index 000000000..39fb1c958
--- /dev/null
+++ b/WebUI/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/WebUI/frontend/src/map/MapView.tsx b/WebUI/frontend/src/map/MapView.tsx
new file mode 100644
index 000000000..5c016a23f
--- /dev/null
+++ b/WebUI/frontend/src/map/MapView.tsx
@@ -0,0 +1,473 @@
+import { useMemo, useState } from "react";
+import DeckGL from "@deck.gl/react";
+import {
+  COORDINATE_SYSTEM,
+  MapView as DeckMapView,
+  OrthographicView,
+  WebMercatorViewport,
+} from "@deck.gl/core";
+import type { PickingInfo } from "@deck.gl/core";
+import {
+  GeoJsonLayer,
+  PathLayer,
+  PolygonLayer,
+  ScatterplotLayer,
+} from "@deck.gl/layers";
+import { TripsLayer } from "@deck.gl/geo-layers";
+import { Map as BaseMap } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+import type { MovingRegion, Trip } from "../api/client";
+import type { Layer } from "../layers/useLayers";
+import {
+  projectBBox,
+  projectGeoJSON,
+  projectRegions,
+  projectTrips,
+  type Projection,
+} from "./projection";
+
+type BBox = [number, number, number, number];
+
+const orthoView = new OrthographicView({ id: "ortho", flipY: false });
+const geoView = new DeckMapView({ id: "geo", repeat: true });
+
+// Raster OpenStreetMap basemap (no external style file / API key needed).
+const OSM_STYLE = {
+  version: 8 as const,
+  sources: {
+    osm: {
+      type: "raster" as const,
+      tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+      tileSize: 256,
+      attribution: "© OpenStreetMap contributors",
+    },
+  },
+  layers: [{ id: "osm", type: "raster" as const, source: "osm" }],
+};
+
+// A bbox is geographic when it fits within valid lon/lat ranges. SECONDO's own
+// coordinate systems (e.g. berlintest ~10000) fall outside and stay Cartesian.
+function isGeographic(bbox: BBox | undefined): boolean {
+  if (!bbox) return false;
+  const [minx, miny, maxx, maxy] = bbox;
+  return (
+    minx >= -180 && maxx <= 180 && miny >= -90 && maxy <= 90 &&
+    // reject a degenerate 0-area bbox around (0,0)
+    !(minx === 0 && miny === 0 && maxx === 0 && maxy === 0)
+  );
+}
+
+// Interpolate a moving object's position along its (normalized) path at time
+// `t`, or null when it is not defined at t. Same piecewise-linear model the
+// HoeseViewer uses; here it drives the exact-position dots.
+function positionAt(trip: Trip, t: number): [number, number] | null {
+  const ts = trip.timestamps;
+  const path = trip.path;
+  if (ts.length < 2 || t < ts[0] || t > ts[ts.length - 1]) return null;
+  for (let i = 0; i < ts.length - 1; i++) {
+    if (t >= ts[i] && t <= ts[i + 1]) {
+      const span = ts[i + 1] - ts[i] || 1;
+      const f = (t - ts[i]) / span;
+      const [x0, y0] = path[i];
+      const [x1, y1] = path[i + 1];
+      return [x0 + f * (x1 - x0), y0 + f * (y1 - y0)];
+    }
+  }
+  return null;
+}
+
+// The polygon rings of a moving region at time `t`, or null when it is not
+// defined then. Each vertex interpolates linearly across its unit -- the same
+// model as moving points, and what the HoeseViewer's Dsplmovingregion does.
+function facesAt(region: MovingRegion, t: number): [number, number][][][] | null {
+  for (const unit of region.units) {
+    const [t0, t1] = unit.interval;
+    if (t >= t0 && t <= t1) {
+      const f = t1 > t0 ? (t - t0) / (t1 - t0) : 0;
+      return unit.faces.map((face) =>
+        face.map((cycle) =>
+          cycle.map(
+            ([x0, y0, x1, y1]) =>
+              [x0 + f * (x1 - x0), y0 + f * (y1 - y0)] as [number, number]
+          )
+        )
+      );
+    }
+  }
+  return null;
+}
+
+function unionBBox(layers: Layer[]): BBox | undefined {
+  let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+  for (const l of layers) {
+    for (const b of [l.geojson?.bbox, l.temporal?.bbox]) {
+      if (b) {
+        minx = Math.min(minx, b[0]);
+        miny = Math.min(miny, b[1]);
+        maxx = Math.max(maxx, b[2]);
+        maxy = Math.max(maxy, b[3]);
+      }
+    }
+  }
+  return minx === Infinity ? undefined : [minx, miny, maxx, maxy];
+}
+
+function fitCartesian(bbox: BBox | undefined) {
+  if (!bbox) return { target: [0, 0, 0] as [number, number, number], zoom: 0 };
+  const [minx, miny, maxx, maxy] = bbox;
+  const spanX = Math.max(maxx - minx, 1e-6);
+  const spanY = Math.max(maxy - miny, 1e-6);
+  return {
+    target: [(minx + maxx) / 2, (miny + maxy) / 2, 0] as [number, number, number],
+    zoom: Math.log2(Math.min((900 * 0.9) / spanX, (700 * 0.9) / spanY)),
+  };
+}
+
+function fitGeographic(bbox: BBox | undefined) {
+  // No layers (e.g. the last one was just removed): show a neutral world view.
+  if (!bbox) return { longitude: 0, latitude: 0, zoom: 1 };
+  // Defensive clamp: Web Mercator blows up outside these ranges, which would
+  // silently degrade into a whole-world view.
+  const clampLon = (v: number) => Math.min(180, Math.max(-180, v));
+  const clampLat = (v: number) => Math.min(85, Math.max(-85, v));
+  const [minx, miny, maxx, maxy] = [
+    clampLon(bbox[0]),
+    clampLat(bbox[1]),
+    clampLon(bbox[2]),
+    clampLat(bbox[3]),
+  ];
+  if (maxx - minx < 1e-9 || maxy - miny < 1e-9) {
+    return { longitude: (minx + maxx) / 2, latitude: (miny + maxy) / 2, zoom: 14 };
+  }
+  const vp = new WebMercatorViewport({ width: 720, height: 800 });
+  const { longitude, latitude, zoom } = vp.fitBounds(
+    [
+      [minx, miny],
+      [maxx, maxy],
+    ],
+    { padding: 40 }
+  );
+  return { longitude, latitude, zoom: Math.min(zoom, 18) };
+}
+
+interface Props {
+  layers: Layer[];
+  globalT0: number;
+  currentTime: number;
+  projection: Projection;
+  onSelect: (layerId: string | null, object: unknown) => void;
+}
+
+export function MapView({
+  layers,
+  globalT0,
+  currentTime,
+  projection,
+  onSelect,
+}: Props) {
+  // Apply the chosen projection to each layer's coordinates once (not per
+  // frame). With "berlinmod" the local BBBike coordinates become WGS84 lon/lat.
+  const layersToRender = useMemo(() => {
+    if (projection === "none") return layers;
+    return layers.map((l) => ({
+      ...l,
+      geojson: l.geojson ? projectGeoJSON(l.geojson, projection) : null,
+      temporal: l.temporal
+        ? {
+            ...l.temporal,
+            trips: projectTrips(l.temporal.trips, projection),
+            regions: projectRegions(l.temporal.regions ?? [], projection),
+            // The bbox must be projected too, or the view fit would treat raw
+            // world coordinates as lon/lat (moving objects showed the globe).
+            // Plot-only objects (mreal/mint) have no geometry, hence no bbox.
+            bbox: l.temporal.bbox
+              ? projectBBox(l.temporal.bbox, projection)
+              : null,
+          }
+        : null,
+    }));
+  }, [layers, projection]);
+
+  const bbox = useMemo(() => unionBBox(layersToRender), [layersToRender]);
+  const geographic = useMemo(
+    () => projection !== "none" || isGeographic(bbox),
+    [bbox, projection]
+  );
+  // The view that fits the current data in the current projection. deck.gl's
+  // OrthographicViewState / MapViewState union is awkward to thread through
+  // controlled state, so this view state is intentionally loosely typed.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  type VState = any;
+  const fit = useMemo<VState>(
+    () => (geographic ? fitGeographic(bbox) : fitCartesian(bbox)),
+    [bbox, geographic]
+  );
+
+  // Controlled view state: user pan/zoom updates it. We deliberately re-fit
+  // ONLY when a layer the map has never shown appears, or the projection
+  // changes (which moves the data to a whole new coordinate space). Editing a
+  // layer's style, toggling visibility or removing a layer must leave the view
+  // exactly where the user put it. The "adjust state during render" pattern
+  // keeps `views` and `viewState` in sync in the same render.
+  const [viewState, setViewState] = useState<VState>(fit);
+  const [fitState, setFitState] = useState<{ seen: string[]; projection: Projection }>(
+    { seen: [], projection }
+  );
+  const unseen = layersToRender.filter((l) => !fitState.seen.includes(l.id));
+  const projectionChanged = fitState.projection !== projection;
+  if (unseen.length > 0 || projectionChanged) {
+    setFitState({
+      seen: [...fitState.seen, ...unseen.map((l) => l.id)],
+      projection,
+    });
+    setViewState(fit);
+  }
+
+  const zoomBy = (delta: number) =>
+    setViewState((vs: VState) => ({ ...vs, zoom: (vs.zoom ?? 0) + delta }));
+  const recenter = () => setViewState(fit);
+  const coordinateSystem = geographic
+    ? COORDINATE_SYSTEM.LNGLAT
+    : COORDINATE_SYSTEM.CARTESIAN;
+
+  const tripsById = useMemo(() => {
+    const m = new Map<string, Trip[]>();
+    for (const l of layersToRender) {
+      if (l.temporal) {
+        m.set(
+          l.id,
+          l.temporal.trips.map((tr) => ({
+            ...tr,
+            timestamps: tr.timestamps.map((t) => t - globalT0),
+          }))
+        );
+      }
+    }
+    return m;
+  }, [layersToRender, globalT0]);
+
+  // Same normalisation for moving regions: unit intervals are absolute POSIX
+  // seconds, while `currentTime` runs from the shared t0.
+  const regionsById = useMemo(() => {
+    const m = new Map<string, MovingRegion[]>();
+    for (const l of layersToRender) {
+      const regions = l.temporal?.regions;
+      if (regions && regions.length > 0) {
+        m.set(
+          l.id,
+          regions.map((r) => ({
+            ...r,
+            units: r.units.map((u) => ({
+              ...u,
+              interval: [u.interval[0] - globalT0, u.interval[1] - globalT0] as [
+                number,
+                number,
+              ],
+            })),
+          }))
+        );
+      }
+    }
+    return m;
+  }, [layersToRender, globalT0]);
+
+  const combinedDuration = useMemo(() => {
+    let span = 0;
+    for (const l of layersToRender)
+      if (l.temporal)
+        span = Math.max(span, l.temporal.timeDomain[1] - l.temporal.timeDomain[0]);
+    return span;
+  }, [layersToRender]);
+  const trailLength = Math.max(combinedDuration * 0.08, 60);
+
+  const deckLayers = [];
+  for (const layer of layersToRender) {
+    const [r, g, b] = layer.style.color;
+    const s = layer.style;
+
+    if (layer.geojson) {
+      deckLayers.push(
+        new GeoJsonLayer({
+          id: `${layer.id}-static`,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          data: layer.geojson as any,
+          coordinateSystem,
+          pickable: true,
+          autoHighlight: true,
+          highlightColor: [255, 255, 255, 90],
+          stroked: true,
+          filled: s.filled,
+          pointType: "circle",
+          getPointRadius: s.pointRadius,
+          pointRadiusUnits: "pixels",
+          getLineWidth: s.lineWidth,
+          lineWidthUnits: "pixels",
+          getFillColor: [r, g, b, Math.round(s.opacity * 150)],
+          getLineColor: [r, g, b, Math.round(s.opacity * 255)],
+          updateTriggers: {
+            getFillColor: [r, g, b, s.opacity, s.filled],
+            getLineColor: [r, g, b, s.opacity],
+            getPointRadius: s.pointRadius,
+            getLineWidth: s.lineWidth,
+          },
+        })
+      );
+    }
+
+    // Moving regions: rebuild the polygon at the current instant each frame.
+    const regions = regionsById.get(layer.id);
+    if (regions && regions.length > 0) {
+      const polys: { polygon: [number, number][][]; properties: unknown }[] = [];
+      for (const region of regions) {
+        const faces = facesAt(region, currentTime);
+        if (faces) {
+          for (const face of faces) {
+            polys.push({ polygon: face, properties: region.properties });
+          }
+        }
+      }
+      if (polys.length > 0) {
+        deckLayers.push(
+          new PolygonLayer({
+            id: `${layer.id}-mregion`,
+            data: polys,
+            coordinateSystem,
+            pickable: true,
+            filled: s.filled,
+            stroked: true,
+            getPolygon: (d: { polygon: [number, number][][] }) => d.polygon,
+            getFillColor: [r, g, b, Math.round(s.opacity * 130)],
+            getLineColor: [r, g, b, Math.round(s.opacity * 255)],
+            getLineWidth: s.lineWidth,
+            lineWidthUnits: "pixels",
+            updateTriggers: {
+              getFillColor: [r, g, b, s.opacity, s.filled],
+              getLineColor: [r, g, b, s.opacity],
+              getLineWidth: s.lineWidth,
+            },
+          })
+        );
+      }
+    }
+
+    const trips = tripsById.get(layer.id);
+    if (trips && trips.length > 0) {
+      const showTrail = s.temporalMode === "trail" || s.temporalMode === "both";
+      const showPoints = s.temporalMode === "points" || s.temporalMode === "both";
+
+      if (showTrail) {
+        // Faint full trajectory for context.
+        deckLayers.push(
+          new PathLayer({
+            id: `${layer.id}-context`,
+            data: trips,
+            coordinateSystem,
+            getPath: (d: Trip) => d.path,
+            getColor: [r, g, b, 55],
+            getWidth: 1,
+            widthUnits: "pixels",
+            widthMinPixels: 1,
+            updateTriggers: { getColor: [r, g, b] },
+          })
+        );
+        // Animated trail; lineWidth controls its thickness.
+        deckLayers.push(
+          new TripsLayer({
+            id: `${layer.id}-trips`,
+            data: trips,
+            coordinateSystem,
+            getPath: (d: Trip) => d.path,
+            getTimestamps: (d: { timestamps: number[] }) => d.timestamps,
+            getColor: [r, g, b],
+            opacity: s.opacity,
+            widthMinPixels: Math.max(s.lineWidth, 1),
+            capRounded: true,
+            jointRounded: true,
+            trailLength,
+            currentTime,
+            fadeTrail: true,
+            updateTriggers: { getColor: [r, g, b], getWidth: s.lineWidth },
+          })
+        );
+      }
+
+      if (showPoints) {
+        // Exact current positions of each moving object; pointRadius controls
+        // the dot size. Recomputed each frame as currentTime advances.
+        const positions = [];
+        for (const trip of trips) {
+          const pos = positionAt(trip, currentTime);
+          if (pos) positions.push({ position: pos, properties: trip.properties });
+        }
+        deckLayers.push(
+          new ScatterplotLayer({
+            id: `${layer.id}-pos`,
+            data: positions,
+            coordinateSystem,
+            pickable: true,
+            getPosition: (d: { position: [number, number] }) => d.position,
+            getFillColor: [r, g, b],
+            getRadius: s.pointRadius,
+            radiusUnits: "pixels",
+            radiusMinPixels: s.pointRadius,
+            stroked: true,
+            lineWidthMinPixels: 1,
+            getLineColor: [255, 255, 255, 220],
+            updateTriggers: { getFillColor: [r, g, b], getRadius: s.pointRadius },
+          })
+        );
+      }
+    }
+  }
+
+  return (
+    // The mode is already visible in the projection dropdown; expose it here as
+    // state (not a second label) so tests can assert it.
+    <div
+      className="mapview"
+      data-projection={projection}
+      data-geographic={geographic ? "true" : "false"}
+    >
+      <DeckGL
+        views={geographic ? geoView : orthoView}
+        viewState={viewState}
+        onViewStateChange={(e: { viewState: VState }) => setViewState(e.viewState)}
+        controller={true}
+        layers={deckLayers}
+        onClick={(info: PickingInfo) => {
+          if (info.object && info.layer) {
+            onSelect(info.layer.id.split("-")[0], info.object);
+          } else {
+            onSelect(null, null);
+          }
+        }}
+        getTooltip={({ object }) => {
+          const props = (object as { properties?: Record<string, unknown> })
+            ?.properties;
+          if (!props) return null;
+          const text = Object.entries(props)
+            .filter(([k]) => !k.startsWith("_")) // hide internal _attr/_layer
+            .map(([k, v]) => `${k}: ${v}`)
+            .join("\n");
+          return text ? { text } : null;
+        }}
+      >
+        {geographic && <BaseMap reuseMaps mapStyle={OSM_STYLE} />}
+      </DeckGL>
+      <div className="zoom-ctl">
+        <button onClick={() => zoomBy(0.6)} title="Zoom in">
+          +
+        </button>
+        <button onClick={() => zoomBy(-0.6)} title="Zoom out">
+          −
+        </button>
+        <button onClick={recenter} title="Fit to data" className="zoom-fit">
+          ⤢
+        </button>
+      </div>
+      {layers.length === 0 && (
+        <div className="map-empty">Run a spatial or moving-object query</div>
+      )}
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/map/projection.ts b/WebUI/frontend/src/map/projection.ts
new file mode 100644
index 000000000..5f278a60e
--- /dev/null
+++ b/WebUI/frontend/src/map/projection.ts
@@ -0,0 +1,115 @@
+import type {
+  FeatureCollection,
+  MovingRegion,
+  MovingVertex,
+  Trip,
+} from "../api/client";
+
+// Projections a user can apply to a dataset's world coordinates.
+export type Projection = "none" | "berlinmod";
+
+export const PROJECTION_LABEL: Record<Projection, string> = {
+  none: "Flat (no map)",
+  berlinmod: "BerlinMOD → OSM",
+};
+
+type BBox = [number, number, number, number];
+
+// BBBike (BerlinMOD / berlintest local) coordinates -> WGS84 lon/lat.
+// Constants and formula taken verbatim from SECONDO's
+// Algebras/Spatial/Berlin2WGS.cpp (which in turn is from the BBBike sources).
+const X0 = -780761.760862528;
+const X1 = 67978.2421158527;
+const X2 = -2285.59137120724;
+const Y0 = -5844741.03397902;
+const Y1 = 1214.24447469596;
+const Y2 = 111217.945663725;
+
+export function berlin2wgs(x: number, y: number): [number, number] {
+  const lon = ((x - X0) * Y2 - (y - Y0) * X2) / (X1 * Y2 - Y1 * X2);
+  const lat = ((x - X0) * Y1 - (y - Y0) * X1) / (X2 * Y1 - X1 * Y2);
+  return [lon, lat];
+}
+
+const PROJECTORS: Record<Projection, ((x: number, y: number) => [number, number]) | null> = {
+  none: null,
+  berlinmod: berlin2wgs,
+};
+
+// Recursively map the [x,y] leaves of a GeoJSON coordinates array.
+type Coords = number[] | Coords[];
+function mapCoords(c: Coords, fn: (x: number, y: number) => [number, number]): Coords {
+  if (typeof c[0] === "number") {
+    return fn(c[0] as number, c[1] as number);
+  }
+  return (c as Coords[]).map((child) => mapCoords(child, fn));
+}
+
+// The transform is linear, so a rectangle maps to a parallelogram whose
+// axis-aligned bounds are attained at the projected corners.
+export function projectBBox(b: BBox, projection: Projection): BBox {
+  const fn = PROJECTORS[projection];
+  if (!fn) return b;
+  const [minx, miny, maxx, maxy] = b;
+  const pts = [
+    fn(minx, miny),
+    fn(maxx, miny),
+    fn(maxx, maxy),
+    fn(minx, maxy),
+  ];
+  const xs = pts.map((p) => p[0]);
+  const ys = pts.map((p) => p[1]);
+  return [Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)];
+}
+
+export function projectGeoJSON(
+  fc: FeatureCollection,
+  projection: Projection
+): FeatureCollection {
+  const fn = PROJECTORS[projection];
+  if (!fn) return fc;
+  const features = (fc.features as Array<{ geometry: { coordinates: Coords } }>).map(
+    (f) => ({
+      ...f,
+      geometry: { ...f.geometry, coordinates: mapCoords(f.geometry.coordinates, fn) },
+    })
+  );
+  return {
+    ...fc,
+    features,
+    bbox: fc.bbox ? projectBBox(fc.bbox, projection) : undefined,
+  };
+}
+
+export function projectTrips(trips: Trip[], projection: Projection): Trip[] {
+  const fn = PROJECTORS[projection];
+  if (!fn) return trips;
+  return trips.map((t) => ({
+    ...t,
+    path: t.path.map(([x, y]) => fn(x, y)),
+  }));
+}
+
+export function projectRegions(
+  regions: MovingRegion[],
+  projection: Projection
+): MovingRegion[] {
+  const fn = PROJECTORS[projection];
+  if (!fn) return regions;
+  // Both endpoints of every moving vertex must be projected.
+  return regions.map((r) => ({
+    ...r,
+    units: r.units.map((u) => ({
+      ...u,
+      faces: u.faces.map((face) =>
+        face.map((cycle) =>
+          cycle.map(([x0, y0, x1, y1]): MovingVertex => {
+            const [a, b] = fn(x0, y0);
+            const [c, d] = fn(x1, y1);
+            return [a, b, c, d];
+          })
+        )
+      ),
+    })),
+  }));
+}
diff --git a/WebUI/frontend/src/plots/PlotPanel.tsx b/WebUI/frontend/src/plots/PlotPanel.tsx
new file mode 100644
index 000000000..e9901a34b
--- /dev/null
+++ b/WebUI/frontend/src/plots/PlotPanel.tsx
@@ -0,0 +1,129 @@
+import type { Plot } from "../api/client";
+import type { RGB } from "../layers/useLayers";
+
+export interface PlotEntry {
+  plot: Plot;
+  color: RGB;
+  layerName: string;
+}
+
+interface Props {
+  entries: PlotEntry[];
+  /** Absolute POSIX seconds of the shared time domain start. */
+  t0: number;
+  /** Seconds into the shared domain (the timeline cursor). */
+  time: number;
+  duration: number;
+  collapsed: boolean;
+  onToggle: () => void;
+}
+
+const W = 250; // plot width in px
+const H = 40; // plot height in px
+
+const rgb = ([r, g, b]: RGB) => `rgb(${r},${g},${b})`;
+
+/** Value at time `t` (absolute seconds). Step series carry explicit points at
+ *  each unit boundary, so plain linear interpolation is correct for both kinds. */
+function valueAt(series: [number, number][], t: number): number | null {
+  if (series.length === 0) return null;
+  if (t <= series[0][0]) return series[0][1];
+  const last = series[series.length - 1];
+  if (t >= last[0]) return last[1];
+  for (let i = 0; i < series.length - 1; i++) {
+    const [ta, va] = series[i];
+    const [tb, vb] = series[i + 1];
+    if (t >= ta && t <= tb) {
+      if (tb === ta) return vb;
+      return va + ((t - ta) / (tb - ta)) * (vb - va);
+    }
+  }
+  return last[1];
+}
+
+function fmt(v: number): string {
+  if (Number.isInteger(v)) return String(v);
+  if (Math.abs(v) >= 100) return v.toFixed(0);
+  return v.toFixed(2);
+}
+
+export function PlotPanel({
+  entries,
+  t0,
+  time,
+  duration,
+  collapsed,
+  onToggle,
+}: Props) {
+  if (entries.length === 0) return null;
+  const now = t0 + time;
+
+  return (
+    <div className="plots">
+      <div className="plots-head">
+        <span>values</span>
+        <button
+          className="plots-toggle"
+          onClick={onToggle}
+          title={collapsed ? "Show value plots" : "Hide value plots"}
+        >
+          {collapsed ? "▴" : "▾"}
+        </button>
+      </div>
+
+      {!collapsed &&
+        entries.map(({ plot, color, layerName }, i) => {
+          // Small multiples: each measure keeps its own y scale. Never a second
+          // y-axis on a shared plot.
+          const [lo, hi] = plot.valueRange;
+          const span = hi - lo || 1;
+          const x = (t: number) =>
+            duration > 0 ? ((t - t0) / duration) * W : 0;
+          const y = (v: number) => H - ((v - lo) / span) * H;
+          const points = plot.series
+            .map(([t, v]) => `${x(t).toFixed(1)},${y(v).toFixed(1)}`)
+            .join(" ");
+          const cur = valueAt(plot.series, now);
+          const cx = x(now);
+          // A bare object's plot is labelled with its type ("mreal"), which is
+          // ambiguous once two are shown; name it after its layer instead.
+          const label = plot.label === plot.type ? layerName : plot.label;
+
+          return (
+            <div className="plot" key={`${layerName}-${plot.label}-${i}`}>
+              <div className="plot-title">
+                {/* Identity is carried by the swatch + name, never colour alone,
+                    and the text keeps its own ink colour. */}
+                <span className="plot-swatch" style={{ background: rgb(color) }} />
+                <span className="plot-label" title={`${layerName} · ${plot.type}`}>
+                  {label}
+                </span>
+                <span className="plot-value">{cur === null ? "–" : fmt(cur)}</span>
+              </div>
+              <svg width={W} height={H} className="plot-svg">
+                {/* recessive baseline */}
+                <line x1={0} y1={H - 0.5} x2={W} y2={H - 0.5} className="plot-axis" />
+                <polyline
+                  points={points}
+                  fill="none"
+                  stroke={rgb(color)}
+                  strokeWidth={2}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                />
+                {/* cursor at the timeline instant */}
+                <line x1={cx} y1={0} x2={cx} y2={H} className="plot-cursor" />
+                {cur !== null && (
+                  <circle cx={cx} cy={y(cur)} r={3} fill={rgb(color)} className="plot-dot" />
+                )}
+              </svg>
+              <div className="plot-range">
+                <span>{fmt(lo)}</span>
+                <span>{fmt(hi)}</span>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/styles.css b/WebUI/frontend/src/styles.css
new file mode 100644
index 000000000..711075f8f
--- /dev/null
+++ b/WebUI/frontend/src/styles.css
@@ -0,0 +1,855 @@
+:root {
+  color-scheme: light dark;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #0f1115;
+  color: #e6e6e6;
+}
+
+.app {
+  display: grid;
+  height: 100vh;
+}
+
+/* Console docked to the left of the map (default). */
+.app.side {
+  grid-template-columns: var(--cat) 5px var(--con) 5px 1fr;
+  grid-template-rows: 1fr;
+}
+.app.side .catalog-pane { grid-column: 1; grid-row: 1; }
+.app.side .split-a { grid-column: 2; grid-row: 1; cursor: col-resize; }
+.app.side .console-pane { grid-column: 3; grid-row: 1; }
+.app.side .split-b { grid-column: 4; grid-row: 1; cursor: col-resize; }
+.app.side .map-pane { grid-column: 5; grid-row: 1; }
+
+/* Console docked under the map. */
+.app.bottom {
+  grid-template-columns: var(--cat) 5px 1fr;
+  grid-template-rows: 1fr 5px var(--conh);
+}
+.app.bottom .catalog-pane { grid-column: 1; grid-row: 1 / -1; }
+.app.bottom .split-a { grid-column: 2; grid-row: 1 / -1; cursor: col-resize; }
+.app.bottom .map-pane { grid-column: 3; grid-row: 1; }
+.app.bottom .split-b { grid-column: 3; grid-row: 2; cursor: row-resize; }
+.app.bottom .console-pane { grid-column: 3; grid-row: 3; }
+
+/* Collapsed console = header + input only, so the map takes the rest. */
+.app.bottom.con-collapsed {
+  grid-template-rows: 1fr 5px min-content;
+}
+
+.console.collapsed .log {
+  display: none;
+}
+
+/* Nothing to resize while a panel is collapsed. */
+.app.cat-collapsed .split-a,
+.app.con-collapsed .split-b {
+  cursor: default;
+}
+
+.rail-btn {
+  width: 100%;
+  height: 2.2rem;
+  background: none;
+  border: none;
+  border-bottom: 1px solid #262a33;
+  color: #9aa4b2;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.rail-btn:hover {
+  color: #e6e6e6;
+  background: #171a21;
+}
+
+.cat-collapse {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 0 0.2rem;
+}
+
+.cat-collapse:hover {
+  color: #e6e6e6;
+}
+
+.split {
+  background: #1c2028;
+  transition: background 0.12s;
+}
+
+.split:hover,
+body.dragging .split {
+  background: #3b82f6;
+}
+
+/* Keep the pointer consistent and prevent text selection while dragging. */
+body.dragging {
+  user-select: none;
+}
+
+.catalog-pane {
+  overflow: hidden;
+}
+
+.catalog {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  overflow-y: auto;
+}
+
+.cat-section {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #9aa4b2;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 0.3rem;
+}
+
+.cat-count {
+  margin-left: auto;
+  background: #1c2028;
+  border-radius: 10px;
+  padding: 0 0.4rem;
+  font-size: 0.68rem;
+}
+
+.cat-dbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
+.cat-db {
+  background: #171a21;
+  border: 1px solid #262a33;
+  color: #cbd5e1;
+  border-radius: 5px;
+  padding: 0.2rem 0.45rem;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+
+.cat-db.active {
+  border-color: #60a5fa;
+  color: #fff;
+}
+
+.cat-db.pending {
+  border-color: #60a5fa;
+}
+
+.cat-db:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.cat-db {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.cat-spin {
+  width: 11px;
+  height: 11px;
+  border: 2px solid #3a3f4b;
+  border-top-color: #60a5fa;
+  border-radius: 50%;
+  display: inline-block;
+  animation: spin 0.7s linear infinite;
+  flex: none;
+}
+
+.cat-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #9aa4b2;
+  font-size: 0.75rem;
+  padding: 0.3rem;
+}
+
+.cat-filter {
+  background: #171a21;
+  border: 1px solid #262a33;
+  color: #e6e6e6;
+  border-radius: 5px;
+  padding: 0.3rem 0.45rem;
+  font-size: 0.75rem;
+}
+
+.cat-objs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+}
+
+.cat-obj {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  background: none;
+  border: none;
+  color: #e6e6e6;
+  padding: 0.22rem 0.3rem;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 0.76rem;
+}
+
+.cat-obj:hover {
+  background: #171a21;
+}
+
+.cat-ic {
+  width: 1rem;
+  text-align: center;
+  color: #6b7280;
+}
+
+.cat-obj.kind-spatial .cat-ic {
+  color: #7fb3e6;
+}
+
+.cat-obj.kind-temporal .cat-ic {
+  color: #fd805d;
+}
+
+.cat-oname {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Menlo, monospace;
+}
+
+.cat-otype {
+  color: #6b7280;
+  font-size: 0.68rem;
+}
+
+.pane {
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+}
+
+.map-pane {
+  background: #0b0d11;
+}
+
+.mapview {
+  position: absolute;
+  inset: 0;
+}
+
+.map-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+  pointer-events: none;
+}
+
+.projection-ctl {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 3;
+}
+
+.projection-ctl select {
+  background: rgba(23, 26, 33, 0.9);
+  color: #e6e6e6;
+  border: 1px solid #262a33;
+  border-radius: 6px;
+  padding: 0.25rem 0.45rem;
+  font-size: 0.75rem;
+  backdrop-filter: blur(4px);
+}
+
+.zoom-ctl {
+  position: absolute;
+  right: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.zoom-ctl button {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(23, 26, 33, 0.9);
+  color: #e6e6e6;
+  border: 1px solid #262a33;
+  border-radius: 6px;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+}
+
+.zoom-ctl button:hover {
+  border-color: #60a5fa;
+}
+
+.zoom-ctl .zoom-fit {
+  font-size: 0.95rem;
+  margin-top: 0.15rem;
+}
+
+.loading {
+  position: absolute;
+  top: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(15, 17, 21, 0.92);
+  border: 1px solid #262a33;
+  color: #cbd5e1;
+  padding: 0.35rem 0.8rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  backdrop-filter: blur(4px);
+}
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #3a3f4b;
+  border-top-color: #60a5fa;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.lp-check select {
+  background: #171a21;
+  color: #e6e6e6;
+  border: 1px solid #3a3f4b;
+  border-radius: 4px;
+  margin-left: 0.4rem;
+  font-size: 0.72rem;
+}
+
+.lp-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.geohint {
+  color: #7fd1b9;
+  font-size: 0.75rem;
+  margin-bottom: 0.2rem;
+}
+
+.layers-panel {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 2;
+  width: 240px;
+  background: rgba(15, 17, 21, 0.92);
+  border: 1px solid #262a33;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+  font-size: 0.8rem;
+  overflow: hidden;
+}
+
+.lp-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.45rem 0.6rem;
+  border-bottom: 1px solid #262a33;
+  color: #cbd5e1;
+  font-weight: 600;
+}
+
+/* The export/clear buttons are taller than the title text and set the header's
+   height. Hiding them while collapsed keeps them in layout -- and out of hit
+   testing and the tab order -- so the header never changes height and the
+   title stays put. */
+.lp-actions.lp-hidden {
+  visibility: hidden;
+}
+
+.lp-collapse {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.lp-collapse:hover {
+  color: #e6e6e6;
+}
+
+.lp-chevron {
+  display: inline-block;
+  width: 0.7rem;
+  color: #9aa4b2;
+  font-size: 0.7rem;
+}
+
+.lp-count {
+  background: #262a33;
+  color: #9aa4b2;
+  border-radius: 999px;
+  padding: 0 0.35rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.lp-clear {
+  background: none;
+  border: 1px solid #3a3f4b;
+  color: #9aa4b2;
+  border-radius: 5px;
+  font-size: 0.72rem;
+  padding: 0.1rem 0.4rem;
+  cursor: pointer;
+}
+
+.lp-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 45vh;
+  overflow-y: auto;
+}
+
+.lp-item {
+  border-bottom: 1px solid #1c2028;
+}
+
+.lp-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.5rem;
+}
+
+.lp-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex: none;
+}
+
+.lp-name {
+  flex: 1;
+  text-align: left;
+  background: none;
+  border: none;
+  color: #e6e6e6;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.76rem;
+}
+
+.lp-mini {
+  background: none;
+  border: none;
+  color: #9aa4b2;
+  cursor: pointer;
+  padding: 0 0.15rem;
+  font-size: 0.8rem;
+}
+
+.lp-mini:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.lp-x:hover {
+  color: #f87171;
+}
+
+.lp-style {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 0.5rem;
+  align-items: center;
+  padding: 0.4rem 0.6rem 0.6rem;
+  background: #12151b;
+}
+
+.lp-style label {
+  display: contents;
+  color: #9aa4b2;
+}
+
+.lp-style input[type="range"] {
+  width: 100%;
+  accent-color: #60a5fa;
+}
+
+.lp-style input[type="color"] {
+  width: 100%;
+  height: 1.4rem;
+  background: none;
+  border: 1px solid #3a3f4b;
+  border-radius: 4px;
+}
+
+.lp-check {
+  grid-column: 1 / -1;
+  display: flex !important;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.details {
+  position: absolute;
+  left: 0.75rem;
+  bottom: 4rem;
+  z-index: 2;
+  max-width: 320px;
+  max-height: 40vh;
+  overflow: auto;
+  background: rgba(15, 17, 21, 0.92);
+  border: 1px solid #262a33;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+}
+
+.details-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid #262a33;
+  color: #7fd1b9;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.details-head button {
+  background: none;
+  border: none;
+  color: #9aa4b2;
+  cursor: pointer;
+}
+
+.details table {
+  border-collapse: collapse;
+  font-size: 0.76rem;
+  width: 100%;
+}
+
+.details td {
+  padding: 0.2rem 0.6rem;
+  vertical-align: top;
+}
+
+.details .dk {
+  color: #9aa4b2;
+  font-family: ui-monospace, Menlo, monospace;
+}
+
+.details .dv {
+  color: #e6e6e6;
+  word-break: break-word;
+}
+
+/* Value plots: small multiples, one per measure (never a shared/dual y-axis). */
+.plots {
+  position: absolute;
+  left: 0.75rem;
+  bottom: 4.2rem;
+  z-index: 3;
+  background: rgba(15, 17, 21, 0.92);
+  border: 1px solid #262a33;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+  padding: 0.4rem 0.55rem 0.5rem;
+  max-height: 46vh;
+  overflow-y: auto;
+}
+
+.plots-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: #9aa4b2;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.2rem;
+}
+
+.plots-toggle {
+  background: none;
+  border: none;
+  color: #9aa4b2;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+
+.plot + .plot {
+  margin-top: 0.5rem;
+  border-top: 1px solid #1c2028;
+  padding-top: 0.4rem;
+}
+
+.plot-title {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.72rem;
+}
+
+.plot-swatch {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.plot-label {
+  color: #cbd5e1; /* text ink, not the series colour */
+  font-family: ui-monospace, Menlo, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plot-value {
+  margin-left: auto;
+  color: #e6e6e6;
+  font-family: ui-monospace, Menlo, monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+.plot-svg {
+  display: block;
+}
+
+.plot-axis {
+  stroke: #262a33;
+  stroke-width: 1;
+}
+
+.plot-cursor {
+  stroke: #6b7280;
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+
+.plot-range {
+  display: flex;
+  justify-content: space-between;
+  color: #6b7280;
+  font-size: 0.62rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.timeline {
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(15, 17, 21, 0.9);
+  border: 1px solid #262a33;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+}
+
+.tl-play {
+  background: #fd805d;
+  color: #101216;
+  border: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.tl-clock {
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.78rem;
+  color: #cbd5e1;
+  min-width: 4.5rem;
+  text-align: center;
+}
+
+.tl-range {
+  flex: 1;
+  accent-color: #fd805d;
+}
+
+.tl-speed {
+  background: #171a21;
+  color: #e6e6e6;
+  border: 1px solid #262a33;
+  border-radius: 6px;
+  padding: 0.25rem 0.4rem;
+  font-size: 0.78rem;
+}
+
+.console {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.console header {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #262a33;
+}
+
+.console header .db {
+  color: #7fd1b9;
+  font-size: 0.85rem;
+}
+
+.dock-btn {
+  margin-left: auto;
+  background: #171a21;
+  border: 1px solid #262a33;
+  color: #9aa4b2;
+  border-radius: 5px;
+  padding: 0.15rem 0.45rem;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+
+.dock-btn:hover {
+  border-color: #60a5fa;
+  color: #e6e6e6;
+}
+
+.log {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.85rem;
+}
+
+.entry {
+  margin-bottom: 0.9rem;
+}
+
+.cmd {
+  color: #cbd5e1;
+  margin-bottom: 0.25rem;
+}
+
+.prompt {
+  color: #60a5fa;
+  user-select: none;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  background: #171a21;
+}
+
+pre.ok {
+  border-left: 3px solid #34d399;
+}
+
+pre.err {
+  border-left: 3px solid #f87171;
+  color: #fca5a5;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #262a33;
+}
+
+.input input {
+  flex: 1;
+  background: #171a21;
+  border: 1px solid #262a33;
+  color: #e6e6e6;
+  padding: 0.55rem 0.7rem;
+  border-radius: 6px;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.85rem;
+}
+
+.input button {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 0.55rem 1.1rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.input button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
diff --git a/WebUI/frontend/src/timeline/Timeline.tsx b/WebUI/frontend/src/timeline/Timeline.tsx
new file mode 100644
index 000000000..9254c1989
--- /dev/null
+++ b/WebUI/frontend/src/timeline/Timeline.tsx
@@ -0,0 +1,63 @@
+interface Props {
+  time: number; // seconds into the domain (0..duration)
+  duration: number; // seconds
+  t0: number; // POSIX seconds of domain start (for absolute labels)
+  playing: boolean;
+  speed: number;
+  onPlay: (playing: boolean) => void;
+  onSeek: (time: number) => void;
+  onSpeed: (speed: number) => void;
+}
+
+const SPEEDS = [30, 60, 120, 300, 600];
+
+function fmtClock(posixSeconds: number): string {
+  // Absolute wall-clock (UTC) HH:MM:SS of the domain instant.
+  return new Date(posixSeconds * 1000).toISOString().slice(11, 19);
+}
+
+export function Timeline({
+  time,
+  duration,
+  t0,
+  playing,
+  speed,
+  onPlay,
+  onSeek,
+  onSpeed,
+}: Props) {
+  return (
+    <div className="timeline">
+      <button
+        className="tl-play"
+        onClick={() => onPlay(!playing)}
+        title={playing ? "Pause" : "Play"}
+      >
+        {playing ? "❚❚" : "▶"}
+      </button>
+      <span className="tl-clock">{fmtClock(t0 + time)}</span>
+      <input
+        className="tl-range"
+        type="range"
+        min={0}
+        max={duration}
+        step={Math.max(duration / 1000, 0.001)}
+        value={time}
+        onChange={(e) => onSeek(Number(e.target.value))}
+      />
+      <span className="tl-clock">{fmtClock(t0 + duration)}</span>
+      <select
+        className="tl-speed"
+        value={speed}
+        onChange={(e) => onSpeed(Number(e.target.value))}
+        title="Playback speed (simulated seconds per real second)"
+      >
+        {SPEEDS.map((s) => (
+          <option key={s} value={s}>
+            {s}×
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/WebUI/frontend/src/timeline/useAnimator.ts b/WebUI/frontend/src/timeline/useAnimator.ts
new file mode 100644
index 000000000..e85060ae4
--- /dev/null
+++ b/WebUI/frontend/src/timeline/useAnimator.ts
@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+
+/** Drives a `time` value in [0, duration] via requestAnimationFrame.
+ *
+ * This replaces the HoeseViewer's Swing `javax.swing.Timer` animation loop
+ * (`AnimCtrlListener`): a single clock the moving-object layers read from.
+ * `speed` is simulated seconds advanced per real second. Playback loops.
+ */
+export function useAnimator(duration: number) {
+  const [time, setTime] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(120);
+  const raf = useRef<number | undefined>(undefined);
+  const last = useRef<number | undefined>(undefined);
+
+  // Reset to the start whenever a new dataset (new duration) arrives.
+  useEffect(() => {
+    setTime(0);
+    setPlaying(duration > 0);
+  }, [duration]);
+
+  useEffect(() => {
+    if (!playing || duration <= 0) return;
+    last.current = performance.now();
+    const tick = (now: number) => {
+      const dt = (now - (last.current ?? now)) / 1000;
+      last.current = now;
+      setTime((t) => {
+        const nt = t + dt * speed;
+        return nt >= duration ? nt % duration : nt; // loop
+      });
+      raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      if (raf.current !== undefined) cancelAnimationFrame(raf.current);
+    };
+  }, [playing, speed, duration]);
+
+  return { time, setTime, playing, setPlaying, speed, setSpeed };
+}
diff --git a/WebUI/frontend/tsconfig.json b/WebUI/frontend/tsconfig.json
new file mode 100644
index 000000000..d10955520
--- /dev/null
+++ b/WebUI/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/WebUI/frontend/tsconfig.tsbuildinfo b/WebUI/frontend/tsconfig.tsbuildinfo
new file mode 100644
index 000000000..0fcdf728e
--- /dev/null
+++ b/WebUI/frontend/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/api/client.ts","./src/catalog/Catalog.tsx","./src/console/Console.tsx","./src/layers/LayersPanel.tsx","./src/layers/exportGeoJSON.ts","./src/layers/useLayers.ts","./src/map/MapView.tsx","./src/map/projection.ts","./src/plots/PlotPanel.tsx","./src/timeline/Timeline.tsx","./src/timeline/useAnimator.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/WebUI/frontend/vite.config.ts b/WebUI/frontend/vite.config.ts
new file mode 100644
index 000000000..a9418f52a
--- /dev/null
+++ b/WebUI/frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// Proxy /api to the FastAPI bridge so cookies stay same-origin in dev.
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+});