chore(deps): Bump @mapbox/mapbox-gl-rtl-text from 0.4.0 to 1.0.0

Bumps [@mapbox/mapbox-gl-rtl-text](https://github.com/mapbox/mapbox-gl-rtl-text) from 0.4.0 to 1.0.0.
- [Release notes](https://github.com/mapbox/mapbox-gl-rtl-text/releases)
- [Commits](https://github.com/mapbox/mapbox-gl-rtl-text/compare/v0.4.0...v1.0.0)

---
updated-dependencies:
- dependency-name: "@mapbox/mapbox-gl-rtl-text"
  dependency-version: 1.0.0
  dependency-type: direct:production
  update-type: version-update:semver-major
...

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

.github/workflows/ci.yml

@@ -53,7 +53,7 @@ jobs:
       - run: npm ci
       - run: npm run build
       - name: artifacts/maputnik
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: maputnik
           path: dist
@@ -70,19 +70,19 @@ jobs:
         run: npm run build-desktop
 
       - name: Artifacts/linux
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: maputnik-linux
           path: ./desktop/bin/linux/
 
       - name: Artifacts/darwin
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: maputnik-darwin
           path: ./desktop/bin/darwin/
 
       - name: Artifacts/windows
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: maputnik-windows
           path: ./desktop/bin/windows/
@@ -102,7 +102,7 @@ jobs:
       - run: npm ci
       - run: npm run test-unit-ci
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
+        uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1
         with:
           files: ${{ github.workspace }}/coverage/coverage-final.json
           verbose: true
@@ -125,13 +125,13 @@ jobs:
       - name: Playwright run
         run: npm run test-e2e
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
+        uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1
         with:
           files: ${{ github.workspace }}/coverage/coverage-final.json
           verbose: true
       - name: Upload Playwright report
         if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: playwright-report
           path: playwright-report/

.github/workflows/codeql-analysis.yml

@@ -46,7 +46,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/init@24c54180a607b1449ed407dd24f251e4e9147c8d # v4.38.3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -57,7 +57,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/autobuild@24c54180a607b1449ed407dd24f251e4e9147c8d # v4.38.3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -71,4 +71,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/analyze@24c54180a607b1449ed407dd24f251e4e9147c8d # v4.38.3

.github/workflows/release.yml

@@ -73,7 +73,7 @@ jobs:
 
       - name: Tag commit and push
         id: tag_version
-        uses: mathieudutour/github-tag-action@a22cf08638b34d5badda920f9daf6e72c477b07b # v6.2
+        uses: mathieudutour/github-tag-action@af99e60ce8132224b8e6ebab5023449fe256ed46 # v7.0.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           custom_tag: ${{ steps.package-version.outputs.current-version }}

CHANGELOG.md

@@ -5,6 +5,9 @@
 - Upgrade to MapLibre GL JS 6 and Vite 8, and update the remaining dependencies
 - Serve the RTL text plugin from `@mapbox/mapbox-gl-rtl-text` instead of a pinned CDN URL, so its version is tracked in `package.json`
 - Exported HTML now loads MapLibre GL JS as an ES module, since v6 no longer ships a UMD bundle
+- Add `font-faces`, `sky`, `roll` and `centerAltitude` to the style settings modal
+- The sidebar can now be resized, both as a whole and in the split between the layer list and the layer editor
+- Allow viewing and changing the map's max zoom in the debug modal
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
@@ -13,6 +16,8 @@
 - Preserve expanded layer groups when deleting layers, including the first layer of a group
 - The map's data listener now fires on tile loads again, so source and vector layer field autocompletion is populated
 - The `maputnik` desktop binary now opens the default browser automatically on startup (opt out with `--no-browser`)
+- Keyboard shortcuts now keep working while the map has focus, instead of going dead until the map is blurred
+- The map no longer stays blank on load until it is moved, when the style loads before the map is ready
 - _...Add new stuff here..._
 
 ## 3.1.0

e2e/keyboard.spec.ts

@@ -62,5 +62,22 @@ describe("keyboard", () => {
       await when.typeKeys("!");
       await then(get.elementByTestId("modal:debug")).shouldBeVisible();
     });
+
+    describe("while the map has focus", () => {
+      beforeEach(async () => {
+        await when.typeKeys("m");
+        await then(get.canvas()).shouldBeFocused();
+      });
+
+      test("'!' should show debug modal", async () => {
+        await when.typeKeys("!");
+        await then(get.elementByTestId("modal:debug")).shouldBeVisible();
+      });
+
+      test("'s' should show settings modal", async () => {
+        await when.typeKeys("s");
+        await then(get.elementByTestId("modal:settings")).shouldBeVisible();
+      });
+    });
   });
 });

e2e/maputnik-driver.ts

@@ -1,5 +1,6 @@
 import { PlaywrightHelper } from "./playwright-helper";
 import { ModalDriver } from "./modal-driver";
+import emptyStyle from "../src/config/empty-style.json" with { type: "json" };
 
 const baseUrl = "http://localhost:8888/";
 const isMac = process.platform === "darwin";
@@ -56,6 +57,11 @@ export class MaputnikDriver {
         url: "https://www.glyph-server.com/*",
         response: ["Font 1", "Font 2", "Font 3"],
       });
+      await this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: /cdn\.jsdelivr\.net\/.*\/empty-style\.json$/,
+        response: emptyStyle,
+      });
     },
   };
 
@@ -176,8 +182,9 @@ export class MaputnikDriver {
       await this.helper.when.typeText(text);
     },
 
-    setTextInJsonEditor: async (text: string) => {
-      await this.helper.get.element(".cm-line").first().click();
+    setTextInJsonEditor: async (text: string, selector?: string) => {
+      const scope = selector ? this.helper.get.elementByTestId(selector).locator(".cm-line") : this.helper.get.element(".cm-line");
+      await scope.first().click();
       await this.helper.when.typeKeys("{selectall}");
       await this.helper.when.typeText(text);
     },
@@ -358,6 +365,8 @@ export class MaputnikDriver {
 
     skipTargetLayerEditor: () => this.helper.get.elementByTestId("skip-target-layer-editor"),
 
+    jsonEditorErrors: (selector: string) => this.helper.get.elementByTestId(selector).locator(".cm-lint-marker-error"),
+
     styleFromLocalStorage: () => this.helper.query(() => this.readStoredStyle()),
 
     fixture: (name: string) => this.helper.readFixture(name),

e2e/modals.spec.ts

@@ -64,6 +64,30 @@ describe("modals", () => {
     });
   });
 
+  describe("debug", () => {
+    beforeEach(async () => {
+      await when.setStyle("zoom_7_center_0_51");
+      await then(get.locationHash()).shouldInclude("#7/51/0");
+      await when.typeKeys("!");
+    });
+
+    test("max zoom is empty until the user sets it", async () => {
+      await then(get.elementByTestId("modal:debug.max-zoom")).shouldHaveValue("");
+    });
+
+    test("lowering the max zoom zooms the map out to it", async () => {
+      await when.setValue("modal:debug.max-zoom", "3");
+      await then(get.locationHash()).shouldInclude("#3/51/0");
+    });
+
+    test("typing a multi-digit max zoom keeps the map in place", async () => {
+      await when.type("modal:debug.max-zoom", "{selectall}{backspace}22");
+      // Let the debounced update reach the map
+      await when.wait(1000);
+      await then(get.locationHash()).shouldInclude("#7/51/0");
+    });
+  });
+
   describe("export", () => {
     beforeEach(async () => {
       await when.click("nav:export");
@@ -338,6 +362,29 @@ describe("modals", () => {
       });
     });
 
+    test("font faces", async () => {
+      const fontFaces = { "Noto Sans Regular": [{ url: "http://example.com/font.ttf", "unicode-range": ["U+1780-17FF"] }] };
+      await when.setTextInJsonEditor(JSON.stringify(fontFaces), "modal:settings.font-faces");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        "font-faces": fontFaces,
+      });
+    });
+
+    test("unset font faces show an empty editor without errors", async () => {
+      await when.wait(1000);
+      await then(get.jsonEditorErrors("modal:settings.font-faces")).shouldNotExist();
+
+      await when.setTextInJsonEditor(JSON.stringify({ Font: "http://example.com/font.ttf" }), "modal:settings.font-faces");
+      await when.click("modal:settings.name");
+      await when.setTextInJsonEditor("", "modal:settings.font-faces");
+      await when.typeKeys("{backspace}");
+      await when.click("modal:settings.name");
+      await when.wait(1000);
+      await then(get.jsonEditorErrors("modal:settings.font-faces")).shouldNotExist();
+      await then(get.styleFromLocalStorage()).shouldNotHaveProperty("font-faces");
+    });
+
     test("maptiler access token", async () => {
       const apiKey = "testing123";
       await when.setValue("modal:settings.maputnik:openmaptiles_access_token", apiKey);
@@ -378,11 +425,24 @@ describe("modals", () => {
       await when.setValue("modal:settings.zoom", "4");
       await when.setValue("modal:settings.bearing", "12");
       await when.setValue("modal:settings.pitch", "30");
+      await when.setValue("modal:settings.roll", "15");
+      await when.setValue("modal:settings.center-altitude", "100");
       await when.click("modal:settings.name");
       await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         zoom: 4,
         bearing: 12,
         pitch: 30,
+        roll: 15,
+        centerAltitude: 100,
+      });
+    });
+
+    test("sky and fog blends", async () => {
+      await when.setValue("modal:settings.sky-horizon-blend", "0.3");
+      await when.setValue("modal:settings.fog-ground-blend", "0.2");
+      await when.click("modal:settings.name");
+      await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sky: { "sky-horizon-blend": 0.3, "fog-ground-blend": 0.2 },
       });
     });
 

e2e/playwright-helper.ts

@@ -122,6 +122,8 @@ export class Assertable<T> {
   // Value assertions (auto-retrying for Query targets).
   shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
 
+  shouldBeGreaterThan = (value: number) => this.assertValue((actual) => expect(actual).toBeGreaterThan(value));
+
   shouldInclude = (value: any) =>
     this.assertValue((actual) => {
       if (typeof value === "object" && value !== null) {
@@ -133,6 +135,9 @@ export class Assertable<T> {
 
   shouldDeepNestedInclude = (value: Record<string, unknown> | unknown[]) =>
     this.assertValue((actual) => assertDeepNestedInclude(actual, value));
+
+  shouldNotHaveProperty = (property: string) =>
+    this.assertValue((actual) => expect(actual).not.toHaveProperty([property]));
 }
 
 async function typeSequence(page: Page, text: string): Promise<void> {
@@ -349,6 +354,15 @@ export class PlaywrightHelper {
       await this.page.mouse.up();
     },
 
+    /** Presses at the centre of an element and drags it by the given offset. */
+    dragBy: async (testId: string, deltaX: number, deltaY = 0) => {
+      const { x, y } = await centerOf(this.testId(testId));
+      await this.page.mouse.move(x, y);
+      await this.page.mouse.down();
+      await this.page.mouse.move(x + deltaX, y + deltaY, { steps: 10 });
+      await this.page.mouse.up();
+    },
+
     clickCenter: async (testId: string) => {
       const { x, y } = await centerOf(this.testId(testId));
       await this.page.mouse.move(x, y);
@@ -446,6 +460,13 @@ export class PlaywrightHelper {
 
     inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
 
+    elementWidth: (testId: string) =>
+      new Query<number>(async () => {
+        const box = await this.testId(testId).first().boundingBox();
+        if (!box) throw new Error(`Element "${testId}" has no bounding box`);
+        return box.width;
+      }),
+
     elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
 
     locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),

e2e/sidebar-resize.spec.ts

@@ -0,0 +1,27 @@
+import { beforeEach, describe, test } from "./utils/fixtures";
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("sidebar resize", () => {
+  const { given, get, when, then } = new MaputnikDriver();
+
+  beforeEach(async () => {
+    await given.setupMockBackedResponses();
+    await when.setStyle("layer");
+  });
+
+  test("dragging the outer handle widens the sidebar", async () => {
+    const initialWidth = await get.elementWidth("sidebar-panel").get();
+
+    await when.dragBy("sidebar-resize-handle", 100);
+
+    await then(get.elementWidth("sidebar-panel")).shouldBeGreaterThan(initialWidth + 50);
+  });
+
+  test("dragging the inner handle widens the layer list", async () => {
+    const initialWidth = await get.elementWidth("layer-list-panel").get();
+
+    await when.dragBy("inner-resize-handle", 50);
+
+    await then(get.elementWidth("layer-list-panel")).shouldBeGreaterThan(initialWidth + 20);
+  });
+});

package.json

@@ -29,16 +29,16 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.4",
+    "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.11",
+    "@codemirror/view": "^6.43.13",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
+    "@mapbox/mapbox-gl-rtl-text": "^1.0.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
     "@maplibre/maplibre-gl-inspect": "^1.9.0",
-    "@maplibre/maplibre-gl-style-spec": "^26.4.2",
+    "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -60,22 +60,23 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^6.8.0",
+    "maplibre-gl": "^6.12.0",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^10.10.0",
-    "ol-mapbox-style": "^13.4.3",
+    "ol": "^10.11.0",
+    "ol-mapbox-style": "^13.5.1",
     "pmtiles": "^4.5.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.8",
+    "react": "^19.3.0",
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^8.0.0",
     "react-aria-modal": "^5.0.2",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^19.2.8",
-    "react-i18next": "^17.0.13",
+    "react-dom": "^19.3.0",
+    "react-i18next": "^17.0.16",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.14.2",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.9",
     "string-hash": "^1.1.3",
@@ -116,36 +117,36 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.18",
+    "@types/react": "^19.3.0",
     "@types/react-aria-menubutton": "^6.2.14",
     "@types/react-aria-modal": "^5.0.0",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.7",
+    "@types/react-dom": "^19.3.0",
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^5.0.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/coverage-v8": "^5.0.3",
     "cors": "^2.8.6",
-    "eslint": "^10.10.0",
+    "eslint": "^10.12.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.6",
-    "i18next-cli": "^1.73.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "i18next-cli": "^1.74.7",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
     "nyc": "^18.0.0",
-    "postcss": "^8.5.28",
+    "postcss": "^8.5.29",
     "react-hot-loader": "^4.13.1",
-    "sass": "^1.104.0",
-    "stylelint": "^17.15.0",
+    "sass": "^1.105.1",
+    "stylelint": "^17.16.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-scss": "^7.2.0",
+    "stylelint-scss": "^7.3.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.70.0",
+    "typescript-eslint": "^8.71.1",
     "uuid": "^14.0.2",
-    "vite": "^8.2.2",
+    "vite": "^8.3.3",
     "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.3"
   }
 }

playwright.config.ts

@@ -1,6 +1,10 @@
+import { cpus } from "node:os";
 import { defineConfig, devices } from "@playwright/test";
 
 const isCI = !!process.env.CI;
+// Playwright defaults to CPU / 2 workers,
+// capping the number of workers to 4 to avoid overloading browsers.
+const workers = Math.min(4, Math.max(1, Math.floor(cpus().length / 2)));
 // When the app is already served elsewhere (e.g. the docker e2e job) set
 // E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
 const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
@@ -13,6 +17,7 @@ export default defineConfig({
   globalTeardown: "./e2e/utils/e2e-teardown.ts",
   fullyParallel: true,
   forbidOnly: isCI,
+  workers,
   retries: isCI ? 2 : 0,
   reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
   use: {

src/components/App.tsx

@@ -83,6 +83,22 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
   };
 }
 
+/**
+ * Whether the given element consumes keystrokes as text.
+ *
+ * Shortcuts have to stay out of the way while the user is typing, but asking
+ * whether the focus is on `document.body` answers a different question: the map
+ * canvas is not a text field, yet focusing it used to disable every shortcut.
+ */
+function isTextEntryElement(element: Element | null): boolean {
+  if (!element) return false;
+  const node = element as HTMLElement;
+  return node.isContentEditable ||
+    node.tagName === "INPUT" ||
+    node.tagName === "TEXTAREA" ||
+    node.tagName === "SELECT";
+}
+
 type AppState = {
   errors: MappedError[],
   infos: string[],
@@ -165,6 +181,7 @@ export class App extends React.Component<any, AppState> {
         showTileBoundaries: false,
         showCollisionBoxes: false,
         showOverdrawInspector: false,
+        maxZoom: undefined,
       },
       openlayersDebugOptions: {
         debugToolbox: false,
@@ -242,7 +259,7 @@ export class App extends React.Component<any, AppState> {
         (e.target as HTMLElement).blur();
         document.body.focus();
       }
-      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
+      else if(this.state.isOpen.shortcuts || !isTextEntryElement(document.activeElement)) {
         const shortcut = shortcuts.find((shortcut) => {
           return (shortcut.key === e.key);
         });

src/components/AppLayout.tsx

@@ -1,9 +1,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";
 import { ScrollContainer } from "./ScrollContainer";
-import { type WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { IconContext } from "react-icons";
 
-type AppLayoutInternalProps = {
+const DEFAULT_LIST_WIDTH = 200;
+const DEFAULT_DRAWER_WIDTH = 370;
+const DEFAULT_SIDEBAR_WIDTH = DEFAULT_LIST_WIDTH + DEFAULT_DRAWER_WIDTH;
+const PANEL_STYLE: React.CSSProperties = { overflow: "hidden" };
+
+const SIDEBAR_LAYOUT_ID = "maputnik:sidebar-layout";
+const SIDEBAR_INNER_LAYOUT_ID = "maputnik:sidebar-inner-layout";
+const SIDEBAR_PANEL_ID = "sidebar";
+const MAP_PANEL_ID = "map";
+const LIST_PANEL_ID = "list";
+const DRAWER_PANEL_ID = "drawer";
+
+type AppLayoutProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
@@ -11,43 +24,108 @@ type AppLayoutInternalProps = {
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
-} & WithTranslation;
+};
 
-class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
+export const AppLayout: React.FC<AppLayoutProps> = (props) => {
+  const { t, i18n } = useTranslation();
 
-  render() {
-    document.body.dir = this.props.i18n.dir();
+  const sidebarLayout = useDefaultLayout({
+    id: SIDEBAR_LAYOUT_ID,
+    panelIds: [SIDEBAR_PANEL_ID, MAP_PANEL_ID],
+  });
+  const innerLayout = useDefaultLayout({
+    id: SIDEBAR_INNER_LAYOUT_ID,
+    panelIds: [LIST_PANEL_ID, DRAWER_PANEL_ID],
+  });
 
-    return <IconContext.Provider value={{size: "14px"}}>
-      <div className="maputnik-layout">
-        {this.props.toolbar}
-        <div className="maputnik-layout-main">
-          {this.props.codeEditor && <div className="maputnik-layout-code-editor">
-            <ScrollContainer>
-              {this.props.codeEditor}
+  // The bottom panel is position: fixed, so it can't be a flex sibling of the
+  // map panel; it follows the sidebar through this custom property instead.
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
+
+  useEffect(() => {
+    document.body.dir = i18n.dir();
+  }, [i18n, i18n.language]);
+
+  return <IconContext.Provider value={{size: "14px"}}>
+    <div
+      className="maputnik-layout"
+      style={{"--sidebar-width": `${sidebarWidth}px`} as React.CSSProperties}
+    >
+      {props.toolbar}
+      <div className="maputnik-layout-main">
+        <Group
+          className="maputnik-layout-panels"
+          orientation="horizontal"
+          id={SIDEBAR_LAYOUT_ID}
+          defaultLayout={sidebarLayout.defaultLayout}
+          onLayoutChanged={sidebarLayout.onLayoutChanged}
+        >
+          <Panel
+            id={SIDEBAR_PANEL_ID}
+            data-wd-key="sidebar-panel"
+            className={props.codeEditor ? "maputnik-layout-code-editor" : "maputnik-layout-sidebar"}
+            style={PANEL_STYLE}
+            defaultSize={`${DEFAULT_SIDEBAR_WIDTH}px`}
+            minSize="280px"
+            onResize={({inPixels}) => setSidebarWidth(inPixels)}
+          >
+            {props.codeEditor && <ScrollContainer>
+              {props.codeEditor}
             </ScrollContainer>
-          </div>
-          }
-          {!this.props.codeEditor && <>
-            <div className="maputnik-layout-list">
-              {this.props.layerList}
-            </div>
-            <div className="maputnik-layout-drawer">
-              <ScrollContainer>
-                {this.props.layerEditor}
-              </ScrollContainer>
-            </div>
-          </>}
-          {this.props.map}
-        </div>
-        {this.props.bottom && <div className="maputnik-layout-bottom">
-          {this.props.bottom}
-        </div>
-        }
-        {this.props.modals}
+            }
+            {!props.codeEditor && <Group
+              className="maputnik-layout-sidebar-panels"
+              orientation="horizontal"
+              id={SIDEBAR_INNER_LAYOUT_ID}
+              defaultLayout={innerLayout.defaultLayout}
+              onLayoutChanged={innerLayout.onLayoutChanged}
+            >
+              <Panel
+                id={LIST_PANEL_ID}
+                data-wd-key="layer-list-panel"
+                className="maputnik-layout-list"
+                style={PANEL_STYLE}
+                defaultSize={`${DEFAULT_LIST_WIDTH}px`}
+                minSize="100px"
+              >
+                {props.layerList}
+              </Panel>
+              <Separator
+                className="maputnik-layout-resize-handle"
+                data-wd-key="inner-resize-handle"
+                title={t("Drag to resize the layer list")}
+                aria-label={t("Drag to resize the layer list")}
+              />
+              <Panel
+                id={DRAWER_PANEL_ID}
+                className="maputnik-layout-drawer"
+                style={PANEL_STYLE}
+                defaultSize={`${DEFAULT_DRAWER_WIDTH}px`}
+                minSize="150px"
+              >
+                <ScrollContainer>
+                  {props.layerEditor}
+                </ScrollContainer>
+              </Panel>
+            </Group>
+            }
+          </Panel>
+          <Separator
+            className="maputnik-layout-resize-handle"
+            data-wd-key="sidebar-resize-handle"
+            title={t("Drag to resize the sidebar")}
+            aria-label={t("Drag to resize the sidebar")}
+          />
+          <Panel id={MAP_PANEL_ID} className="maputnik-layout-map" style={PANEL_STYLE} minSize="200px">
+            {props.map}
+          </Panel>
+        </Group>
       </div>
-    </IconContext.Provider>;
-  }
-}
-
-export const AppLayout = withTranslation()(AppLayoutInternal);
+      {props.bottom && <div className="maputnik-layout-bottom">
+        {props.bottom}
+      </div>
+      }
+      {props.modals}
+    </div>
+  </IconContext.Provider>;
+};

src/components/InputJson.tsx

@@ -10,12 +10,14 @@ import type { StylePropertySpecification } from "maplibre-gl";
 import type { TransactionSpec } from "@codemirror/state";
 
 export type InputJsonProps = {
-  value: object
+  value: object | undefined
   className?: string
-  onChange(object: object): void
+  onChange(object: object | undefined): void
   onFocus?(...args: unknown[]): unknown
   onBlur?(...args: unknown[]): unknown
   lintType: "layer" | "style" | "expression" | "json"
+  /** When set, an empty editor is valid and means the value is unset */
+  optional?: boolean
   spec?: StylePropertySpecification | undefined
   /**
    * When setting this and using search and replace, the editor will scroll to the selected text
@@ -49,6 +51,10 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   }
 
   getPrettyJson(data: any) {
+    // An unset value is shown as an empty editor
+    if (data === undefined) {
+      return "";
+    }
     return stringifyPretty(data, {indent: 2, maxLength: 40});
   }
 
@@ -57,10 +63,11 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       parent: this._el!,
       value: this.getPrettyJson(this.props.value),
       lintType: this.props.lintType || "layer",
-      onChange: (value:string) => this.onChange(value),
+      onChange: (value: string) => this.onChange(value),
       onFocus: () => this.onFocus(),
       onBlur: () => this.onBlur(),
-      spec: this.props.spec
+      spec: this.props.spec,
+      optional: this.props.optional
     });
   }
 
@@ -107,6 +114,13 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
     const newCode = this._view!.state.doc.toString();
 
     if (this.state.prevValue !== newCode) {
+      if (this.props.optional && newCode.trim() === "") {
+        this.props.onChange(undefined);
+        this.setState({
+          prevValue: newCode,
+        });
+        return;
+      }
       let parsedLayer, err;
       try {
         parsedLayer = JSON.parse(newCode);

src/components/MapMaplibreGl.tsx

@@ -107,7 +107,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
   shouldComponentUpdate(nextProps: MapMaplibreGlInternalProps, nextState: MapMaplibreGlState) {
     let should = false;
     try {
-      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || (Object.keys(nextState) as (keyof MapMaplibreGlState)[]).some(key => key !== "zoom" && this.state[key] !== nextState[key]);
     } catch(_e) {
       // no biggie, carry on
     }
@@ -126,6 +126,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       map.showTileBoundaries = this.props.options?.showTileBoundaries!;
       map.showCollisionBoxes = this.props.options?.showCollisionBoxes!;
       map.showOverdrawInspector = this.props.options?.showOverdrawInspector!;
+      map.setMaxZoom(this.props.options?.maxZoom);
 
       // set the map view when the prop was updated from outside
       if (this.props.mapView._from === "app") {
@@ -152,7 +153,6 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       container: this.container!,
       style: this.props.mapStyle,
       hash: true,
-      maxZoom: 24,
       // make root relative urls in stylefiles work as maplibre gl js does
       // not support this for everything:
       // https://github.com/maplibre/maplibre-gl-js/issues/6818

src/components/modals/ModalDebug.tsx

@@ -1,16 +1,19 @@
 import React from "react";
+import { debounce } from "lodash";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
+import type { MapOptions } from "maplibre-gl";
 
 import { Modal } from "./Modal";
+import { FieldNumber } from "../FieldNumber";
 
 
 type ModalDebugInternalProps = {
   isOpen: boolean
   renderer: string
-  onChangeMaplibreGlDebug(key: string, checked: boolean): unknown
+  onChangeMaplibreGlDebug(key: string, value: boolean | number | undefined): unknown
   onChangeOpenlayersDebug(key: string, checked: boolean): unknown
   onOpenToggle(): void
-  maplibreGlDebugOptions?: object
+  maplibreGlDebugOptions?: Partial<MapOptions>
   openlayersDebugOptions?: object
   mapView: {
     zoom: number
@@ -23,6 +26,15 @@ type ModalDebugInternalProps = {
 
 
 class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
+  // Typing "22" would otherwise apply 2 first and zoom the map out of the current view
+  onChangeMaxZoom = debounce((value: number | undefined) => {
+    this.props.onChangeMaplibreGlDebug("maxZoom", value);
+  }, 500);
+
+  componentWillUnmount() {
+    this.onChangeMaxZoom.cancel();
+  }
+
   render() {
     const {t, mapView} = this.props;
 
@@ -39,15 +51,24 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <h1>{t("Options")}</h1>
         {this.props.renderer === "mlgljs" &&
-          <ul>
-            {Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
-              return <li key={key}>
-                <label>
-                  <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaplibreGlDebug(key, e.target.checked)} /> {key}
-                </label>
-              </li>;
-            })}
-          </ul>
+          <>
+            <ul>
+              {Object.entries(this.props.maplibreGlDebugOptions!).filter((entry): entry is [string, boolean] => typeof entry[1] === "boolean").map(([key, val]) => {
+                return <li key={key}>
+                  <label>
+                    <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaplibreGlDebug(key, e.target.checked)} /> {key}
+                  </label>
+                </li>;
+              })}
+            </ul>
+            <FieldNumber
+              label={t("Max Zoom")}
+              data-wd-key="modal:debug.max-zoom"
+              value={this.props.maplibreGlDebugOptions!.maxZoom ?? undefined}
+              min={0}
+              onChange={this.onChangeMaxZoom}
+            />
+          </>
         }
         {this.props.renderer === "ol" &&
           <ul>

src/components/modals/ModalSettings.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import type {LightSpecification, ProjectionSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
+import type {LightSpecification, ProjectionSpecification, SkySpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 import { FieldArray } from "../FieldArray";
@@ -81,6 +81,24 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
     });
   }
 
+  changeSkyProperty(property: keyof SkySpecification, value: any) {
+    const sky = {
+      ...this.props.mapStyle.sky,
+    };
+
+    if (value === undefined) {
+      delete sky[property];
+    }
+    else {
+      sky[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      sky,
+    });
+  }
+
   changeProjectionType(value: any) {
     const projection = {
       ...this.props.mapStyle.projection,
@@ -124,6 +142,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
     const transition = this.props.mapStyle.transition || {};
     const terrain = this.props.mapStyle.terrain || {} as TerrainSpecification;
     const projection = this.props.mapStyle.projection || {} as ProjectionSpecification;
+    const sky = this.props.mapStyle.sky || {};
 
     return <Modal
       data-wd-key="modal:settings"
@@ -149,6 +168,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
         <Block label={t("Sprite URL")} fieldSpec={latest.$root.sprite} data-wd-key="modal:settings.sprite">
           <FieldJson
             lintType="json"
+            optional
             value={this.props.mapStyle.sprite as any}
             onChange={(value) => this.changeStyleProperty("sprite", value)}
           />
@@ -162,6 +182,15 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           onChange={(value) => this.changeStyleProperty("glyphs", value)}
         />
 
+        <Block label={t("Font faces")} fieldSpec={latest.$root["font-faces"]} data-wd-key="modal:settings.font-faces">
+          <FieldJson
+            lintType="json"
+            optional
+            value={this.props.mapStyle["font-faces"] as any}
+            onChange={(value) => this.changeStyleProperty("font-faces", value)}
+          />
+        </Block>
+
         <FieldString
           label={fsa.maputnik.maptiler_access_token.label}
           fieldSpec={fsa.maputnik.maptiler_access_token}
@@ -231,6 +260,23 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           onChange={(value) => this.changeStyleProperty("pitch", value)}
         />
 
+        <FieldNumber
+          label={t("Roll")}
+          data-wd-key="modal:settings.roll"
+          fieldSpec={latest.$root.roll}
+          value={mapStyle.roll}
+          default={latest.$root.roll.default}
+          onChange={(value) => this.changeStyleProperty("roll", value)}
+        />
+
+        <FieldNumber
+          label={t("Center altitude")}
+          data-wd-key="modal:settings.center-altitude"
+          fieldSpec={latest.$root.centerAltitude}
+          value={mapStyle.centerAltitude}
+          onChange={(value) => this.changeStyleProperty("centerAltitude", value)}
+        />
+
         <FieldEnum
           label={t("Light anchor")}
           fieldSpec={latest.light.anchor}
@@ -285,6 +331,66 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           onChange={(value) => this.changeTerrainProperty("exaggeration", value)}
         />
 
+        <FieldColor
+          label={t("Sky color")}
+          fieldSpec={latest.sky["sky-color"]}
+          value={sky["sky-color"] as string}
+          default={latest.sky["sky-color"].default}
+          onChange={(value) => this.changeSkyProperty("sky-color", value)}
+        />
+
+        <FieldColor
+          label={t("Horizon color")}
+          fieldSpec={latest.sky["horizon-color"]}
+          value={sky["horizon-color"] as string}
+          default={latest.sky["horizon-color"].default}
+          onChange={(value) => this.changeSkyProperty("horizon-color", value)}
+        />
+
+        <FieldColor
+          label={t("Fog color")}
+          fieldSpec={latest.sky["fog-color"]}
+          value={sky["fog-color"] as string}
+          default={latest.sky["fog-color"].default}
+          onChange={(value) => this.changeSkyProperty("fog-color", value)}
+        />
+
+        <FieldNumber
+          label={t("Sky horizon blend")}
+          data-wd-key="modal:settings.sky-horizon-blend"
+          fieldSpec={latest.sky["sky-horizon-blend"]}
+          value={sky["sky-horizon-blend"] as number}
+          default={latest.sky["sky-horizon-blend"].default}
+          onChange={(value) => this.changeSkyProperty("sky-horizon-blend", value)}
+        />
+
+        <FieldNumber
+          label={t("Horizon fog blend")}
+          data-wd-key="modal:settings.horizon-fog-blend"
+          fieldSpec={latest.sky["horizon-fog-blend"]}
+          value={sky["horizon-fog-blend"] as number}
+          default={latest.sky["horizon-fog-blend"].default}
+          onChange={(value) => this.changeSkyProperty("horizon-fog-blend", value)}
+        />
+
+        <FieldNumber
+          label={t("Fog ground blend")}
+          data-wd-key="modal:settings.fog-ground-blend"
+          fieldSpec={latest.sky["fog-ground-blend"]}
+          value={sky["fog-ground-blend"] as number}
+          default={latest.sky["fog-ground-blend"].default}
+          onChange={(value) => this.changeSkyProperty("fog-ground-blend", value)}
+        />
+
+        <FieldNumber
+          label={t("Atmosphere blend")}
+          data-wd-key="modal:settings.atmosphere-blend"
+          fieldSpec={latest.sky["atmosphere-blend"]}
+          value={sky["atmosphere-blend"] as number}
+          default={latest.sky["atmosphere-blend"].default}
+          onChange={(value) => this.changeSkyProperty("atmosphere-blend", value)}
+        />
+
         <FieldNumber
           label={t("Transition delay")}
           data-wd-key="modal:settings.transition-delay"

src/libs/codemirror-editor-factory.ts

@@ -15,6 +15,21 @@ type LinterError = {
   message: string;
 };
 
+
+type EditorProps = {
+  parent: HTMLElement,
+  value: string,
+  lintType: LintType,
+  onChange: (value: string) => void,
+  onFocus: () => void,
+  onBlur: () => void,
+  spec?: StylePropertySpecification,
+  /**
+   * An empty optional editor means the value is unset, which is valid
+   */
+  optional?: boolean,
+};
+
 function getDiagnosticsFromExpressionErrors(errors: LinterError[], ast: ValueNode | PropertyNode) {
   const diagnostics: Diagnostic[] = [];
   for (const error of errors) {
@@ -128,15 +143,7 @@ function createMaplibreExpressionLinter(spec?: StylePropertySpecification) {
   };
 }
 
-export function createEditor(props: {
-  parent: HTMLElement,
-  value: string,
-  lintType: LintType,
-  onChange: (value: string) => void,
-  onFocus: () => void,
-  onBlur: () => void,
-  spec?: StylePropertySpecification,
-}): EditorView {
+export function createEditor(props: EditorProps): EditorView {
   let specificLinter: (view: EditorView) => Diagnostic[] = () => [];
   switch (props.lintType) {
     case "style":
@@ -181,6 +188,9 @@ export function createEditor(props: {
       }),
       lintGutter(),
       linter((view: EditorView) => {
+        if (props.optional && view.state.doc.toString().trim() === "") {
+          return [];
+        }
         const jsonErrors = jsonParseLinter()(view);
         if (jsonErrors.length > 0) {
           return jsonErrors;

src/locales/az/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "Dəyişən Əlavə Et",
   "any filter matches": "istənilən süzgəc uyğun gəlirsə",
   "API key for Stadia Maps.": "Stadia Maps üçün API açarı.",
+  "Atmosphere blend": "Atmosfer qarışığı",
   "Base": "Baza",
   "Bearing": "İstiqamət",
   "Cancel": "Ləğv et",
   "Center": "Mərkəz",
+  "Center altitude": "Mərkəzin hündürlüyü",
   "Choose Public Source": "İctimai Mənbə Seç",
   "Choose the default Maputnik renderer for this style.": "Bu üslub üçün defolt Maputnik renderer-ini seçin.",
   "Click to close the editor": "Redaktoru bağlamaq üçün klikləyin",
@@ -55,6 +57,8 @@
   "Delete filter block": "Süzgəc blokunu sil",
   "Deuteranopia filter": "Deuteranopiya süzgəci",
   "Drag and drop a style JSON file here or click to browse": "Üslub JSON faylını buraya sürükləyib buraxın və ya seçmək üçün klikləyin",
+  "Drag to resize the layer list": "Qat siyahısının ölçüsünü dəyişmək üçün sürükləyin",
+  "Drag to resize the sidebar": "Yan panelin ölçüsünü dəyişmək üçün sürükləyin",
   "Duplicate": "Dublikat et",
   "Encoding": "Kodlaşdırma",
   "Enter URL...": "URL daxil edin...",
@@ -63,6 +67,9 @@
   "Export modal": "İxrac modalı",
   "Filter": "Süzgəc",
   "Focus map": "Xəritəyə fokuslan",
+  "Fog color": "Duman rəngi",
+  "Fog ground blend": "Duman-yer qarışığı",
+  "Font faces": "Şrift faylları",
   "Function": "Funksiya",
   "Gallery Styles": "Qalereya Üslubları",
   "General layout properties": "Ümumi düzülüş xassələri",
@@ -75,6 +82,8 @@
   "Glyphs URL": "Şriftlər URL-i",
   "Help": "Kömək",
   "Hide": "Gizlət",
+  "Horizon color": "Üfüq rəngi",
+  "Horizon fog blend": "Üfüq-duman qarışığı",
   "Icon layout properties": "İkon düzülüş xassələri",
   "Icon paint properties": "İkon boyama xassələri",
   "If the Map is in focused you can use the following shortcuts": "Xəritə fokusdadırsa aşağıdakı qısayollardan istifadə edə bilərsiniz",
@@ -122,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Heç bir qlobal vəziyyət dəyişəni təyin edilməyib. Üslubunuzda təkrar istifadə oluna bilən dəyərlər yaratmaq üçün dəyişən əlavə edin.",
   "Open": "Aç",
   "Open a local JSON style from your computer.": "Kompüterinizdən yerli JSON üslubunu açın.",
-  "OpenLayers (experimental)": "OpenLayers (eksperimental)",
   "Open local Style": "Yerli Üslubu Aç",
   "Open modal": "Modalı aç",
   "Open one of the publicly available styles to start from.": "Başlamaq üçün ictimai üslublardan birini açın.",
   "Open Style": "Üslubu Aç",
+  "OpenLayers (experimental)": "OpenLayers (eksperimental)",
   "Options": "Seçimlər",
   "Output value": "Çıxış dəyəri",
   "Owner": "Sahib",
@@ -153,6 +162,7 @@
   "Remove variable": "Dəyişəni sil",
   "Remove zoom level from stop": "Dayanacaqdan yaxınlaşma səviyyəsini sil",
   "Revert from expression": "İfadədən geri qaytar",
+  "Roll": "Fırlanma",
   "Save": "Yadda saxla",
   "Save as": "Fərqli yadda saxla",
   "Save Style": "Üslubu Yadda Saxla",
@@ -163,6 +173,8 @@
   "Shortcuts": "Qısayollar",
   "Shortcuts menu": "Qısayollar menyusu",
   "Show": "Göstər",
+  "Sky color": "Səma rəngi",
+  "Sky horizon blend": "Səma-üfüq qarışığı",
   "Source": "Mənbə",
   "Source ID": "Mənbə ID",
   "Source Layer": "Mənbə Qatı",

src/locales/de/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "Variable hinzufügen",
   "any filter matches": "irgendein Filter passt",
   "API key for Stadia Maps.": "API-Schlüssel für Stadia Maps.",
+  "Atmosphere blend": "Atmosphärenüberblendung",
   "Base": "Basis",
   "Bearing": "Ausrichtung",
   "Cancel": "Abbrechen",
   "Center": "Mittelpunkt",
+  "Center altitude": "Höhe des Mittelpunkts",
   "Choose Public Source": "Öffentliche Quelle auswählen",
   "Choose the default Maputnik renderer for this style.": "Wähle den Standard-Renderer für diesen Stil aus.",
   "Click to close the editor": "Klicken Sie hier, um den Editor zu schließen",
@@ -54,6 +56,9 @@
   "Delete expression": "Ausdruck löschen",
   "Delete filter block": "Filterblock löschen",
   "Deuteranopia filter": "Deuteranopie-Filter",
+  "Drag and drop a style JSON file here or click to browse": "Ziehen Sie eine Style-JSON-Datei hierher oder klicken Sie, um zu durchsuchen",
+  "Drag to resize the layer list": "Ziehen, um die Ebenenliste zu skalieren",
+  "Drag to resize the sidebar": "Ziehen, um die Seitenleiste zu skalieren",
   "Duplicate": "Duplizieren",
   "Encoding": "Kodierung",
   "Enter URL...": "URL eingeben...",
@@ -62,6 +67,9 @@
   "Export modal": "Modale Fenster exportieren",
   "Filter": "Filter",
   "Focus map": "Karte fokussieren",
+  "Fog color": "Nebelfarbe",
+  "Fog ground blend": "Nebel-Boden-Überblendung",
+  "Font faces": "Schriftdateien",
   "Function": "Funktion",
   "Gallery Styles": "Galerie-Stile",
   "General layout properties": "Allgemeine Layouteigenschaften",
@@ -74,6 +82,8 @@
   "Glyphs URL": "Glyphen-URL",
   "Help": "Hilfe",
   "Hide": "Verstecken",
+  "Horizon color": "Horizontfarbe",
+  "Horizon fog blend": "Horizont-Nebel-Überblendung",
   "Icon layout properties": "Icon-Layouteigenschaften",
   "Icon paint properties": "Icon-Darstellungseigenschaften",
   "If the Map is in focused you can use the following shortcuts": "Wenn die Karte fokussiert ist, kannst du die folgenden Shortcuts benutzen",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Keine globalen Zustandsvariablen definiert. Füge Variablen hinzu, um wiederverwendbare Werte in deinem Stil zu erstellen.",
   "Open": "Öffnen",
   "Open a local JSON style from your computer.": "Öffne einen lokalen JSON Stil von deinem Computer.",
-  "OpenLayers (experimental)": "OpenLayers (experimentell)",
   "Open local Style": "Lokalen Stil öffnen",
   "Open modal": "Modale Fenster öffnen",
   "Open one of the publicly available styles to start from.": "Öffne einen der öffentlich verfügbaren Stile, um zu starten.",
   "Open Style": "Stil öffnen",
+  "OpenLayers (experimental)": "OpenLayers (experimentell)",
   "Options": "Optionen",
   "Output value": "Ausgabewert",
   "Owner": "Besitzer",
@@ -152,6 +162,7 @@
   "Remove variable": "Variable entfernen",
   "Remove zoom level from stop": "Zoom-Stufe vom Stopp entfernen",
   "Revert from expression": "Vom Ausdruck zurücksetzen",
+  "Roll": "Rollwinkel",
   "Save": "Speichern",
   "Save as": "Speichern unter",
   "Save Style": "Stil Speichern",
@@ -162,6 +173,8 @@
   "Shortcuts": "Shortcuts",
   "Shortcuts menu": "Shortcuts-Menü",
   "Show": "Anzeigen",
+  "Sky color": "Himmelsfarbe",
+  "Sky horizon blend": "Himmel-Horizont-Überblendung",
   "Source": "Quelle",
   "Source ID": "Quellen-ID",
   "Source Layer": "Quellenebene",
@@ -199,6 +212,5 @@
   "Video URL": "Video-URL",
   "View": "Ansicht",
   "You've entered an old style filter.": "Du hast einen alten Filter-Stil eingegeben.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Ziehen Sie eine Style-JSON-Datei hierher oder klicken Sie, um zu durchsuchen"
+  "Zoom": "Zoom"
 }

src/locales/fr/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "Ajouter une variable",
   "any filter matches": "l'un des filtres correspond",
   "API key for Stadia Maps.": "Clé d'API pour Stadia Maps.",
+  "Atmosphere blend": "Fondu de l'atmosphère",
   "Base": "Base",
   "Bearing": "Orientation",
   "Cancel": "Annuler",
   "Center": "Centre",
+  "Center altitude": "Altitude du centre",
   "Choose Public Source": "Choisir une source publique",
   "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style.",
   "Click to close the editor": "Cliquez pour fermer l'éditeur",
@@ -54,6 +56,9 @@
   "Delete expression": "Supprimer l'expression",
   "Delete filter block": "Supprimer le bloc de filtre",
   "Deuteranopia filter": "Filtre Deutéranopie",
+  "Drag and drop a style JSON file here or click to browse": "Faites glisser un fichier JSON de style ici ou cliquez pour parcourir",
+  "Drag to resize the layer list": "Glisser pour redimensionner la liste des calques",
+  "Drag to resize the sidebar": "Glisser pour redimensionner la barre latérale",
   "Duplicate": "Dupliquer",
   "Encoding": "Encodage",
   "Enter URL...": "Entrez l'URL...",
@@ -62,6 +67,9 @@
   "Export modal": "Exporter (modale)",
   "Filter": "Filtre",
   "Focus map": "Focus sur la carte",
+  "Fog color": "Couleur du brouillard",
+  "Fog ground blend": "Fondu brouillard-sol",
+  "Font faces": "Fichiers de police",
   "Function": "Fonction",
   "Gallery Styles": "Styles de la galerie",
   "General layout properties": "Propriétés générales de mise en page",
@@ -74,6 +82,8 @@
   "Glyphs URL": "URL des glyphes",
   "Help": "Aide",
   "Hide": "Cacher",
+  "Horizon color": "Couleur de l'horizon",
+  "Horizon fog blend": "Fondu horizon-brouillard",
   "Icon layout properties": "Propriétés de mise en page de l'icône",
   "Icon paint properties": "Propriétés de peinture de l'icône",
   "If the Map is in focused you can use the following shortcuts": "Si la carte a le focus, vous pouvez utiliser les raccourcis suivants",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Aucune variable d'état global définie. Ajoutez des variables pour créer des valeurs réutilisables dans votre style.",
   "Open": "Ouvrir",
   "Open a local JSON style from your computer.": "Ouvrir un style JSON local depuis votre ordinateur.",
-  "OpenLayers (experimental)": "OpenLayers (expérimental)",
   "Open local Style": "Ouvrir un style local",
   "Open modal": "Ouvrir (modale)",
   "Open one of the publicly available styles to start from.": "Ouvrez l'un des styles publics disponibles pour commencer.",
   "Open Style": "Ouvrir le style",
+  "OpenLayers (experimental)": "OpenLayers (expérimental)",
   "Options": "Options",
   "Output value": "Valeur de sortie",
   "Owner": "Propriétaire",
@@ -152,6 +162,7 @@
   "Remove variable": "Supprimer la variable",
   "Remove zoom level from stop": "Supprimer le niveau de zoom de l'arrêt",
   "Revert from expression": "Annuler l'expression",
+  "Roll": "Roulis",
   "Save": "Enregistrer",
   "Save as": "Enregistrer sous",
   "Save Style": "Enregistrer le style",
@@ -162,6 +173,8 @@
   "Shortcuts": "Raccourcis",
   "Shortcuts menu": "Menu des raccourcis",
   "Show": "Afficher",
+  "Sky color": "Couleur du ciel",
+  "Sky horizon blend": "Fondu ciel-horizon",
   "Source": "Source",
   "Source ID": "ID de la source",
   "Source Layer": "Calque Source",
@@ -199,6 +212,5 @@
   "Video URL": "URL de la vidéo",
   "View": "Vue",
   "You've entered an old style filter.": "Vous avez entré un ancien style de filtre.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Faites glisser un fichier JSON de style ici ou cliquez pour parcourir"
+  "Zoom": "Zoom"
 }

src/locales/he/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "הוסף משתנה",
   "any filter matches": "אחד הסינוים מתאימים",
   "API key for Stadia Maps.": "API key for Stadia Maps",
+  "Atmosphere blend": "מיזוג אטמוספרה",
   "Base": "בסיס",
   "Bearing": "כיוון",
   "Cancel": "ביטול",
   "Center": "מרכז",
+  "Center altitude": "גובה המרכז",
   "Choose Public Source": "בחירת מקור ציבורי",
   "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
   "Click to close the editor": "לחץ לסגירת העורך",
@@ -54,6 +56,9 @@
   "Delete expression": "מחיקת ביטוי",
   "Delete filter block": "מחיקת גוש מסנן",
   "Deuteranopia filter": "Deuteranopia filter",
+  "Drag and drop a style JSON file here or click to browse": "גרור ושחרר כאן קובץ JSON של סגנון או לחץ כדי לעיין",
+  "Drag to resize the layer list": "יש לגרור כדי לשנות את גודל רשימת השכבות",
+  "Drag to resize the sidebar": "יש לגרור כדי לשנות את גודל סרגל הצד",
   "Duplicate": "שכפול",
   "Encoding": "קידוד",
   "Enter URL...": "הכנסו כתובת",
@@ -62,6 +67,9 @@
   "Export modal": "חלונית ייצוא",
   "Filter": "סינון",
   "Focus map": "פיקוס המפה",
+  "Fog color": "צבע ערפל",
+  "Fog ground blend": "מיזוג ערפל עם הקרקע",
+  "Font faces": "קבצי גופנים",
   "Function": "פונקציה",
   "Gallery Styles": "גלריית סטיילים",
   "General layout properties": "תכונות פריסה כלליות",
@@ -74,6 +82,8 @@
   "Glyphs URL": "כתובת סמלילים",
   "Help": "עזרה",
   "Hide": "הסתרה",
+  "Horizon color": "צבע האופק",
+  "Horizon fog blend": "מיזוג ערפל באופק",
   "Icon layout properties": "תכונות פריסה של סמליל",
   "Icon paint properties": "תכונות ציור של סמליל",
   "If the Map is in focused you can use the following shortcuts": "אם המפה נמצאת בפוקוס תוכלו להשתמש בקיצורי הדרך",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "לא הוגדרו משתני מצב גלובלי. הוסף משתנים כדי ליצור ערכים שניתן לעשות בהם שימוש חוזר בסטייל שלך.",
   "Open": "פתיחה",
   "Open a local JSON style from your computer.": "פתיחת סטייל JSON מקומי מהמחשב שלך.",
-  "OpenLayers (experimental)": "OpenLayers (experimental)",
   "Open local Style": "פתיחת סטייל מקומי",
   "Open modal": "פתיחת חלונית",
   "Open one of the publicly available styles to start from.": "פתיחת אחד הסטייליםפ הציבוריים על מנת להתחיל מהם.",
   "Open Style": "פתיחת סטייל",
+  "OpenLayers (experimental)": "OpenLayers (experimental)",
   "Options": "אפשרויות",
   "Output value": "ערך החזרה",
   "Owner": "שייך ל",
@@ -152,6 +162,7 @@
   "Remove variable": "הסר משתנה",
   "Remove zoom level from stop": "הסרת רמת זום מעצירה",
   "Revert from expression": "החזרה מביטוי",
+  "Roll": "גלגול",
   "Save": "שמור",
   "Save as": "שמירה בשם",
   "Save Style": "שמירת הסטייל",
@@ -162,6 +173,8 @@
   "Shortcuts": "קיצורי דרך",
   "Shortcuts menu": "תפריט קיצורי דרך",
   "Show": "הצגה",
+  "Sky color": "צבע השמיים",
+  "Sky horizon blend": "מיזוג שמיים ואופק",
   "Source": "מקור",
   "Source ID": "מזהה מקור",
   "Source Layer": "שכבת מקור",
@@ -199,6 +212,5 @@
   "Video URL": "כתובת וידאו",
   "View": "תצוגה",
   "You've entered an old style filter.": "הכנסתם סינון מסוג ישן,",
-  "Zoom": "זום",
-  "Drag and drop a style JSON file here or click to browse": "גרור ושחרר כאן קובץ JSON של סגנון או לחץ כדי לעיין"
+  "Zoom": "זום"
 }

src/locales/it/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "Aggiungi variabile",
   "any filter matches": "qualsiasi filtro corrisponde",
   "API key for Stadia Maps.": "Chiave API per Stadia Maps.",
+  "Atmosphere blend": "Sfumatura dell'atmosfera",
   "Base": "Base",
   "Bearing": "Direzione",
   "Cancel": "Annulla",
   "Center": "Centro",
+  "Center altitude": "Altitudine del centro",
   "Choose Public Source": "Scegli una sorgente pubblica",
   "Choose the default Maputnik renderer for this style.": "Scegli il renderer predefinito di Maputnik per questo stile.",
   "Click to close the editor": "Clicca per chiudere l'editor",
@@ -54,6 +56,9 @@
   "Delete expression": "Elimina espressione",
   "Delete filter block": "Elimina blocco filtro",
   "Deuteranopia filter": "Filtro deuteranopia",
+  "Drag and drop a style JSON file here or click to browse": "Trascina e rilascia qui un file JSON dello stile o fai clic per sfogliare",
+  "Drag to resize the layer list": "Trascina per ridimensionare l'elenco dei livelli",
+  "Drag to resize the sidebar": "Trascina per ridimensionare la barra laterale",
   "Duplicate": "Duplica",
   "Encoding": "Codifica",
   "Enter URL...": "Inserisci URL...",
@@ -62,6 +67,9 @@
   "Export modal": "Esporta finestra modale",
   "Filter": "Filtro",
   "Focus map": "Metti a fuoco la mappa",
+  "Fog color": "Colore della nebbia",
+  "Fog ground blend": "Sfumatura nebbia-suolo",
+  "Font faces": "File dei font",
   "Function": "Funzione",
   "Gallery Styles": "Galleria degli stili",
   "General layout properties": "Proprietà generali del layout",
@@ -74,6 +82,8 @@
   "Glyphs URL": "URL Glyphs",
   "Help": "Aiuto",
   "Hide": "Nascondi",
+  "Horizon color": "Colore dell'orizzonte",
+  "Horizon fog blend": "Sfumatura orizzonte-nebbia",
   "Icon layout properties": "Proprietà di layout dell'icona",
   "Icon paint properties": "Proprietà di pittura dell'icona",
   "If the Map is in focused you can use the following shortcuts": "Se la mappa è attiva, puoi utilizzare le seguenti scorciatoie:",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Nessuna variabile di stato globale definita. Aggiungi variabili per creare valori riutilizzabili nel tuo stile.",
   "Open": "Apri",
   "Open a local JSON style from your computer.": "Apri uno stile JSON dal tuo computer.",
-  "OpenLayers (experimental)": "OpenLayers (sperimentale)",
   "Open local Style": "Apri stile locale",
   "Open modal": "Apri finestra modale",
   "Open one of the publicly available styles to start from.": "Apro uno degli stili pubblici a partire da.",
   "Open Style": "Apri stile",
+  "OpenLayers (experimental)": "OpenLayers (sperimentale)",
   "Options": "Opzioni",
   "Output value": "Valore di output",
   "Owner": "Proprietario",
@@ -152,6 +162,7 @@
   "Remove variable": "Rimuovi variabile",
   "Remove zoom level from stop": "Rimuovi il livello di zoom dalla fermata",
   "Revert from expression": "Ripristina dall'espressione",
+  "Roll": "Rollio",
   "Save": "Salva",
   "Save as": "Salva con nome",
   "Save Style": "Opzioni stile",
@@ -162,6 +173,8 @@
   "Shortcuts": "Scorciatoie",
   "Shortcuts menu": "Scorciatoie del menu",
   "Show": "Mostra",
+  "Sky color": "Colore del cielo",
+  "Sky horizon blend": "Sfumatura cielo-orizzonte",
   "Source": "Sorgente",
   "Source ID": "ID sorgente",
   "Source Layer": "Livello sorgente",
@@ -199,6 +212,5 @@
   "Video URL": "Indirizzo video",
   "View": "Vista",
   "You've entered an old style filter.": "Hai inserito uno stile filtro obsoleto.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Trascina e rilascia qui un file JSON dello stile o fai clic per sfogliare"
+  "Zoom": "Zoom"
 }

src/locales/ja/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "変数を追加",
   "any filter matches": "いずれかのフィルタが一致",
   "API key for Stadia Maps.": "Stadia Maps の API キー",
+  "Atmosphere blend": "大気のブレンド",
   "Base": "ベース",
   "Bearing": "方位",
   "Cancel": "キャンセル",
   "Center": "中央",
+  "Center altitude": "中央の高度",
   "Choose Public Source": "公開ソースから選択",
   "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
   "Click to close the editor": "エディタを閉じるにはクリックしてください",
@@ -54,6 +56,9 @@
   "Delete expression": "式を削除",
   "Delete filter block": "フィルタブロックを削除",
   "Deuteranopia filter": "緑色盲フィルタ",
+  "Drag and drop a style JSON file here or click to browse": "ここにスタイルのJSONファイルをドラッグ＆ドロップするか、クリックして参照してください",
+  "Drag to resize the layer list": "ドラッグしてレイヤーリストのサイズを変更",
+  "Drag to resize the sidebar": "ドラッグしてサイドバーのサイズを変更",
   "Duplicate": "複製",
   "Encoding": "エンコーディング",
   "Enter URL...": "URLを入力",
@@ -62,6 +67,9 @@
   "Export modal": "書き出しのモーダル",
   "Filter": "フィルタ",
   "Focus map": "地図にフォーカス",
+  "Fog color": "霧の色",
+  "Fog ground blend": "霧と地面のブレンド",
+  "Font faces": "フォントファイル",
   "Function": "関数",
   "Gallery Styles": "ギャラリースタイル",
   "General layout properties": "一般レイアウトプロパティ",
@@ -74,6 +82,8 @@
   "Glyphs URL": "フォントグリフURL",
   "Help": "ヘルプ",
   "Hide": "非表示",
+  "Horizon color": "地平線の色",
+  "Horizon fog blend": "地平線と霧のブレンド",
   "Icon layout properties": "アイコンレイアウトプロパティ",
   "Icon paint properties": "アイコンペイントプロパティ",
   "If the Map is in focused you can use the following shortcuts": "地図がフォーカスされている場合、以下のショートカットを使用できます",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "グローバルステート変数が定義されていません。スタイルで再利用可能な値を作成するには、変数を追加してください。",
   "Open": "開く",
   "Open a local JSON style from your computer.": "コンピュータからローカルJSONスタイルを開きます。",
-  "OpenLayers (experimental)": "OpenLayers (実験的)",
   "Open local Style": "ローカルスタイルを開く",
   "Open modal": "モーダルを開く",
   "Open one of the publicly available styles to start from.": "公開スタイルを選んで開始しましょう。",
   "Open Style": "スタイルを開く",
+  "OpenLayers (experimental)": "OpenLayers (実験的)",
   "Options": "設定",
   "Output value": "値",
   "Owner": "所有者",
@@ -152,6 +162,7 @@
   "Remove variable": "変数を削除",
   "Remove zoom level from stop": "ズームレベルをストップから削除",
   "Revert from expression": "式から戻す",
+  "Roll": "ロール",
   "Save": "保存",
   "Save as": "名前を付けて保存",
   "Save Style": "スタイルを保存",
@@ -162,6 +173,8 @@
   "Shortcuts": "ショートカット",
   "Shortcuts menu": "ショートカットメニュー",
   "Show": "表示",
+  "Sky color": "空の色",
+  "Sky horizon blend": "空と地平線のブレンド",
   "Source": "ソース",
   "Source ID": "ソースID",
   "Source Layer": "ソースレイヤ",
@@ -199,6 +212,5 @@
   "Video URL": "動画URL",
   "View": "表示",
   "You've entered an old style filter.": "旧型フィルタを使用しております。",
-  "Zoom": "ズーム",
-  "Drag and drop a style JSON file here or click to browse": "ここにスタイルのJSONファイルをドラッグ＆ドロップするか、クリックして参照してください"
+  "Zoom": "ズーム"
 }

src/locales/ko/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "변수 추가",
   "any filter matches": "일부 필터 일치",
   "API key for Stadia Maps.": "Stadia Maps용 API 키 입니다.",
+  "Atmosphere blend": "대기 블렌드",
   "Base": "베이스",
   "Bearing": "방위각",
   "Cancel": "취소",
   "Center": "중심 좌표",
+  "Center altitude": "중심 고도",
   "Choose Public Source": "공개 소스 선택",
   "Choose the default Maputnik renderer for this style.": "이 스타일의 기본 Maputnik 렌더러를 선택하세요.",
   "Click to close the editor": "편집기를 닫으려면 클릭하세요",
@@ -54,6 +56,9 @@
   "Delete expression": "표현식 삭제",
   "Delete filter block": "필터 블록 삭제",
   "Deuteranopia filter": "녹색맹 필터",
+  "Drag and drop a style JSON file here or click to browse": "여기에 스타일 JSON 파일을 끌어다 놓거나 클릭하여 찾아보세요",
+  "Drag to resize the layer list": "드래그하여 레이어 목록 크기 조정",
+  "Drag to resize the sidebar": "드래그하여 사이드바 크기 조정",
   "Duplicate": "복제",
   "Encoding": "인코딩",
   "Enter URL...": "URL 입력...",
@@ -62,6 +67,9 @@
   "Export modal": "모달 내보내기",
   "Filter": "필터",
   "Focus map": "포커스 맵",
+  "Fog color": "안개 색상",
+  "Fog ground blend": "안개-지면 블렌드",
+  "Font faces": "폰트 파일",
   "Function": "함수",
   "Gallery Styles": "갤러리 스타일",
   "General layout properties": "일반 레이아웃 속성",
@@ -74,6 +82,8 @@
   "Glyphs URL": "글리프 URL",
   "Help": "도움말",
   "Hide": "숨기기",
+  "Horizon color": "지평선 색상",
+  "Horizon fog blend": "지평선-안개 블렌드",
   "Icon layout properties": "아이콘 레이아웃 속성",
   "Icon paint properties": "아이콘 페인트 속성",
   "If the Map is in focused you can use the following shortcuts": "맵에 포커스가 맞춰진 경우 다음 단축키를 사용할 수 있습니다",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "전역 상태 변수가 정의되지 않았습니다. 스타일에서 재사용 가능한 값을 생성하려면 변수를 추가하세요.",
   "Open": "열기",
   "Open a local JSON style from your computer.": "컴퓨터에서 로컬 JSON 스타일을 엽니다.",
-  "OpenLayers (experimental)": "OpenLayers (실험적)",
   "Open local Style": "로컬 스타일 열기",
   "Open modal": "모달 열기",
   "Open one of the publicly available styles to start from.": "공개 스타일 중 하나를 선택하여 시작하세요.",
   "Open Style": "스타일 열기",
+  "OpenLayers (experimental)": "OpenLayers (실험적)",
   "Options": "옵션",
   "Output value": "값",
   "Owner": "소유자",
@@ -152,6 +162,7 @@
   "Remove variable": "변수 제거",
   "Remove zoom level from stop": "기준점에서 줌 레벨 제거",
   "Revert from expression": "표현식에서 되돌리기",
+  "Roll": "롤 각도",
   "Save": "저장",
   "Save as": "다른 이름으로 저장",
   "Save Style": "스타일 저장",
@@ -162,6 +173,8 @@
   "Shortcuts": "단축키",
   "Shortcuts menu": "단축키 메뉴",
   "Show": "표시",
+  "Sky color": "하늘 색상",
+  "Sky horizon blend": "하늘-지평선 블렌드",
   "Source": "소스",
   "Source ID": "소스 ID",
   "Source Layer": "소스 레이어",
@@ -199,6 +212,5 @@
   "Video URL": "비디오 URL",
   "View": "보기",
   "You've entered an old style filter.": "이전 스타일 필터를 입력했습니다.",
-  "Zoom": "줌",
-  "Drag and drop a style JSON file here or click to browse": "여기에 스타일 JSON 파일을 끌어다 놓거나 클릭하여 찾아보세요"
+  "Zoom": "줌"
 }

src/locales/tr/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "Değişken Ekle",
   "any filter matches": "herhangi bir filtre eşleşirse",
   "API key for Stadia Maps.": "Stadia Maps için API anahtarı.",
+  "Atmosphere blend": "Atmosfer karışımı",
   "Base": "Temel",
   "Bearing": "Yön",
   "Cancel": "İptal",
   "Center": "Merkez",
+  "Center altitude": "Merkez yüksekliği",
   "Choose Public Source": "Herkese Açık Kaynak Seç",
   "Choose the default Maputnik renderer for this style.": "Bu stil için varsayılan Maputnik işleyicisini seçin.",
   "Click to close the editor": "Düzenleyiciyi kapatmak için tıklayın",
@@ -55,6 +57,8 @@
   "Delete filter block": "Filtre bloğunu sil",
   "Deuteranopia filter": "Döteranopi filtresi",
   "Drag and drop a style JSON file here or click to browse": "Bir stil JSON dosyasını buraya sürükleyip bırakın veya göz atmak için tıklayın",
+  "Drag to resize the layer list": "Katman listesini yeniden boyutlandırmak için sürükleyin",
+  "Drag to resize the sidebar": "Kenar çubuğunu yeniden boyutlandırmak için sürükleyin",
   "Duplicate": "Kopyala",
   "Encoding": "Kodlama",
   "Enter URL...": "URL girin...",
@@ -63,6 +67,9 @@
   "Export modal": "Dışa aktarma modalı",
   "Filter": "Filtre",
   "Focus map": "Haritaya odaklan",
+  "Fog color": "Sis rengi",
+  "Fog ground blend": "Sis-zemin karışımı",
+  "Font faces": "Yazı tipi dosyaları",
   "Function": "Fonksiyon",
   "Gallery Styles": "Galeri Stilleri",
   "General layout properties": "Genel yerleşim özellikleri",
@@ -75,6 +82,8 @@
   "Glyphs URL": "Glif URL'si",
   "Help": "Yardım",
   "Hide": "Gizle",
+  "Horizon color": "Ufuk rengi",
+  "Horizon fog blend": "Ufuk-sis karışımı",
   "Icon layout properties": "Simge yerleşim özellikleri",
   "Icon paint properties": "Simge boyama özellikleri",
   "If the Map is in focused you can use the following shortcuts": "Harita odaktaysa aşağıdaki kısayolları kullanabilirsiniz",
@@ -122,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Genel durum değişkeni tanımlanmadı. Stilinizde yeniden kullanılabilir değerler oluşturmak için değişken ekleyin.",
   "Open": "Aç",
   "Open a local JSON style from your computer.": "Bilgisayarınızdan yerel bir JSON stili açın.",
-  "OpenLayers (experimental)": "OpenLayers (deneysel)",
   "Open local Style": "Yerel Stili Aç",
   "Open modal": "Modalı aç",
   "Open one of the publicly available styles to start from.": "Başlamak için herkese açık stillerden birini açın.",
   "Open Style": "Stili Aç",
+  "OpenLayers (experimental)": "OpenLayers (deneysel)",
   "Options": "Seçenekler",
   "Output value": "Çıkış değeri",
   "Owner": "Sahip",
@@ -153,6 +162,7 @@
   "Remove variable": "Değişkeni kaldır",
   "Remove zoom level from stop": "Duraktan yakınlaştırma seviyesini kaldır",
   "Revert from expression": "İfadeden geri dön",
+  "Roll": "Yuvarlanma",
   "Save": "Kaydet",
   "Save as": "Farklı kaydet",
   "Save Style": "Stili Kaydet",
@@ -163,6 +173,8 @@
   "Shortcuts": "Kısayollar",
   "Shortcuts menu": "Kısayollar menüsü",
   "Show": "Göster",
+  "Sky color": "Gökyüzü rengi",
+  "Sky horizon blend": "Gökyüzü-ufuk karışımı",
   "Source": "Kaynak",
   "Source ID": "Kaynak Kimliği",
   "Source Layer": "Kaynak Katmanı",

src/locales/zh/translation.json

@@ -13,10 +13,12 @@
   "Add Variable": "添加变量",
   "any filter matches": "任何过滤器匹配",
   "API key for Stadia Maps.": "Stadia Maps 的 API 密钥",
+  "Atmosphere blend": "大气混合",
   "Base": "基础",
   "Bearing": "方位",
   "Cancel": "取消",
   "Center": "中心",
+  "Center altitude": "中心海拔",
   "Choose Public Source": "选择公共源",
   "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
   "Click to close the editor": "点击关闭编辑器",
@@ -54,6 +56,9 @@
   "Delete expression": "删除表达式",
   "Delete filter block": "删除过滤器块",
   "Deuteranopia filter": "绿色盲滤镜",
+  "Drag and drop a style JSON file here or click to browse": "将样式 JSON 文件拖放到此处或点击以浏览",
+  "Drag to resize the layer list": "拖动以调整图层列表大小",
+  "Drag to resize the sidebar": "拖动以调整侧边栏大小",
   "Duplicate": "复制",
   "Encoding": "编码",
   "Enter URL...": "输入URL...",
@@ -62,6 +67,9 @@
   "Export modal": "导出模态框",
   "Filter": "过滤器",
   "Focus map": "聚焦地图",
+  "Fog color": "雾颜色",
+  "Fog ground blend": "雾与地面混合",
+  "Font faces": "字体文件",
   "Function": "函数",
   "Gallery Styles": "画廊样式",
   "General layout properties": "常规布局属性",
@@ -74,6 +82,8 @@
   "Glyphs URL": "字形URL",
   "Help": "帮助",
   "Hide": "隐藏",
+  "Horizon color": "地平线颜色",
+  "Horizon fog blend": "地平线与雾混合",
   "Icon layout properties": "图标布局属性",
   "Icon paint properties": "图标绘制属性",
   "If the Map is in focused you can use the following shortcuts": "如果地图处于焦点状态，您可以使用以下快捷键",
@@ -121,11 +131,11 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "未定义全局状态变量。添加变量以在样式中创建可重用的值。",
   "Open": "打开",
   "Open a local JSON style from your computer.": "从您的计算机打开本地JSON样式。",
-  "OpenLayers (experimental)": "OpenLayers（实验性）",
   "Open local Style": "打开本地样式",
   "Open modal": "打开模态框",
   "Open one of the publicly available styles to start from.": "打开一个公开可用的样式开始。",
   "Open Style": "打开样式",
+  "OpenLayers (experimental)": "OpenLayers（实验性）",
   "Options": "选项",
   "Output value": "输出值",
   "Owner": "所有者",
@@ -152,6 +162,7 @@
   "Remove variable": "移除变量",
   "Remove zoom level from stop": "从停靠点移除缩放级别",
   "Revert from expression": "从表达式恢复",
+  "Roll": "翻滚角",
   "Save": "保存",
   "Save as": "另存为",
   "Save Style": "保存样式",
@@ -162,6 +173,8 @@
   "Shortcuts": "快捷键",
   "Shortcuts menu": "快捷方式菜单",
   "Show": "显示",
+  "Sky color": "天空颜色",
+  "Sky horizon blend": "天空与地平线混合",
   "Source": "源",
   "Source ID": "源ID",
   "Source Layer": "源图层",
@@ -199,6 +212,5 @@
   "Video URL": "视频URL",
   "View": "视图",
   "You've entered an old style filter.": "您输入了一个旧风格的过滤器。",
-  "Zoom": "缩放",
-  "Drag and drop a style JSON file here or click to browse": "将样式 JSON 文件拖放到此处或点击以浏览"
+  "Zoom": "缩放"
 }

src/styles/_components.scss

@@ -6,7 +6,8 @@
 .maputnik-map__container {
   background: white;
   display: flex;
-  width: vars.$layout-map-width;
+  width: 100%;
+  height: 100%;
 
   &--error {
     align-items: center;

src/styles/_layout.scss

@@ -28,31 +28,76 @@
     display: flex;
   }
 
-  &-list {
-    width: 200px;
-    background-color: vars.$color-black;
+  // The resizable panel group filling the main area.
+  &-panels {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
   }
 
+  &-sidebar-panels,
+  &-sidebar,
+  &-code-editor,
+  &-list,
+  &-drawer,
+  &-map {
+    height: 100%;
+    // scroll-container is position: absolute
+    position: relative;
+  }
+
+  &-sidebar,
+  &-code-editor,
+  &-list,
   &-drawer {
-    width: 370px;
     background-color: vars.$color-black;
-    // scroll-container is position: absolute
-    position: relative;
   }
 
-  &-code-editor {
-    width: 570px;
-    background-color: vars.$color-black;
-    // scroll-container is position: absolute
+  &-resize-handle {
+    width: 5px;
+    background-color: transparent;
     position: relative;
+    z-index: 5;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+      background-color: rgba(vars.$color-lowgray, 0.5);
+    }
+
+    // The separator is keyboard resizable, so it needs a visible focus ring.
+    &:focus-visible {
+      outline: #8e8e8e auto 1px;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 3px;
+      height: 30px;
+      border-radius: 2px;
+      background-color: vars.$color-lowgray;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover::after,
+    &:active::after,
+    &:focus-visible::after {
+      opacity: 0.7;
+    }
   }
 
   &-bottom {
     position: fixed;
     bottom: 0;
-    right: 0;
     z-index: 10;
-    width: vars.$layout-map-width;
+    inset-inline-start: var(--sidebar-width);
+    inset-inline-end: 0;
     background-color: vars.$color-black;
   }
 }

src/styles/_vars.scss

@@ -21,10 +21,6 @@ $font-family: Roboto, sans-serif;
 $toolbar-height: 40px;
 $toolbar-offset: 0;
 
-$layout-list-width: 200px;
-$layout-editor-width: 370px;
-$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
-
 // 'menu-down' from 'https://materialdesignicons.com/'
 // See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>
 $icon-down-arrow: "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M7,10L12,15L17,10H7Z' /></svg>"