Merge 3e7e1e6ce9 into c58191ff62

Bumps [@shellygo/cypress-test-utils](https://github.com/shellyDCMS/cypress-test-utils) from 4.1.12 to 4.1.13.
- [Commits](https://github.com/shellyDCMS/cypress-test-utils/commits)

---
updated-dependencies:
- dependency-name: "@shellygo/cypress-test-utils"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

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

.github/ISSUE_TEMPLATE/other-issue.md

@@ -8,3 +8,4 @@ assignees: ''
 ---
 
 <!-- Thanks for reaching out! If you are having general Maputnik mapping questions, please asking them at https://gis.stackexchange.com/ using the 'maputnik' tag https://gis.stackexchange.com/questions/tagged/maputnik and read https://gis.stackexchange.com/help/how-to-ask before you do so (please keep in mind that you're asking there in a general GIS forum, not a dedicated support channel) -->
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,3 +8,4 @@
  - [ ] Include before/after visuals or gifs if this PR includes visual changes.
  - [ ] Write tests for all new functionality.
  - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.
+

.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.3.0
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
       - name: Approve Dependabot PRs

.github/workflows/ci.yml

@@ -7,159 +7,107 @@ 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:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
+        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
-        with:
-          node-version-file: '.nvmrc'
-      - run: npm ci
-      - run: npm run build
-      - run: npm run lint
-      - run: npm run lint-css
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - run: npm ci
+    - run: npm run build
+    - run: npm run lint
+    - run: npm run lint-css
 
 
 
   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
-        with:
-          node-version-file: '.nvmrc'
-      - run: npm ci
-      - run: npm run build
-      - name: artifacts/maputnik
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: maputnik
-          path: dist
+    - 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@v4
+      with:
+        name: maputnik
+        path: dist
 
-      # Build and upload desktop CLI artifacts
-      - name: Set up Go
-        uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
-        with:
-          go-version: ^1.23.x
-          cache-dependency-path: desktop/go.sum
-        id: go
+    # Build and upload desktop CLI artifacts
+    - name: Set up Go
+      uses: actions/setup-go@v5
+      with:
+        go-version: ^1.23.x
+        cache-dependency-path: desktop/go.sum
+      id: go
 
-      - name: Build desktop artifacts
-        run: npm run build-desktop
+    - name: Build desktop artifacts
+      run: npm run build-desktop
 
-      - name: Artifacts/linux
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: maputnik-linux
-          path: ./desktop/bin/linux/
+    - name: Artifacts/linux
+      uses: actions/upload-artifact@v4
+      with:
+        name: maputnik-linux
+        path: ./desktop/bin/linux/
 
-      - name: Artifacts/darwin
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: maputnik-darwin
-          path: ./desktop/bin/darwin/
-
-      - name: Artifacts/windows
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        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
+    - name: Artifacts/darwin
+      uses: actions/upload-artifact@v4
+      with:
+        name: maputnik-darwin
+        path: ./desktop/bin/darwin/
 
+    - name: Artifacts/windows
+      uses: actions/upload-artifact@v4
+      with:
+        name: maputnik-windows
+        path: ./desktop/bin/windows/
+  
   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,48 +8,44 @@ 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'
 
       - name: Install
         run: npm ci
 
-      - name: Build
+      - name: Build 
         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
-
+  
   # publish docker to GitHub registry
   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
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-      - run: docker build -t ghcr.io/maplibre/maputnik:main .
-      - run: docker push ghcr.io/maplibre/maputnik:main
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+    - 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

@@ -2,7 +2,7 @@ name: Release
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   workflow_dispatch:
 
 jobs:
@@ -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:
@@ -102,3 +99,4 @@ jobs:
           allowUpdates: true
           draft: false
           prerelease: false
+

.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

@@ -1,24 +0,0 @@
-# See https://pre-commit.com for more information
-# See https://pre-commit.com/hooks.html for more hooks
-
-ci:
-  autoupdate_schedule: monthly
-
-repos:
-  - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v6.0.0
-    hooks:
-      - id: check-added-large-files
-      - id: check-executables-have-shebangs
-      - id: check-json
-        exclude: 'tsconfig(\.node)?\.json'
-      - id: check-shebang-scripts-are-executable
-      - id: check-symlinks
-      - id: check-toml
-      - id: check-yaml
-        args: [ --allow-multiple-documents ]
-      - id: destroyed-symlinks
-      - id: end-of-file-fixer
-      - id: mixed-line-ending
-        args: [ --fix=lf ]
-      - id: trailing-whitespace

AGENTS.md

@@ -1,150 +0,0 @@
-Maputnik is a MapLibre style editor written using React and TypeScript.
-
-To get started, install all npm packages:
-
-```
-npm install
-```
-
-Verify code correctness by running ESLint:
-
-```
-npm run lint
-```
-
-Or try fixing lint issues with:
-
-```
-npm run lint -- --fix
-```
-
-The project type checked and built with:
-
-```
-npm run build
-```
-
-Install the Playwright browser (first time only):
-
-```
-npx playwright install --with-deps chromium
-```
-
-Then run the end-to-end tests (Playwright starts the dev server automatically):
-
-```
-npm run test
-```
-
-Run the unit tests with Vitest:
-
-```
-npm run test-unit
-```
-
-## Pull Requests
-
-- Pull requests should update `CHANGELOG.md` with a short description of the change.
-
-## Testing
-
-### Prefer end-to-end tests
-
-Most of this codebase is React components, and they are only reachable from an
-end-to-end test. E2E coverage is the primary signal.
-
-Reach for a unit test only for pure logic that e2e cannot cheaply reach (parsers,
-sorting, watchers, stores). Before writing one, check whether e2e already covers
-the file — a unit test that duplicates existing e2e coverage adds test code and
-almost no coverage:
-
-```
-npx nyc report --reporter=text --include="src/libs/style.ts"
-```
-
-Do **not** merge the Vitest (v8) and e2e (istanbul) coverage reports locally. They
-produce conflicting statement maps for the same files and the combined percentage
-is meaningless. Codecov merges the two uploads server-side; that is the number to
-trust. Locally, read them separately:
-
-- e2e: `npx playwright test` then `npx nyc report --reporter=text-summary` (reads `.nyc_output/`)
-- unit: `npx vitest run --coverage` (writes `coverage/`)
-
-### E2E layering
-
-Three layers, and the boundaries matter:
-
-- `e2e/playwright-helper.ts` — generic, app-agnostic browser actions. **The only
-  file allowed to import `@playwright/test`** (besides `e2e/utils/fixtures.ts`).
-- `e2e/maputnik-driver.ts` — domain actions (layers, filters, functions, the
-  style). Knows nothing about `page` or Playwright.
-- `e2e/modal-driver.ts` — actions scoped to a modal, exposed as `when.modal.*`.
-
-Specs get a driver at describe scope and assert fluently:
-
-```ts
-describe("layer editor", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-  ...
-  await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [{ id, type: "fill" }] });
-});
-```
-
-New UI interactions belong in a driver, not inline in a spec.
-
-### Writing assertions
-
-- `shouldDeepNestedInclude` is a recursive partial match (`toMatchObject`): nested
-  objects are matched as subsets, arrays and primitives must match exactly
-  (including array length).
-- Assert against the whole style, not an extracted slice. Avoid
-  `get.styleFromLocalStorage().then(style => style.layers.find(...))` — it moves
-  test logic into the test. Compare the real object instead.
-- `Query.then()` is lazy and returns a new `Query`, **not** a Promise. `await
-  get.styleFromLocalStorage()` hangs forever. Use `.get()` to await it directly,
-  or pass the Query to `then(...)`.
-
-### One behaviour per test
-
-If a test needs comments narrating "and now this…", it is several tests. Split it,
-and hoist the shared setup into a nested `describe` + `beforeEach`.
-
-### Test ids
-
-Test ids use the `data-wd-key` attribute and are read via `get.elementByTestId`.
-
-The `Input*` components already accept `data-wd-key` and render it on the real
-`<input>`; the `Field*` wrappers forward it through their `{...props}` spread. So
-passing `data-wd-key` to a `Field*` component is usually enough. Do **not** also
-add it to `Block`/`Fieldset` — the id then matches two elements and locators fail
-in strict mode.
-
-Note `InputNumber` renders `<key>-text` and `<key>-range` when `allowRange` is set,
-and `<key>` otherwise.
-
-### Input commit semantics (common source of "the value didn't save")
-
-- `InputString` only fires its `onChange` on **blur** or **Enter**. Typing alone
-  fires `onInput`. A driver that calls `fill()` must then call `blur()`, or the
-  value never reaches the style.
-- `InputNumber` commits on every change; no blur needed.
-- The autocomplete inputs (layer source, add-layer source) are controlled
-  downshift comboboxes. Keystroke typing is dropped/reordered — `{selectall}` then
-  typing `raster` yields `"exampleaster"`. Use `fill()`, which dispatches a single
-  input event, then pick from the filtered menu.
-- CodeMirror auto-closes brackets and quotes, and types over its own closers, so
-  inserting a well-formed JSON fragment stays well-formed. To break JSON on
-  purpose, insert a bare word.
-
-### Fixtures
-
-Style fixtures live in `e2e/fixtures/`. A new one must be registered in two places
-in `maputnik-driver.ts`: the list in `given.setupMockBackedResponses` and the
-`styleFileByKey` map in `when.setStyle`.
-
-### Verify a new test can fail
-
-A test that passes for the wrong reason is worse than no test. After writing one,
-mutate the expected value and confirm it fails. This has caught real mistakes
-(e.g. a driver that never committed its input, so the assertion was matching a
-value written by the *previous* step).

CHANGELOG.md

@@ -1,47 +1,6 @@
 ## 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
 - Use same version number for web and desktop versions
 - Add scheme type options for vector/raster tile
@@ -51,22 +10,12 @@
 - Upgrade to MapLibre LG JS v5
 - Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
 - Upgrade OpenLayers from v6 to v10
-- When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
-- Remove react-autobind dependency
-- 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
 
@@ -83,3 +32,4 @@
 ## 1.7.0
 
 - See release notes at https://maputnik.github.io/blog/2020/04/23/release-v1.7.0
+

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/

LICENSE

@@ -20,3 +20,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

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!
@@ -42,7 +36,7 @@ Maputnik is written in typescript and is using [React](https://github.com/facebo
 
 We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 
-Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes.
+Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes. 
 
 ### Getting Involved
 Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here.
@@ -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 starts 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/README.md

@@ -1,6 +1,6 @@
 # Build Scripts
 
-This folder holds common build scripts used by some of the Github workflows.
+This folder holds common build scripts used by some of the Github workflows. 
 
 The scripts are borrowed from [maplibre/maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js/tree/bc70bc559cea5c987fa1b79fd44766cef68bbe28/build).
 

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

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,186 @@
+/// <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 styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+  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,278 @@
+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.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("sources", () => {
+    it("toggle");
+  });
+});

cypress/fixtures/example-layer-style.json

@@ -15,3 +15,4 @@
     }
   ]
 }
+

cypress/fixtures/example-style.json

@@ -0,0 +1,12 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mlgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": []
+}

cypress/fixtures/geojson-raster-style.json

@@ -31,4 +31,4 @@
     "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "layers": []
-  }
+  }

cypress/fixtures/geojson-style.json

@@ -26,4 +26,4 @@
     "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "layers": []
-  }
+  }

cypress/fixtures/raster-style.json

@@ -15,4 +15,4 @@
     "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
     "layers": []
-  }
+  }

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/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/example-style.json

@@ -1,114 +0,0 @@
-{
-    "id": "test-style",
-    "version": 8,
-    "name": "Test Style",
-    "metadata": {
-        "maputnik:renderer": "mlgljs",
-        "data": [
-            0,
-            1,
-            2,
-            3,
-            4,
-            5,
-            6,
-            7,
-            8,
-            9,
-            10,
-            11,
-            12,
-            13,
-            14,
-            15,
-            16,
-            17,
-            18,
-            19,
-            20,
-            21,
-            22,
-            23,
-            24,
-            25,
-            26,
-            27,
-            28,
-            29,
-            30,
-            31,
-            32,
-            33,
-            34,
-            35,
-            36,
-            37,
-            38,
-            39,
-            40,
-            41,
-            42,
-            43,
-            44,
-            45,
-            46,
-            47,
-            48,
-            49,
-            50,
-            51,
-            52,
-            53,
-            54,
-            55,
-            56,
-            57,
-            58,
-            59,
-            60,
-            61,
-            62,
-            63,
-            64,
-            65,
-            66,
-            67,
-            68,
-            69,
-            70,
-            71,
-            72,
-            73,
-            74,
-            75,
-            76,
-            77,
-            78,
-            79,
-            80,
-            81,
-            82,
-            83,
-            84,
-            85,
-            86,
-            87,
-            88,
-            89,
-            90,
-            91,
-            92,
-            93,
-            94,
-            95,
-            96,
-            97,
-            98,
-            99
-        ]
-    },
-    "sources": {},
-    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "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,55 @@
   "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.7.1",
+    "@maplibre/maplibre-gl-inspect": "^1.7.1",
+    "@maplibre/maplibre-gl-style-spec": "^23.1.0",
+    "@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.18",
+    "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": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
     "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.1.0",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^10.9.0",
-    "ol-mapbox-style": "^13.4.1",
-    "pmtiles": "^4.4.1",
+    "ol": "^10.4.0",
+    "ol-mapbox-style": "^12.4.0",
+    "pmtiles": "^4.1.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.7",
-    "react-accessible-accordion": "^5.0.1",
-    "react-aria-menubutton": "^8.0.0",
+    "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
+    "react-aria-menubutton": "^7.0.3",
     "react-aria-modal": "^5.0.2",
+    "react-autobind": "^1.0.6",
+    "react-autocomplete": "^1.8.1",
     "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": "^18.2.0",
+    "react-file-reader-input": "^2.0.0",
+    "react-i18next": "^15.4.0",
+    "react-icon-base": "^2.1.2",
+    "react-icons": "^5.4.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,13 +93,14 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@cypress/code-coverage": "^3.13.11",
+    "@eslint/js": "^9.19.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",
-    "@types/cors": "^2.8.19",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@shellygo/cypress-test-utils": "^4.1.13",
+    "@types/codemirror": "^5.60.15",
+    "@types/color": "^4.2.0",
+    "@types/cors": "^2.8.17",
     "@types/file-saver": "^2.0.7",
     "@types/geojson": "^7946.0.16",
     "@types/json-to-ast": "^2.1.4",
@@ -115,36 +111,39 @@
     "@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-autocomplete": "^1.8.11",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.3",
+    "@types/react-dom": "^18.2.22",
+    "@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",
-    "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",
+    "@types/uuid": "^10.0.0",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cors": "^2.8.5",
+    "cypress": "^14.0.2",
+    "cypress-plugin-tab": "^1.0.5",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "i18next-parser": "^9.1.0",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
-    "nyc": "^18.0.0",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.1",
     "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.83.4",
+    "stylelint": "^16.14.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-scss": "^6.11.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
+    "uuid": "^11.0.5",
+    "vite": "^6.1.0",
+    "vite-plugin-istanbul": "^6.0.2"
   }
 }

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,52 @@
-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 PropTypes from 'prop-types'
+import ScrollContainer from './ScrollContainer'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 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> {
+  static childContextTypes = {
+    reactIconBase: PropTypes.object
+  }
 
-  return <IconContext.Provider value={{size: "14px"}}>
-    <div className="maputnik-layout">
-      {props.toolbar}
+  getChildContext() {
+    return {
+      reactIconBase: { size: 14 }
+    }
+  }
+
+  render() {
+    document.body.dir = this.props.i18n.dir();
+
+    return <div className="maputnik-layout">
+      {this.props.toolbar}
       <div className="maputnik-layout-main">
-        {props.codeEditor && <div className="maputnik-layout-code-editor">
+        <div className="maputnik-layout-list">
+          {this.props.layerList}
+        </div>
+        <div className="maputnik-layout-drawer">
           <ScrollContainer>
-            {props.codeEditor}
+            {this.props.layerEditor}
           </ScrollContainer>
         </div>
-        }
-        {!props.codeEditor && <>
-          <div className="maputnik-layout-list">
-            {props.layerList}
-          </div>
-          <div className="maputnik-layout-drawer">
-            <ScrollContainer>
-              {props.layerEditor}
-            </ScrollContainer>
-          </div>
-        </>}
-        {props.map}
+        {this.props.map}
       </div>
-      {props.bottom && <div className="maputnik-layout-bottom">
-        {props.bottom}
+      {this.props.bottom && <div className="maputnik-layout-bottom">
+        {this.props.bottom}
       </div>
       }
-      {props.modals}
+      {this.props.modals}
     </div>
-  </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,47 @@ 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,26 @@ 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,19 @@
-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,6 @@
-import { InputArray, type InputArrayProps } from "./InputArray";
-import { Fieldset } from "./Fieldset";
+import React from 'react'
+import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
+import Fieldset from './Fieldset'
 
 type FieldArrayProps = InputArrayProps & {
   name?: string
@@ -8,10 +9,11 @@ type FieldArrayProps = InputArrayProps & {
   }
 };
 
-export const FieldArray: React.FC<FieldArrayProps> = (props) => {
-  return (
-    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
-      <InputArray {...props} />
+export default class FieldArray extends React.Component<FieldArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputArray {...this.props} />
     </Fieldset>
-  );
-};
+  }
+}
+

src/components/FieldAutocomplete.tsx

@@ -1,5 +1,6 @@
-import { Block } from "./Block";
-import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";
+import React from 'react'
+import Block from './Block'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
 
 
 type FieldAutocompleteProps = InputAutocompleteProps & {
@@ -7,10 +8,11 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };
 
 
-export const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
-  return (
-    <Block label={props.label}>
-      <InputAutocomplete {...props} />
+export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputAutocomplete {...this.props} />
     </Block>
-  );
-};
+  }
+}
+

src/components/FieldCheckbox.tsx

@@ -1,5 +1,6 @@
-import { Block } from "./Block";
-import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";
+import React from 'react'
+import Block from './Block'
+import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
 
 
 type FieldCheckboxProps = InputCheckboxProps & {
@@ -7,10 +8,11 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };
 
 
-export const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
-  return (
-    <Block label={props.label}>
-      <InputCheckbox {...props} />
+export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputCheckbox {...this.props} />
     </Block>
-  );
-};
+  }
+}
+

src/components/FieldColor.tsx

@@ -1,5 +1,6 @@
-import { Block } from "./Block";
-import { InputColor, type InputColorProps } from "./InputColor";
+import React from 'react'
+import Block from './Block'
+import InputColor, {InputColorProps} from './InputColor'
 
 
 type FieldColorProps = InputColorProps & {
@@ -10,10 +11,11 @@ type FieldColorProps = InputColorProps & {
 };
 
 
-export const FieldColor: React.FC<FieldColorProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputColor {...props} />
+export default class FieldColor extends React.Component<FieldColorProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputColor {...this.props} />
     </Block>
-  );
-};
+  }
+}
+

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
@@ -10,30 +10,29 @@ type FieldCommentInternalProps = {
   error: {message: string}
 } & WithTranslation;
 
-const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
-  const t = props.t;
-  const fieldSpec = {
-    doc: t(
-      "Comments for the current layer. This is non-standard and not in the spec."
-    ),
-  };
+class FieldCommentInternal extends React.Component<FieldCommentInternalProps> {
+  render() {
+    const t = this.props.t;
+    const fieldSpec = {
+      doc: t("Comments for the current layer. This is non-standard and not in the spec."),
+    };
 
-  return (
-    <Block
+    return <Block
       label={t("Comments")}
       fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
-      error={props.error}
+      error={this.props.error}
     >
       <InputString
         multi={true}
-        value={props.value}
-        onChange={props.onChange}
+        value={this.props.value}
+        onChange={this.props.onChange}
         default={t("Comment...")}
         data-wd-key="layer-comment.input"
       />
     </Block>
-  );
-};
+  }
+}
 
-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
@@ -9,43 +9,57 @@ type FieldDocLabelProps = {
   onToggleDoc?(...args: unknown[]): unknown
 };
 
+type FieldDocLabelState = {
+  open: boolean
+};
 
-export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
-  const [open, setOpen] = React.useState(false);
-
-  const onToggleDoc = (state: boolean) => {
-    setOpen(state);
-    if (props.onToggleDoc) {
-      props.onToggleDoc(state);
+export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
+  constructor (props: FieldDocLabelProps) {
+    super(props);
+    this.state = {
+      open: false,
     }
-  };
+  }
 
-  const { label, fieldSpec } = props;
-  const { doc } = fieldSpec || {};
+  onToggleDoc = (open: boolean) => {
+    this.setState({
+      open,
+    }, () => {
+      if (this.props.onToggleDoc) {
+        this.props.onToggleDoc(this.state.open);
+      }
+    });
+  }
 
-  if (doc) {
-    return (
-      <label className="maputnik-doc-wrapper">
+  render() {
+    const {label, fieldSpec} = this.props;
+    const {doc} = fieldSpec || {};
+
+    if (doc) {
+      return <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"}`}
-            onClick={() => onToggleDoc(!open)}
-            data-wd-key={"field-doc-button-" + label}
+            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
+            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
+            onClick={() => this.onToggleDoc(!this.state.open)}
+            data-wd-key={'field-doc-button-'+label}
           >
-            {open ? <MdHighlightOff /> : <MdInfoOutline />}
+            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>
         </div>
       </label>
-    );
-  } else if (label) {
-    return (
-      <label className="maputnik-doc-wrapper">
-        <div className="maputnik-doc-target">{label}</div>
+    }
+    else if (label) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+        </div>
       </label>
-    );
+    }
+    else {
+      <div />
+    }
   }
-  return <div />;
-};
+}

src/components/FieldDynamicArray.tsx

@@ -1,14 +1,16 @@
-import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
-import { Fieldset } from "./Fieldset";
+import React from 'react'
+import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import Fieldset from './Fieldset'
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {
   name?: string
 };
 
-export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
-  return (
-    <Fieldset label={props.label}>
-      <InputDynamicArray {...props} />
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputDynamicArray {...this.props} />
     </Fieldset>
-  );
-};
+  }
+}
+

src/components/FieldEnum.tsx

@@ -1,8 +1,9 @@
-import { InputEnum, type InputEnumProps } from "./InputEnum";
-import { Fieldset } from "./Fieldset";
+import React from 'react'
+import InputEnum, {InputEnumProps} from './InputEnum'
+import Fieldset from './Fieldset';
 
 
-type FieldEnumProps = InputEnumProps & {
+type FieldEnumProps = InputEnumProps & { 
   label?: string;
   fieldSpec?: {
     doc: string
@@ -10,10 +11,10 @@ type FieldEnumProps = InputEnumProps & {
 };
 
 
-export const FieldEnum: React.FC<FieldEnumProps> = (props) => {
-  return (
-    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
-      <InputEnum {...props} />
+export default class FieldEnum extends React.Component<FieldEnumProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputEnum {...this.props} />
     </Fieldset>
-  );
-};
+  }
+}

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,285 +107,301 @@ type FieldFunctionProps = {
   fieldName: string
   fieldType: string
   fieldSpec: any
-  errors?: MappedLayerErrors
+  errors?: {[key: string]: {message: string}}
   value?: any
 };
 
+type FieldFunctionState = {
+  dataType: string
+  isEditing: boolean
+}
 
 /** 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 [dataType, setDataType] = React.useState(
-    getDataType(props.value, props.fieldSpec)
-  );
-  const [isEditing, setIsEditing] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isEditing) {
-      setDataType(getDataType(props.value, props.fieldSpec));
+export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
+  constructor (props: FieldFunctionProps) {
+    super(props);
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
     }
-  }, [props.value, props.fieldSpec, isEditing]);
+  }
 
-  const getFieldFunctionType = (fieldSpec: any) => {
+  static getDerivedStateFromProps(props: Readonly<FieldFunctionProps>, state: FieldFunctionState) {
+    // Because otherwise when editing values we end up accidentally changing field type.
+    if (state.isEditing) {
+      return {};
+    }
+    else {
+      return {
+        isEditing: false,
+        dataType: getDataType(props.value, props.fieldSpec)
+      };
+    }
+  }
+
+  getFieldFunctionType(fieldSpec: any) {
     if (fieldSpec.expression.interpolated) {
-      return "exponential";
+      return "exponential"
     }
     if (fieldSpec.type === "number") {
-      return "interval";
+      return "interval"
     }
-    return "categorical";
-  };
+    return "categorical"
+  }
 
-  const addStop = () => {
-    const stops = props.value.stops.slice(0);
-    const lastStop = stops[stops.length - 1];
+  addStop = () => {
+    const stops = this.props.value.stops.slice(0)
+    const lastStop = stops[stops.length - 1]
     if (typeof lastStop[0] === "object") {
       stops.push([
-        { zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
-        lastStop[1],
-      ]);
-    } else {
-      stops.push([lastStop[0] + 1, lastStop[1]]);
+        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
+        lastStop[1]
+      ])
+    }
+    else {
+      stops.push([lastStop[0] + 1, lastStop[1]])
     }
 
     const changedValue = {
-      ...props.value,
+      ...this.props.value,
       stops: stops,
-    };
-
-    props.onChange(props.fieldName, changedValue);
-  };
-
-  const deleteExpression = () => {
-    const { fieldSpec, fieldName } = props;
-    props.onChange(fieldName, fieldSpec.default);
-    setDataType("value");
-  };
-
-  const deleteStop = (stopIdx: number) => {
-    const stops = props.value.stops.slice(0);
-    stops.splice(stopIdx, 1);
-
-    let changedValue: any = {
-      ...props.value,
-      stops: stops,
-    };
-
-    if (stops.length === 1) {
-      changedValue = stops[0][1];
     }
 
-    props.onChange(props.fieldName, changedValue);
-  };
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
 
-  const makeZoomFunction = () => {
-    const { value } = props;
+  deleteExpression = () => {
+    const {fieldSpec, fieldName} = this.props;
+    this.props.onChange(fieldName, fieldSpec.default);
+    this.setState({
+      dataType: "value",
+    });
+  }
 
-    let zoomFunc: any;
-    if (typeof value === "object") {
+  deleteStop = (stopIdx: number) => {
+    const stops = this.props.value.stops.slice(0)
+    stops.splice(stopIdx, 1)
+
+    let changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+
+    if(stops.length === 1) {
+      changedValue = stops[0][1]
+    }
+
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  makeZoomFunction = () => {
+    const {value} = this.props;
+
+    let zoomFunc;
+    if (typeof(value) === "object") {
       if (value.stops) {
         zoomFunc = {
           base: value.base,
           stops: value.stops.map((stop: Stop) => {
-            return [stop[0].zoom, stop[1] || findDefaultFromSpec(props.fieldSpec)];
-          }),
-        };
-      } else {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
         zoomFunc = {
           base: value.base,
           stops: [
-            [6, findDefaultFromSpec(props.fieldSpec)],
-            [10, findDefaultFromSpec(props.fieldSpec)],
-          ],
-        };
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
       }
-    } else {
+    }
+    else {
       zoomFunc = {
         stops: [
-          [6, value || findDefaultFromSpec(props.fieldSpec)],
-          [10, value || findDefaultFromSpec(props.fieldSpec)],
-        ],
-      };
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
     }
 
-    props.onChange(props.fieldName, zoomFunc);
-  };
+    this.props.onChange(this.props.fieldName, zoomFunc)
+  }
 
-  const undoExpression = () => {
-    const { value, fieldName } = props;
+  undoExpression = () => {
+    const {value, fieldName} = this.props;
 
     if (isGetExpression(value)) {
-      props.onChange(fieldName, {
-        type: "identity",
-        property: value[1],
+      this.props.onChange(fieldName, {
+        "type": "identity",
+        "property": value[1]
+      });
+      this.setState({
+        dataType: "value",
       });
-      setDataType("value");
-    } else if (isLiteralExpression(value)) {
-      props.onChange(fieldName, value[1]);
-      setDataType("value");
     }
-  };
+    else if (isLiteralExpression(value)) {
+      this.props.onChange(fieldName, value[1]);
+      this.setState({
+        dataType: "value",
+      });
+    }
+  }
 
-  const canUndo = () => {
-    const { value, fieldSpec } = props;
+  canUndo = () => {
+    const {value, fieldSpec} = this.props;
     return (
       isGetExpression(value) ||
       isLiteralExpression(value) ||
       isPrimative(value) ||
       (Array.isArray(value) && fieldSpec.type === "array")
     );
-  };
+  }
 
-  const makeExpression = () => {
-    const { value, fieldSpec } = props;
+  makeExpression = () => {
+    const {value, fieldSpec} = this.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];
-    } else {
-      expression = ["literal", value || props.fieldSpec.default];
     }
-    props.onChange(props.fieldName, expression);
-  };
+    else if (isIdentityProperty(value)) {
+      expression = ["get", value.property];
+    }
+    else {
+      expression = ["literal", value || this.props.fieldSpec.default];
+    }
+    this.props.onChange(this.props.fieldName, expression);
+  }
 
-  const makeDataFunction = () => {
-    const functionType = getFieldFunctionType(props.fieldSpec);
-    const stopValue = functionType === "categorical" ? "" : 0;
-    const { value } = props;
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
+    const {value} = this.props;
     let dataFunc;
 
-    if (typeof value === "object") {
+    if (typeof(value) === "object") {
       if (value.stops) {
         dataFunc = {
           property: "",
           type: functionType,
           base: value.base,
           stops: value.stops.map((stop: Stop) => {
-            return [{ zoom: stop[0], value: stopValue }, stop[1] || findDefaultFromSpec(props.fieldSpec)];
-          }),
-        };
-      } else {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
         dataFunc = {
           property: "",
           type: functionType,
           base: value.base,
           stops: [
-            [{ zoom: 6, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
-            [{ zoom: 10, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
-          ],
-        };
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
       }
-    } else {
+    }
+    else {
       dataFunc = {
         property: "",
         type: functionType,
         base: value.base,
         stops: [
-          [{ zoom: 6, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
-          [{ zoom: 10, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
-        ],
-      };
+          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
     }
 
-    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);
-  };
-
-  const onUnmarkEditing = () => {
-    setIsEditing(false);
-  };
-
-  const propClass =
-    props.fieldSpec.default === props.value ? "maputnik-default-property" : "maputnik-modified-property";
-
-  let specField;
-
-  if (dataType === "expression") {
-    specField = (
-      <ExpressionProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null, props.fieldName)}
-        canUndo={canUndo}
-        onUndo={undoExpression}
-        onDelete={deleteExpression}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onFocus={onMarkEditing}
-        onBlur={onUnmarkEditing}
-      />
-    );
-  } else if (dataType === "zoom_function") {
-    specField = (
-      <ZoomProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onDeleteStop={deleteStop}
-        onAddStop={addStop}
-        onChangeToDataFunction={makeDataFunction}
-        onExpressionClick={makeExpression}
-      />
-    );
-  } else if (dataType === "data_function") {
-    specField = (
-      <DataProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onDeleteStop={deleteStop}
-        onAddStop={addStop}
-        onChangeToZoomFunction={makeZoomFunction}
-        onExpressionClick={makeExpression}
-      />
-    );
-  } else {
-    specField = (
-      <SpecProperty
-        errors={props.errors}
-        onChange={props.onChange.bind(null)}
-        fieldType={props.fieldType}
-        fieldName={props.fieldName}
-        fieldSpec={props.fieldSpec}
-        value={props.value}
-        onZoomClick={makeZoomFunction}
-        onDataClick={makeDataFunction}
-        onExpressionClick={makeExpression}
-        onElevationClick={makeElevationFunction}
-      />
-    );
+    this.props.onChange(this.props.fieldName, dataFunc)
   }
 
-  return (
-    <div className={propClass} data-wd-key={"spec-field-container:" + props.fieldName}>
+  onMarkEditing = () => {
+    this.setState({isEditing: true});
+  }
+
+  onUnmarkEditing = () => {
+    this.setState({isEditing: false});
+  }
+
+  render() {
+    const {dataType} = this.state;
+    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
+    let specField;
+
+    if (dataType === "expression") {
+      specField = (
+        <ExpressionProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this, this.props.fieldName)}
+          canUndo={this.canUndo}
+          onUndo={this.undoExpression}
+          onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onFocus={this.onMarkEditing}
+          onBlur={this.onUnmarkEditing}
+        />
+      );
+    }
+    else if (dataType === "zoom_function") {
+      specField = (
+        <ZoomProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
+      specField = (
+        <DataProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToZoomFunction={this.makeZoomFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else {
+      specField = (
+        <SpecProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
       {specField}
     </div>
-  );
-};
+  }
+}
+

src/components/FieldId.tsx

@@ -1,7 +1,8 @@
+import React from 'react'
 
-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,17 +11,18 @@ type FieldIdProps = {
   error?: {message: string}
 };
 
-export const FieldId: React.FC<FieldIdProps> = (props) => {
-  return (
-    <Block label="ID" fieldSpec={latest.layer.id}
-      data-wd-key={props.wdKey}
-      error={props.error}
+export default class FieldId extends React.Component<FieldIdProps> {
+  render() {
+    return <Block label="ID" fieldSpec={latest.layer.id}
+
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
       <InputString
-        value={props.value}
-        onInput={props.onChange}
-        data-wd-key={props.wdKey + ".input"}
+        value={this.props.value}
+        onInput={this.props.onChange}
+        data-wd-key={this.props.wdKey + ".input"}
       />
     </Block>
-  );
-};
+  }
+}

src/components/FieldJson.tsx

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

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
@@ -11,24 +11,25 @@ type FieldMaxZoomInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
-  const t = props.t;
-  return (
-    <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
-      error={props.error}
+class FieldMaxZoomInternal extends React.Component<FieldMaxZoomInternalProps> {
+  render() {
+    const t = this.props.t;
+    return <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
       data-wd-key="max-zoom"
     >
       <InputNumber
         allowRange={true}
-        value={props.value}
-        onChange={props.onChange}
+        value={this.props.value}
+        onChange={this.props.onChange}
         min={latest.layer.maxzoom.minimum}
         max={latest.layer.maxzoom.maximum}
         default={latest.layer.maxzoom.maximum}
         data-wd-key="max-zoom.input"
       />
     </Block>
-  );
-};
+  }
+}
 
-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
@@ -11,24 +11,25 @@ type FieldMinZoomInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
-  const t = props.t;
-  return (
-    <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
-      error={props.error}
+class FieldMinZoomInternal extends React.Component<FieldMinZoomInternalProps> {
+  render() {
+    const t = this.props.t;
+    return <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
       data-wd-key="min-zoom"
     >
       <InputNumber
         allowRange={true}
-        value={props.value}
-        onChange={props.onChange}
+        value={this.props.value}
+        onChange={this.props.onChange}
         min={latest.layer.minzoom.minimum}
         max={latest.layer.minzoom.maximum}
         default={latest.layer.minzoom.minimum}
         data-wd-key='min-zoom.input'
       />
     </Block>
-  );
-};
+  }
+}
 
-export const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+export default FieldMinZoom;

src/components/FieldMultiInput.tsx

@@ -1,5 +1,6 @@
-import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput";
-import { Fieldset } from "./Fieldset";
+import React from 'react'
+import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
+import Fieldset from './Fieldset'
 
 
 type FieldMultiInputProps = InputMultiInputProps & {
@@ -7,10 +8,11 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };
 
 
-export const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
-  return (
-    <Fieldset label={props.label}>
-      <InputMultiInput {...props} />
+export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputMultiInput {...this.props} />
     </Fieldset>
-  );
-};
+  }
+}
+

src/components/FieldNumber.tsx

@@ -1,5 +1,6 @@
-import { InputNumber, type InputNumberProps } from "./InputNumber";
-import { Block } from "./Block";
+import React from 'react'
+import InputNumber, {InputNumberProps} from './InputNumber'
+import Block from './Block'
 
 
 type FieldNumberProps = InputNumberProps & {
@@ -10,10 +11,10 @@ type FieldNumberProps = InputNumberProps & {
 };
 
 
-export const FieldNumber: React.FC<FieldNumberProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputNumber {...props} />
+export default class FieldNumber extends React.Component<FieldNumberProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputNumber {...this.props} />
     </Block>
-  );
-};
+  }
+}

src/components/FieldSelect.tsx

@@ -1,5 +1,6 @@
-import { Block } from "./Block";
-import { InputSelect, type InputSelectProps } from "./InputSelect";
+import React from 'react'
+import Block from './Block'
+import InputSelect, {InputSelectProps} from './InputSelect'
 
 
 type FieldSelectProps = InputSelectProps & {
@@ -10,10 +11,12 @@ type FieldSelectProps = InputSelectProps & {
 };
 
 
-export const FieldSelect: React.FC<FieldSelectProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputSelect {...props} />
+export default class FieldSelect extends React.Component<FieldSelectProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputSelect {...this.props}/>
     </Block>
-  );
-};
+  }
+}
+
+

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
-}) => {
-  return (
-    <Block
+class FieldSourceInternal extends React.Component<FieldSourceInternalProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceIds: [],
+  }
+
+  render() {
+    const t = this.props.t;
+    return <Block
       label={t("Source")}
       fieldSpec={latest.layer.source}
-      error={error}
-      data-wd-key={wdKey}
+      error={this.props.error}
+      data-wd-key={this.props.wdKey}
     >
       <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceIds?.map((src) => [src, src])}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds?.map(src => [src, src])}
       />
     </Block>
-  );
-};
+  }
+}
 
-
-export const FieldSource = withTranslation()(FieldSourceInternal);
+const FieldSource = withTranslation()(FieldSourceInternal);
+export default FieldSource;

src/components/FieldSourceLayer.tsx

@@ -1,38 +1,42 @@
-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
-}) => {
-  return (
-    <Block
-      label={t("Source Layer")}
-      fieldSpec={latest.layer["source-layer"]}
+class FieldSourceLayerInternal extends React.Component<FieldSourceLayerInternalProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceLayerIds: [],
+    isFixed: false
+  }
+
+  render() {
+    const t = this.props.t;
+    return <Block 
+      label={t("Source Layer")} 
+      fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
-      error={error}
+      error={this.props.error}
     >
       <InputAutocomplete
-        value={value}
-        onChange={onChange}
-        options={sourceLayerIds?.map((l) => [l, l])}
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds?.map(l => [l, l])}
       />
     </Block>
-  );
-};
+  }
+}
 
-export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
+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,6 @@
-import { Block } from "./Block";
-import { InputString, type InputStringProps } from "./InputString";
+import React from 'react'
+import Block from './Block'
+import InputString, {InputStringProps} from './InputString'
 
 type FieldStringProps = InputStringProps & {
   name?: string
@@ -9,10 +10,10 @@ type FieldStringProps = InputStringProps & {
   }
 };
 
-export const FieldString: React.FC<FieldStringProps> = (props) => {
-  return (
-    <Block label={props.label} fieldSpec={props.fieldSpec}>
-      <InputString {...props} />
+export default class FieldString extends React.Component<FieldStringProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputString {...this.props} />
     </Block>
-  );
-};
+  }
+}