chore(deps): Bump the react group across 1 directory with 2 updates

Bumps the react group with 2 updates in the / directory: [react-i18next](https://github.com/i18next/react-i18next) and [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react). Updates `react-i18next` from 17.0.8 to 17.0.10 - [Changelog](https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md) - [Commits](https://github.com/i18next/react-i18next/compare/v17.0.8...v17.0.10) Updates `@vitejs/plugin-react` from 5.2.0 to 6.0.3 - [Release notes](https://github.com/vitejs/vite-plugin-react/releases) - [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite-plugin-react/commits/plugin-react@6.0.3/packages/plugin-react) --- updated-dependencies: - dependency-name: "@vitejs/plugin-react" dependency-version: 6.0.3 dependency-type: direct:development update-type: version-update:semver-major dependency-group: react - dependency-name: react-i18next dependency-version: 17.0.9 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: react ... Signed-off-by: dependabot[bot] <support@github.com>
chore(deps-dev): Bump stylelint from 17.14.0 to 17.14.1 (#2024 )
2026-07-26 15:57:27 +00:00 · 2026-07-24 13:43:29 +00:00 · 2026-07-23 13:51:28 +00:00 · 2026-07-22 14:01:04 +00:00 · 2026-07-22 14:00:36 +00:00 · 2026-07-22 13:51:15 +00:00
120 changed files with 1955 additions and 987 deletions
@@ -21,9 +21,9 @@ jobs:
        os: [ ubuntu-latest, windows-latest, macos-latest ]

    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -41,9 +41,9 @@ jobs:
    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}

    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -56,7 +56,7 @@ jobs:

      # Build and upload desktop CLI artifacts
      - name: Set up Go
-        uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
+        uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7.0.0
        with:
          go-version: ^1.23.x
          cache-dependency-path: desktop/go.sum
@@ -90,13 +90,12 @@ jobs:
      contents: read
    steps:
      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
-      - run: npx playwright install --with-deps chromium
      - run: npm run test-unit-ci
      - name: Upload coverage reports to Codecov
        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
@@ -112,9 +111,9 @@ jobs:
      contents: read
    steps:
      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -140,9 +139,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'
      - run: npm ci
@@ -38,11 +38,11 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4.36.3
+      uses: github/codeql-action/init@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
      with:
        languages: ${{ matrix.language }}
        # If you wish to specify custom queries, you can do so here or in a config file.
@@ -16,13 +16,13 @@ jobs:
      run:
        shell: bash
    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0
          ref: main

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: ".nvmrc"

@@ -12,11 +12,11 @@ jobs:
      contents: write
    if: ${{ github.event_name == 'push' }}
    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with: { persist-credentials: false }

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: '.nvmrc'

@@ -50,6 +50,6 @@ jobs:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
      - run: docker build -t ghcr.io/maplibre/maputnik:main .
      - run: docker push ghcr.io/maplibre/maputnik:main
@@ -15,14 +15,14 @@ jobs:
    permissions:
      contents: read
    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0
          ref: main
          persist-credentials: false

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: ".nvmrc"

@@ -42,19 +42,19 @@ jobs:
      run:
        shell: bash
    steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0
          ref: main

      - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: ".nvmrc"
          registry-url: "https://registry.npmjs.org"

      - name: Set up Go for desktop build
-        uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
+        uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7.0.0
        with:
          go-version: ^1.23.x
          cache-dependency-path: desktop/go.sum
@@ -36,7 +36,7 @@ Then run the end-to-end tests (Playwright starts the dev server automatically):
 npm run test
 ```

-Run the unit and component tests with Vitest:
+Run the unit tests with Vitest:

 ```
 npm run test-unit
@@ -45,3 +45,106 @@ npm run test-unit
 ## Pull Requests

 - Pull requests should update `CHANGELOG.md` with a short description of the change.
+
+## Testing
+
+### Prefer end-to-end tests
+
+Most of this codebase is React components, and they are only reachable from an
+end-to-end test. E2E coverage is the primary signal.
+
+Reach for a unit test only for pure logic that e2e cannot cheaply reach (parsers,
+sorting, watchers, stores). Before writing one, check whether e2e already covers
+the file — a unit test that duplicates existing e2e coverage adds test code and
+almost no coverage:
+
+```
+npx nyc report --reporter=text --include="src/libs/style.ts"
+```
+
+Do **not** merge the Vitest (v8) and e2e (istanbul) coverage reports locally. They
+produce conflicting statement maps for the same files and the combined percentage
+is meaningless. Codecov merges the two uploads server-side; that is the number to
+trust. Locally, read them separately:
+
+- e2e: `npx playwright test` then `npx nyc report --reporter=text-summary` (reads `.nyc_output/`)
+- unit: `npx vitest run --coverage` (writes `coverage/`)
+
+### E2E layering
+
+Three layers, and the boundaries matter:
+
+- `e2e/playwright-helper.ts` — generic, app-agnostic browser actions. **The only
+  file allowed to import `@playwright/test`** (besides `e2e/utils/fixtures.ts`).
+- `e2e/maputnik-driver.ts` — domain actions (layers, filters, functions, the
+  style). Knows nothing about `page` or Playwright.
+- `e2e/modal-driver.ts` — actions scoped to a modal, exposed as `when.modal.*`.
+
+Specs get a driver at describe scope and assert fluently:
+
+```ts
+describe("layer editor", () => {
+  const { given, get, when, then } = new MaputnikDriver();
+  ...
+  await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [{ id, type: "fill" }] });
+});
+```
+
+New UI interactions belong in a driver, not inline in a spec.
+
+### Writing assertions
+
+- `shouldDeepNestedInclude` is a recursive partial match (`toMatchObject`): nested
+  objects are matched as subsets, arrays and primitives must match exactly
+  (including array length).
+- Assert against the whole style, not an extracted slice. Avoid
+  `get.styleFromLocalStorage().then(style => style.layers.find(...))` — it moves
+  test logic into the test. Compare the real object instead.
+- `Query.then()` is lazy and returns a new `Query`, **not** a Promise. `await
+  get.styleFromLocalStorage()` hangs forever. Use `.get()` to await it directly,
+  or pass the Query to `then(...)`.
+
+### One behaviour per test
+
+If a test needs comments narrating "and now this…", it is several tests. Split it,
+and hoist the shared setup into a nested `describe` + `beforeEach`.
+
+### Test ids
+
+Test ids use the `data-wd-key` attribute and are read via `get.elementByTestId`.
+
+The `Input*` components already accept `data-wd-key` and render it on the real
+`<input>`; the `Field*` wrappers forward it through their `{...props}` spread. So
+passing `data-wd-key` to a `Field*` component is usually enough. Do **not** also
+add it to `Block`/`Fieldset` — the id then matches two elements and locators fail
+in strict mode.
+
+Note `InputNumber` renders `<key>-text` and `<key>-range` when `allowRange` is set,
+and `<key>` otherwise.
+
+### Input commit semantics (common source of "the value didn't save")
+
+- `InputString` only fires its `onChange` on **blur** or **Enter**. Typing alone
+  fires `onInput`. A driver that calls `fill()` must then call `blur()`, or the
+  value never reaches the style.
+- `InputNumber` commits on every change; no blur needed.
+- The autocomplete inputs (layer source, add-layer source) are controlled
+  downshift comboboxes. Keystroke typing is dropped/reordered — `{selectall}` then
+  typing `raster` yields `"exampleaster"`. Use `fill()`, which dispatches a single
+  input event, then pick from the filtered menu.
+- CodeMirror auto-closes brackets and quotes, and types over its own closers, so
+  inserting a well-formed JSON fragment stays well-formed. To break JSON on
+  purpose, insert a bare word.
+
+### Fixtures
+
+Style fixtures live in `e2e/fixtures/`. A new one must be registered in two places
+in `maputnik-driver.ts`: the list in `given.setupMockBackedResponses` and the
+`styleFileByKey` map in `when.setStyle`.
+
+### Verify a new test can fail
+
+A test that passes for the wrong reason is worse than no test. After writing one,
+mutate the expected value and confirm it fails. This has caught real mistakes
+(e.g. a driver that never committed its input, so the assertion was matching a
+value written by the *previous* step).
@@ -0,0 +1,60 @@
+import { test, expect, describe, beforeEach } from "./utils/fixtures";
+import { MaputnikDriver } from "./maputnik-driver";
+import tokens from "../src/config/tokens.json" with { type: "json" };
+
+describe("access tokens", () => {
+  const { given, when } = new MaputnikDriver();
+
+  const tileJson = {
+    tilejson: "2.2.0",
+    tiles: ["https://example.local/{z}/{x}/{y}.pbf"],
+    minzoom: 0,
+    maxzoom: 14,
+  };
+
+  beforeEach(async () => {
+    await given.setupMockBackedResponses();
+  });
+
+  test("uses the thunderforest token for a thunderforest source", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tile\.thunderforest\.com\/.*/,
+      response: tileJson,
+      alias: "thunderforest",
+    });
+
+    await when.setStyle("access_tokens");
+
+    const request = await when.waitForResponse("thunderforest");
+    expect(request.url()).toContain(`apikey=${tokens.thunderforest}`);
+  });
+
+  test("uses the locationiq token for a locationiq source", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tiles\.locationiq\.com\/.*/,
+      response: tileJson,
+      alias: "locationiq",
+    });
+
+    await when.setStyle("access_tokens");
+
+    const request = await when.waitForResponse("locationiq");
+    expect(request.url()).toContain(`key=${tokens.locationiq}`);
+  });
+
+  test("appends the stadia token as a query parameter", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tiles\.stadiamaps\.com\/.*/,
+      response: tileJson,
+      alias: "stadia",
+    });
+
+    await when.setStyle("access_tokens");
+
+    const request = await when.waitForResponse("stadia");
+    expect(request.url()).toContain("?api_key=stadia-test-token");
+  });
+});
@@ -0,0 +1,22 @@
+{
+  "version": 8,
+  "name": "Access token style",
+  "metadata": {
+    "maputnik:stadia_access_token": "stadia-test-token"
+  },
+  "sources": {
+    "thunderforest_transport": {
+      "type": "vector",
+      "url": "https://tile.thunderforest.com/thunderforest.transport-v2.json?apikey={key}"
+    },
+    "stadia_outdoors": {
+      "type": "vector",
+      "url": "https://tiles.stadiamaps.com/data/openmaptiles.json"
+    },
+    "locationiq": {
+      "type": "vector",
+      "url": "https://tiles.locationiq.com/v3/pbf/tiles.json?key={key}"
+    }
+  },
+  "layers": []
+}
@@ -25,7 +25,18 @@ describe("layer editor", () => {
    return id;
  }

-  test.skip("expand/collapse", () => {});
+  test("expand/collapse", async () => {
+    const bgId = await createBackground();
+    await when.click("layer-list-item:background:" + bgId);
+
+    await then(get.elementByTestId("layer-editor.layer-id.input")).shouldBeVisible();
+
+    await when.toggleGroupInLayerEditor("Layer");
+    await then(get.elementByTestId("layer-editor.layer-id.input")).shouldNotBeVisible();
+
+    await when.toggleGroupInLayerEditor("Layer");
+    await then(get.elementByTestId("layer-editor.layer-id.input")).shouldBeVisible();
+  });

  test("id", async () => {
    const bgId = await createBackground();
@@ -76,6 +87,14 @@ describe("layer editor", () => {
        layers: [{ id: "background:" + bgId, type: "background", minzoom: 1 }],
      });
    });
+
+    test("the range slider adjusts min-zoom", async () => {
+      await when.focus("min-zoom.input-range");
+      await when.typeKeys("{rightarrow}");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id: "background:" + bgId, type: "background", minzoom: 2 }],
+      });
+    });
  });

  describe("max-zoom", () => {
@@ -145,6 +164,13 @@ describe("layer editor", () => {
        layers: [{ id: "background:" + bgId, type: "background" }],
      });
    });
+
+    test("typing a hex value updates the paint color", async () => {
+      await when.setColorValue("background-color", "#ff0000");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id: "background:" + bgId, type: "background", paint: { "background-color": "#ff0000" } }],
+      });
+    });
  });

  describe("opacity", () => {
@@ -166,8 +192,287 @@ describe("layer editor", () => {
  });

  describe("filter", () => {
-    test.skip("expand/collapse", () => {});
-    test.skip("compound filter", () => {});
+    let id: string;
+
+    beforeEach(async () => {
+      id = await when.modal.fillLayers({ type: "fill", layer: "example" });
+      await when.addFilter();
+    });
+
+    test("should add a filter item", async () => {
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "fill", source: "example", filter: ["all", ["==", "name", ""]] }],
+      });
+    });
+
+    test("should change the filter operator", async () => {
+      await when.selectFilterOperator("!=");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, filter: ["all", ["!=", "name", ""]] }],
+      });
+    });
+
+    test("should extend the compound filter with a second item", async () => {
+      await when.addFilter();
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, filter: ["all", ["==", "name", ""], ["==", "name", ""]] }],
+      });
+    });
+
+    test("should change the combining operator", async () => {
+      await when.selectFilterCombiningOperator("any");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, filter: ["any", ["==", "name", ""]] }],
+      });
+    });
+
+    test("should delete a filter item", async () => {
+      await when.addFilter();
+      await when.deleteFilterItem();
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, filter: ["all", ["==", "name", ""]] }],
+      });
+    });
+
+    describe("when converted to an expression", () => {
+      beforeEach(async () => {
+        await when.convertFilterToExpression();
+      });
+
+      test("should migrate the filter to an expression", async () => {
+        // A single-item "all" collapses to the bare comparison when migrated.
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, filter: ["==", ["get", "name"], ""] }],
+        });
+      });
+
+      test("should restore the default filter when the expression is deleted", async () => {
+        await when.deleteFilterExpression();
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, filter: ["all"] }],
+        });
+      });
+    });
+  });
+
+  describe("functions", () => {
+    let id: string;
+
+    describe("zoom function", () => {
+      beforeEach(async () => {
+        id = await when.modal.fillLayers({ type: "circle", layer: "example" });
+        await when.makeZoomFunction("circle-radius");
+      });
+
+      test("should convert the property to a zoom function", async () => {
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            { id, type: "circle", source: "example", paint: { "circle-radius": { stops: [[6, 5], [10, 5]] } } },
+          ],
+        });
+      });
+
+      test("should add a stop", async () => {
+        await when.addFunctionStop("circle-radius");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": { stops: [[6, 5], [10, 5], [11, 5]] } } }],
+        });
+      });
+
+      test("should delete the first stop", async () => {
+        // A function needs more than two stops, otherwise deleting one collapses
+        // it back into a plain value.
+        await when.addFunctionStop("circle-radius");
+        await when.deleteFunctionStop("circle-radius");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": { stops: [[10, 5], [11, 5]] } } }],
+        });
+      });
+
+      test("should set the base", async () => {
+        await when.setFunctionBase("circle-radius", "2");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": { base: 2, stops: [[6, 5], [10, 5]] } } }],
+        });
+      });
+
+      test("should edit the zoom of a stop", async () => {
+        await when.setFunctionStopValue("circle-radius", "Zoom", 0, "3");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": { stops: [[3, 5], [10, 5]] } } }],
+        });
+      });
+
+      test("should edit the output value of a stop", async () => {
+        await when.setFunctionStopValue("circle-radius", "Output value", 0, "9");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": { stops: [[6, 9], [10, 5]] } } }],
+        });
+      });
+
+      test("should convert to an expression", async () => {
+        await when.makeExpression("circle-radius");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 5, 10, 5] } }],
+        });
+      });
+
+      describe("when converted to a data function", () => {
+        beforeEach(async () => {
+          // Any non-interpolate scale turns the zoom function into a data one.
+          await when.selectFunctionType("circle-radius", "categorical");
+        });
+
+        test("should carry the stops over as zoom/value pairs", async () => {
+          await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+            layers: [
+              {
+                id,
+                paint: {
+                  "circle-radius": {
+                    property: "",
+                    type: "exponential",
+                    stops: [[{ zoom: 6, value: 0 }, 5], [{ zoom: 10, value: 0 }, 5]],
+                  },
+                },
+              },
+            ],
+          });
+        });
+
+        test("should convert back to a zoom function", async () => {
+          await when.selectFunctionType("circle-radius", "interpolate");
+          await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+            layers: [{ id, paint: { "circle-radius": { stops: [[6, 5], [10, 5]] } } }],
+          });
+        });
+      });
+    });
+
+    describe("data function", () => {
+      beforeEach(async () => {
+        id = await when.modal.fillLayers({ type: "circle", layer: "example" });
+        await when.setValue("spec-field-input:circle-blur", "1");
+        await when.makeDataFunction("circle-blur");
+      });
+
+      test("should convert the property to a data function", async () => {
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id,
+              type: "circle",
+              source: "example",
+              paint: {
+                "circle-blur": {
+                  property: "",
+                  type: "exponential",
+                  stops: [[{ zoom: 6, value: 0 }, 1], [{ zoom: 10, value: 0 }, 1]],
+                },
+              },
+            },
+          ],
+        });
+      });
+
+      test("should add a stop", async () => {
+        await when.addFunctionStop("circle-blur");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id,
+              paint: {
+                "circle-blur": {
+                  stops: [[{ zoom: 6, value: 0 }, 1], [{ zoom: 10, value: 0 }, 1], [{ zoom: 11, value: 0 }, 1]],
+                },
+              },
+            },
+          ],
+        });
+      });
+
+      test("should delete the first stop", async () => {
+        await when.addFunctionStop("circle-blur");
+        await when.deleteFunctionStop("circle-blur");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id,
+              paint: {
+                "circle-blur": {
+                  stops: [[{ zoom: 10, value: 0 }, 1], [{ zoom: 11, value: 0 }, 1]],
+                },
+              },
+            },
+          ],
+        });
+      });
+
+      test("should set the property", async () => {
+        await when.setFunctionProperty("circle-blur", "myprop");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": { property: "myprop" } } }],
+        });
+      });
+
+      test("should set the default", async () => {
+        await when.setFunctionDefault("circle-blur", "0.5");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": { default: 0.5 } } }],
+        });
+      });
+
+      test("should edit the input value of a stop", async () => {
+        await when.setFunctionStopValue("circle-blur", "Input value", 0, "7");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id,
+              paint: {
+                "circle-blur": {
+                  stops: [[{ zoom: 6, value: 7 }, 1], [{ zoom: 10, value: 0 }, 1]],
+                },
+              },
+            },
+          ],
+        });
+      });
+
+      test("should change the function type", async () => {
+        await when.selectFunctionType("circle-blur", "categorical");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": { type: "categorical" } } }],
+        });
+      });
+    });
+
+    describe("expression", () => {
+      beforeEach(async () => {
+        id = await when.modal.fillLayers({ type: "circle", layer: "example" });
+        await when.setValue("spec-field-input:circle-blur", "1");
+        await when.makeExpression("circle-blur");
+      });
+
+      test("should wrap the property value in a literal expression", async () => {
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": ["literal", 1] } }],
+        });
+      });
+
+      test("should restore the plain value when reverted", async () => {
+        await when.undoExpression("circle-blur");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": 1 } }],
+        });
+      });
+
+      test("should fall back to the spec default when deleted", async () => {
+        await when.deleteExpression("circle-blur");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-blur": 0 } }],
+        });
+      });
+    });
  });

  describe("layout", () => {
@@ -183,10 +488,43 @@ describe("layer editor", () => {
  });

  describe("paint", () => {
-    test.skip("expand/collapse", () => {});
-    test.skip("color", () => {});
-    test.skip("pattern", () => {});
-    test.skip("opacity", () => {});
+    let id: string;
+
+    beforeEach(async () => {
+      id = await when.modal.fillLayers({ type: "fill", layer: "example" });
+    });
+
+    test("expand/collapse", async () => {
+      await then(get.elementByTestId("spec-field:fill-color")).shouldBeVisible();
+
+      await when.toggleGroupInLayerEditor("Paint properties");
+      await then(get.elementByTestId("spec-field:fill-color")).shouldNotBeVisible();
+
+      await when.toggleGroupInLayerEditor("Paint properties");
+      await then(get.elementByTestId("spec-field:fill-color")).shouldBeVisible();
+    });
+
+    test("color", async () => {
+      await when.setColorValue("fill-color", "#ff0000");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "fill", source: "example", paint: { "fill-color": "#ff0000" } }],
+      });
+    });
+
+    test("pattern", async () => {
+      await when.setStringValue("fill-pattern", "some-pattern");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "fill", source: "example", paint: { "fill-pattern": "some-pattern" } }],
+      });
+    });
+
+    test("opacity", async () => {
+      await when.setValue("spec-field-input:fill-opacity", "0.4");
+      await when.click("layer-editor.layer-id");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "fill", source: "example", paint: { "fill-opacity": 0.4 } }],
+      });
+    });
  });

  describe("json-editor", () => {
@@ -206,8 +544,28 @@ describe("layer editor", () => {
      await then(get.element(".cm-lint-marker-error")).shouldExist();
    });

-    test.skip("expand/collapse", () => {});
-    test.skip("modify", () => {});
+    test("expand/collapse", async () => {
+      const bgId = await createBackground();
+      await when.click("layer-list-item:background:" + bgId);
+
+      await then(get.element(".cm-content")).shouldBeVisible();
+
+      await when.toggleGroupInLayerEditor("JSON Editor");
+      await then(get.element(".cm-content")).shouldNotBeVisible();
+
+      await when.toggleGroupInLayerEditor("JSON Editor");
+      await then(get.element(".cm-content")).shouldBeVisible();
+    });
+
+    test("modify", async () => {
+      const bgId = await createBackground();
+      await when.click("layer-list-item:background:" + bgId);
+
+      await when.appendToJsonEditorLine('"background"', ',\n"minzoom": 5');
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id: "background:" + bgId, type: "background", minzoom: 5 }],
+      });
+    });

    test("parse error", async () => {
      const bgId = await createBackground();
@@ -97,7 +97,15 @@ describe("layers list", () => {
      });
    });

-    test.skip("modify", () => {});
+    test("modify", async () => {
+      const id = await when.modal.fillLayers({ type: "background" });
+      await when.click("layer-list-item:" + id);
+      await when.setValue("spec-field-input:background-opacity", "0.4");
+      await when.click("layer-editor.layer-id");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "background", paint: { "background-opacity": 0.4 } }],
+      });
+    });
  });

  describe("fill", () => {
@@ -108,8 +116,13 @@ describe("layers list", () => {
      });
    });

-    // TODO: Change source
-    test.skip("change source", () => {});
+    test("change source", async () => {
+      const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
+      await when.changeLayerSource("raster");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [{ id, type: "fill", source: "raster" }],
+      });
+    });
  });

  describe("line", () => {
@@ -38,6 +38,7 @@ export class MaputnikDriver {
        "example-style-with-fonts.json",
        "example-style-with-zoom-7-and-center-0-51.json",
        "example-style-with-zoom-5-and-center-50-50.json",
+        "access-token-style.json",
      ];
      for (const fixture of styleFixtures) {
        await this.helper.given.interceptAndMockResponse({
@@ -71,6 +72,7 @@ export class MaputnikDriver {
        | "rectangles"
        | "font"
        | "zoom_7_center_0_51"
+        | "access_tokens"
        | "",
      zoom?: number
    ) => {
@@ -82,6 +84,7 @@ export class MaputnikDriver {
        rectangles: "rectangles-style.json",
        font: "example-style-with-fonts.json",
        zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
+        access_tokens: "access-token-style.json",
      };

      const url = new URL(baseUrl);
@@ -107,7 +110,13 @@ export class MaputnikDriver {
    },

    chooseExampleFile: async () => {
-      await this.helper.when.openFileByFixture("example-style.json", "modal:open.dropzone", "modal:open.file.input");
+      await this.helper.when.openFileByFixture("example-style.json", "modal:open.dropzone");
+      await this.helper.when.wait(200);
+    },
+
+    /** Picks the example style through the browser's native file chooser. */
+    chooseExampleFileFromPicker: async () => {
+      await this.helper.when.chooseFileFromPicker("example-style.json", "modal:open.dropzone");
      await this.helper.when.wait(200);
    },

@@ -128,6 +137,22 @@ export class MaputnikDriver {
      await this.helper.get.element(".maputnik-layer-editor-group__button").nth(index).click();
    },

+    /** Expands/collapses a layer-editor group by its title, e.g. "Paint properties". */
+    toggleGroupInLayerEditor: async (title: string) => {
+      await this.helper.when.click("layer-editor-group:" + title);
+    },
+
+    /**
+     * Picks a source for the selected layer from the source autocomplete.
+     * The autocomplete is a controlled (downshift) input, so the value has to be
+     * filled rather than typed key by key, then chosen from the filtered menu.
+     */
+    changeLayerSource: async (sourceId: string) => {
+      const input = this.helper.get.elementByTestId("layer-editor.layer-source").locator("input");
+      await input.fill(sourceId);
+      await this.helper.get.element(".maputnik-autocomplete-menu-item").first().click();
+    },
+
    appendTextInJsonEditor: async (text: string) => {
      await this.helper.get.element(".cm-line").first().click();
      // Move to the very start of the document so the inserted text breaks the
@@ -158,6 +183,147 @@ export class MaputnikDriver {
      await this.helper.when.typeText(value);
    },

+    makeZoomFunction: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.scrollIntoViewIfNeeded();
+      await container.locator(".maputnik-make-zoom-function").last().click({ force: true });
+    },
+
+    makeDataFunction: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.scrollIntoViewIfNeeded();
+      await container.locator(".maputnik-make-data-function").click({ force: true });
+    },
+
+    addFunctionStop: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator(".maputnik-add-stop").first().click({ force: true });
+    },
+
+    deleteFunctionStop: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator(".maputnik-delete-stop").first().click({ force: true });
+    },
+
+    /** Turns the property into a raw style expression. */
+    makeExpression: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.scrollIntoViewIfNeeded();
+      // In the plain spec field the expression button shares the zoom-function
+      // class and comes first; inside a function editor it has its own test id.
+      const inFunctionEditor = container.locator("[data-wd-key='convert-to-expression']");
+      const button =
+        (await inFunctionEditor.count()) > 0
+          ? inFunctionEditor
+          : container.locator(".maputnik-make-zoom-function").first();
+      await button.click({ force: true });
+    },
+
+    /** Reverts an expression back to a plain value. */
+    undoExpression: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator("[data-wd-key='undo-expression']").click({ force: true });
+    },
+
+    /** Removes an expression, restoring the property's spec default. */
+    deleteExpression: async (fieldName: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator("[data-wd-key='delete-expression']").click({ force: true });
+    },
+
+    /** Picks the function scale (categorical/interval/exponential/identity/interpolate). */
+    selectFunctionType: async (fieldName: string, type: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator("[data-wd-key='function-type'] select").selectOption(type);
+    },
+
+    /** Sets the "Base" input of a zoom/data function. */
+    setFunctionBase: async (fieldName: string, value: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator("[data-wd-key='function-base'] input").fill(value);
+    },
+
+    /**
+     * Sets the data property a data function keys off of. This is an InputString,
+     * which only commits its value on blur, so typing alone is not enough.
+     */
+    setFunctionProperty: async (fieldName: string, value: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      const input = container.locator("[data-wd-key='function-property'] input");
+      await input.fill(value);
+      await input.blur();
+    },
+
+    /** Sets the fallback value used when a feature has no matching stop. */
+    setFunctionDefault: async (fieldName: string, value: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator("[data-wd-key='function-default'] input").fill(value);
+    },
+
+    /** Edits one cell of a function's stop table ("Zoom", "Input value" or "Output value"). */
+    setFunctionStopValue: async (fieldName: string, column: string, index: number, value: string) => {
+      const container = this.helper.get.elementByTestId("spec-field-container:" + fieldName);
+      await container.locator(`[aria-label="${column}"]`).nth(index).fill(value);
+    },
+
+    addFilter: async () => {
+      const button = this.helper.get.elementByTestId("layer-filter-button");
+      await button.scrollIntoViewIfNeeded();
+      await button.click({ force: true });
+    },
+
+    selectFilterOperator: async (value: string) => {
+      await this.helper.get.element(".maputnik-filter-editor-operator select").first().selectOption(value);
+    },
+
+    /** Chooses how the filter items combine: all / none / any. */
+    selectFilterCombiningOperator: async (value: string) => {
+      await this.helper.when.selectWithin("filter-combining-operator", value);
+    },
+
+    deleteFilterItem: async (index = 0) => {
+      await this.helper.get
+        .element(".maputnik-filter-editor-block-action .maputnik-icon-button")
+        .nth(index)
+        .click();
+    },
+
+    /** Converts the simple filter editor into a raw expression editor. */
+    convertFilterToExpression: async () => {
+      await this.helper.when.click("filter-convert-to-expression");
+    },
+
+    /**
+     * Deletes the filter expression, restoring the simple filter editor.
+     * The filter group precedes the paint group, so its button comes first.
+     */
+    deleteFilterExpression: async () => {
+      await this.helper.get.element("[data-wd-key='delete-expression']").first().click();
+    },
+
+    setColorValue: async (fieldName: string, value: string) => {
+      const input = this.helper.get.elementByTestId("spec-field:" + fieldName).locator(".maputnik-color");
+      await input.fill(value);
+    },
+
+    /** Sets a plain string spec field (e.g. a pattern), which has no dedicated input test id. */
+    setStringValue: async (fieldName: string, value: string) => {
+      const input = this.helper.get.elementByTestId("spec-field:" + fieldName).locator("input.maputnik-string");
+      await input.fill(value);
+      await input.blur();
+    },
+
+    /**
+     * Appends text to the end of the JSON editor line holding `lineText`.
+     * CodeMirror types over its own auto-inserted closing quotes/brackets, so a
+     * well-formed fragment stays well-formed.
+     */
+    appendToJsonEditorLine: async (lineText: string, text: string) => {
+      await this.helper.when.clickByText(lineText);
+      await this.helper.when.typeKeys("{end}");
+      await this.helper.when.typeText(text);
+    },
+
    waitForExampleFileResponse: () => this.helper.when.waitForResponse("example-style.json"),

    /** Fill localStorage until we get a QuotaExceededError. */
@@ -34,5 +34,45 @@ export class ModalDriver {
    close: async (key: string) => {
      await this.helper.when.click(key + ".close-modal");
    },
+
+    /**
+     * Adds a source of the given type from the sources modal, keeping whatever
+     * defaults that type's editor prefills.
+     */
+    addSource: async (sourceId: string, sourceType: string) => {
+      const { when } = this.helper;
+      await when.setValue("modal:sources.add.source_id", sourceId);
+      await when.select("modal:sources.add.source_type", sourceType);
+      await when.click("modal:sources.add.add_source");
+      await when.wait(200);
+    },
+
+    /** Adds one of the predefined public sources listed in the sources modal. */
+    addPublicSource: async (index = 0) => {
+      await this.helper.get.element(".maputnik-public-source-select").nth(index).click();
+    },
+
+    deleteFirstActiveSource: async () => {
+      await this.helper.get.element(".maputnik-active-source-type-editor-header-delete").first().click();
+    },
+
+    /** Fills one number box of a coordinate pair in the image/video source editor. */
+    setCoordinateValue: async (index: number, value: string) => {
+      const input = this.helper.get
+        .elementByTestId("modal:sources")
+        .locator(".maputnik-array input")
+        .nth(index);
+      await input.fill(value);
+      await input.blur();
+    },
+
+    exportCreateHtml: async () => {
+      await this.helper.get.element(".maputnik-modal-export-buttons button").last().click();
+    },
+
+    exportSaveStyle: async () => {
+      await this.helper.stubSaveFilePicker();
+      await this.helper.get.element(".maputnik-modal-export-buttons button").first().click();
+    },
  };
 }
@@ -43,6 +43,16 @@ describe("modals", () => {
        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.responseBody("example-style.json"));
      });
    });
+
+    describe("without the File System Access API", () => {
+      test("upload via the file chooser", async () => {
+        await given.noFileSystemAccessApi();
+        await when.setStyle("");
+        await when.click("nav:open");
+        await when.chooseExampleFileFromPicker();
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
+      });
+    });
  });

  describe("shortcuts", () => {
@@ -64,8 +74,15 @@ describe("modals", () => {
      await then(get.elementByTestId("modal:export")).shouldNotExist();
    });

-    // TODO: Work out how to download a file and check the contents
-    test.skip("download", () => {});
+    test("download HTML and save the style", async () => {
+      // Generate the standalone HTML export (triggers a file download).
+      await when.modal.exportCreateHtml();
+      await then(get.elementByTestId("modal:export")).shouldExist();
+
+      // Saving the style closes the export modal.
+      await when.modal.exportSaveStyle();
+      await then(get.elementByTestId("modal:export")).shouldNotExist();
+    });
  });

  describe("sources", () => {
@@ -74,8 +91,27 @@ describe("modals", () => {
      await when.click("nav:sources");
    });

-    test.skip("active sources", () => {});
-    test.skip("public source", () => {});
+    test("active sources are listed and can be deleted", async () => {
+      await when.setStyle("both");
+      await when.click("nav:sources");
+      const before = Object.keys(get.fixture("geojson-raster-style.json").sources).length;
+      await when.modal.deleteFirstActiveSource();
+      await then(
+        get.styleFromLocalStorage().then((style) => Object.keys(style.sources).length)
+      ).shouldEqual(before - 1);
+    });
+
+    test("public source", async () => {
+      await when.modal.addPublicSource();
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          openmaptiles: {
+            type: "vector",
+            url: `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`,
+          },
+        },
+      });
+    });

    test("add new source", async () => {
      const sourceId = "n1z2v3r";
@@ -84,8 +120,8 @@ describe("modals", () => {
      await when.select("modal:sources.add.scheme_type", "tms");
      await when.click("modal:sources.add.add_source");
      await when.wait(200);
-      await then(get.styleFromLocalStorage().then((style) => style.sources[sourceId])).shouldInclude({
-        scheme: "tms",
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: { [sourceId]: { scheme: "tms" } },
      });
    });

@@ -118,8 +154,110 @@ describe("modals", () => {
      await when.setValue("modal:sources.add.tile_size", "128");
      await when.click("modal:sources.add.add_source");
      await when.wait(200);
-      await then(get.styleFromLocalStorage().then((style) => style.sources[sourceId])).shouldInclude({
-        tileSize: 128,
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: { [sourceId]: { tileSize: 128 } },
+      });
+    });
+
+    test("add new geojson url source", async () => {
+      await when.modal.addSource("geojsonurl", "geojson_url");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          geojsonurl: { type: "geojson", data: "http://localhost:3000/geojson.json" },
+        },
+      });
+    });
+
+    test("add new geojson json source", async () => {
+      await when.modal.addSource("geojsonjson", "geojson_json");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          geojsonjson: { type: "geojson", cluster: false, data: "" },
+        },
+      });
+    });
+
+    test("add new tilejson vector source", async () => {
+      await when.modal.addSource("tilejsonvector", "tilejson_vector");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          tilejsonvector: { type: "vector", url: "http://localhost:3000/tilejson.json" },
+        },
+      });
+    });
+
+    test("add new tilejson raster source", async () => {
+      await when.modal.addSource("tilejsonraster", "tilejson_raster");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          tilejsonraster: { type: "raster", url: "http://localhost:3000/tilejson.json" },
+        },
+      });
+    });
+
+    test("add new tilejson raster-dem source", async () => {
+      await when.modal.addSource("tilejsonrasterdem", "tilejson_raster-dem");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          tilejsonrasterdem: { type: "raster-dem", url: "http://localhost:3000/tilejson.json" },
+        },
+      });
+    });
+
+    test("add new tile xyz raster-dem source", async () => {
+      await when.modal.addSource("tilexyzrasterdem", "tilexyz_raster-dem");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          tilexyzrasterdem: {
+            type: "raster-dem",
+            tiles: ["http://localhost:3000/{x}/{y}/{z}.png"],
+            minzoom: 0,
+            maxzoom: 14,
+            tileSize: 512,
+          },
+        },
+      });
+    });
+
+    test("add new image source", async () => {
+      await when.modal.addSource("imagesource", "image");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          imagesource: {
+            type: "image",
+            url: "http://localhost:3000/image.png",
+            coordinates: [[0, 0], [0, 0], [0, 0], [0, 0]],
+          },
+        },
+      });
+    });
+
+    test("add new video source", async () => {
+      await when.modal.addSource("videosource", "video");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          videosource: {
+            type: "video",
+            urls: ["http://localhost:3000/movie.mp4"],
+            coordinates: [[0, 0], [0, 0], [0, 0], [0, 0]],
+          },
+        },
+      });
+    });
+
+    test("edit the corner coordinates of an image source", async () => {
+      const sourceId = "imagecoords";
+      await when.setValue("modal:sources.add.source_id", sourceId);
+      await when.select("modal:sources.add.source_type", "image");
+      // The first corner is the first two number boxes of the coordinate arrays.
+      await when.modal.setCoordinateValue(0, "1");
+      await when.modal.setCoordinateValue(1, "2");
+      await when.click("modal:sources.add.add_source");
+      await when.wait(200);
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          [sourceId]: { type: "image", coordinates: [[1, 2], [0, 0], [0, 0], [0, 0]] },
+        },
      });
    });
  });
@@ -204,8 +342,8 @@ describe("modals", () => {
      const apiKey = "testing123";
      await when.setValue("modal:settings.maputnik:openmaptiles_access_token", apiKey);
      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage().then((style) => style.metadata)).shouldInclude({
-        "maputnik:openmaptiles_access_token": apiKey,
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:openmaptiles_access_token": apiKey },
      });
    });

@@ -213,8 +351,8 @@ describe("modals", () => {
      const apiKey = "testing123";
      await when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage().then((style) => style.metadata)).shouldInclude({
-        "maputnik:thunderforest_access_token": apiKey,
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:thunderforest_access_token": apiKey },
      });
    });

@@ -222,8 +360,8 @@ describe("modals", () => {
      const apiKey = "testing123";
      await when.setValue("modal:settings.maputnik:stadia_access_token", apiKey);
      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage().then((style) => style.metadata)).shouldInclude({
-        "maputnik:stadia_access_token": apiKey,
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:stadia_access_token": apiKey },
      });
    });

@@ -231,29 +369,67 @@ describe("modals", () => {
      const apiKey = "testing123";
      await when.setValue("modal:settings.maputnik:locationiq_access_token", apiKey);
      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage().then((style) => style.metadata)).shouldInclude({
-        "maputnik:locationiq_access_token": apiKey,
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:locationiq_access_token": apiKey },
+      });
+    });
+
+    test("map view defaults", async () => {
+      await when.setValue("modal:settings.zoom", "4");
+      await when.setValue("modal:settings.bearing", "12");
+      await when.setValue("modal:settings.pitch", "30");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        zoom: 4,
+        bearing: 12,
+        pitch: 30,
+      });
+    });
+
+    test("light intensity", async () => {
+      await when.setValue("modal:settings.light-intensity", "0.7");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        light: { intensity: 0.7 },
+      });
+    });
+
+    test("terrain source and exaggeration", async () => {
+      await when.setValue("modal:settings.maputnik:terrain_source", "terrain");
+      await when.setValue("modal:settings.terrain-exaggeration", "1.5");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        terrain: { source: "terrain", exaggeration: 1.5 },
+      });
+    });
+
+    test("transition delay and duration", async () => {
+      await when.setValue("modal:settings.transition-delay", "100");
+      await when.setValue("modal:settings.transition-duration", "500");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        transition: { delay: 100, duration: 500 },
      });
    });

    test("style projection mercator", async () => {
      await when.select("modal:settings.projection", "mercator");
-      await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
-        type: "mercator",
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        projection: { type: "mercator" },
      });
    });

    test("style projection globe", async () => {
      await when.select("modal:settings.projection", "globe");
-      await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
-        type: "globe",
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        projection: { type: "globe" },
      });
    });

    test("style projection vertical-perspective", async () => {
      await when.select("modal:settings.projection", "vertical-perspective");
-      await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
-        type: "vertical-perspective",
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        projection: { type: "vertical-perspective" },
      });
    });

@@ -311,10 +487,6 @@ describe("modals", () => {
    });
  });

-  describe("sources placeholder", () => {
-    test.skip("toggle", () => {});
-  });
-
  describe("global state", () => {
    beforeEach(async () => {
      await when.click("nav:global-state");
@@ -62,11 +62,12 @@ function isLocator(target: unknown): target is Locator {
  );
 }

-/** Asserts that every top-level key in `expected` deep-equals its counterpart in `actual`. */
-function assertDeepNestedInclude(actual: any, expected: Record<string, unknown>): void {
-  for (const key of Object.keys(expected)) {
-    expect(actual?.[key], `property "${key}"`).toEqual(expected[key]);
-  }
+/**
+ * Asserts that `actual` recursively contains everything in `expected`: nested
+ * objects are matched as subsets, while arrays and primitives must match exactly.
+ */
+function assertDeepNestedInclude(actual: any, expected: Record<string, unknown> | unknown[]): void {
+  expect(actual).toMatchObject(expected);
 }

 /**
@@ -130,7 +131,7 @@ export class Assertable<T> {
      }
    });

-  shouldDeepNestedInclude = (value: Record<string, unknown>) =>
+  shouldDeepNestedInclude = (value: Record<string, unknown> | unknown[]) =>
    this.assertValue((actual) => assertDeepNestedInclude(actual, value));
 }

@@ -144,6 +145,8 @@ async function typeSequence(page: Page, text: string): Promise<void> {
    del: "Delete",
    tab: "Tab",
    home: "Home",
+    end: "End",
+    rightarrow: "ArrowRight",
  };

  for (let i = 0; i < tokens.length; i++) {
@@ -202,10 +205,31 @@ export class PlaywrightHelper {
    return new Query<T>(getter);
  }

+  /** Stubs the File System Access "save" picker so file saves complete headlessly. */
+  public stubSaveFilePicker(): Promise<void> {
+    return this.page.evaluate(() => {
+      (window as any).showSaveFilePicker = async () => ({
+        createWritable: async () => ({ write: async () => {}, close: async () => {} }),
+      });
+    });
+  }
+
  /** Entry point for fluent assertions over a Locator or a value/Query. */
  public then = <T>(target: T): Assertable<T> => new Assertable(target);

  public given = {
+    /**
+     * Removes the File System Access API so the app falls back to a plain
+     * <input type="file">, the way Firefox and Safari behave. Must be called
+     * before the page under test is loaded.
+     */
+    noFileSystemAccessApi: async () => {
+      await this.page.addInitScript(() => {
+        delete (window as any).showOpenFilePicker;
+        delete (window as any).showSaveFilePicker;
+      });
+    },
+
    intercept: async (pattern: RegExp, alias: string, _method = "GET") => {
      this.recordedRequests.set(alias, []);
      await this.page.route(pattern, (route) => {
@@ -333,23 +357,38 @@ export class PlaywrightHelper {
      await this.page.mouse.up();
    },

-    openFileByFixture: async (fixture: string, buttonTestId: string, inputTestId: string) => {
+    /**
+     * Opens a fixture through the File System Access API, which raises no
+     * "filechooser" event and so has to be stubbed. For the <input type="file">
+     * fallback that browsers without the API use, see chooseFileFromPicker.
+     */
+    openFileByFixture: async (fixture: string, buttonTestId: string) => {
      const content = JSON.stringify(this.readFixture(fixture));
-      const hasPicker = await this.page.evaluate(() => "showOpenFilePicker" in window);
-      if (hasPicker) {
-        await this.page.evaluate((fileContent) => {
-          (window as any).showOpenFilePicker = async () => [
-            { getFile: async () => ({ text: async () => fileContent }) },
-          ];
-        }, content);
-        await this.testId(buttonTestId).click();
-      } else {
-        await this.testId(inputTestId).setInputFiles({
-          name: fixture,
-          mimeType: "application/json",
-          buffer: Buffer.from(content),
-        });
-      }
+      await this.page.evaluate((fileContent) => {
+        (window as any).showOpenFilePicker = async () => [
+          { getFile: async () => ({ text: async () => fileContent }) },
+        ];
+      }, content);
+      await this.testId(buttonTestId).click();
+    },
+
+    /**
+     * Clicks a control that opens the browser's native file chooser and answers
+     * it with a fixture. Only works on the <input type="file"> path — the File
+     * System Access API does not raise a "filechooser" event, so pair this with
+     * given.noFileSystemAccessApi().
+     */
+    chooseFileFromPicker: async (fixture: string, triggerTestId: string) => {
+      const content = JSON.stringify(this.readFixture(fixture));
+      const [fileChooser] = await Promise.all([
+        this.page.waitForEvent("filechooser"),
+        this.testId(triggerTestId).click(),
+      ]);
+      await fileChooser.setFiles({
+        name: fixture,
+        mimeType: "application/json",
+        buffer: Buffer.from(content),
+      });
    },

    dropFileByFixture: async (fixture: string, dropzoneTestId: string) => {
@@ -34,7 +34,9 @@ export default defineConfig({
  rules: {
    "react-refresh/only-export-components": [
      "warn",
-      { allowConstantExport: true }
+      // Many components are exported as withTranslation()(Component); without
+      // this the rule cannot tell the HOC's result is still a component.
+      { allowConstantExport: true, extraHOCs: ["withTranslation"] }
    ],
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": [
@@ -37,7 +37,7 @@
    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
    "@maplibre/maplibre-gl-geocoder": "^1.9.4",
    "@maplibre/maplibre-gl-inspect": "^1.8.2",
-    "@maplibre/maplibre-gl-style-spec": "^25.0.2",
+    "@maplibre/maplibre-gl-style-spec": "^26.1.0",
    "array-move": "^4.0.0",
    "buffer": "^6.0.3",
    "classnames": "^2.5.1",
@@ -47,7 +47,7 @@
    "downshift": "^9.4.0",
    "events": "^3.3.0",
    "file-saver": "^2.0.5",
-    "i18next": "^26.3.4",
+    "i18next": "^26.3.6",
    "i18next-browser-languagedetector": "^8.2.1",
    "i18next-resources-to-backend": "^1.2.1",
    "json-stringify-pretty-compact": "^4.0.0",
@@ -72,7 +72,7 @@
    "react-collapse": "^5.1.1",
    "react-color": "^2.19.3",
    "react-dom": "^19.2.7",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.10",
    "react-icons": "^5.7.0",
    "react-markdown": "^10.1.0",
    "reconnecting-websocket": "^4.4.0",
@@ -123,31 +123,28 @@
    "@types/react-dom": "^19.2.3",
    "@types/string-hash": "^1.1.3",
    "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "5.2",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitejs/plugin-react": "6.0",
    "@vitest/coverage-v8": "^4.1.10",
    "cors": "^2.8.6",
-    "eslint": "^10.6.0",
+    "eslint": "^10.7.0",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.3",
-    "i18next-cli": "^1.65.0",
+    "i18next-cli": "^1.66.2",
    "istanbul": "^0.4.5",
    "istanbul-lib-coverage": "^3.2.2",
    "nyc": "^18.0.0",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.20",
    "react-hot-loader": "^4.13.1",
    "sass": "^1.101.0",
-    "stylelint": "^17.14.0",
+    "stylelint": "^17.14.1",
    "stylelint-config-recommended-scss": "^17.0.1",
    "stylelint-scss": "^7.2.0",
    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
+    "typescript-eslint": "^8.64.0",
    "uuid": "^14.0.1",
    "vite": "^7.3.2",
    "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.10",
-    "vitest-browser-react": "^2.2.0"
+    "vitest": "^4.1.10"
  }
 }
@@ -11,29 +11,29 @@ import {type Map, type LayerSpecification, type StyleSpecification, type Validat
 import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";

-import MapMaplibreGl from "./MapMaplibreGl";
-import MapOpenLayers from "./MapOpenLayers";
-import CodeEditor from "./CodeEditor";
-import LayerList from "./LayerList";
-import LayerEditor from "./LayerEditor";
-import AppToolbar, { type MapState } from "./AppToolbar";
-import AppLayout from "./AppLayout";
-import MessagePanel from "./AppMessagePanel";
+import { MapMaplibreGl } from "./MapMaplibreGl";
+import { MapOpenLayers } from "./MapOpenLayers";
+import { CodeEditor } from "./CodeEditor";
+import { LayerList } from "./LayerList";
+import { LayerEditor } from "./LayerEditor";
+import { AppToolbar, type MapState } from "./AppToolbar";
+import { AppLayout } from "./AppLayout";
+import { AppMessagePanel as MessagePanel } from "./AppMessagePanel";

-import ModalSettings from "./modals/ModalSettings";
-import ModalExport from "./modals/ModalExport";
-import ModalSources from "./modals/ModalSources";
-import ModalOpen from "./modals/ModalOpen";
-import ModalShortcuts from "./modals/ModalShortcuts";
-import ModalDebug from "./modals/ModalDebug";
-import ModalGlobalState from "./modals/ModalGlobalState";
+import { ModalSettings } from "./modals/ModalSettings";
+import { ModalExport } from "./modals/ModalExport";
+import { ModalSources } from "./modals/ModalSources";
+import { ModalOpen } from "./modals/ModalOpen";
+import { ModalShortcuts } from "./modals/ModalShortcuts";
+import { ModalDebug } from "./modals/ModalDebug";
+import { ModalGlobalState } from "./modals/ModalGlobalState";

 import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
-import style from "../libs/style";
+import { emptyStyle, getAccessToken, replaceAccessTokens } from "../libs/style";
 import { undoMessages, redoMessages } from "../libs/diffmessage";
 import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory";
 import { RevisionStore } from "../libs/revisions";
-import LayerWatcher from "../libs/layerwatcher";
+import { LayerWatcher } from "../libs/layerwatcher";
 import tokens from "../config/tokens.json";
 import isEqual from "lodash.isequal";
 import { type MapOptions } from "maplibre-gl";
@@ -48,19 +48,19 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
  const matchesThunderforest = url.match(/\.thunderforest\.com/);
  const matchesLocationIQ = url.match(/\.locationiq\.com/);
  if (matchesTilehosting || matchesMaptiler) {
-    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
    if (accessToken) {
      return url.replace("{key}", accessToken);
    }
  }
  else if (matchesThunderforest) {
-    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("thunderforest", mapStyle, {allowFallback: true});
    if (accessToken) {
      return url.replace("{key}", accessToken);
    }
  }
  else if (matchesLocationIQ) {
-    const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("locationiq", mapStyle, {allowFallback: true});
    if (accessToken) {
      return url.replace("{key}", accessToken);
    }
@@ -123,7 +123,7 @@ type AppState = {
  fileHandle: FileSystemFileHandle | null
 };

-export default class App extends React.Component<any, AppState> {
+export class App extends React.Component<any, AppState> {
  revisionStore: RevisionStore;
  styleStore: IStyleStore | null = null;
  layerWatcher: LayerWatcher;
@@ -137,7 +137,7 @@ export default class App extends React.Component<any, AppState> {
    this.state = {
      errors: [],
      infos: [],
-      mapStyle: style.emptyStyle,
+      mapStyle: emptyStyle,
      selectedLayerIndex: 0,
      sources: {},
      vectorLayers: {},
@@ -698,7 +698,7 @@ export default class App extends React.Component<any, AppState> {
      mapStyle: (dirtyMapStyle || mapStyle),
      mapView: this.state.mapView,
      replaceAccessTokens: (mapStyle: StyleSpecification) => {
-        return style.replaceAccessTokens(mapStyle, {
+        return replaceAccessTokens(mapStyle, {
          allowFallback: true
        });
      },
@@ -1,5 +1,5 @@
 import React from "react";
-import ScrollContainer from "./ScrollContainer";
+import { ScrollContainer } from "./ScrollContainer";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { IconContext } from "react-icons";

@@ -50,5 +50,4 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
  }
 }

-const AppLayout = withTranslation()(AppLayoutInternal);
-export default AppLayout;
+export const AppLayout = withTranslation()(AppLayoutInternal);
@@ -61,5 +61,4 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
  }
 }

-const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
-export default AppMessagePanel;
+export const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
@@ -306,5 +306,4 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
  }
 }

-const AppToolbar = withTranslation()(AppToolbarInternal);
-export default AppToolbar;
+export const AppToolbar = withTranslation()(AppToolbarInternal);
@@ -1,7 +1,7 @@
 import React, {type CSSProperties, type PropsWithChildren, type SyntheticEvent} from "react";
 import classnames from "classnames";
-import FieldDocLabel from "./FieldDocLabel";
-import Doc from "./Doc";
+import { FieldDocLabel } from "./FieldDocLabel";
+import { Doc } from "./Doc";

 export type BlockProps = PropsWithChildren & {
  "data-wd-key"?: string
@@ -19,7 +19,7 @@ type BlockState = {
 };

 /** Wrap a component with a label */
-export default class Block extends React.Component<BlockProps, BlockState> {
+export class Block extends React.Component<BlockProps, BlockState> {
  _blockEl: HTMLDivElement | null = null;

  constructor (props: BlockProps) {
@@ -1,4 +1,4 @@
-import InputJson from "./InputJson";
+import { InputJson } from "./InputJson";
 import React from "react";
 import { withTranslation, type WithTranslation } from "react-i18next";
 import { type StyleSpecification } from "maplibre-gl";
@@ -24,6 +24,4 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
  </>;
 };

-const CodeEditor = withTranslation()(CodeEditorInternal);
-
-export default CodeEditor;
+export const CodeEditor = withTranslation()(CodeEditorInternal);
@@ -9,7 +9,7 @@ type CollapseProps = {
 };


-export default class Collapse extends React.Component<CollapseProps> {
+export class Collapse extends React.Component<CollapseProps> {
  static defaultProps = {
    isActive: true
  };
@@ -6,7 +6,7 @@ type CollapserProps = {
  style?: object
 };

-export default class Collapser extends React.Component<CollapserProps> {
+export class Collapser extends React.Component<CollapserProps> {
  render() {
    const iconStyle = {
      width: 20,
@@ -3,19 +3,19 @@ import {PiListPlusBold} from "react-icons/pi";
 import {TbMathFunction} from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";

-import InputButton from "./InputButton";
-import InputSpec from "./InputSpec";
-import InputNumber from "./InputNumber";
-import InputString from "./InputString";
-import InputSelect from "./InputSelect";
-import Block from "./Block";
-import docUid from "../libs/document-uid";
-import sortNumerically from "../libs/sort-numerically";
+import { InputButton } from "./InputButton";
+import { InputSpec } from "./InputSpec";
+import { InputNumber } from "./InputNumber";
+import { InputString } from "./InputString";
+import { InputSelect } from "./InputSelect";
+import { Block } from "./Block";
+import { generateUniqueId as docUid } from "../libs/document-uid";
+import { sortNumerically } from "../libs/sort-numerically";
 import {findDefaultFromSpec} from "../libs/spec-helper";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import labelFromFieldName from "../libs/label-from-field-name";
-import DeleteStopButton from "./_DeleteStopButton";
+import { labelFromFieldName } from "../libs/label-from-field-name";
+import { DeleteStopButton } from "./DeleteStopButton";
 import { type MappedLayerErrors } from "../libs/definitions";


@@ -289,6 +289,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
          <Block
            label={t("Function")}
            key="function"
+            data-wd-key="function-type"
          >
            <div className="maputnik-data-spec-property-input">
              <InputSelect
@@ -303,6 +304,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
            <Block
              label={t("Base")}
              key="base"
+              data-wd-key="function-base"
            >
              <div className="maputnik-data-spec-property-input">
                <InputSpec
@@ -317,6 +319,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
          <Block
            label={"Property"}
            key="property"
+            data-wd-key="function-property"
          >
            <div className="maputnik-data-spec-property-input">
              <InputString
@@ -330,6 +333,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
            <Block
              label={t("Default")}
              key="default"
+              data-wd-key="function-default"
            >
              <InputSpec
                fieldName={this.props.fieldName}
@@ -368,6 +372,7 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
            }
            <InputButton
              className="maputnik-add-stop"
+              data-wd-key="convert-to-expression"
              onClick={this.props.onExpressionClick?.bind(this)}
            >
              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
@@ -380,5 +385,4 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
  }
 }

-const DataProperty = withTranslation()(DataPropertyInternal);
-export default DataProperty;
+export const DataProperty = withTranslation()(DataPropertyInternal);
@@ -1,6 +1,6 @@
 import React from "react";

-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";

@@ -23,5 +23,4 @@ class DeleteStopButtonInternal extends React.Component<DeleteStopButtonInternalP
  }
 }

-const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);
-export default DeleteStopButton;
+export const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);
@@ -23,7 +23,7 @@ type DocProps = {
  }
 };

-export default class Doc extends React.Component<DocProps> {
+export class Doc extends React.Component<DocProps> {
  render () {
    const {fieldSpec} = this.props;

@@ -2,10 +2,10 @@ import React from "react";
 import {MdDelete, MdUndo} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import Block from "./Block";
-import InputButton from "./InputButton";
-import labelFromFieldName from "../libs/label-from-field-name";
-import FieldJson from "./FieldJson";
+import { Block } from "./Block";
+import { InputButton } from "./InputButton";
+import { labelFromFieldName } from "../libs/label-from-field-name";
+import { FieldJson } from "./FieldJson";
 import type { StylePropertySpecification } from "maplibre-gl";
 import { type MappedLayerErrors } from "../libs/definitions";

@@ -50,6 +50,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
            onClick={this.props.onUndo}
            disabled={undoDisabled}
            className="maputnik-delete-stop"
+            data-wd-key="undo-expression"
            title={t("Revert from expression")}
          >
            <MdUndo />
@@ -59,6 +60,7 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
          key="delete_action"
          onClick={this.props.onDelete}
          className="maputnik-delete-stop"
+          data-wd-key="delete-expression"
          title={t("Delete expression")}
        >
          <MdDelete />
@@ -90,5 +92,4 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
  }
 }

-const ExpressionProperty = withTranslation()(ExpressionPropertyInternal);
-export default ExpressionProperty;
+export const ExpressionProperty = withTranslation()(ExpressionPropertyInternal);
@@ -1,5 +1,5 @@
-import InputArray, { type InputArrayProps } from "./InputArray";
-import Fieldset from "./Fieldset";
+import { InputArray, type InputArrayProps } from "./InputArray";
+import { Fieldset } from "./Fieldset";

 type FieldArrayProps = InputArrayProps & {
  name?: string
@@ -8,12 +8,10 @@ type FieldArrayProps = InputArrayProps & {
  }
 };

-const FieldArray: React.FC<FieldArrayProps> = (props) => {
+export const FieldArray: React.FC<FieldArrayProps> = (props) => {
  return (
    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
      <InputArray {...props} />
    </Fieldset>
  );
 };
-
-export default FieldArray;
@@ -1,5 +1,5 @@
-import Block from "./Block";
-import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
+import { Block } from "./Block";
+import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";


 type FieldAutocompleteProps = InputAutocompleteProps & {
@@ -7,12 +7,10 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };


-const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
+export const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
  return (
    <Block label={props.label}>
      <InputAutocomplete {...props} />
    </Block>
  );
 };
-
-export default FieldAutocomplete;
@@ -1,5 +1,5 @@
-import Block from "./Block";
-import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox";
+import { Block } from "./Block";
+import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";


 type FieldCheckboxProps = InputCheckboxProps & {
@@ -7,12 +7,10 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };


-const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
+export const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
  return (
    <Block label={props.label}>
      <InputCheckbox {...props} />
    </Block>
  );
 };
-
-export default FieldCheckbox;
@@ -1,5 +1,5 @@
-import Block from "./Block";
-import InputColor, {type InputColorProps} from "./InputColor";
+import { Block } from "./Block";
+import { InputColor, type InputColorProps } from "./InputColor";


 type FieldColorProps = InputColorProps & {
@@ -10,12 +10,10 @@ type FieldColorProps = InputColorProps & {
 };


-const FieldColor: React.FC<FieldColorProps> = (props) => {
+export const FieldColor: React.FC<FieldColorProps> = (props) => {
  return (
    <Block label={props.label} fieldSpec={props.fieldSpec}>
      <InputColor {...props} />
    </Block>
  );
 };
-
-export default FieldColor;
@@ -1,7 +1,7 @@
 import React from "react";

-import Block from "./Block";
-import InputString from "./InputString";
+import { Block } from "./Block";
+import { InputString } from "./InputString";
 import { type WithTranslation, withTranslation } from "react-i18next";

 type FieldCommentInternalProps = {
@@ -36,5 +36,4 @@ const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
  );
 };

-const FieldComment = withTranslation()(FieldCommentInternal);
-export default FieldComment;
+export const FieldComment = withTranslation()(FieldCommentInternal);
@@ -10,7 +10,7 @@ type FieldDocLabelProps = {
 };


-const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
+export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
  const [open, setOpen] = React.useState(false);

  const onToggleDoc = (state: boolean) => {
@@ -49,5 +49,3 @@ const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
  }
  return <div />;
 };
-
-export default FieldDocLabel;
@@ -1,16 +1,17 @@
-import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray";
-import Fieldset from "./Fieldset";
+import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
+import { Fieldset } from "./Fieldset";

 type FieldDynamicArrayProps = InputDynamicArrayProps & {
-  name?: string
+  name?: string;
+  fieldSpec?: {
+    value?: string;
+  }
 };

-const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
+export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
  return (
    <Fieldset label={props.label}>
      <InputDynamicArray {...props} />
    </Fieldset>
  );
 };
-
-export default FieldDynamicArray;
@@ -1,5 +1,5 @@
-import InputEnum, {type InputEnumProps} from "./InputEnum";
-import Fieldset from "./Fieldset";
+import { InputEnum, type InputEnumProps } from "./InputEnum";
+import { Fieldset } from "./Fieldset";


 type FieldEnumProps = InputEnumProps & {
@@ -10,12 +10,10 @@ type FieldEnumProps = InputEnumProps & {
 };


-const FieldEnum: React.FC<FieldEnumProps> = (props) => {
+export const FieldEnum: React.FC<FieldEnumProps> = (props) => {
  return (
    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
      <InputEnum {...props} />
    </Fieldset>
  );
 };
-
-export default FieldEnum;
@@ -1,9 +1,9 @@
 import React from "react";

-import SpecProperty from "./_SpecProperty";
-import DataProperty, { type Stop } from "./_DataProperty";
-import ZoomProperty from "./_ZoomProperty";
-import ExpressionProperty from "./_ExpressionProperty";
+import { SpecProperty } from "./SpecProperty";
+import { DataProperty, type Stop } from "./DataProperty";
+import { ZoomProperty } from "./ZoomProperty";
+import { ExpressionProperty } from "./ExpressionProperty";
 import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec";
 import {findDefaultFromSpec} from "../libs/spec-helper";
 import { type MappedLayerErrors } from "../libs/definitions";
@@ -128,7 +128,7 @@ type FieldFunctionProps = {
 /** Supports displaying spec field for zoom function objects
 * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
 */
-const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
+export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
  const [dataType, setDataType] = React.useState(
    getDataType(props.value, props.fieldSpec)
  );
@@ -402,5 +402,3 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
    </div>
  );
 };
-
-export default FieldFunction;
@@ -1,7 +1,7 @@

 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
-import InputString from "./InputString";
+import { Block } from "./Block";
+import { InputString } from "./InputString";

 type FieldIdProps = {
  value: string
@@ -10,7 +10,7 @@ type FieldIdProps = {
  error?: {message: string}
 };

-const FieldId: React.FC<FieldIdProps> = (props) => {
+export const FieldId: React.FC<FieldIdProps> = (props) => {
  return (
    <Block label="ID" fieldSpec={latest.layer.id}
      data-wd-key={props.wdKey}
@@ -24,5 +24,3 @@ const FieldId: React.FC<FieldIdProps> = (props) => {
    </Block>
  );
 };
-
-export default FieldId;
@@ -1,11 +1,9 @@
-import InputJson, {type InputJsonProps} from "./InputJson";
+import { InputJson, type InputJsonProps } from "./InputJson";


 type FieldJsonProps = InputJsonProps & {};


-const FieldJson: React.FC<FieldJsonProps> = (props) => {
+export const FieldJson: React.FC<FieldJsonProps> = (props) => {
  return <InputJson {...props} />;
 };
-
-export default FieldJson;
@@ -1,8 +1,8 @@
 import React from "react";

 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
-import InputNumber from "./InputNumber";
+import { Block } from "./Block";
+import { InputNumber } from "./InputNumber";
 import { type WithTranslation, withTranslation } from "react-i18next";

 type FieldMaxZoomInternalProps = {
@@ -31,5 +31,4 @@ const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
  );
 };

-const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
-export default FieldMaxZoom;
+export const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
@@ -1,8 +1,8 @@
 import React from "react";

 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
-import InputNumber from "./InputNumber";
+import { Block } from "./Block";
+import { InputNumber } from "./InputNumber";
 import { type WithTranslation, withTranslation } from "react-i18next";

 type FieldMinZoomInternalProps = {
@@ -31,5 +31,4 @@ const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
  );
 };

-const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
-export default FieldMinZoom;
+export const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
@@ -1,5 +1,5 @@
-import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput";
-import Fieldset from "./Fieldset";
+import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput";
+import { Fieldset } from "./Fieldset";


 type FieldMultiInputProps = InputMultiInputProps & {
@@ -7,12 +7,10 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };


-const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
+export const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
  return (
    <Fieldset label={props.label}>
      <InputMultiInput {...props} />
    </Fieldset>
  );
 };
-
-export default FieldMultiInput;
@@ -1,5 +1,5 @@
-import InputNumber, {type InputNumberProps} from "./InputNumber";
-import Block from "./Block";
+import { InputNumber, type InputNumberProps } from "./InputNumber";
+import { Block } from "./Block";


 type FieldNumberProps = InputNumberProps & {
@@ -10,12 +10,10 @@ type FieldNumberProps = InputNumberProps & {
 };


-const FieldNumber: React.FC<FieldNumberProps> = (props) => {
+export const FieldNumber: React.FC<FieldNumberProps> = (props) => {
  return (
    <Block label={props.label} fieldSpec={props.fieldSpec}>
      <InputNumber {...props} />
    </Block>
  );
 };
-
-export default FieldNumber;
@@ -1,5 +1,5 @@
-import Block from "./Block";
-import InputSelect, {type InputSelectProps} from "./InputSelect";
+import { Block } from "./Block";
+import { InputSelect, type InputSelectProps } from "./InputSelect";


 type FieldSelectProps = InputSelectProps & {
@@ -10,12 +10,10 @@ type FieldSelectProps = InputSelectProps & {
 };


-const FieldSelect: React.FC<FieldSelectProps> = (props) => {
+export const FieldSelect: React.FC<FieldSelectProps> = (props) => {
  return (
    <Block label={props.label} fieldSpec={props.fieldSpec}>
      <InputSelect {...props} />
    </Block>
  );
 };
-
-export default FieldSelect;
@@ -1,8 +1,8 @@
 import React from "react";

 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
-import InputAutocomplete from "./InputAutocomplete";
+import { Block } from "./Block";
+import { InputAutocomplete } from "./InputAutocomplete";
 import { type WithTranslation, withTranslation } from "react-i18next";

 type FieldSourceInternalProps = {
@@ -38,5 +38,4 @@ const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
 };


-const FieldSource = withTranslation()(FieldSourceInternal);
-export default FieldSource;
+export const FieldSource = withTranslation()(FieldSourceInternal);
@@ -1,8 +1,8 @@
 import React from "react";

 import {latest} from "@maplibre/maplibre-gl-style-spec";
-import Block from "./Block";
-import InputAutocomplete from "./InputAutocomplete";
+import { Block } from "./Block";
+import { InputAutocomplete } from "./InputAutocomplete";
 import { type WithTranslation, withTranslation } from "react-i18next";

 type FieldSourceLayerInternalProps = {
@@ -35,5 +35,4 @@ const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
  );
 };

-const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
-export default FieldSourceLayer;
+export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
@@ -1,6 +1,6 @@
-import Block, { type BlockProps } from "./Block";
-import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec";
-import Fieldset, { type FieldsetProps } from "./Fieldset";
+import { Block, type BlockProps } from "./Block";
+import { InputSpec, type FieldSpecType, type InputSpecProps } from "./InputSpec";
+import { Fieldset, type FieldsetProps } from "./Fieldset";

 function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block {
  switch(fieldSpec.type) {
@@ -36,7 +36,7 @@ function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[

 export type FieldSpecProps = InputSpecProps & BlockProps & FieldsetProps;

-const FieldSpec: React.FC<FieldSpecProps> = (props) => {
+export const FieldSpec: React.FC<FieldSpecProps> = (props) => {
  const TypeBlock = getElementFromType(props.fieldSpec!);

  return (
@@ -45,5 +45,3 @@ const FieldSpec: React.FC<FieldSpecProps> = (props) => {
    </TypeBlock>
  );
 };
-
-export default FieldSpec;
@@ -1,5 +1,5 @@
-import Block from "./Block";
-import InputString, {type InputStringProps} from "./InputString";
+import { Block } from "./Block";
+import { InputString, type InputStringProps } from "./InputString";

 type FieldStringProps = InputStringProps & {
  name?: string
@@ -9,12 +9,10 @@ type FieldStringProps = InputStringProps & {
  }
 };

-const FieldString: React.FC<FieldStringProps> = (props) => {
+export const FieldString: React.FC<FieldStringProps> = (props) => {
  return (
    <Block label={props.label} fieldSpec={props.fieldSpec}>
      <InputString {...props} />
    </Block>
  );
 };
-
-export default FieldString;
@@ -1,8 +1,8 @@
 import React from "react";
 import {v8} from "@maplibre/maplibre-gl-style-spec";
-import Block from "./Block";
-import InputSelect from "./InputSelect";
-import InputString from "./InputString";
+import { Block } from "./Block";
+import { InputSelect } from "./InputSelect";
+import { InputString } from "./InputString";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { startCase } from "lodash";

@@ -43,5 +43,4 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
  );
 };

-const FieldType = withTranslation()(FieldTypeInternal);
-export default FieldType;
+export const FieldType = withTranslation()(FieldTypeInternal);
@@ -1,5 +1,5 @@
-import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl";
-import Block from "./Block";
+import { InputUrl, type FieldUrlProps as InputUrlProps } from "./InputUrl";
+import { Block } from "./Block";


 type FieldUrlProps = InputUrlProps & {
@@ -10,12 +10,10 @@ type FieldUrlProps = InputUrlProps & {
 };


-const FieldUrl: React.FC<FieldUrlProps> = (props) => {
+export const FieldUrl: React.FC<FieldUrlProps> = (props) => {
  return (
    <Block label={props.label} fieldSpec={props.fieldSpec}>
      <InputUrl {...props} />
    </Block>
  );
 };
-
-export default FieldUrl;
@@ -1,8 +1,8 @@
 import React, { type PropsWithChildren, type ReactElement } from "react";
 import classnames from "classnames";
-import FieldDocLabel from "./FieldDocLabel";
-import Doc from "./Doc";
-import generateUniqueId from "../libs/document-uid";
+import { FieldDocLabel } from "./FieldDocLabel";
+import { Doc } from "./Doc";
+import { generateUniqueId } from "../libs/document-uid";

 export type FieldsetProps = PropsWithChildren & {
  label?: string,
@@ -12,7 +12,7 @@ export type FieldsetProps = PropsWithChildren & {
 };


-const Fieldset: React.FC<FieldsetProps> = (props) => {
+export const Fieldset: React.FC<FieldsetProps> = (props) => {
  const [showDoc, setShowDoc] = React.useState(false);
  const labelId = React.useRef(generateUniqueId("fieldset_label_"));

@@ -49,5 +49,3 @@ const Fieldset: React.FC<FieldsetProps> = (props) => {
    </div>
  );
 };
-
-export default Fieldset;
@@ -7,13 +7,13 @@ import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";

 import {combiningFilterOps} from "../libs/filterops";
-import InputSelect from "./InputSelect";
-import Block from "./Block";
-import SingleFilterEditor from "./SingleFilterEditor";
-import FilterEditorBlock from "./FilterEditorBlock";
-import InputButton from "./InputButton";
-import Doc from "./Doc";
-import ExpressionProperty from "./_ExpressionProperty";
+import { InputSelect } from "./InputSelect";
+import { Block } from "./Block";
+import { SingleFilterEditor } from "./SingleFilterEditor";
+import { FilterEditorBlock } from "./FilterEditorBlock";
+import { InputButton } from "./InputButton";
+import { Doc } from "./Doc";
+import { ExpressionProperty } from "./ExpressionProperty";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import type { MappedLayerErrors, StyleSpecificationWithId } from "../libs/definitions";

@@ -215,6 +215,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
            onClick={this.makeExpression}
            title={t("Convert to expression")}
            className="maputnik-make-zoom-function"
+            data-wd-key="filter-convert-to-expression"
          >
            <TbMathFunction />
          </InputButton>
@@ -248,6 +249,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
            fieldSpec={fieldSpec}
            label={t("Filter")}
            action={actions}
+            data-wd-key="filter-combining-operator"
          >
            <InputSelect
              value={combiningOp}
@@ -316,5 +318,4 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
  }
 }

-const FilterEditor = withTranslation()(FilterEditorInternal);
-export default FilterEditor;
+export const FilterEditor = withTranslation()(FilterEditorInternal);
@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from "react";
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";

@@ -27,5 +27,4 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
  }
 }

-const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
-export default FilterEditorBlock;
+export const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
@@ -1,6 +1,6 @@
 import React from "react";

-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdFunctions, MdInsertChart} from "react-icons/md";
 import { TbMathFunction } from "react-icons/tb";
 import { type WithTranslation, withTranslation } from "react-i18next";
@@ -67,5 +67,4 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
  }
 }

-const FunctionInputButtons = withTranslation()(FunctionInputButtonsInternal);
-export default FunctionInputButtons;
+export const FunctionInputButtons = withTranslation()(FunctionInputButtonsInternal);
@@ -13,7 +13,7 @@ type IconLayerProps = {
  className?: string
 };

-const IconLayer: React.FC<IconLayerProps> = (props) => {
+export const IconLayer: React.FC<IconLayerProps> = (props) => {
  const iconProps = { style: props.style };
  switch(props.type) {
    case "fill-extrusion": return <IoMdCube {...iconProps} />;
@@ -29,5 +29,3 @@ const IconLayer: React.FC<IconLayerProps> = (props) => {
    default: return <MdPriorityHigh {...iconProps} />;
  }
 };
-
-export default IconLayer;
@@ -1,6 +1,6 @@
 import React from "react";
-import InputString from "./InputString";
-import InputNumber from "./InputNumber";
+import { InputString } from "./InputString";
+import { InputNumber } from "./InputNumber";

 export type InputArrayProps = {
  value: (string | number | undefined)[]
@@ -17,7 +17,7 @@ type InputArrayState = {
  initialPropsValue: unknown[]
 };

-export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
+export class InputArray extends React.Component<InputArrayProps, InputArrayState> {
  static defaultProps = {
    value: [],
    default: [],
@@ -1,24 +0,0 @@
-import { expect, test } from "vitest";
-import { render } from "vitest-browser-react";
-import { page } from "vitest/browser";
-import InputAutocomplete from "./InputAutocomplete";
-
-const fruits = ["apple", "banana", "cherry"];
-
-test("filters options when typing", async () => {
-  render(<InputAutocomplete aria-label="Fruit" options={fruits.map((f) => [f, f])} />);
-
-  const input = page.getByLabelText("Fruit");
-  await input.click();
-
-  const menuItems = page.getByRole("option");
-  await expect.element(menuItems.first()).toBeVisible();
-  expect(menuItems.all()).toHaveLength(3);
-
-  await input.fill("ch");
-  await expect.element(page.getByText("cherry")).toBeVisible();
-  expect(page.getByRole("option").all()).toHaveLength(1);
-
-  await page.getByText("cherry").click();
-  await expect.element(input).toHaveValue("cherry");
-});
@@ -11,7 +11,7 @@ export type InputAutocompleteProps = {
  "aria-label"?: string
 };

-export default function InputAutocomplete({
+export function InputAutocomplete({
  value,
  options = [],
  onChange = () => {},
@@ -14,7 +14,7 @@ type InputButtonProps = {
  title?: string
 };

-export default class InputButton extends React.Component<InputButtonProps> {
+export class InputButton extends React.Component<InputButtonProps> {
  render() {
    return <button
      id={this.props.id}
@@ -6,7 +6,7 @@ export type InputCheckboxProps = {
  onChange(...args: unknown[]): unknown
 };

-export default class InputCheckbox extends React.Component<InputCheckboxProps> {
+export class InputCheckbox extends React.Component<InputCheckboxProps> {
  static defaultProps = {
    value: false,
  };
@@ -20,7 +20,7 @@ export type InputColorProps = {
 };

 /*** Number fields with support for min, max and units and documentation*/
-export default class InputColor extends React.Component<InputColorProps> {
+export class InputColor extends React.Component<InputColorProps> {
  state = {
    pickerOpened: false
  };
@@ -3,13 +3,13 @@ import capitalize from "lodash.capitalize";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import InputString from "./InputString";
-import InputNumber from "./InputNumber";
-import InputButton from "./InputButton";
-import FieldDocLabel from "./FieldDocLabel";
-import InputEnum from "./InputEnum";
-import InputUrl from "./InputUrl";
-import InputColor from "./InputColor";
+import { InputString } from "./InputString";
+import { InputNumber } from "./InputNumber";
+import { InputButton } from "./InputButton";
+import { FieldDocLabel } from "./FieldDocLabel";
+import { InputEnum } from "./InputEnum";
+import { InputUrl } from "./InputUrl";
+import { InputColor } from "./InputColor";


 export type InputDynamicArrayProps = {
@@ -141,9 +141,7 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
  }
 }

-const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
-export default InputDynamicArray;
-
+export const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
 type DeleteValueInputButtonProps = {
  onClick?(...args: unknown[]): unknown
 } & WithTranslation;
@@ -1,6 +1,6 @@
 import React from "react";
-import InputSelect from "./InputSelect";
-import InputMultiInput from "./InputMultiInput";
+import { InputSelect } from "./InputSelect";
+import { InputMultiInput } from "./InputMultiInput";


 function optionsLabelLength(options: any[]) {
@@ -25,7 +25,7 @@ export type InputEnumProps = {
 };


-export default class InputEnum extends React.Component<InputEnumProps> {
+export class InputEnum extends React.Component<InputEnumProps> {
  render() {
    const {options, value, onChange, name, label} = this.props;

@@ -1,5 +1,5 @@
 import React from "react";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";

 export type InputFontProps = {
  name: string
@@ -11,7 +11,7 @@ export type InputFontProps = {
  "aria-label"?: string
 };

-export default class InputFont extends React.Component<InputFontProps> {
+export class InputFont extends React.Component<InputFontProps> {
  static defaultProps = {
    fonts: []
  };
@@ -135,5 +135,4 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
  }
 }

-const InputJson = withTranslation()(InputJsonInternal);
-export default InputJson;
+export const InputJson = withTranslation()(InputJsonInternal);
@@ -9,7 +9,7 @@ export type InputMultiInputProps = {
  "aria-label"?: string
 };

-export default class InputMultiInput extends React.Component<InputMultiInputProps> {
+export class InputMultiInput extends React.Component<InputMultiInputProps> {
  render() {
    let options = this.props.options;
    if(options.length > 0 && !Array.isArray(options[0])) {
@@ -1,5 +1,5 @@
 import React, { type BaseSyntheticEvent } from "react";
-import generateUniqueId from "../libs/document-uid";
+import { generateUniqueId } from "../libs/document-uid";

 export type InputNumberProps = {
  value?: number
@@ -25,7 +25,7 @@ type InputNumberState = {
  dirtyValue?: number | string | undefined
 };

-export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
+export class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
  static defaultProps = {
    rangeStep: 1
  };
@@ -10,7 +10,7 @@ export type InputSelectProps = {
  "aria-label"?: string
 };

-export default class InputSelect extends React.Component<InputSelectProps> {
+export class InputSelect extends React.Component<InputSelectProps> {
  render() {
    let options = this.props.options;
    if(options.length > 0 && !Array.isArray(options[0])) {
@@ -1,14 +1,14 @@
 import React, { type ReactElement } from "react";

-import InputColor, { type InputColorProps } from "./InputColor";
-import InputNumber, { type InputNumberProps } from "./InputNumber";
-import InputCheckbox, { type InputCheckboxProps } from "./InputCheckbox";
-import InputString, { type InputStringProps } from "./InputString";
-import InputArray, { type InputArrayProps } from "./InputArray";
-import InputDynamicArray, { type InputDynamicArrayProps } from "./InputDynamicArray";
-import InputFont, { type InputFontProps } from "./InputFont";
-import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
-import InputEnum, { type InputEnumProps } from "./InputEnum";
+import { InputColor, type InputColorProps } from "./InputColor";
+import { InputNumber, type InputNumberProps } from "./InputNumber";
+import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";
+import { InputString, type InputStringProps } from "./InputString";
+import { InputArray, type InputArrayProps } from "./InputArray";
+import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
+import { InputFont, type InputFontProps } from "./InputFont";
+import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";
+import { InputEnum, type InputEnumProps } from "./InputEnum";
 import capitalize from "lodash.capitalize";

 const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
@@ -38,7 +38,7 @@ export type InputSpecProps = {
 /** Display any field from the Maplibre GL style spec and
 * choose the correct field component based on the @{fieldSpec}
 * to display @{value}. */
-export default class InputSpec extends React.Component<InputSpecProps> {
+export class InputSpec extends React.Component<InputSpecProps> {

  childNodes() {
    const commonProps = {
@@ -20,7 +20,7 @@ type InputStringState = {
  value?: string
 };

-export default class InputString extends React.Component<InputStringProps, InputStringState> {
+export class InputString extends React.Component<InputStringProps, InputStringState> {
  static defaultProps = {
    onInput: () => {},
  };
@@ -1,6 +1,6 @@
 import React, { type JSX } from "react";
-import InputString from "./InputString";
-import SmallError from "./SmallError";
+import { InputString } from "./InputString";
+import { SmallError } from "./SmallError";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 import { type TFunction } from "i18next";
 import { ErrorType, validate } from "../libs/urlopen";
@@ -91,5 +91,4 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
  }
 }

-const InputUrl = withTranslation()(InputUrlInternal);
-export default InputUrl;
+export const InputUrl = withTranslation()(InputUrlInternal);
@@ -6,17 +6,17 @@ import { IconContext } from "react-icons";
 import { type BackgroundLayerSpecification, type LayerSpecification, type SourceSpecification } from "maplibre-gl";
 import { v8 } from "@maplibre/maplibre-gl-style-spec";

-import FieldJson from "./FieldJson";
-import FilterEditor from "./FilterEditor";
-import PropertyGroup from "./PropertyGroup";
-import LayerEditorGroup from "./LayerEditorGroup";
-import FieldType from "./FieldType";
-import FieldId from "./FieldId";
-import FieldMinZoom from "./FieldMinZoom";
-import FieldMaxZoom from "./FieldMaxZoom";
-import FieldComment from "./FieldComment";
-import FieldSource from "./FieldSource";
-import FieldSourceLayer from "./FieldSourceLayer";
+import { FieldJson } from "./FieldJson";
+import { FilterEditor } from "./FilterEditor";
+import { PropertyGroup } from "./PropertyGroup";
+import { LayerEditorGroup } from "./LayerEditorGroup";
+import { FieldType } from "./FieldType";
+import { FieldId } from "./FieldId";
+import { FieldMinZoom } from "./FieldMinZoom";
+import { FieldMaxZoom } from "./FieldMaxZoom";
+import { FieldComment } from "./FieldComment";
+import { FieldSource } from "./FieldSource";
+import { FieldSourceLayer } from "./FieldSourceLayer";
 import { changeType, changeProperty } from "../libs/layer";
 import { formatLayerId } from "../libs/format";
 import { type WithTranslation, withTranslation } from "react-i18next";
@@ -74,20 +74,20 @@ function getLayoutForType(type: LayerSpecification["type"], t: TFunction): Maput
    return getLayoutForSymbolType(t);
  }
  const groups: MaputnikLayoutGroup[] = [];
-  if (Object.keys(v8["paint_" + type]).length > 0) {
+  if (Object.keys(v8["paint_" + type as keyof typeof v8]).length > 0) {
    groups.push({
      title: t("Paint properties"),
      id: "Paint_properties",
      type: "properties",
-      fields: Object.keys(v8["paint_" + type]),
+      fields: Object.keys(v8["paint_" + type as keyof typeof v8]),
    });
  }
-  if (Object.keys(v8["layout_" + type]).length > 0) {
+  if (Object.keys(v8["layout_" + type as keyof typeof v8]).length > 0) {
    groups.push({
      title: t("Layout properties"),
      id: "Layout_properties",
      type: "properties",
-      fields: Object.keys(v8["layout_" + type])
+      fields: Object.keys(v8["layout_" + type as keyof typeof v8])
    });
  }
  return groups;
@@ -230,6 +230,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
          )}
        />
        {this.props.layer.type !== "background" && <FieldSource
+          wdKey="layer-editor.layer-source"
          error={errorData.source}
          sourceIds={Object.keys(this.props.sources!)}
          value={this.props.layer.source}
@@ -419,5 +420,4 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
  }
 }

-const LayerEditor = withTranslation()(LayerEditorInternal);
-export default LayerEditor;
+export const LayerEditor = withTranslation()(LayerEditorInternal);
@@ -18,7 +18,7 @@ type LayerEditorGroupProps = {
 };


-export default class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
+export class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
  render() {
    return <AccordionItem uuid={this.props.id}>
      <AccordionItemHeading className="maputnik-layer-editor-group"
@@ -14,12 +14,12 @@ import {
  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";

-import LayerListGroup from "./LayerListGroup";
-import LayerListItem from "./LayerListItem";
-import ModalAdd from "./modals/ModalAdd";
+import { LayerListGroup } from "./LayerListGroup";
+import { LayerListItem } from "./LayerListItem";
+import { ModalAdd } from "./modals/ModalAdd";

 import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
-import generateUniqueId from "../libs/document-uid";
+import { generateUniqueId } from "../libs/document-uid";
 import { findClosestCommonPrefix, layerPrefix } from "../libs/layer";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { type MappedError, type OnMoveLayerCallback } from "../libs/definitions";
@@ -336,7 +336,7 @@ type LayerListProps = LayerListContainerProps & {
  onMoveLayer: OnMoveLayerCallback
 };

-const LayerList: React.FC<LayerListProps> = (props) => {
+export const LayerList: React.FC<LayerListProps> = (props) => {
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));

  const handleDragEnd = (event: DragEndEvent) => {
@@ -361,5 +361,3 @@ const LayerList: React.FC<LayerListProps> = (props) => {
    </DndContext>
  );
 };
-
-export default LayerList;
@@ -1,5 +1,5 @@
 import React from "react";
-import Collapser from "./Collapser";
+import { Collapser } from "./Collapser";

 type LayerListGroupProps = {
  title: string
@@ -9,7 +9,7 @@ type LayerListGroupProps = {
  "aria-controls"?: string
 };

-export default class LayerListGroup extends React.Component<LayerListGroupProps> {
+export class LayerListGroup extends React.Component<LayerListGroupProps> {
  render() {
    return <li className="maputnik-layer-list-group">
      <div className="maputnik-layer-list-group-header"
@@ -5,7 +5,7 @@ import { IconContext } from "react-icons";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";

-import IconLayer from "./IconLayer";
+import { IconLayer } from "./IconLayer";
 import type { VisibilitySpecification } from "maplibre-gl";


@@ -87,7 +87,7 @@ type LayerListItemProps = {
  onLayerVisibilityToggle?(...args: unknown[]): unknown
 };

-const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
+export const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
  const {
    isSelected = false,
    visibility = "visible",
@@ -162,5 +162,3 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
    </li>
  </IconContext.Provider>;
 });
-
-export default LayerListItem;
@@ -3,10 +3,10 @@ import {createRoot} from "react-dom/client";
 import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
 import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
 import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
-import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
-import MapMaplibreGlFeaturePropertyPopup, { type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
+import { FeatureLayerPopup as MapMaplibreGlLayerPopup } from "./MapMaplibreGlLayerPopup";
+import { FeaturePropertyPopup as MapMaplibreGlFeaturePropertyPopup, type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
 import Color from "color";
-import ZoomControl from "../libs/zoomcontrol";
+import { ZoomControl } from "../libs/zoomcontrol";
 import { type HighlightedLayer, colorHighlightedLayer } from "../libs/highlight";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "../maplibregl.css";
@@ -322,5 +322,4 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
  }
 }

-const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
-export default MapMaplibreGl;
+export const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
@@ -63,7 +63,7 @@ type FeaturePropertyPopupProps = {
  features: InspectFeature[]
 };

-class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
+export class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
  render() {
    const features = removeDuplicatedFeatures(this.props.features);
    return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
@@ -75,6 +75,3 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
    </div>;
  }
 }
-
-
-export default FeaturePropertyPopup;
@@ -1,5 +1,5 @@
 import React from "react";
-import IconLayer from "./IconLayer";
+import { IconLayer } from "./IconLayer";
 import type {InspectFeature} from "./MapMaplibreGlFeaturePropertyPopup";

 function groupFeaturesBySourceLayer(features: InspectFeature[]) {
@@ -32,7 +32,7 @@ type FeatureLayerPopupProps = {
  zoom?: number
 };

-class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
+export class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
  _getFeatureColor(feature: InspectFeature, _zoom?: number) {
    // Guard because openlayers won't have this
    if (!feature.layer.paint) {
@@ -109,6 +109,3 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
    </div>;
  }
 }
-
-
-export default FeatureLayerPopup;
@@ -2,7 +2,7 @@ import React from "react";
 import {throttle} from "lodash";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
+import { FeatureLayerPopup as MapMaplibreGlLayerPopup } from "./MapMaplibreGlLayerPopup";

 import "ol/ol.css";
 //@ts-ignore
@@ -204,5 +204,4 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  }
 }

-const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
-export default MapOpenLayers;
+export const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
@@ -1,6 +1,6 @@
 import React from "react";

-import FieldFunction from "./FieldFunction";
+import { FieldFunction } from "./FieldFunction";
 import type {LayerSpecification} from "maplibre-gl";
 import { type MappedLayerErrors } from "../libs/definitions";

@@ -40,7 +40,7 @@ type PropertyGroupProps = {
  errors?: MappedLayerErrors
 };

-export default class PropertyGroup extends React.Component<PropertyGroupProps> {
+export class PropertyGroup extends React.Component<PropertyGroupProps> {
  onPropertyChange = (property: string, newValue: any) => {
    const group = getGroupName(this.props.spec, this.props.layer.type, property);
    this.props.onChange(group ,property, newValue);
@@ -4,7 +4,7 @@ type ScrollContainerProps = {
  children?: React.ReactNode
 };

-export default class ScrollContainer extends React.Component<ScrollContainerProps> {
+export class ScrollContainer extends React.Component<ScrollContainerProps> {
  render() {
    return <div className="maputnik-scroll-container">
      {this.props.children}
@@ -1,9 +1,9 @@
 import React from "react";

 import {otherFilterOps} from "../libs/filterops";
-import InputString from "./InputString";
-import InputAutocomplete from "./InputAutocomplete";
-import InputSelect from "./InputSelect";
+import { InputString } from "./InputString";
+import { InputAutocomplete } from "./InputAutocomplete";
+import { InputSelect } from "./InputSelect";

 function tryParseInt(v: string | number) {
  if (v === "") return v;
@@ -40,7 +40,7 @@ type SingleFilterEditorProps = {
  properties?: {[key: string]: string}
 };

-export default class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
+export class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
  static defaultProps = {
    properties: {},
  };
@@ -18,5 +18,4 @@ class SmallErrorInternal extends React.Component<SmallErrorInternalProps> {
  }
 }

-const SmallError = withTranslation()(SmallErrorInternal);
-export default SmallError;
+export const SmallError = withTranslation()(SmallErrorInternal);
@@ -1,9 +1,9 @@
 import React from "react";

-import FieldSpec, {type FieldSpecProps} from "./FieldSpec";
-import FunctionButtons from "./_FunctionButtons";
+import { FieldSpec, type FieldSpecProps } from "./FieldSpec";
+import { FunctionInputButtons as FunctionButtons } from "./FunctionButtons";

-import labelFromFieldName from "../libs/label-from-field-name";
+import { labelFromFieldName } from "../libs/label-from-field-name";


 type SpecPropertyProps = FieldSpecProps & {
@@ -19,7 +19,7 @@ type SpecPropertyProps = FieldSpecProps & {
 };


-export default class SpecProperty extends React.Component<SpecPropertyProps> {
+export class SpecProperty extends React.Component<SpecPropertyProps> {
  static defaultProps = {
    errors: {},
  };
@@ -4,17 +4,17 @@ import { TbMathFunction } from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import InputButton from "./InputButton";
-import InputSpec from "./InputSpec";
-import InputNumber from "./InputNumber";
-import InputSelect from "./InputSelect";
-import Block from "./Block";
+import { InputButton } from "./InputButton";
+import { InputSpec } from "./InputSpec";
+import { InputNumber } from "./InputNumber";
+import { InputSelect } from "./InputSelect";
+import { Block } from "./Block";

-import DeleteStopButton from "./_DeleteStopButton";
-import labelFromFieldName from "../libs/label-from-field-name";
+import { DeleteStopButton } from "./DeleteStopButton";
+import { labelFromFieldName } from "../libs/label-from-field-name";

-import docUid from "../libs/document-uid";
-import sortNumerically from "../libs/sort-numerically";
+import { generateUniqueId as docUid } from "../libs/document-uid";
+import { sortNumerically } from "../libs/sort-numerically";
 import { type MappedLayerErrors } from "../libs/definitions";


@@ -194,6 +194,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
        <div className="maputnik-data-fieldset-inner">
          <Block
            label={t("Function")}
+            data-wd-key="function-type"
          >
            <div className="maputnik-data-spec-property-input">
              <InputSelect
@@ -206,6 +207,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
          </Block>
          <Block
            label={t("Base")}
+            data-wd-key="function-base"
          >
            <div className="maputnik-data-spec-property-input">
              <InputSpec
@@ -240,6 +242,7 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
            </InputButton>
            <InputButton
              className="maputnik-add-stop"
+              data-wd-key="convert-to-expression"
              onClick={this.props.onExpressionClick?.bind(this)}
            >
              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
@@ -264,5 +267,4 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
  }
 }

-const ZoomProperty = withTranslation()(ZoomPropertyInternal);
-export default ZoomProperty;
+export const ZoomProperty = withTranslation()(ZoomPropertyInternal);
@@ -67,5 +67,4 @@ class ModalInternal extends React.Component<ModalInternalProps> {
  }
 }

-const Modal = withTranslation()(ModalInternal);
-export default Modal;
+export const Modal = withTranslation()(ModalInternal);
@@ -2,12 +2,12 @@ import React from "react";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import type {LayerSpecification, SourceSpecification} from "maplibre-gl";

-import InputButton from "../InputButton";
-import Modal from "./Modal";
-import FieldType from "../FieldType";
-import FieldId from "../FieldId";
-import FieldSource from "../FieldSource";
-import FieldSourceLayer from "../FieldSourceLayer";
+import { InputButton } from "../InputButton";
+import { Modal } from "./Modal";
+import { FieldType } from "../FieldType";
+import { FieldId } from "../FieldId";
+import { FieldSource } from "../FieldSource";
+import { FieldSourceLayer } from "../FieldSourceLayer";
 import { NON_SOURCE_LAYERS } from "../../libs/non-source-layers";

 type ModalAddInternalProps = {
@@ -192,5 +192,4 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
  }
 }

-const ModalAdd = withTranslation()(ModalAddInternal);
-export default ModalAdd;
+export const ModalAdd = withTranslation()(ModalAddInternal);
@@ -1,7 +1,7 @@
 import React from "react";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";

-import Modal from "./Modal";
+import { Modal } from "./Modal";


 type ModalDebugInternalProps = {
@@ -79,5 +79,4 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
  }
 }

-const ModalDebug = withTranslation()(ModalDebugInternal);
-export default ModalDebug;
+export const ModalDebug = withTranslation()(ModalDebugInternal);
@@ -6,11 +6,11 @@ import {format} from "@maplibre/maplibre-gl-style-spec";
 import {MdMap, MdSave} from "react-icons/md";
 import {type WithTranslation, withTranslation} from "react-i18next";

-import FieldString from "../FieldString";
-import InputButton from "../InputButton";
-import Modal from "./Modal";
-import style from "../../libs/style";
-import fieldSpecAdditional from "../../libs/field-spec-additional";
+import { FieldString } from "../FieldString";
+import { InputButton } from "../InputButton";
+import { Modal } from "./Modal";
+import { replaceAccessTokens, stripAccessTokens } from "../../libs/style";
+import { spec as fieldSpecAdditional } from "../../libs/field-spec-additional";
 import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";


@@ -32,8 +32,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {

  tokenizedStyle() {
    return format(
-      style.stripAccessTokens(
-        style.replaceAccessTokens(this.props.mapStyle)
+      stripAccessTokens(
+        replaceAccessTokens(this.props.mapStyle)
      )
    );
  }
@@ -217,5 +217,4 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
  }
 }

-const ModalExport = withTranslation()(ModalExportInternal);
-export default ModalExport;
+export const ModalExport = withTranslation()(ModalExportInternal);
@@ -3,13 +3,13 @@ import { withTranslation, type WithTranslation } from "react-i18next";
 import { MdDelete } from "react-icons/md";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";

-import Modal from "./Modal";
-import FieldString from "../FieldString";
-import InputButton from "../InputButton";
+import { Modal } from "./Modal";
+import { FieldString } from "../FieldString";
+import { InputButton } from "../InputButton";
 import { PiListPlusBold } from "react-icons/pi";
 import { type StyleSpecificationWithId } from "../../libs/definitions";
 import { type SchemaSpecification } from "maplibre-gl";
-import Doc from "../Doc";
+import { Doc } from "../Doc";

 type ModalGlobalStateInternalProps = {
  mapStyle: StyleSpecificationWithId;
@@ -151,5 +151,4 @@ const ModalGlobalStateInternal: React.FC<ModalGlobalStateInternalProps> = (props
  );
 };

-const ModalGlobalState = withTranslation()(ModalGlobalStateInternal);
-export default ModalGlobalState;
+export const ModalGlobalState = withTranslation()(ModalGlobalStateInternal);
@@ -1,8 +1,8 @@
 import React from "react";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import InputButton from "../InputButton";
-import Modal from "./Modal";
+import { InputButton } from "../InputButton";
+import { Modal } from "./Modal";


 type ModalLoadingInternalProps = {
@@ -35,5 +35,4 @@ class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
  }
 }

-const ModalLoading = withTranslation()(ModalLoadingInternal);
-export default ModalLoading;
+export const ModalLoading = withTranslation()(ModalLoadingInternal);
@@ -3,12 +3,12 @@ import { MdFileUpload } from "react-icons/md";
 import { MdAddCircleOutline } from "react-icons/md";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";

-import ModalLoading from "./ModalLoading";
-import Modal from "./Modal";
-import InputButton from "../InputButton";
-import InputUrl from "../InputUrl";
+import { ModalLoading } from "./ModalLoading";
+import { Modal } from "./Modal";
+import { InputButton } from "../InputButton";
+import { InputUrl } from "../InputUrl";

-import style from "../../libs/style";
+import { ensureStyleValidity } from "../../libs/style";
 import publicStyles from "../../config/styles.json";

 type PublicStyleProps = {
@@ -109,7 +109,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
          activeRequestUrl: null
        });

-        const mapStyle = style.ensureStyleValidity(body);
+        const mapStyle = ensureStyleValidity(body);
        console.log("Loaded style ", mapStyle.id);
        this.props.onStyleOpen(mapStyle);
        this.onOpenToggle();
@@ -165,7 +165,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
      });
      return;
    }
-    mapStyle = style.ensureStyleValidity(mapStyle);
+    mapStyle = ensureStyleValidity(mapStyle);

    this.props.onStyleOpen(mapStyle, fileHandle);
    this.onOpenToggle();
@@ -193,7 +193,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
        });
        return;
      }
-      mapStyle = style.ensureStyleValidity(mapStyle);
+      mapStyle = ensureStyleValidity(mapStyle);
      this.props.onStyleOpen(mapStyle);
      this.onOpenToggle();
    };
@@ -364,5 +364,4 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
  }
 }

-const ModalOpen = withTranslation()(ModalOpenInternal);
-export default ModalOpen;
+export const ModalOpen = withTranslation()(ModalOpenInternal);
@@ -3,17 +3,17 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import type {LightSpecification, ProjectionSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import FieldArray from "../FieldArray";
-import FieldNumber from "../FieldNumber";
-import FieldString from "../FieldString";
-import FieldUrl from "../FieldUrl";
-import FieldSelect from "../FieldSelect";
-import FieldEnum from "../FieldEnum";
-import FieldColor from "../FieldColor";
-import Modal from "./Modal";
-import FieldJson from "../FieldJson";
-import Block from "../Block";
-import fieldSpecAdditional from "../../libs/field-spec-additional";
+import { FieldArray } from "../FieldArray";
+import { FieldNumber } from "../FieldNumber";
+import { FieldString } from "../FieldString";
+import { FieldUrl } from "../FieldUrl";
+import { FieldSelect } from "../FieldSelect";
+import { FieldEnum } from "../FieldEnum";
+import { FieldColor } from "../FieldColor";
+import { Modal } from "./Modal";
+import { FieldJson } from "../FieldJson";
+import { Block } from "../Block";
+import { spec as fieldSpecAdditional } from "../../libs/field-spec-additional";
 import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";

 type ModalSettingsInternalProps = {
@@ -206,6 +206,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Zoom")}
+          data-wd-key="modal:settings.zoom"
          fieldSpec={latest.$root.zoom}
          value={mapStyle.zoom}
          default={0}
@@ -214,6 +215,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Bearing")}
+          data-wd-key="modal:settings.bearing"
          fieldSpec={latest.$root.bearing}
          value={mapStyle.bearing}
          default={latest.$root.bearing.default}
@@ -222,6 +224,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Pitch")}
+          data-wd-key="modal:settings.pitch"
          fieldSpec={latest.$root.pitch}
          value={mapStyle.pitch}
          default={latest.$root.pitch.default}
@@ -248,6 +251,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Light intensity")}
+          data-wd-key="modal:settings.light-intensity"
          fieldSpec={latest.light.intensity}
          value={light.intensity as number}
          default={latest.light.intensity.default}
@@ -274,6 +278,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Terrain exaggeration")}
+          data-wd-key="modal:settings.terrain-exaggeration"
          fieldSpec={latest.terrain.exaggeration}
          value={terrain.exaggeration}
          default={latest.terrain.exaggeration.default}
@@ -282,6 +287,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Transition delay")}
+          data-wd-key="modal:settings.transition-delay"
          fieldSpec={latest.transition.delay}
          value={transition.delay}
          default={latest.transition.delay.default}
@@ -290,6 +296,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>

        <FieldNumber
          label={t("Transition duration")}
+          data-wd-key="modal:settings.transition-duration"
          fieldSpec={latest.transition.duration}
          value={transition.duration}
          default={latest.transition.duration.default}
@@ -325,5 +332,4 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
  }
 }

-const ModalSettings = withTranslation()(ModalSettingsInternal);
-export default ModalSettings;
+export const ModalSettings = withTranslation()(ModalSettingsInternal);
@@ -1,7 +1,7 @@
 import React from "react";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";

-import Modal from "./Modal";
+import { Modal } from "./Modal";


 type ModalShortcutsInternalProps = {
@@ -134,5 +134,4 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
  }
 }

-const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
-export default ModalShortcuts;
+export const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
@@ -4,13 +4,13 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from "maplibre-gl";
 import { type WithTranslation, withTranslation } from "react-i18next";

-import Modal from "./Modal";
-import InputButton from "../InputButton";
-import FieldString from "../FieldString";
-import FieldSelect from "../FieldSelect";
-import ModalSourcesTypeEditor, { type EditorMode } from "./ModalSourcesTypeEditor";
+import { Modal } from "./Modal";
+import { InputButton } from "../InputButton";
+import { FieldString } from "../FieldString";
+import { FieldSelect } from "../FieldSelect";
+import { ModalSourcesTypeEditor, type EditorMode } from "./ModalSourcesTypeEditor";

-import style from "../../libs/style";
+import { generateId } from "../../libs/style";
 import { deleteSource, addSource, changeSource } from "../../libs/source";
 import publicSources from "../../config/tilesets.json";
 import { type OnStyleChangedCallback, type StyleSpecificationWithId } from "../../libs/definitions";
@@ -121,7 +121,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
    super(props);
    this.state = {
      mode: "tilejson_vector",
-      sourceId: style.generateId(),
+      sourceId: generateId(),
      source: this.defaultSource("tilejson_vector"),
    };
  }
@@ -343,5 +343,4 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
  }
 }

-const ModalSources = withTranslation()(ModalSourcesInternal);
-export default ModalSources;
+export const ModalSources = withTranslation()(ModalSourcesInternal);
@@ -3,14 +3,14 @@ import {latest} from "@maplibre/maplibre-gl-style-spec";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { type TFunction } from "i18next";

-import Block from "../Block";
-import FieldUrl from "../FieldUrl";
-import FieldNumber from "../FieldNumber";
-import FieldSelect from "../FieldSelect";
-import FieldDynamicArray from "../FieldDynamicArray";
-import FieldArray from "../FieldArray";
-import FieldJson from "../FieldJson";
-import FieldCheckbox from "../FieldCheckbox";
+import { Block } from "../Block";
+import { FieldUrl } from "../FieldUrl";
+import { FieldNumber } from "../FieldNumber";
+import { FieldSelect } from "../FieldSelect";
+import { FieldDynamicArray } from "../FieldDynamicArray";
+import { FieldArray } from "../FieldArray";
+import { FieldJson } from "../FieldJson";
+import { FieldCheckbox } from "../FieldCheckbox";


 export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
@@ -375,5 +375,4 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
  }
 }

-const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
-export default ModalSourcesTypeEditor;
+export const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
@@ -42,4 +42,4 @@ i18n
    }
  });

-export default i18n;
+export { i18n };
@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import "./favicon.ico";
 import "./styles/index.scss";
 import "./i18n";
-import App from "./components/App";
+import { App } from "./components/App";

 const root = createRoot(document.querySelector("#app"));
 root.render(
--- a/Show More
+++ b/Show More