chore(deps): Bump react-dom and @types/react-dom

Bumps [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) and [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom). These dependencies needed to be updated together.

Updates `react-dom` from 18.3.1 to 19.1.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.1.1/packages/react-dom)

Updates `@types/react-dom` from 18.2.22 to 19.1.6
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom)

---
updated-dependencies:
- dependency-name: react-dom
  dependency-version: 19.1.1
  dependency-type: direct:production
  update-type: version-update:semver-major
- dependency-name: "@types/react-dom"
  dependency-version: 19.1.6
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/dependabot.yml

@@ -11,29 +11,7 @@ updates:
       interval: "daily"
     open-pull-requests-limit: 20
     versioning-strategy: increase
-    groups:
-      vitest:
-        patterns:
-          - "*vitest*"
-      react:
-        patterns:
-          - "*react*"
-    cooldown:
-      default-days: 5
-      semver-major-days: 5
-      semver-minor-days: 3
-      semver-patch-days: 3
-      include:
-        - "*"
-      exclude:
-        - "@maplibre/*"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "daily"
-    cooldown:
-      default-days: 3
-      # no semver support for github-actions
-      # => no specific configuration for this
-      include:
-        - "*"

.github/workflows/auto-merge-dependabot.yml

@@ -7,11 +7,11 @@ permissions: write-all
 jobs:
   dependabot:
     runs-on: ubuntu-latest
-    if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
+    if: ${{ github.actor == 'dependabot[bot]' }}
     steps:
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/fetch-metadata@25dd0e34f4fe68f24cc83900b1fe3fe149efef98 # v3.1.0
+        uses: dependabot/fetch-metadata@v2.4.0
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
       - name: Approve Dependabot PRs

.github/workflows/ci.yml

@@ -7,12 +7,21 @@ on:
     branches: [ main ]
 
 jobs:
+  build-docker:
+    name: build docker
+    runs-on: ubuntu-latest
 
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: docker build -t test-docker-image-build .
+
+  # build the editor
   build-node:
     name: "build on ${{ matrix.os }}"
     runs-on: ${{ matrix.os }}
-    permissions:
-      contents: read
+
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
     strategy:
@@ -21,9 +30,8 @@ jobs:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
 
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
@@ -36,27 +44,24 @@ jobs:
   build-artifacts:
     name: "build artifacts"
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
       - run: npm run build
       - name: artifacts/maputnik
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
         with:
           name: maputnik
           path: dist
 
       # Build and upload desktop CLI artifacts
       - name: Set up Go
-        uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
+        uses: actions/setup-go@v5
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum
@@ -66,100 +71,43 @@ jobs:
         run: npm run build-desktop
 
       - name: Artifacts/linux
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
         with:
           name: maputnik-linux
           path: ./desktop/bin/linux/
 
       - name: Artifacts/darwin
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
         with:
           name: maputnik-darwin
           path: ./desktop/bin/darwin/
 
       - name: Artifacts/windows
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
         with:
           name: maputnik-windows
           path: ./desktop/bin/windows/
 
-  unit-tests:
-    name: "Unit tests"
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    steps:
-      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: '.nvmrc'
-      - run: npm ci
-      - run: npm run test-unit-ci
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
-        with:
-          files: ${{ github.workspace }}/coverage/coverage-final.json
-          verbose: true
-
   e2e-tests:
-    name: "E2E tests using chrome"
+    name: "E2E tests using ${{ matrix.browser }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [ chrome ]
 
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: '.nvmrc'
+        uses: actions/checkout@v4
       - run: npm ci
-      - run: npx playwright install --with-deps chromium
-      - name: Playwright run
-        run: npm run test-e2e
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run build
+          start: npm run start
+          browser: ${{ matrix.browser }}
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
+        uses: codecov/codecov-action@v5
         with:
-          files: ${{ github.workspace }}/coverage/coverage-final.json
+          files: ${{ github.workspace }}/.nyc_output/out.json
           verbose: true
-      - name: Upload Playwright report
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 7
-
-  e2e-tests-docker:
-    name: "E2E tests using chrome and docker"
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: '.nvmrc'
-      - run: npm ci
-      - run: npx playwright install --with-deps chromium
-      - name: Build docker image
-        run: docker build -t maputnik .
-      - name: Start maputnik container
-        run: docker run -d --network host --name maputnik maputnik --port=8888
-      - name: Wait for maputnik to be ready
-        run: |
-          for i in $(seq 1 60); do
-            if curl -sSf http://localhost:8888/ > /dev/null; then
-              echo "maputnik is up"; exit 0
-            fi
-            sleep 1
-          done
-          echo "maputnik did not start in time"; docker logs maputnik; exit 1
-      - name: Playwright run
-        run: npm run test-e2e
-        env:
-          E2E_NO_WEBSERVER: "1"

.github/workflows/codeql-analysis.yml

@@ -38,11 +38,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4.36.3
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4.36.3
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4.36.3
+      uses: github/codeql-action/analyze@v3

.github/workflows/create-bump-version-pr.yml

@@ -16,13 +16,13 @@ jobs:
       run:
         shell: bash
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: main
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
 
@@ -32,7 +32,7 @@ jobs:
           ./build/bump-version-changelog.js ${{ inputs.version }}
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        uses: peter-evans/create-pull-request@v7
         with:
           commit-message: Bump version to ${{ inputs.version }}
           branch: bump-version-to-${{ inputs.version }}

.github/workflows/deploy.yml

@@ -8,15 +8,12 @@ jobs:
   deploy-pages:
     name: deploy/pages
     runs-on: ubuntu-latest
-    permissions:
-      contents: write
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with: { persist-credentials: false }
+      - uses: actions/checkout@v4
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 
@@ -27,7 +24,7 @@ jobs:
         run: npm run build
 
       - name: Upload to GitHub Pages
-        uses: peaceiris/actions-gh-pages@84c30a85c19949d7eee79c4ff27748b70285e453 # v4.1.0
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: dist
@@ -36,20 +33,19 @@ jobs:
   deploy-docker:
     name: deploy/docker
     runs-on: ubuntu-latest
+
     if: ${{ github.event_name == 'push' }}
-    permissions:
-      contents: read
-      packages: write
+
     strategy:
       fail-fast: false
 
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@v4
       - run: docker build -t ghcr.io/maplibre/maputnik:main .
       - run: docker push ghcr.io/maplibre/maputnik:main

.github/workflows/release.yml

@@ -12,23 +12,20 @@ jobs:
     defaults:
       run:
         shell: bash
-    permissions:
-      contents: read
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: main
-          persist-credentials: false
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
 
       - name: Check if version has been updated
         id: check
-        uses: EndBug/version-check@095362f3cd50f690c8fa0e6afeea81834bd8d320 # latest
+        uses: EndBug/version-check@v2
 
     outputs:
       publish: ${{ steps.check.outputs.changed }}
@@ -42,19 +39,19 @@ jobs:
       run:
         shell: bash
     steps:
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: main
 
       - name: Use Node.js from nvmrc
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           registry-url: "https://registry.npmjs.org"
 
       - name: Set up Go for desktop build
-        uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
+        uses: actions/setup-go@v5
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum
@@ -62,7 +59,7 @@ jobs:
 
       - name: Get version
         id: package-version
-        uses: martinbeentjes/npm-get-version-action@3cf273023a0dda27efcd3164bdfb51908dd46a5b # v1.3.1
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
 
       - name: Install
         run: npm ci
@@ -73,7 +70,7 @@ jobs:
 
       - name: Tag commit and push
         id: tag_version
-        uses: mathieudutour/github-tag-action@a22cf08638b34d5badda920f9daf6e72c477b07b # v6.2
+        uses: mathieudutour/github-tag-action@v6.2
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           custom_tag: ${{ steps.package-version.outputs.current-version }}
@@ -91,7 +88,7 @@ jobs:
 
       - name: Create GitHub Release
         id: create_regular_release
-        uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # v1.21.0
+        uses: ncipollo/release-action@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.gitignore

@@ -33,14 +33,10 @@ node_modules
 public
 /errorShots
 /old
+/cypress/screenshots
 /dist/
 /desktop/version.go
 
-# Playwright
-/test-results/
-/playwright-report/
-/playwright/.cache/
-
 # IDE
 .vscode/
 .idea/

.nycrc.json

@@ -4,13 +4,12 @@
   "check-coverage": false,
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": [
-    "e2e/**/*.*",
+    "cypress/**/*.*",
     "**/*.d.ts",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.browser.test.tsx",
+    "**/*.cy.tsx",
+    "**/*.cy.ts",
     "./coverage/**",
-    "./e2e/**",
+    "./cypress/**",
     "./dist/**",
     "node_modules"
   ],

.pre-commit-config.yaml

@@ -6,7 +6,7 @@ ci:
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v6.0.0
+    rev: v5.0.0
     hooks:
       - id: check-added-large-files
       - id: check-executables-have-shebangs

AGENTS.md

@@ -24,127 +24,24 @@ The project type checked and built with:
 npm run build
 ```
 
-Install the Playwright browser (first time only):
+To run the tests make sure that xvfb is installed:
 
 ```
-npx playwright install --with-deps chromium
+apt install xvfb
 ```
 
-Then run the end-to-end tests (Playwright starts the dev server automatically):
+Run the development server in the background with Vite:
 
 ```
-npm run test
+nohup npm run start &
 ```
 
-Run the unit tests with Vitest:
+Then start the Cypress tests with:
 
 ```
-npm run test-unit
+xvfb-run -a npm run test
 ```
 
 ## 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).

CHANGELOG.md

@@ -1,45 +1,5 @@
 ## main
 
-### ✨ Features and improvements
-- Replace Cypress with Playwright for end-to-end tests and Vitest browser mode (Playwright provider) for component tests; drop the `@shellygo/cypress-test-utils` helper in favour of a `MaputnikDriver` page object
-- _...Add new stuff here..._
-
-### 🐞 Bug fixes
-- _...Add new stuff here..._
-
-## 3.1.0
-
-### ✨ Features and improvements
-- Added translation to "Links" in debug modal
-- Add support for hillshade's color arrays and relief-color elevation expression
-- Change layers icons to make them a bit more distinct
-- Remove `@mdi` packages in favor of `react-icons`
-- Add ability to control the projection of the map - either globe or mercator
-- Add markdown support for doc related to the style-spec fields
-- Added global state modal to allow editing the global state
-- Added color highlight for problematic properties
-- Upgraded codemirror from version 5 to version 6
-- Add code editor to allow editing the entire style
-- Add support for sprite object in setting modal
-- Set the correct map view when opening a new style on an empty map
-- Allow root-relative urls in the stylefile
-
-### 🐞 Bug fixes
-
-- Improved the local style open modal and local file upload.
-- Fixed the Expression editor (for long expressions) being able to be float under other components further down
-- Fixed an issue when clicking on a popup and then clicking on the map again
-- Fix modal close button position
-- Fixed an issue with the generation of translations
-- Fix missing spec info when clicking next to a property
-- Fix Firefox open file that stopped working due to react upgrade
-- Fix issue with missing bottom error panel
-- Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
-- Fix error when using a source from localhost
-- Fix an issue with scrolling when using the code editor
-
-## 3.0.0
-
 ### ✨ Features and improvements
 - Fix radio/delete filter buttons styling regression
 - Add german translation
@@ -56,17 +16,13 @@
 - Remove usage of legacy `childContextTypes` API
 - Refactor Field components to use arrow function syntax
 - Replace react-autocomplete with Downshift in the autocomplete component
-- Add LocationIQ as supported map provider with access token field and gallery style
-- Use maputnik go binary for the docker image to allow file watching
-- Revmove support for `debug` and `localport` url parameters
-- Replace react-sortable-hoc with dnd-kit to avoid react console warnings and also use a maintained library
+- _...Add new stuff here..._
 
 ### 🐞 Bug fixes
 
 - Fix incorrect handing of network error response (#944)
 - Show an error when adding a layer with a duplicate ID
-- Replace deprecated `ReactDOM.render` usage with `createRoot` and drop the
-  `DOMNodeRemoved` cleanup hack
+- _...Add new stuff here..._
 
 ## 2.1.1
 

Dockerfile

@@ -1,14 +1,16 @@
-FROM golang:1.23-alpine AS builder
+FROM node:18 as builder
 WORKDIR /maputnik
 
-RUN apk add --no-cache nodejs npm make git gcc g++ libc-dev
+# Only copy package.json to prevent npm install from running on every build
+COPY package.json package-lock.json .npmrc ./
+RUN npm ci
 
 # Build maputnik
 COPY . .
-RUN npm ci
-RUN CGO_ENABLED=1 GOOS=linux npm run build-linux
+RUN npx vite build
 
-FROM alpine:latest
-WORKDIR /app
-COPY --from=builder /maputnik/desktop/bin/linux ./
-ENTRYPOINT ["/app/maputnik"]
+#---------------------------------------------------------------------------
+# Create a clean nginx-alpine slim image with just the build results
+FROM nginx:alpine-slim
+
+COPY --from=builder /maputnik/dist /usr/share/nginx/html/

README.md

@@ -18,15 +18,9 @@ targeted at developers and map designers.
 - In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
 
 ```bash
-docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main
+docker run -it --rm -p 8888:80 ghcr.io/maplibre/maputnik:main
 ```
 
-To see the CLI options (for example file watching or style serving) run:
-```bash
-docker run -it --rm -p 8888:8000 ghcr.io/maplibre/maputnik:main --help
-```
-You might need to mount a volume (`-v`) to be able to use these options.
-
 ## Documentation
 
 The documentation can be found in the [Wiki](https://github.com/maplibre/maputnik/wiki). You are welcome to collaborate!
@@ -79,45 +73,26 @@ npm run sort-styles
 ```
 
 ## Tests
+For E2E testing we use [Cypress](https://www.cypress.io/)
 
-### End-to-end tests
+ [Cypress](https://www.cypress.io/) doesn't start a server so you'll need to start one manually by running `npm run start`.
 
-For E2E testing we use [Playwright](https://playwright.dev/). The tests live in the [`e2e`](/e2e) directory and drive the app through the `MaputnikDriver` page object.
-
-The first time you run the tests, install the browser:
-
-```
-npx playwright install chromium
-```
-
-Playwright automatically starts the dev server (`npm run start`) for you, so you can just run:
+Now open a terminal and run the following using *chrome*:
 
 ```
 npm run test
 ```
-
-Some useful options:
-
+or *firefox*:
 ```
-# see the tests run in a headed browser
-npm run test -- --headed
-
-# run a single spec / filter by title
-npm run test -- e2e/map.spec.ts
-npm run test -- -g "zoom level"
-
-# open the interactive UI mode
-npx playwright test --ui
+npm run test -- --browser firefox
 ```
 
-Running the E2E tests also produces a code-coverage report in `coverage/` (collected via istanbul instrumentation of the dev server).
+See the following docs for more info: (Launching Browsers)[https://docs.cypress.io/guides/guides/launching-browsers]
 
-### Unit & component tests
-
-Unit tests and component tests run with [Vitest](https://vitest.dev/); component tests (`*.browser.test.tsx`) use Vitest's browser mode with the Playwright provider.
+You can also see the tests as they run or select which suites to run by executing:
 
 ```
-npm run test-unit
+npm run cy:open
 ```
 
 ## Release process

build/bump-version-changelog.js

@@ -10,12 +10,12 @@
  * https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
  */
 
-import * as fs from "fs";
+import * as fs from 'fs';
 
-const changelogPath = "CHANGELOG.md";
-let changelog = fs.readFileSync(changelogPath, "utf8");
-changelog = changelog.replace("## main", `## ${process.argv[2]}`);
-changelog = changelog.replaceAll("- _...Add new stuff here..._\n", "");
+const changelogPath = 'CHANGELOG.md';
+let changelog = fs.readFileSync(changelogPath, 'utf8');
+changelog = changelog.replace('## main', `## ${process.argv[2]}`);
+changelog = changelog.replaceAll('- _...Add new stuff here..._\n', '');
 changelog = `## main
 
 ### ✨ Features and improvements
@@ -26,4 +26,4 @@ changelog = `## main
 
 ` + changelog;
 
-fs.writeFileSync(changelogPath, changelog, "utf8");
+fs.writeFileSync(changelogPath, changelog, 'utf8');

build/release-notes.js

@@ -3,10 +3,10 @@
 // Copied from maplibre/maplibre-gl-js
 // https://github.com/maplibre/maplibre-gl-js/blob/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build/release-notes.js
 
-import * as fs from "fs";
+import * as fs from 'fs';
 
-const changelogPath = "CHANGELOG.md";
-const changelog = fs.readFileSync(changelogPath, "utf8");
+const changelogPath = 'CHANGELOG.md';
+const changelog = fs.readFileSync(changelogPath, 'utf8');
 
 /*
   Parse the raw changelog text and split it into individual releases.
@@ -25,8 +25,8 @@ let match;
 // eslint-disable-next-line no-cond-assign
 while (match = regex.exec(changelog)) {
   releaseNotes.push({
-    "version": match[1],
-    "changelog": match[2].trim(),
+    'version': match[1],
+    'changelog': match[2].trim(),
   });
 }
 
@@ -35,10 +35,10 @@ const previous = releaseNotes[1];
 
 //  Print the release notes template.
 
-let header = "Changes since previous version";
+let header = 'Changes since previous version'
 if (previous) {
   header = `https://github.com/maplibre/maputnik
-  [Changes](https://github.com/maplibre/maputnik/compare/v${previous.version}...v${latest.version}) since [Maputnik v${previous.version}](https://github.com/maplibre/maputnik/releases/tag/v${previous.version})`;
+  [Changes](https://github.com/maplibre/maputnik/compare/v${previous.version}...v${latest.version}) since [Maputnik v${previous.version}](https://github.com/maplibre/maputnik/releases/tag/v${previous.version})`
 }
 const templatedReleaseNotes = `${header}
 

cypress.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from "cypress";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      require("@cypress/code-coverage/task")(on, config);
+      return config;
+    },
+    baseUrl: "http://localhost:8888",
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+});

cypress/e2e/accessibility.cy.ts

@@ -0,0 +1,40 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("accessibility", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+
+  describe("skip links", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+    });
+
+    it("skip link to layer list", () => {
+      const selector = "root:skip:layer-list";
+      then(get.elementByTestId(selector)).shouldExist();
+      when.tab();
+      then(get.elementByTestId(selector)).shouldBeFocused();
+      when.click(selector);
+      then(get.skipTargetLayerList()).shouldBeFocused();
+    });
+
+    // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
+    it.skip("skip link to layer editor", () => {
+      const selector = "root:skip:layer-editor";
+      then(get.elementByTestId(selector)).shouldExist();
+      when.tab().tab();
+      then(get.elementByTestId(selector)).shouldBeFocused();
+      when.click(selector);
+      then(get.skipTargetLayerEditor()).shouldBeFocused();
+    });
+
+    it("skip link to map view", () => {
+      const selector = "root:skip:map-view";
+      then(get.elementByTestId(selector)).shouldExist();
+      when.tab().tab().tab();
+      then(get.elementByTestId(selector)).shouldBeFocused();
+      when.click(selector);
+      then(get.canvas()).shouldBeFocused();
+    });
+  });
+});

cypress/e2e/history.cy.ts

@@ -0,0 +1,125 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("history", () => {
+  const { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  beforeAndAfter();
+
+  let undoKeyCombo: string;
+  let redoKeyCombo: string;
+
+  before(() => {
+    const isMac = get.isMac();
+    undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
+    redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
+  });
+
+  it("undo/redo", () => {
+    when.setStyle("geojson");
+    when.modal.open();
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
+
+    when.modal.fillLayers({
+      id: "step 1",
+      type: "background",
+    });
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ],
+    });
+
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 2",
+      type: "background",
+    });
+
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 1",
+          type: "background",
+        },
+        {
+          id: "step 2",
+          type: "background",
+        },
+      ],
+    });
+
+    when.typeKeys(undoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ],
+    });
+
+    when.typeKeys(undoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
+
+    when.typeKeys(redoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ],
+    });
+
+    when.typeKeys(redoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 1",
+          type: "background",
+        },
+        {
+          id: "step 2",
+          type: "background",
+        },
+      ],
+    });
+  });
+
+  it("should not redo after undo and value change", () => {
+    when.setStyle("geojson");
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 1",
+      type: "background",
+    });
+
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 2",
+      type: "background",
+    });
+
+    when.typeKeys(undoKeyCombo);
+    when.typeKeys(undoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
+
+    when.modal.open();
+    when.modal.fillLayers({
+      id: "step 3",
+      type: "background",
+    });
+
+    when.typeKeys(redoKeyCombo);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "step 3",
+          type: "background",
+        },
+      ],
+    });
+  });
+});

cypress/e2e/i18n.cy.ts

@@ -0,0 +1,35 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("i18n", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+
+  describe("language detector", () => {
+    it("English", () => {
+      const url = "?lng=en";
+      when.visit(url);
+      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
+    });
+
+    it("Japanese", () => {
+      const url = "?lng=ja";
+      when.visit(url);
+      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
+    });
+  });
+
+  describe("language switcher", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+    });
+
+    it("the language switcher switches to Japanese", () => {
+      const selector = "maputnik-lang-select";
+      then(get.elementByTestId(selector)).shouldExist();
+      when.select(selector, "ja");
+      then(get.elementByTestId(selector)).shouldHaveValue("ja");
+
+      then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
+    });
+  });
+});

cypress/e2e/keyboard.cy.ts

@@ -0,0 +1,60 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("keyboard", () => {
+  const { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
+  beforeAndAfter();
+  describe("shortcuts", () => {
+    beforeEach(() => {
+      given.setupMockBackedResponses();
+      when.setStyle("");
+    });
+
+    it("ESC should unfocus", () => {
+      const targetSelector = "maputnik-select";
+      when.focus(targetSelector);
+      then(get.elementByTestId(targetSelector)).shouldBeFocused();
+      when.typeKeys("{esc}");
+      then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
+    });
+
+    it("'?' should show shortcuts modal", () => {
+      when.typeKeys("?");
+      then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
+    });
+
+    it("'o' should show open modal", () => {
+      when.typeKeys("o");
+      then(get.elementByTestId("modal:open")).shouldBeVisible();
+    });
+
+    it("'e' should show export modal", () => {
+      when.typeKeys("e");
+      then(get.elementByTestId("modal:export")).shouldBeVisible();
+    });
+
+    it("'d' should show sources modal", () => {
+      when.typeKeys("d");
+      then(get.elementByTestId("modal:sources")).shouldBeVisible();
+    });
+
+    it("'s' should show settings modal", () => {
+      when.typeKeys("s");
+      then(get.elementByTestId("modal:settings")).shouldBeVisible();
+    });
+
+    it("'i' should change map to inspect mode", () => {
+      when.typeKeys("i");
+      then(get.inputValue("maputnik-select")).shouldEqual("inspect");
+    });
+
+    it("'m' should focus map", () => {
+      when.typeKeys("m");
+      then(get.canvas()).shouldBeFocused();
+    });
+
+    it("'!' should show debug modal", () => {
+      when.typeKeys("!");
+      then(get.elementByTestId("modal:debug")).shouldBeVisible();
+    });
+  });
+});

cypress/e2e/layers.cy.ts

@@ -0,0 +1,526 @@
+import { v1 as uuid } from "uuid";
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("layers", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+  beforeEach(() => {
+    when.setStyle("both");
+    when.modal.open();
+  });
+
+  describe("ops", () => {
+    let id: string;
+    beforeEach(() => {
+      id = when.modal.fillLayers({
+        type: "background",
+      });
+    });
+
+    it("should update layers in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "background",
+          },
+        ],
+      });
+    });
+
+    describe("when clicking delete", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":delete");
+      });
+      it("should empty layers in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [],
+        });
+      });
+    });
+
+    describe("when clicking duplicate", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":copy");
+      });
+      it("should add copy layer in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: id + "-copy",
+              type: "background",
+            },
+            {
+              id: id,
+              type: "background",
+            },
+          ],
+        });
+      });
+    });
+
+    describe("when clicking hide", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":toggle-visibility");
+      });
+
+      it("should update visibility to none in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: id,
+              type: "background",
+              layout: {
+                visibility: "none",
+              },
+            },
+          ],
+        });
+      });
+
+      describe("when clicking show", () => {
+        beforeEach(() => {
+          when.click("layer-list-item:" + id + ":toggle-visibility");
+        });
+
+        it("should update visibility to visible in local storage", () => {
+          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+            layers: [
+              {
+                id: id,
+                type: "background",
+                layout: {
+                  visibility: "visible",
+                },
+              },
+            ],
+          });
+        });
+      });
+    });
+  });
+  describe("background", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "background",
+      });
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "background",
+          },
+        ],
+      });
+    });
+
+    describe("modify", () => {
+      function createBackground() {
+        // Setup
+        const id = uuid();
+
+        when.selectWithin("add-layer.layer-type", "background");
+        when.setValue("add-layer.layer-id.input", "background:" + id);
+
+        when.click("add-layer");
+
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: "background:" + id,
+              type: "background",
+            },
+          ],
+        });
+        return id;
+      }
+
+      // ====> THESE SHOULD BE FROM THE SPEC
+      describe("layer", () => {
+        it("expand/collapse");
+        it("id", () => {
+          const bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+
+          const id = uuid();
+          when.setValue("layer-editor.layer-id.input", "foobar:" + id);
+          when.click("min-zoom");
+
+          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+            layers: [
+              {
+                id: "foobar:" + id,
+                type: "background",
+              },
+            ],
+          });
+        });
+
+        describe("min-zoom", () => {
+          let bgId: string;
+
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("min-zoom.input-text", "1");
+            when.click("layer-editor.layer-id");
+          });
+
+          it("should update min-zoom in local storage", () => {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                  minzoom: 1,
+                },
+              ],
+            });
+          });
+
+          it("when clicking next layer should update style on local storage", () => {
+            when.type("min-zoom.input-text", "{backspace}");
+            when.click("max-zoom.input-text");
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                  minzoom: 1,
+                },
+              ],
+            });
+          });
+        });
+
+        describe("max-zoom", () => {
+          let bgId: string;
+
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("max-zoom.input-text", "1");
+            when.click("layer-editor.layer-id");
+          });
+
+          it("should update style in local storage", () => {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                  maxzoom: 1,
+                },
+              ],
+            });
+          });
+        });
+
+        describe("comments", () => {
+          let bgId: string;
+          const comment = "42";
+
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("layer-comment.input", comment);
+            when.click("layer-editor.layer-id");
+          });
+
+          it("should update style in local storage", () => {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                  metadata: {
+                    "maputnik:comment": comment,
+                  },
+                },
+              ],
+            });
+          });
+
+          describe("when unsetting", () => {
+            beforeEach(() => {
+              when.clear("layer-comment.input");
+              when.click("min-zoom.input-text");
+            });
+
+            it("should update style in local storage", () => {
+              then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+                layers: [
+                  {
+                    id: "background:" + bgId,
+                    type: "background",
+                  },
+                ],
+              });
+            });
+          });
+        });
+
+        describe("color", () => {
+          let bgId: string;
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.click("spec-field:background-color");
+          });
+
+          it("should update style in local storage", () => {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                },
+              ],
+            });
+          });
+        });
+
+        describe("opacity", () => {
+          let bgId: string;
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.type("spec-field-input:background-opacity", "0.");
+          });
+
+          it("should keep '.' in the input field", () => {
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
+          });
+
+          it("should revert to a valid value when focus out", () => {
+            when.click("layer-list-item:background:" + bgId);
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
+          });
+        });
+
+      });
+
+      describe("filter", () => {
+        it("expand/collapse");
+        it("compound filter");
+      });
+
+      describe("paint", () => {
+        it("expand/collapse");
+        it("color");
+        it("pattern");
+        it("opacity");
+      });
+      // <=====
+
+      describe("json-editor", () => {
+        it("expand/collapse");
+        it("modify");
+
+        // TODO
+        it.skip("parse error", () => {
+          const bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+
+          const errorSelector = ".CodeMirror-lint-marker-error";
+          then(get.elementByTestId(errorSelector)).shouldNotExist();
+
+          when.click(".CodeMirror");
+          when.typeKeys(
+            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+          );
+          then(get.elementByTestId(errorSelector)).shouldExist();
+        });
+      });
+    });
+  });
+
+  describe("fill", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "fill",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "fill",
+            source: "example",
+          },
+        ],
+      });
+    });
+
+    // TODO: Change source
+    it("change source");
+  });
+
+  describe("line", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "line",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "line",
+            source: "example",
+          },
+        ],
+      });
+    });
+
+    it("groups", () => {
+      // TODO
+      // Click each of the layer groups.
+    });
+  });
+
+  describe("symbol", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "symbol",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "symbol",
+            source: "example",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("raster", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "raster",
+        layer: "raster",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "raster",
+            source: "raster",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("circle", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "circle",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("fill extrusion", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "fill-extrusion",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "fill-extrusion",
+            source: "example",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("groups", () => {
+    it("simple", () => {
+      when.setStyle("geojson");
+
+      when.modal.open();
+      when.modal.fillLayers({
+        id: "foo",
+        type: "background",
+      });
+
+      when.modal.open();
+      when.modal.fillLayers({
+        id: "foo_bar",
+        type: "background",
+      });
+
+      when.modal.open();
+      when.modal.fillLayers({
+        id: "foo_bar_baz",
+        type: "background",
+      });
+
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
+      then(
+        get.elementByTestId("layer-list-item:foo_bar_baz")
+      ).shouldNotBeVisible();
+      when.click("layer-list-group:foo-0");
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
+      then(
+        get.elementByTestId("layer-list-item:foo_bar_baz")
+      ).shouldBeVisible();
+    });
+  });
+
+
+  describe("layereditor jsonlint should error", ()=>{
+
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "circle",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ],
+      });
+
+      const sourceText = get.elementByText('"source"');
+
+      sourceText.click();
+      sourceText.type("\"");
+
+      const error = get.element('.CodeMirror-lint-marker-error');
+      error.should('exist');
+    });
+  });
+});

cypress/e2e/map.cy.ts

@@ -0,0 +1,32 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("map", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+  describe("zoom level", () => {
+    it("via url", () => {
+      const zoomLevel = 12.37;
+      when.setStyle("geojson", zoomLevel);
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + zoomLevel
+      );
+    });
+
+    it("via map controls", () => {
+      const zoomLevel = 12.37;
+      when.setStyle("geojson", zoomLevel);
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      when.clickZoomIn();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + (zoomLevel + 1)
+      );
+    });
+  });
+
+  describe("search", () => {
+    it('should exist', () => {
+      then(get.searchControl()).shouldBeVisible();
+    });
+  });
+});

cypress/e2e/maputnik-cypress-helper.ts

@@ -0,0 +1,19 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+
+export default class MaputnikCypressHelper {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+
+  public given = {
+    ...this.helper.given,
+  };
+
+  public get = {
+    ...this.helper.get,
+  };
+
+  public when = {
+    ...this.helper.when,
+  };
+
+  public beforeAndAfter = this.helper.beforeAndAfter;
+}

cypress/e2e/maputnik-driver.ts

@@ -0,0 +1,188 @@
+/// <reference types="cypress-plugin-tab" />
+
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
+import MaputnikCypressHelper from "./maputnik-cypress-helper";
+import ModalDriver from "./modal-driver";
+const baseUrl = "http://localhost:8888/";
+
+const styleFromWindow = (win: Window) => {
+  const styleId = win.localStorage.getItem("maputnik:latest_style");
+  const styleItemKey = `maputnik:style:${styleId}`;
+  const styleItem = win.localStorage.getItem(styleItemKey);
+  if (!styleItem) throw new Error("Could not get styleItem from localStorage");
+  const obj = JSON.parse(styleItem);
+  return obj;
+};
+
+export class MaputnikAssertable<T> extends Assertable<T> {
+  shouldEqualToStoredStyle = () =>
+    then(
+      new CypressHelper().get.window().then((win: Window) => {
+        const style = styleFromWindow(win);
+        then(this.chainable).shouldDeepNestedInclude(style);
+      })
+    );
+}
+
+export class MaputnikDriver {
+  private helper = new MaputnikCypressHelper();
+  private modalDriver = new ModalDriver();
+
+  public beforeAndAfter = () => {
+    beforeEach(() => {
+      this.given.setupMockBackedResponses();
+      this.when.setStyle("both");
+    });
+  };
+
+  public then = (chainable: Cypress.Chainable<any>) =>
+    new MaputnikAssertable(chainable);
+
+  public given = {
+    ...this.helper.given,
+    setupMockBackedResponses: () => {
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style.json",
+        response: {
+          fixture: "example-style.json",
+        },
+        alias: "example-style.json",
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-layer-style.json",
+        response: {
+          fixture: "example-layer-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "geojson-style.json",
+        response: {
+          fixture: "geojson-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "raster-style.json",
+        response: {
+          fixture: "raster-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "geojson-raster-style.json",
+        response: {
+          fixture: "geojson-raster-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "*example.local/*",
+        response: [],
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "*example.com/*",
+        response: [],
+      });
+    },
+  };
+
+  public when = {
+    ...this.helper.when,
+    modal: this.modalDriver.when,
+    within: (selector: string, fn: () => void) => {
+      this.helper.when.within(fn, selector);
+    },
+    tab: () => this.helper.get.element("body").tab(),
+    waitForExampleFileResponse: () => {
+      this.helper.when.waitForResponse("example-style.json");
+    },
+    chooseExampleFile: () => {
+      this.helper.get
+        .bySelector("type", "file")
+        .selectFile("cypress/fixtures/example-style.json", { force: true });
+    },
+    setStyle: (
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
+      zoom?: number
+    ) => {
+      let url = "?debug";
+      switch (styleProperties) {
+      case "geojson":
+        url += `&style=${baseUrl}geojson-style.json`;
+        break;
+      case "raster":
+        url += `&style=${baseUrl}raster-style.json`;
+        break;
+      case "both":
+        url += `&style=${baseUrl}geojson-raster-style.json`;
+        break;
+      case "layer":
+        url += `&style=${baseUrl}/example-layer-style.json`;
+        break;
+      }
+      if (zoom) {
+        url += `#${zoom}/41.3805/2.1635`;
+      }
+      this.helper.when.visit(baseUrl + url);
+      if (styleProperties) {
+        this.helper.when.acceptConfirm();
+      }
+      // when methods should not include assertions
+      const toolbarLink = this.helper.get.elementByTestId("toolbar:link")
+      toolbarLink.scrollIntoView();
+      toolbarLink.should("be.visible");
+    },
+
+    typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
+
+    clickZoomIn: () => {
+      this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
+    },
+
+    selectWithin: (selector: string, value: string) => {
+      this.when.within(selector, () => {
+        this.helper.get.element("select").select(value);
+      });
+    },
+
+    select: (selector: string, value: string) => {
+      this.helper.get.elementByTestId(selector).select(value);
+    },
+
+    focus: (selector: string) => {
+      this.helper.when.focus(selector);
+    },
+
+    setValue: (selector: string, text: string) => {
+      this.helper.get
+        .elementByTestId(selector)
+        .clear()
+        .type(text, { parseSpecialCharSequences: false });
+    },
+  };
+
+  public get = {
+    ...this.helper.get,
+    isMac: () => {
+      return Cypress.platform === "darwin";
+    },
+
+    styleFromLocalStorage: () =>
+      this.helper.get.window().then((win) => styleFromWindow(win)),
+
+    exampleFileUrl: () => {
+      return baseUrl + "example-style.json";
+    },
+    skipTargetLayerList: () =>
+      this.helper.get.elementByTestId("skip-target-layer-list"),
+    skipTargetLayerEditor: () =>
+      this.helper.get.elementByTestId("skip-target-layer-editor"),
+    canvas: () => this.helper.get.element("canvas"),
+    searchControl: () => this.helper.get.element('.maplibregl-ctrl-geocoder')
+  };
+}

cypress/e2e/modal-driver.ts

@@ -0,0 +1,40 @@
+import { v1 as uuid } from "uuid";
+import MaputnikCypressHelper from "./maputnik-cypress-helper";
+
+export default class ModalDriver {
+  private helper = new MaputnikCypressHelper();
+
+  public when = {
+    fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
+      // Having logic in test code is an anti pattern.
+      // This should be splitted to multiple single responsibility functions
+      const type = opts.type;
+      const layer = opts.layer;
+      let id;
+      if (opts.id) {
+        id = opts.id;
+      } else {
+        id = `${type}:${uuid()}`;
+      }
+      this.helper.when.selectOption("add-layer.layer-type.select", type);
+      this.helper.when.type("add-layer.layer-id.input", id);
+
+      if (layer) {
+        this.helper.when.within(() => {
+          this.helper.get.element("input").type(layer!);
+        }, "add-layer.layer-source-block");
+      }
+      this.helper.when.click("add-layer");
+
+      return id;
+    },
+
+    open: () => {
+      this.helper.when.click("layer-list:add-layer");
+    },
+
+    close: (key: string) => {
+      this.helper.when.click(key + ".close-modal");
+    },
+  };
+}

cypress/e2e/modals.cy.ts

@@ -0,0 +1,334 @@
+import { MaputnikDriver } from "./maputnik-driver";
+import tokens from "../../src/config/tokens.json" with {type: "json"};
+
+describe("modals", () => {
+  const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
+  beforeAndAfter();
+
+  beforeEach(() => {
+    when.setStyle("");
+  });
+  describe("open", () => {
+    beforeEach(() => {
+      when.click("nav:open");
+    });
+
+    it("close", () => {
+      when.modal.close("modal:open");
+      then(get.elementByTestId("modal:open")).shouldNotExist();
+    });
+
+    it.skip("upload", () => {
+      // HM: I was not able to make the following choose file actually to select a file and close the modal...
+      when.chooseExampleFile();
+      then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
+    });
+
+    describe("when click open url", () => {
+      beforeEach(() => {
+        const styleFileUrl = get.exampleFileUrl();
+
+        when.setValue("modal:open.url.input", styleFileUrl);
+        when.click("modal:open.url.button");
+        when.wait(200);
+      });
+      it("load from url", () => {
+        then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
+      });
+    });
+  });
+
+  describe("shortcuts", () => {
+    it("open/close", () => {
+      when.setStyle("");
+      when.typeKeys("?");
+      when.modal.close("modal:shortcuts");
+      then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
+    });
+  });
+
+  describe("export", () => {
+    beforeEach(() => {
+      when.click("nav:export");
+    });
+
+    it("close", () => {
+      when.modal.close("modal:export");
+      then(get.elementByTestId("modal:export")).shouldNotExist();
+    });
+
+    // TODO: Work out how to download a file and check the contents
+    it("download");
+  });
+
+  describe("sources", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+      when.click("nav:sources");
+    });
+
+    it("active sources");
+    it("public source");
+
+    it("add new source", () => {
+      const sourceId = "n1z2v3r";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_vector");
+      when.select("modal:sources.add.scheme_type", "tms");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        scheme: "tms",
+      });
+    });
+
+    it("add new pmtiles source", () => {
+      const sourceId = "pmtilestest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "pmtiles_vector");
+      when.setValue("modal:sources.add.source_url", "https://data.source.coop/protomaps/openstreetmap/v4.pmtiles");
+      when.click("modal:sources.add.add_source");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sources: {
+          pmtilestest: {
+            type: "vector",
+            url: "pmtiles://https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
+          },
+        },
+      });
+    });
+
+    it("add new raster source", () => {
+      const sourceId = "rastertest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_raster");
+      when.select("modal:sources.add.scheme_type", "xyz");
+      when.setValue("modal:sources.add.tile_size", "128");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        tileSize: 128,
+      });
+    });
+  });
+
+  describe("inspect", () => {
+    it("toggle", () => {
+      // There is no assertion in this test
+      when.setStyle("geojson");
+      when.select("maputnik-select", "inspect");
+    });
+  });
+
+  describe("style settings", () => {
+    beforeEach(() => {
+      when.click("nav:settings");
+    });
+
+    describe("when click name filed spec information", () => {
+      beforeEach(() => {
+        when.click("field-doc-button-Name");
+      });
+
+      it("should show the spec information", () => {
+        then(get.elementsText("spec-field-doc")).shouldInclude(
+          "name for the style"
+        );
+      });
+    });
+
+    describe("when set name and click owner", () => {
+      beforeEach(() => {
+        when.setValue("modal:settings.name", "foobar");
+        when.click("modal:settings.owner");
+        when.wait(200);
+      });
+
+      it("show name specifications", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          name: "foobar",
+        });
+      });
+    });
+
+    describe("when set owner and click name", () => {
+      beforeEach(() => {
+        when.setValue("modal:settings.owner", "foobar");
+        when.click("modal:settings.name");
+        when.wait(200);
+      });
+      it("should update owner in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          owner: "foobar",
+        });
+      });
+    });
+
+    it("sprite url", () => {
+      when.setValue("modal:settings.sprite", "http://example.com");
+      when.click("modal:settings.name");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sprite: "http://example.com",
+      });
+    });
+    it("glyphs url", () => {
+      const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
+      when.setValue("modal:settings.glyphs", glyphsUrl);
+      when.click("modal:settings.name");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        glyphs: glyphsUrl,
+      });
+    });
+
+    it("maptiler access token", () => {
+      const apiKey = "testing123";
+      when.setValue(
+        "modal:settings.maputnik:openmaptiles_access_token",
+        apiKey
+      );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().then((style) => style.metadata)
+      ).shouldInclude({
+        "maputnik:openmaptiles_access_token": apiKey,
+      });
+    });
+
+    it("thunderforest access token", () => {
+      const apiKey = "testing123";
+      when.setValue(
+        "modal:settings.maputnik:thunderforest_access_token",
+        apiKey
+      );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().then((style) => style.metadata)
+      ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
+    });
+
+    it("stadia access token", () => {
+      const apiKey = "testing123";
+      when.setValue(
+        "modal:settings.maputnik:stadia_access_token",
+        apiKey
+      );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().then((style) => style.metadata)
+      ).shouldInclude({ "maputnik:stadia_access_token": apiKey });
+    });
+
+    it("style renderer", () => {
+      cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
+      when.select("modal:settings.maputnik:renderer", "ol");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "ol"
+      );
+
+      when.click("modal:settings.name");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:renderer": "ol" },
+      });
+    });
+
+
+
+    it("inlcude API key when change renderer", () => {
+
+      when.click("modal:settings.close-modal")
+      when.click("nav:open");
+
+      get.elementByAttribute('aria-label', "MapTiler Basic").should('exist').click();
+      when.wait(1000);
+      when.click("nav:settings");
+
+      when.select("modal:settings.maputnik:renderer", "mlgljs");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "mlgljs"
+      );
+
+      when.select("modal:settings.maputnik:renderer", "ol");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "ol"
+      );
+
+      given.intercept("https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=*", "tileRequest", "GET");
+
+      when.select("modal:settings.maputnik:renderer", "mlgljs");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "mlgljs"
+      );
+
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+      when.waitForResponse("tileRequest").its("request").its("url").should("include", `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`);
+    });
+
+  });
+
+  describe("add layer", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+      when.modal.open();
+    });
+
+    it("shows duplicate id error", () => {
+      when.setValue("add-layer.layer-id.input", "background");
+      when.click("add-layer");
+      then(get.elementByTestId("modal:add-layer")).shouldExist();
+      then(get.element(".maputnik-modal-error")).shouldContainText(
+        "Layer ID already exists"
+      );
+    });
+  });
+
+  describe("sources", () => {
+    it("toggle");
+  });
+
+  describe("Handle localStorage QuotaExceededError", () => {
+    it("handles quota exceeded error when opening style from URL", () => {
+      // Clear localStorage to start fresh
+      cy.clearLocalStorage();
+
+      // fill localStorage until we get a QuotaExceededError
+      cy.window().then(win => {
+        let chunkSize = 1000;
+        const chunk = new Array(chunkSize).join("x");
+        let index = 0;
+
+        // Keep adding until we hit the quota
+        while (true) {
+          try {
+            const key = `maputnik:fill-${index++}`;
+            win.localStorage.setItem(key, chunk);
+          } catch (e: any) {
+            // Verify it's a quota error
+            if (e.name === 'QuotaExceededError') {
+              if (chunkSize <= 1) return;
+              else {
+                chunkSize /= 2;
+                continue;
+              }
+            }
+            throw e; // Unexpected error
+          }
+        }
+      });
+
+      // Open the style via URL input
+      when.click("nav:open");
+      when.setValue("modal:open.url.input", get.exampleFileUrl());
+      when.click("modal:open.url.button");
+
+      then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
+      then(get.styleFromLocalStorage()).shouldExist();
+    });
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,37 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  /* eslint-disable @typescript-eslint/no-namespace */
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "@cypress/code-coverage/support";
+import "cypress-plugin-tab";
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

desktop/Makefile

@@ -2,7 +2,8 @@ SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
 VERSION := $(shell node -p "require('../package.json').version")
-GOBIN := $(or $(shell if [ -d /go/bin ]; then echo "/go/bin"; fi),$(HOME)/go/bin)
+GOPATH := $(if $(GOPATH),$(GOPATH),$(HOME)/go)
+GOBIN := $(if $(GOBIN),$(GOBIN),$(HOME)/go/bin)
 
 all: $(BINARY)
 
@@ -10,10 +11,6 @@ $(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go win
 	$(GOBIN)/go-winres make --product-version=$(VERSION)
 	$(GOBIN)/gox -osarch "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"
 
-bin/linux/$(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go winres/winres.json
-	$(GOBIN)/go-winres make --product-version=$(VERSION)
-	$(GOBIN)/gox -osarch "linux/amd64" -output "bin/{{.OS}}/${BINARY}"
-
 winres/winres.json: winres/winres_template.json
 	sed 's/{{.Version}}/$(VERSION)/g' winres/winres_template.json > $@
 

desktop/maputnik.go

@@ -5,7 +5,8 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
-    "github.com/GeertJohan/go.rice"
+
+        "github.com/GeertJohan/go.rice"
 	"github.com/gorilla/handlers"
 	"github.com/gorilla/mux"
 	"github.com/maputnik/desktop/filewatch"

e2e/access-tokens.spec.ts

@@ -1,60 +0,0 @@
-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/accessibility.spec.ts

@@ -1,48 +0,0 @@
-import { test, describe, beforeEach } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("accessibility", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  describe("skip links", () => {
-    beforeEach(async () => {
-      await when.setStyle("layer");
-    });
-
-    test("skip link to layer list", async () => {
-      const selector = "root:skip:layer-list";
-      await then(get.elementByTestId(selector)).shouldExist();
-      await when.tab();
-      await then(get.elementByTestId(selector)).shouldBeFocused();
-      await when.click(selector);
-      await then(get.skipTargetLayerList()).shouldBeFocused();
-    });
-
-    test("skip link to layer editor", async () => {
-      const selector = "root:skip:layer-editor";
-      await then(get.elementByTestId(selector)).shouldExist();
-      await then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
-      await when.tab();
-      await when.tab();
-      await then(get.elementByTestId(selector)).shouldBeFocused();
-      await when.click(selector);
-      await then(get.skipTargetLayerEditor()).shouldBeFocused();
-    });
-
-    test("skip link to map view", async () => {
-      const selector = "root:skip:map-view";
-      await then(get.elementByTestId(selector)).shouldExist();
-      await when.tab();
-      await when.tab();
-      await when.tab();
-      await then(get.elementByTestId(selector)).shouldBeFocused();
-      await when.click(selector);
-      await then(get.canvas()).shouldBeFocused();
-    });
-  });
-});

e2e/code-editor.spec.ts

@@ -1,23 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("code editor", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  test("open code editor", async () => {
-    await when.click("nav:code-editor");
-    await then(get.element(".maputnik-code-editor")).shouldExist();
-  });
-
-  test("closes code editor", async () => {
-    await when.click("nav:code-editor");
-    await then(get.element(".maputnik-code-editor")).shouldExist();
-    await when.click("nav:code-editor");
-    await then(get.element(".maputnik-code-editor")).shouldNotExist();
-  });
-});

e2e/fixtures/access-token-style.json

@@ -1,22 +0,0 @@
-{
-  "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/fixtures/example-style-with-fonts.json

@@ -1,38 +0,0 @@
-{
-  "id": "test-style",
-  "version": 8,
-  "name": "Test Style",
-  "metadata": {
-    "maputnik:renderer": "mlgljs"
-  },
-  "sources": {
-    "example": {
-        "type": "geojson",
-        "data": {
-            "type": "FeatureCollection",
-            "features":[{
-                "type": "Feature",
-                "properties": {
-                    "name": "Dinagat Islands"
-                },
-                "geometry":{
-                    "type": "Point",
-                    "coordinates": [125.6, 10.1]
-                }
-            }]
-        }
-    }
-  },
-  "glyphs": "https://www.glyph-server.com/fonts/{fontstack}/{range}.pbf",
-  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
-  "layers": [
-    {
-      "id": "label",
-      "type": "symbol",
-      "source": "example",
-      "layout": {
-        "text-font": ["Font"]
-      }
-    }
-  ]
-}

e2e/fixtures/example-style-with-zoom-5-and-center-50-50.json

@@ -1,19 +0,0 @@
-{
-    "id": "test-style",
-    "center": [50,50],
-    "zoom": 5,
-    "version": 8,
-    "name": "Test Style",
-    "sources": {
-        "rectangles": {
-        "type": "geojson",
-        "data": {
-            "type": "FeatureCollection",
-            "features": []
-        }
-      }
-    },
-    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "layers": []
-}

e2e/fixtures/example-style-with-zoom-7-and-center-0-51.json

@@ -1,17 +0,0 @@
-{
-    "id": "test-style",
-    "center": [0,51],
-    "zoom": 7,
-    "version": 8,
-    "name": "Test Style",
-    "sources": {
-        "rectangles": {
-        "type": "geojson",
-        "data": {
-            "type": "FeatureCollection",
-            "features": []
-        }
-      }
-    },
-    "layers": []
-}

e2e/fixtures/rectangles-style.json

@@ -1,92 +0,0 @@
-{
-  "version": 8,
-  "sources": {
-    "rectangles": {
-      "type": "geojson",
-      "data": {
-        "type": "FeatureCollection",
-        "features": [
-          {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-              "type": "Polygon",
-              "coordinates": [
-                [
-                  [
-                    -130.78125,
-                    -33.13755119234615
-                  ],
-                  [
-                    -130.78125,
-                    63.548552232036414
-                  ],
-                  [
-                    15.468749999999998,
-                    63.548552232036414
-                  ],
-                  [
-                    15.468749999999998,
-                    -33.13755119234615
-                  ],
-                  [
-                    -130.78125,
-                    -33.13755119234615
-                  ]
-                ]
-              ]
-            }
-          },
-          {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-              "type": "Polygon",
-              "coordinates": [
-                [
-                  [
-                    -48.515625,
-                    -54.97761367069625
-                  ],
-                  [
-                    -48.515625,
-                    36.5978891330702
-                  ],
-                  [
-                    169.45312499999997,
-                    36.5978891330702
-                  ],
-                  [
-                    169.45312499999997,
-                    -54.97761367069625
-                  ],
-                  [
-                    -48.515625,
-                    -54.97761367069625
-                  ]
-                ]
-              ]
-            }
-          }
-        ]
-      }
-    }
-  },
-  "layers": [
-    {
-      "id": "background",
-      "type": "background",
-      "paint": {
-        "background-color": "white"
-      }
-    },
-    {
-      "id": "rectangles",
-      "type": "fill",
-      "source": "rectangles",
-      "paint": {
-        "fill-opacity": 0.3
-      }
-    }
-  ]
-}

e2e/history.spec.ts

@@ -1,90 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("history", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  const undoKeyCombo = process.platform === "darwin" ? "{meta}z" : "{ctrl}z";
-  const redoKeyCombo = process.platform === "darwin" ? "{meta}{shift}z" : "{ctrl}y";
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  test("undo/redo", async () => {
-    await when.setStyle("geojson");
-    await when.modal.open();
-
-    await when.modal.fillLayers({
-      id: "step 1",
-      type: "background",
-    });
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "step 1", type: "background" }],
-    });
-
-    await when.modal.open();
-    await when.modal.fillLayers({
-      id: "step 2",
-      type: "background",
-    });
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [
-        { id: "step 1", type: "background" },
-        { id: "step 2", type: "background" },
-      ],
-    });
-
-    await when.typeKeys(undoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "step 1", type: "background" }],
-    });
-
-    await when.typeKeys(undoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
-
-    await when.typeKeys(redoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "step 1", type: "background" }],
-    });
-
-    await when.typeKeys(redoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [
-        { id: "step 1", type: "background" },
-        { id: "step 2", type: "background" },
-      ],
-    });
-  });
-
-  test("should not redo after undo and value change", async () => {
-    await when.setStyle("geojson");
-    await when.modal.open();
-    await when.modal.fillLayers({
-      id: "step 1",
-      type: "background",
-    });
-
-    await when.modal.open();
-    await when.modal.fillLayers({
-      id: "step 2",
-      type: "background",
-    });
-
-    await when.typeKeys(undoKeyCombo);
-    await when.typeKeys(undoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
-
-    await when.modal.open();
-    await when.modal.fillLayers({
-      id: "step 3",
-      type: "background",
-    });
-
-    await when.typeKeys(redoKeyCombo);
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "step 3", type: "background" }],
-    });
-  });
-});

e2e/i18n.spec.ts

@@ -1,38 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("i18n", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  describe("language detector", () => {
-    test("English", async () => {
-      await when.visit("?lng=en");
-      await then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
-    });
-
-    test("Japanese", async () => {
-      await when.visit("?lng=ja");
-      await then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
-    });
-  });
-
-  describe("language switcher", () => {
-    beforeEach(async () => {
-      await when.setStyle("layer");
-    });
-
-    test("the language switcher switches to Japanese", async () => {
-      const selector = "maputnik-lang-select";
-      await then(get.elementByTestId(selector)).shouldExist();
-      await when.select(selector, "ja");
-      await then(get.elementByTestId(selector)).shouldHaveValue("ja");
-
-      await then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
-    });
-  });
-});

e2e/keyboard.spec.ts

@@ -1,66 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("keyboard", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  describe("shortcuts", () => {
-    beforeEach(async () => {
-      await given.setupMockBackedResponses();
-      await when.setStyle("");
-    });
-
-    test("ESC should unfocus", async () => {
-      const targetSelector = "maputnik-select";
-      await when.focus(targetSelector);
-      await then(get.elementByTestId(targetSelector)).shouldBeFocused();
-      await when.typeKeys("{esc}");
-      await then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
-    });
-
-    test("'?' should show shortcuts modal", async () => {
-      await when.typeKeys("?");
-      await then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
-    });
-
-    test("'o' should show open modal", async () => {
-      await when.typeKeys("o");
-      await then(get.elementByTestId("modal:open")).shouldBeVisible();
-    });
-
-    test("'e' should show export modal", async () => {
-      await when.typeKeys("e");
-      await then(get.elementByTestId("modal:export")).shouldBeVisible();
-    });
-
-    test("'d' should show sources modal", async () => {
-      await when.typeKeys("d");
-      await then(get.elementByTestId("modal:sources")).shouldBeVisible();
-    });
-
-    test("'s' should show settings modal", async () => {
-      await when.typeKeys("s");
-      await then(get.elementByTestId("modal:settings")).shouldBeVisible();
-    });
-
-    test("'i' should change map to inspect mode", async () => {
-      await when.typeKeys("i");
-      await then(get.inputValue("maputnik-select")).shouldEqual("inspect");
-    });
-
-    test("'m' should focus map", async () => {
-      await when.typeKeys("m");
-      await then(get.canvas()).shouldBeFocused();
-    });
-
-    test("'!' should show debug modal", async () => {
-      await when.typeKeys("!");
-      await then(get.elementByTestId("modal:debug")).shouldBeVisible();
-    });
-  });
-});

e2e/layer-editor.spec.ts

@@ -1,604 +0,0 @@
-import { v1 as uuid } from "uuid";
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("layer editor", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-    await when.modal.open();
-  });
-
-  async function createBackground() {
-    const id = uuid();
-
-    await when.selectWithin("add-layer.layer-type", "background");
-    await when.setValue("add-layer.layer-id.input", "background:" + id);
-
-    await when.click("add-layer");
-
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "background:" + id, type: "background" }],
-    });
-    return id;
-  }
-
-  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();
-
-    await when.click("layer-list-item:background:" + bgId);
-
-    const id = uuid();
-    await when.setValue("layer-editor.layer-id.input", "foobar:" + id);
-    await when.click("min-zoom");
-
-    await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      layers: [{ id: "foobar:" + id, type: "background" }],
-    });
-  });
-
-  describe("source", () => {
-    test("should show error when the source is invalid", async () => {
-      await when.modal.fillLayers({
-        type: "circle",
-        layer: "invalid",
-      });
-      await then(
-        get.element(".maputnik-input-block--error .maputnik-input-block-label")
-      ).shouldHaveCss("color", "rgb(207, 74, 74)");
-    });
-  });
-
-  describe("min-zoom", () => {
-    let bgId: string;
-
-    beforeEach(async () => {
-      bgId = await createBackground();
-      await when.click("layer-list-item:background:" + bgId);
-      await when.setValue("min-zoom.input-text", "1");
-      await when.click("layer-editor.layer-id");
-    });
-
-    test("should update min-zoom in local storage", async () => {
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id: "background:" + bgId, type: "background", minzoom: 1 }],
-      });
-    });
-
-    test("when clicking next layer should update style on local storage", async () => {
-      await when.type("min-zoom.input-text", "{backspace}");
-      await when.click("max-zoom.input-text");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        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", () => {
-    let bgId: string;
-
-    beforeEach(async () => {
-      bgId = await createBackground();
-      await when.click("layer-list-item:background:" + bgId);
-      await when.setValue("max-zoom.input-text", "1");
-      await when.click("layer-editor.layer-id");
-    });
-
-    test("should update style in local storage", async () => {
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id: "background:" + bgId, type: "background", maxzoom: 1 }],
-      });
-    });
-  });
-
-  describe("comments", () => {
-    let bgId: string;
-    const comment = "42";
-
-    beforeEach(async () => {
-      bgId = await createBackground();
-      await when.click("layer-list-item:background:" + bgId);
-      await when.setValue("layer-comment.input", comment);
-      await when.click("layer-editor.layer-id");
-    });
-
-    test("should update style in local storage", async () => {
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id: "background:" + bgId,
-            type: "background",
-            metadata: { "maputnik:comment": comment },
-          },
-        ],
-      });
-    });
-
-    describe("when unsetting", () => {
-      beforeEach(async () => {
-        await when.clear("layer-comment.input");
-        await when.click("min-zoom.input-text");
-      });
-
-      test("should update style in local storage", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [{ id: "background:" + bgId, type: "background" }],
-        });
-      });
-    });
-  });
-
-  describe("color", () => {
-    let bgId: string;
-    beforeEach(async () => {
-      bgId = await createBackground();
-      await when.click("layer-list-item:background:" + bgId);
-      await when.click("spec-field:background-color");
-    });
-
-    test("should update style in local storage", async () => {
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        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", () => {
-    let bgId: string;
-    beforeEach(async () => {
-      bgId = await createBackground();
-      await when.click("layer-list-item:background:" + bgId);
-      await when.type("spec-field-input:background-opacity", "0.");
-    });
-
-    test("should keep '.' in the input field", async () => {
-      await then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
-    });
-
-    test("should revert to a valid value when focus out", async () => {
-      await when.click("layer-list-item:background:" + bgId);
-      await then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
-    });
-  });
-
-  describe("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", () => {
-    test("text-font", async () => {
-      await when.setStyle("font");
-      await when.collapseGroupInLayerEditor();
-      await when.collapseGroupInLayerEditor(1);
-      await when.collapseGroupInLayerEditor(2);
-      await when.clickWithin("spec-field:text-font", ".maputnik-autocomplete input");
-      await then(get.element(".maputnik-autocomplete-menu-item")).shouldBeVisible();
-      await then(get.element(".maputnik-autocomplete-menu-item")).shouldHaveLength(3);
-    });
-  });
-
-  describe("paint", () => {
-    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", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({
-        type: "circle",
-        layer: "example",
-      });
-
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "circle", source: "example" }],
-      });
-
-      await when.clickByText('"source"');
-      await when.typeKeys('"');
-
-      await then(get.element(".cm-lint-marker-error")).shouldExist();
-    });
-
-    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();
-
-      await when.click("layer-list-item:background:" + bgId);
-      await when.collapseGroupInLayerEditor();
-      await when.collapseGroupInLayerEditor(1);
-      await then(get.element(".cm-lint-marker-error")).shouldNotExist();
-
-      // Inject an invalid token (CodeMirror auto-closes brackets/quotes, so a
-      // bare word reliably breaks the JSON) and expect a lint error.
-      await when.appendTextInJsonEditor("zzz");
-      await then(get.element(".cm-lint-marker-error")).shouldExist();
-    });
-  });
-
-  describe("sticky header", () => {
-    test("should keep layer header visible when scrolling properties", async () => {
-      // Setup: Create a layer with many properties (e.g. symbol layer)
-      await when.modal.fillLayers({
-        type: "symbol",
-        layer: "example",
-      });
-
-      await when.wait(500);
-      const header = get.elementByTestId("layer-editor.header");
-      await then(header).shouldBeVisible();
-
-      await when.scrollToBottom(get.element(".maputnik-scroll-container"));
-      await when.wait(200);
-
-      await then(header).shouldBeVisible();
-      await then(get.elementByTestId("skip-target-layer-editor")).shouldBeVisible();
-    });
-  });
-});

e2e/layers-list.spec.ts

@@ -1,364 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("layers list", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-    await when.modal.open();
-  });
-
-  describe("ops", () => {
-    let id: string;
-    beforeEach(async () => {
-      id = await when.modal.fillLayers({ type: "background" });
-    });
-
-    test("should update layers in local storage", async () => {
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "background" }],
-      });
-    });
-
-    describe("when clicking delete", () => {
-      beforeEach(async () => {
-        await when.click("layer-list-item:" + id + ":delete");
-      });
-      test("should empty layers in local storage", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [],
-        });
-      });
-    });
-
-    describe("when clicking duplicate", () => {
-      beforeEach(async () => {
-        await when.click("layer-list-item:" + id + ":copy");
-      });
-      test("should add copy layer in local storage", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [
-            { id: id + "-copy", type: "background" },
-            { id, type: "background" },
-          ],
-        });
-      });
-    });
-
-    describe("when clicking hide", () => {
-      beforeEach(async () => {
-        await when.click("layer-list-item:" + id + ":toggle-visibility");
-      });
-
-      test("should update visibility to none in local storage", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [{ id, type: "background", layout: { visibility: "none" } }],
-        });
-      });
-
-      describe("when clicking show", () => {
-        beforeEach(async () => {
-          await when.click("layer-list-item:" + id + ":toggle-visibility");
-        });
-
-        test("should update visibility to visible in local storage", async () => {
-          await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            layers: [{ id, type: "background", layout: { visibility: "visible" } }],
-          });
-        });
-      });
-
-      describe("when selecting a layer", () => {
-        let secondId: string;
-        beforeEach(async () => {
-          await when.modal.open();
-          secondId = await when.modal.fillLayers({
-            id: "second-layer",
-            type: "background",
-          });
-        });
-        test("should show the selected layer in the editor", async () => {
-          await when.realClick("layer-list-item:" + secondId);
-          await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
-          await when.realClick("layer-list-item:" + id);
-          await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
-        });
-      });
-    });
-  });
-
-  describe("background", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "background" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "background" }],
-      });
-    });
-
-    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", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "fill", source: "example" }],
-      });
-    });
-
-    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", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "line", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "line", source: "example" }],
-      });
-    });
-
-    test("groups", async () => {
-      const id1 = await when.modal.fillLayers({ id: "aa", type: "line", layer: "example" });
-
-      await when.modal.open();
-      const id2 = await when.modal.fillLayers({ id: "aa-2", type: "line", layer: "example" });
-
-      await when.modal.open();
-      const id3 = await when.modal.fillLayers({ id: "b", type: "line", layer: "example" });
-
-      await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:" + id2)).shouldNotBeVisible();
-      await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
-      await when.click("layer-list-group:aa-0");
-      await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:" + id2)).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
-      await when.click("layer-list-item:" + id2);
-      await when.click("skip-target-layer-editor");
-      await when.click("menu-move-layer-down");
-      await then(get.elementByTestId("layer-list-group:aa-0")).shouldNotExist();
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          { id: "aa", type: "line", source: "example" },
-          { id: "b", type: "line", source: "example" },
-          { id: "aa-2", type: "line", source: "example" },
-        ],
-      });
-    });
-  });
-
-  describe("symbol", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "symbol", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "symbol", source: "example" }],
-      });
-    });
-
-    test("should show spec info when hovering and clicking single line property", async () => {
-      await when.modal.fillLayers({ type: "symbol", layer: "example" });
-
-      await when.hover("spec-field-container:text-rotate");
-      await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
-      await when.click("field-doc-button-Rotate", 0);
-      await then(get.elementByTestId("spec-field-doc")).shouldContainText("Rotates the ");
-    });
-
-    test("should show spec info when hovering and clicking multi line property", async () => {
-      await when.modal.fillLayers({ type: "symbol", layer: "example" });
-
-      await when.hover("spec-field-container:text-offset");
-      await then(get.elementByTestId("field-doc-button-Offset")).shouldBeVisible();
-      await when.click("field-doc-button-Offset", 0);
-      await then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
-    });
-
-    test("should hide spec info when clicking a second time", async () => {
-      await when.modal.fillLayers({ type: "symbol", layer: "example" });
-
-      await when.hover("spec-field-container:text-rotate");
-      await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
-      await when.click("field-doc-button-Rotate", 0);
-      await when.wait(200);
-      await when.click("field-doc-button-Rotate", 0);
-      await then(get.elementByTestId("spec-field-doc")).shouldNotBeVisible();
-    });
-  });
-
-  describe("raster", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "raster", layer: "raster" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "raster", source: "raster" }],
-      });
-    });
-  });
-
-  describe("circle", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "circle", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "circle", source: "example" }],
-      });
-    });
-  });
-
-  describe("fill extrusion", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "fill-extrusion", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "fill-extrusion", source: "example" }],
-      });
-    });
-  });
-
-  describe("hillshade", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "hillshade", source: "example" }],
-      });
-    });
-
-    test("set hillshade illumination direction array", async () => {
-      const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
-      await when.collapseGroupInLayerEditor();
-      await when.collapseGroupInLayerEditor(1);
-      await when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
-      await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
-      await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
-      await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
-
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id,
-            type: "hillshade",
-            source: "example",
-            paint: { "hillshade-illumination-direction": [1, 2, 3, 4] },
-          },
-        ],
-      });
-    });
-
-    test("set hillshade highlight color array", async () => {
-      const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
-      await when.collapseGroupInLayerEditor();
-      await when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
-      await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
-      await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
-
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id,
-            type: "hillshade",
-            source: "example",
-            paint: {
-              "hillshade-highlight-color": ["blue", "#00ff00", "rgba(255, 255, 0, 1)"],
-            },
-          },
-        ],
-      });
-    });
-  });
-
-  describe("color-relief", () => {
-    test("add", async () => {
-      const id = await when.modal.fillLayers({ type: "color-relief", layer: "example" });
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [{ id, type: "color-relief", source: "example" }],
-      });
-    });
-
-    test("adds elevation expression when clicking the elevation button", async () => {
-      await when.modal.fillLayers({ type: "color-relief", layer: "example" });
-      await when.collapseGroupInLayerEditor();
-      await when.click("make-elevation-function");
-      await then(
-        get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")
-      ).shouldBeVisible();
-    });
-  });
-
-  describe("groups", () => {
-    test("simple", async () => {
-      await when.setStyle("geojson");
-
-      await when.modal.open();
-      await when.modal.fillLayers({ id: "foo", type: "background" });
-
-      await when.modal.open();
-      await when.modal.fillLayers({ id: "foo_bar", type: "background" });
-
-      await when.modal.open();
-      await when.modal.fillLayers({ id: "foo_bar_baz", type: "background" });
-
-      await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
-      await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldNotBeVisible();
-      await when.click("layer-list-group:foo-0");
-      await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
-      await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldBeVisible();
-    });
-  });
-
-  describe("drag and drop", () => {
-    test("move layer should update local storage", async () => {
-      const firstId = await when.modal.fillLayers({ id: "a", type: "background" });
-      await when.modal.open();
-      const secondId = await when.modal.fillLayers({ id: "b", type: "background" });
-      await when.modal.open();
-      const thirdId = await when.modal.fillLayers({ id: "c", type: "background" });
-
-      await when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
-
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          { id: secondId, type: "background" },
-          { id: thirdId, type: "background" },
-          { id: firstId, type: "background" },
-        ],
-      });
-    });
-  });
-
-  describe("sticky header", () => {
-    test("should keep header visible when scrolling layer list", async () => {
-      // Setup: Create multiple layers to enable scrolling
-      // The modal is already open (beforeEach) for the first layer.
-      await when.modal.fillLayers({ id: "layer-0", type: "background" });
-      for (let i = 1; i < 20; i++) {
-        await when.modal.open();
-        await when.modal.fillLayers({ id: `layer-${i}`, type: "background" });
-      }
-
-      await when.wait(500);
-      const header = get.elementByTestId("layer-list.header");
-      await then(header).shouldBeVisible();
-
-      // Scroll the layer list container
-      await when.scrollToBottom(get.elementByTestId("layer-list"));
-      await when.wait(200);
-      await then(header).shouldBeVisible();
-      await then(get.elementByTestId("layer-list:add-layer")).shouldBeVisible();
-    });
-  });
-});

e2e/map.spec.ts

@@ -1,67 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("map", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-  });
-
-  describe("zoom level", () => {
-    test("via url", async () => {
-      const zoomLevel = 12.37;
-      await when.setStyle("geojson", zoomLevel);
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + zoomLevel);
-    });
-
-    test("via map controls", async () => {
-      const zoomLevel = 12.37;
-      await when.setStyle("geojson", zoomLevel);
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
-      await when.clickZoomIn();
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + (zoomLevel + 1));
-    });
-
-    test("via style file definition", async () => {
-      await when.setStyle("zoom_7_center_0_51");
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
-      await then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText("Zoom: " + 7);
-      await then(get.locationHash()).shouldInclude("#7/51/0");
-
-      // opening another stylefile does not update the map view again
-      // as discussed in https://github.com/maplibre/maputnik/issues/1546
-      await when.openASecondStyleWithDifferentZoomAndCenter();
-      await then(get.locationHash()).shouldInclude("#7/51/0");
-    });
-  });
-
-  describe("search", () => {
-    test("should exist", async () => {
-      await then(get.searchControl()).shouldBeVisible();
-    });
-  });
-
-  describe("popup", () => {
-    beforeEach(async () => {
-      await when.setStyle("rectangles");
-      await then(get.locationHash()).shouldExist();
-    });
-
-    test("should open on feature click", async () => {
-      await when.clickCenter("maplibre:map");
-      await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
-    });
-
-    test("should open a second feature after closing popup", async () => {
-      await when.clickCenter("maplibre:map");
-      await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
-      await when.closePopup();
-      await then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
-      await when.clickCenter("maplibre:map");
-      await then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
-    });
-  });
-});

e2e/maputnik-driver.ts

@@ -1,358 +0,0 @@
-import { PlaywrightHelper } from "./playwright-helper";
-import { ModalDriver } from "./modal-driver";
-
-const baseUrl = "http://localhost:8888/";
-const isMac = process.platform === "darwin";
-
-/**
- * The maputnik-specific driver. It builds on the generic {@link PlaywrightHelper}
- * — spreading its `given`/`when`/`get` primitives and adding domain concepts
- * (loading a style, the add-layer modal, the JSON editor, …). All Playwright
- * access goes through the helper; the driver never touches `page` directly.
- */
-export class MaputnikDriver {
-  private readonly helper = new PlaywrightHelper();
-  private readonly modalDriver = new ModalDriver();
-
-  then = this.helper.then;
-
-  /** Reads the maputnik style currently persisted in localStorage. */
-  private async readStoredStyle(): Promise<any> {
-    const styleId = await this.helper.get.localStorageItem("maputnik:latest_style");
-    const styleItem = await this.helper.get.localStorageItem(`maputnik:style:${styleId}`);
-    if (!styleItem) throw new Error("Could not get styleItem from localStorage");
-    return JSON.parse(styleItem);
-  }
-
-  public given = {
-    ...this.helper.given,
-
-    setupMockBackedResponses: async () => {
-      const styleFixtures = [
-        "example-style.json",
-        "example-layer-style.json",
-        "geojson-style.json",
-        "raster-style.json",
-        "geojson-raster-style.json",
-        "rectangles-style.json",
-        "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({
-          method: "GET",
-          url: baseUrl + fixture,
-          response: { fixture },
-          alias: fixture === "example-style.json" ? "example-style.json" : undefined,
-        });
-      }
-      await this.helper.given.interceptAndMockResponse({ method: "GET", url: /example\.local\//, response: [] });
-      await this.helper.given.interceptAndMockResponse({ method: "GET", url: /example\.com\//, response: [] });
-      await this.helper.given.interceptAndMockResponse({
-        method: "GET",
-        url: "https://www.glyph-server.com/*",
-        response: ["Font 1", "Font 2", "Font 3"],
-      });
-    },
-  };
-
-  public when = {
-    ...this.helper.when,
-
-    modal: this.modalDriver.when,
-
-    setStyle: async (
-      styleProperties:
-        | "geojson"
-        | "raster"
-        | "both"
-        | "layer"
-        | "rectangles"
-        | "font"
-        | "zoom_7_center_0_51"
-        | "access_tokens"
-        | "",
-      zoom?: number
-    ) => {
-      const styleFileByKey: Record<string, string> = {
-        geojson: "geojson-style.json",
-        raster: "raster-style.json",
-        both: "geojson-raster-style.json",
-        layer: "example-layer-style.json",
-        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);
-      if (styleProperties && styleFileByKey[styleProperties]) {
-        url.searchParams.set("style", baseUrl + styleFileByKey[styleProperties]);
-      }
-      if (zoom) {
-        url.hash = `${zoom}/41.3805/2.1635`;
-      }
-
-      await this.helper.when.visit(url.toString());
-
-      const toolbarLink = this.helper.get.elementByTestId("toolbar:link");
-      await toolbarLink.scrollIntoViewIfNeeded();
-      await this.then(toolbarLink).shouldBeVisible();
-    },
-
-    openASecondStyleWithDifferentZoomAndCenter: async () => {
-      await this.helper.when.clickButtonByName("Open");
-      const input = this.helper.get.elementByTestId("modal:open.url.input");
-      await input.fill("http://localhost:8888/example-style-with-zoom-5-and-center-50-50.json");
-      await input.press("Enter");
-    },
-
-    chooseExampleFile: async () => {
-      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);
-    },
-
-    dropExampleFile: async () => {
-      await this.helper.when.dropFileByFixture("example-style.json", "modal:open.dropzone");
-      await this.helper.when.wait(200);
-    },
-
-    clickZoomIn: async () => {
-      await this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
-    },
-
-    closePopup: async () => {
-      await this.helper.get.element(".maplibregl-popup-close-button").click();
-    },
-
-    collapseGroupInLayerEditor: async (index = 0) => {
-      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
-      // root JSON structure (CodeMirror auto-closes brackets otherwise).
-      await this.helper.when.typeKeys("{home}");
-      await this.helper.when.typeText(text);
-    },
-
-    setTextInJsonEditor: async (text: string) => {
-      await this.helper.get.element(".cm-line").first().click();
-      await this.helper.when.typeKeys("{selectall}");
-      await this.helper.when.typeText(text);
-    },
-
-    setValueToPropertyArray: async (selector: string, value: string) => {
-      const input = this.helper.get.elementByTestId(selector).locator(".maputnik-array-block-content input").last();
-      await input.focus();
-      await this.helper.when.typeKeys("{selectall}");
-      await this.helper.when.typeText(value);
-    },
-
-    addValueToPropertyArray: async (selector: string, value: string) => {
-      const block = this.helper.get.elementByTestId(selector);
-      await block.locator(".maputnik-array-add-value").click();
-      const input = block.locator(".maputnik-array-block-content input").last();
-      await input.focus();
-      await this.helper.when.typeKeys("{selectall}");
-      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. */
-    fillLocalStorage: () => this.helper.when.fillLocalStorageUntilQuota("maputnik:fill-"),
-  };
-
-  public get = {
-    ...this.helper.get,
-
-    isMac: () => isMac,
-
-    canvas: () => this.helper.get.element("canvas"),
-
-    searchControl: () => this.helper.get.element(".maplibregl-ctrl-geocoder"),
-
-    skipTargetLayerList: () => this.helper.get.elementByTestId("skip-target-layer-list"),
-
-    skipTargetLayerEditor: () => this.helper.get.elementByTestId("skip-target-layer-editor"),
-
-    styleFromLocalStorage: () => this.helper.query(() => this.readStoredStyle()),
-
-    fixture: (name: string) => this.helper.readFixture(name),
-
-    responseBody: (alias: string) => {
-      // Our mocked style responses always return the matching fixture.
-      const name = alias.endsWith(".json") ? alias : `${alias}.json`;
-      return this.helper.readFixture(name);
-    },
-
-    exampleFileUrl: () => baseUrl + "example-style.json",
-  };
-}

e2e/modal-driver.ts

@@ -1,78 +0,0 @@
-import { v1 as uuid } from "uuid";
-import { PlaywrightHelper } from "./playwright-helper";
-
-export class ModalDriver {
-  private readonly helper = new PlaywrightHelper();
-
-  public when = {
-    fillLayers: async (opts: { type: string; layer?: string; id?: string }) => {
-      const { when, get, then } = this.helper;
-      const id = opts.id ?? `${opts.type}:${uuid()}`;
-
-      await when.select("add-layer.layer-type.select", opts.type);
-      await when.type("add-layer.layer-id.input", id);
-
-      if (opts.layer) {
-        const input = get.elementByTestId("add-layer.layer-source-block").locator("input");
-        await input.click();
-        await input.fill(opts.layer);
-        // The source input is a controlled downshift combobox; wait for React to
-        // settle on the typed value before submitting.
-        await then(input).shouldHaveValue(opts.layer);
-        // Close the autocomplete menu so it does not intercept the add button.
-        await get.elementByTestId("add-layer.layer-id.input").click();
-      }
-      await when.click("add-layer");
-
-      return id;
-    },
-
-    open: async () => {
-      await this.helper.when.click("layer-list:add-layer");
-    },
-
-    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

@@ -1,577 +0,0 @@
-import { test, expect, describe, beforeEach } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-import tokens from "../src/config/tokens.json" with { type: "json" };
-
-describe("modals", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("both");
-    await when.setStyle("");
-  });
-
-  describe("open", () => {
-    beforeEach(async () => {
-      await when.click("nav:open");
-    });
-
-    test("close", async () => {
-      await when.modal.close("modal:open");
-      await then(get.elementByTestId("modal:open")).shouldNotExist();
-    });
-
-    test("upload", async () => {
-      await when.chooseExampleFile();
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
-    });
-
-    test("upload via drag and drop", async () => {
-      await when.dropExampleFile();
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.fixture("example-style.json"));
-    });
-
-    describe("when click open url", () => {
-      beforeEach(async () => {
-        const styleFileUrl = get.exampleFileUrl();
-
-        await when.setValue("modal:open.url.input", styleFileUrl);
-        await when.click("modal:open.url.button");
-        await when.wait(200);
-      });
-      test("load from url", async () => {
-        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", () => {
-    test("open/close", async () => {
-      await when.setStyle("");
-      await when.typeKeys("?");
-      await when.modal.close("modal:shortcuts");
-      await then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
-    });
-  });
-
-  describe("export", () => {
-    beforeEach(async () => {
-      await when.click("nav:export");
-    });
-
-    test("close", async () => {
-      await when.modal.close("modal:export");
-      await then(get.elementByTestId("modal:export")).shouldNotExist();
-    });
-
-    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", () => {
-    beforeEach(async () => {
-      await when.setStyle("layer");
-      await when.click("nav:sources");
-    });
-
-    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";
-      await when.setValue("modal:sources.add.source_id", sourceId);
-      await when.select("modal:sources.add.source_type", "tile_vector");
-      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()).shouldDeepNestedInclude({
-        sources: { [sourceId]: { scheme: "tms" } },
-      });
-    });
-
-    test("add new pmtiles source", async () => {
-      const sourceId = "pmtilestest";
-      await when.setValue("modal:sources.add.source_id", sourceId);
-      await when.select("modal:sources.add.source_type", "pmtiles_vector");
-      await when.setValue(
-        "modal:sources.add.source_url",
-        "https://data.source.coop/protomaps/openstreetmap/v4.pmtiles"
-      );
-      await when.click("modal:sources.add.add_source");
-      await when.click("modal:sources.add.add_source");
-      await when.wait(200);
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sources: {
-          pmtilestest: {
-            type: "vector",
-            url: "pmtiles://https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
-          },
-        },
-      });
-    });
-
-    test("add new raster source", async () => {
-      const sourceId = "rastertest";
-      await when.setValue("modal:sources.add.source_id", sourceId);
-      await when.select("modal:sources.add.source_type", "tile_raster");
-      await when.select("modal:sources.add.scheme_type", "xyz");
-      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()).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]] },
-        },
-      });
-    });
-  });
-
-  describe("inspect", () => {
-    test("toggle", async () => {
-      // There is no assertion in this test
-      await when.setStyle("geojson");
-      await when.select("maputnik-select", "inspect");
-    });
-  });
-
-  describe("style settings", () => {
-    beforeEach(async () => {
-      await when.click("nav:settings");
-    });
-
-    describe("when click name filed spec information", () => {
-      beforeEach(async () => {
-        await when.click("field-doc-button-Name");
-      });
-
-      test("should show the spec information", async () => {
-        await then(get.elementsText("spec-field-doc")).shouldInclude("name for the style");
-      });
-    });
-
-    describe("when set name and click owner", () => {
-      beforeEach(async () => {
-        await when.setValue("modal:settings.name", "foobar");
-        await when.click("modal:settings.owner");
-        await when.wait(200);
-      });
-
-      test("show name specifications", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          name: "foobar",
-        });
-      });
-    });
-
-    describe("when set owner and click name", () => {
-      beforeEach(async () => {
-        await when.setValue("modal:settings.owner", "foobar");
-        await when.click("modal:settings.name");
-        await when.wait(200);
-      });
-      test("should update owner in local storage", async () => {
-        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          owner: "foobar",
-        });
-      });
-    });
-
-    test("sprite url", async () => {
-      await when.setTextInJsonEditor('"http://example.com"');
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sprite: "http://example.com",
-      });
-    });
-
-    test("sprite object", async () => {
-      await when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
-
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sprite: [{ id: "1", url: "2" }],
-      });
-    });
-
-    test("glyphs url", async () => {
-      const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
-      await when.setValue("modal:settings.glyphs", glyphsUrl);
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        glyphs: glyphsUrl,
-      });
-    });
-
-    test("maptiler access token", async () => {
-      const apiKey = "testing123";
-      await when.setValue("modal:settings.maputnik:openmaptiles_access_token", apiKey);
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        metadata: { "maputnik:openmaptiles_access_token": apiKey },
-      });
-    });
-
-    test("thunderforest access token", async () => {
-      const apiKey = "testing123";
-      await when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        metadata: { "maputnik:thunderforest_access_token": apiKey },
-      });
-    });
-
-    test("stadia access token", async () => {
-      const apiKey = "testing123";
-      await when.setValue("modal:settings.maputnik:stadia_access_token", apiKey);
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        metadata: { "maputnik:stadia_access_token": apiKey },
-      });
-    });
-
-    test("locationiq access token", async () => {
-      const apiKey = "testing123";
-      await when.setValue("modal:settings.maputnik:locationiq_access_token", apiKey);
-      await when.click("modal:settings.name");
-      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()).shouldDeepNestedInclude({
-        projection: { type: "mercator" },
-      });
-    });
-
-    test("style projection globe", async () => {
-      await when.select("modal:settings.projection", "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()).shouldDeepNestedInclude({
-        projection: { type: "vertical-perspective" },
-      });
-    });
-
-    test("style renderer", async () => {
-      await when.select("modal:settings.maputnik:renderer", "ol");
-      await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
-
-      await when.click("modal:settings.name");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        metadata: { "maputnik:renderer": "ol" },
-      });
-    });
-
-    test("include API key when change renderer", async () => {
-      await when.click("modal:settings.close-modal");
-      await when.click("nav:open");
-
-      await when.clickByAttribute("aria-label", "MapTiler Basic");
-      await when.wait(1000);
-      await when.click("nav:settings");
-
-      await when.select("modal:settings.maputnik:renderer", "mlgljs");
-      await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
-
-      await when.select("modal:settings.maputnik:renderer", "ol");
-      await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
-
-      await given.intercept(
-        /https:\/\/api\.maptiler\.com\/tiles\/v3-openmaptiles\/tiles\.json\?key=.*/,
-        "tileRequest",
-        "GET"
-      );
-
-      await when.select("modal:settings.maputnik:renderer", "mlgljs");
-      await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
-
-      const request = await when.waitForResponse("tileRequest");
-      expect(request.url()).toContain(
-        `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${tokens.openmaptiles}`
-      );
-    });
-  });
-
-  describe("add layer", () => {
-    beforeEach(async () => {
-      await when.setStyle("layer");
-      await when.modal.open();
-    });
-
-    test("shows duplicate id error", async () => {
-      await when.setValue("add-layer.layer-id.input", "background");
-      await when.click("add-layer");
-      await then(get.elementByTestId("modal:add-layer")).shouldExist();
-      await then(get.element(".maputnik-modal-error")).shouldContainText("Layer ID already exists");
-    });
-  });
-
-  describe("global state", () => {
-    beforeEach(async () => {
-      await when.click("nav:global-state");
-    });
-
-    test("add variable", async () => {
-      await when.wait(100);
-      await when.click("global-state-add-variable");
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        state: { key1: { default: "value" } },
-      });
-    });
-
-    test("add multiple variables", async () => {
-      await when.click("global-state-add-variable");
-      await when.click("global-state-add-variable");
-      await when.click("global-state-add-variable");
-      await when.wait(100);
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        state: { key1: { default: "value" }, key2: { default: "value" }, key3: { default: "value" } },
-      });
-    });
-
-    test("remove variable", async () => {
-      await when.click("global-state-add-variable");
-      await when.click("global-state-add-variable");
-      await when.click("global-state-add-variable");
-      await when.click("global-state-remove-variable", 0);
-      await when.wait(100);
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        state: { key2: { default: "value" }, key3: { default: "value" } },
-      });
-    });
-
-    test("edit variable key", async () => {
-      await when.click("global-state-add-variable");
-      await when.wait(100);
-      await when.setValue("global-state-variable-key:0", "mykey");
-      await when.typeKeys("{enter}");
-      await when.wait(100);
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        state: { mykey: { default: "value" } },
-      });
-    });
-
-    test("edit variable value", async () => {
-      await when.click("global-state-add-variable");
-      await when.wait(100);
-      await when.setValue("global-state-variable-value:0", "myvalue");
-      await when.typeKeys("{enter}");
-      await when.wait(100);
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        state: { key1: { default: "myvalue" } },
-      });
-    });
-  });
-
-  describe("error panel", () => {
-    test("not visible when no errors", async () => {
-      await then(get.element("maputnik-message-panel-error")).shouldNotExist();
-    });
-
-    test("visible on style error", async () => {
-      await when.modal.open();
-      await when.modal.fillLayers({
-        type: "circle",
-        layer: "invalid",
-      });
-      await then(get.element(".maputnik-message-panel-error")).shouldBeVisible();
-    });
-  });
-
-  describe("Handle localStorage QuotaExceededError", () => {
-    test("handles quota exceeded error when opening style from URL", async () => {
-      // Clear localStorage to start fresh
-      await when.clearLocalStorage();
-      await when.fillLocalStorage();
-
-      // Open the style via URL input
-      await when.click("nav:open");
-      await when.setValue("modal:open.url.input", get.exampleFileUrl());
-      await when.click("modal:open.url.button");
-
-      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude(get.responseBody("example-style.json"));
-      await then(get.styleFromLocalStorage()).shouldExist();
-    });
-  });
-});

e2e/playwright-helper.ts

@@ -1,453 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { expect, type Locator, type Page, type Request } from "@playwright/test";
-import { currentPage, recordCoverageChunk } from "./utils/fixtures";
-
-const DATA_ATTRIBUTE = "data-wd-key";
-const FIXTURES_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "fixtures");
-const isMac = process.platform === "darwin";
-
-function testIdSelector(testId: string): string {
-  return `[${DATA_ATTRIBUTE}="${testId}"]`;
-}
-
-/** Retries `assertion` until it stops throwing */
-async function retry(
-  assertion: () => Promise<void> | void,
-  timeout = 10000,
-  interval = 100
-): Promise<void> {
-  const start = Date.now();
-  let lastError: unknown;
-  while (true) {
-    try {
-      await assertion();
-      return;
-    } catch (error) {
-      lastError = error;
-      if (Date.now() - start > timeout) throw lastError;
-      await new Promise((resolve) => setTimeout(resolve, interval));
-    }
-  }
-}
-
-/**
- * A lazily-evaluated value (e.g. the style in localStorage). Assertions on a
- * Query re-read the value until they pass.
- */
-class Query<T> {
-  readonly __query = true as const;
-  constructor(private readonly getter: () => Promise<T>) {}
-
-  get(): Promise<T> {
-    return this.getter();
-  }
-
-  then<U>(mapper: (value: T) => U | Promise<U>): Query<U> {
-    return new Query<U>(async () => mapper(await this.getter()));
-  }
-}
-
-function isQuery(target: unknown): target is Query<unknown> {
-  return typeof target === "object" && target !== null && (target as Query<unknown>).__query === true;
-}
-
-function isLocator(target: unknown): target is Locator {
-  return (
-    typeof target === "object" &&
-    target !== null &&
-    typeof (target as Locator).count === "function" &&
-    typeof (target as Locator).boundingBox === "function"
-  );
-}
-
-/**
- * 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);
-}
-
-/**
- * Fluent, auto-retrying assertions over a Playwright Locator or a lazily
- * evaluated value/Query. This is the generic base that the maputnik-specific
- * assertable extends.
- */
-export class Assertable<T> {
-  constructor(private readonly target: T) {}
-
-  private locator(): Locator {
-    if (!isLocator(this.target)) throw new Error("Expected a Locator target for this assertion");
-    return this.target;
-  }
-
-  protected async assertValue(assertion: (value: any) => void): Promise<void> {
-    const target = this.target;
-    if (isQuery(target)) {
-      await retry(async () => assertion(await target.get()));
-    } else {
-      assertion(await (target as any));
-    }
-  }
-
-  // Element assertions (auto-retrying via Playwright web-first assertions).
-  shouldBeVisible = () => expect(this.locator().first()).toBeVisible();
-  // Some testids resolve to many elements that are always rendered but hidden
-  // (e.g. per-field documentation panels); "not visible" means none is visible.
-  shouldNotBeVisible = () => expect(this.locator().filter({ visible: true })).toHaveCount(0);
-  shouldExist = async () => {
-    if (isLocator(this.target)) {
-      await expect(this.locator().first()).toBeAttached();
-    } else {
-      await this.assertValue((value) => expect(value).toBeTruthy());
-    }
-  };
-  shouldNotExist = () => expect(this.locator()).toHaveCount(0);
-  shouldBeFocused = () => expect(this.locator().first()).toBeFocused();
-  shouldNotBeFocused = () => expect(this.locator().first()).not.toBeFocused();
-  shouldHaveValue = (value: string) => expect(this.locator().first()).toHaveValue(value);
-  shouldContainText = async (text: string) => {
-    const locator = this.locator();
-    // Prefer the visible element when a testid resolves to several (only the
-    // open documentation panel is visible; the rest are hidden in the DOM).
-    const target = (await locator.count()) > 1 ? locator.filter({ visible: true }).first() : locator.first();
-    await expect(target).toContainText(text);
-  };
-  shouldHaveText = (text: string) => expect(this.locator().first()).toHaveText(text);
-  shouldHaveLength = (length: number) => expect(this.locator()).toHaveCount(length);
-  shouldHaveCss = (property: string, value: string) => expect(this.locator().first()).toHaveCSS(property, value);
-
-  // Value assertions (auto-retrying for Query targets).
-  shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
-
-  shouldInclude = (value: any) =>
-    this.assertValue((actual) => {
-      if (typeof value === "object" && value !== null) {
-        expect(actual).toMatchObject(value);
-      } else {
-        expect(String(actual)).toContain(String(value));
-      }
-    });
-
-  shouldDeepNestedInclude = (value: Record<string, unknown> | unknown[]) =>
-    this.assertValue((actual) => assertDeepNestedInclude(actual, value));
-}
-
-async function typeSequence(page: Page, text: string): Promise<void> {
-  const tokens = text.match(/\{[^}]+\}|[^{]+/g) ?? [];
-  const modifierMap: Record<string, string> = { meta: "Meta", ctrl: "Control", shift: "Shift", alt: "Alt" };
-  const namedKeys: Record<string, string> = {
-    esc: "Escape",
-    enter: "Enter",
-    backspace: "Backspace",
-    del: "Delete",
-    tab: "Tab",
-    home: "Home",
-    end: "End",
-    rightarrow: "ArrowRight",
-  };
-
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (!token.startsWith("{") || !token.endsWith("}")) {
-      await page.keyboard.type(token);
-      continue;
-    }
-    const name = token.slice(1, -1).toLowerCase();
-    if (name === "selectall") {
-      await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
-    } else if (namedKeys[name]) {
-      await page.keyboard.press(namedKeys[name]);
-    } else if (modifierMap[name]) {
-      const modifiers = [modifierMap[name]];
-      let j = i + 1;
-      while (j < tokens.length && /^\{(meta|ctrl|shift|alt)\}$/i.test(tokens[j])) {
-        modifiers.push(modifierMap[tokens[j].slice(1, -1).toLowerCase()]);
-        j++;
-      }
-      const key = tokens[j] ?? "";
-      await page.keyboard.press([...modifiers, key].join("+"));
-      i = j;
-    }
-  }
-}
-
-async function centerOf(locator: Locator): Promise<{ x: number; y: number }> {
-  const box = await locator.boundingBox();
-  if (!box) throw new Error("Element has no bounding box");
-  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
-}
-
-/**
- * This is where all plywright-specific test helpers live.
- * It is used by the MaputnikDriver to implement the Maputnik-specific test helpers.
- */
-export class PlaywrightHelper {
-  private readonly recordedRequests = new Map<string, Request[]>();
-
-  private get page(): Page {
-    return currentPage();
-  }
-
-  private testId(testId: string): Locator {
-    return this.page.locator(testIdSelector(testId));
-  }
-
-  /** Reads and parses a JSON fixture from the fixtures directory. */
-  public readFixture(name: string): any {
-    return JSON.parse(fs.readFileSync(path.join(FIXTURES_DIR, name), "utf-8"));
-  }
-
-  /** Wraps a lazily-evaluated value so assertions on it auto-retry. */
-  public query<T>(getter: () => Promise<T>): Query<T> {
-    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) => {
-        this.recordedRequests.get(alias)!.push(route.request());
-        route.continue();
-      });
-    },
-
-    interceptAndMockResponse: async (options: {
-      method?: string;
-      url: string | RegExp;
-      response: unknown | { fixture: string };
-      alias?: string;
-    }) => {
-      const { url, response, alias } = options;
-      if (alias) this.recordedRequests.set(alias, []);
-      await this.page.route(url, (route) => {
-        if (alias) this.recordedRequests.get(alias)!.push(route.request());
-        const body =
-          response && typeof response === "object" && "fixture" in (response as any)
-            ? this.readFixture((response as { fixture: string }).fixture)
-            : response;
-        route.fulfill({ json: body });
-      });
-    },
-  };
-
-  public when = {
-    visit: async (url: string) => {
-      // Snapshot coverage before navigating, since a full page load resets it.
-      await recordCoverageChunk(this.page);
-      await this.page.goto(url);
-    },
-
-    wait: (ms: number) => this.page.waitForTimeout(ms),
-
-    tab: () => this.page.keyboard.press("Tab"),
-
-    typeKeys: (keys: string) => typeSequence(this.page, keys),
-
-    /** Types raw text into the focused element (no "{key}" sequence parsing). */
-    typeText: (text: string) => this.page.keyboard.type(text),
-
-    clickButtonByName: async (name: string) => {
-      await this.page.getByRole("button", { name }).click();
-    },
-
-    click: async (testId: string, index = 0) => {
-      // Documentation buttons are wrapped in a <label>/.maputnik-doc-target that
-      // Playwright treats as intercepting the click; bypass the check for them.
-      const force = testId.startsWith("field-doc-button-");
-      await this.testId(testId).nth(index).click({ force });
-    },
-
-    realClick: async (testId: string) => {
-      await this.testId(testId).click();
-    },
-
-    hover: async (testId: string) => {
-      await this.testId(testId).hover();
-    },
-
-    focus: async (testId: string) => {
-      await this.testId(testId).focus();
-    },
-
-    clear: async (testId: string) => {
-      await this.testId(testId).clear();
-    },
-
-    select: async (testId: string, value: string) => {
-      await this.testId(testId).selectOption(value);
-    },
-
-    selectWithin: async (parentTestId: string, value: string) => {
-      await this.testId(parentTestId).locator("select").selectOption(value);
-    },
-
-    clickWithin: async (parentTestId: string, selector: string) => {
-      await this.testId(parentTestId).locator(selector).first().click();
-    },
-
-    clickByText: async (text: string) => {
-      await this.page.getByText(text).click();
-    },
-
-    clickByAttribute: async (attribute: string, value: string) => {
-      await this.page.locator(`[${attribute}="${value}"]`).click();
-    },
-
-    scrollToBottom: async (element: Locator) => {
-      await element.evaluate((el) => el.scrollTo(0, el.scrollHeight));
-    },
-
-    setValue: async (testId: string, text: string) => {
-      const input = this.testId(testId);
-      await input.fill("");
-      await input.fill(text);
-    },
-
-    type: async (testId: string, text: string) => {
-      await this.testId(testId).focus();
-      // Place the caret at the start of the field, so a leading "{backspace}"
-      // is a no-op rather than clearing an already-committed value.
-      await this.page.keyboard.press("Home");
-      await typeSequence(this.page, text);
-    },
-
-    dragAndDropWithWait: async (source: string, target: string) => {
-      const from = await centerOf(this.testId(source));
-      const to = await centerOf(this.testId(target));
-      await this.page.mouse.move(from.x, from.y);
-      await this.page.mouse.down();
-      await this.page.mouse.move(from.x, from.y + 10);
-      await this.page.mouse.move(to.x, to.y, { steps: 10 });
-      await this.page.waitForTimeout(100);
-      await this.page.mouse.up();
-    },
-
-    clickCenter: async (testId: string) => {
-      const { x, y } = await centerOf(this.testId(testId));
-      await this.page.mouse.move(x, y);
-      await this.page.mouse.down();
-      await this.page.waitForTimeout(200);
-      await this.page.mouse.up();
-    },
-
-    /**
-     * 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));
-      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) => {
-      const content = JSON.stringify(this.readFixture(fixture));
-      const dataTransfer = await this.page.evaluateHandle((fileContent) => {
-        const dt = new DataTransfer();
-        dt.items.add(new File([fileContent], "example-style.json", { type: "application/json" }));
-        return dt;
-      }, content);
-      const dropzone = this.testId(dropzoneTestId);
-      await dropzone.dispatchEvent("dragenter", { dataTransfer });
-      await dropzone.dispatchEvent("dragover", { dataTransfer });
-      await dropzone.dispatchEvent("drop", { dataTransfer });
-    },
-
-    waitForResponse: async (alias: string) => {
-      const requests = this.recordedRequests.get(alias);
-      if (!requests) throw new Error(`No intercept registered for alias "${alias}"`);
-      await retry(async () => {
-        if (requests.length === 0) throw new Error(`No request recorded for alias "${alias}"`);
-      });
-      return requests[requests.length - 1];
-    },
-
-    clearLocalStorage: () => this.page.evaluate(() => window.localStorage.clear()),
-
-    /** Writes to localStorage under `keyPrefix` until a QuotaExceededError is hit. */
-    fillLocalStorageUntilQuota: (keyPrefix: string) =>
-      this.page.evaluate((prefix) => {
-        let chunkSize = 1000;
-        const chunk = new Array(chunkSize).join("x");
-        let index = 0;
-        while (true) {
-          try {
-            window.localStorage.setItem(`${prefix}${index++}`, chunk);
-          } catch (e: any) {
-            if (e.name === "QuotaExceededError") {
-              if (chunkSize <= 1) return;
-              chunkSize /= 2;
-              continue;
-            }
-            throw e; // Unexpected error
-          }
-        }
-      }, keyPrefix),
-  };
-
-  public get = {
-    element: (selector: string) => this.page.locator(selector),
-
-    localStorageItem: (key: string) =>
-      this.page.evaluate((k) => window.localStorage.getItem(k), key),
-
-    elementByTestId: (testId: string) => this.testId(testId),
-
-    inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
-
-    elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
-
-    locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),
-  };
-}

e2e/utils/e2e-setup.ts

@@ -1,12 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-
-/**
- * Clears the istanbul coverage output directory before the e2e run so stale
- * coverage from previous runs is not merged into the report.
- */
-export default function globalSetup(): void {
-  const dir = path.resolve(process.cwd(), ".nyc_output");
-  fs.rmSync(dir, { recursive: true, force: true });
-  fs.mkdirSync(dir, { recursive: true });
-}

e2e/utils/e2e-teardown.ts

@@ -1,23 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { execFileSync } from "node:child_process";
-
-/**
- * Merges the per-test istanbul coverage chunks collected in `.nyc_output` into a
- * report (configured by `.nycrc.json`) once the whole e2e run has finished.
- */
-export default function globalTeardown(): void {
-  const dir = path.resolve(process.cwd(), ".nyc_output");
-  const hasCoverage = fs.existsSync(dir) && fs.readdirSync(dir).some((f) => f.endsWith(".json"));
-  if (!hasCoverage) {
-    console.warn("No coverage data collected; skipping coverage report.");
-    return;
-  }
-  try {
-    execFileSync("npx", ["nyc", "report"], { stdio: "inherit" });
-  } catch (error) {
-    // Don't fail the whole run if the report can't be generated (e.g. when
-    // running against a container whose source paths differ from the host).
-    console.warn("Failed to generate coverage report:", error);
-  }
-}

e2e/utils/fixtures.ts

@@ -1,82 +0,0 @@
-import { test, expect, type Page } from "@playwright/test";
-import fs from "node:fs";
-import path from "node:path";
-
-let activePage: Page | undefined;
-const coverageChunks: unknown[] = [];
-
-/** The page for the currently running test. Throws if used outside a test. */
-export function currentPage(): Page {
-  if (!activePage) {
-    throw new Error("No active page: a MaputnikDriver method was called outside of a running test.");
-  }
-  return activePage;
-}
-
-const OUTPUT_DIR = path.resolve(process.cwd(), ".nyc_output");
-
-/**
- * Reads the istanbul coverage object (injected by vite-plugin-istanbul) from the
- * given page. Returns `null` when the page has not been instrumented.
- */
-async function readCoverage(page: Page): Promise<unknown | null> {
-  try {
-    return await page.evaluate(() => (window as unknown as { __coverage__?: unknown }).__coverage__ ?? null);
-  } catch {
-    // Page might be navigating/closed.
-    return null;
-  }
-}
-
-/**
- * Persists a coverage chunk to `.nyc_output` so that `nyc report` can merge it.
- * istanbul-lib-coverage (used by nyc) sums the hit counts across every file it
- * finds, so writing one file per chunk is enough to accumulate coverage across
- * navigations and tests.
- */
-export function writeCoverage(coverage: unknown, id: string): void {
-  if (!coverage) return;
-  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-  fs.writeFileSync(path.join(OUTPUT_DIR, `playwright-${id}.json`), JSON.stringify(coverage));
-}
-
-/** Records a coverage snapshot (called before navigations, which reset __coverage__). */
-export async function recordCoverageChunk(page: Page): Promise<void> {
-  const chunk = await readCoverage(page);
-  if (chunk) coverageChunks.push(chunk);
-}
-
-/**
- * Auto fixture that binds the current test's page for the (page-lazy)
- * MaputnikDriver, auto-accepts confirm dialogs, and writes the istanbul
- * coverage collected during the test to `.nyc_output`.
- */
-const extendedTest = test.extend<{ maputnikPage: void }>({
-  maputnikPage: [
-    async ({ page }, use, testInfo) => {
-      activePage = page;
-      coverageChunks.length = 0;
-      // Accept confirm dialogs (e.g. the "replace current style" prompt). These
-      // are dismissed by default, which would cancel loading a style via URL.
-      page.on("dialog", (dialog) => dialog.accept().catch(() => undefined));
-
-      await use();
-
-      const finalCoverage = await readCoverage(page);
-      if (finalCoverage) coverageChunks.push(finalCoverage);
-      coverageChunks.forEach((chunk, index) => writeCoverage(chunk, `${testInfo.testId}-${index}`));
-      coverageChunks.length = 0;
-      activePage = undefined;
-    },
-    { auto: true },
-  ],
-});
-
-const describe = extendedTest.describe;
-const beforeEach = extendedTest.beforeEach;
-export {
-  expect,
-  describe,
-  extendedTest as test,
-  beforeEach,
-};

eslint.config.js

@@ -1,67 +1,56 @@
-import eslint from "@eslint/js";
-import {defineConfig} from "eslint/config";
-import stylisticTs from "@stylistic/eslint-plugin";
-import tseslint from "typescript-eslint";
-import reactPlugin from "eslint-plugin-react";
-import reactHooksPlugin from "eslint-plugin-react-hooks";
-import reactRefreshPlugin from "eslint-plugin-react-refresh";
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefreshPlugin from 'eslint-plugin-react-refresh';
 
-export default defineConfig({
+export default tseslint.config({
   extends: [
     eslint.configs.recommended,
     tseslint.configs.recommended,
   ],
-  files: ["**/*.{js,jsx,ts,tsx}"],
+  files: ['**/*.{js,jsx,ts,tsx}'],
   ignores: [
     "dist/**/*",
   ],
   languageOptions: {
     ecmaVersion: 2024,
-    sourceType: "module",
+    sourceType: 'module',
     globals: {
-      global: "readonly"
+      global: 'readonly'
     }
   },
   settings: {
-    react: { version: "18.2" }
+    react: { version: '18.2' }
   },
   plugins: {
-    "react": reactPlugin,
-    "react-hooks": reactHooksPlugin,
-    "react-refresh": reactRefreshPlugin,
-    "@stylistic": stylisticTs
+    'react': reactPlugin,
+    'react-hooks': reactHooksPlugin,
+    'react-refresh': reactRefreshPlugin
   },
   rules: {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true, extraHOCs: ["withTranslation"] }
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true }
     ],
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
       {
-        varsIgnorePattern: "^_",
-        caughtErrors: "all",
-        caughtErrorsIgnorePattern: "^_",
-        argsIgnorePattern: "^_"
+        varsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        argsIgnorePattern: '^_'
       }
     ],
-    "no-unused-vars": "off",
-    "react/prop-types": "off",
-    "no-undef": "off",
-    "indent": "off",
-    "@stylistic/indent": ["error", 2],
-    "semi": "off",
-    "@stylistic/semi": ["error", "always"],
-    "quotes": "off",
-    "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
-    "no-var": "error",
-    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-empty-object-type": "off",
-    "@typescript-eslint/consistent-type-imports": ["error", { "fixStyle": "inline-type-imports" }],
+    'no-unused-vars': 'off',
+    'react/prop-types': 'off',
+    'no-undef': 'off',
+    'indent': ['error', 2],
+    'no-var': 'error',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-empty-object-type': 'off',
 
   },
   linterOptions: {
@@ -69,4 +58,4 @@ export default defineConfig({
     noInlineConfig: false
   }
 }
-);
+)

i18next-parser.config.ts

@@ -0,0 +1,17 @@
+export default {
+  output: 'src/locales/$LOCALE/$NAMESPACE.json',
+  locales: [ 'de', 'fr', 'he', 'it','ja', 'zh' ],
+
+  // Because some keys are dynamically generated, i18next-parser can't detect them.
+  // We add these keys manually, so we don't want to remove them.
+  keepRemoved: true,
+
+  // We use plain English keys, so we disable key and namespace separators.
+  keySeparator: false,
+  namespaceSeparator: false,
+
+  defaultValue: (_locale, _ns, _key) => {
+    // The default value is a string that indicates that the string is not translated.
+    return '__STRING_NOT_TRANSLATED__';
+  }
+}

i18next.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "i18next-cli";
-
-export default defineConfig({
-  locales: ["de", "fr", "he", "it", "ja", "ko", "tr", "zh"],
-  extract: {
-    input: ["src/**/*.{js,jsx,ts,tsx}"],
-    output: "src/locales/{{language}}/{{namespace}}.json",
-    defaultValue: "__STRING_NOT_TRANSLATED__"
-  }
-});

package.json

@@ -1,20 +1,17 @@
 {
   "name": "maputnik",
-  "version": "3.1.0",
+  "version": "2.1.1",
   "description": "A MapLibre GL visual style editor",
   "type": "module",
   "main": "''",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build --mode=production",
-    "build-desktop": "tsc && vite build --mode=desktop && cd desktop && make",
-    "build-linux": "tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
-    "i18n:extract": "npx i18next-cli extract",
+    "build": "tsc && vite build --base=/maputnik/",
+    "build-desktop": "tsc && vite build --base=/ && cd desktop && make",
+    "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint",
-    "test": "playwright test",
-    "test-e2e": "playwright test",
-    "test-unit": "vitest",
-    "test-unit-ci": "vitest run --coverage --reporter=json",
+    "test": "cypress run",
+    "cy:open": "cypress open",
     "lint-css": "stylelint \"src/styles/*.scss\"",
     "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
   },
@@ -26,57 +23,54 @@
   "license": "MIT",
   "homepage": "https://github.com/maplibre/maputnik#readme",
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.6",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
-    "@maplibre/maplibre-gl-geocoder": "^1.9.4",
-    "@maplibre/maplibre-gl-inspect": "^1.8.2",
-    "@maplibre/maplibre-gl-style-spec": "^25.0.2",
+    "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
+    "@maplibre/maplibre-gl-geocoder": "^1.9.0",
+    "@maplibre/maplibre-gl-inspect": "^1.7.1",
+    "@maplibre/maplibre-gl-style-spec": "^23.2.3",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@prantlf/jsonlint": "^16.0.0",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
-    "codemirror": "^6.0.2",
-    "color": "^5.0.3",
+    "codemirror": "^5.65.19",
+    "color": "^5.0.0",
     "detect-browser": "^5.3.0",
-    "downshift": "^9.4.0",
     "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "i18next": "^26.3.4",
-    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next": "^25.3.2",
+    "i18next-browser-languagedetector": "^8.2.0",
     "i18next-resources-to-backend": "^1.2.1",
     "json-stringify-pretty-compact": "^4.0.0",
     "json-to-ast": "^2.1.0",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.21",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "^5.5.0",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^10.9.0",
-    "ol-mapbox-style": "^13.4.1",
-    "pmtiles": "^4.4.1",
+    "ol": "^10.6.1",
+    "ol-mapbox-style": "^13.0.1",
+    "pmtiles": "^4.3.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.7",
+    "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.1",
-    "react-aria-menubutton": "^8.0.0",
+    "react-aria-menubutton": "^7.0.3",
     "react-aria-modal": "^5.0.2",
+    "downshift": "^9.0.10",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^19.2.7",
-    "react-i18next": "^17.0.8",
-    "react-icons": "^5.7.0",
-    "react-markdown": "^10.1.0",
+    "react-dom": "^19.1.1",
+    "react-file-reader-input": "^2.0.0",
+    "react-i18next": "^15.6.1",
+    "react-icon-base": "^2.1.2",
+    "react-icons": "^5.5.0",
+    "react-sortable-hoc": "^2.0.0",
     "reconnecting-websocket": "^4.4.0",
-    "slugify": "^1.6.9",
+    "slugify": "^1.6.6",
     "string-hash": "^1.1.3",
     "url": "^0.11.4"
   },
@@ -98,12 +92,13 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@cypress/code-coverage": "^3.14.5",
+    "@eslint/js": "^9.31.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@playwright/test": "^1.61.1",
-    "@stylistic/eslint-plugin": "^5.10.0",
-    "@types/codemirror": "^5.60.17",
-    "@types/color": "^4.2.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@shellygo/cypress-test-utils": "^5.0.2",
+    "@types/codemirror": "^5.60.15",
+    "@types/color": "^4.2.0",
     "@types/cors": "^2.8.19",
     "@types/file-saver": "^2.0.7",
     "@types/geojson": "^7946.0.16",
@@ -115,36 +110,38 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.17",
+    "@types/react": "^18.2.67",
     "@types/react-aria-menubutton": "^6.2.14",
     "@types/react-aria-modal": "^5.0.0",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.3",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-file-reader-input": "^2.0.4",
+    "@types/react-icon-base": "^2.1.6",
     "@types/string-hash": "^1.1.3",
-    "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "5.2",
-    "@vitest/coverage-v8": "^4.1.10",
-    "cors": "^2.8.6",
-    "eslint": "^10.6.0",
+    "@types/uuid": "^10.0.0",
+    "@types/wicg-file-system-access": "^2023.10.6",
+    "@vitejs/plugin-react": "^4.7.0",
+    "cors": "^2.8.5",
+    "cypress": "^14.5.2",
+    "cypress-plugin-tab": "^1.0.5",
+    "eslint": "^9.31.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "i18next-cli": "^1.65.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "i18next-parser": "^9.3.0",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
-    "nyc": "^18.0.0",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.6",
     "react-hot-loader": "^4.13.1",
-    "sass": "^1.101.0",
-    "stylelint": "^17.14.0",
-    "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-scss": "^7.2.0",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
-    "uuid": "^14.0.1",
-    "vite": "^7.3.2",
-    "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.10"
+    "sass": "^1.89.2",
+    "stylelint": "^16.22.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "uuid": "^11.1.0",
+    "vite": "^6.3.5",
+    "vite-plugin-istanbul": "^7.1.0"
   }
 }

playwright.config.ts

@@ -1,46 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-const isCI = !!process.env.CI;
-// When the app is already served elsewhere (e.g. the docker e2e job) set
-// E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
-const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
-const baseURL = process.env.E2E_BASE_URL ?? "http://localhost:8888/";
-
-export default defineConfig({
-  testDir: "./e2e",
-  testMatch: "**/*.spec.ts",
-  globalSetup: "./e2e/utils/e2e-setup.ts",
-  globalTeardown: "./e2e/utils/e2e-teardown.ts",
-  fullyParallel: true,
-  forbidOnly: isCI,
-  retries: isCI ? 2 : 0,
-  reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
-  use: {
-    baseURL,
-    trace: "on-first-retry",
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-        launchOptions: {
-          // Allow WebGL (maplibre) to fall back to software rendering in headless.
-          args: [
-            "--disable-gpu",
-            "--enable-features=AllowSwiftShaderFallback,AllowSoftwareGLFallbackDueToCrashes",
-            "--enable-unsafe-swiftshader",
-          ],
-        },
-      },
-    },
-  ],
-  webServer: useExternalServer
-    ? undefined
-    : {
-      command: "npm run start",
-      url: "http://localhost:8888/maputnik/",
-      reuseExistingServer: !isCI,
-      timeout: 120000,
-    },
-});

src/components/AppLayout.tsx

@@ -1,50 +1,45 @@
-import React from "react";
-import { ScrollContainer } from "./ScrollContainer";
-import { type WithTranslation, withTranslation } from "react-i18next";
-import { IconContext } from "react-icons";
+import React from 'react'
+import ScrollContainer from './ScrollContainer'
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
 
 type AppLayoutInternalProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
-  codeEditor?: React.ReactElement
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
 } & WithTranslation;
 
-const AppLayoutInternal: React.FC<AppLayoutInternalProps> = (props) => {
-  document.body.dir = props.i18n.dir();
+class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
 
-  return <IconContext.Provider value={{size: "14px"}}>
-    <div className="maputnik-layout">
-      {props.toolbar}
-      <div className="maputnik-layout-main">
-        {props.codeEditor && <div className="maputnik-layout-code-editor">
-          <ScrollContainer>
-            {props.codeEditor}
-          </ScrollContainer>
-        </div>
-        }
-        {!props.codeEditor && <>
+  render() {
+    document.body.dir = this.props.i18n.dir();
+
+    return <IconContext.Provider value={{size: '14px'}}>
+      <div className="maputnik-layout">
+        {this.props.toolbar}
+        <div className="maputnik-layout-main">
           <div className="maputnik-layout-list">
-            {props.layerList}
+            {this.props.layerList}
           </div>
           <div className="maputnik-layout-drawer">
             <ScrollContainer>
-              {props.layerEditor}
+              {this.props.layerEditor}
             </ScrollContainer>
           </div>
-        </>}
-        {props.map}
+          {this.props.map}
+        </div>
+        {this.props.bottom && <div className="maputnik-layout-bottom">
+          {this.props.bottom}
+        </div>
+        }
+        {this.props.modals}
       </div>
-      {props.bottom && <div className="maputnik-layout-bottom">
-        {props.bottom}
-      </div>
-      }
-      {props.modals}
-    </div>
-  </IconContext.Provider>;
-};
+    </IconContext.Provider>
+  }
+}
 
-export const AppLayout = withTranslation()(AppLayoutInternal);
+const AppLayout = withTranslation()(AppLayoutInternal);
+export default AppLayout;

src/components/AppMessagePanel.tsx

@@ -1,61 +1,66 @@
-import React from "react";
-import { formatLayerId } from "../libs/format";
-import { type LayerSpecification, type StyleSpecification } from "maplibre-gl";
-import { type WithTranslation, withTranslation } from "react-i18next";
-import { type MappedError } from "../libs/definitions";
+import React from 'react'
+import {formatLayerId} from '../libs/format';
+import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 type AppMessagePanelInternalProps = {
-  errors?: MappedError[]
+  errors?: unknown[]
   infos?: string[]
   mapStyle?: StyleSpecification
-  onLayerSelect?(index: number): void;
+  onLayerSelect?(...args: unknown[]): unknown
   currentLayer?: LayerSpecification
   selectedLayerIndex?: number
 } & WithTranslation;
 
-const AppMessagePanelInternal: React.FC<AppMessagePanelInternalProps> = ({
-  onLayerSelect = () => { },
-  ...props
-}) => {
-  const { t, selectedLayerIndex } = props;
-  const errors = props.errors?.map((error, idx) => {
-    let content;
-    if (error.parsed && error.parsed.type === "layer") {
-      const { parsed } = error;
-      const layerId = props.mapStyle?.layers[parsed.data.index].id;
-      content = (
-        <>
-          {t("Layer")} <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
-          {selectedLayerIndex !== parsed.data.index &&
-            <>
-              &nbsp;&mdash;&nbsp;
-              <button
-                className="maputnik-message-panel__switch-button"
-                onClick={() => onLayerSelect!(parsed.data.index)}
-              >
-                {t("switch to layer")}
-              </button>
-            </>
-          }
-        </>
-      );
-    }
-    else {
-      content = error.message;
-    }
-    return <p key={"error-" + idx} className="maputnik-message-panel-error">
-      {content}
-    </p>;
-  });
+class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
+  static defaultProps = {
+    onLayerSelect: () => {},
+  }
 
-  const infos = props.infos?.map((m, i) => {
-    return <p key={"info-" + i}>{m}</p>;
-  });
+  render() {
+    const {t, selectedLayerIndex} = this.props;
+    const errors = this.props.errors?.map((error: any, idx) => {
+      let content;
+      if (error.parsed && error.parsed.type === "layer") {
+        const {parsed} = error;
+        const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
+        content = (
+          <>
+            <Trans t={t}>
+              Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            </Trans>
+            {selectedLayerIndex !== parsed.data.index &&
+              <>
+                &nbsp;&mdash;&nbsp;
+                <button
+                  className="maputnik-message-panel__switch-button"
+                  onClick={() => this.props.onLayerSelect!(parsed.data.index)}
+                >
+                  {t("switch to layer")}
+                </button>
+              </>
+            }
+          </>
+        );
+      }
+      else {
+        content = error.message;
+      }
+      return <p key={"error-"+idx} className="maputnik-message-panel-error">
+        {content}
+      </p>
+    })
 
-  return <div className="maputnik-message-panel">
-    {errors}
-    {infos}
-  </div>;
-};
+    const infos = this.props.infos?.map((m, i) => {
+      return <p key={"info-"+i}>{m}</p>
+    })
 
-export const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
+    return <div className="maputnik-message-panel">
+      {errors}
+      {infos}
+    </div>
+  }
+}
+
+const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
+export default AppMessagePanel;

src/components/AppToolbar.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import classnames from "classnames";
-import {detect} from "detect-browser";
+import React from 'react'
+import classnames from 'classnames'
+import {detect} from 'detect-browser';
 
 import {
   MdOpenInBrowser,
@@ -9,63 +9,66 @@ import {
   MdHelpOutline,
   MdFindInPage,
   MdLanguage,
-  MdSave,
-  MdPublic,
-  MdCode
-} from "react-icons/md";
-import pkgJson from "../../package.json";
+  MdSave
+} from 'react-icons/md'
+import pkgJson from '../../package.json'
 //@ts-ignore
-import maputnikLogo from "maputnik-design/logos/logo-color.svg?inline";
-import { withTranslation, type WithTranslation } from "react-i18next";
-import { supportedLanguages } from "../i18n";
-import type { OnStyleChangedCallback } from "../libs/definitions";
+import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
+import { withTranslation, WithTranslation } from 'react-i18next';
+import { supportedLanguages } from '../i18n';
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
-const colorAccessibilityFiltersEnabled = ["chrome", "firefox"].indexOf(browser!.name) > -1;
+const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
 
-export type ModalTypes = "settings" | "sources" | "open" | "shortcuts" | "export" | "debug" | "globalState" | "codeEditor";
 
 type IconTextProps = {
   children?: React.ReactNode
 };
 
 
-const IconText: React.FC<IconTextProps> = (props) => {
-  return <span className="maputnik-icon-text">{props.children}</span>;
-};
+class IconText extends React.Component<IconTextProps> {
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
+}
 
 type ToolbarLinkProps = {
   className?: string
   children?: React.ReactNode
   href?: string
+  onToggleModal?(...args: unknown[]): unknown
 };
 
-const ToolbarLink: React.FC<ToolbarLinkProps> = (props) => {
-  return <a
-    className={classnames("maputnik-toolbar-link", props.className)}
-    href={props.href}
-    rel="noopener noreferrer"
-    target="_blank"
-    data-wd-key="toolbar:link"
-  >
-    {props.children}
-  </a>;
-};
+class ToolbarLink extends React.Component<ToolbarLinkProps> {
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+      data-wd-key="toolbar:link"
+    >
+      {this.props.children}
+    </a>
+  }
+}
 
 type ToolbarSelectProps = {
   children?: React.ReactNode
   wdKey?: string
 };
 
-const ToolbarSelect: React.FC<ToolbarSelectProps> = (props) => {
-  return <div
-    className='maputnik-toolbar-select'
-    data-wd-key={props.wdKey}
-  >
-    {props.children}
-  </div>;
-};
+class ToolbarSelect extends React.Component<ToolbarSelectProps> {
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
 
 type ToolbarActionProps = {
   children?: React.ReactNode
@@ -73,43 +76,55 @@ type ToolbarActionProps = {
   wdKey?: string
 };
 
-const ToolbarAction: React.FC<ToolbarActionProps> = (props) => {
-  return <button
-    className='maputnik-toolbar-action'
-    data-wd-key={props.wdKey}
-    onClick={props.onClick}
-  >
-    {props.children}
-  </button>;
-};
+class ToolbarAction extends React.Component<ToolbarActionProps> {
+  render() {
+    return <button
+      className='maputnik-toolbar-action'
+      data-wd-key={this.props.wdKey}
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </button>
+  }
+}
 
 export type MapState = "map" | "inspect" | "filter-achromatopsia" | "filter-deuteranopia" | "filter-protanopia" | "filter-tritanopia";
 
 type AppToolbarInternalProps = {
   mapStyle: object
   inspectModeEnabled: boolean
-  onStyleChanged: OnStyleChangedCallback
+  onStyleChanged(...args: unknown[]): unknown
   // A new style has been uploaded
-  onStyleOpen: OnStyleChangedCallback
+  onStyleOpen(...args: unknown[]): unknown
   // A dict of source id's and the available source layers
   sources: object
   children?: React.ReactNode
-  onToggleModal(modal: ModalTypes): void
+  onToggleModal(...args: unknown[]): unknown
   onSetMapState(mapState: MapState): unknown
   mapState?: MapState
   renderer?: string
 } & WithTranslation;
 
-const AppToolbarInternal: React.FC<AppToolbarInternalProps> = (props) => {
-  function handleSelection(val: MapState) {
-    props.onSetMapState(val);
+class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
+  state = {
+    isOpen: {
+      settings: false,
+      sources: false,
+      open: false,
+      add: false,
+      export: false,
+    }
   }
 
-  function handleLanguageChange(val: string) {
-    props.i18n.changeLanguage(val);
+  handleSelection(val: MapState) {
+    this.props.onSetMapState(val);
   }
 
-  const onSkip = (target: string) => {
+  handleLanguageChange(val: string) {
+    this.props.i18n.changeLanguage(val);
+  }
+
+  onSkip = (target: string) => {
     if (target === "map") {
       (document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
     }
@@ -117,173 +132,168 @@ const AppToolbarInternal: React.FC<AppToolbarInternalProps> = (props) => {
       const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
       el.focus();
     }
-  };
+  }
 
-  const t = props.t;
-  const views = [
-    {
-      id: "map",
-      group: "general",
-      title: t("Map"),
-    },
-    {
-      id: "inspect",
-      group: "general",
-      title: t("Inspect"),
-      disabled: props.renderer === "ol",
-    },
-    {
-      id: "filter-deuteranopia",
-      group: "color-accessibility",
-      title: t("Deuteranopia filter"),
-      disabled: !colorAccessibilityFiltersEnabled,
-    },
-    {
-      id: "filter-protanopia",
-      group: "color-accessibility",
-      title: t("Protanopia filter"),
-      disabled: !colorAccessibilityFiltersEnabled,
-    },
-    {
-      id: "filter-tritanopia",
-      group: "color-accessibility",
-      title: t("Tritanopia filter"),
-      disabled: !colorAccessibilityFiltersEnabled,
-    },
-    {
-      id: "filter-achromatopsia",
-      group: "color-accessibility",
-      title: t("Achromatopsia filter"),
-      disabled: !colorAccessibilityFiltersEnabled,
-    },
-  ];
+  render() {
+    const t = this.props.t;
+    const views = [
+      {
+        id: "map",
+        group: "general",
+        title: t("Map"),
+      },
+      {
+        id: "inspect",
+        group: "general",
+        title: t("Inspect"),
+        disabled: this.props.renderer === 'ol',
+      },
+      {
+        id: "filter-deuteranopia",
+        group: "color-accessibility",
+        title: t("Deuteranopia filter"),
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-protanopia",
+        group: "color-accessibility",
+        title: t("Protanopia filter"),
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-tritanopia",
+        group: "color-accessibility",
+        title: t("Tritanopia filter"),
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-achromatopsia",
+        group: "color-accessibility",
+        title: t("Achromatopsia filter"),
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+    ];
 
-  const currentView = views.find((view) => {
-    return view.id === props.mapState;
-  });
+    const currentView = views.find((view) => {
+      return view.id === this.props.mapState;
+    });
 
-  return <nav className='maputnik-toolbar'>
-    <div className="maputnik-toolbar__inner">
-      <div
-        className="maputnik-toolbar-logo-container"
-      >
-        {/* Keyboard accessible quick links */}
-        <button
-          data-wd-key="root:skip:layer-list"
-          className="maputnik-toolbar-skip"
-          onClick={_e => onSkip("layer-list")}
+    return <nav className='maputnik-toolbar'>
+      <div className="maputnik-toolbar__inner">
+        <div
+          className="maputnik-toolbar-logo-container"
         >
-          {t("Layers list")}
-        </button>
-        <button
-          data-wd-key="root:skip:layer-editor"
-          className="maputnik-toolbar-skip"
-          onClick={_e => onSkip("layer-editor")}
-        >
-          {t("Layer editor")}
-        </button>
-        <button
-          data-wd-key="root:skip:map-view"
-          className="maputnik-toolbar-skip"
-          onClick={_e => onSkip("map")}
-        >
-          {t("Map view")}
-        </button>
-        <a
-          className="maputnik-toolbar-logo"
-          target="blank"
-          rel="noreferrer noopener"
-          href="https://github.com/maplibre/maputnik"
-        >
-          <img src={maputnikLogo} alt={t("Maputnik on GitHub")} />
-          <h1>
-            <span className="maputnik-toolbar-name">{pkgJson.name}</span>
-            <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
-          </h1>
-        </a>
-      </div>
-      <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
-        <ToolbarAction wdKey="nav:open" onClick={() => props.onToggleModal("open")}>
-          <MdOpenInBrowser />
-          <IconText>{t("Open")}</IconText>
-        </ToolbarAction>
-        <ToolbarAction wdKey="nav:export" onClick={() => props.onToggleModal("export")}>
-          <MdSave />
-          <IconText>{t("Save")}</IconText>
-        </ToolbarAction>
-        <ToolbarAction wdKey="nav:code-editor" onClick={() => props.onToggleModal("codeEditor")}>
-          <MdCode />
-          <IconText>{t("Code Editor")}</IconText>
-        </ToolbarAction>
-        <ToolbarAction wdKey="nav:sources" onClick={() => props.onToggleModal("sources")}>
-          <MdLayers />
-          <IconText>{t("Data Sources")}</IconText>
-        </ToolbarAction>
-        <ToolbarAction wdKey="nav:settings" onClick={() => props.onToggleModal("settings")}>
-          <MdSettings />
-          <IconText>{t("Style Settings")}</IconText>
-        </ToolbarAction>
-        <ToolbarAction wdKey="nav:global-state" onClick={() => props.onToggleModal("globalState")}>
-          <MdPublic />
-          <IconText>{t("Global State")}</IconText>
-        </ToolbarAction>
+          {/* Keyboard accessible quick links */}
+          <button
+            data-wd-key="root:skip:layer-list"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("layer-list")}
+          >
+            {t("Layers list")}
+          </button>
+          <button
+            data-wd-key="root:skip:layer-editor"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("layer-editor")}
+          >
+            {t("Layer editor")}
+          </button>
+          <button
+            data-wd-key="root:skip:map-view"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("map")}
+          >
+            {t("Map view")}
+          </button>
+          <a
+            className="maputnik-toolbar-logo"
+            target="blank"
+            rel="noreferrer noopener"
+            href="https://github.com/maplibre/maputnik"
+          >
+            <img src={maputnikLogo} alt={t("Maputnik on GitHub")} />
+            <h1>
+              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
+              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
+            </h1>
+          </a>
+        </div>
+        <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
+          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
+            <MdOpenInBrowser />
+            <IconText>{t("Open")}</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
+            <MdSave />
+            <IconText>{t("Save")}</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
+            <MdLayers />
+            <IconText>{t("Data Sources")}</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
+            <MdSettings />
+            <IconText>{t("Style Settings")}</IconText>
+          </ToolbarAction>
 
-        <ToolbarSelect wdKey="nav:inspect">
-          <MdFindInPage />
-          <IconText>{t("View")}
-            <select
-              className="maputnik-select"
-              data-wd-key="maputnik-select"
-              onChange={(e) => handleSelection(e.target.value as MapState)}
-              value={currentView?.id}
-            >
-              {views.filter(v => v.group === "general").map((item) => {
-                return (
-                  <option key={item.id} value={item.id} disabled={item.disabled} data-wd-key={item.id}>
-                    {item.title}
-                  </option>
-                );
-              })}
-              <optgroup label={t("Color accessibility")}>
-                {views.filter(v => v.group === "color-accessibility").map((item) => {
+          <ToolbarSelect wdKey="nav:inspect">
+            <MdFindInPage />
+            <IconText>{t("View")}
+              <select
+                className="maputnik-select"
+                data-wd-key="maputnik-select"
+                onChange={(e) => this.handleSelection(e.target.value as MapState)}
+                value={currentView?.id}
+              >
+                {views.filter(v => v.group === "general").map((item) => {
                   return (
-                    <option key={item.id} value={item.id} disabled={item.disabled}>
+                    <option key={item.id} value={item.id} disabled={item.disabled} data-wd-key={item.id}>
                       {item.title}
                     </option>
                   );
                 })}
-              </optgroup>
-            </select>
-          </IconText>
-        </ToolbarSelect>
+                <optgroup label={t("Color accessibility")}>
+                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                    return (
+                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                        {item.title}
+                      </option>
+                    );
+                  })}
+                </optgroup>
+              </select>
+            </IconText>
+          </ToolbarSelect>
 
-        <ToolbarSelect wdKey="nav:language">
-          <MdLanguage />
-          <IconText>Language
-            <select
-              className="maputnik-select"
-              data-wd-key="maputnik-lang-select"
-              onChange={(e) => handleLanguageChange(e.target.value)}
-              value={props.i18n.language}
-            >
-              {Object.entries(supportedLanguages).map(([code, name]) => {
-                return (
-                  <option key={code} value={code}>
-                    {name}
-                  </option>
-                );
-              })}
-            </select>
-          </IconText>
-        </ToolbarSelect>
+          <ToolbarSelect wdKey="nav:language">
+            <MdLanguage />
+            <IconText>Language
+              <select
+                className="maputnik-select"
+                data-wd-key="maputnik-lang-select"
+                onChange={(e) => this.handleLanguageChange(e.target.value)}
+                value={this.props.i18n.language}
+              >
+                {Object.entries(supportedLanguages).map(([code, name]) => {
+                  return (
+                    <option key={code} value={code}>
+                      {name}
+                    </option>
+                  );
+                })}
+              </select>
+            </IconText>
+          </ToolbarSelect>
 
-        <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
-          <MdHelpOutline />
-          <IconText>{t("Help")}</IconText>
-        </ToolbarLink>
+          <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
+            <MdHelpOutline />
+            <IconText>{t("Help")}</IconText>
+          </ToolbarLink>
+        </div>
       </div>
-    </div>
-  </nav>;
-};
+    </nav>
+  }
+}
 
-export const AppToolbar = withTranslation()(AppToolbarInternal);
+const AppToolbar = withTranslation()(AppToolbarInternal);
+export default AppToolbar;

src/components/Block.tsx

@@ -1,27 +1,47 @@
-import React, {type CSSProperties, type PropsWithChildren, type SyntheticEvent, useRef, useState} from "react";
-import classnames from "classnames";
-import { FieldDocLabel } from "./FieldDocLabel";
-import { Doc } from "./Doc";
+import React, {PropsWithChildren, SyntheticEvent} from 'react'
+import classnames from 'classnames'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
 
-export type BlockProps = PropsWithChildren & {
+
+type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
   label?: string
   action?: React.ReactElement
-  style?: CSSProperties
+  style?: object
   onChange?(...args: unknown[]): unknown
   fieldSpec?: object
   wideMode?: boolean
   error?: {message: string}
 };
 
-/** Wrap a component with a label */
-export const Block: React.FC<BlockProps> = (props) => {
-  const [showDoc, setShowDoc] = useState(false);
-  const blockEl = useRef<HTMLDivElement | null>(null);
+type BlockState = {
+  showDoc: boolean
+};
 
-  const onToggleDoc = (val: boolean) => {
-    setShowDoc(val);
-  };
+/** Wrap a component with a label */
+export default class Block extends React.Component<BlockProps, BlockState> {
+  _blockEl: HTMLDivElement | null = null;
+
+  constructor (props: BlockProps) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
+    const value = e.target.value
+    if (this.props.onChange) {
+      return this.props.onChange(value === "" ? undefined : value)
+    }
+  }
+
+  onToggleDoc = (val: boolean) => {
+    this.setState({
+      showDoc: val
+    });
+  }
 
   /**
    * Some fields for example <InputColor/> bind click events inside the element
@@ -29,9 +49,9 @@ export const Block: React.FC<BlockProps> = (props) => {
    * causing the picker to reopen. This causes a scenario where the picker can
    * never be closed once open.
    */
-  const onLabelClick = (event: SyntheticEvent<any, any>) => {
+  onLabelClick = (event: SyntheticEvent<any, any>) => {
     const el = event.nativeEvent.target;
-    const contains = blockEl.current?.contains(el);
+    const contains = this._blockEl?.contains(el);
 
     if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
@@ -39,45 +59,46 @@ export const Block: React.FC<BlockProps> = (props) => {
     if (event.nativeEvent.target.nodeName !== "A") {
       event.preventDefault();
     }
-  };
+  }
 
-  return <label style={props.style}
-    data-wd-key={props["data-wd-key"]}
-    className={classnames({
-      "maputnik-input-block": true,
-      "maputnik-input-block--wide": props.wideMode,
-      "maputnik-action-block": props.action,
-      "maputnik-input-block--error": props.error
-    })}
-    onClick={onLabelClick}
-  >
-    {props.fieldSpec &&
-      <div className="maputnik-input-block-label">
-        <FieldDocLabel
-          label={props.label}
-          onToggleDoc={onToggleDoc}
-          fieldSpec={props.fieldSpec}
-        />
+  render() {
+    return <label style={this.props.style}
+      data-wd-key={this.props["data-wd-key"]}
+      className={classnames({
+        "maputnik-input-block": true,
+        "maputnik-input-block--wide": this.props.wideMode,
+        "maputnik-action-block": this.props.action
+      })}
+      onClick={this.onLabelClick}
+    >
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
       </div>
-    }
-    {!props.fieldSpec &&
-      <div className="maputnik-input-block-label">
-        {props.label}
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+        {this.props.children}
       </div>
-    }
-    <div className="maputnik-input-block-action">
-      {props.action}
-    </div>
-    <div className="maputnik-input-block-content" ref={blockEl}>
-      {props.children}
-    </div>
-    {props.fieldSpec &&
-      <div
-        className="maputnik-doc-inline"
-        style={{display: showDoc ? "" : "none"}}
-      >
-        <Doc fieldSpec={props.fieldSpec} />
-      </div>
-    }
-  </label>;
-};
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </label>
+  }
+}

src/components/CodeEditor.tsx

@@ -1,27 +0,0 @@
-import { InputJson } from "./InputJson";
-import React from "react";
-import { withTranslation, type WithTranslation } from "react-i18next";
-import { type StyleSpecification } from "maplibre-gl";
-import { type StyleSpecificationWithId } from "../libs/definitions";
-
-export type CodeEditorProps = {
-  value: StyleSpecification;
-  onChange: (value: StyleSpecificationWithId) => void;
-  onClose: () => void;
-} & WithTranslation;
-
-const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
-
-  return <>
-    <button className="maputnik-button" onClick={props.onClose} aria-label={props.t("Close")} style={{ position: "sticky", top: "0", zIndex: 1 }}>{props.t("Click to close the editor")}</button>
-    <InputJson
-      lintType="style"
-      value={props.value}
-      onChange={props.onChange}
-      className={"maputnik-code-editor"}
-      withScroll={true}
-    />;
-  </>;
-};
-
-export const CodeEditor = withTranslation()(CodeEditorInternal);

src/components/Collapse.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Collapse as ReactCollapse } from "react-collapse";
-import {reducedMotionEnabled} from "../libs/accessibility";
+import React from 'react'
+import { Collapse as ReactCollapse } from 'react-collapse'
+import {reducedMotionEnabled} from '../libs/accessibility'
 
 
 type CollapseProps = {
@@ -9,19 +9,25 @@ type CollapseProps = {
 };
 
 
-export const Collapse: React.FC<CollapseProps> = ({isActive = true, children}) => {
-  if (reducedMotionEnabled()) {
-    return (
-      <div style={{display: isActive ? "block" : "none"}}>
-        {children}
-      </div>
-    );
+export default class Collapse extends React.Component<CollapseProps> {
+  static defaultProps = {
+    isActive: true
   }
-  else {
-    return (
-      <ReactCollapse isOpened={isActive}>
-        {children}
-      </ReactCollapse>
-    );
+
+  render() {
+    if (reducedMotionEnabled()) {
+      return (
+        <div style={{display: this.props.isActive ? "block" : "none"}}>
+          {this.props.children}
+        </div>
+      )
+    }
+    else {
+      return (
+        <ReactCollapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </ReactCollapse>
+      )
+    }
   }
-};
+}

src/components/Collapser.tsx

@@ -1,16 +1,18 @@
-import React from "react";
-import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
+import React from 'react'
+import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
 
 type CollapserProps = {
   isCollapsed: boolean
   style?: object
 };
 
-export const Collapser: React.FC<CollapserProps> = (props) => {
-  const iconStyle = {
-    width: 20,
-    height: 20,
-    ...props.style,
-  };
-  return props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />;
-};
+export default class Collapser extends React.Component<CollapserProps> {
+  render() {
+    const iconStyle = {
+      width: 20,
+      height: 20,
+      ...this.props.style,
+    }
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
+  }
+}

src/components/DataProperty.tsx

@@ -1,371 +0,0 @@
-import React, { useRef } from "react";
-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 { 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 { type MappedLayerErrors } from "../libs/definitions";
-
-
-
-function setStopRefs(props: DataPropertyInternalProps, state: DataPropertyState) {
-  // This is initialised below only if required to improved performance.
-  let newRefs: {[key: number]: string} | undefined;
-
-  if(props.value && props.value.stops) {
-    props.value.stops.forEach((_val, idx) => {
-      if(!Object.prototype.hasOwnProperty.call(state.refs, idx)) {
-        if(!newRefs) {
-          newRefs = {...state};
-        }
-        newRefs[idx] = docUid("stop-");
-      }
-    });
-  }
-
-  return newRefs;
-}
-
-type DataPropertyInternalProps = {
-  onChange?(fieldName: string, value: any): unknown
-  onDeleteStop?(...args: unknown[]): unknown
-  onAddStop?(...args: unknown[]): unknown
-  onExpressionClick?(...args: unknown[]): unknown
-  onChangeToZoomFunction?(...args: unknown[]): unknown
-  fieldName: string
-  fieldType?: string
-  fieldSpec?: object
-  value?: DataPropertyValue
-  errors?: MappedLayerErrors
-} & WithTranslation;
-
-type DataPropertyState = {
-  refs: {[key: number]: string}
-};
-
-type DataPropertyValue = {
-  default?: any
-  property?: string
-  base?: number
-  type?: string
-  stops: Stop[]
-};
-
-export type Stop = [{
-  zoom: number
-  value: number
-}, number];
-
-const DataPropertyInternal: React.FC<DataPropertyInternalProps> = (props) => {
-  // Kept in a ref rather than state: the original recomputed these on every
-  // render via getDerivedStateFromProps, which as state would mean setting
-  // state during render on every pass.
-  const refs = useRef<{[key: number]: string}>({});
-  // setStopRefs returns undefined when no new stop needs a ref; as in the
-  // original, only replace the map when it actually produced one.
-  const newStopRefs = setStopRefs(props, { refs: refs.current });
-  if (newStopRefs) {
-    refs.current = newStopRefs;
-  }
-
-  function getFieldFunctionType(fieldSpec: any) {
-    if (fieldSpec.expression.interpolated) {
-      return "exponential";
-    }
-    if (fieldSpec.type === "number") {
-      return "interval";
-    }
-    return "categorical";
-  }
-
-  function getDataFunctionTypes(fieldSpec: any) {
-    if (fieldSpec.expression.interpolated) {
-      return ["interpolate", "categorical", "interval", "exponential", "identity"];
-    }
-    else {
-      return ["categorical", "interval", "identity"];
-    }
-  }
-
-  // Order the stops altering the refs to reflect their new position.
-  function orderStopsByZoom(stops: Stop[]) {
-    const mappedWithRef = stops
-      .map((stop, idx) => {
-        return {
-          ref: refs.current[idx],
-          data: stop
-        };
-      })
-    // Sort by zoom
-      .sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
-
-    // Fetch the new position of the stops
-    const newRefs = {} as {[key: number]: string};
-    mappedWithRef
-      .forEach((stop, idx) =>{
-        newRefs[idx] = stop.ref;
-      });
-
-    refs.current = newRefs;
-
-    return mappedWithRef.map((item) => item.data);
-  }
-
-  const onChange = (fieldName: string, value: any) => {
-    if (value.type === "identity") {
-      value = {
-        type: value.type,
-        property: value.property,
-      };
-    }
-    else {
-      const stopValue = value.type === "categorical" ? "" : 0;
-      value = {
-        property: "",
-        type: value.type,
-        // Default props if they don't already exist.
-        stops: [
-          [{zoom: 6, value: stopValue}, findDefaultFromSpec(props.fieldSpec as any)],
-          [{zoom: 10, value: stopValue}, findDefaultFromSpec(props.fieldSpec as any)]
-        ],
-        ...value,
-      };
-    }
-    props.onChange!(fieldName, value);
-  };
-
-  function changeStop(changeIdx: number, stopData: { zoom: number | undefined, value: number }, value: number) {
-    const stops = props.value?.stops.slice(0) || [];
-    // const changedStop = stopData.zoom === undefined ? stopData.value : stopData
-    stops[changeIdx] = [
-      {
-        value: stopData.value,
-        zoom: (stopData.zoom === undefined) ? 0 : stopData.zoom,
-      },
-      value
-    ];
-
-    const orderedStops = orderStopsByZoom(stops);
-
-    const changedValue = {
-      ...props.value,
-      stops: orderedStops,
-    };
-    onChange(props.fieldName, changedValue);
-  }
-
-  function changeBase(newValue: number | undefined) {
-    const changedValue = {
-      ...props.value,
-      base: newValue
-    };
-
-    if (changedValue.base === undefined) {
-      delete changedValue["base"];
-    }
-    props.onChange!(props.fieldName, changedValue);
-  }
-
-  function changeDataType(propVal: string) {
-    if (propVal === "interpolate" && props.onChangeToZoomFunction) {
-      props.onChangeToZoomFunction();
-    }
-    else {
-      onChange(props.fieldName, {
-        ...props.value,
-        type: propVal,
-      });
-    }
-  }
-
-  function changeDataProperty(propName: "property" | "default", propVal: any) {
-    if (propVal) {
-      props.value![propName] = propVal;
-    }
-    else {
-      delete props.value![propName];
-    }
-    onChange(props.fieldName, props.value);
-  }
-
-  const t = props.t;
-
-  if (typeof props.value?.type === "undefined") {
-    props.value!.type = getFieldFunctionType(props.fieldSpec);
-  }
-
-  let dataFields;
-  if (props.value?.stops) {
-    dataFields = props.value.stops.map((stop, idx) => {
-      const zoomLevel = typeof stop[0] === "object" ? stop[0].zoom : undefined;
-      const key  = refs.current[idx];
-      const dataLevel = typeof stop[0] === "object" ? stop[0].value : stop[0];
-      const value = stop[1];
-      const deleteStopBtn = <DeleteStopButton onClick={props.onDeleteStop?.bind(null, idx)} />;
-
-      const dataProps = {
-        "aria-label": t("Input value"),
-        label: t("Data value"),
-        value: dataLevel as any,
-        onChange: (newData: string | number | undefined) => changeStop(idx, { zoom: zoomLevel, value: newData as number }, value)
-      };
-
-      let dataInput;
-      if(props.value?.type === "categorical") {
-        dataInput = <InputString {...dataProps} />;
-      }
-      else {
-        dataInput = <InputNumber {...dataProps} />;
-      }
-
-      let zoomInput = null;
-      if(zoomLevel !== undefined) {
-        zoomInput = <div>
-          <InputNumber
-            aria-label="Zoom"
-            value={zoomLevel}
-            onChange={newZoom => changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
-            min={0}
-            max={22}
-          />
-        </div>;
-      }
-
-      return <tr key={key}>
-        <td>
-          {zoomInput}
-        </td>
-        <td>
-          {dataInput}
-        </td>
-        <td>
-          <InputSpec
-            aria-label={t("Output value")}
-            fieldName={props.fieldName}
-            fieldSpec={props.fieldSpec}
-            value={value}
-            onChange={(_, newValue) => changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue as number)}
-          />
-        </td>
-        <td>
-          {deleteStopBtn}
-        </td>
-      </tr>;
-    });
-  }
-
-  return <div className="maputnik-data-spec-block">
-    <fieldset className="maputnik-data-spec-property">
-      <legend>{labelFromFieldName(props.fieldName)}</legend>
-      <div className="maputnik-data-fieldset-inner">
-        <Block
-          label={t("Function")}
-          key="function"
-          data-wd-key="function-type"
-        >
-          <div className="maputnik-data-spec-property-input">
-            <InputSelect
-              value={props.value!.type}
-              onChange={(propVal: string) => changeDataType(propVal)}
-              title={t("Select a type of data scale (default is 'categorical').")}
-              options={getDataFunctionTypes(props.fieldSpec)}
-            />
-          </div>
-        </Block>
-        {props.value?.type !== "identity" &&
-            <Block
-              label={t("Base")}
-              key="base"
-              data-wd-key="function-base"
-            >
-              <div className="maputnik-data-spec-property-input">
-                <InputSpec
-                  fieldName={"base"}
-                  fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
-                  value={props.value?.base}
-                  onChange={(_, newValue) => changeBase(newValue as number)}
-                />
-              </div>
-            </Block>
-        }
-        <Block
-          label={"Property"}
-          key="property"
-          data-wd-key="function-property"
-        >
-          <div className="maputnik-data-spec-property-input">
-            <InputString
-              value={props.value?.property}
-              title={t("Input a data property to base styles off of.")}
-              onChange={propVal => changeDataProperty("property", propVal)}
-            />
-          </div>
-        </Block>
-        {dataFields &&
-            <Block
-              label={t("Default")}
-              key="default"
-              data-wd-key="function-default"
-            >
-              <InputSpec
-                fieldName={props.fieldName}
-                fieldSpec={props.fieldSpec}
-                value={props.value?.default}
-                onChange={(_, propVal) => changeDataProperty("default", propVal)}
-              />
-            </Block>
-        }
-        {dataFields &&
-            <div className="maputnik-function-stop">
-              <table className="maputnik-function-stop-table">
-                <caption>{t("Stops")}</caption>
-                <thead>
-                  <tr>
-                    <th>{t("Zoom")}</th>
-                    <th>{t("Input value")}</th>
-                    <th rowSpan={2}>{t("Output value")}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {dataFields}
-                </tbody>
-              </table>
-            </div>
-        }
-        <div className="maputnik-toolbox">
-          {dataFields &&
-              <InputButton
-                className="maputnik-add-stop"
-                onClick={props.onAddStop?.bind(null)}
-              >
-                <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
-                {t("Add stop")}
-              </InputButton>
-          }
-          <InputButton
-            className="maputnik-add-stop"
-            data-wd-key="convert-to-expression"
-            onClick={props.onExpressionClick?.bind(null)}
-          >
-            <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
-            {t("Convert to expression")}
-          </InputButton>
-        </div>
-      </div>
-    </fieldset>
-  </div>;
-};
-
-export const DataProperty = withTranslation()(DataPropertyInternal);

src/components/DeleteStopButton.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { InputButton } from "./InputButton";
-import {MdDelete} from "react-icons/md";
-import { type WithTranslation, withTranslation } from "react-i18next";
-
-
-type DeleteStopButtonInternalProps = {
-  onClick?(...args: unknown[]): unknown
-} & WithTranslation;
-
-
-const DeleteStopButtonInternal: React.FC<DeleteStopButtonInternalProps> = (props) => {
-  const t = props.t;
-  return <InputButton
-    className="maputnik-delete-stop"
-    onClick={props.onClick}
-    title={t("Remove zoom level from stop")}
-  >
-    <MdDelete />
-  </InputButton>;
-};
-
-export const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);

src/components/Doc.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import Markdown from "react-markdown";
+import React from 'react'
 
 const headers = {
   js: "JS",
   android: "Android",
-  ios: "iOS"
+  ios: "iOS",
+  macos: "macOS",
 };
 
 type DocProps = {
@@ -15,7 +15,7 @@ type DocProps = {
         doc?: string
       }
     }
-    "sdk-support"?: {
+    'sdk-support'?: {
       [key: string]: typeof headers
     }
     docUrl?: string,
@@ -23,84 +23,76 @@ type DocProps = {
   }
 };
 
-export const Doc: React.FC<DocProps> = ({fieldSpec}) => {
-  const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
-  const sdkSupport = fieldSpec["sdk-support"];
+export default class Doc extends React.Component<DocProps> {
+  render () {
+    const {fieldSpec} = this.props;
 
-  const renderValues = (
-    !!values &&
-    // HACK: Currently we merge additional values into the style spec, so this is required
-    // See <https://github.com/maplibre/maputnik/blob/main/src/components/PropertyGroup.jsx#L16>
-    !Array.isArray(values)
-  );
+    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
+    const sdkSupport = fieldSpec['sdk-support'];
 
-  const sdkSupportToJsx = (value: string) => {
-    const supportValue = value.toLowerCase();
-    if (supportValue.startsWith("https://")) {
-      return <a href={supportValue} target="_blank" rel="noreferrer">{"#" + supportValue.split("/").pop()}</a>;
-    }
-    return value;
-  };
+    const renderValues = (
+      !!values &&
+      // HACK: Currently we merge additional values into the style spec, so this is required
+      // See <https://github.com/maplibre/maputnik/blob/main/src/components/PropertyGroup.jsx#L16>
+      !Array.isArray(values)
+    );
 
-  return (
-    <>
-      {doc &&
-        <div className="SpecDoc">
-          <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>
-            <Markdown components={{
-              a: ({node: _node, href, children, ...props}) => <a href={href} target="_blank" {...props}>{children}</a>,
-            }}>{doc}</Markdown>
-          </div>
-          {renderValues &&
-            <ul className="SpecDoc__values">
-              {Object.entries(values).map(([key, value]) => {
-                return (
-                  <li key={key}>
-                    <code>{JSON.stringify(key)}</code>
-                    <div>{value.doc}</div>
-                  </li>
-                );
-              })}
-            </ul>
-          }
-        </div>
-      }
-      {sdkSupport &&
-        <div className="SpecDoc__sdk-support">
-          <table className="SpecDoc__sdk-support__table">
-            <thead>
-              <tr>
-                <th></th>
-                {Object.values(headers).map(header => {
-                  return <th key={header}>{header}</th>;
+    return (
+      <>
+        {doc &&
+          <div className="SpecDoc">
+            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>{doc}</div>
+            {renderValues &&
+              <ul className="SpecDoc__values">
+                {Object.entries(values).map(([key, value]) => {
+                  return (
+                    <li key={key}>
+                      <code>{JSON.stringify(key)}</code>
+                      <div>{value.doc}</div>
+                    </li>
+                  );
                 })}
-              </tr>
-            </thead>
-            <tbody>
-              {Object.entries(sdkSupport).map(([key, supportObj]) => {
-                return (
-                  <tr key={key}>
-                    <td>{key}</td>
-                    {Object.keys(headers).map((k) => {
-                      if (Object.prototype.hasOwnProperty.call(supportObj, k)) {
-                        return <td key={k}>{sdkSupportToJsx(supportObj[k as keyof typeof headers])}</td>;
-                      }
-                      else {
-                        return <td key={k}>no</td>;
-                      }
-                    })}
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      }
-      {docUrl && docUrlLinkText &&
-        <div className="SpecDoc__learn-more">
-          <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
-        </div>
-      }
-    </>
-  );
-};
+              </ul>
+            }
+          </div>
+        }
+        {sdkSupport &&
+          <div className="SpecDoc__sdk-support">
+            <table className="SpecDoc__sdk-support__table">
+              <thead>
+                <tr>
+                  <th></th>
+                  {Object.values(headers).map(header => {
+                    return <th key={header}>{header}</th>;
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(sdkSupport).map(([key, supportObj]) => {
+                  return (
+                    <tr key={key}>
+                      <td>{key}</td>
+                      {Object.keys(headers).map((k) => {
+                        if (Object.prototype.hasOwnProperty.call(supportObj, k)) {
+                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
+                        }
+                        else {
+                          return <td key={k}>no</td>;
+                        }
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        }
+        {docUrl && docUrlLinkText &&
+          <div className="SpecDoc__learn-more">
+            <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
+          </div>
+        }
+      </>
+    );
+  }
+}

src/components/ExpressionProperty.tsx

@@ -1,85 +0,0 @@
-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 type { StylePropertySpecification } from "maplibre-gl";
-import { type MappedLayerErrors } from "../libs/definitions";
-
-
-type ExpressionPropertyInternalProps = {
-  fieldName: string
-  fieldType?: string
-  fieldSpec?: StylePropertySpecification
-  value?: any
-  errors?: MappedLayerErrors
-  onDelete?(...args: unknown[]): unknown
-  onChange(value: object): void
-  onUndo?(...args: unknown[]): unknown
-  canUndo?(...args: unknown[]): unknown
-  onFocus?(...args: unknown[]): unknown
-  onBlur?(...args: unknown[]): unknown
-} & WithTranslation;
-
-const ExpressionPropertyInternal: React.FC<ExpressionPropertyInternalProps> = ({
-  errors = {},
-  onFocus = () => {},
-  onBlur = () => {},
-  ...props
-}) => {
-  const {t, value, canUndo} = props;
-  const undoDisabled = canUndo ? !canUndo() : true;
-
-  const deleteStopBtn = (
-    <>
-      {props.onUndo &&
-        <InputButton
-          key="undo_action"
-          onClick={props.onUndo}
-          disabled={undoDisabled}
-          className="maputnik-delete-stop"
-          data-wd-key="undo-expression"
-          title={t("Revert from expression")}
-        >
-          <MdUndo />
-        </InputButton>
-      }
-      <InputButton
-        key="delete_action"
-        onClick={props.onDelete}
-        className="maputnik-delete-stop"
-        data-wd-key="delete-expression"
-        title={t("Delete expression")}
-      >
-        <MdDelete />
-      </InputButton>
-    </>
-  );
-  let error = undefined;
-  if (errors) {
-    const fieldKey = props.fieldType ? props.fieldType + "." + props.fieldName : props.fieldName;
-    error = errors[fieldKey];
-  }
-  return <Block
-    fieldSpec={props.fieldSpec}
-    label={t(labelFromFieldName(props.fieldName))}
-    action={deleteStopBtn}
-    wideMode={true}
-    error={error}
-  >
-    <FieldJson
-      lintType="expression"
-      spec={props.fieldSpec}
-      className="maputnik-expression-editor"
-      onFocus={onFocus}
-      onBlur={onBlur}
-      value={value}
-      onChange={props.onChange}
-    />
-  </Block>;
-};
-
-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, { FieldArrayProps as InputArrayProps } from './InputArray'
+import Fieldset from './Fieldset'
 
 type FieldArrayProps = InputArrayProps & {
   name?: string
@@ -8,10 +8,12 @@ type FieldArrayProps = InputArrayProps & {
   }
 };
 
-export const FieldArray: React.FC<FieldArrayProps> = (props) => {
+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, { InputAutocompleteProps } from './InputAutocomplete'
 
 
 type FieldAutocompleteProps = InputAutocompleteProps & {
@@ -7,10 +7,12 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };
 
 
-export const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
+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, {InputCheckboxProps} from './InputCheckbox'
 
 
 type FieldCheckboxProps = InputCheckboxProps & {
@@ -7,10 +7,12 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };
 
 
-export const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
+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, {InputColorProps} from './InputColor'
 
 
 type FieldColorProps = InputColorProps & {
@@ -10,10 +10,12 @@ type FieldColorProps = InputColorProps & {
 };
 
 
-export const FieldColor: React.FC<FieldColorProps> = (props) => {
+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,8 +1,8 @@
-import React from "react";
+import React from 'react'
 
-import { Block } from "./Block";
-import { InputString } from "./InputString";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import Block from './Block'
+import InputString from './InputString'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldCommentInternalProps = {
   value?: string
@@ -36,4 +36,5 @@ const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
   );
 };
 
-export const FieldComment = withTranslation()(FieldCommentInternal);
+const FieldComment = withTranslation()(FieldCommentInternal);
+export default FieldComment;

src/components/FieldDocLabel.tsx

@@ -1,5 +1,5 @@
-import React, { type JSX } from "react";
-import {MdInfoOutline, MdHighlightOff} from "react-icons/md";
+import React from 'react'
+import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {
   label: JSX.Element | string | undefined
@@ -10,7 +10,7 @@ type FieldDocLabelProps = {
 };
 
 
-export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
+const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
   const [open, setOpen] = React.useState(false);
 
   const onToggleDoc = (state: boolean) => {
@@ -28,12 +28,12 @@ export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
       <label className="maputnik-doc-wrapper">
         <div className="maputnik-doc-target">
           {label}
-          {"\xa0"}
+          {'\xa0'}
           <button
-            aria-label={open ? "close property documentation" : "open property documentation"}
-            className={`maputnik-doc-button maputnik-doc-button--${open ? "open" : "closed"}`}
+            aria-label={open ? 'close property documentation' : 'open property documentation'}
+            className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
             onClick={() => onToggleDoc(!open)}
-            data-wd-key={"field-doc-button-" + label}
+            data-wd-key={'field-doc-button-' + label}
           >
             {open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>
@@ -49,3 +49,5 @@ export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
   }
   return <div />;
 };
+
+export default FieldDocLabel;

src/components/FieldDynamicArray.tsx

@@ -1,14 +1,16 @@
-import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
-import { Fieldset } from "./Fieldset";
+import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import Fieldset from './Fieldset'
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {
   name?: string
 };
 
-export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
+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, {InputEnumProps} from './InputEnum'
+import Fieldset from './Fieldset';
 
 
 type FieldEnumProps = InputEnumProps & {
@@ -10,10 +10,12 @@ type FieldEnumProps = InputEnumProps & {
 };
 
 
-export const FieldEnum: React.FC<FieldEnumProps> = (props) => {
+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,12 +1,11 @@
-import React from "react";
+import React from 'react'
 
-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";
+import SpecProperty from './_SpecProperty'
+import DataProperty, { 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';
 
 
 function isLiteralExpression(value: any) {
@@ -23,9 +22,9 @@ function isGetExpression(value: any) {
 
 function isZoomField(value: any) {
   return (
-    typeof(value) === "object" &&
+    typeof(value) === 'object' &&
     value.stops &&
-    typeof(value.property) === "undefined" &&
+    typeof(value.property) === 'undefined' &&
     Array.isArray(value.stops) &&
     value.stops.length > 1 &&
     value.stops.every((stop: Stop) => {
@@ -39,7 +38,7 @@ function isZoomField(value: any) {
 
 function isIdentityProperty(value: any) {
   return (
-    typeof(value) === "object" &&
+    typeof(value) === 'object' &&
     value.type === "identity" &&
     Object.prototype.hasOwnProperty.call(value, "property")
   );
@@ -47,16 +46,16 @@ function isIdentityProperty(value: any) {
 
 function isDataStopProperty(value: any) {
   return (
-    typeof(value) === "object" &&
+    typeof(value) === 'object' &&
     value.stops &&
-    typeof(value.property) !== "undefined" &&
+    typeof(value.property) !== 'undefined' &&
     value.stops.length > 1 &&
     Array.isArray(value.stops) &&
     value.stops.every((stop: Stop) => {
       return (
         Array.isArray(stop) &&
         stop.length === 2 &&
-        typeof(stop[0]) === "object"
+        typeof(stop[0]) === 'object'
       );
     })
   );
@@ -91,18 +90,6 @@ function getDataType(value: any, fieldSpec={} as any) {
   else if (fieldSpec.type === "array" && isArrayOfPrimatives(value)) {
     return "value";
   }
-  else if (fieldSpec.type === "numberArray" && isArrayOfPrimatives(value)) {
-    return "value";
-  }
-  else if (fieldSpec.type === "colorArray") {
-    return "value";
-  }
-  else if (fieldSpec.type === "padding") {
-    return "value";
-  }
-  else if (fieldSpec.type === "variableAnchorOffsetCollection") {
-    return "value";
-  }
   else if (isZoomField(value)) {
     return "zoom_function";
   }
@@ -120,7 +107,7 @@ type FieldFunctionProps = {
   fieldName: string
   fieldType: string
   fieldSpec: any
-  errors?: MappedLayerErrors
+  errors?: {[key: string]: {message: string}}
   value?: any
 };
 
@@ -128,7 +115,7 @@ type FieldFunctionProps = {
 /** Supports displaying spec field for zoom function objects
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
-export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
+const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const [dataType, setDataType] = React.useState(
     getDataType(props.value, props.fieldSpec)
   );
@@ -142,18 +129,18 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
 
   const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
-      return "exponential";
+      return 'exponential';
     }
-    if (fieldSpec.type === "number") {
-      return "interval";
+    if (fieldSpec.type === 'number') {
+      return 'interval';
     }
-    return "categorical";
+    return 'categorical';
   };
 
   const addStop = () => {
     const stops = props.value.stops.slice(0);
     const lastStop = stops[stops.length - 1];
-    if (typeof lastStop[0] === "object") {
+    if (typeof lastStop[0] === 'object') {
       stops.push([
         { zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
         lastStop[1],
@@ -173,7 +160,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const deleteExpression = () => {
     const { fieldSpec, fieldName } = props;
     props.onChange(fieldName, fieldSpec.default);
-    setDataType("value");
+    setDataType('value');
   };
 
   const deleteStop = (stopIdx: number) => {
@@ -196,7 +183,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     const { value } = props;
 
     let zoomFunc: any;
-    if (typeof value === "object") {
+    if (typeof value === 'object') {
       if (value.stops) {
         zoomFunc = {
           base: value.base,
@@ -230,13 +217,13 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
 
     if (isGetExpression(value)) {
       props.onChange(fieldName, {
-        type: "identity",
+        type: 'identity',
         property: value[1],
       });
-      setDataType("value");
+      setDataType('value');
     } else if (isLiteralExpression(value)) {
       props.onChange(fieldName, value[1]);
-      setDataType("value");
+      setDataType('value');
     }
   };
 
@@ -246,7 +233,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
       isGetExpression(value) ||
       isLiteralExpression(value) ||
       isPrimative(value) ||
-      (Array.isArray(value) && fieldSpec.type === "array")
+      (Array.isArray(value) && fieldSpec.type === 'array')
     );
   };
 
@@ -254,26 +241,26 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     const { value, fieldSpec } = props;
     let expression;
 
-    if (typeof value === "object" && "stops" in value) {
+    if (typeof value === 'object' && 'stops' in value) {
       expression = styleFunction.convertFunction(value, fieldSpec);
     } else if (isIdentityProperty(value)) {
-      expression = ["get", value.property];
+      expression = ['get', value.property];
     } else {
-      expression = ["literal", value || props.fieldSpec.default];
+      expression = ['literal', value || props.fieldSpec.default];
     }
     props.onChange(props.fieldName, expression);
   };
 
   const makeDataFunction = () => {
     const functionType = getFieldFunctionType(props.fieldSpec);
-    const stopValue = functionType === "categorical" ? "" : 0;
+    const stopValue = functionType === 'categorical' ? '' : 0;
     const { value } = props;
     let dataFunc;
 
-    if (typeof value === "object") {
+    if (typeof value === 'object') {
       if (value.stops) {
         dataFunc = {
-          property: "",
+          property: '',
           type: functionType,
           base: value.base,
           stops: value.stops.map((stop: Stop) => {
@@ -282,7 +269,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         };
       } else {
         dataFunc = {
-          property: "",
+          property: '',
           type: functionType,
           base: value.base,
           stops: [
@@ -293,7 +280,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
       }
     } else {
       dataFunc = {
-        property: "",
+        property: '',
         type: functionType,
         base: value.base,
         stops: [
@@ -306,20 +293,6 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     props.onChange(props.fieldName, dataFunc);
   };
 
-  const makeElevationFunction = () => {
-    const expression = [
-      "interpolate",
-      ["linear"],
-      ["elevation"],
-      0,
-      "black",
-      2000,
-      "white"
-    ];
-
-    props.onChange(props.fieldName, expression);
-  };
-
   const onMarkEditing = () => {
     setIsEditing(true);
   };
@@ -329,11 +302,11 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   };
 
   const propClass =
-    props.fieldSpec.default === props.value ? "maputnik-default-property" : "maputnik-modified-property";
+    props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
 
   let specField;
 
-  if (dataType === "expression") {
+  if (dataType === 'expression') {
     specField = (
       <ExpressionProperty
         errors={props.errors}
@@ -349,7 +322,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         onBlur={onUnmarkEditing}
       />
     );
-  } else if (dataType === "zoom_function") {
+  } else if (dataType === 'zoom_function') {
     specField = (
       <ZoomProperty
         errors={props.errors}
@@ -364,7 +337,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         onExpressionClick={makeExpression}
       />
     );
-  } else if (dataType === "data_function") {
+  } else if (dataType === 'data_function') {
     specField = (
       <DataProperty
         errors={props.errors}
@@ -391,14 +364,15 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         onZoomClick={makeZoomFunction}
         onDataClick={makeDataFunction}
         onExpressionClick={makeExpression}
-        onElevationClick={makeElevationFunction}
       />
     );
   }
 
   return (
-    <div className={propClass} data-wd-key={"spec-field-container:" + props.fieldName}>
+    <div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
       {specField}
     </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 latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import Block from './Block'
+import InputString from './InputString'
 
 type FieldIdProps = {
   value: string
@@ -10,7 +10,7 @@ type FieldIdProps = {
   error?: {message: string}
 };
 
-export const FieldId: React.FC<FieldIdProps> = (props) => {
+const FieldId: React.FC<FieldIdProps> = (props) => {
   return (
     <Block label="ID" fieldSpec={latest.layer.id}
       data-wd-key={props.wdKey}
@@ -24,3 +24,5 @@ export const FieldId: React.FC<FieldIdProps> = (props) => {
     </Block>
   );
 };
+
+export default FieldId;

src/components/FieldJson.tsx

@@ -1,9 +1,11 @@
-import { InputJson, type InputJsonProps } from "./InputJson";
+import InputJson, {InputJsonProps} from './InputJson'
 
 
 type FieldJsonProps = InputJsonProps & {};
 
 
-export const FieldJson: React.FC<FieldJsonProps> = (props) => {
+const FieldJson: React.FC<FieldJsonProps> = (props) => {
   return <InputJson {...props} />;
 };
+
+export default FieldJson;

src/components/FieldMaxZoom.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react'
 
-import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import { Block } from "./Block";
-import { InputNumber } from "./InputNumber";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import Block from './Block'
+import InputNumber from './InputNumber'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldMaxZoomInternalProps = {
   value?: number
@@ -14,7 +14,7 @@ type FieldMaxZoomInternalProps = {
 const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
   const t = props.t;
   return (
-    <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
+    <Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
       error={props.error}
       data-wd-key="max-zoom"
     >
@@ -31,4 +31,5 @@ const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
   );
 };
 
-export const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
+const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
+export default FieldMaxZoom;

src/components/FieldMinZoom.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react'
 
-import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import { Block } from "./Block";
-import { InputNumber } from "./InputNumber";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import Block from './Block'
+import InputNumber from './InputNumber'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldMinZoomInternalProps = {
   value?: number
@@ -14,7 +14,7 @@ type FieldMinZoomInternalProps = {
 const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
   const t = props.t;
   return (
-    <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
+    <Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
       error={props.error}
       data-wd-key="min-zoom"
     >
@@ -31,4 +31,5 @@ const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
   );
 };
 
-export const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+export default FieldMinZoom;

src/components/FieldMultiInput.tsx

@@ -1,5 +1,5 @@
-import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput";
-import { Fieldset } from "./Fieldset";
+import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
+import Fieldset from './Fieldset'
 
 
 type FieldMultiInputProps = InputMultiInputProps & {
@@ -7,10 +7,12 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };
 
 
-export const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
+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, {InputNumberProps} from './InputNumber'
+import Block from './Block'
 
 
 type FieldNumberProps = InputNumberProps & {
@@ -10,10 +10,12 @@ type FieldNumberProps = InputNumberProps & {
 };
 
 
-export const FieldNumber: React.FC<FieldNumberProps> = (props) => {
+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, {InputSelectProps} from './InputSelect'
 
 
 type FieldSelectProps = InputSelectProps & {
@@ -10,10 +10,12 @@ type FieldSelectProps = InputSelectProps & {
 };
 
 
-export const FieldSelect: React.FC<FieldSelectProps> = (props) => {
+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,9 +1,9 @@
-import React from "react";
+import React from 'react'
 
-import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import { Block } from "./Block";
-import { InputAutocomplete } from "./InputAutocomplete";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldSourceInternalProps = {
   value?: string
@@ -13,29 +13,28 @@ type FieldSourceInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
-  onChange = () => {},
-  sourceIds = [],
-  wdKey,
-  value,
-  error,
-  t
-}) => {
+const FieldSourceInternal: React.FC<FieldSourceInternalProps> = (props) => {
+  const t = props.t;
   return (
     <Block
-      label={t("Source")}
+      label={t('Source')}
       fieldSpec={latest.layer.source}
-      error={error}
-      data-wd-key={wdKey}
+      error={props.error}
+      data-wd-key={props.wdKey}
     >
       <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceIds?.map((src) => [src, src])}
+        value={props.value}
+        onChange={props.onChange}
+        options={props.sourceIds?.map((src) => [src, src])}
       />
     </Block>
   );
 };
 
+FieldSourceInternal.defaultProps = {
+  onChange: () => {},
+  sourceIds: [],
+};
 
-export const FieldSource = withTranslation()(FieldSourceInternal);
+const FieldSource = withTranslation()(FieldSourceInternal);
+export default FieldSource;

src/components/FieldSourceLayer.tsx

@@ -1,38 +1,41 @@
-import React from "react";
+import React from 'react'
 
-import {latest} from "@maplibre/maplibre-gl-style-spec";
-import { Block } from "./Block";
-import { InputAutocomplete } from "./InputAutocomplete";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldSourceLayerInternalProps = {
   value?: string
   onChange?(...args: unknown[]): unknown
   sourceLayerIds?: unknown[]
+  isFixed?: boolean
   error?: {message: string}
 } & WithTranslation;
 
-const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
-  onChange = () => {},
-  sourceLayerIds = [],
-  value,
-  error,
-  t
-}) => {
+const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = (props) => {
+  const t = props.t;
   return (
     <Block
-      label={t("Source Layer")}
-      fieldSpec={latest.layer["source-layer"]}
+      label={t('Source Layer')}
+      fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
-      error={error}
+      error={props.error}
     >
       <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceLayerIds?.map((l) => [l, l])}
+        value={props.value}
+        onChange={props.onChange}
+        options={props.sourceLayerIds?.map((l) => [l, l])}
       />
     </Block>
   );
 };
 
-export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
+FieldSourceLayerInternal.defaultProps = {
+  onChange: () => {},
+  sourceLayerIds: [],
+  isFixed: false,
+};
+
+const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
+export default FieldSourceLayer;

src/components/FieldSpec.tsx

@@ -1,47 +0,0 @@
-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) {
-    case "color":
-      return Block;
-    case "enum":
-      return (Object.keys(fieldSpec.values!).length <= 3 ? Fieldset : Block);
-    case "boolean":
-      return Block;
-    case "array":
-      return Fieldset;
-    case "resolvedImage":
-      return Block;
-    case "number":
-      return Block;
-    case "string":
-      return Block;
-    case "formatted":
-      return Block;
-    case "padding":
-      return Block;
-    case "numberArray":
-      return Fieldset;
-    case "colorArray":
-      return Fieldset;
-    case "variableAnchorOffsetCollection":
-      return Fieldset;
-    default:
-      console.warn("No such type for: " + fieldSpec.type);
-      return Block;
-  }
-}
-
-export type FieldSpecProps = InputSpecProps & BlockProps & FieldsetProps;
-
-export const FieldSpec: React.FC<FieldSpecProps> = (props) => {
-  const TypeBlock = getElementFromType(props.fieldSpec!);
-
-  return (
-    <TypeBlock label={props.label} action={props.action} fieldSpec={props.fieldSpec} error={props.error}>
-      <InputSpec {...props} />
-    </TypeBlock>
-  );
-};

src/components/FieldString.tsx

@@ -1,5 +1,5 @@
-import { Block } from "./Block";
-import { InputString, type InputStringProps } from "./InputString";
+import Block from './Block'
+import InputString, {InputStringProps} from './InputString'
 
 type FieldStringProps = InputStringProps & {
   name?: string
@@ -9,10 +9,12 @@ type FieldStringProps = InputStringProps & {
   }
 };
 
-export const FieldString: React.FC<FieldStringProps> = (props) => {
+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,10 +1,10 @@
-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 { type WithTranslation, withTranslation } from "react-i18next";
-import { startCase } from "lodash";
+import React from 'react'
+
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import Block from './Block'
+import InputSelect from './InputSelect'
+import InputString from './InputString'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 type FieldTypeInternalProps = {
   value: string
@@ -14,33 +14,41 @@ type FieldTypeInternalProps = {
   disabled?: boolean
 } & WithTranslation;
 
-const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
-  t,
-  value,
-  wdKey,
-  onChange,
-  error,
-  disabled = false
-}) => {
-  const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, " "))]);
+const FieldTypeInternal: React.FC<FieldTypeInternalProps> = (props) => {
+  const t = props.t;
   return (
-    <Block label={t("Type")} fieldSpec={v8.layer.type}
-      data-wd-key={wdKey}
-      error={error}
+    <Block label={t('Type')} fieldSpec={latest.layer.type}
+      data-wd-key={props.wdKey}
+      error={props.error}
     >
-      {disabled && (
-        <InputString value={value} disabled={true} />
+      {props.disabled && (
+        <InputString value={props.value} disabled={true} />
       )}
-      {!disabled && (
+      {!props.disabled && (
         <InputSelect
-          options={layerstypes}
-          onChange={onChange}
-          value={value}
-          data-wd-key={wdKey + ".select"}
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={props.onChange}
+          value={props.value}
+          data-wd-key={props.wdKey + '.select'}
         />
       )}
     </Block>
   );
 };
 
-export const FieldType = withTranslation()(FieldTypeInternal);
+FieldTypeInternal.defaultProps = {
+  disabled: false,
+};
+
+const FieldType = withTranslation()(FieldTypeInternal);
+export default FieldType;

src/components/FieldUrl.tsx

@@ -1,5 +1,5 @@
-import { InputUrl, type FieldUrlProps as InputUrlProps } from "./InputUrl";
-import { Block } from "./Block";
+import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
+import Block from './Block'
 
 
 type FieldUrlProps = InputUrlProps & {
@@ -10,10 +10,12 @@ type FieldUrlProps = InputUrlProps & {
 };
 
 
-export const FieldUrl: React.FC<FieldUrlProps> = (props) => {
+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,20 +1,18 @@
-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 React, { PropsWithChildren, ReactElement } from 'react'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+import generateUniqueId from '../libs/document-uid';
 
-export type FieldsetProps = PropsWithChildren & {
+type FieldsetProps = PropsWithChildren & {
   label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,
-  error?: {message: string}
 };
 
 
-export const Fieldset: React.FC<FieldsetProps> = (props) => {
+const Fieldset: React.FC<FieldsetProps> = (props) => {
   const [showDoc, setShowDoc] = React.useState(false);
-  const labelId = React.useRef(generateUniqueId("fieldset_label_"));
+  const labelId = React.useRef(generateUniqueId('fieldset_label_'));
 
   const onToggleDoc = (val: boolean) => {
     setShowDoc(val);
@@ -32,20 +30,19 @@ export const Fieldset: React.FC<FieldsetProps> = (props) => {
         </div>
       )}
       {!props.fieldSpec && (
-        <div className={classnames({
-          "maputnik-input-block-label": true,
-          "maputnik-input-block--error": props.error
-        })}>
+        <div className="maputnik-input-block-label">
           {props.label}
         </div>
       )}
       <div className="maputnik-input-block-action">{props.action}</div>
       <div className="maputnik-input-block-content">{props.children}</div>
       {props.fieldSpec && (
-        <div className="maputnik-doc-inline" style={{ display: showDoc ? "" : "none" }}>
+        <div className="maputnik-doc-inline" style={{ display: showDoc ? '' : 'none' }}>
           <Doc fieldSpec={props.fieldSpec} />
         </div>
       )}
     </div>
   );
 };
+
+export default Fieldset;