Increase coverage (#1997)

## Launch Checklist

This PR increases coverage by adding unit tests to lib folde, replace
the skipped end to end placeholder with actual tests and adds more end
to end tests.

This was mostly done by AI (Claude opus 4.8) and I reviewed it and
requested changes where needed.

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -96,7 +96,6 @@ jobs:
         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

AGENTS.md

@@ -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).

e2e/access-tokens.spec.ts

@@ -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");
+  });
+});

e2e/fixtures/access-token-style.json

@@ -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": []
+}

e2e/layer-editor.spec.ts

@@ -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();

e2e/layers-list.spec.ts

@@ -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", () => {

e2e/maputnik-driver.ts

@@ -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. */

e2e/modal-driver.ts

@@ -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();
+    },
   };
 }

e2e/modals.spec.ts

@@ -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");

e2e/playwright-helper.ts

@@ -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) => {

eslint.config.js

@@ -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": [

package-lock.json

@@ -90,8 +90,6 @@
         "@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",
         "@vitest/coverage-v8": "^4.1.10",
         "cors": "^2.8.6",
         "eslint": "^10.6.0",
@@ -113,8 +111,7 @@
         "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"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -438,13 +435,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@blazediff/core": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@blazediff/core/-/core-1.9.1.tgz",
-      "integrity": "sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@cacheable/memory": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.0.9.tgz",
@@ -2631,13 +2621,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@polka/url": {
-      "version": "1.0.0-next.29",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
-      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -4066,53 +4049,6 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@vitest/browser": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/@vitest/browser/-/browser-4.1.10.tgz",
-      "integrity": "sha512-UDwuWGwXj646CBx/bQHOaJSX7np0I8JL/UKQYa1e4QrVHH8VdWtx8eaOuf8sy0ShwDgR6NjJAsp5eF6vjF6qng==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@blazediff/core": "1.9.1",
-        "@vitest/mocker": "4.1.10",
-        "@vitest/utils": "4.1.10",
-        "magic-string": "^0.30.21",
-        "pngjs": "^7.0.0",
-        "sirv": "^3.0.2",
-        "tinyrainbow": "^3.1.0",
-        "ws": "^8.19.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "vitest": "4.1.10"
-      }
-    },
-    "node_modules/@vitest/browser-playwright": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.1.10.tgz",
-      "integrity": "sha512-nMoXGEiRpT7m3W7NsbvrM2aKNwiNHZf+zEpUCvMteGjZFvfT96Q9fh7QyB98dvDWXiKvrLxA7bJ1mCOOv+JQPw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/browser": "4.1.10",
-        "@vitest/mocker": "4.1.10",
-        "tinyrainbow": "^3.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "playwright": "*",
-        "vitest": "4.1.10"
-      },
-      "peerDependenciesMeta": {
-        "playwright": {
-          "optional": false
-        }
-      }
-    },
     "node_modules/@vitest/coverage-v8": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.10.tgz",
@@ -8387,9 +8323,9 @@
       }
     },
     "node_modules/istanbul-lib-processinfo": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-3.0.1.tgz",
-      "integrity": "sha512-s3mX05h5wGZeScG6XnOanygPh4SJu5ujMc9YbvpnLGXWy1cRiGbp0NdVcjHxgoZt3WfQppfBsa0y+gWdYJ2pGQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-3.0.0.tgz",
+      "integrity": "sha512-P7nLXRRlo7Sqinty6lNa7+4o9jBUYGpqtejqCOZKfgXlRoxY/QArflcB86YO500Ahj4pDJEG34JjMRbQgePLnQ==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -8397,7 +8333,8 @@
         "cross-spawn": "^7.0.3",
         "istanbul-lib-coverage": "^3.2.0",
         "p-map": "^3.0.0",
-        "rimraf": "^6.1.3"
+        "rimraf": "^6.1.3",
+        "uuid": "^8.3.2"
       },
       "engines": {
         "node": "20 || >=22"
@@ -8416,6 +8353,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/istanbul-lib-processinfo/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -9756,16 +9703,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mrmime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
-      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10807,16 +10744,6 @@
         "fflate": "^0.8.2"
       }
     },
-    "node_modules/pngjs": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
-      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.19.0"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -11064,13 +10991,12 @@
       "license": "MIT"
     },
     "node_modules/qs": {
-      "version": "6.15.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
-      "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "es-define-property": "^1.0.1",
-        "side-channel": "^1.1.1"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">=0.6"
@@ -11938,14 +11864,14 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
-      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.4",
-        "side-channel-list": "^1.0.1",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
         "side-channel-map": "^1.0.1",
         "side-channel-weakmap": "^1.0.2"
       },
@@ -11957,13 +11883,13 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
-      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.4"
+        "object-inspect": "^1.13.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12023,21 +11949,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/sirv": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
-      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@polka/url": "^1.0.0-next.24",
-        "mrmime": "^2.0.0",
-        "totalist": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/slugify": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
@@ -12909,16 +12820,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/totalist": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
-      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -13669,31 +13570,6 @@
         }
       }
     },
-    "node_modules/vitest-browser-react": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/vitest-browser-react/-/vitest-browser-react-2.2.0.tgz",
-      "integrity": "sha512-oY3KM6305kwJMa6nHo92vVtkOsih7mjEf12dLKuphaF+9ywWPEc+qanIBd394SZ6m5LadVEaG6dicvvizOzmjA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "@types/react": "^18.0.0 || ^19.0.0",
-        "@types/react-dom": "^18.0.0 || ^19.0.0",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0",
-        "vitest": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -13881,28 +13757,6 @@
         "typedarray-to-buffer": "^3.1.5"
       }
     },
-    "node_modules/ws": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
-      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/xml-utils": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.2.tgz",

package.json

@@ -124,8 +124,6 @@
     "@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",
     "@vitest/coverage-v8": "^4.1.10",
     "cors": "^2.8.6",
     "eslint": "^10.6.0",
@@ -147,7 +145,6 @@
     "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"
   }
 }

src/components/App.tsx

@@ -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
         });
       },

src/components/AppLayout.tsx

@@ -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);

src/components/AppMessagePanel.tsx

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

src/components/AppToolbar.tsx

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

src/components/Block.tsx

@@ -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) {

src/components/CodeEditor.tsx

@@ -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);

src/components/Collapse.tsx

@@ -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
   };

src/components/Collapser.tsx

@@ -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,

src/components/DataProperty.tsx

@@ -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);

src/components/DeleteStopButton.tsx

@@ -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);

src/components/Doc.tsx

@@ -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;
 

src/components/ExpressionProperty.tsx

@@ -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);

src/components/FieldArray.tsx

@@ -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;

src/components/FieldAutocomplete.tsx

@@ -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;

src/components/FieldCheckbox.tsx

@@ -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;

src/components/FieldColor.tsx

@@ -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;

src/components/FieldComment.tsx

@@ -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);

src/components/FieldDocLabel.tsx

@@ -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;

src/components/FieldDynamicArray.tsx

@@ -1,16 +1,14 @@
-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
 };
 
-const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
+export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
   return (
     <Fieldset label={props.label}>
       <InputDynamicArray {...props} />
     </Fieldset>
   );
 };
-
-export default FieldDynamicArray;

src/components/FieldEnum.tsx

@@ -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;

src/components/FieldFunction.tsx

@@ -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;

src/components/FieldId.tsx

@@ -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;

src/components/FieldJson.tsx

@@ -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;

src/components/FieldMaxZoom.tsx

@@ -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);

src/components/FieldMinZoom.tsx

@@ -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);

src/components/FieldMultiInput.tsx

@@ -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;

src/components/FieldNumber.tsx

@@ -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;

src/components/FieldSelect.tsx

@@ -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;

src/components/FieldSource.tsx

@@ -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);

src/components/FieldSourceLayer.tsx

@@ -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);

src/components/FieldSpec.tsx

@@ -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;

src/components/FieldString.tsx

@@ -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;

src/components/FieldType.tsx

@@ -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);

src/components/FieldUrl.tsx

@@ -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;

src/components/Fieldset.tsx

@@ -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;

src/components/FilterEditor.tsx

@@ -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);

src/components/FilterEditorBlock.tsx

@@ -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);

src/components/FunctionButtons.tsx

@@ -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);

src/components/IconLayer.tsx

@@ -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;

src/components/InputArray.tsx

@@ -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: [],

src/components/InputAutocomplete.browser.test.tsx

@@ -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");
-});

src/components/InputAutocomplete.tsx

@@ -11,7 +11,7 @@ export type InputAutocompleteProps = {
   "aria-label"?: string
 };
 
-export default function InputAutocomplete({
+export function InputAutocomplete({
   value,
   options = [],
   onChange = () => {},

src/components/InputButton.tsx

@@ -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}

src/components/InputCheckbox.tsx

@@ -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,
   };

src/components/InputColor.tsx

@@ -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
   };

src/components/InputDynamicArray.tsx

@@ -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;

src/components/InputEnum.tsx

@@ -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;
 

src/components/InputFont.tsx

@@ -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: []
   };

src/components/InputJson.tsx

@@ -135,5 +135,4 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   }
 }
 
-const InputJson = withTranslation()(InputJsonInternal);
-export default InputJson;
+export const InputJson = withTranslation()(InputJsonInternal);

src/components/InputMultiInput.tsx

@@ -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])) {

src/components/InputNumber.tsx

@@ -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
   };

src/components/InputSelect.tsx

@@ -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])) {

src/components/InputSpec.tsx

@@ -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 = {

src/components/InputString.tsx

@@ -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: () => {},
   };

src/components/InputUrl.tsx

@@ -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);

src/components/LayerEditor.tsx

@@ -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";
@@ -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);

src/components/LayerEditorGroup.tsx

@@ -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"

src/components/LayerList.tsx

@@ -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;

src/components/LayerListGroup.tsx

@@ -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"

src/components/LayerListItem.tsx

@@ -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;

src/components/MapMaplibreGl.tsx

@@ -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);

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -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;

src/components/MapMaplibreGlLayerPopup.tsx

@@ -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;

src/components/MapOpenLayers.tsx

@@ -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);

src/components/PropertyGroup.tsx

@@ -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);

src/components/ScrollContainer.tsx

@@ -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}

src/components/SingleFilterEditor.tsx

@@ -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: {},
   };

src/components/SmallError.tsx

@@ -18,5 +18,4 @@ class SmallErrorInternal extends React.Component<SmallErrorInternalProps> {
   }
 }
 
-const SmallError = withTranslation()(SmallErrorInternal);
-export default SmallError;
+export const SmallError = withTranslation()(SmallErrorInternal);

src/components/SpecProperty.tsx

@@ -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: {},
   };

src/components/ZoomProperty.tsx

@@ -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);

src/components/modals/Modal.tsx

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

src/components/modals/ModalAdd.tsx

@@ -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);

src/components/modals/ModalDebug.tsx

@@ -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);

src/components/modals/ModalExport.tsx

@@ -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);

src/components/modals/ModalGlobalState.tsx

@@ -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);

src/components/modals/ModalLoading.tsx

@@ -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);

src/components/modals/ModalOpen.tsx

@@ -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);

src/components/modals/ModalSettings.tsx

@@ -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);

src/components/modals/ModalShortcuts.tsx

@@ -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);

src/components/modals/ModalSources.tsx

@@ -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);

src/components/modals/ModalSourcesTypeEditor.tsx

@@ -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);

src/i18n.ts

@@ -42,4 +42,4 @@ i18n
     }
   });
 
-export default i18n;
+export { i18n };

src/index.jsx

@@ -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(

src/libs/document-uid.ts

@@ -3,7 +3,7 @@
  */
 let REF = 0;
 
-export default function generateUniqueId(prefix="") {
+export function generateUniqueId(prefix="") {
   REF++;
   return prefix+REF;
 }

src/libs/field-spec-additional.ts

@@ -1,6 +1,6 @@
 import { type TFunction } from "i18next";
 
-const spec = (t: TFunction) => ({
+export const spec = (t: TFunction) => ({
   maputnik: {
     maptiler_access_token: {
       label: t("MapTiler Access Token"),
@@ -32,5 +32,3 @@ const spec = (t: TFunction) => ({
     },
   }
 });
-
-export default spec;

src/libs/highlight.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import type { LayerSpecification } from "maplibre-gl";
+import { colorHighlightedLayer } from "./highlight";
+
+function layer(overrides: Record<string, any>): LayerSpecification {
+  return { id: "l", source: "s", "source-layer": "sl", ...overrides } as unknown as LayerSpecification;
+}
+
+describe("colorHighlightedLayer", () => {
+  it("returns null for undefined, background and raster layers", () => {
+    expect(colorHighlightedLayer(undefined)).toBeNull();
+    expect(colorHighlightedLayer(layer({ type: "background" }))).toBeNull();
+    expect(colorHighlightedLayer(layer({ type: "raster" }))).toBeNull();
+  });
+
+  it("builds a circle highlight for circle and symbol layers", () => {
+    for (const type of ["circle", "symbol"]) {
+      const highlight = colorHighlightedLayer(layer({ type }))!;
+      expect(highlight).not.toBeNull();
+      expect(highlight.type).toBe("circle");
+      expect(highlight.id).toMatch(/_highlight$/);
+      expect((highlight.paint as any)["circle-radius"]).toBe(3);
+    }
+  });
+
+  it("builds a line highlight with an overridden width", () => {
+    const highlight = colorHighlightedLayer(layer({ type: "line" }))!;
+    expect(highlight.type).toBe("line");
+    expect((highlight.paint as any)["line-width"]).toBe(2);
+  });
+
+  it("builds a polygon highlight for fill and fill-extrusion layers", () => {
+    for (const type of ["fill", "fill-extrusion"]) {
+      const highlight = colorHighlightedLayer(layer({ type }))!;
+      expect(highlight.type).toBe("fill");
+    }
+  });
+
+  it("copies the source layer's filter when present, drops it otherwise", () => {
+    const withFilter = colorHighlightedLayer(
+      layer({ type: "line", filter: ["==", "class", "road"] } as any)
+    )!;
+    expect(withFilter.filter).toEqual(["==", "class", "road"]);
+
+    const withoutFilter = colorHighlightedLayer(layer({ type: "line" }))!;
+    expect("filter" in withoutFilter).toBe(false);
+  });
+});

src/libs/label-from-field-name.ts

@@ -1,6 +1,6 @@
 import capitalize from "lodash.capitalize";
 
-export default function labelFromFieldName(fieldName: string) {
+export function labelFromFieldName(fieldName: string) {
   let label;
   const parts = fieldName.split("-");
   if (parts.length > 1) {