For local style development, configure CORS & expose a public directory

Use .png as the XYZ format hint for raster & raster-dem tiles
Add tileSize field for raster and raster-dem tile sources (#946 ) (#947 )
2026-08-29 00:17:27 +00:00 · 2024-11-05 15:41:04 -08:00 · 2024-10-31 10:08:51 -07:00 · 2024-10-15 10:11:57 +03:00 · 2024-09-29 16:09:22 +03:00 · 2024-09-29 15:01:30 +03:00
41 changed files with 1361 additions and 171 deletions
@@ -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 desktop/bin/
+          zip -r "desktop-${{ steps.package-version.outputs.current-version }}"  desktop/bin/

      - name: Build Release Notes
        id: release_notes
@@ -97,7 +95,7 @@ jobs:
          tag: ${{ steps.tag_version.outputs.new_tag }}
          name: ${{ steps.tag_version.outputs.new_tag }}
          bodyFile: ${{ steps.release_notes.outputs.release_notes }}
-          artifacts: "dist.zip,desktop.zip"
+          artifacts: "desktop-${{ steps.package-version.outputs.current-version }}.zip"
          allowUpdates: true
          draft: false
          prerelease: false
@@ -36,3 +36,11 @@ public
 /cypress/screenshots
 /dist/
 /desktop/version.go
+
+# IDE
+.vscode/
+.idea/
+
+# Window metadata files
+/desktop/winres/winres.json
+/desktop/*.syso
@@ -1,12 +1,17 @@
 ## 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
+- For local style development, configure CORS & expose a public directory
 - _...Add new stuff here..._

 ### 🐞 Bug fixes
 - _...Add new stuff here..._

-## 2.1.0
+## 2.1.1

 ### ✨ Features and improvements

@@ -36,6 +36,29 @@ 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. 
+
+### Local Style Development
+
+As a Maputnik developer, you can serve styles on the same server that used to develop the Maputnik app.  This is useful if you want to test a style that is not public, or is in development.
+
+For example,
+
+1. Copy `unpublishedstyle.json` to the folder `/styles`
+2. `npm run start` to start the `vite` local server
+3. Verify by going to http://localhost:8888/styles/unpublishedstyle.json
+4. Edit `src/config/styles.json`, then your new local style should be available:  *Open > Gallery Styles*
+
+```json
+  {
+    "id": "localstyle",
+    "title": "unpublishedstyle.json",
+    "url": "http://localhost:8888/styles/unpublishedstyle.json"
+  },
+```
+
+---
+
 ### 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 +93,6 @@ npm run lint-css
 npm run sort-styles
 ```

-
 ## Tests
 For E2E testing we use [Cypress](https://www.cypress.io/)

@@ -42,7 +42,7 @@ if (previous) {
 }
 const templatedReleaseNotes = `${header}

-${latest.changelog}
+${latest.changelog}`;

 // eslint-disable-next-line eol-last
 process.stdout.write(templatedReleaseNotes.trimEnd());
@@ -61,9 +61,42 @@ 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", () => {
+      let 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 raster source", () => {
+      let 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", () => {
@@ -160,6 +193,18 @@ describe("modals", () => {
      ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
    });

+    it("stadia access token", () => {
+      let 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");
@@ -1,16 +1,22 @@
 SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
-DESKTOP_VERSION := 1.1.1
-EDITOR_VERSION := $(shell node -p "require('../package.json').version")
+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
 	@echo "package main\n" >> version.go
-	@echo "const DesktopVersion = \"$(DESKTOP_VERSION)\"" >> version.go
-	@echo "const EditorVersion = \"$(EDITOR_VERSION)\"" >> version.go
+	@echo "const Version = \"$(VERSION)\"" >> version.go

 rice-box.go: $(GOBIN)/rice editor/pull_release
 	$(GOBIN)/rice embed-go
@@ -1,4 +1,5 @@
 # Maputnik Desktop [![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
+
 ---

 A Golang based cross platform executable for integrating Maputnik locally.
@@ -11,7 +12,7 @@ Report issues on [maplibre/maputnik](https://github.com/maplibre/maputnik).

 ## Install

-You can download a single binary for Linux, OSX or Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/editor/releases/latest).
+You can download a zip file containing desktop binaries for Linux, OSX and Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/releases/latest).

 ### Usage

@@ -53,12 +54,12 @@ maputnik --static ./localFolder

 `maputnik` exposes the configured styles via a HTTP API.

-| Method                          | Description
-|---------------------------------|---------------------------------------
-| `GET /styles`                   | List the ID of all configured style files
-| `GET /styles/{filename}`        | Get contents of a single style file
-| `PUT /styles/{filename}`        | Update contents of a style file
-| `WEBSOCKET /ws`                 | Listen to change events for the configured style files
+| Method                   | Description                                            |
+| ------------------------ | ------------------------------------------------------ |
+| `GET /styles`            | List the ID of all configured style files              |
+| `GET /styles/{filename}` | Get contents of a single style file                    |
+| `PUT /styles/{filename}` | Update contents of a style file                        |
+| `WEBSOCKET /ws`          | Listen to change events for the configured style files |

 ### Build

@@ -69,4 +70,4 @@ npm install
 npm run build-desktop
 ```

-You should now find the `maputnik` binary in your `bin` directory.
+You should now find the `maputnik` binary in your `desktop/bin` directory.
@@ -17,7 +17,7 @@ func main() {
 	app := cli.NewApp()
 	app.Name = "maputnik"
 	app.Usage = "Server for integrating Maputnik locally"
-	app.Version = "Editor: " + EditorVersion + "; Desktop: " + DesktopVersion
+	app.Version = Version

 	app.Flags = []cli.Flag{
 		&cli.StringFlag{
@@ -0,0 +1,60 @@
+{
+  "RT_GROUP_ICON": {
+    "APP": {
+      "0000": [
+        "../../src/img/maputnik.png"
+      ]
+    }
+  },
+  "RT_MANIFEST": {
+    "#1": {
+      "0409": {
+        "identity": {
+          "name": "Maputnik",
+          "version": "{{.Version}}"
+        },
+        "description": "A MapLibre GL visual style editor",
+        "minimum-os": "win7",
+        "execution-level": "as invoker",
+        "ui-access": false,
+        "auto-elevate": false,
+        "dpi-awareness": "system",
+        "disable-theming": false,
+        "disable-window-filtering": false,
+        "high-resolution-scrolling-aware": false,
+        "ultra-high-resolution-scrolling-aware": false,
+        "long-path-aware": false,
+        "printer-driver-isolation": false,
+        "gdi-scaling": false,
+        "segment-heap": false,
+        "use-common-controls-v6": false
+      }
+    }
+  },
+  "RT_VERSION": {
+    "#1": {
+      "0000": {
+        "fixed": {
+          "file_version": "{{.Version}}",
+          "product_version": "{{.Version}}"
+        },
+        "info": {
+          "0409": {
+            "Comments": "https://github.com/maplibre/maputnik",
+            "CompanyName": "Maputnik",
+            "FileDescription": "A MapLibre GL visual style editor",
+            "FileVersion": "{{.Version}}",
+            "InternalName": "Maputnik",
+            "LegalCopyright": "MIT License",
+            "LegalTrademarks": "",
+            "OriginalFilename": "Maputnik.exe",
+            "PrivateBuild": "",
+            "ProductName": "Maputnik",
+            "ProductVersion": "{{.Version}}",
+            "SpecialBuild": ""
+          }
+        }
+      }
+    }
+  }
+}
@@ -1,6 +1,6 @@
 export default {
  output: 'src/locales/$LOCALE/$NAMESPACE.json',
-  locales: [ 'ja', 'he','zh' ],
+  locales: [ 'de', 'fr', 'he', '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.
@@ -1,12 +1,12 @@
 {
  "name": "maputnik",
-  "version": "2.1.0",
+  "version": "2.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "maputnik",
-      "version": "2.1.0",
+      "version": "2.1.1",
      "license": "MIT",
      "dependencies": {
        "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
@@ -112,7 +112,7 @@
        "stylelint-scss": "^6.2.1",
        "typescript": "^5.4.3",
        "uuid": "^9.0.1",
-        "vite": "^5.2.6",
+        "vite": "^5.4.6",
        "vite-plugin-istanbul": "^6.0.0"
      }
    },
@@ -1767,9 +1767,9 @@
      }
    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
-      "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
      "cpu": [
        "arm"
      ],
@@ -1780,9 +1780,9 @@
      ]
    },
    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
-      "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
      "cpu": [
        "arm64"
      ],
@@ -1793,9 +1793,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
-      "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
      "cpu": [
        "arm64"
      ],
@@ -1806,9 +1806,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
-      "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
      "cpu": [
        "x64"
      ],
@@ -1819,9 +1819,22 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
-      "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
      "cpu": [
        "arm"
      ],
@@ -1832,9 +1845,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
      "cpu": [
        "arm64"
      ],
@@ -1845,9 +1858,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
-      "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
      "cpu": [
        "arm64"
      ],
@@ -1857,10 +1870,23 @@
        "linux"
      ]
    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
      "cpu": [
        "riscv64"
      ],
@@ -1870,10 +1896,23 @@
        "linux"
      ]
    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
-      "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
      "cpu": [
        "x64"
      ],
@@ -1884,9 +1923,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
-      "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
      "cpu": [
        "x64"
      ],
@@ -1897,9 +1936,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
-      "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
      "cpu": [
        "arm64"
      ],
@@ -1910,9 +1949,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
-      "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
      "cpu": [
        "ia32"
      ],
@@ -1923,9 +1962,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
-      "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
      "cpu": [
        "x64"
      ],
@@ -8703,9 +8742,9 @@
      "dev": true
    },
    "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
      "dev": true
    },
    "node_modules/picomatch": {
@@ -8807,9 +8846,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
      "dev": true,
      "funding": [
        {
@@ -8827,8 +8866,8 @@
      ],
      "dependencies": {
        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
      },
      "engines": {
        "node": "^10 || ^12 || >=14"
@@ -9679,9 +9718,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
-      "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
      "dev": true,
      "dependencies": {
        "@types/estree": "1.0.5"
@@ -9694,19 +9733,22 @@
        "npm": ">=8.0.0"
      },
      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.13.0",
-        "@rollup/rollup-android-arm64": "4.13.0",
-        "@rollup/rollup-darwin-arm64": "4.13.0",
-        "@rollup/rollup-darwin-x64": "4.13.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.13.0",
-        "@rollup/rollup-linux-arm64-musl": "4.13.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-musl": "4.13.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.13.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.13.0",
-        "@rollup/rollup-win32-x64-msvc": "4.13.0",
+        "@rollup/rollup-android-arm-eabi": "4.22.4",
+        "@rollup/rollup-android-arm64": "4.22.4",
+        "@rollup/rollup-darwin-arm64": "4.22.4",
+        "@rollup/rollup-darwin-x64": "4.22.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+        "@rollup/rollup-linux-arm64-musl": "4.22.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-musl": "4.22.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+        "@rollup/rollup-win32-x64-msvc": "4.22.4",
        "fsevents": "~2.3.2"
      }
    },
@@ -10102,9 +10144,9 @@
      }
    },
    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
      "engines": {
        "node": ">=0.10.0"
      }
@@ -11358,14 +11400,14 @@
      }
    },
    "node_modules/vite": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
-      "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
+      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
      "dev": true,
      "dependencies": {
-        "esbuild": "^0.20.1",
-        "postcss": "^8.4.36",
-        "rollup": "^4.13.0"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
      },
      "bin": {
        "vite": "bin/vite.js"
@@ -11384,6 +11426,7 @@
        "less": "*",
        "lightningcss": "^1.21.0",
        "sass": "*",
+        "sass-embedded": "*",
        "stylus": "*",
        "sugarss": "*",
        "terser": "^5.4.0"
@@ -11401,6 +11444,9 @@
        "sass": {
          "optional": true
        },
+        "sass-embedded": {
+          "optional": true
+        },
        "stylus": {
          "optional": true
        },
@@ -11483,6 +11529,412 @@
        "node": ">= 8"
      }
    },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
    "node_modules/void-elements": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "maputnik",
-  "version": "2.1.0",
+  "version": "2.1.1",
  "description": "A MapLibre GL visual style editor",
  "type": "module",
  "main": "''",
@@ -143,7 +143,7 @@
    "stylelint-scss": "^6.2.1",
    "typescript": "^5.4.3",
    "uuid": "^9.0.1",
-    "vite": "^5.2.6",
+    "vite": "^5.4.6",
    "vite-plugin-istanbul": "^6.0.0"
  }
 }
@@ -230,7 +230,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 +254,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 +274,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                  );
                })}
              </select>
-            </label>
+            </IconText>
          </ToolbarSelect>

          <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
@@ -56,7 +56,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
      event.stopPropagation();
    }
-    event.preventDefault();
+    if (event.nativeEvent.target.nodeName !== "A") {
+      event.preventDefault();
+    }
  }

  render() {
@@ -18,6 +18,8 @@ type DocProps = {
    'sdk-support'?: {
      [key: string]: typeof headers
    }
+    docUrl?: string,
+    docUrlLinkText?: string
  }
 };

@@ -25,7 +27,7 @@ export default class Doc extends React.Component<DocProps> {
  render () {
    const {fieldSpec} = this.props;

-    const {doc, values} = fieldSpec;
+    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
    const sdkSupport = fieldSpec['sdk-support'];

    const renderValues = (
@@ -85,6 +87,11 @@ export default class Doc extends React.Component<DocProps> {
            </table>
          </div>
        }
+        {docUrl && docUrlLinkText &&
+          <div className="SpecDoc__learn-more">
+            <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
+          </div>
+        }
      </>
    );
  }
@@ -14,6 +14,7 @@ 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'

 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
  ReactDOM.render(popup, mountNode);
@@ -67,9 +68,11 @@ type MapMaplibreGlInternalProps = {
 } & WithTranslation;

 type MapMaplibreGlState = {
-  map: Map | null
-  inspect: MaplibreInspect | null
-  zoom?: number
+  map: Map | null;
+  inspect: MaplibreInspect | null;
+  geocoder: MaplibreGeocoder | null;
+  zoomControl: ZoomControl | null;
+  zoom?: number;
 };

 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -87,7 +90,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    this.state = {
      map: null,
      inspect: null,
+      geocoder: null,
+      zoomControl: null,
    }
+    i18next.on('languageChanged', () => {
+      this.forceUpdate();
+    })
  }


@@ -125,6 +133,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
        this.state.inspect!.render();
      }, 500);
    }
+    
  }

  componentDidMount() {
@@ -152,9 +161,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
    map.showOverdrawInspector = mapOpts.showOverdrawInspector!;

-    this.initGeocoder(map);
+    let 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 +198,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
      this.setState({
        map,
        inspect,
+        geocoder,
+        zoomControl,
        zoom: map.getZoom()
      });
    })
@@ -261,10 +272,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"
@@ -130,6 +130,12 @@ 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">
@@ -156,6 +156,14 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
        />

+        <FieldString
+          label={fsa.maputnik.stadia_access_token.label}
+          fieldSpec={fsa.maputnik.stadia_access_token}
+          data-wd-key="modal:settings.maputnik:stadia_access_token"
+          value={metadata['maputnik:stadia_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
+        />
+
        <FieldArray
          label={t("Center")}
          fieldSpec={latest.$root.center}
@@ -42,7 +42,7 @@ class PublicSource extends React.Component<PublicSourceProps> {

 function editorMode(source: SourceSpecification) {
  if(source.type === 'raster') {
-    if(source.tiles) return 'tilexyz_raster'
+    if(source.tiles) return 'tile_raster'
    return 'tilejson_raster'
  }
  if(source.type === 'raster-dem') {
@@ -50,7 +50,7 @@ function editorMode(source: SourceSpecification) {
    return 'tilejson_raster-dem'
  }
  if(source.type === 'vector') {
-    if(source.tiles) return 'tilexyz_vector'
+    if(source.tiles) return 'tile_vector'
    return 'tilejson_vector'
  }
  if(source.type === 'geojson') {
@@ -142,21 +142,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 +167,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 +226,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,9 +235,9 @@ 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)')],
          ['image', t('Image')],
@@ -240,6 +245,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
        ]}
        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 +255,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
      <InputButton
        className="maputnik-add-source-button"
        onClick={this.onAdd}
+        data-wd-key="modal:sources.add.add_source"
      >
        {t("Add Source")}
      </InputButton>
@@ -11,7 +11,7 @@ import FieldCheckbox from './FieldCheckbox'
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next'

-export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
+export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "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}
@@ -291,11 +306,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}
@@ -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"
  },
@@ -65,6 +71,12 @@
    "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/v2/light.json?key=d828297496b11844",
+    "thumbnail": "https://github.com/user-attachments/assets/911f9765-4a7d-4736-9ec0-f2d4c90ae587"
+  },
  {
    "id": "stadia-outdoors",
    "title": "Stadia Outdoors",
@@ -4,9 +4,11 @@ import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";

 export const supportedLanguages = {
+  "de": "Deutsch",
  "en": "English",
-  "ja": "日本語",
+  "fr": "Français",
  "he": "עברית",
+  "ja": "日本語",
  "zh": "简体中文"
 } as const;

@@ -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.")
    },
  }
 })
@@ -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
@@ -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.label} <span></span>
-    `;
-    this._textEl = this._container.querySelector("span");
-    
+    this.setLabel("Zoom:");
    this.addEventListeners();
    
    return this._container;
@@ -26,6 +22,14 @@ export default class ZoomControl {
    this._textEl!.innerHTML = this._map!.getZoom().toFixed(2);
  }

+  setLabel(label: string) {
+    this._container!.innerHTML = `
+      ${label} <span></span>
+    `;
+    this._textEl = this._container!.querySelector("span");
+    this.updateZoomLevel();
+  }
+  
  addEventListeners (){
    this._map!.on('render', () => this.updateZoomLevel());
    this._map!.on('zoomIn', () => this.updateZoomLevel());
@@ -0,0 +1,60 @@
+## Internationalization
+
+The process of internationlization 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)       | 
+| ja       | Japanese           | [@keichan34](https://github.com/keichan34) | 
+| zh       | Simplified Chinese | [@jieme](https://github.com/jieme)         | 
+
+You can test the UI in different languages using the dropdown in the top menu
+Note that Maputnik automatically localize based on browser language settings and stores this language in local storage.
+You can use incognito mode to check a first time usage.
+
+
@@ -0,0 +1,190 @@
+{
+  "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",
+  "Export": "Exportieren",
+  "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",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0> &mdash; Öffnet die aktuelle Ansicht auf openstreetmap.org",
+  "Export Style": "Stil exportieren",
+  "Download Style": "Stil herunterladen",
+  "Download a JSON style to your computer.": "Lade einen JSON-Stil auf deinen Computer herunter.",
+  "Download HTML": "HTML herunterladen",
+  "Cancel": "Abbrechen",
+  "Open Style": "Stil öffnen",
+  "Upload Style": "Stil hochladen",
+  "Upload a JSON style from your computer.": "Lade einen JSON-Stil von deinem Computer hoch.",
+  "Style file": "Stildatei",
+  "Upload": "Hochladen",
+  "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)",
+  "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",
+  "Tile Size": "Kachelgröße",
+  "Encoding": "Kodierung",
+  "Error:": "Fehler:",
+  "MapTiler Access Token": "MapTiler Zugriffstoken",
+  "Public access token for MapTiler Cloud.": "Öffentlicher Zugriffstoken für MapTiler Cloud.",
+  "Learn More": "Mehr erfahren",
+  "Thunderforest Access Token": "Thunderforest Zugriffstoken",
+  "Public access token for Thunderforest services.": "Öffentlicher Zugriffstoken für Thunderforest-Dienste.",
+  "Stadia Maps API Key": "Stadia Maps API-Schlüssel",
+  "API key for Stadia Maps.": "API-Schlüssel für Stadia Maps.",
+  "Style Renderer": "Stil-Renderer",
+  "Choose the default Maputnik renderer for this style.": "Wähle den Standard-Renderer für diesen Stil aus.",
+  "Language": "Sprache",
+  "Press <1>ESC</1> to lose focus of any input box": "Drück <1>ESC</1>, um den Fokus von jedem Eingabefeld zu verlieren"
+}
@@ -0,0 +1,197 @@
+{
+  "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",
+  "Export": "Exporter",
+  "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",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0> &mdash; Ouvre la vue actuelle sur openstreetmap.org",
+  "Export Style": "Exporter le style",
+  "Download Style": "Télécharger le style",
+  "Download a JSON style to your computer.": "Téléchargez un style JSON sur votre ordinateur.",
+  "Download HTML": "Télécharger HTML",
+  "Cancel": "Annuler",
+  "Open Style": "Ouvrir le style",
+  "Upload Style": "Transférer un style",
+  "Upload a JSON style from your computer.": "Transférer un style JSON depuis votre ordinateur.",
+  "Style file": "Fichier de style",
+  "Upload": "Transférer",
+  "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)",
+  "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",
+  "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"
+}
@@ -34,7 +34,6 @@
  "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,7 +81,6 @@
  "Close modal": "סגירת חלונית",
  "Debug": "דיבאג",
  "Options": "אפשרויות",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
  "Export Style": "ייצוא של הסטייל",
  "Download Style": "הורדה של הסטייל",
  "Download a JSON style to your computer.": "הורדה של הסטייל למחשב",
@@ -148,9 +146,9 @@
  "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)",
  "Image": "תמונה",
@@ -164,6 +162,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 +172,18 @@
  "GeoJSON URL": "כתובת GeoJSON",
  "GeoJSON": "GeoJSON",
  "Cluster": "קיבוץ",
+  "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"
 }
@@ -34,7 +34,6 @@
  "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,7 +81,6 @@
  "Close modal": "モーダルを閉じる",
  "Debug": "デバッグ",
  "Options": "設定",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
  "Export Style": "スタイルをエクスポート",
  "Download Style": "スタイルをダウンロード",
  "Download a JSON style to your computer.": "パソコンにJSONスタイルをダウンロードします。",
@@ -148,9 +146,9 @@
  "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)",
  "Image": "画像",
@@ -164,6 +162,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 +172,20 @@
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "クラスタ",
+  "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": "レイアウトプロパティ",
@@ -34,7 +34,6 @@
  "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,7 +81,6 @@
  "Close modal": "关闭模态框",
  "Debug": "调试",
  "Options": "选项",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
  "Export Style": "导出样式",
  "Download Style": "下载样式",
  "Download a JSON style to your computer.": "将JSON样式下载到您的电脑。",
@@ -148,9 +146,9 @@
  "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)",
  "Image": "图像",
@@ -164,6 +162,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 +172,20 @@
  "GeoJSON URL": "GeoJSON URL",
  "GeoJSON": "GeoJSON",
  "Cluster": "聚合",
+  "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": "布局属性",
@@ -10,7 +10,7 @@
  }

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

 .maputnik-filter-editor-operator {
-  margin-left: 2%;
+  margin: 0 2%;
  display: inline-block;
  width: 17%;

@@ -30,7 +30,7 @@
 .maputnik-filter-editor-args {
  display: inline-block;
  width: 54%;
-  margin-left: 2%;
+  margin: 0 2%;

  .maputnik-string,
  .maputnik-number {
@@ -107,6 +107,9 @@

  height: 24px;
 }
+[dir="rtl"] .maputnik-select {
+  background: $color-gray url("#{$icon-down-arrow}") left center no-repeat;
+}

 // MULTIBUTTON
 .maputnik-multibutton {
@@ -178,7 +178,7 @@
  }

  &-group-content {
-    margin-left: $margin-3;
+    margin: 0 $margin-3;
  }
 }

@@ -22,7 +22,7 @@

 .maputnik-popup-layer-id {
  padding-left: $margin-2;
-  padding-right: 1.6em;
+  padding-right: $margin-2;
  background-color: $color-midgray;
  color: $color-white;
 }
@@ -33,6 +33,7 @@
  .maputnik-input-block {
    margin: 0;
    margin-left: $margin-2;
+    margin-right: $margin-2;
    margin-top: $margin-2;
  }
 }
@@ -44,4 +45,5 @@
 .maputnik-popup-table-cell {
  color: $color-lowgray;
  padding-left: $margin-2;
+  padding-right: $margin-2;
 }
@@ -87,7 +87,7 @@

 .maputnik-toolbar-version {
  font-size: 10px;
-  margin-left: 4px;
+  margin: 0 4px;
  white-space: nowrap;
 }

@@ -103,7 +103,7 @@
  @extend .maputnik-toolbar-link; /* stylelint-disable-line */

  select {
-    margin-left: 6px;
+    margin: 0 6px;
    border-width: 0;
    display: inline;
    width: auto;
@@ -114,12 +114,12 @@
 }

 .maputnik-icon-text {
-  padding-left: $margin-1;
+  padding: 0 $margin-1;
 }

 .maputnik-icon-action {
  display: inline;
-  margin-left: $margin-1;
+  margin: 0 $margin-1;
 }

 .maputnik-toolbar__inner {
@@ -102,8 +102,7 @@

    &:not(:first-child)
    {
-      padding-top: $margin-1;
-      padding-left: $margin-2;
+      padding: $margin-1;
    }

    &:nth-child(1) {
@@ -5,8 +5,10 @@ import istanbul from "vite-plugin-istanbul";

 export default defineConfig({
  server: {
+    cors: true,
    port: 8888,
  },
+  publicDir: 'styles',
  build: {
    sourcemap: true
  },