Merge 3e7e1e6ce9 into c58191ff62

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>

.eslintrc

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

.github/dependabot.yml

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

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

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

.github/workflows/ci.yml

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

.github/workflows/codeql-analysis.yml

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

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

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

.github/workflows/deploy.yml

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

.github/workflows/release.yml

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

.gitignore

@@ -36,3 +36,11 @@ public
 /cypress/screenshots
 /dist/
 /desktop/version.go
+
+# IDE
+.vscode/
+.idea/
+
+# Window metadata files
+/desktop/winres/winres.json
+/desktop/*.syso

.nvmrc

@@ -1 +1 @@
-18.19
+22.13

CHANGELOG.md

@@ -1,9 +1,20 @@
 ## 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.1

README.md

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

build/release-notes.js

@@ -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];
@@ -44,5 +44,4 @@ const templatedReleaseNotes = `${header}
 
 ${latest.changelog}`;
 
-// eslint-disable-next-line eol-last
 process.stdout.write(templatedReleaseNotes.trimEnd());

cypress/e2e/accessibility.cy.ts

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

cypress/e2e/history.cy.ts

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

cypress/e2e/i18n.cy.ts

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

cypress/e2e/keyboard.cy.ts

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

cypress/e2e/layers.cy.ts

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

cypress/e2e/map.cy.ts

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

cypress/e2e/modal-driver.ts

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

cypress/e2e/modals.cy.ts

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

desktop/Makefile

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

desktop/README.md

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

desktop/maputnik.go

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

desktop/winres/winres_template.json

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

eslint.config.js

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

i18next-parser.config.ts

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

package.json

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

src/components/App.tsx

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

src/components/AppToolbar.tsx

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

src/components/Block.tsx

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

src/components/Doc.tsx

@@ -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,7 +87,12 @@ 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>
+        }
       </>
     );
   }
-}
+}

src/components/InputUrl.tsx

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

src/components/LayerList.tsx

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

src/components/MapMaplibreGl.tsx

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

src/components/MapOpenLayers.tsx

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

src/components/ModalExport.tsx

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

src/components/ModalOpen.tsx

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

src/components/ModalSettings.tsx

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

src/components/ModalSources.tsx

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

src/components/ModalSourcesTypeEditor.tsx

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

src/components/SmallError.scss

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

src/config/styles.json

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

src/i18n.ts

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

src/libs/codemirror-mgl.ts

@@ -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 found: MarkerRangeWithMessage[] = tryToParse(text);
-  const {context} = opts;
 
-  parser.parseError = (str: string, hash: any) => {
+  const {context} = opts;
-    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 {
-    parser.parse(text);
-  }
-  catch (e) {
-    // ignore errors
-  }
 
   if (found.length > 0) {
     // JSON invalid so don't go any further

src/libs/field-spec-additional.ts

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

src/libs/metadata.ts

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

src/libs/style.ts

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

src/libs/urlopen.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import style from './style'
 
 export function initialStyleUrl() {

src/libs/zoomcontrol.ts

@@ -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;
@@ -25,6 +21,14 @@ export default class ZoomControl {
   updateZoomLevel() {
     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());

src/locales/README.md

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

src/locales/de/translation.json

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

src/locales/fr/translation.json

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

src/locales/he/translation.json

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

src/locales/it/translation.json

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

src/locales/ja/translation.json

@@ -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": "レイアウトプロパティ",

src/locales/zh/translation.json

@@ -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": "布局属性",

src/styles/_base.scss

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

src/styles/_codemirror.scss

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

src/styles/_components.scss

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

src/styles/_export.scss

@@ -10,7 +10,7 @@
   }
 
   input.maputnik-string {
-    margin-left: 5px;
+    margin: 0 5px;
     width: 60%;
     display: inline-block;
   }

src/styles/_filtereditor.scss

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

src/styles/_input.scss

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

src/styles/_layer.scss

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

src/styles/_layout.scss

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

src/styles/_map.scss

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

src/styles/_modal.scss

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

src/styles/_popup.scss

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

src/styles/_toolbar.scss

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

src/styles/_zoomproperty.scss

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

src/styles/index.scss

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

tsconfig.json

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

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
       values: {
         "_token_stack:": "",
       },
-    }) as any,
+    }),
     react(),
     istanbul({
       cypress: true,