Merge 3e7e1e6ce9 into c58191ff62

Bump i18next-browser-languagedetector from 8.0.2 to 8.0.4 (#1072 )
Bumps [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) from 8.0.2 to 8.0.4. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/i18next/i18next-browser-languageDetector/blob/master/CHANGELOG.md">i18next-browser-languagedetector's changelog</a>.</em></p> <blockquote> <h3>8.0.4</h3> <ul> <li>fix localstorage check to try to address <a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">297</a> <a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/pull/300">300</a></li> </ul> <h3>8.0.3</h3> <ul> <li>change localstorage check to try to address <a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">297</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/131b04be995f0a24b2bfd5a92e15516407a7127f"><code>131b04b</code></a> 8.0.4</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/421e91df5ae5781a513910f3d5e44027285f583d"><code>421e91d</code></a> release</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/c24af003cb58e4c7104c11006dc342bea6dade71"><code>c24af00</code></a> fix detection of window existence (<a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/300">#300</a>)</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/c7ba07514a897f83add81253a00160e3a1cf6bc7"><code>c7ba075</code></a> Bump elliptic from 6.6.0 to 6.6.1 (<a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/299">#299</a>)</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/4f5a90ee514f1b3de9e9bf89206655ccbd6187d4"><code>4f5a90e</code></a> Bump rollup from 2.79.1 to 2.79.2 (<a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/298">#298</a>)</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/a665fe839636530e0c3387e6f9c7756dffccf0aa"><code>a665fe8</code></a> 8.0.3</li> <li><a href="https://github.com/i18next/i18next-browser-languageDetector/commit/c24ea1777b81fc2eebb508e443e903880684d1c9"><code>c24ea17</code></a> change localstorage check to try to address <a href="https://redirect.github.com/i18next/i18next-browser-languageDetector/issues/297">#297</a></li> <li>See full diff in <a href="https://github.com/i18next/i18next-browser-languageDetector/compare/v8.0.2...v8.0.4">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=i18next-browser-languagedetector&package-manager=npm_and_yarn&previous-version=8.0.2&new-version=8.0.4)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-08-01 02:37:40 +00:00 · 2025-02-20 14:04:30 +00:00 · 2025-02-20 14:04:15 +00:00 · 2025-02-17 13:37:58 +00:00 · 2025-02-12 14:05:00 +00:00 · 2025-02-06 14:12:04 +00:00
74 changed files with 5979 additions and 3096 deletions
@@ -1,46 +0,0 @@
 {
    "root": true,
    "env": { 
      "browser": true, 
      "es2020": true 
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:react/jsx-runtime",
      "plugin:react-hooks/recommended",
    ],
    "ignorePatterns": [
      "dist"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { 
      "ecmaVersion": "latest", 
      "sourceType": "module" 
    },
    "settings": { 
      "react": { "version": "16.4" } 
    },
    "plugins": [
      "@typescript-eslint",
      "react-refresh"],
    "rules": {
      "react-refresh/only-export-components": [
        "warn",
        { "allowConstantExport": true }
      ],
      "@typescript-eslint/no-unused-vars": [
        "warn",
        { "argsIgnorePattern": "^_" }
      ],
      "no-unused-vars": "off",
      "react/prop-types": ["off"],
      // Disable no-undef. It's covered by @typescript-eslint
      "no-undef": "off",
      "indent": ["error", 2],
      "no-var": ["error"]
    },
    "globals": {
      "global": "readonly"
  }
 }
@@ -1,14 +1,17 @@
 # To get started with Dependabot version updates, you'll need to specify which
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:
 # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 version: 2
 updates:
-  - package-ecosystem: "npm"
+  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/"
+    directory: "/" # Location of package manifests
    schedule:
      interval: "daily"
-    open-pull-requests-limit: 2
+    open-pull-requests-limit: 20
    versioning-strategy: increase
  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "daily"
    open-pull-requests-limit: 2
    versioning-strategy: increase
@@ -0,0 +1,26 @@
 name: Automerge Dependabot
 on: pull_request
 permissions: write-all
 jobs:
  dependabot:
    runs-on: ubuntu-latest
    if: ${{ github.actor == 'dependabot[bot]' }}
    steps:
      - name: Dependabot metadata
        id: metadata
        uses: dependabot/fetch-metadata@v2.3.0
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"
      - name: Approve Dependabot PRs
        run: gh pr review --approve "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
      - name: Enable auto-merge for Dependabot PRs
        run: gh pr merge --auto --squash "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
@@ -93,7 +93,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        browser: [chrome, firefox]
+        browser: [chrome]
    runs-on: ubuntu-22.04
    steps:
@@ -107,7 +107,7 @@ jobs:
          start: npm run start
          browser: ${{ matrix.browser }}
      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v5
        with:
          files: ${{ github.workspace }}/.nyc_output/out.json
          verbose: true
@@ -0,0 +1,70 @@
 # For most projects, this workflow file will not need changing; you simply need
 # to commit it to your repository.
 #
 # You may wish to alter this file to override the set of languages analyzed,
 # or to provide custom queries or build logic.
 #
 # ******** NOTE ********
 # We have attempted to detect the languages in your repository. Please check
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
 name: "CodeQL"
 on:
  push:
    branches: [ main ]
  pull_request:
    # The branches below must be a subset of the branches above
    branches: [ main ]
  schedule:
    - cron: '17 0 * * 6'
 jobs:
  analyze:
    name: Analyze
    runs-on: ubuntu-latest
    permissions:
      actions: read
      contents: read
      security-events: write
    strategy:
      fail-fast: false
      matrix:
        language: [ 'javascript' ]
        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
        # Learn more about CodeQL language support at https://git.io/codeql-language-support
    steps:
    - name: Checkout repository
      uses: actions/checkout@v4
    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
      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.
        # By default, queries listed here will override any specified in a config file.
        # Prefix the list here with "+" to use these queries and those in the config file.
        # queries: ./path/to/local/query, your-org/your-repo/queries@main
    # 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@v3
    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
    #    and modify them (or add more) to build your code if your project
    #    uses a compiled language
    #- run: |
    #   make bootstrap
    #   make release
    - name: Perform CodeQL Analysis
      uses: github/codeql-action/analyze@v3
@@ -32,7 +32,7 @@ jobs:
          ./build/bump-version-changelog.js ${{ inputs.version }}
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
        with:
          commit-message: Bump version to ${{ inputs.version }}
          branch: bump-version-to-${{ inputs.version }}
@@ -24,7 +24,7 @@ jobs:
        run: npm run build
      - name: Upload to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist
@@ -66,7 +66,6 @@ jobs:
      - name: Build
        run: |
          npm run build
          npm run build-desktop
      - name: Tag commit and push
@@ -78,8 +77,7 @@ jobs:
      - name: Create Archives
        run: |
-          zip -r dist dist
+          zip -r "desktop-${{ steps.package-version.outputs.current-version }}"  desktop/bin/
          zip -r desktop desktop/bin/
      - name: Build Release Notes
        id: release_notes
@@ -97,7 +95,7 @@ jobs:
          tag: ${{ steps.tag_version.outputs.new_tag }}
          name: ${{ steps.tag_version.outputs.new_tag }}
          bodyFile: ${{ steps.release_notes.outputs.release_notes }}
-          artifacts: "dist.zip,desktop.zip"
+          artifacts: "desktop-${{ steps.package-version.outputs.current-version }}.zip"
          allowUpdates: true
          draft: false
          prerelease: false
@@ -36,3 +36,11 @@ public
 /cypress/screenshots
 /dist/
 /desktop/version.go
 # IDE
 .vscode/
 .idea/
 # Window metadata files
 /desktop/winres/winres.json
 /desktop/*.syso
@@ -1 +1 @@
-18.19
+22.13
@@ -1,12 +1,23 @@
 ## main
 ### ✨ Features and improvements
 - Add german translation
 - Use same version number for web and desktop versions
 - Add scheme type options for vector/raster tile
 - Add `tileSize` field for raster and raster-dem tile sources
 - Update Protomaps Light gallery style to v4
 - Add support to edit local files on the file system if supported by the browser
 - 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
 - _...Add new stuff here..._
 ### 🐞 Bug fixes
 - Fix incorrect handing of network error response (#944)
 - _...Add new stuff here..._
-## 2.1.0
+## 2.1.1
 ### ✨ Features and improvements
@@ -36,6 +36,8 @@ 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. 
 ### 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.
@@ -70,7 +72,6 @@ npm run lint-css
 npm run sort-styles
 ```
 ## Tests
 For E2E testing we use [Cypress](https://www.cypress.io/)
@@ -20,14 +20,14 @@ const changelog = fs.readFileSync(changelogPath, 'utf8');
 */
 const regex = /^## (\d+\.\d+\.\d+.*?)\n(.+?)(?=\n^## \d+\.\d+\.\d+.*?\n)/gms;
-let releaseNotes = [];
+const releaseNotes = [];
 let match;
 // eslint-disable-next-line no-cond-assign
 while (match = regex.exec(changelog)) {
-    releaseNotes.push({
+  releaseNotes.push({
-        'version': match[1],
+    'version': match[1],
-        'changelog': match[2].trim(),
+    'changelog': match[2].trim(),
-    });
+  });
 }
 const latest = releaseNotes[0];
@@ -42,7 +42,6 @@ if (previous) {
 }
 const templatedReleaseNotes = `${header}
-${latest.changelog}
+${latest.changelog}`;
 // eslint-disable-next-line eol-last
 process.stdout.write(templatedReleaseNotes.trimEnd());
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 describe("accessibility", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  describe("skip links", () => {
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 describe("history", () => {
-  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, when, get, then } = new MaputnikDriver();
  beforeAndAfter();
  let undoKeyCombo: string;
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 describe("i18n", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  describe("language detector", () => {
@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
  beforeAndAfter();
  describe("shortcuts", () => {
    beforeEach(() => {
@@ -2,7 +2,7 @@ import { v1 as uuid } from "uuid";
 import { MaputnikDriver } from "./maputnik-driver";
 describe("layers", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  beforeEach(() => {
    when.setStyle("both");
@@ -101,7 +101,7 @@ describe("layers", () => {
  });
  describe("background", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "background",
      });
      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -117,7 +117,7 @@ describe("layers", () => {
    describe("modify", () => {
      function createBackground() {
        // Setup
-        let id = uuid();
+        const id = uuid();
        when.selectWithin("add-layer.layer-type", "background");
        when.setValue("add-layer.layer-id.input", "background:" + id);
@@ -139,11 +139,11 @@ describe("layers", () => {
      describe("layer", () => {
        it("expand/collapse");
        it("id", () => {
-          let bgId = createBackground();
+          const bgId = createBackground();
          when.click("layer-list-item:background:" + bgId);
-          let id = uuid();
+          const id = uuid();
          when.setValue("layer-editor.layer-id.input", "foobar:" + id);
          when.click("min-zoom");
@@ -219,7 +219,7 @@ describe("layers", () => {
        describe("comments", () => {
          let bgId: string;
-          let comment = "42";
+          const comment = "42";
          beforeEach(() => {
            bgId = createBackground();
@@ -320,11 +320,11 @@ describe("layers", () => {
        // TODO
        it.skip("parse error", () => {
-          let bgId = createBackground();
+          const bgId = createBackground();
          when.click("layer-list-item:background:" + bgId);
-          let errorSelector = ".CodeMirror-lint-marker-error";
+          const errorSelector = ".CodeMirror-lint-marker-error";
          then(get.elementByTestId(errorSelector)).shouldNotExist();
          when.click(".CodeMirror");
@@ -339,7 +339,7 @@ describe("layers", () => {
  describe("fill", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "fill",
        layer: "example",
      });
@@ -361,7 +361,7 @@ describe("layers", () => {
  describe("line", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "line",
        layer: "example",
      });
@@ -385,7 +385,7 @@ describe("layers", () => {
  describe("symbol", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "symbol",
        layer: "example",
      });
@@ -404,7 +404,7 @@ describe("layers", () => {
  describe("raster", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "raster",
        layer: "raster",
      });
@@ -423,7 +423,7 @@ describe("layers", () => {
  describe("circle", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "circle",
        layer: "example",
      });
@@ -442,7 +442,7 @@ describe("layers", () => {
  describe("fill extrusion", () => {
    it("add", () => {
-      let id = when.modal.fillLayers({
+      const id = when.modal.fillLayers({
        type: "fill-extrusion",
        layer: "example",
      });
@@ -494,4 +494,33 @@ describe("layers", () => {
      ).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');
    });
  });
 });
@@ -1,11 +1,11 @@
 import { MaputnikDriver } from "./maputnik-driver";
 describe("map", () => {
-  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
  beforeAndAfter();
  describe("zoom level", () => {
    it("via url", () => {
-      let zoomLevel = 12.37;
+      const zoomLevel = 12.37;
      when.setStyle("geojson", zoomLevel);
      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
@@ -14,7 +14,7 @@ describe("map", () => {
    });
    it("via map controls", () => {
-      let zoomLevel = 12.37;
+      const zoomLevel = 12.37;
      when.setStyle("geojson", zoomLevel);
      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
      when.clickZoomIn();
@@ -8,8 +8,8 @@ export default class ModalDriver {
    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
-      let type = opts.type;
+      const type = opts.type;
-      let layer = opts.layer;
+      const layer = opts.layer;
      let id;
      if (opts.id) {
        id = opts.id;
@@ -1,7 +1,8 @@
 import { MaputnikDriver } from "./maputnik-driver";
 import tokens from "../../src/config/tokens.json" with {type: "json"};
 describe("modals", () => {
-  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
+  const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
  beforeAndAfter();
  beforeEach(() => {
@@ -25,7 +26,7 @@ describe("modals", () => {
    describe("when click open url", () => {
      beforeEach(() => {
-        let styleFileUrl = get.exampleFileUrl();
+        const styleFileUrl = get.exampleFileUrl();
        when.setValue("modal:open.url.input", styleFileUrl);
        when.click("modal:open.url.button");
@@ -61,9 +62,60 @@ describe("modals", () => {
  });
  describe("sources", () => {
    beforeEach(() => {
      when.setStyle("layer");
      when.click("nav:sources");
    });
    it("active sources");
    it("public source");
-    it("add new 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", () => {
@@ -126,7 +178,7 @@ describe("modals", () => {
      });
    });
    it("glyphs url", () => {
-      let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
+      const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
      when.setValue("modal:settings.glyphs", glyphsUrl);
      when.click("modal:settings.name");
      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -135,7 +187,7 @@ describe("modals", () => {
    });
    it("maptiler access token", () => {
-      let apiKey = "testing123";
+      const apiKey = "testing123";
      when.setValue(
        "modal:settings.maputnik:openmaptiles_access_token",
        apiKey
@@ -149,7 +201,7 @@ describe("modals", () => {
    });
    it("thunderforest access token", () => {
-      let apiKey = "testing123";
+      const apiKey = "testing123";
      when.setValue(
        "modal:settings.maputnik:thunderforest_access_token",
        apiKey
@@ -160,6 +212,18 @@ describe("modals", () => {
      ).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");
@@ -172,6 +236,40 @@ describe("modals", () => {
        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", () => {
@@ -1,16 +1,22 @@
 SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
-DESKTOP_VERSION := 1.1.1
+VERSION := $(shell node -p "require('../package.json').version")
 EDITOR_VERSION := $(shell node -p "require('../package.json').version")
 GOPATH := $(if $(GOPATH),$(GOPATH),$(HOME)/go)
 GOBIN := $(if $(GOBIN),$(GOBIN),$(HOME)/go/bin)
 all: $(BINARY)
-$(BINARY): $(GOBIN)/gox $(SOURCES) version.go rice-box.go
+$(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 "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"
 winres/winres.json: winres/winres_template.json
 	sed 's/{{.Version}}/$(VERSION)/g' winres/winres_template.json > $@
 $(GOBIN)/go-winres:
 	go install github.com/tc-hib/go-winres@latest
 # Copy the current release into ./editor/maputnik so it can be
 # embedded in the binary
 editor/pull_release:
@@ -23,13 +29,12 @@ $(GOBIN)/gox:
 $(GOBIN)/rice:
 	go install github.com/GeertJohan/go.rice/rice@v1.0.3
-# Embed the current version numbers in the executable by writing version.go
+# Embed the current version number in the executable by writing version.go
 .PHONY: version.go
 version.go:
-	@echo "// DO NOT EDIT: Autogenerated by Makefile\n" > version.go
+	@printf "// DO NOT EDIT: Autogenerated by Makefile\n" > version.go
-	@echo "package main\n" >> version.go
+	@printf "package main\n" >> version.go
-	@echo "const DesktopVersion = \"$(DESKTOP_VERSION)\"" >> version.go
+	@printf "const Version = \"$(VERSION)\"\n" >> version.go
 	@echo "const EditorVersion = \"$(EDITOR_VERSION)\"" >> version.go
 rice-box.go: $(GOBIN)/rice editor/pull_release
 	$(GOBIN)/rice embed-go
@@ -1,4 +1,5 @@
 # Maputnik Desktop [![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
 ---
 A Golang based cross platform executable for integrating Maputnik locally.
@@ -11,7 +12,7 @@ Report issues on [maplibre/maputnik](https://github.com/maplibre/maputnik).
 ## Install
-You can download a single binary for Linux, OSX or Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/editor/releases/latest).
+You can download a zip file containing desktop binaries for Linux, OSX and Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/releases/latest).
 ### Usage
@@ -53,12 +54,12 @@ maputnik --static ./localFolder
 `maputnik` exposes the configured styles via a HTTP API.
-| Method                          | Description
+| Method                   | Description                                            |
-|---------------------------------|---------------------------------------
+| ------------------------ | ------------------------------------------------------ |
-| `GET /styles`                   | List the ID of all configured style files
+| `GET /styles`            | List the ID of all configured style files              |
-| `GET /styles/{filename}`        | Get contents of a single style file
+| `GET /styles/{filename}` | Get contents of a single style file                    |
-| `PUT /styles/{filename}`        | Update contents of a style file
+| `PUT /styles/{filename}` | Update contents of a style file                        |
-| `WEBSOCKET /ws`                 | Listen to change events for the configured style files
+| `WEBSOCKET /ws`          | Listen to change events for the configured style files |
 ### Build
@@ -69,4 +70,4 @@ npm install
 npm run build-desktop
 ```
-You should now find the `maputnik` binary in your `bin` directory.
+You should now find the `maputnik` binary in your `desktop/bin` directory.
@@ -17,7 +17,7 @@ func main() {
 	app := cli.NewApp()
 	app.Name = "maputnik"
 	app.Usage = "Server for integrating Maputnik locally"
-	app.Version = "Editor: " + EditorVersion + "; Desktop: " + DesktopVersion
+	app.Version = Version
 	app.Flags = []cli.Flag{
 		&cli.StringFlag{
@@ -0,0 +1,60 @@
 {
  "RT_GROUP_ICON": {
    "APP": {
      "0000": [
        "../../src/img/maputnik.png"
      ]
    }
  },
  "RT_MANIFEST": {
    "#1": {
      "0409": {
        "identity": {
          "name": "Maputnik",
          "version": "{{.Version}}"
        },
        "description": "A MapLibre GL visual style editor",
        "minimum-os": "win7",
        "execution-level": "as invoker",
        "ui-access": false,
        "auto-elevate": false,
        "dpi-awareness": "system",
        "disable-theming": false,
        "disable-window-filtering": false,
        "high-resolution-scrolling-aware": false,
        "ultra-high-resolution-scrolling-aware": false,
        "long-path-aware": false,
        "printer-driver-isolation": false,
        "gdi-scaling": false,
        "segment-heap": false,
        "use-common-controls-v6": false
      }
    }
  },
  "RT_VERSION": {
    "#1": {
      "0000": {
        "fixed": {
          "file_version": "{{.Version}}",
          "product_version": "{{.Version}}"
        },
        "info": {
          "0409": {
            "Comments": "https://github.com/maplibre/maputnik",
            "CompanyName": "Maputnik",
            "FileDescription": "A MapLibre GL visual style editor",
            "FileVersion": "{{.Version}}",
            "InternalName": "Maputnik",
            "LegalCopyright": "MIT License",
            "LegalTrademarks": "",
            "OriginalFilename": "Maputnik.exe",
            "PrivateBuild": "",
            "ProductName": "Maputnik",
            "ProductVersion": "{{.Version}}",
            "SpecialBuild": ""
          }
        }
      }
    }
  }
 }
@@ -0,0 +1,61 @@
 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 tseslint.config({
  extends: [
    eslint.configs.recommended,
    tseslint.configs.recommended,
  ],
  files: ['**/*.{js,jsx,ts,tsx}'],
  ignores: [
    "dist/**/*",
  ],
  languageOptions: {
    ecmaVersion: 2024,
    sourceType: 'module',
    globals: {
      global: 'readonly'
    }
  },
  settings: {
    react: { version: '18.2' }
  },
  plugins: {
    'react': reactPlugin,
    'react-hooks': reactHooksPlugin,
    'react-refresh': reactRefreshPlugin
  },
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true }
    ],
    "@typescript-eslint/no-explicit-any": "off",
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        varsIgnorePattern: '^_',
        caughtErrors: 'all',
        caughtErrorsIgnorePattern: '^_',
        argsIgnorePattern: '^_'
      }
    ],
    '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: {
    reportUnusedDisableDirectives: true,
    noInlineConfig: false
  }
 }
 )
@@ -1,6 +1,6 @@
 export default {
  output: 'src/locales/$LOCALE/$NAMESPACE.json',
-  locales: [ 'ja', 'he','zh' ],
+  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.
@@ -10,7 +10,7 @@ export default {
  keySeparator: false,
  namespaceSeparator: false,
-  defaultValue: (locale, ns, key) => {
+  defaultValue: (_locale, _ns, _key) => {
    // The default value is a string that indicates that the string is not translated.
    return '__STRING_NOT_TRANSLATED__';
  }
@@ -1,6 +1,6 @@
 {
  "name": "maputnik",
-  "version": "2.1.0",
+  "version": "2.1.1",
  "description": "A MapLibre GL visual style editor",
  "type": "module",
  "main": "''",
@@ -9,7 +9,7 @@
    "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 ./src ./cypress --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint",
    "test": "cypress run",
    "cy:open": "cypress open",
    "lint-css": "stylelint \"src/styles/*.scss\"",
@@ -23,29 +23,26 @@
  "license": "MIT",
  "homepage": "https://github.com/maplibre/maputnik#readme",
  "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+    "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
-    "@maplibre/maplibre-gl-geocoder": "^1.6.0",
+    "@maplibre/maplibre-gl-geocoder": "^1.7.1",
-    "@maplibre/maplibre-gl-inspect": "^1.6.3",
+    "@maplibre/maplibre-gl-inspect": "^1.7.1",
-    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
+    "@maplibre/maplibre-gl-style-spec": "^23.1.0",
    "@mdi/js": "^7.4.47",
    "@mdi/react": "^1.6.1",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@prantlf/jsonlint": "^16.0.0",
    "@typescript-eslint/parser": "^7.3.1",
    "array-move": "^4.0.0",
    "buffer": "^6.0.3",
    "classnames": "^2.5.1",
-    "codemirror": "^5.65.2",
+    "codemirror": "^5.65.18",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
    "cypress-plugin-tab": "^1.0.5",
    "detect-browser": "^5.3.0",
    "events": "^3.3.0",
    "file-saver": "^2.0.5",
-    "i18next": "^23.12.2",
+    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "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",
    "jsonlint": "github:josdejong/jsonlint#85a19d7",
    "lodash": "^4.17.21",
    "lodash.capitalize": "^4.2.1",
    "lodash.clamp": "^4.0.3",
@@ -53,10 +50,11 @@
    "lodash.get": "^4.4.2",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^4.1.2",
+    "maplibre-gl": "^5.1.0",
    "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^6.14.1",
+    "ol": "^10.4.0",
-    "ol-mapbox-style": "^7.1.1",
+    "ol-mapbox-style": "^12.4.0",
    "pmtiles": "^4.1.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-accessible-accordion": "^5.0.0",
@@ -68,15 +66,14 @@
    "react-color": "^2.19.3",
    "react-dom": "^18.2.0",
    "react-file-reader-input": "^2.0.0",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.4.0",
    "react-icon-base": "^2.1.2",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.4.0",
    "react-sortable-hoc": "^2.0.0",
    "reconnecting-websocket": "^4.4.0",
    "sass": "^1.72.0",
    "slugify": "^1.6.6",
    "string-hash": "^1.1.3",
-    "url": "^0.11.3"
+    "url": "^0.11.4"
  },
  "jshintConfig": {
    "esversion": 6
@@ -96,15 +93,16 @@
    }
  },
  "devDependencies": {
-    "@cypress/code-coverage": "^3.12.30",
+    "@cypress/code-coverage": "^3.13.11",
    "@eslint/js": "^9.19.0",
    "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^6.0.2",
-    "@shellygo/cypress-test-utils": "^2.1.9",
+    "@shellygo/cypress-test-utils": "^4.1.13",
    "@types/codemirror": "^5.60.15",
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
    "@types/cors": "^2.8.17",
    "@types/file-saver": "^2.0.7",
-    "@types/geojson": "^7946.0.14",
+    "@types/geojson": "^7946.0.16",
    "@types/json-to-ast": "^2.1.4",
    "@types/lodash.capitalize": "^4.2.9",
    "@types/lodash.clamp": "^4.0.9",
@@ -112,38 +110,40 @@
    "@types/lodash.get": "^4.4.9",
    "@types/lodash.isequal": "^4.5.8",
    "@types/lodash.throttle": "^4.1.9",
    "@types/mocha": "^10.0.6",
    "@types/randomcolor": "^0.5.9",
    "@types/react": "^18.2.67",
    "@types/react-aria-menubutton": "^6.2.14",
-    "@types/react-aria-modal": "^4.0.10",
+    "@types/react-aria-modal": "^5.0.0",
-    "@types/react-autocomplete": "^1.8.10",
+    "@types/react-autocomplete": "^1.8.11",
    "@types/react-collapse": "^5.0.4",
-    "@types/react-color": "^3.0.12",
+    "@types/react-color": "^3.0.13",
    "@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/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/wicg-file-system-access": "^2023.10.5",
    "@vitejs/plugin-react": "^4.3.4",
    "cors": "^2.8.5",
-    "cypress": "^13.13.0",
+    "cypress": "^14.0.2",
-    "eslint": "^8.57.0",
+    "cypress-plugin-tab": "^1.0.5",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint": "^9.19.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "i18next-parser": "^9.0.1",
+    "eslint-plugin-react-refresh": "^0.4.18",
    "i18next-parser": "^9.1.0",
    "istanbul": "^0.4.5",
    "istanbul-lib-coverage": "^3.2.2",
-    "mocha": "^10.3.0",
+    "postcss": "^8.5.1",
    "postcss": "^8.4.38",
    "react-hot-loader": "^4.13.1",
-    "stylelint": "^16.2.1",
+    "sass": "^1.83.4",
-    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint": "^16.14.1",
-    "stylelint-scss": "^6.2.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
-    "typescript": "^5.4.3",
+    "stylelint-scss": "^6.11.0",
-    "uuid": "^9.0.1",
+    "typescript": "^5.7.3",
-    "vite": "^5.2.6",
+    "typescript-eslint": "^8.22.0",
-    "vite-plugin-istanbul": "^6.0.0"
+    "uuid": "^11.0.5",
    "vite": "^6.1.0",
    "vite-plugin-istanbul": "^6.0.2"
  }
 }
@@ -8,6 +8,7 @@ import get from 'lodash.get'
 import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
 import { PMTiles } from "pmtiles";
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
 import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
@@ -129,6 +130,7 @@ type AppState = {
    export: boolean
    debug: boolean
  }
  fileHandle: FileSystemFileHandle | null
 }
 export default class App extends React.Component<any, AppState> {
@@ -284,6 +286,7 @@ export default class App extends React.Component<any, AppState> {
      openlayersDebugOptions: {
        debugToolbox: false,
      },
      fileHandle: null,
    }
    this.layerWatcher = new LayerWatcher({
@@ -360,6 +363,7 @@ export default class App extends React.Component<any, AppState> {
        [property]: value
      }
    }
    this.onStyleChanged(changedStyle)
  }
@@ -371,6 +375,24 @@ export default class App extends React.Component<any, AppState> {
      ...opts,
    };
    // For the style object, find the urls that has "{key}" and insert the correct API keys
    // Without this, going from e.g. MapTiler to OpenLayers and back will lose the maptlier key.
    if (newStyle.glyphs && typeof newStyle.glyphs === 'string') {
      newStyle.glyphs = setFetchAccessToken(newStyle.glyphs, newStyle);
    }
    if (newStyle.sprite && typeof newStyle.sprite === 'string') {
      newStyle.sprite = setFetchAccessToken(newStyle.sprite, newStyle);
    }
    for (const [_sourceId, source] of Object.entries(newStyle.sources)) {
      if (source && 'url' in source && typeof source.url === 'string') {
        source.url = setFetchAccessToken(source.url, newStyle);
      }
    }
    if (opts.initialLoad) {
      this.getInitialStateFromUrl(newStyle);
    }
@@ -611,7 +633,8 @@ export default class App extends React.Component<any, AppState> {
    }
  }
-  openStyle = (styleObj: StyleSpecification & {id: string}) => {
+  openStyle = (styleObj: StyleSpecification & {id: string}, fileHandle: FileSystemFileHandle | null) => {
    this.setState({fileHandle: fileHandle});
    styleObj = this.setDefaultValues(styleObj)
    this.onStyleChanged(styleObj)
  }
@@ -638,33 +661,41 @@ export default class App extends React.Component<any, AppState> {
          console.warn("Failed to setFetchAccessToken: ", err);
        }
-        fetch(url!, {
+        const setVectorLayers = (json:any) => {
-          mode: 'cors',
+          if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
-        })
+            return;
-          .then(response => response.json())
+          }
          .then(json => {
-            if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
+          // Create new objects before setState
-              return;
+          const sources = Object.assign({}, {
-            }
+            [key]: this.state.sources[key],
            // Create new objects before setState
            const sources = Object.assign({}, {
              [key]: this.state.sources[key],
            });
            for(const layer of json.vector_layers) {
              (sources[key] as any).layers.push(layer.id)
            }
            console.debug("Updating source: "+key);
            this.setState({
              sources: sources
            });
          })
          .catch(err => {
            console.error("Failed to process sources for '%s'", url, err);
          });
          for(const layer of json.vector_layers) {
            (sources[key] as any).layers.push(layer.id)
          }
          this.setState({
            sources: sources
          });
        };
        if (url!.startsWith("pmtiles://")) {
          (new PMTiles(url!.substr(10))).getTileJson("")
            .then(json => setVectorLayers(json))
            .catch(err => {
              console.error("Failed to process sources for '%s'", url, err);
            });
        } else {
          fetch(url!, {
            mode: 'cors',
          })
            .then(response => response.json())
            .then(json => setVectorLayers(json))
            .catch(err => {
              console.error("Failed to process sources for '%s'", url, err);
            });
        }
      }
      else {
        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
@@ -725,6 +756,7 @@ export default class App extends React.Component<any, AppState> {
        onLayerSelect={this.onLayerSelect}
      />
    } else {
      mapElement = <MapMaplibreGl {...mapProps}
        onChange={this.onMapChange}
        options={this.state.maplibreGlDebugOptions}
@@ -778,6 +810,7 @@ export default class App extends React.Component<any, AppState> {
  getInitialStateFromUrl = (mapStyle: StyleSpecification) => {
    const url = new URL(location.href);
    const modalParam = url.searchParams.get("modal");
    if (modalParam && modalParam !== "") {
      const modals = modalParam.split(",");
      const modalObj: {[key: string]: boolean} = {};
@@ -847,6 +880,10 @@ export default class App extends React.Component<any, AppState> {
    this.setModal(modalName, !this.state.isOpen[modalName]);
  }
  onSetFileHandle(fileHandle: FileSystemFileHandle | null) {
    this.setState({fileHandle: fileHandle});
  }
  onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
    this.setState({
      openlayersDebugOptions: {
@@ -949,11 +986,14 @@ export default class App extends React.Component<any, AppState> {
        onStyleChanged={this.onStyleChanged}
        isOpen={this.state.isOpen.export}
        onOpenToggle={this.toggleModal.bind(this, 'export')}
        fileHandle={this.state.fileHandle}
        onSetFileHandle={this.onSetFileHandle}
      />
      <ModalOpen
        isOpen={this.state.isOpen.open}
        onStyleOpen={this.openStyle}
        onOpenToggle={this.toggleModal.bind(this, 'open')}
        fileHandle={this.state.fileHandle}
      />
      <ModalSources
        mapStyle={this.state.mapStyle}
@@ -2,7 +2,15 @@ import React from 'react'
 import classnames from 'classnames'
 import {detect} from 'detect-browser';
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdLanguage} from 'react-icons/md'
+import {
  MdOpenInBrowser,
  MdSettings,
  MdLayers,
  MdHelpOutline,
  MdFindInPage,
  MdLanguage,
  MdSave
 } from 'react-icons/md'
 import pkgJson from '../../package.json'
 //@ts-ignore
 import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
@@ -216,8 +224,8 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
            <IconText>{t("Open")}</IconText>
          </ToolbarAction>
          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
-            <MdFileDownload />
+            <MdSave />
-            <IconText>{t("Export")}</IconText>
+            <IconText>{t("Save")}</IconText>
          </ToolbarAction>
          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
            <MdLayers />
@@ -230,7 +238,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
          <ToolbarSelect wdKey="nav:inspect">
            <MdFindInPage />
-            <label>{t("View")}
+            <IconText>{t("View")}
              <select
                className="maputnik-select"
                data-wd-key="maputnik-select"
@@ -254,12 +262,12 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                  })}
                </optgroup>
              </select>
-            </label>
+            </IconText>
          </ToolbarSelect>
          <ToolbarSelect wdKey="nav:language">
            <MdLanguage />
-            <label>{t("Language")}
+            <IconText>Language
              <select
                className="maputnik-select"
                data-wd-key="maputnik-lang-select"
@@ -274,7 +282,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                  );
                })}
              </select>
-            </label>
+            </IconText>
          </ToolbarSelect>
          <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
@@ -56,7 +56,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
      event.stopPropagation();
    }
-    event.preventDefault();
+    if (event.nativeEvent.target.nodeName !== "A") {
      event.preventDefault();
    }
  }
  render() {
@@ -18,6 +18,8 @@ type DocProps = {
    'sdk-support'?: {
      [key: string]: typeof headers
    }
    docUrl?: string,
    docUrlLinkText?: string
  }
 };
@@ -25,7 +27,7 @@ export default class Doc extends React.Component<DocProps> {
  render () {
    const {fieldSpec} = this.props;
-    const {doc, values} = fieldSpec;
+    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
    const sdkSupport = fieldSpec['sdk-support'];
    const renderValues = (
@@ -85,6 +87,11 @@ export default class Doc extends React.Component<DocProps> {
            </table>
          </div>
        }
        {docUrl && docUrlLinkText &&
          <div className="SpecDoc__learn-more">
            <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
          </div>
        }
      </>
    );
  }
@@ -15,7 +15,7 @@ function validate(url: string, t: TFunction): JSX.Element | undefined {
      const urlObj = new URL(url);
      return urlObj.protocol;
    }
-    catch (err) {
+    catch (_err) {
      return undefined;
    }
  };
@@ -318,14 +318,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
  }
 }
 // The next two lines have react-refresh/only-export-components disabled because they are
 // internal components that are not intended to be used outside of this file.
 // For some reason, the linter is not recognizing these components correctly.
 // When these components are migrated to functional components, the HOCs will no longer be needed
 // and the comments can be removed.
 // eslint-disable-next-line react-refresh/only-export-components
 const LayerListContainer = withTranslation()(LayerListContainerInternal);
 // eslint-disable-next-line react-refresh/only-export-components
 const LayerListContainerSortable = SortableContainer((props: LayerListContainerProps) => <LayerListContainer {...props} />)
 type LayerListProps = LayerListContainerProps & {
@@ -14,6 +14,8 @@ import '../libs/maplibre-rtl'
 import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
 import i18next from 'i18next'
 import { Protocol } from "pmtiles";
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
  ReactDOM.render(popup, mountNode);
@@ -67,9 +69,11 @@ type MapMaplibreGlInternalProps = {
 } & WithTranslation;
 type MapMaplibreGlState = {
-  map: Map | null
+  map: Map | null;
-  inspect: MaplibreInspect | null
+  inspect: MaplibreInspect | null;
-  zoom?: number
+  geocoder: MaplibreGeocoder | null;
  zoomControl: ZoomControl | null;
  zoom?: number;
 };
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -87,7 +91,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    this.state = {
      map: null,
      inspect: null,
      geocoder: null,
      zoomControl: null,
    }
    i18next.on('languageChanged', () => {
      this.forceUpdate();
    })
  }
@@ -95,7 +104,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    let should = false;
    try {
      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
-    } catch(e) {
+    } catch(_e) {
      // no biggie, carry on
    }
    return should;
@@ -125,6 +134,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
        this.state.inspect!.render();
      }, 500);
    }
  }
  componentDidMount() {
@@ -139,6 +149,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      localIdeographFontFamily: false
    } satisfies MapOptions;
    const protocol = new Protocol({metadata: true});
    MapLibreGl.addProtocol("pmtiles",protocol.tile);
    const map = new MapLibreGl.Map(mapOpts);
    const mapViewChange = () => {
@@ -152,9 +164,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
    map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
-    this.initGeocoder(map);
+    const geocoder = this.initGeocoder(map);
-    const zoomControl = new ZoomControl(this.props.t("Zoom:"));
+    const zoomControl = new ZoomControl();
    map.addControl(zoomControl, 'top-right');
    const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -189,6 +201,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      this.setState({
        map,
        inspect,
        geocoder,
        zoomControl,
        zoom: map.getZoom()
      });
    })
@@ -261,10 +275,13 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      maplibregl: MapLibreGl,
    });
    map.addControl(geocoder, 'top-left');
    return geocoder;
  }
  render() {
    const t = this.props.t;
    this.state.geocoder?.setPlaceholder(t("Search"));
    this.state.zoomControl?.setLabel(t("Zoom:"));
    return <div
      className="maputnik-map__map"
      role="region"
@@ -85,10 +85,11 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
  componentDidMount() {
    this.overlay = new Overlay({
      element: this.popupContainer!,
-      autoPan: true,
+      autoPan: {
-      autoPanAnimation: {
+        animation: {
-        duration: 250
+          duration: 250
-      }
+        }
      },
    });
    const map = new Map({
@@ -4,8 +4,8 @@ import {saveAs} from 'file-saver'
 import {version} from 'maplibre-gl/package.json'
 import {format} from '@maplibre/maplibre-gl-style-spec'
 import type {StyleSpecification} from 'maplibre-gl'
-import {MdFileDownload} from 'react-icons/md'
+import {MdMap, MdSave} from 'react-icons/md'
-import { WithTranslation, withTranslation } from 'react-i18next';
+import {WithTranslation, withTranslation} from 'react-i18next';
 import FieldString from './FieldString'
 import InputButton from './InputButton'
@@ -15,6 +15,7 @@ import fieldSpecAdditional from '../libs/field-spec-additional'
 const MAPLIBRE_GL_VERSION = version;
 const showSaveFilePickerAvailable = typeof window.showSaveFilePicker === "function";
 type ModalExportInternalProps = {
@@ -22,12 +23,14 @@ type ModalExportInternalProps = {
  onStyleChanged(...args: unknown[]): unknown
  isOpen: boolean
  onOpenToggle(...args: unknown[]): unknown
  onSetFileHandle(fileHandle: FileSystemFileHandle | null): unknown
  fileHandle: FileSystemFileHandle | null
 } & WithTranslation;
 class ModalExportInternal extends React.Component<ModalExportInternalProps> {
-  tokenizedStyle () {
+  tokenizedStyle() {
    return format(
      style.stripAccessTokens(
        style.replaceAccessTokens(this.props.mapStyle)
@@ -35,8 +38,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
    );
  }
-  exportName () {
+  exportName() {
-    if(this.props.mapStyle.name) {
+    if (this.props.mapStyle.name) {
      return Slugify(this.props.mapStyle.name, {
        replacement: '_',
        remove: /[*\-+~.()'"!:]/g,
@@ -47,7 +50,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
    }
  }
-  downloadHtml() {
+  createHtml() {
    const tokenStyle = this.tokenizedStyle();
    const htmlTitle = this.props.mapStyle.name || this.props.t("Map");
    const html = `<!DOCTYPE html>
@@ -81,11 +84,58 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
    saveAs(blob, exportName + ".html");
  }
-  downloadStyle() {
+  async saveStyle() {
    const tokenStyle = this.tokenizedStyle();
-    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+
-    const exportName = this.exportName();
+    // it is not guaranteed that the File System Access API is available on all
-    saveAs(blob, exportName + ".json");
+    // browsers. If the function is not available, a fallback behavior is used.
    if (!showSaveFilePickerAvailable) {
      const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
      const exportName = this.exportName();
      saveAs(blob, exportName + ".json");
      return;
    }
    let fileHandle = this.props.fileHandle;
    if (fileHandle == null) {
      fileHandle = await this.createFileHandle();
      this.props.onSetFileHandle(fileHandle)
      if (fileHandle == null) return;
    }
    const writable = await fileHandle.createWritable();
    await writable.write(tokenStyle);
    await writable.close();
    this.props.onOpenToggle();
  }
  async saveStyleAs() {
    const tokenStyle = this.tokenizedStyle();
    const fileHandle = await this.createFileHandle();
    this.props.onSetFileHandle(fileHandle)
    if (fileHandle == null) return;
    const writable = await fileHandle.createWritable();
    await writable.write(tokenStyle);
    await writable.close();
    this.props.onOpenToggle();
  }
  async createFileHandle(): Promise<FileSystemFileHandle | null> {
    const pickerOpts: SaveFilePickerOptions = {
      types: [
        {
          description: "json",
          accept: {"application/json": [".json"]},
        },
      ],
      suggestedName: this.exportName(),
    };
    const fileHandle = await window.showSaveFilePicker(pickerOpts) as FileSystemFileHandle;
    this.props.onSetFileHandle(fileHandle)
    return fileHandle;
  }
  changeMetadataProperty(property: string, value: any) {
@@ -107,14 +157,14 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
      data-wd-key="modal:export"
      isOpen={this.props.isOpen}
      onOpenToggle={this.props.onOpenToggle}
-      title={t('Export Style')}
+      title={t('Save Style')}
      className="maputnik-export-modal"
    >
      <section className="maputnik-modal-section">
-        <h1>{t("Download Style")}</h1>
+        <h1>{t("Save Style")}</h1>
        <p>
-          {t("Download a JSON style to your computer.")}
+          {t("Save the JSON style to your computer.")}
        </p>
        <div>
@@ -130,21 +180,29 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
            value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
            onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
          />
          <FieldString
            label={fsa.maputnik.stadia_access_token.label}
            fieldSpec={fsa.maputnik.stadia_access_token}
            value={(this.props.mapStyle.metadata || {} as any)['maputnik:stadia_access_token']}
            onChange={this.changeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
          />
        </div>
        <div className="maputnik-modal-export-buttons">
-          <InputButton
+          <InputButton onClick={this.saveStyle.bind(this)}>
-            onClick={this.downloadStyle.bind(this)}
+            <MdSave/>
-          >
+            {t("Save")}
            <MdFileDownload />
            {t("Download Style")}
          </InputButton>
          {showSaveFilePickerAvailable && (
            <InputButton onClick={this.saveStyleAs.bind(this)}>
              <MdSave/>
              {t("Save as")}
            </InputButton>
          )}
-          <InputButton
+          <InputButton onClick={this.createHtml.bind(this)}>
-            onClick={this.downloadHtml.bind(this)}
+            <MdMap/>
-          >
+            {t("Create HTML")}
            <MdFileDownload />
            {t("Download HTML")}
          </InputButton>
        </div>
      </section>
@@ -47,6 +47,7 @@ type ModalOpenInternalProps = {
  isOpen: boolean
  onOpenToggle(...args: unknown[]): unknown
  onStyleOpen(...args: unknown[]): unknown
  fileHandle: FileSystemFileHandle | null
 } & WithTranslation;
 type ModalOpenState = {
@@ -135,10 +136,44 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
    this.onStyleSelect(this.state.styleUrl);
  }
-  onUpload = (_: any, files: Result[]) => {
+  onOpenFile = async () => {
    this.clearError();
    const pickerOpts: OpenFilePickerOptions = {
      types: [
        {
          description: "json",
          accept: { "application/json": [".json"] },
        },
      ],
      multiple: false,
    };
    const [fileHandle] = await window.showOpenFilePicker(pickerOpts) as Array<FileSystemFileHandle>;
    const file = await fileHandle.getFile();
    const content = await file.text();
    let mapStyle;
    try {
      mapStyle = JSON.parse(content)
    } catch (err) {
      this.setState({
        error: (err as Error).toString()
      });
      return;
    }
    mapStyle = style.ensureStyleValidity(mapStyle)
    this.props.onStyleOpen(mapStyle, fileHandle);
    this.onOpenToggle();
    return file;
  }
  // it is not guaranteed that the File System Access API is available on all
  // browsers. If the function is not available, a fallback behavior is used.
  onFileChanged = async (_: any, files: Result[]) => {
    const [, file] = files[0];
    const reader = new FileReader();
    this.clearError();
    reader.readAsText(file, "UTF-8");
@@ -196,7 +231,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
      );
    }
-    return  (
+    return (
      <div>
        <Modal
          data-wd-key="modal:open"
@@ -206,11 +241,20 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
        >
          {errorElement}
          <section className="maputnik-modal-section">
-            <h1>{t("Upload Style")}</h1>
+            <h1>{t("Open local Style")}</h1>
-            <p>{t("Upload a JSON style from your computer.")}</p>
+            <p>{t("Open a local JSON style from your computer.")}</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex={-1} aria-label={t("Style file")}>
+            <div>
-              <InputButton className="maputnik-upload-button"><MdFileUpload /> {t("Upload")}</InputButton>
+              {typeof window.showOpenFilePicker === "function" ? (
-            </FileReaderInput>
+                <InputButton
                  className="maputnik-big-button"
                  onClick={this.onOpenFile}><MdFileUpload/> {t("Open Style")}
                </InputButton>
              ) : (
                <FileReaderInput onChange={this.onFileChanged} tabIndex={-1} aria-label={t("Open Style")}>
                  <InputButton className="maputnik-upload-button"><MdFileUpload /> {t("Open Style")}</InputButton>
                </FileReaderInput>
              )}
            </div>
          </section>
          <section className="maputnik-modal-section">
@@ -156,6 +156,14 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
        />
        <FieldString
          label={fsa.maputnik.stadia_access_token.label}
          fieldSpec={fsa.maputnik.stadia_access_token}
          data-wd-key="modal:settings.maputnik:stadia_access_token"
          value={metadata['maputnik:stadia_access_token']}
          onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
        />
        <FieldArray
          label={t("Center")}
          fieldSpec={latest.$root.center}
@@ -42,7 +42,7 @@ class PublicSource extends React.Component<PublicSourceProps> {
 function editorMode(source: SourceSpecification) {
  if(source.type === 'raster') {
-    if(source.tiles) return 'tilexyz_raster'
+    if(source.tiles) return 'tile_raster'
    return 'tilejson_raster'
  }
  if(source.type === 'raster-dem') {
@@ -50,7 +50,8 @@ function editorMode(source: SourceSpecification) {
    return 'tilejson_raster-dem'
  }
  if(source.type === 'vector') {
-    if(source.tiles) return 'tilexyz_vector'
+    if(source.tiles) return 'tile_vector'
    if(source.url && source.url.startsWith("pmtiles://")) return 'pmtiles_vector'
    return 'tilejson_vector'
  }
  if(source.type === 'geojson') {
@@ -129,6 +130,10 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
    const {protocol} = window.location;
    switch(mode) {
    case 'pmtiles_vector': return {
      type: 'vector',
      url: `${protocol}//localhost:3000/file.pmtiles`
    }
    case 'geojson_url': return {
      type: 'geojson',
      data: `${protocol}//localhost:3000/geojson.json`
@@ -142,21 +147,24 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
      type: 'vector',
      url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
    }
-    case 'tilexyz_vector': return {
+    case 'tile_vector': return {
      type: 'vector',
      tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
      minzoom: (source as VectorSourceSpecification).minzoom || 0,
-      maxzoom: (source as VectorSourceSpecification).maxzoom || 14
+      maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
      scheme: (source as VectorSourceSpecification).scheme || 'xyz'
    }
    case 'tilejson_raster': return {
      type: 'raster',
      url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
    }
-    case 'tilexyz_raster': return {
+    case 'tile_raster': return {
      type: 'raster',
-      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
      minzoom: (source as RasterSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
      scheme: (source as RasterSourceSpecification).scheme || 'xyz',
      tileSize: (source as RasterSourceSpecification).tileSize || 512,
    }
    case 'tilejson_raster-dem': return {
      type: 'raster-dem',
@@ -164,9 +172,10 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
    }
    case 'tilexyz_raster-dem': return {
      type: 'raster-dem',
-      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
      minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
      tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
    }
    case 'image': return {
      type: 'image',
@@ -222,6 +231,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
        fieldSpec={{doc: t("Unique ID that identifies the source and is used in the layer to reference the source.")}}
        value={this.state.sourceId}
        onChange={(v: string) => this.setState({ sourceId: v})}
        data-wd-key="modal:sources.add.source_id"
      />
      <FieldSelect
        label={t("Source Type")}
@@ -230,16 +240,18 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
          ['geojson_json', t('GeoJSON (JSON)')],
          ['geojson_url', t('GeoJSON (URL)')],
          ['tilejson_vector', t('Vector (TileJSON URL)')],
-          ['tilexyz_vector', t('Vector (XYZ URLs)')],
+          ['tile_vector', t('Vector (Tile URLs)')],
          ['tilejson_raster', t('Raster (TileJSON URL)')],
-          ['tilexyz_raster', t('Raster (XYZ URL)')],
+          ['tile_raster', t('Raster (Tile URLs)')],
          ['tilejson_raster-dem', t('Raster DEM (TileJSON URL)')],
          ['tilexyz_raster-dem', t('Raster DEM (XYZ URLs)')],
          ['pmtiles_vector', t('Vector (PMTiles)')],
          ['image', t('Image')],
          ['video', t('Video')],
        ]}
        onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
        value={this.state.mode as string}
        data-wd-key="modal:sources.add.source_type"
      />
      <ModalSourcesTypeEditor
        onChange={this.onChangeSource}
@@ -249,6 +261,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
      <InputButton
        className="maputnik-add-source-button"
        onClick={this.onAdd}
        data-wd-key="modal:sources.add.add_source"
      >
        {t("Add Source")}
      </InputButton>
@@ -11,7 +11,7 @@ import FieldCheckbox from './FieldCheckbox'
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next'
-export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
+export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
 type TileJSONSourceEditorProps = {
  source: {
@@ -45,6 +45,7 @@ type TileURLSourceEditorProps = {
    tiles: string[]
    minzoom: number
    maxzoom: number
    scheme: 'xyz' | 'tms'
  }
  onChange(...args: unknown[]): unknown
  children?: React.ReactNode
@@ -73,6 +74,20 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
    const t = this.props.t;
    return <div>
      {this.renderTileUrls()}
      <FieldSelect
        label={t("Scheme Type")}
        fieldSpec={latest.source_vector.scheme}
        options={[
          ['xyz', 'xyz (Slippy map tilenames scheme)'],
          ['tms', 'tms (OSGeo spec scheme)'],
        ]}
        onChange={scheme => this.props.onChange({
          ...this.props.source,
          scheme
        })}
        value={this.props.source.scheme}
        data-wd-key="modal:sources.add.scheme_type"
      />
      <FieldNumber
        label={t("Min Zoom")}
        fieldSpec={latest.source_vector.minzoom}
@@ -271,6 +286,33 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
  }
 }
 type PMTilesSourceEditorProps = {
  source: {
    url: string
  }
  onChange(...args: unknown[]): unknown
  children?: React.ReactNode
 } & WithTranslation;
 class PMTilesSourceEditor extends React.Component<PMTilesSourceEditorProps> {
  render() {
    const t = this.props.t;
    return <div>
      <FieldUrl
        label={t("PMTiles URL")}
        fieldSpec={latest.source_vector.url}
        value={this.props.source.url}
        data-wd-key="modal:sources.add.source_url"
        onChange={(url: string) => this.props.onChange({
          ...this.props.source,
          url: url.startsWith("pmtiles://") ? url : `pmtiles://${url}`
        })}
      />
      {this.props.children}
    </div>
  }
 }
 type ModalSourcesTypeEditorInternalProps = {
  mode: EditorMode
  source: any
@@ -291,11 +333,32 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
    case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
    case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
    case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
    case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
      <FieldNumber
        label={t("Tile Size")}
        fieldSpec={latest.source_raster.tileSize}
        onChange={tileSize => this.props.onChange({
          ...this.props.source,
          tileSize: tileSize
        })}
        value={this.props.source.tileSize || latest.source_raster.tileSize.default}
        data-wd-key="modal:sources.add.tile_size"
      />
    </TileURLSourceEditor>
    case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
    case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
      <FieldNumber
        label={t("Tile Size")}
        fieldSpec={latest.source_raster_dem.tileSize}
        onChange={tileSize => this.props.onChange({
          ...this.props.source,
          tileSize: tileSize
        })}
        value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
        data-wd-key="modal:sources.add.tile_size"
      />
      <FieldSelect
        label={t("Encoding")}
        fieldSpec={latest.source_raster_dem.encoding}
@@ -307,6 +370,7 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
        value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
      />
    </TileURLSourceEditor>
    case 'pmtiles_vector': return <PMTilesSourceEditor {...commonProps} />
    case 'image': return <ImageSourceEditor {...commonProps} />
    case 'video': return <VideoSourceEditor {...commonProps} />
    default: return null
@@ -1,7 +1,7 @@
-@import '../styles/vars';
+@use '../styles/vars';
 .SmallError {
  color: #E57373;
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
-  margin-top: $margin-2
+  margin-top: vars.$margin-2
 }
@@ -5,6 +5,12 @@
    "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
  },
  {
    "id": "americana",
    "title": "Americana",
    "url": "https://americanamap.org/style.json",
    "thumbnail": "https://github.com/maplibre/maputnik/assets/649392/23fa75ad-63e6-43f5-8837-03cdb0428bac"
  },
  {
    "id": "dark-matter",
    "title": "Dark Matter",
@@ -13,7 +19,7 @@
  },
  {
    "id": "maptiler-basic-gl-style",
-    "title": "Maptiler Basic",
+    "title": "MapTiler Basic",
    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.10/style.json",
    "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
  },
@@ -59,12 +65,24 @@
    "url": "https://maputnik.github.io/osm-liberty/style.json",
    "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
  },
  {
    "id": "osm-openmaptiles",
    "title": "OSM OpenMapTiles",
    "url": "https://api.maptiler.com/maps/openstreetmap/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
    "thumbnail": "https://openmaptiles.org/img/styles/openmaptiles.png"
  },
  {
    "id": "positron",
    "title": "Positron",
    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.9/style.json",
    "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
  },
  {
    "id": "protomaps-light",
    "title": "Protomaps Light",
    "url": "https://api.protomaps.com/styles/v4/light/en.json?key=d828297496b11844",
    "thumbnail": "https://github.com/user-attachments/assets/911f9765-4a7d-4736-9ec0-f2d4c90ae587"
  },
  {
    "id": "stadia-outdoors",
    "title": "Stadia Outdoors",
@@ -4,9 +4,12 @@ import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 export const supportedLanguages = {
  "de": "Deutsch",
  "en": "English",
-  "ja": "日本語",
+  "fr": "Français",
  "he": "עברית",
  "it": "Italiano",
  "ja": "日本語",
  "zh": "简体中文"
 } as const;
@@ -1,5 +1,4 @@
-// @ts-ignore - this is a fork of jsonlint
+import {parse} from '@prantlf/jsonlint';
 import jsonlint from 'jsonlint';
 import CodeMirror, { MarkerRange } from 'codemirror';
 import jsonToAst from 'json-to-ast';
 import {expression, validateStyleMin} from '@maplibre/maplibre-gl-style-spec';
@@ -15,49 +14,45 @@ CodeMirror.defineMode("mgl", (config, parserConfig) => {
  );
 });
-CodeMirror.registerHelper("lint", "json", (text: string) => {
+
 function tryToParse(text: string) {
  const found: MarkerRangeWithMessage[] = [];
  // NOTE: This was modified from the original to remove the global, also the
  // old jsonlint API was 'jsonlint.parseError' its now
  // 'jsonlint.parser.parseError'
  (jsonlint as any).parser.parseError = (str: string, hash: any) => {
    const loc = hash.loc;
    found.push({
      from:    CodeMirror.Pos(loc.first_line - 1, loc.first_column),
      to:      CodeMirror.Pos(loc.last_line  - 1, loc.last_column),
      message: str
    });
  };
  try {
-    jsonlint.parse(text);
+    parse(text);
  }
-  catch(e) {
+  catch(err: any) {
-    // Do nothing we catch the error above
+
    const errorMatch = err.toString().match(/line (\d+), column (\d+)/);
    if (errorMatch) {
      const loc = {
        first_line: parseInt(errorMatch[1], 10),
        first_column: parseInt(errorMatch[2], 10),
        last_line: parseInt(errorMatch[1], 10),
        last_column: parseInt(errorMatch[2], 10)
      };
      // const loc = hash.loc;
      found.push({
        from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
        to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
        message: err
      });
    }
  }
  return found;
 }
 CodeMirror.registerHelper("lint", "json", (text: string) => {
  return tryToParse(text);
 });
 CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) => {
  const found: MarkerRangeWithMessage[] = [];
  const {parser} = jsonlint as any;
  const {context} = opts;
-  parser.parseError = (str: string, hash: any) => {
+  const found: MarkerRangeWithMessage[] = tryToParse(text);
-    const loc = hash.loc;
+
-    found.push({
+  const {context} = opts;
      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
      message: str
    });
  };
  try {
    parser.parse(text);
  }
  catch (e) {
    // ignore errors
  }
  if (found.length > 0) {
    // JSON invalid so don't go any further
@@ -4,15 +4,25 @@ const spec = (t: TFunction) => ({
  maputnik: {
    maptiler_access_token: {
      label: t("MapTiler Access Token"),
-      doc: t("Public access token for MapTiler Cloud.")
+      doc: t("Public access token for MapTiler Cloud."),
      docUrl: "https://docs.maptiler.com/cloud/api/authentication-key/",
      docUrlLinkText: t("Learn More")
    },
    thunderforest_access_token: {
      label: t("Thunderforest Access Token"),
-      doc: t("Public access token for Thunderforest services.")
+      doc: t("Public access token for Thunderforest services."),
      docUrl: "https://www.thunderforest.com/docs/apikeys/",
      docUrlLinkText: t("Learn More")
    },
    stadia_access_token: {
      label: t("Stadia Maps API Key"),
      doc: t("API key for Stadia Maps."),
      docUrl: "https://docs.stadiamaps.com/authentication/",
      docUrlLinkText: t("Learn More")
    },
    style_renderer: {
      label: t("Style Renderer"),
-      doc: t("Choose the default Maputnik renderer for this style."),
+      doc: t("Choose the default Maputnik renderer for this style.")
    },
  }
 })
@@ -5,14 +5,17 @@ function loadJSON(url: string, defaultValue: any, cb: (...args: any[]) => void)
    mode: 'cors',
    credentials: "same-origin"
  })
-    .then(function(response) {
+    .then((response) => {
      if (!response.ok) {
        throw new Error('Failed to load metadata for ' + url);
      }
      return response.json();
    })
-    .then(function(body) {
+    .then((body) => {
      cb(body)
    })
-    .catch(function() {
+    .catch(() => {
-      console.warn('Can not metadata for ' + url)
+      console.warn('Can not load metadata for ' + url + ', using default value ' + defaultValue);
      cb(defaultValue)
    })
 }
@@ -55,10 +55,6 @@ function indexOfLayer(layers: LayerSpecification[], layerId: string) {
 }
 function getAccessToken(sourceName: string, mapStyle: StyleSpecification, opts: {allowFallback?: boolean}) {
  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
    sourceName = "thunderforest"
  }
  const metadata = mapStyle.metadata || {} as any;
  let accessToken = metadata[`maputnik:${sourceName}_access_token`]
@@ -74,18 +70,38 @@ function replaceSourceAccessToken(mapStyle: StyleSpecification, sourceName: stri
  if(!source) return mapStyle
  if(!("url" in source) || !source.url) return mapStyle
-  const accessToken = getAccessToken(sourceName, mapStyle, opts)
+  let authSourceName = sourceName
  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
    authSourceName = "thunderforest"
  }
  else if (("url" in source) && source.url?.match(/\.stadiamaps\.com/)) {
    // The code currently usually assumes openmaptiles == MapTiler,
    // so we need to check the source URL.
    authSourceName = "stadia"
  }
  const accessToken = getAccessToken(authSourceName, mapStyle, opts)
  if(!accessToken) {
    // Early exit.
    return mapStyle;
  }
  let sourceUrl: string
  if (authSourceName == "stadia") {
    // Stadia Maps does not always require an API key,
    // so there is no placeholder in our styles.
    // We append it at the end of the URL when exporting if necessary.
    sourceUrl = `${source.url}?api_key=${accessToken}`
  } else {
    sourceUrl = source.url.replace('{key}', accessToken)
  }
  const changedSources = {
    ...mapStyle.sources,
    [sourceName]: {
      ...source,
-      url: source.url.replace('{key}', accessToken)
+      url: sourceUrl
    }
  }
  const changedStyle = {
@@ -120,6 +136,8 @@ function stripAccessTokens(mapStyle: StyleSpecification) {
    ...mapStyle.metadata as any
  };
  delete changedMetadata['maputnik:openmaptiles_access_token'];
  delete changedMetadata['maputnik:thunderforest_access_token'];
  delete changedMetadata['maputnik:stadia_access_token'];
  return {
    ...mapStyle,
    metadata: changedMetadata
@@ -1,4 +1,3 @@
 // @ts-ignore
 import style from './style'
 export function initialStyleUrl() {
@@ -5,18 +5,14 @@ export default class ZoomControl {
  _container: HTMLDivElement | undefined = undefined;
  _textEl: HTMLSpanElement | null = null;
-  constructor(public label: string) {}
+  constructor() {}
  onAdd(map: Map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
    this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
-    this._container.innerHTML = `
+    this.setLabel("Zoom:");
      ${this.label} <span></span>
    `;
    this._textEl = this._container.querySelector("span");
    this.addEventListeners();
    return this._container;
@@ -26,6 +22,14 @@ export default class ZoomControl {
    this._textEl!.innerHTML = this._map!.getZoom().toFixed(2);
  }
  setLabel(label: string) {
    this._container!.innerHTML = `
      ${label} <span></span>
    `;
    this._textEl = this._container!.querySelector("span");
    this.updateZoomLevel();
  }
  addEventListeners (){
    this._map!.on('render', () => this.updateZoomLevel());
    this._map!.on('zoomIn', () => this.updateZoomLevel());
@@ -0,0 +1,61 @@
 ## Internationalization
 The process of internationalization is pretty straight forward for Maputnik.
 ## Add a new language
 #### 1. Edit configuration
 In order to add a new translation you'll need to add it to the configuration files. Please put it in alphabetical order.
 - Open [/i18next-parser.config.ts](/i18next-parser.config.ts) and add the ISO Code of your language to the `locales` array.
 - Now, open [/src/i18n.ts](/src/i18n.ts) and add the ISO Code and localized name to the supported languages.
 #### 2. Add the localized strings
 Refresh the localization to generate a new directory under `/src/locales/` for your new language.
 ```bash
 npm install
 npm run i18n:refresh
 ```
 Replace every `__STRING_NOT_TRANSLATED__` value in the newly generated `translation.json` file with the according translation.
 Make sure all the keys are translated.
 #### 3. Test your new locale
 Finally, test your language locally by starting a local instance of Maputnik.
 ```bash
 npm run start
 ```
 Consider adding your name as a helping person for the translation of new features.
 ## Add localization for a new feature
 If you happen to add a feature which needs some text to be translated, update the translation files.
 After running, check your working copy for files and add/correct as needed.
 ```bash
 npm run i18n:refresh
 ```
 The following users can help you with the relevant languages:
 | ISO Code | Language           | User                                       |
 |----------|--------------------|--------------------------------------------|
 | de       | German             | [@josxha](https://github.com/josxha)       | 
 | en       | English            | [@HarelM](https://github.com/HarelM)       | 
 | fr       | French             | [@lhapaipai](https://github.com/lhapaipai) | 
 | hr       | Hebrew             | [@HarelM](https://github.com/HarelM)       | 
 | it       | Italian            | [@napo](https://github.com/napo)           |
 | ja       | Japanese           | [@keichan34](https://github.com/keichan34) | 
 | zh       | Simplified Chinese | [@jieme](https://github.com/jieme)         | 
 You can test the UI in different languages using the dropdown in the top menu
 Note that Maputnik automatically localize based on browser language settings and stores this language in local storage.
 You can use incognito mode to check a first time usage.
@@ -0,0 +1,189 @@
 {
  "Input value": "Eingabewert",
  "Data value": "Datenwert",
  "Output value": "Ausgabewert",
  "Function": "Funktion",
  "Select a type of data scale (default is 'categorical').": "Wähle eine Art Datenskala (Standard ist 'kategorisch').",
  "Base": "Basis",
  "Input a data property to base styles off of.": "Gib eine Dateneigenschaft ein, um Stile darauf zu basieren.",
  "Default": "Standard",
  "Stops": "Stopps",
  "Zoom": "Zoom",
  "Add stop": "Stopp hinzufügen",
  "Convert to expression": "In Ausdruck umwandeln",
  "Remove zoom level from stop": "Zoom-Stufe vom Stopp entfernen",
  "Revert from expression": "Vom Ausdruck zurücksetzen",
  "Delete expression": "Ausdruck löschen",
  "Convert property into a zoom function": "Eigenschaft in eine Zoom-Funktion umwandeln",
  "Convert property to data function": "Eigenschaft in eine Datenfunktion umwandeln",
  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Ebene <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
  "switch to layer": "zur Ebene wechseln",
  "Map": "Karte",
  "Inspect": "Untersuchen",
  "Deuteranopia filter": "Deuteranopie-Filter",
  "Protanopia filter": "Protanopie-Filter",
  "Tritanopia filter": "Tritanopie-Filter",
  "Achromatopsia filter": "Achromatopsie-Filter",
  "Layers list": "Ebenenliste",
  "Layer editor": "Ebenen-Editor",
  "Map view": "Kartenansicht",
  "Maputnik on GitHub": "Maputnik auf GitHub",
  "Open": "Öffnen",
  "Save": "Speichern",
  "Data Sources": "Datenquellen",
  "Style Settings": "Stileinstellungen",
  "View": "Ansicht",
  "Color accessibility": "Farbzugänglichkeit",
  "Help": "Hilfe",
  "Comments for the current layer. This is non-standard and not in the spec.": "Kommentare zur aktuellen Ebene. Das ist nicht standardmäßig und nicht in der Spezifikation.",
  "Comments": "Kommentare",
  "Comment...": "Dein Kommentar...",
  "Max Zoom": "Max-Zoom",
  "Min Zoom": "Min-Zoom",
  "Source": "Quelle",
  "Source Layer": "Quellenebene",
  "Type": "Typ",
  "Nested filters are not supported.": "Verschachtelte Filter werden nicht unterstützt.",
  "Upgrade to expression": "Aufrüsten zu Ausdruck",
  "Filter": "Filter",
  "every filter matches": "alle Filter passen",
  "no filter matches": "kein Filter passt",
  "any filter matches": "irgendein Filter passt",
  "Add filter": "Filter hinzufügen",
  "You've entered an old style filter.": "Du hast einen alten Filter-Stil eingegeben.",
  "Switch to filter editor.": "Zum Filter-Editor wechseln.",
  "Delete filter block": "Filterblock löschen",
  "Add value": "Wert hinzufügen",
  "Remove array item": "Element aus Array entfernen",
  "Press <1>ESC</1> to lose focus": "Drück <1>ESC</1>, um den Fokus zu verlieren",
  "Must provide protocol: <1>https://</1>": "Protokoll erforderlich: <1>https://</1>",
  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protokoll erforderlich: <1>http://</1> oder <3>https://</3>",
  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "Die CORS-Politik erlaubt es nicht, Ressourcen über http von https zu laden, benutze eine <1>https://</1>-Domain",
  "Layer": "Ebene",
  "JSON Editor": "JSON-Editor",
  "Delete": "Löschen",
  "Duplicate": "Duplizieren",
  "Show": "Anzeigen",
  "Hide": "Verstecken",
  "Move layer up": "Ebene nach oben verschieben",
  "Move layer down": "Ebene nach unten verschieben",
  "Layer: {{layerId}}": "Ebene: {{layerId}}",
  "Layers": "Ebenen",
  "Collapse": "Einklappen",
  "Expand": "Ausklappen",
  "Add Layer": "Ebene hinzufügen",
  "Search": "Suche",
  "Zoom:": "Zoom:",
  "Close popup": "Popup schließen",
  "cursor:": "Mauszeiger:",
  "center:": "Zentrum:",
  "rotation:": "Rotation:",
  "Close modal": "Modale Fenster schließen",
  "Debug": "Debug",
  "Options": "Optionen",
  "Save Style": "Stil Speichern",
  "Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
  "Save as": "Speichern unter",
  "Create HTML": "HTML erstellen",
  "Cancel": "Abbrechen",
  "Open Style": "Stil öffnen",
  "Open local Style": "Lokalen Stil öffnen",
  "Open a local JSON style from your computer.": "Öffne einen lokalen JSON Stil von deinem Computer.",
  "Load from URL": "Von URL laden",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Von einer URL laden. Beachte, dass die URL <1>CORS aktiviert</1> haben muss.",
  "Style URL": "Stil-URL",
  "Enter URL...": "URL eingeben...",
  "Gallery Styles": "Galerie-Stile",
  "Open one of the publicly available styles to start from.": "Öffne einen der öffentlich verfügbaren Stile, um zu starten.",
  "Loading style": "Stil wird geladen",
  "Loading: {{requestUrl}}": "Lädt: {{requestUrl}}",
  "Name": "Name",
  "Owner": "Besitzer",
  "Owner ID of the style. Used by Mapbox or future style APIs.": "Besitzer-ID des Stils. Wird von Mapbox oder zukünftigen Style-APIs verwendet.",
  "Sprite URL": "Sprite-URL",
  "Glyphs URL": "Glyphen-URL",
  "Center": "Mittelpunkt",
  "Bearing": "Ausrichtung",
  "Pitch": "Neigung",
  "Light anchor": "Lichtanker",
  "Light color": "Lichtfarbe",
  "Light intensity": "Lichtintensität",
  "Light position": "Lichtposition",
  "Terrain source": "Geländequelle",
  "Terrain exaggeration": "Gelände-Übertreibung",
  "Transition delay": "Übergangsverzögerung",
  "Transition duration": "Übergangsdauer",
  "Open Layers (experimental)": "Ebenen öffnen (experimentell)",
  "Shortcuts menu": "Shortcuts-Menü",
  "Open modal": "Modale Fenster öffnen",
  "Export modal": "Modale Fenster exportieren",
  "Data Sources modal": "Modale Datenquellen",
  "Style Settings modal": "Modale Stileinstellungen",
  "Toggle inspect": "Inspektion umschalten",
  "Focus map": "Karte fokussieren",
  "Debug modal": "Debug (modale Fenster)",
  "Increase the zoom level by 1.": "Zoom-Stufe um 1 erhöhen.",
  "Increase the zoom level by 2.": "Zoom-Stufe um 2 erhöhen.",
  "Decrease the zoom level by 1.": "Zoom-Stufe um 1 verringern.",
  "Decrease the zoom level by 2.": "Zoom-Stufe um 2 verringern.",
  "Pan up by 100 pixels.": "Um 100 Pixel nach oben schwenken.",
  "Pan down by 100 pixels.": "Um 100 Pixel nach unten schwenken.",
  "Pan left by 100 pixels.": "Um 100 Pixel nach links schwenken.",
  "Pan right by 100 pixels.": "Um 100 Pixel nach rechts schwenken.",
  "Increase the rotation by 15 degrees.": "Rotation um 15 Grad erhöhen.",
  "Decrease the rotation by 15 degrees.": "Rotation um 15 Grad verringern.",
  "Increase the pitch by 10 degrees.": "Neigung um 10 Grad erhöhen.",
  "Decrease the pitch by 10 degrees.": "Neigung um 10 Grad verringern.",
  "Shortcuts": "Shortcuts",
  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "Drück <1>ESC</1>, um den Fokus von aktiven Elementen zu verlieren, und dann drück eine der folgenden Tasten:",
  "If the Map is in focused you can use the following shortcuts": "Wenn die Karte fokussiert ist, kannst du die folgenden Shortcuts benutzen",
  "Remove '{{sourceId}}' source": "Quelle '{{sourceId}}' entfernen",
  "Source ID": "Quellen-ID",
  "Unique ID that identifies the source and is used in the layer to reference the source.": "Eindeutige ID, die die Quelle identifiziert und in der Ebene verwendet wird, um auf die Quelle zu verweisen.",
  "Source Type": "Quellentyp",
  "GeoJSON (JSON)": "GeoJSON (JSON)",
  "GeoJSON (URL)": "GeoJSON (URL)",
  "Vector (TileJSON URL)": "Vektor (TileJSON URL)",
  "Vector (Tile URLs)": "Vektor (Tile URLs)",
  "Raster (TileJSON URL)": "Raster (TileJSON URL)",
  "Raster (Tile URLs)": "Raster (Tile URLs)",
  "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
  "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
  "Vector (PMTiles)": "Vektor (PMTiles)",
  "Image": "Bild",
  "Video": "Video",
  "Add Source": "Quelle hinzufügen",
  "Sources": "Quellen",
  "Active Sources": "Aktive Quellen",
  "Choose Public Source": "Öffentliche Quelle auswählen",
  "Add one of the publicly available sources to your style.": "Füge eine der öffentlich verfügbaren Quellen zu deinem Stil hinzu.",
  "Add New Source": "Neue Quelle hinzufügen",
  "Add a new source to your style. You can only choose the source type and id at creation time!": "Füge eine neue Quelle zu deinem Stil hinzu. Du kannst den Quellentyp und die ID nur bei der Erstellung auswählen!",
  "TileJSON URL": "TileJSON URL",
  "Tile URL": "Kachel-URL",
  "Scheme Type": "Schema-Typ",
  "Coord top left": "Koordinate oben links",
  "Coord top right": "Koordinate oben rechts",
  "Coord bottom right": "Koordinate unten rechts",
  "Coord bottom left": "Koordinate unten links",
  "Image URL": "Bild-URL",
  "Video URL": "Video-URL",
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "Cluster",
  "PMTiles URL": "PMTiles URL",
  "Tile Size": "Kachelgröße",
  "Encoding": "Kodierung",
  "Error:": "Fehler:",
  "MapTiler Access Token": "MapTiler Zugriffstoken",
  "Public access token for MapTiler Cloud.": "Öffentlicher Zugriffstoken für MapTiler Cloud.",
  "Learn More": "Mehr erfahren",
  "Thunderforest Access Token": "Thunderforest Zugriffstoken",
  "Public access token for Thunderforest services.": "Öffentlicher Zugriffstoken für Thunderforest-Dienste.",
  "Stadia Maps API Key": "Stadia Maps API-Schlüssel",
  "API key for Stadia Maps.": "API-Schlüssel für Stadia Maps.",
  "Style Renderer": "Stil-Renderer",
  "Choose the default Maputnik renderer for this style.": "Wähle den Standard-Renderer für diesen Stil aus.",
  "Language": "Sprache",
  "Press <1>ESC</1> to lose focus of any input box": "Drück <1>ESC</1>, um den Fokus von jedem Eingabefeld zu verlieren"
 }
@@ -0,0 +1,196 @@
 {
  "Input value": "Valeur d'entrée",
  "Data value": "Valeur des données",
  "Output value": "Valeur de sortie",
  "Function": "Fonction",
  "Select a type of data scale (default is 'categorical').": "Sélectionnez un type d'échelle de données (par défaut 'categorical').",
  "Base": "Base",
  "Input a data property to base styles off of.": "Entrez une propriété de données pour baser les styles.",
  "Default": "Par défaut",
  "Stops": "Arrêts",
  "Zoom": "Zoom",
  "Add stop": "Ajouter un arrêt",
  "Convert to expression": "Convertir en expression",
  "Remove zoom level from stop": "Supprimer le niveau de zoom de l'arrêt",
  "Revert from expression": "Annuler l'expression",
  "Delete expression": "Supprimer l'expression",
  "Convert property into a zoom function": "Convertir la propriété en fonction de zoom",
  "Convert property to data function": "Convertir la propriété en fonction de données",
  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Calque <1>{formatLayerId(layerId)}</1> : {parsed.data.message}",
  "switch to layer": "changer de calque",
  "Map": "Carte",
  "Inspect": "Inspecter",
  "Deuteranopia filter": "Filtre Deutéranopie",
  "Protanopia filter": "Filtre Protanopie",
  "Tritanopia filter": "Filtre Tritanopie",
  "Achromatopsia filter": "Filtre Achromatopsie",
  "Layers list": "Liste des calques",
  "Layer editor": "Éditeur de calque",
  "Map view": "Vue de la carte",
  "Maputnik on GitHub": "Maputnik sur GitHub",
  "Open": "Ouvrir",
  "Save": "Enregistrer",
  "Data Sources": "Sources de données",
  "Style Settings": "Paramètres du style",
  "View": "Vue",
  "Color accessibility": "Accessibilité des couleurs",
  "Help": "Aide",
  "Comments for the current layer. This is non-standard and not in the spec.": "Commentaires pour le calque actuel. Ceci n'est pas standard et n'est pas dans la spécification.",
  "Comments": "Commentaires",
  "Comment...": "Votre commentaire...",
  "Max Zoom": "Zoom max",
  "Min Zoom": "Zoom min",
  "Source": "Source",
  "Source Layer": "Calque Source",
  "Type": "Type",
  "Nested filters are not supported.": "Les filtres imbriqués ne sont pas pris en charge.",
  "Upgrade to expression": "Mettre à niveau vers une expression",
  "Filter": "Filtre",
  "every filter matches": "tous les filtres correspondent",
  "no filter matches": "aucun filtre ne correspond",
  "any filter matches": "l'un des filtres correspond",
  "Add filter": "Ajouter un filtre",
  "You've entered an old style filter.": "Vous avez entré un ancien style de filtre.",
  "Switch to filter editor.": "Passer à l'éditeur de filtre.",
  "Delete filter block": "Supprimer le bloc de filtre",
  "Add value": "Ajouter une valeur",
  "Remove array item": "Supprimer l'élément de tableau",
  "Press <1>ESC</1> to lose focus": "Appuyez sur <1>Échap</1> pour perdre le focus",
  "Must provide protocol: <1>https://</1>": "Protocole requis : <1>https://</1>",
  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protocole requis : <1>http://</1> ou <3>https://</3>",
  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "La politique CORS ne permet pas de récupérer des ressources servies sur http depuis https, utilisez un protocole <1>https://</1>",
  "Layer": "Calque",
  "JSON Editor": "Éditeur JSON",
  "Delete": "Supprimer",
  "Duplicate": "Dupliquer",
  "Show": "Afficher",
  "Hide": "Cacher",
  "Move layer up": "Monter le calque",
  "Move layer down": "Descendre le calque",
  "Layer: {{layerId}}": "Calque : {{layerId}}",
  "Layers": "Calques",
  "Collapse": "Réduire",
  "Expand": "Développer",
  "Add Layer": "Ajouter un calque",
  "Search": "Recherche",
  "Zoom:": "Zoom :",
  "Close popup": "Fermer la fenêtre",
  "cursor:": "curseur :",
  "center:": "centre :",
  "rotation:": "rotation :",
  "Close modal": "Fermer la fenêtre modale",
  "Debug": "Déboguer",
  "Options": "Options",
  "Save Style": "Enregistrer le style",
  "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
  "Save as": "Enregistrer sous",
  "Create HTML": "Créer le HTML",
  "Cancel": "Annuler",
  "Open Style": "Ouvrir le style",
  "Open local Style": "Ouvrir un style local",
  "Open a local JSON style from your computer.": "Ouvrir un style JSON local depuis votre ordinateur.",
  "Load from URL": "Charger depuis une URL",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Charger depuis une URL. Notez que l'URL doit avoir les <1>CORS activés</1>.",
  "Style URL": "URL du style",
  "Enter URL...": "Entrez l'URL...",
  "Gallery Styles": "Styles de la galerie",
  "Open one of the publicly available styles to start from.": "Ouvrez l'un des styles publics disponibles pour commencer.",
  "Loading style": "Chargement du style",
  "Loading: {{requestUrl}}": "Chargement : {{requestUrl}}",
  "Name": "Nom",
  "Owner": "Propriétaire",
  "Owner ID of the style. Used by Mapbox or future style APIs.": "ID du propriétaire du style. Utilisé par Mapbox ou les futures API de style.",
  "Sprite URL": "URL du sprite",
  "Glyphs URL": "URL des glyphes",
  "Center": "Centre",
  "Bearing": "Orientation",
  "Pitch": "Inclinaison",
  "Light anchor": "Ancrage de la lumière",
  "Light color": "Couleur de la lumière",
  "Light intensity": "Intensité de la lumière",
  "Light position": "Position de la lumière",
  "Terrain source": "Source du terrain",
  "Terrain exaggeration": "Exagération du terrain",
  "Transition delay": "Délai de transition",
  "Transition duration": "Durée de transition",
  "Open Layers (experimental)": "Open Layers (expérimental)",
  "Shortcuts menu": "Menu des raccourcis",
  "Open modal": "Ouvrir (modale)",
  "Export modal": "Exporter (modale)",
  "Data Sources modal": "Sources de données (modale)",
  "Style Settings modal": "Paramètres de style (modale)",
  "Toggle inspect": "Activer/désactiver l'inspection",
  "Focus map": "Focus sur la carte",
  "Debug modal": "Déboguer (modale)",
  "Increase the zoom level by 1.": "Augmenter le niveau de zoom de 1.",
  "Increase the zoom level by 2.": "Augmenter le niveau de zoom de 2.",
  "Decrease the zoom level by 1.": "Diminuer le niveau de zoom de 1.",
  "Decrease the zoom level by 2.": "Diminuer le niveau de zoom de 2.",
  "Pan up by 100 pixels.": "Déplacer vers le haut de 100 pixels.",
  "Pan down by 100 pixels.": "Déplacer vers le bas de 100 pixels.",
  "Pan left by 100 pixels.": "Déplacer vers la gauche de 100 pixels.",
  "Pan right by 100 pixels.": "Déplacer vers la droite de 100 pixels.",
  "Increase the rotation by 15 degrees.": "Augmenter l'angle de rotation de 15 degrés.",
  "Decrease the rotation by 15 degrees.": "Diminuer l'angle de rotation de 15 degrés.",
  "Increase the pitch by 10 degrees.": "Augmenter l'inclinaison de 10 degrés.",
  "Decrease the pitch by 10 degrees.": "Diminuer l'inclinaison de 10 degrés.",
  "Shortcuts": "Raccourcis",
  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "Appuyez sur <1>Échap</1> pour perdre le focus des éléments actifs, puis appuyez sur l'un des éléments suivants :",
  "If the Map is in focused you can use the following shortcuts": "Si la carte a le focus, vous pouvez utiliser les raccourcis suivants",
  "Remove '{{sourceId}}' source": "Supprimer la source '{{sourceId}}'",
  "Source ID": "ID de la source",
  "Unique ID that identifies the source and is used in the layer to reference the source.": "ID unique qui identifie la source et est utilisé dans le calque pour référencer la source.",
  "Source Type": "Type de source",
  "GeoJSON (JSON)": "GeoJSON (JSON)",
  "GeoJSON (URL)": "GeoJSON (URL)",
  "Vector (TileJSON URL)": "Vecteur (URL TileJSON)",
  "Vector (Tile URLs)": "Vecteur (URLs Tile)",
  "Raster (TileJSON URL)": "Raster (URL TileJSON)",
  "Raster (Tile URLs)": "Raster (URLs Tile)",
  "Raster DEM (TileJSON URL)": "Raster DEM (URL TileJSON)",
  "Raster DEM (XYZ URLs)": "Raster DEM (URLs XYZ)",
  "Vector (PMTiles)": "Vecteur (PMTiles)",
  "Image": "Image",
  "Video": "Vidéo",
  "Add Source": "Ajouter une source",
  "Sources": "Sources",
  "Active Sources": "Sources actives",
  "Choose Public Source": "Choisir une source publique",
  "Add one of the publicly available sources to your style.": "Ajoutez l'une des sources publiques disponibles à votre style.",
  "Add New Source": "Ajouter une nouvelle source",
  "Add a new source to your style. You can only choose the source type and id at creation time!": "Ajoutez une nouvelle source à votre style. Vous ne pouvez choisir le type et l'ID de la source qu'au moment de la création !",
  "TileJSON URL": "URL TileJSON",
  "Tile URL": "URL de la tuile",
  "Scheme Type": "Type de schéma",
  "Coord top left": "Coordonnée en haut à gauche",
  "Coord top right": "Coordonnée en haut à droite",
  "Coord bottom right": "Coordonnée en bas à droite",
  "Coord bottom left": "Coordonnée en bas à gauche",
  "Image URL": "URL de l'image",
  "Video URL": "URL de la vidéo",
  "GeoJSON URL": "URL GeoJSON",
  "GeoJSON": "GeoJSON",
  "Cluster": "Cluster",
  "PMTiles URL": "URL PMTiles",
  "Tile Size": "Dimension d'une tuile",
  "Encoding": "Encodage",
  "Error:": "Erreur :",
  "MapTiler Access Token": "Jeton d'accès MapTiler",
  "Public access token for MapTiler Cloud.": "Jeton d'accès public pour MapTiler Cloud.",
  "Learn More": "En savoir plus",
  "Thunderforest Access Token": "Jeton d'accès Thunderforest",
  "Public access token for Thunderforest services.": "Jeton d'accès public pour les services Thunderforest.",
  "Stadia Maps API Key": "Clé d'API Stadia Maps",
  "API key for Stadia Maps.": "Clé d'API pour Stadia Maps.",
  "Style Renderer": "Moteur de rendu pour le style",
  "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style.",
  "Language": "Langue",
  "Layer options": "Options du calque",
  "Paint properties": "Propriétés de peinture",
  "Layout properties": "Propriétés de mise en page",
  "General layout properties": "Propriétés générales de mise en page",
  "Text layout properties": "Propriétés de mise en page du texte",
  "Icon layout properties": "Propriétés de mise en page de l'icône",
  "Text paint properties": "Propriétés de peinture du texte",
  "Icon paint properties": "Propriétés de peinture de l'icône"
 }
@@ -29,12 +29,11 @@
  "Map view": "תצוגת מפה",
  "Maputnik on GitHub": "מפוטניק בגיטהב",
  "Open": "פתיחה",
-  "Export": "ייצוא",
+  "Save": "שמור",
  "Data Sources": "מקורות מידע",
  "Style Settings": "הגדרות הסטייל",
  "View": "תצוגה",
  "Color accessibility": "נגישות צבעים",
  "Language": "שפה",
  "Help": "עזרה",
  "Comments for the current layer. This is non-standard and not in the spec.": "הערות על השכבה הנוכחית. זה לא חלק מהספסיפיקציות",
  "Comments": "הערות",
@@ -73,8 +72,8 @@
  "Collapse": "הקטנה",
  "Expand": "הגדלה",
  "Add Layer": "הוספת שכבה",
  "Zoom:": "זום:",
  "Search": "חיפוש",
  "Zoom:": "זום:",
  "Close popup": "סגירת החלון",
  "cursor:": "סמן",
  "center:": "מרכז:",
@@ -82,17 +81,14 @@
  "Close modal": "סגירת חלונית",
  "Debug": "דיבאג",
  "Options": "אפשרויות",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
+  "Save Style": "שמירת הסטייל",
-  "Export Style": "ייצוא של הסטייל",
+  "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
-  "Download Style": "הורדה של הסטייל",
+  "Save as": "שמירה בשם",
-  "Download a JSON style to your computer.": "הורדה של הסטייל למחשב",
+  "Create HTML": "צור HTML",
  "Download HTML": "הורדה כ-HTML",
  "Cancel": "ביטול",
  "Open Style": "פתיחת סטייל",
-  "Upload Style": "העלאה של סטייל",
+  "Open local Style": "פתיחת סטייל מקומי",
-  "Upload a JSON style from your computer.": "העלאה של סטייל מהמחשב",
+  "Open a local JSON style from your computer.": "פתיחת סטייל JSON מקומי מהמחשב שלך.",
  "Style file": "קובץ סטייל",
  "Upload": "העלאה",
  "Load from URL": "פתיחה מתוך כתובת",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "פתיחה מכתובת, שימו לב: הכתובת צריכה לתמוך ב- CORS",
  "Style URL": "כתוסת סטייל",
@@ -148,11 +144,12 @@
  "GeoJSON (JSON)": "GeoJSON (JSON)",
  "GeoJSON (URL)": "GeoJSON (URL)",
  "Vector (TileJSON URL)": "Vector (TileJSON URL)",
-  "Vector (XYZ URLs)": "Vector (XYZ URLs)",
+  "Vector (Tile URLs)": "Vector (Tile URLs)",
  "Raster (TileJSON URL)": "Raster (TileJSON URL)",
-  "Raster (XYZ URL)": "Raster (XYZ URL)",
+  "Raster (Tile URLs)": "Raster (Tile URLs)",
  "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
  "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
  "Vector (PMTiles)": "Vector (PMTiles)",
  "Image": "תמונה",
  "Video": "וידאו",
  "Add Source": "הוספת מקור",
@@ -164,6 +161,7 @@
  "Add a new source to your style. You can only choose the source type and id at creation time!": "הוספת מקור לסטייל, ביכולתכם לעשות זאת רק בזמן מסויים",
  "TileJSON URL": "כתובת TileJSON",
  "Tile URL": "כתובת אריחים",
  "Scheme Type": "סוג סכמה",
  "Coord top left": "מיקום שמאלי עליון",
  "Coord top right": "מיקום ימני עליון",
  "Coord bottom right": "מיקום ימני תחתון",
@@ -173,12 +171,19 @@
  "GeoJSON URL": "כתובת GeoJSON",
  "GeoJSON": "GeoJSON",
  "Cluster": "קיבוץ",
  "PMTiles URL": "כתובת PMTiles",
  "Tile Size": "גודל אריח",
  "Encoding": "קידוד",
  "Error:": "שגיאה",
  "MapTiler Access Token": "MapTiler Access Token",
  "Public access token for MapTiler Cloud.": "Public access token for MapTiler Cloud.",
  "Learn More": "מידע נוסף",
  "Thunderforest Access Token": "Thunderforest Access Token",
  "Public access token for Thunderforest services.": "Public access token for Thunderforest services.",
  "Stadia Maps API Key": "Stadia Maps API Key",
  "API key for Stadia Maps.": "API key for Stadia Maps",
  "Style Renderer": "צייר הסטייל",
-  "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה"
+  "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
  "Language": "שפה",
  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
 }
@@ -0,0 +1,189 @@
 {
  "Input value": "Valore di input",
  "Data value": "Valore dei dati",
  "Output value": "Valore di output",
  "Function": "Funzione",
  "Select a type of data scale (default is 'categorical').": "Seleziona un tipo di scala dati (predefinito 'categorical').",
  "Base": "Base",
  "Input a data property to base styles off of.": "Inserisci una proprietà dati su cui basare gli stili.",
  "Default": "Predefinito",
  "Stops": "Fermate",
  "Zoom": "Zoom",
  "Add stop": "Aggiungi fermata",
  "Convert to expression": "Converti in espressione",
  "Remove zoom level from stop": "Rimuovi il livello di zoom dalla fermata",
  "Revert from expression": "Ripristina dall'espressione",
  "Delete expression": "Elimina espressione",
  "Convert property into a zoom function": "Converti proprietà in una funzione di zoom",
  "Convert property to data function": "Converti proprietà in una funzione dati",
  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Livello <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
  "switch to layer": "passa al livello",
  "Map": "Mappa",
  "Inspect": "Esamina",
  "Deuteranopia filter": "Filtro deuteranopia",
  "Protanopia filter": "Filtro protanopia",
  "Tritanopia filter": "Filtro tritanopia",
  "Achromatopsia filter": "Filtro acromatopsia",
  "Layers list": "Elenco livelli",
  "Layer editor": "Editor livelli",
  "Map view": "Vista mappa",
  "Maputnik on GitHub": "Maputnik su GitHub",
  "Open": "Apri",
  "Save": "Salva",
  "Data Sources": "Fonti dati",
  "Style Settings": "Impostazioni stile",
  "View": "Vista",
  "Color accessibility": "Accessibilità colori",
  "Help": "Aiuto",
  "Comments for the current layer. This is non-standard and not in the spec.": "Commenti per il livello attuale. Questo non è standard e non è nella specifica.",
  "Comments": "Commenti",
  "Comment...": "Il tuo commento...",
  "Max Zoom": "Zoom massimo",
  "Min Zoom": "Zoom minimo",
  "Source": "Sorgente",
  "Source Layer": "Livello sorgente",
  "Type": "Tipo",
  "Nested filters are not supported.": "I filtri nidificati non sono supportati.",
  "Upgrade to expression": "Aggiorna a espressione",
  "Filter": "Filtro",
  "every filter matches": "tutti i filtri corrispondono",
  "no filter matches": "nessun filtro corrisponde",
  "any filter matches": "qualsiasi filtro corrisponde",
  "Add filter": "Aggiungi filtro",
  "You've entered an old style filter.": "Hai inserito uno stile filtro obsoleto.",
  "Switch to filter editor.": "Passa all'editor dei filtri.",
  "Delete filter block": "Elimina blocco filtro",
  "Add value": "Aggiungi valore",
  "Remove array item": "Rimuovi elemento dall'array",
  "Press <1>ESC</1> to lose focus": "Premi <1>ESC</1> per perdere il focus",
  "Must provide protocol: <1>https://</1>": "Protocollo richiesto: <1>https://</1>",
  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protocollo richiesto: <1>http://</1> o <3>https://</3>",
  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "La politica CORS non permette di caricare risorse tramite http da https, utilizza un dominio <1>https://</1>.",
  "Layer": "Livello",
  "JSON Editor": "Editor JSON",
  "Delete": "Elimina",
  "Duplicate": "Duplica",
  "Show": "Mostra",
  "Hide": "Nascondi",
  "Move layer up": "Sposta il livello in su",
  "Move layer down": "Sposta il livello in giù",
  "Layer: {{layerId}}": "Livello: {{layerId}}",
  "Layers": "Livelli",
  "Collapse": "Coprimi",
  "Expand": "Espandi",
  "Add Layer": "Aggiungi Livello",
  "Search": "Cerca",
  "Zoom:": "Zoom:",
  "Close popup": "Chiudi popup",
  "cursor:": "cursore:",
  "center:": "centro:",
  "rotation:": "rotazione:",
  "Close modal": "Chiudi finestra modale",
  "Debug": "Debug",
  "Options": "Opzioni",
  "Save Style": "Opzioni stile",
  "Save the JSON style to your computer.": "Salva lo style JSON nel tuo computer.",
  "Save as": "Salva con nome",
  "Create HTML": "Crea HTML",
  "Cancel": "Annulla",
  "Open Style": "Apri stile",
  "Open local Style": "Apri stile locale",
  "Open a local JSON style from your computer.": "Apri uno stile JSON dal tuo computer.",
  "Load from URL": "Carica da URL",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Carica da URL. Nota che l'URL deve avere l'abilitazione <1>CORS attivata</1>.",
  "Style URL": "Stile URL",
  "Enter URL...": "Inserisci URL...",
  "Gallery Styles": "Galleria degli stili",
  "Open one of the publicly available styles to start from.": "Apro uno degli stili pubblici a partire da.",
  "Loading style": "Caricamento stile",
  "Loading: {{requestUrl}}": "Caricamento: {{requestUrl}}",
  "Name": "Nome",
  "Owner": "Proprietario",
  "Owner ID of the style. Used by Mapbox or future style APIs.": "ID del proprietario dello stile. Utilizzato da Mapbox o dalle future API di stile.",
  "Sprite URL": "URL Sprite",
  "Glyphs URL": "URL Glyphs",
  "Center": "Centro",
  "Bearing": "Direzione",
  "Pitch": "Inclinazione",
  "Light anchor": "Ancora della luce",
  "Light color": "Colore della luce",
  "Light intensity": "Intensità della luce",
  "Light position": "Posizione della luce",
  "Terrain source": "Sorgente del terreno",
  "Terrain exaggeration": "Esagerazione del  terreno",
  "Transition delay": "Ritardo della transizione",
  "Transition duration": "Durate della transizione",
  "Open Layers (experimental)": "Apri livelli (sperimentale)",
  "Shortcuts menu": "Scorciatoie del menu",
  "Open modal": "Apri finestra modale",
  "Export modal": "Esporta finestra modale",
  "Data Sources modal": "Finestra modale sorgente dati",
  "Style Settings modal": "Finestra modale impostazione degli stili",
  "Toggle inspect": "Attiva/disattiva ispezione",
  "Focus map": "Metti a fuoco la mappa",
  "Debug modal": "Finestra modale di debug",
  "Increase the zoom level by 1.": "Aumenta il livello di zoom di 1.",
  "Increase the zoom level by 2.": "Aumenta il livello di zoom di 2.",
  "Decrease the zoom level by 1.": "Riduci il livello di zoom di 1.",
  "Decrease the zoom level by 2.": "Riduci il livello di zoom di 1..",
  "Pan up by 100 pixels.": "Sposta in alto di 100 pixels.",
  "Pan down by 100 pixels.": "Sposta in basso di 100 pixels",
  "Pan left by 100 pixels.": "Sposta a sinistra di 100 pixels",
  "Pan right by 100 pixels.": "Sposta a destra di 100 pixels",
  "Increase the rotation by 15 degrees.": "Incrementa la rotazione di 15 gradi.",
  "Decrease the rotation by 15 degrees.": "Aumenta la rotazione di 15 gradi.",
  "Increase the pitch by 10 degrees.": "Incrementa la rotazione di 10 gradi",
  "Decrease the pitch by 10 degrees.": "Aumenta la rotazione di 10 gradi.",
  "Shortcuts": "Scorciatoie",
  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "Premi <1>ESC</1> per perdere il focus su qualsiasi elemento attivo, poi premi uno dei seguenti tasti:",
  "If the Map is in focused you can use the following shortcuts": "Se la mappa è attiva, puoi utilizzare le seguenti scorciatoie:",
  "Remove '{{sourceId}}' source": "Rimuovi sorgente '{{sourceId}}'",
  "Source ID": "ID sorgente",
  "Unique ID that identifies the source and is used in the layer to reference the source.": "ID univoco che identifica la sorgente ed è utilizzato nel livello per fare riferimento alla sorgente.",
  "Source Type": "Tipo sorgente",
  "GeoJSON (JSON)": "GeoJSON (JSON)",
  "GeoJSON (URL)": "GeoJSON (URL)",
  "Vector (TileJSON URL)": "Vettore (TileJSON URL)",
  "Vector (Tile URLs)": "Vettore (Tile URLs)",
  "Raster (TileJSON URL)": "Raster (TileJSON URL)",
  "Raster (Tile URLs)": "Raster (Tile URLs)",
  "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
  "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
  "Vector (PMTiles)": "Vettore (PMTiles)",
  "Image": "Immagine",
  "Video": "Video",
  "Add Source": "Aggiungi sorgente",
  "Sources": "Sorgenti",
  "Active Sources": "Sorgenti attive",
  "Choose Public Source": "Scegli una sorgente pubblica",
  "Add one of the publicly available sources to your style.": "Aggiungi una delle sorgente pubbliche disponibili al tuo stile.",
  "Add New Source": "Aggiungi nuova sorgente",
  "Add a new source to your style. You can only choose the source type and id at creation time!": "Aggiungi una nuova sorgente al tuo stile. Puoi scegliere il tipo di sorgente e l'ID solo al momento della creazione!",
  "TileJSON URL": "TileJSON URL",
  "Tile URL": "Tile-URL",
  "Scheme Type": "Tipo di schema",
  "Coord top left": "Coordinate in alto a sinistra",
  "Coord top right": "Coordinate in alto a destra",
  "Coord bottom right": "Coordinate in basso a destra",
  "Coord bottom left": "Coordinate in basso a sinistra",
  "Image URL": "Indirizzo immagine",
  "Video URL": "Indirizzo video",
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "Cluster",
  "PMTiles URL": "PMTiles URL",
  "Tile Size": "Dimensioni tile",
  "Encoding": "Codifica",
  "Error:": "Errore:",
  "MapTiler Access Token": "Accesso token MapTiler",
  "Public access token for MapTiler Cloud.": "Token di accesso pubblico per MapTiler Cloud.",
  "Learn More": "Scopri di più",
  "Thunderforest Access Token": "Accesso token Thunderforest",
  "Public access token for Thunderforest services.": "Token di accesso pubblico per i servizi Thunderforest.",
  "Stadia Maps API Key": "Chiave API di Stadia Maps.",
  "API key for Stadia Maps.": "Chiave API per Stadia Maps.",
  "Style Renderer": "Renderer dello stile",
  "Choose the default Maputnik renderer for this style.": "Scegli il renderer predefinito di Maputnik per questo stile.",
  "Language": "Lingua",
  "Press <1>ESC</1> to lose focus of any input box": "Premi <1>ESC</1> per perdere il focus su qualsiasi campo di input."
 }
@@ -29,12 +29,11 @@
  "Map view": "地図画面",
  "Maputnik on GitHub": "GitHubのMaputnik",
  "Open": "開く",
-  "Export": "エクスポート",
+  "Save": "保存",
  "Data Sources": "データソース",
  "Style Settings": "スタイル設定",
  "View": "表示",
  "Color accessibility": "色のアクセシビリティ",
  "Language": "言語",
  "Help": "ヘルプ",
  "Comments for the current layer. This is non-standard and not in the spec.": "現在のレイヤーのコメント。注意：この機能は標準ではないため、他のライブラリとの互換性状況はわかりません。",
  "Comments": "コメント",
@@ -73,8 +72,8 @@
  "Collapse": "畳む",
  "Expand": "展開",
  "Add Layer": "レイヤー追加",
  "Zoom:": "ズーム:",
  "Search": "検索",
  "Zoom:": "ズーム:",
  "Close popup": "ポップアップを閉じる",
  "cursor:": "カーソル",
  "center:": "中央:",
@@ -82,17 +81,14 @@
  "Close modal": "モーダルを閉じる",
  "Debug": "デバッグ",
  "Options": "設定",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
+  "Save Style": "スタイルを保存",
-  "Export Style": "スタイルをエクスポート",
+  "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
-  "Download Style": "スタイルをダウンロード",
+  "Save as": "名前を付けて保存",
-  "Download a JSON style to your computer.": "パソコンにJSONスタイルをダウンロードします。",
+  "Create HTML": "HTMLを作成",
  "Download HTML": "HTMLをダウンロード",
  "Cancel": "キャンセル",
  "Open Style": "スタイルを開く",
-  "Upload Style": "スタイルをアップロードする",
+  "Open local Style": "ローカルスタイルを開く",
-  "Upload a JSON style from your computer.": "JSONスタイルをパソコンからアップロードする",
+  "Open a local JSON style from your computer.": "コンピュータからローカルJSONスタイルを開きます。",
  "Style file": "スタイルファイル",
  "Upload": "アップロード",
  "Load from URL": "URLから読み込む",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "URLから読み込む。注意: URLは <1>CORSを有効にする</1> 必要があります。",
  "Style URL": "スタイルURL",
@@ -148,11 +144,12 @@
  "GeoJSON (JSON)": "GeoJSON (JSON)",
  "GeoJSON (URL)": "GeoJSON (URL)",
  "Vector (TileJSON URL)": "ベクトル (TileJSON URL)",
-  "Vector (XYZ URLs)": "ベクトル (XYZ URL)",
+  "Vector (Tile URLs)": "ベクトル (Tile URLs)",
  "Raster (TileJSON URL)": "ラスタ (TileJSON URL)",
-  "Raster (XYZ URL)": "ラスタ (XYZ URL)",
+  "Raster (Tile URLs)": "ラスタ (Tile URLs)",
  "Raster DEM (TileJSON URL)": "ラスタ DEM (TileJSON URL)",
  "Raster DEM (XYZ URLs)": "ラスタ DEM (XYZ URL)",
  "Vector (PMTiles)": "ベクトル (PMTiles)",
  "Image": "画像",
  "Video": "動画",
  "Add Source": "ソースを追加",
@@ -164,6 +161,7 @@
  "Add a new source to your style. You can only choose the source type and id at creation time!": "スタイルに新規ソースを追加します。注意: 作成時にソースタイプとIDのみを選択できます。",
  "TileJSON URL": "TileJSON URL",
  "Tile URL": "タイルURL",
  "Scheme Type": "スキーマ",
  "Coord top left": "左上座標",
  "Coord top right": "右上座標",
  "Coord bottom right": "右下座標",
@@ -173,14 +171,21 @@
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "クラスタ",
  "PMTiles URL": "PMTiles URL",
  "Tile Size": "タイルサイズ",
  "Encoding": "エンコーディング",
  "Error:": "エラー:",
  "MapTiler Access Token": "MapTiler アクセストークン",
  "Public access token for MapTiler Cloud.": "MapTiler Cloud の公開用アクセストークン",
  "Learn More": "詳細はこちら",
  "Thunderforest Access Token": "Thunderforest アクセストークン",
  "Public access token for Thunderforest services.": "Thunderforest サービスの公開用アクセストークン",
  "Stadia Maps API Key": "Stadia Maps API キー",
  "API key for Stadia Maps.": "Stadia Maps の API キー",
  "Style Renderer": "スタイルレンダラ",
  "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
  "Language": "言語",
  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
  "Layer options": "レイヤー設定",
  "Paint properties": "ペイントプロパティ",
  "Layout properties": "レイアウトプロパティ",
@@ -29,12 +29,11 @@
  "Map view": "地图视图",
  "Maputnik on GitHub": "GitHub上的Maputnik",
  "Open": "打开",
-  "Export": "导出",
+  "Save": "保存",
  "Data Sources": "数据源",
  "Style Settings": "样式设置",
  "View": "视图",
  "Color accessibility": "颜色可访问性",
  "Language": "语言",
  "Help": "帮助",
  "Comments for the current layer. This is non-standard and not in the spec.": "当前图层的注释。注意：这不是标准功能，可能与其他库不兼容。",
  "Comments": "注释",
@@ -73,8 +72,8 @@
  "Collapse": "折叠",
  "Expand": "展开",
  "Add Layer": "添加图层",
  "Zoom:": "缩放:",
  "Search": "搜索",
  "Zoom:": "缩放:",
  "Close popup": "关闭弹出窗口",
  "cursor:": "光标:",
  "center:": "中心:",
@@ -82,17 +81,14 @@
  "Close modal": "关闭模态框",
  "Debug": "调试",
  "Options": "选项",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
+  "Save Style": "保存样式",
-  "Export Style": "导出样式",
+  "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
-  "Download Style": "下载样式",
+  "Save as": "另存为",
-  "Download a JSON style to your computer.": "将JSON样式下载到您的电脑。",
+  "Create HTML": "创建HTML",
  "Download HTML": "下载HTML",
  "Cancel": "取消",
  "Open Style": "打开样式",
-  "Upload Style": "上传样式",
+  "Open local Style": "打开本地样式",
-  "Upload a JSON style from your computer.": "从您的电脑上传JSON样式。",
+  "Open a local JSON style from your computer.": "从您的计算机打开本地JSON样式。",
  "Style file": "样式文件",
  "Upload": "上传",
  "Load from URL": "从URL加载",
  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "从URL加载。注意：URL必须启用 <1>CORS</1>。",
  "Style URL": "样式URL",
@@ -148,11 +144,12 @@
  "GeoJSON (JSON)": "GeoJSON (JSON格式)",
  "GeoJSON (URL)": "GeoJSON (URL格式)",
  "Vector (TileJSON URL)": "矢量数据 (TileJSON URL)",
-  "Vector (XYZ URLs)": "矢量数据 (XYZ URLs)",
+  "Vector (Tile URLs)": "矢量数据 (Tile URLs)",
  "Raster (TileJSON URL)": "栅格数据 (TileJSON URL)",
-  "Raster (XYZ URL)": "栅格数据 (XYZ URL)",
+  "Raster (Tile URLs)": "栅格数据 (Tile URLs)",
  "Raster DEM (TileJSON URL)": "栅格高程数据 (TileJSON URL)",
  "Raster DEM (XYZ URLs)": "栅格高程数据 (XYZ URLs)",
  "Vector (PMTiles)": "__STRING_NOT_TRANSLATED__",
  "Image": "图像",
  "Video": "视频",
  "Add Source": "添加源",
@@ -164,6 +161,7 @@
  "Add a new source to your style. You can only choose the source type and id at creation time!": "向您的样式添加新源。在创建时，您只能选择源类型和ID！",
  "TileJSON URL": "TileJSON URL",
  "Tile URL": "瓦片URL",
  "Scheme Type": "__STRING_NOT_TRANSLATED__",
  "Coord top left": "左上角坐标",
  "Coord top right": "右上角坐标",
  "Coord bottom right": "右下角坐标",
@@ -173,14 +171,21 @@
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "聚合",
  "PMTiles URL": "__STRING_NOT_TRANSLATED__",
  "Tile Size": "__STRING_NOT_TRANSLATED__",
  "Encoding": "编码",
  "Error:": "错误：",
  "MapTiler Access Token": "MapTiler 访问令牌",
  "Public access token for MapTiler Cloud.": "MapTiler Cloud 的公共访问令牌。",
  "Learn More": "__STRING_NOT_TRANSLATED__",
  "Thunderforest Access Token": "Thunderforest 访问令牌",
  "Public access token for Thunderforest services.": "Thunderforest 服务的公共访问令牌。",
  "Stadia Maps API Key": "Stadia Maps API 密钥",
  "API key for Stadia Maps.": "Stadia Maps 的 API 密钥",
  "Style Renderer": "样式渲染器",
  "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
  "Language": "语言",
  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
  "Layer options": "图层选项",
  "Paint properties": "绘制属性",
  "Layout properties": "布局属性",
@@ -1,3 +1,5 @@
@use "vars";
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
@@ -15,8 +17,8 @@
 }
 html {
-  color: $color-white;
+  color: vars.$color-white;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
  box-sizing: border-box;
 }
@@ -32,34 +34,34 @@ body {
 }
 p {
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
-  margin-top: $margin-2;
+  margin-top: vars.$margin-2;
-  margin-bottom: $margin-2;
+  margin-bottom: vars.$margin-2;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
  line-height: 1.3;
 }
 h1 {
-  font-size: $font-size-2;
+  font-size: vars.$font-size-2;
-  margin-bottom: $margin-3;
+  margin-bottom: vars.$margin-3;
  font-weight: bold;
 }
 h2 {
-  font-size: $font-size-3;
+  font-size: vars.$font-size-3;
-  margin-bottom: $margin-3;
+  margin-bottom: vars.$margin-3;
  font-weight: bold;
 }
 h3 {
-  font-size: $font-size-4;
+  font-size: vars.$font-size-4;
-  margin-bottom: $margin-3;
+  margin-bottom: vars.$margin-3;
  font-weight: bold;
 }
 h4 {
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
-  margin-bottom: $margin-3;
+  margin-bottom: vars.$margin-3;
 }
 input:focus,
@@ -68,12 +70,12 @@ textarea:focus,
 button:focus,
 .maputnik-toolbar-link:focus,
 select:focus {
-  color: $color-white;
+  color: vars.$color-white;
  outline: #8e8e8e auto 1px;
 }
 label:hover {
-  color: $color-white;
+  color: vars.$color-white;
 }
 .clearfix {
@@ -1,3 +1,5 @@
@use "vars";
 .CodeMirror-lint-tooltip {
  z-index: 2000 !important;
 }
@@ -55,7 +57,7 @@
 .cm-s-maputnik .CodeMirror-matchingbracket {
  background: hsla(223, 12%, 35%, 1);
-  color: $color-white !important;
+  color: vars.$color-white !important;
 }
 .cm-s-maputnik .CodeMirror-nonmatchingbracket {
@@ -79,7 +81,7 @@
  z-index: 99999;
  padding: 0.3em 0.5em;
  background: hsla(0, 0%, 0%, 0.3);
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
  border-bottom-left-radius: 2px;
  transition: opacity 320ms ease;
  opacity: 0;
@@ -1,9 +1,12 @@
@use "mixins";
@use "vars";
@use 'sass:color';
 // MAP
 .maputnik-map__container {
  background: white;
  display: flex;
-  width: $layout-map-width;
+  width: vars.$layout-map-width;
  &--error {
    align-items: center;
@@ -36,7 +39,7 @@
  &-wrapper {
    display: inline-block;
    box-sizing: border-box;
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
    line-height: 2;
    user-select: none;
    position: relative;
@@ -45,9 +48,9 @@
  &-popup {
    display: none;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
-    background-color: $color-gray;
+    background-color: vars.$color-gray;
-    padding: $margin-2;
+    padding: vars.$margin-2;
    font-size: 10px;
    position: absolute;
    top: 20px;
@@ -60,7 +63,7 @@
  &-button {
    opacity: 0;
    pointer-events: none;
-    background: $color-black;
+    background: vars.$color-black;
    color: white;
    border: none;
    padding: 4px;
@@ -77,11 +80,11 @@
 }
 .maputnik-doc-inline {
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
-  padding: $margin-2;
+  padding: vars.$margin-2;
  font-size: 12px;
-  margin-top: $margin-3;
+  margin-top: vars.$margin-3;
  line-height: 1.5;
  flex: 1 0;
 }
@@ -95,10 +98,10 @@
 .maputnik-button {
  display: inline-block;
  cursor: pointer;
-  background-color: $color-midgray;
+  background-color: vars.$color-midgray;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
-  padding: $margin-2;
+  padding: vars.$margin-2;
  user-select: none;
  border-width: 0;
  border-radius: 2px;
@@ -106,36 +109,36 @@
  text-decoration: none;
  &:hover {
-    background-color: color.adjust($color-midgray, $lightness: 12%);
+    background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
-    color: $color-white;
+    color: vars.$color-white;
  }
  &:disabled {
-    background-color: color.adjust($color-midgray, $lightness: -5%);
+    background-color: color.adjust(vars.$color-midgray, $lightness: -5%);
-    color: $color-midgray;
+    color: vars.$color-midgray;
    cursor: not-allowed;
  }
 }
 .maputnik-big-button {
-  margin-top: $margin-3;
+  margin-top: vars.$margin-3;
  display: inline-block;
-  padding: $margin-3;
+  padding: vars.$margin-3;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
 }
 .maputnik-wide-button {
-  padding: $margin-2 $margin-3;
+  padding: vars.$margin-2 vars.$margin-3;
 }
 .maputnik-green-button {
-  background-color: $color-green;
+  background-color: vars.$color-green;
-  color: $color-black;
+  color: vars.$color-black;
 }
 .maputnik-white-button {
-  background-color: $color-white;
+  background-color: vars.$color-white;
-  color: $color-black;
+  color: vars.$color-black;
 }
 .maputnik-icon-button {
@@ -150,19 +153,19 @@
    }
    svg {
-      fill: $color-white;
+      fill: vars.$color-white;
    }
  }
 }
 // INPUT BLOCK
 .maputnik-input-block {
-  margin: $margin-3;
+  margin: vars.$margin-3;
  display: flex;
  flex-wrap: wrap;
  &-label {
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
    user-select: none;
    width: 32%;
    vertical-align: top;
@@ -170,7 +173,7 @@
  }
  &-action {
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
    user-select: none;
    width: 18%;
    vertical-align: top;
@@ -187,7 +190,7 @@
  .maputnik-input-block-label {
    display: inline-block;
    width: 32%;
-    margin-bottom: $margin-3;
+    margin-bottom: vars.$margin-3;
  }
  .maputnik-input-block-action {
@@ -211,15 +214,15 @@
 // SPACE HELPER
 .maputnik-space {
-  @include vendor-prefix(flex-grow, 1);
+  @include mixins.vendor-prefix(flex-grow, 1);
 }
 // MESSAGE PANEL
 .maputnik-message-panel {
-  padding: $margin-2;
+  padding: vars.$margin-2;
  &-error {
-    color: $color-red;
+    color: vars.$color-red;
  }
  &__switch-button {
@@ -241,7 +244,7 @@
  &__menu {
    position: absolute;
    z-index: 999999;
-    background: $color-black;
+    background: vars.$color-black;
    display: flex;
    flex-direction: column;
    align-content: stretch;
@@ -262,13 +265,13 @@
  color: #a4a4a4;
  padding: 0.4em 0.4em;
  font-size: 0.9em;
-  border: solid 1px $color-red;
+  border: solid 1px vars.$color-red;
  border-radius: 2px;
-  margin: $margin-2 0px;
+  margin: vars.$margin-2 0px;
 }
 .maputnik-expression-editor {
-  border: solid 1px $color-gray;
+  border: solid 1px vars.$color-gray;
 }
 .maputnik-input-block--wide {
@@ -288,13 +291,13 @@
 }
 .maputnik-expr-infobox {
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
-  background: $color-midgray;
+  background: vars.$color-midgray;
-  padding: $margin-2;
+  padding: vars.$margin-2;
  border-radius: 2px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
-  color: $color-white;
+  color: vars.$color-white;
 }
 .maputnik-expr-infobox__button {
@@ -10,7 +10,7 @@
  }
  input.maputnik-string {
-    margin-left: 5px;
+    margin: 0 5px;
    width: 60%;
    display: inline-block;
  }
@@ -1,5 +1,7 @@
@use "vars";
 .maputnik-filter-editor-wrapper {
-  padding: $margin-3;
+  padding: vars.$margin-3;
  overflow: hidden;
  .maputnik-input-block {
@@ -8,8 +10,8 @@
 }
 .maputnik-filter-editor {
-  @extend .clearfix; /* stylelint-disable-line */
+  @extend .clearfix !optional; /* stylelint-disable-line */
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
 }
 .maputnik-filter-editor-property {
@@ -18,7 +20,7 @@
 }
 .maputnik-filter-editor-operator {
-  margin-left: 2%;
+  margin: 0 2%;
  display: inline-block;
  width: 17%;
@@ -30,7 +32,7 @@
 .maputnik-filter-editor-args {
  display: inline-block;
  width: 54%;
-  margin-left: 2%;
+  margin: 0 2%;
  .maputnik-string,
  .maputnik-number {
@@ -39,7 +41,7 @@
 }
 .maputnik-filter-editor-compound-select {
-  margin-bottom: $margin-2;
+  margin-bottom: vars.$margin-2;
  .maputnik-doc-wrapper {
    width: 50%;
@@ -52,22 +54,22 @@
 }
 .maputnik-filter-editor-unsupported {
-  color: $color-midgray;
+  color: vars.$color-midgray;
 }
 .maputnik-add-filter {
  display: inline-block;
  float: right;
-  margin-top: $margin-3;
+  margin-top: vars.$margin-3;
 }
 .maputnik-delete-filter {
-  @extend .maputnik-icon-button; /* stylelint-disable-line */
+  @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
 }
 .maputnik-filter-editor-block-action {
-  margin-top: $margin-2;
+  margin-top: vars.$margin-2;
-  margin-bottom: $margin-2;
+  margin-bottom: vars.$margin-2;
  display: inline-block;
  width: 6%;
  margin-right: 1.5%;
@@ -79,12 +81,12 @@
 }
 .maputnik-radio-as-button {
-  @extend .maputnik-button; /* stylelint-disable-line */
+  @extend .maputnik-button !optional; /* stylelint-disable-line */
  border: solid 1px transparent;
  &:focus-within {
-    border: solid 1px $color-white;
+    border: solid 1px vars.$color-white;
  }
  input {
@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
@use 'sass:color';
 //INPUT
 .maputnik-input {
@@ -5,13 +8,13 @@
  width: 100%;
  display: block;
  box-sizing: border-box;
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
  line-height: 2;
-  padding-left: $margin-2;
+  padding-left: vars.$margin-2;
-  padding-right: $margin-2;
+  padding-right: vars.$margin-2;
  border: none;
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
-  color: color.adjust($color-lowgray, $lightness: 12%);
+  color: color.adjust(vars.$color-lowgray, $lightness: 12%);
  &:invalid {
    border: solid 1px #B71C1C;
@@ -20,7 +23,7 @@
 }
 .maputnik-string {
-  @extend .maputnik-input; /* stylelint-disable-line */
+  @extend .maputnik-input !optional; /* stylelint-disable-line */
  &--multi {
    resize: vertical;
@@ -44,12 +47,12 @@
 }
 .maputnik-number {
-  @extend .maputnik-input; /* stylelint-disable-line */
+  @extend .maputnik-input !optional; /* stylelint-disable-line */
 }
 //COLOR PICKER
 .maputnik-color {
-  @extend .maputnik-input; /* stylelint-disable-line */
+  @extend .maputnik-input !optional; /* stylelint-disable-line */
  height: 26px;
 }
@@ -57,7 +60,7 @@
 .maputnik-color-wrapper {
  position: relative;
-  @include flex-row;
+  @include mixins.flex-row;
 }
 .maputnik-color-swatch {
@@ -71,7 +74,7 @@
 .maputnik-array {
  > * {
-    margin-bottom: $margin-3;
+    margin-bottom: vars.$margin-3;
  }
  .maputnik-array-block {
@@ -96,29 +99,32 @@
 // SELECT
 .maputnik-select {
-  @extend .maputnik-input; /* stylelint-disable-line */
+  @extend .maputnik-input !optional; /* stylelint-disable-line */
  -moz-appearance: none;
  -webkit-appearance: none;
-  background: $color-gray url("#{$icon-down-arrow}") right center no-repeat;
+  background: vars.$color-gray url("#{vars.$icon-down-arrow}") right center no-repeat;
-  color: $color-white;
+  color: vars.$color-white;
  background-position: calc(100% - 2px) center;
  padding-right: 20px;
  height: 24px;
 }
 [dir="rtl"] .maputnik-select {
  background: vars.$color-gray url("#{vars.$icon-down-arrow}") left center no-repeat;
 }
 // MULTIBUTTON
 .maputnik-multibutton {
  padding: 0;
  .maputnik-button {
-    margin-right: $margin-1;
+    margin-right: vars.$margin-1;
  }
 }
 .maputnik-button-selected {
-  background-color: color.adjust($color-midgray, $lightness: 12%);
+  background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
  color: white;
 }
@@ -134,7 +140,7 @@
  outline: none;
  &-wrapper {
-    @extend .maputnik-input; /* stylelint-disable-line */
+    @extend .maputnik-input !optional; /* stylelint-disable-line */
    padding-left: 0;
    padding-right: 0;
@@ -151,12 +157,12 @@
    text-align: center;
    height: 24px;
    width: 24px;
-    margin-right: $margin-2;
+    margin-right: vars.$margin-2;
-    background-color: $color-gray;
+    background-color: vars.$color-gray;
    border-radius: 2px;
    border-style: solid;
    border-width: 2px;
-    border-color: $color-gray;
+    border-color: vars.$color-gray;
    transition: background-color 0.1s ease-out;
    position: absolute;
    top: 0;
@@ -182,7 +188,7 @@
    width: 50%;
    height: 50%;
    margin-top: 1px;
-    fill: $color-lowgray;
+    fill: vars.$color-lowgray;
  }
 }
@@ -195,29 +201,29 @@
    position: absolute;
    overflow: auto;
    max-height: 50%;
-    background: $color-gray;
+    background: vars.$color-gray;
    z-index: 3;
  }
  &-menu-item {
    user-select: none;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
    cursor: default;
-    padding: $margin-1;
+    padding: vars.$margin-1;
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
    z-index: 3;
-    background: $color-gray;
+    background: vars.$color-gray;
  }
  &-menu-item-selected {
-    background: $color-midgray;
+    background: vars.$color-midgray;
  }
 }
 // FONT
 .maputnik-font {
  .maputnik-autocomplete:not(:last-child) {
-    margin-bottom: $margin-3;
+    margin-bottom: vars.$margin-3;
  }
 }
@@ -233,21 +239,21 @@
 .SpecDoc__sdk-support__table {
  width: 100%;
-  margin-top: $margin-3;
+  margin-top: vars.$margin-3;
  td, th {
-    border: solid 1px $color-midgray;
+    border: solid 1px vars.$color-midgray;
    padding: 4px 6px;
    white-space: nowrap;
  }
 }
 .SpecDoc__values li {
-  margin-top: $margin-3;
+  margin-top: vars.$margin-3;
 }
 .SpecDoc__values code {
-  background: $color-midgray;
+  background: vars.$color-midgray;
  padding: 0.1em 0.3em;
  border-radius: 2px;
 }
@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
@use 'sass:color';
 // LAYER LIST
 .maputnik-layer-list {
@@ -7,9 +10,9 @@
  flex-direction: column;
  &-header {
-    padding: $margin-2 $margin-2 $margin-3;
+    padding: vars.$margin-2 vars.$margin-2 vars.$margin-3;
-    @include flex-row;
+    @include mixins.flex-row;
    flex: 0 0;
    > * {
@@ -19,8 +22,8 @@
  }
  &-header-title {
-    font-size: $font-size-5;
+    font-size: vars.$font-size-5;
-    color: $color-white;
+    color: vars.$color-white;
    font-weight: bold;
    line-height: 1.3;
  }
@@ -28,7 +31,7 @@
  &-container {
    padding: 0;
    margin: 0;
-    padding-bottom: $margin-5;
+    padding-bottom: vars.$margin-5;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
@@ -47,9 +50,9 @@
  &-item {
    border: solid 1px transparent;
    font-weight: 400;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
-    border-bottom-color: color.adjust($color-black, $lightness: 0.1%);
+    border-bottom-color: color.adjust(vars.$color-black, $lightness: 0.1%);
    user-select: none;
    list-style: none;
    z-index: 2000;
@@ -63,21 +66,22 @@
    transition: opacity 600ms, visibility 600ms;
    &:focus-within {
-      border: solid 1px $color-lowgray;
+      border: solid 1px vars.$color-lowgray;
    }
    @include mixins.flex-row;
    @media screen and (prefers-reduced-motion: reduce) {
      transition-duration: 0;
    }
    @include flex-row;
  }
  &-icon-action {
    display: none;
    svg {
-      fill: $color-black;
+      fill: vars.$color-black;
    }
  }
@@ -88,10 +92,10 @@
    height: 15px;
    svg {
-      fill: color.adjust($color-lowgray, $lightness: -20%);
+      fill: color.adjust(vars.$color-lowgray, $lightness: -20%);
      &:hover {
-        fill: $color-white;
+        fill: vars.$color-white;
      }
    }
  }
@@ -102,24 +106,24 @@
  .maputnik-layer-list-item:hover,
  .maputnik-layer-list-item-selected {
-    background-color: color.adjust($color-black, $lightness: 2%);
+    background-color: color.adjust(vars.$color-black, $lightness: 2%);
    .maputnik-layer-list-icon-action {
      display: block;
      svg {
-        fill: color.adjust($color-lowgray, $lightness: -0.5%);
+        fill: color.adjust(vars.$color-lowgray, $lightness: -0.5%);
      }
    }
  }
  .maputnik-layer-list-item--error {
-    color: $color-red;
+    color: vars.$color-red;
  }
  &-item-selected {
-    color: $color-white;
+    color: vars.$color-white;
  }
  &-item-collapsed {
@@ -132,7 +136,7 @@
  }
  &-item-group-last {
-    border-bottom: 2px solid $color-gray;
+    border-bottom: 2px solid vars.$color-gray;
  }
  &-item-id {
@@ -150,14 +154,14 @@
  &-group-header {
    border: solid 1px transparent;
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
-    background-color: color.adjust($color-black, $lightness: 2%);
+    background-color: color.adjust(vars.$color-black, $lightness: 2%);
    user-select: none;
-    padding: $margin-2;
+    padding: vars.$margin-2;
    &:focus-within {
-      border: solid 1px $color-lowgray;
+      border: solid 1px vars.$color-lowgray;
    }
    button {
@@ -165,7 +169,7 @@
      cursor: pointer;
    }
-    @include flex-row;
+    @include mixins.flex-row;
    svg {
      width: 14px;
@@ -178,25 +182,27 @@
  }
  &-group-content {
-    margin-left: $margin-3;
+    margin: 0 vars.$margin-3;
  }
 }
 // FILTER EDITOR
 .maputnik-layer-editor-group {
  font-weight: bold;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
-  background-color: color.adjust($color-black, $lightness: 2%);
+  background-color: color.adjust(vars.$color-black, $lightness: 2%);
-  color: $color-white;
+  color: vars.$color-white;
  cursor: pointer;
  user-select: none;
  line-height: 20px;
  border-top: solid 1px #36383e;
  @include mixins.flex-row;
  &__button {
    flex: 1;
    display: flex;
-    padding: $margin-2;
+    padding: vars.$margin-2;
    &__icon {
      fill: white;
@@ -223,17 +229,17 @@
  }
-  @include flex-row;
+  
  &:hover {
-    background-color: $color-gray;
+    background-color: vars.$color-gray;
  }
 }
 // PROPERTY
 .maputnik-default-property {
  .maputnik-input-block-label {
-    color: color.adjust($color-lowgray, $lightness: -20%);
+    color: color.adjust(vars.$color-lowgray, $lightness: -20%);
  }
  .maputnik-string,
@@ -241,8 +247,8 @@
  .maputnik-color,
  .maputnik-select,
  .maputnik-checkbox-wrapper {
-    background-color: color.adjust($color-gray, $lightness: -2%);
+    background-color: color.adjust(vars.$color-gray, $lightness: -2%);
-    color: color.adjust($color-lowgray, $lightness: -20%);
+    color: color.adjust(vars.$color-lowgray, $lightness: -20%);
  }
  .maputnik-make-zoom-function svg {
@@ -250,18 +256,18 @@
  }
  .maputnik-multibutton .maputnik-button {
-    background-color: color.adjust($color-midgray, $lightness: -10%);
+    background-color: color.adjust(vars.$color-midgray, $lightness: -10%);
-    color: color.adjust($color-lowgray, $lightness: -20%);
+    color: color.adjust(vars.$color-lowgray, $lightness: -20%);
    &:hover {
-      background-color: color.adjust($color-midgray, $lightness: 12%);
+      background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
-      color: $color-white;
+      color: vars.$color-white;
    }
  }
  .maputnik-multibutton .maputnik-button-selected {
-    background-color: color.adjust($color-midgray, $lightness: -2%);
+    background-color: color.adjust(vars.$color-midgray, $lightness: -2%);
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
  }
 }
@@ -276,8 +282,8 @@
  &__menu {
    position: absolute;
    z-index: 9999;
-    background: $color-black;
+    background: vars.$color-black;
-    border: solid 1px $color-midgray;
+    border: solid 1px vars.$color-midgray;
    right: 0;
    min-width: 120px;
  }
@@ -295,7 +301,7 @@
 .layer-header {
  display: flex;
  padding: 6px;
-  background: $color-black;
+  background: vars.$color-black;
  &__title {
    flex: 1;
@@ -310,7 +316,7 @@
 // Clone of the element which is sorted
 .sortableHelper {
-  font-family: $font-family;
+  font-family: vars.$font-family;
  z-index: 9999;
  border: none;
 }
@@ -1,3 +1,5 @@
@use "vars";
 //SCROLLING
 .maputnik-scroll-container {
  overflow-x: hidden;
@@ -11,14 +13,14 @@
 //APP LAYOUT
 .maputnik-layout {
-  font-family: $font-family;
+  font-family: vars.$font-family;
-  color: $color-white;
+  color: vars.$color-white;
  &-main {
    position: fixed;
    bottom: 0;
-    height: calc(100% - #{$toolbar-height + $toolbar-offset});
+    height: calc(100% - #{vars.$toolbar-height + vars.$toolbar-offset});
-    top: $toolbar-height + $toolbar-offset;
+    top: vars.$toolbar-height + vars.$toolbar-offset;
    left: 0;
    right: 0;
    z-index: 3;
@@ -28,12 +30,12 @@
  &-list {
    width: 200px;
-    background-color: $color-black;
+    background-color: vars.$color-black;
  }
  &-drawer {
    width: 370px;
-    background-color: $color-black;
+    background-color: vars.$color-black;
    // scroll-container is position: absolute
    position: relative;
  }
@@ -43,7 +45,7 @@
    bottom: 0;
    right: 0;
    z-index: 1;
-    width: $layout-map-width;
+    width: vars.$layout-map-width;
-    background-color: $color-black;
+    background-color: vars.$color-black;
  }
 }
@@ -1,3 +1,5 @@
@use "vars";
 //OPENLAYERS
 .maputnik-layout {
  .ol-zoom {
@@ -39,7 +41,7 @@
 }
 .maputnik-ol-popup {
-  background: $color-black;
+  background: vars.$color-black;
 }
@@ -74,7 +76,7 @@
  background: #1c1f24;
  border-radius: 2px;
  padding: 6px 8px;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
  z-index: 9999;
  font-size: 12px;
  font-weight: bold;
@@ -1,40 +1,43 @@
@use "mixins";
@use "vars";
 //MODAL
 .maputnik-modal {
  min-width: 350px;
  max-width: 600px;
  overflow: hidden;
-  background-color: $color-black;
+  background-color: vars.$color-black;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  z-index: 3;
  position: relative;
-  font-family: $font-family;
+  font-family: vars.$font-family;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
 }
 .maputnik-modal-section {
-  padding-top: $margin-3;
+  padding-top: vars.$margin-3;
-  padding-bottom: $margin-3;
+  padding-bottom: vars.$margin-3;
  h1 {
-    font-size: $font-size-4;
+    font-size: vars.$font-size-4;
  }
  h2 {
-    font-size: $font-size-5;
+    font-size: vars.$font-size-5;
  }
  /* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */
  min-height: 0;
-  @include flex-column;
+  @include mixins.flex-column;
  flex-shrink: 0;
 }
 .maputnik-modal-sub-section {
-  margin-top: $margin-1;
+  margin-top: vars.$margin-1;
 }
 .maputnik-modal-section--shrink {
@@ -42,14 +45,14 @@
 }
 .maputnik-modal-header {
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
-  padding: $margin-3;
+  padding: vars.$margin-3;
-  @include flex-row;
+  @include mixins.flex-row;
 }
 .maputnik-modal-header-title {
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
  margin: 0;
 }
@@ -66,18 +69,18 @@
 }
 .maputnik-modal-content {
-  padding: $margin-3;
+  padding: vars.$margin-3;
-  @include flex-column;
+  @include mixins.flex-column;
 }
 .maputnik-modal-header-space {
-  @extend .maputnik-space; /* stylelint-disable-line */
+  @extend .maputnik-space !optional; /* stylelint-disable-line */
 }
 //OPEN MODAL
 .maputnik-upload-button {
-  @extend .maputnik-big-button; /* stylelint-disable-line */
+  @extend .maputnik-big-button !optional; /* stylelint-disable-line */
 }
 .maputnik-style-gallery-container {
@@ -88,35 +91,35 @@
  vertical-align: top;
  margin-top: 10px;
  margin-right: 10px;
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
  display: inline-block;
  width: 180px;
-  font-size: $font-size-2;
+  font-size: vars.$font-size-2;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
 }
 .maputnik-public-style-button {
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
-  padding: $margin-3;
+  padding: vars.$margin-3;
  display: block;
  width: 100%;
  &:hover {
-    background-color: $color-midgray;
+    background-color: vars.$color-midgray;
  }
 }
 .maputnik-public-style-header {
-  @include flex-row;
+  @include mixins.flex-row;
 }
 .maputnik-public-style-thumbnail {
  display: block;
-  margin-top: $margin-2;
+  margin-top: vars.$margin-2;
  width: 100%;
  padding-top: calc(400 / 600 * 100%);
  background-size: cover;
-  background-color: $color-midgray;
+  background-color: vars.$color-midgray;
 }
 .maputnik-add-modal {
@@ -139,18 +142,18 @@
 }
 .maputnik-add-layer {
-  @extend .clearfix; /* stylelint-disable-line */
+  @extend .clearfix !optional; /* stylelint-disable-line */
 }
 //ADD MODAL
 .maputnik-add-layer-button {
-  @extend .maputnik-big-button; /* stylelint-disable-line */
+  @extend .maputnik-big-button !optional; /* stylelint-disable-line */
-  margin-right: $margin-3;
+  margin-right: vars.$margin-3;
  float: right;
  display: inline-block;
  margin-top: 3;
-  margin-bottom: $margin-3;
+  margin-bottom: vars.$margin-3;
  text-align: right;
 }
@@ -163,19 +166,19 @@
  vertical-align: top;
  margin-top: 1.5%;
  margin-right: 1.5%;
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
  width: 48.5%;
  display: inline-block;
 }
 .maputnik-public-source-select {
-  padding: $margin-3;
+  padding: vars.$margin-3;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
  background-color: transparent;
  width: 100%;
-  @include flex-row;
+  @include mixins.flex-row;
 }
 .maputnik-public-source-name {
@@ -192,24 +195,24 @@
 }
 .maputnik-active-source-type-editor-header {
-  background-color: $color-gray;
+  background-color: vars.$color-gray;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
-  padding: $margin-2;
+  padding: vars.$margin-2;
-  @include flex-row;
+  @include mixins.flex-row;
 }
 .maputnik-active-source-type-editor-header-id {
  font-weight: 700;
  line-height: 2;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
 }
 .maputnik-active-source-type-editor-content {
-  border-color: $color-gray;
+  border-color: vars.$color-gray;
  border-width: 2px;
  border-style: solid;
-  padding: $margin-2;
+  padding: vars.$margin-2;
  .maputnik-input-block-label {
    width: 30%;
@@ -221,7 +224,7 @@
 }
 .maputnik-add-source {
-  @extend .clearfix; /* stylelint-disable-line */
+  @extend .clearfix !optional; /* stylelint-disable-line */
  .maputnik-input-block-label {
    width: 30%;
@@ -233,17 +236,17 @@
 }
 .maputnik-add-source-button {
-  @extend .maputnik-big-button; /* stylelint-disable-line */
+  @extend .maputnik-big-button !optional; /* stylelint-disable-line */
  display: inline-block;
  margin-top: 0;
-  margin-right: $margin-3;
+  margin-right: vars.$margin-3;
  float: right;
 }
 //EXPORT MODAL
 .maputnik-export-gist {
-  font-size: $font-size-6;
+  font-size: vars.$font-size-6;
  .maputnik-input-block {
    margin-left: 0;
@@ -255,7 +258,7 @@
  }
  span {
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
  }
 }
@@ -291,12 +294,12 @@
  }
  &__shortcut {
-    margin-bottom: $margin-2;
+    margin-bottom: vars.$margin-2;
  }
  dt {
    display: inline;
-    margin-right: $margin-2;
+    margin-right: vars.$margin-2;
  }
  dd {
@@ -1,3 +1,5 @@
@use "vars";
 .maputnik-popup-layer {
  display: flex;
  flex-direction: row;
@@ -11,20 +13,20 @@
 .maputnik-popup-layer__label {
  display: block;
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
-  padding: $margin-2;
+  padding: vars.$margin-2;
-  padding-top: $margin-1;
+  padding-top: vars.$margin-1;
-  padding-bottom: $margin-1;
+  padding-bottom: vars.$margin-1;
 }
 .maputnik-popup-layer-id {
-  padding-left: $margin-2;
+  padding-left: vars.$margin-2;
-  padding-right: 1.6em;
+  padding-right: vars.$margin-2;
-  background-color: $color-midgray;
+  background-color: vars.$color-midgray;
-  color: $color-white;
+  color: vars.$color-white;
 }
 .maputnik-feature-property-popup {
@@ -32,8 +34,9 @@
  overflow-y: auto;
  .maputnik-input-block {
    margin: 0;
-    margin-left: $margin-2;
+    margin-left: vars.$margin-2;
-    margin-top: $margin-2;
+    margin-right: vars.$margin-2;
    margin-top: vars.$margin-2;
  }
 }
@@ -42,6 +45,7 @@
 }
 .maputnik-popup-table-cell {
-  color: $color-lowgray;
+  color: vars.$color-lowgray;
-  padding-left: $margin-2;
+  padding-left: vars.$margin-2;
  padding-right: vars.$margin-2;
 }
@@ -1,13 +1,15 @@
@use "vars";
@use 'sass:color';
 // TOOLBAR
 .maputnik-toolbar {
  position: fixed;
-  height: $toolbar-height;
+  height: vars.$toolbar-height;
  width: 100%;
  z-index: 100;
  left: 0;
-  top: $toolbar-offset;
+  top: vars.$toolbar-offset;
-  background-color: $color-black;
+  background-color: vars.$color-black;
 }
 .maputnik-toolbar-logo-container {
@@ -20,9 +22,9 @@
  flex: 0 0 190px;
  width: 200px;
  text-align: left;
-  background-color: $color-black;
+  background-color: vars.$color-black;
-  padding: $margin-2;
+  padding: vars.$margin-2;
-  height: $toolbar-height;
+  height: vars.$toolbar-height;
  position: relative;
  overflow: hidden;
@@ -33,19 +35,19 @@
  img {
    width: 30px;
-    padding-right: $margin-2;
+    padding-right: vars.$margin-2;
    vertical-align: top;
  }
 }
 .maputnik-toolbar-link {
  vertical-align: top;
-  height: $toolbar-height;
+  height: vars.$toolbar-height;
  display: inline-block;
-  padding: $margin-3;
+  padding: vars.$margin-3;
-  font-size: $font-size-5;
+  font-size: vars.$font-size-5;
  cursor: pointer;
-  color: $color-white;
+  color: vars.$color-white;
  text-decoration: none;
  line-height: 20px;
@@ -54,30 +56,30 @@
  }
  &:hover {
-    background-color: $color-midgray;
+    background-color: vars.$color-midgray;
  }
 }
 .maputnik-toolbar-link--highlighted {
  line-height: 1;
-  padding: $margin-2 $margin-3;
+  padding: vars.$margin-2 vars.$margin-3;
  .maputnik-toolbar-link-wrapper {
-    background-color: $color-white;
+    background-color: vars.$color-white;
    border-radius: 2px;
-    padding: $margin-2;
+    padding: vars.$margin-2;
-    margin-top: $margin-1;
+    margin-top: vars.$margin-1;
-    color: $color-black;
+    color: vars.$color-black;
    display: block;
  }
  &:hover {
-    background-color: $color-black;
+    background-color: vars.$color-black;
  }
  &:hover .maputnik-toolbar-link-wrapper {
-    background-color: color.adjust($color-midgray, $lightness: 12%);
+    background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
-    color: $color-white;
+    color: vars.$color-white;
  }
 }
@@ -87,39 +89,38 @@
 .maputnik-toolbar-version {
  font-size: 10px;
-  margin-left: 4px;
+  margin: 0 4px;
  white-space: nowrap;
 }
 .maputnik-toolbar-action {
  background: inherit;
  border-width: 0;
-  @extend .maputnik-toolbar-link; /* stylelint-disable-line */
+  @extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
 }
 .maputnik-toolbar-select {
  background: inherit;
  border-width: 0;
-  @extend .maputnik-toolbar-link; /* stylelint-disable-line */
+  @extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
  select {
-    margin-left: 6px;
+    margin: 0 6px;
    border-width: 0;
    display: inline;
    width: auto;
-    border: solid 1px $color-midgray;
+    border: solid 1px vars.$color-midgray;
    vertical-align: inherit;
    margin-top: -2px;
  }
 }
 .maputnik-icon-text {
-  padding-left: $margin-1;
+  padding: 0 vars.$margin-1;
 }
 .maputnik-icon-action {
  display: inline;
-  margin-left: $margin-1;
+  margin: 0 vars.$margin-1;
 }
 .maputnik-toolbar__inner {
@@ -141,7 +142,7 @@
  height: 100%;
  text-align: center;
  display: block;
-  background-color: $color-black;
+  background-color: vars.$color-black;
  z-index: 999;
  line-height: 40px;
  left: 0;
@@ -150,7 +151,7 @@
  &:active,
  &:focus {
    width: 100%;
-    border-color: $color-lowgray;
+    border-color: vars.$color-lowgray;
  }
 }
@@ -1,16 +1,18 @@
@use "vars";
 // ZOOM FUNC
 .maputnik-make-zoom-function {
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
-  padding: 0 $margin-2 0 0;
+  padding: 0 vars.$margin-2 0 0;
-  @extend .maputnik-icon-button; /* stylelint-disable-line */
+  @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
 }
 // ZOOM PROPERTY
 .maputnik-zoom-spec-property {
-  @extend .clearfix; /* stylelint-disable-line */
+  @extend .clearfix !optional; /* stylelint-disable-line */
 }
 .maputnik-zoom-spec-property-label {
@@ -19,8 +21,8 @@
 }
 .maputnik-zoom-spec-property-stop-item {
-  margin-bottom: $margin-2;
+  margin-bottom: vars.$margin-2;
-  margin-top: $margin-2;
+  margin-top: vars.$margin-2;
 }
 .maputnik-zoom-spec-property-stop-edit {
@@ -49,13 +51,12 @@
  padding-top: 0;
  vertical-align: middle;
-  @extend .maputnik-icon-button; /* stylelint-disable-line */
+  @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
 }
 .maputnik-add-stop {
  display: inline-block;
  float: right;
-  margin-right: $margin-3;
+  margin-right: vars.$margin-3;
 }
 // DATA FUNC
@@ -63,9 +64,9 @@
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
-  padding: 0 $margin-2 0 0;
+  padding: 0 vars.$margin-2 0 0;
-  @extend .maputnik-icon-button; /* stylelint-disable-line */
+  @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
 }
 .maputnik-data-spec-property {
@@ -86,7 +87,7 @@
    .maputnik-doc-wrapper {
      width: 25%;
-      color: $color-lowgray;
+      color: vars.$color-lowgray;
    }
    .maputnik-doc-wrapper:hover {
@@ -1,22 +1,22 @@
-@import 'vars';
+@use 'vars';
-@import 'mixins';
+@use 'mixins';
-@import 'reset';
+@use 'reset';
-@import 'base';
+@use 'base';
-@import 'components';
+@use 'components';
-@import 'scrollbar';
+@use 'scrollbar';
-@import 'picker';
+@use 'picker';
-@import 'toolbar';
+@use 'toolbar';
-@import 'modal';
+@use 'modal';
-@import 'export';
+@use 'export';
-@import 'layout';
+@use 'layout';
-@import 'layer';
+@use 'layer';
-@import 'input';
+@use 'input';
-@import 'filtereditor';
+@use 'filtereditor';
-@import 'zoomproperty';
+@use 'zoomproperty';
-@import 'popup';
+@use 'popup';
-@import 'map';
+@use 'map';
-@import 'codemirror';
+@use 'codemirror';
-@import 'react-collapse';
+@use 'react-collapse';
 .maputnik-layout {
  height: 100vh;
@@ -29,14 +29,14 @@
 }
 .maputnik-data-fieldset-inner {
-  background: $color-black;
+  background: vars.$color-black;
-  border: solid 1px $color-midgray;
+  border: solid 1px vars.$color-midgray;
  border-radius: 2px;
  position: relative;
  // HACK: Overide
  .maputnik-input-block {
-    margin: $margin-2;
+    margin: vars.$margin-2;
  }
  .maputnik-add-stop {
@@ -49,8 +49,8 @@
  }
  .maputnik-toolbox {
-    margin: $margin-3;
+    margin: vars.$margin-3;
-    margin-top: $margin-3;
+    margin-top: vars.$margin-3;
    text-align: right;
  }
@@ -58,40 +58,40 @@
 .maputnik-data-spec-property {
  legend {
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
-    margin-bottom: $margin-3;
+    margin-bottom: vars.$margin-3;
  }
  .maputnik-data-spec-property-group {
-    margin-bottom: $margin-2;
+    margin-bottom: vars.$margin-2;
  }
 }
 .maputnik-data-spec-block {
-  margin: $margin-3;
+  margin: vars.$margin-3;
 }
 .maputnik-function-stop {
-  padding-left: $margin-2;
+  padding-left: vars.$margin-2;
-  padding-right: $margin-2;
+  padding-right: vars.$margin-2;
 }
 .maputnik-function-stop-table {
  text-align: left;
-  margin-bottom: $margin-2;
+  margin-bottom: vars.$margin-2;
  box-sizing: border-box;
  width: 100%;
  thead th {
-    padding: $margin-1 $margin-2;
+    padding: vars.$margin-1 vars.$margin-2;
    padding-left: 0;
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
  }
  td, th {
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
-    color: $color-white;
+    color: vars.$color-white;
    // HACK
    > * {
@@ -102,8 +102,7 @@
    &:not(:first-child)
    {
-      padding-top: $margin-1;
+      padding: vars.$margin-1;
      padding-left: $margin-2;
    }
    &:nth-child(1) {
@@ -148,10 +147,10 @@
  }
  caption {
-    color: $color-lowgray;
+    color: vars.$color-lowgray;
    text-align: left;
-    border-top: solid 1px $color-black;
+    border-top: solid 1px vars.$color-black;
-    font-size: $font-size-6;
+    font-size: vars.$font-size-6;
    height: 0px;
    overflow: hidden;
  }
@@ -3,7 +3,7 @@
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "types": ["geojson"],
+      "types": ["geojson", "@types/wicg-file-system-access"],
      "module": "ESNext",
      "skipLibCheck": true,
@@ -22,12 +22,13 @@
      "noFallthroughCasesInSwitch": true
    },
    "include": ["src", "cypress/e2e"],
    "exclude": ["dist"],
    "references": [{ "path": "./tsconfig.node.json" }],
    // TODO: Remove when issue is resolved https://github.com/cypress-io/cypress/issues/27448
    "ts-node": {
      "compilerOptions": {
        "module": "ESNext",
-        "moduleResolution": "Node"
+        "moduleResolution": "Node",
      }
    }
 }
@@ -18,7 +18,7 @@ export default defineConfig({
      values: {
        "_token_stack:": "",
      },
-    }) as any,
+    }),
    react(),
    istanbul({
      cypress: true,