Merge branch 'main' into sidebar-resize-panels

## Launch Checklist

<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->

When a fixed paint value is converted to a zoom function, Maputnik
creates exactly two stops.

<img width="362" height="226" alt="image"
src="https://github.com/user-attachments/assets/209aebbf-7bb3-4422-b0c7-1019e20a9ddb"
/>

Deleting either one of those two stops leaves a single remaining value.
During the transition back to the ordinary field editor, `ZoomProperty`
can render with `stops` undefined. It previously called `.map`
unconditionally, causing the editor to crash.

<img width="2551" height="1248" alt="image"
src="https://github.com/user-attachments/assets/f5c2af59-dcae-4ffe-8245-f175eea9c843"
/>

This PR guards the stop list with optional chaining. The change only
protects the render path and does not alter zoom-function conversion or
value persistence.

Now, the remaining stop's value will be restored after deleting the
other stop:

<img width="367" height="168" alt="image"
src="https://github.com/user-attachments/assets/8d13236b-6140-451b-8613-0bc5f11893de"
/>

The regression test covers `circle-opacity`:

1. Convert a fixed value to a zoom function.
2. Change the second stop's value.
3. Delete the first of the two stops.
4. Verify that the ordinary field editor reappears.
5. Verify that the remaining stop's value is restored.
6. Edit the restored field and verify that the style updates
successfully.

 - [x] Briefly describe the changes in this PR.
 - [ ] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

CHANGELOG.md

@@ -5,9 +5,13 @@
 - 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
+- The sidebar can now be resized, both as a whole and in the split between the layer list and the layer editor
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Prevent a crash when converting a function to an expression
+- Prevent a crash when deleting either stop from a function with two stops
+- 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`)
 - _...Add new stuff here..._

e2e/fixtures/grouped-layers-style.json

@@ -0,0 +1,16 @@
+{
+  "version": 8,
+  "name": "Grouped layers",
+  "sources": {},
+  "layers": [
+    { "id": "background", "type": "background" },
+    { "id": "park-a", "type": "background" },
+    { "id": "park-b", "type": "background" },
+    { "id": "park-c", "type": "background" },
+    { "id": "road", "type": "background" },
+    { "id": "park-d", "type": "background" },
+    { "id": "park-e", "type": "background" },
+    { "id": "water-a", "type": "background" },
+    { "id": "water-b", "type": "background" }
+  ]
+}

e2e/layer-editor.spec.ts

@@ -289,6 +289,20 @@ describe("layer editor", () => {
         });
       });
 
+      test("should leave a plain editable value after deleting a stop", async () => {
+        await when.setFunctionStopValue("circle-radius", "Output value", 1, "0");
+        await when.deleteFunctionStop("circle-radius");
+        await then(get.elementByTestId("spec-field:circle-radius")).shouldBeVisible();
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 0 } }],
+        });
+
+        await when.setValue("spec-field-input:circle-radius", "7");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 7 } }],
+        });
+      });
+
       test("should set the base", async () => {
         await when.setFunctionBase("circle-radius", "2");
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -310,8 +324,9 @@ describe("layer editor", () => {
         });
       });
 
-      test("should convert to an expression", async () => {
+      test("should convert to an expression without crashing", async () => {
         await when.makeExpression("circle-radius");
+        await then(get.element("[data-wd-key='spec-field-container:circle-radius'] .maputnik-expression-editor")).shouldBeVisible();
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
           layers: [{ id, paint: { "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 5, 10, 5] } }],
         });

e2e/layers-list.spec.ts

@@ -306,6 +306,75 @@ describe("layers list", () => {
   });
 
   describe("groups", () => {
+    for (const control of ["menu", "trash"] as const) {
+      describe(`after deletion using ${control}`, () => {
+        beforeEach(async () => {
+          await when.setStyle("grouped_layers");
+        });
+
+        test("keeps all groups expanded when an earlier layer is deleted", async () => {
+          await when.click("skip-target-layer-list");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-item:background")).shouldNotExist();
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await expect(get.elementByTestId("layer-list-group:water-6").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+
+        test("preserves separate states for groups with the same prefix", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-0").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await expect(get.elementByTestId("layer-list-group:park-4").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("keeps a group expanded when its first layer is deleted", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("park-a", control);
+          await then(get.elementByTestId("layer-list-item:park-a")).shouldNotExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-c")).shouldBeVisible();
+        });
+
+        for (const expandedGroup of ["park-1", "park-5"]) {
+          test(`keeps a merged group expanded when ${expandedGroup} was expanded`, async () => {
+            await when.click("layer-list-group:" + expandedGroup);
+            await when.deleteLayer("road", control);
+            await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+            await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+            await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+            await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          });
+        }
+
+        test("keeps a merged group collapsed when both groups were collapsed", async () => {
+          await when.deleteLayer("road", control);
+          await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+          await when.click("layer-list-item:background");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldNotBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("preserves later groups after deleting an entire group", async () => {
+          await when.click("skip-target-layer-list");
+          await when.deleteLayer("park-a", control);
+          await when.deleteLayer("park-b", control);
+          await when.deleteLayer("park-c", control);
+          await expect(get.elementByTestId("layer-list-group:water-4").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+      });
+    }
+
     test("simple", async () => {
       await when.setStyle("geojson");
 

e2e/maputnik-driver.ts

@@ -39,6 +39,7 @@ export class MaputnikDriver {
         "example-style-with-zoom-7-and-center-0-51.json",
         "example-style-with-zoom-5-and-center-50-50.json",
         "access-token-style.json",
+        "grouped-layers-style.json",
       ];
       for (const fixture of styleFixtures) {
         await this.helper.given.interceptAndMockResponse({
@@ -63,6 +64,18 @@ export class MaputnikDriver {
 
     modal: this.modalDriver.when,
 
+    deleteLayer: async (id: string, control: "menu" | "trash" = "menu") => {
+      if (control === "trash") {
+        await this.helper.when.hover("layer-list-item:" + id);
+        await this.helper.when.click("layer-list-item:" + id + ":delete");
+        return;
+      }
+
+      await this.helper.when.click("layer-list-item:" + id);
+      await this.helper.when.click("skip-target-layer-editor");
+      await this.helper.when.click("menu-delete-layer");
+    },
+
     setStyle: async (
       styleProperties:
         | "geojson"
@@ -73,6 +86,7 @@ export class MaputnikDriver {
         | "font"
         | "zoom_7_center_0_51"
         | "access_tokens"
+        | "grouped_layers"
         | "",
       zoom?: number
     ) => {
@@ -85,6 +99,7 @@ export class MaputnikDriver {
         font: "example-style-with-fonts.json",
         zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
         access_tokens: "access-token-style.json",
+        grouped_layers: "grouped-layers-style.json",
       };
 
       const url = new URL(baseUrl);

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) {
@@ -349,6 +351,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 +457,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,7 +29,7 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.3",
+    "@codemirror/state": "^6.7.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.43.11",
     "@dnd-kit/core": "^6.3.1",
@@ -38,7 +38,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
     "@maplibre/maplibre-gl-inspect": "^1.9.0",
-    "@maplibre/maplibre-gl-style-spec": "^26.4.1",
+    "@maplibre/maplibre-gl-style-spec": "^26.4.2",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -76,6 +76,7 @@
     "react-i18next": "^17.0.13",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.11.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.9",
     "string-hash": "^1.1.3",
@@ -101,7 +102,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/codemirror": "^5.60.18",
     "@types/color": "^4.2.1",
@@ -125,20 +126,20 @@
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/coverage-v8": "^5.0.0",
     "cors": "^2.8.6",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.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.0",
+    "i18next-cli": "^1.73.1",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
     "nyc": "^18.0.0",
     "postcss": "^8.5.28",
     "react-hot-loader": "^4.13.1",
     "sass": "^1.104.0",
-    "stylelint": "^17.14.1",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3",
@@ -146,6 +147,6 @@
     "uuid": "^14.0.2",
     "vite": "^8.2.2",
     "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   }
 }

src/components/AppLayout.tsx

@@ -1,9 +1,23 @@
-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 = {
+// Keep these in sync with $layout-list-width/$layout-editor-width in _vars.scss
+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 +25,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/FieldFunction.tsx

@@ -129,16 +129,10 @@ type FieldFunctionProps = {
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
 export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
-  const [dataType, setDataType] = React.useState(
-    getDataType(props.value, props.fieldSpec)
-  );
   const [isEditing, setIsEditing] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isEditing) {
-      setDataType(getDataType(props.value, props.fieldSpec));
-    }
-  }, [props.value, props.fieldSpec, isEditing]);
+  // Keep the expression editor mounted while typing, but otherwise select the
+  // editor from the current value so a collapsed function never renders as stops.
+  const dataType = isEditing ? "expression" : getDataType(props.value, props.fieldSpec);
 
   const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
@@ -173,7 +167,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const deleteExpression = () => {
     const { fieldSpec, fieldName } = props;
     props.onChange(fieldName, fieldSpec.default);
-    setDataType("value");
+    setIsEditing(false);
   };
 
   const deleteStop = (stopIdx: number) => {
@@ -233,10 +227,10 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         type: "identity",
         property: value[1],
       });
-      setDataType("value");
+      setIsEditing(false);
     } else if (isLiteralExpression(value)) {
       props.onChange(fieldName, value[1]);
-      setDataType("value");
+      setIsEditing(false);
     }
   };
 

src/components/LayerList.tsx

@@ -106,13 +106,13 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     });
   };
 
-  groupedLayers(): (LayerSpecification & {key: string})[][] {
+  groupedLayers(layers = this.props.layers): (LayerSpecification & {key: string})[][] {
     const groups = [];
     const layerIdCount = new Map();
 
-    for (let i = 0; i < this.props.layers.length; i++) {
-      const origLayer = this.props.layers[i];
-      const previousLayer = this.props.layers[i-1];
+    for (let i = 0; i < layers.length; i++) {
+      const origLayer = layers[i];
+      const previousLayer = layers[i-1];
       layerIdCount.set(origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
@@ -192,7 +192,39 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     return propsChanged;
   }
 
+  /**
+   * Preserves group state through surviving layer IDs when group indices change.
+   * If deletion joins groups, the result stays expanded when either group was.
+   */
+  private preserveLayerGroupState(previousLayers: LayerSpecification[]) {
+    if (previousLayers === this.props.layers) return;
+
+    const collapsedByLayer = new Map<string, boolean>();
+    let idx = 0;
+    for (const layers of this.groupedLayers(previousLayers)) {
+      const collapsed = this.isCollapsed(layerPrefix(layers[0].id), idx);
+      for (const layer of layers) {
+        collapsedByLayer.set(layer.id, collapsed);
+      }
+      idx += layers.length;
+    }
+
+    const collapsedGroups: {[key: string]: boolean} = {};
+    idx = 0;
+    for (const layers of this.groupedLayers()) {
+      const lookupKey = [layerPrefix(layers[0].id), idx].join("-");
+      collapsedGroups[lookupKey] = layers.every(layer => collapsedByLayer.get(layer.id) !== false);
+      idx += layers.length;
+    }
+
+    if (!lodash.isEqual(collapsedGroups, this.state.collapsedGroups)) {
+      this.setState({ collapsedGroups });
+    }
+  }
+
   componentDidUpdate (prevProps: LayerListContainerProps) {
+    this.preserveLayerGroupState(prevProps.layers);
+
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {

src/locales/de/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "Ausdruck löschen",
   "Delete filter block": "Filterblock löschen",
   "Deuteranopia filter": "Deuteranopie-Filter",
+  "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...",

src/locales/fr/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "Supprimer l'expression",
   "Delete filter block": "Supprimer le bloc de filtre",
   "Deuteranopia filter": "Filtre Deutéranopie",
+  "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...",

src/locales/he/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "מחיקת ביטוי",
   "Delete filter block": "מחיקת גוש מסנן",
   "Deuteranopia filter": "Deuteranopia filter",
+  "Drag to resize the layer list": "יש לגרור כדי לשנות את גודל רשימת השכבות",
+  "Drag to resize the sidebar": "יש לגרור כדי לשנות את גודל סרגל הצד",
   "Duplicate": "שכפול",
   "Encoding": "קידוד",
   "Enter URL...": "הכנסו כתובת",

src/locales/it/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "Elimina espressione",
   "Delete filter block": "Elimina blocco filtro",
   "Deuteranopia filter": "Filtro deuteranopia",
+  "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...",

src/locales/ja/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "式を削除",
   "Delete filter block": "フィルタブロックを削除",
   "Deuteranopia filter": "緑色盲フィルタ",
+  "Drag to resize the layer list": "ドラッグしてレイヤーリストのサイズを変更",
+  "Drag to resize the sidebar": "ドラッグしてサイドバーのサイズを変更",
   "Duplicate": "複製",
   "Encoding": "エンコーディング",
   "Enter URL...": "URLを入力",

src/locales/ko/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "표현식 삭제",
   "Delete filter block": "필터 블록 삭제",
   "Deuteranopia filter": "녹색맹 필터",
+  "Drag to resize the layer list": "드래그하여 레이어 목록 크기 조정",
+  "Drag to resize the sidebar": "드래그하여 사이드바 크기 조정",
   "Duplicate": "복제",
   "Encoding": "인코딩",
   "Enter URL...": "URL 입력...",

src/locales/tr/translation.json

@@ -55,6 +55,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...",

src/locales/zh/translation.json

@@ -54,6 +54,8 @@
   "Delete expression": "删除表达式",
   "Delete filter block": "删除过滤器块",
   "Deuteranopia filter": "绿色盲滤镜",
+  "Drag to resize the layer list": "拖动以调整图层列表大小",
+  "Drag to resize the sidebar": "拖动以调整侧边栏大小",
   "Duplicate": "复制",
   "Encoding": "编码",
   "Enter URL...": "输入URL...",

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

@@ -13,6 +13,9 @@
 
 //APP LAYOUT
 .maputnik-layout {
+  // Kept up to date by AppLayout as the sidebar is resized.
+  --sidebar-width: #{vars.$layout-list-width + vars.$layout-editor-width};
+
   font-family: vars.$font-family;
   color: vars.$color-white;
 
@@ -28,31 +31,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

@@ -23,7 +23,6 @@ $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>