feat(colorbar): stack-order fix, stacking direction, and resizable panel (#884) (#901)

* fix(colorbar): keep stack order on update and add stacking direction (#884)

Bump maplibre-gl-components to 0.25.2, which groups colorbars sharing a
corner into one control so updating a colorbar no longer jumps it to the
top of the stack, and adds a stacking-direction option (vertical or
horizontal) for multiple colorbars. Mirror the new stackOrientation field
in the saved project state so the choice round-trips on reopen.

Fixes #884

* test(colorbar): guard stackOrientation round-trip in project state

Export normalizeColorbarState and add unit tests that a horizontal stack
choice persists, missing/unknown values fall back to vertical, and the
state round-trips cleanly. Addresses review feedback on PR #901.

* Address Claude review feedback

- Add an explicit "vertical" pass-through test so the two valid
  stackOrientation values are isolated (a `=== "vertical"` typo would
  otherwise pass every existing case).
- Use a non-empty customColors in the round-trip input so the
  normalizer's empty-string substitution no longer obscures the intent.
- Trim the file header comment to a concise three lines.

* Address Claude review feedback

- Add an @internal JSDoc tag to normalizeColorbarState clarifying it is
  exported only for unit testing.
- Add a test covering null/undefined/non-object input (the early-return
  branch).
- Drop the file header comment; the describe label and test names cover it.

* feat(colorbar): make the colorbar panel resizable with corner grips

Bump maplibre-gl-components to 0.25.3, which adds two bottom-corner resize
grips to the colorbar GUI panel (matching the HTML and data panels). Drag
either grip to grow the panel toward the map interior.

Author: giswqs

apps/geolibre-desktop/package.json

@@ -59,7 +59,7 @@
     "maplibre-gl": "^5.24.0",
     "maplibre-gl-3d-tiles": "^0.5.3",
     "maplibre-gl-basemap-control": "^0.9.0",
-    "maplibre-gl-components": "^0.25.1",
+    "maplibre-gl-components": "^0.25.3",
     "maplibre-gl-duckdb": "^0.2.3",
     "maplibre-gl-earth-engine": "^0.4.2",
     "maplibre-gl-enviroatlas": "^0.1.1",

package-lock.json

@@ -32,7 +32,7 @@
     "maplibre-gl": "^5.24.0",
     "maplibre-gl-3d-tiles": "^0.5.3",
     "maplibre-gl-basemap-control": "^0.9.0",
-    "maplibre-gl-components": "^0.25.1",
+    "maplibre-gl-components": "^0.25.3",
     "maplibre-gl-duckdb": "^0.2.3",
     "maplibre-gl-earth-engine": "^0.4.2",
     "maplibre-gl-enviroatlas": "^0.1.1",

packages/plugins/package.json

@@ -814,6 +814,7 @@ interface ComponentColorbarGuiState extends ComponentColorbarGuiEntryState {
   hasColorbar: boolean;
   selectedColorbarIndex: number;
   colorbars: ComponentColorbarGuiEntryState[];
+  stackOrientation: "horizontal" | "vertical";
 }
 
 interface ComponentLegendItem {
@@ -1431,7 +1432,8 @@ function normalizeComponentsProjectState(
   };
 }
 
-function normalizeColorbarState(
+/** @internal Exported only so the project-state normalizer can be unit-tested. */
+export function normalizeColorbarState(
   state: unknown
 ): ComponentColorbarGuiState | undefined {
   if (!state || typeof state !== "object") return undefined;
@@ -1452,6 +1454,8 @@ function normalizeColorbarState(
     hasColorbar: colorbars.length > 0,
     selectedColorbarIndex,
     colorbars,
+    stackOrientation:
+      candidate.stackOrientation === "horizontal" ? "horizontal" : "vertical",
   };
 }
 

packages/plugins/src/plugins/maplibre-components.ts

@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { normalizeColorbarState } from "../packages/plugins/src/plugins/maplibre-components.ts";
+
+describe("normalizeColorbarState stackOrientation", () => {
+  it("keeps a horizontal stack orientation", () => {
+    const normalized = normalizeColorbarState({
+      visible: true,
+      colorbars: [],
+      stackOrientation: "horizontal",
+    });
+    assert.equal(normalized?.stackOrientation, "horizontal");
+  });
+
+  it("returns undefined for null/undefined/non-object input", () => {
+    assert.equal(normalizeColorbarState(null), undefined);
+    assert.equal(normalizeColorbarState(undefined), undefined);
+    assert.equal(normalizeColorbarState("nope"), undefined);
+  });
+
+  it("defaults missing stack orientation to vertical (backward compat)", () => {
+    const normalized = normalizeColorbarState({ visible: true, colorbars: [] });
+    assert.equal(normalized?.stackOrientation, "vertical");
+  });
+
+  it("coerces an unknown stack orientation to vertical", () => {
+    const normalized = normalizeColorbarState({
+      visible: true,
+      colorbars: [],
+      stackOrientation: "diagonal",
+    });
+    assert.equal(normalized?.stackOrientation, "vertical");
+  });
+
+  it("preserves an explicit vertical stack orientation", () => {
+    const normalized = normalizeColorbarState({
+      visible: true,
+      colorbars: [],
+      stackOrientation: "vertical",
+    });
+    assert.equal(normalized?.stackOrientation, "vertical");
+  });
+
+  it("round-trips a horizontal choice through a second normalization", () => {
+    const once = normalizeColorbarState({
+      visible: true,
+      colorbars: [
+        {
+          mode: "named",
+          colormap: "viridis",
+          customColors: "#440154, #31688e, #21918c, #90d743, #fde725",
+          vmin: 0,
+          vmax: 100,
+          label: "Depth",
+          units: "",
+          orientation: "vertical",
+          colorbarPosition: "bottom-right",
+        },
+      ],
+      stackOrientation: "horizontal",
+    });
+    const twice = normalizeColorbarState(once);
+    assert.equal(twice?.stackOrientation, "horizontal");
+    assert.deepEqual(twice, once);
+  });
+});