feat(plugins): add a STAC catalogs browser plugin (#1516)

* feat(plugins): add a STAC catalogs browser plugin

Browsing SpatioTemporal Asset Catalogs previously meant leaving the app or
hand-adding COG URLs. This plugin discovers catalogs from STAC Index, connects
to both static catalogs and STAC APIs, and adds visualizable assets as layers.

* Address CodeRabbit review feedback

- Thread the panel's AbortController signal through visualizeAsset so an
  in-flight GeoJSON asset fetch is cancelled when the panel unmounts instead
  of leaving the Add button disabled indefinitely.
- Normalize item.bbox through itemBbox() before the extent test in
  searchStaticStac; a 3D (6-element) bbox was read as 2D, comparing minZ
  against the query's minX and silently mis-filtering items with an
  elevation extent.
- Cover the searchStacApi GET fallback and the 3D-bbox static filter case.

* fix(stac): collapse per-asset buttons into a dropdown, resize collections

An item with ten assets rendered twenty buttons, so a page of twenty results
was a wall of them. Each card is now Zoom plus one asset dropdown with a
single Add and Download, preselecting the first asset that can go on the map
and disabling Add with an explanatory tooltip for the rest.

The collection list is also drag-resizable, since catalogs can advertise
well over a hundred collections into a three-row box.

* fix(stac): register search footprints as a real layer

The footprints were pushed straight onto the MapLibre style, so they never
appeared in the Layers panel and there was no way to hide or remove them.
They are a store GeoJSON layer now, with visibility, opacity, styling, and
delete working like any other layer, and they persist when the panel closes.

Repeat searches patch the existing layer instead of stacking duplicates, and
a search after the user deletes it adds it back.

* feat(stac): footprint selection and raster rendering options

Clicking a footprint on the map now selects that item: the matching result
card is outlined and scrolled into view, and the footprint is highlighted.
Clicking a card selects it too, so the map and the list stay in step both
ways. A fresh search clears the selection; Load more keeps it.

Adds a collapsed "Raster rendering options" section feeding addCogLayer, so
a GeoTIFF asset can be added with a band combination, named colormap, min/max
rescale, and NoData override instead of only the renderer's inferred defaults.

Result cards get a minimum height and the filter sections scroll as a group,
so opening the new section cannot push the results off the panel.

* Address CodeRabbit review feedback

- Mark the footprints layer with metadata.sourceKind and look it up by that
  marker as well as by id. The layer is saved into the project while
  footprintLayerId only lives for the session, so a search after reopening a
  saved project added a second copy and deactivation could not remove the
  restored one.

* fix(stac): expose raster symbology for COG assets

* feat(stac): extend and clear catalog searches

* fix(stac): render COG assets from direct HTTP URLs

* fix(layers): scroll and copy metadata

* i18n: translate the STAC Catalogs plugin name into the 15 non-English catalogs

The plugin name added in this branch was the only key missing anywhere, so
every catalog fell back to English in the Plugins menu. STAC stays Latin like
the other acronym-named entries (NASA Earthdata, FEMA NFHL); only "Catalogs"
is translated, reusing each catalog's existing word for it.

* i18n: migrate the STAC panel strings to the label-push pattern

The panel built its DOM with English literals, so it rendered English in every
locale no matter what the catalogs said. It now takes its 64 user-facing
strings from a StacLabels record that the host fills with t() and re-pushes on
language change, matching maplibre-graticule and maplibre-timelapse.

All 15 non-English catalogs are translated, so coverage stays at 100 percent.
Count and asset strings follow the h3Plugin.cellCount precedent of a single
form phrased neutrally rather than CLDR plural sets.

Author: giswqs

apps/geolibre-desktop/src/components/layout/TopToolbar.tsx

@@ -29,6 +29,7 @@ import {
   setHuggingFaceLabels,
   setSourceCoopLabels,
   setReverseGeocodeLabels,
+  setStacLabels,
   setTimelapseLabels,
   DECK_VIZ_PLUGIN_ID,
   DIRECTIONS_PLUGIN_ID,
@@ -572,6 +573,73 @@ export function TopToolbar({
       recordingUnsupported: t("timelapse.recordingUnsupported"),
       loadingTiles: t("timelapse.loadingTiles"),
     });
+    setStacLabels({
+      title: t("stacPlugin.title"),
+      getTitle: () => i18n.t("stacPlugin.title"),
+      footprintLayerName: t("stacPlugin.footprintLayerName"),
+      catalogSearch: t("stacPlugin.catalogSearch"),
+      catalogSearchPlaceholder: t("stacPlugin.catalogSearchPlaceholder"),
+      indexLoading: t("stacPlugin.indexLoading"),
+      indexUnavailable: t("stacPlugin.indexUnavailable"),
+      indexLoadFailed: t("stacPlugin.indexLoadFailed"),
+      urlLabel: t("stacPlugin.urlLabel"),
+      connect: t("stacPlugin.connect"),
+      connecting: t("stacPlugin.connecting"),
+      connected: t("stacPlugin.connected"),
+      connectFailed: t("stacPlugin.connectFailed"),
+      selectCatalog: t("stacPlugin.selectCatalog"),
+      noMatchingCatalogs: t("stacPlugin.noMatchingCatalogs"),
+      catalogApiSuffix: t("stacPlugin.catalogApiSuffix"),
+      catalogStaticSuffix: t("stacPlugin.catalogStaticSuffix"),
+      kindApi: t("stacPlugin.kindApi"),
+      kindStatic: t("stacPlugin.kindStatic"),
+      collectionsHint: t("stacPlugin.collectionsHint"),
+      limitToExtent: t("stacPlugin.limitToExtent"),
+      bboxLabel: t("stacPlugin.bboxLabel"),
+      bboxPlaceholder: t("stacPlugin.bboxPlaceholder"),
+      bboxInvalid: t("stacPlugin.bboxInvalid"),
+      drawBbox: t("stacPlugin.drawBbox"),
+      cancelDrawing: t("stacPlugin.cancelDrawing"),
+      clearDrawnBbox: t("stacPlugin.clearDrawnBbox"),
+      drawHint: t("stacPlugin.drawHint"),
+      drawnBbox: (bbox) => t("stacPlugin.drawnBbox", { bbox }),
+      drawnBboxCleared: t("stacPlugin.drawnBboxCleared"),
+      mapNotReady: t("stacPlugin.mapNotReady"),
+      startDate: t("stacPlugin.startDate"),
+      endDate: t("stacPlugin.endDate"),
+      additionalParams: t("stacPlugin.additionalParams"),
+      additionalInvalid: t("stacPlugin.additionalInvalid"),
+      searchItems: t("stacPlugin.searchItems"),
+      clearResults: t("stacPlugin.clearResults"),
+      resultsCleared: t("stacPlugin.resultsCleared"),
+      searching: t("stacPlugin.searching"),
+      loadingMore: t("stacPlugin.loadingMore"),
+      noResults: t("stacPlugin.noResults"),
+      searchFailed: t("stacPlugin.searchFailed"),
+      showing: (count) => t("stacPlugin.showing", { count }),
+      showingOfMatched: (count, matched) => t("stacPlugin.showingOfMatched", { count, matched }),
+      loadMore: t("stacPlugin.loadMore"),
+      renderOptions: t("stacPlugin.renderOptions"),
+      bands: t("stacPlugin.bands"),
+      bandsPlaceholder: t("stacPlugin.bandsPlaceholder"),
+      colormap: t("stacPlugin.colormap"),
+      colormapDefault: t("stacPlugin.colormapDefault"),
+      minValue: t("stacPlugin.minValue"),
+      maxValue: t("stacPlugin.maxValue"),
+      nodata: t("stacPlugin.nodata"),
+      nodataPlaceholder: t("stacPlugin.nodataPlaceholder"),
+      renderHint: t("stacPlugin.renderHint"),
+      initialStatus: t("stacPlugin.initialStatus"),
+      catalogInfo: (title, kind) => t("stacPlugin.catalogInfo", { title, kind }),
+      zoom: t("stacPlugin.zoom"),
+      add: t("stacPlugin.add"),
+      download: t("stacPlugin.download"),
+      adding: (asset) => t("stacPlugin.adding", { asset }),
+      added: (asset) => t("stacPlugin.added", { asset }),
+      addUnsupported: t("stacPlugin.addUnsupported"),
+      addFailed: t("stacPlugin.addFailed"),
+      cogUnsupported: t("stacPlugin.cogUnsupported"),
+    });
   }, [t]);
 
   const setProcessingOpen = useAppStore((s) => s.setProcessingOpen);

apps/geolibre-desktop/src/components/panels/LayerPanel.tsx

@@ -602,6 +602,7 @@ export function LayerPanel({
   const [editingName, setEditingName] = useState("");
   const [basemapPickerOpen, setBasemapPickerOpen] = useState(false);
   const [metadataLayer, setMetadataLayer] = useState<GeoLibreLayer | null>(null);
+  const [metadataCopied, setMetadataCopied] = useState(false);
   // GeoTIFF header facts (CRS, pixel size, storage) for the raster whose
   // metadata dialog is open. The store layer does not carry them, so they are
   // read from the file on open (#1420): "loading" while the header is being
@@ -799,6 +800,23 @@ export function LayerPanel({
   // under the new layer's name.
   const metadataRasterInfo =
     rasterInfoState && rasterInfoState.layerId === metadataLayer?.id ? rasterInfoState : null;
+  const metadataJson = metadataLayer
+    ? JSON.stringify(
+        layerMetadataPayload(
+          metadataLayer,
+          metadataRasterInfo?.status === "ready" ? metadataRasterInfo.info : null,
+        ),
+        null,
+        2,
+      )
+    : "";
+  const copyMetadata = useCallback(() => {
+    if (!metadataJson) return;
+    void navigator.clipboard
+      ?.writeText(metadataJson)
+      .then(() => setMetadataCopied(true))
+      .catch(() => setMetadataCopied(false));
+  }, [metadataJson]);
   const refreshSettingsLayer = refreshSettingsLayerId
     ? (layers.find((layer) => layer.id === refreshSettingsLayerId) ?? null)
     : null;
@@ -3555,7 +3573,10 @@ export function LayerPanel({
       <Dialog
         open={!!metadataLayer}
         onOpenChange={(open: boolean) => {
-          if (!open) setMetadataLayer(null);
+          if (!open) {
+            setMetadataLayer(null);
+            setMetadataCopied(false);
+          }
         }}
       >
         <DialogContent
@@ -3603,27 +3624,27 @@ export function LayerPanel({
             </DialogTitle>
             <DialogDescription>{t("layers.metadataDialogDescription")}</DialogDescription>
           </DialogHeader>
+          <div className="flex justify-end">
+            <Button type="button" variant="outline" size="sm" onClick={copyMetadata}>
+              <Copy className="h-4 w-4" />
+              {metadataCopied ? t("attributeStats.copiedToClipboard") : t("attributeStats.copy")}
+            </Button>
+          </div>
           {metadataRasterInfo && metadataRasterInfo.status !== "ready" && (
             <p className="text-xs text-muted-foreground">
               {metadataRasterInfo.status === "loading"
                 ? t("layers.metadataRasterLoading")
                 : t("layers.metadataRasterError")}
             </p>
           )}
-          {/* Capped at a readable height until the user resizes the dialog,
-              after which the payload fills whatever height they chose. */}
-          <ScrollArea className={cn("min-h-0", metadataDialogSize ? "flex-1" : "max-h-80")}>
-            <pre className="whitespace-pre-wrap break-all text-xs">
-              {metadataLayer &&
-                JSON.stringify(
-                  layerMetadataPayload(
-                    metadataLayer,
-                    metadataRasterInfo?.status === "ready" ? metadataRasterInfo.info : null,
-                  ),
-                  null,
-                  2,
-                )}
-            </pre>
+          {/* A definite initial height lets Radix measure overflow on first
+              layout; max-height alone left its viewport unconstrained until
+              the resize handle caused a second measurement. */}
+          <ScrollArea
+            type="auto"
+            className={cn("min-h-0", metadataDialogSize ? "flex-1" : "h-80 shrink-0")}
+          >
+            <pre className="whitespace-pre-wrap break-all text-xs">{metadataJson}</pre>
           </ScrollArea>
         </DialogContent>
       </Dialog>

apps/geolibre-desktop/src/hooks/usePlugins.ts

@@ -4,7 +4,7 @@ import {
   useAppStore,
 } from "@geolibre/core";
 import {
-  addCogRasterLayer,
+  addRasterToMap,
   addZarrRasterLayer,
   buildSelectorTimeBinding,
   registerTemporalLayer,
@@ -35,6 +35,7 @@ import {
   maplibreNasaEarthdataPlugin,
   maplibreNationalMapPlugin,
   maplibreOpenAerialMapPlugin,
+  maplibreStacCatalogsPlugin,
   maplibreSourceCoopPlugin,
   maplibreNaturalEarthPlugin,
   maplibreHuggingFacePlugin,
@@ -168,6 +169,7 @@ manager.registerAll([
   maplibreNationalMapPlugin,
   maplibreEarthdataGisPlugin,
   maplibreOpenAerialMapPlugin,
+  maplibreStacCatalogsPlugin,
   maplibreSourceCoopPlugin,
   maplibreNaturalEarthPlugin,
   maplibreHuggingFacePlugin,
@@ -799,7 +801,7 @@ export function useTimeSliderAutoClose(mapControllerRef: RefObject<MapController
 export function createAppAPI(mapControllerRef?: RefObject<MapController | null>) {
   const store = useAppStore.getState();
   // Captured so methods that delegate to plugin helpers taking the AppAPI
-  // itself (e.g. addCogLayer -> addCogRasterLayer) can pass `api`. Only read
+  // itself (e.g. addCogLayer -> addRasterToMap) can pass `api`. Only read
   // when those methods are called, which is always after assignment.
   const api = {
     setBasemap: (url: string) => store.setBasemapStyleUrl(url),
@@ -884,30 +886,36 @@ export function createAppAPI(mapControllerRef?: RefObject<MapController | null>)
         beforeLayerId ?? null,
       );
     },
-    // Unlike the tile helpers above, a COG is read client-side by the maplibre
-    // raster control (band/rescale/colormap/nodata), so it delegates to the
-    // components plugin's addCogRasterLayer rather than building a store layer
-    // here. It takes the AppAPI itself (to mount the control on demand), so we
-    // hand it the captured `api`.
-    addCogLayer: (name: string, url: string, options?: GeoLibreCogLayerOptions) =>
-      addCogRasterLayer(api, {
-        url,
+    // Unlike the tile helpers above, a COG is read client-side by the shared
+    // raster control. Besides keeping every COG path on one renderer, this is
+    // what mirrors the layer as `maplibre-gl-raster`, making the full Raster
+    // symbology section available in the Style panel.
+    addCogLayer: (name: string, url: string, options?: GeoLibreCogLayerOptions) => {
+      const bands = options?.bands
+        ?.split(",")
+        .map((value) => Number(value.trim()))
+        .filter((value) => Number.isInteger(value) && value > 0);
+      const range =
+        options?.rescaleMin !== undefined && options.rescaleMax !== undefined
+          ? ([options.rescaleMin, options.rescaleMax] as [number, number])
+          : undefined;
+      return addRasterToMap(api, url, {
         name,
-        ...(options?.bands !== undefined ? { bands: options.bands } : {}),
-        // The public option is a loose `string` (so JS plugins need not import
-        // the renderer's colormap union); the renderer validates the name and
-        // falls back to its default for anything it doesn't recognize.
-        ...(options?.colormap !== undefined
-          ? {
-              colormap: options.colormap as Parameters<typeof addCogRasterLayer>[1]["colormap"],
-            }
-          : {}),
-        ...(options?.rescaleMin !== undefined ? { rescaleMin: options.rescaleMin } : {}),
-        ...(options?.rescaleMax !== undefined ? { rescaleMax: options.rescaleMax } : {}),
-        ...(options?.nodata !== undefined ? { nodata: options.nodata } : {}),
-        ...(options?.opacity !== undefined ? { opacity: options.opacity } : {}),
-        beforeLayerId: options?.beforeLayerId ?? null,
-      }),
+        // STAC assets are already COGs with an HTTP(S) range-readable URL.
+        // Render them directly through the GPU COG engine; the WASM tiler is
+        // intended for local files and can leave remote programmatic layers
+        // registered without producing pixels.
+        defaults: { engine: "maplibre-gl-raster" },
+        state: {
+          ...(bands?.length ? { bands, mode: bands.length >= 3 ? "rgb" : "single" } : {}),
+          ...(options?.colormap !== undefined ? { colormap: options.colormap } : {}),
+          ...(range ? { rescale: [range] } : {}),
+          ...(options?.nodata !== undefined ? { nodata: options.nodata } : {}),
+          ...(options?.opacity !== undefined ? { opacity: options.opacity } : {}),
+        },
+        ...(options?.beforeLayerId ? { beforeId: options.beforeLayerId } : {}),
+      });
+    },
     // Zarr goes through the components plugin's shared @carbonplan/zarr-layer
     // control for the same reason as addCogLayer: the host owns the renderer, so
     // a plugin does not bundle (and fail to activate) a second copy.

apps/geolibre-desktop/src/i18n/locales/ar.json

@@ -2569,6 +2569,7 @@
       "geolibre-timelapse": "التسلسل الزمني",
       "maplibre-gl-esri-wayback": "الصور التاريخية",
       "maplibre-gl-openaerialmap": "OpenAerialMap",
+      "geolibre-stac-catalogs": "كتالوجات STAC",
       "maplibre-gl-source-coop": "Source Cooperative",
       "maplibre-gl-natural-earth": "Natural Earth",
       "maplibre-gl-swipe": "مقارنة الطبقات بالسحب",
@@ -4982,5 +4983,71 @@
     "distributionAria": "توزيع {{field}}: {{total}} قيمة من {{min}} إلى {{max}}",
     "noPopulated": "لا توجد قيم مُعبّأة.",
     "moreValues": "+{{total}} قيمة أخرى"
+  },
+  "stacPlugin": {
+    "title": "كتالوجات STAC",
+    "footprintLayerName": "حدود نتائج بحث STAC",
+    "catalogSearch": "البحث عن كتالوج عام في STAC Index",
+    "catalogSearchPlaceholder": "البحث في أسماء الكتالوجات…",
+    "indexLoading": "جارٍ تحميل STAC Index…",
+    "indexUnavailable": "STAC Index غير متاح: أدخل عنوان URL",
+    "indexLoadFailed": "تعذّر تحميل STAC Index",
+    "urlLabel": "عنوان URL لكتالوج أو واجهة STAC",
+    "connect": "اتصال",
+    "connecting": "جارٍ الاتصال بـ STAC…",
+    "connected": "تم الاتصال. اختر عوامل التصفية ثم ابحث.",
+    "connectFailed": "تعذّر الاتصال بـ STAC",
+    "selectCatalog": "اختر كتالوجًا…",
+    "noMatchingCatalogs": "لا توجد كتالوجات مطابقة",
+    "catalogApiSuffix": " (API)",
+    "catalogStaticSuffix": " (ثابت)",
+    "kindApi": "واجهة STAC",
+    "kindStatic": "كتالوج ثابت",
+    "collectionsHint": "اضغط Ctrl/Cmd لتحديد عدة مجموعات؛ اسحب الحافة السفلية لتغيير الحجم",
+    "limitToExtent": "حصر البحث في نطاق الخريطة الحالي",
+    "bboxLabel": "الصندوق المحيط (غرب، جنوب، شرق، شمال)",
+    "bboxPlaceholder": "اختياري؛ يتجاوز نطاق الخريطة",
+    "bboxInvalid": "أدخل صندوقًا محيطًا صالحًا: غرب، جنوب، شرق، شمال.",
+    "drawBbox": "رسم صندوق على الخريطة",
+    "cancelDrawing": "إلغاء الرسم",
+    "clearDrawnBbox": "مسح الصندوق المرسوم",
+    "drawHint": "انقر واسحب على الخريطة لرسم صندوق البحث.",
+    "drawnBbox": "الصندوق المرسوم: {{bbox}}",
+    "drawnBboxCleared": "تم مسح الصندوق المرسوم.",
+    "mapNotReady": "الخريطة غير جاهزة للرسم.",
+    "startDate": "تاريخ البدء",
+    "endDate": "تاريخ الانتهاء",
+    "additionalParams": "معايير بحث إضافية (JSON، لواجهة STAC فقط)",
+    "additionalInvalid": "يجب أن تكون معايير البحث الإضافية كائن JSON.",
+    "searchItems": "البحث عن العناصر",
+    "clearResults": "مسح النتائج",
+    "resultsCleared": "تم مسح نتائج البحث.",
+    "searching": "جارٍ البحث عن عناصر STAC…",
+    "loadingMore": "جارٍ تحميل مزيد من العناصر…",
+    "noResults": "لا توجد عناصر STAC مطابقة لعوامل التصفية هذه.",
+    "searchFailed": "فشل بحث STAC",
+    "showing": "العناصر المعروضة: {{count}}.",
+    "showingOfMatched": "العناصر المعروضة: {{count}} من {{matched}}.",
+    "loadMore": "تحميل المزيد",
+    "renderOptions": "خيارات عرض الراستر",
+    "bands": "النطاقات",
+    "bandsPlaceholder": "مثال: 1 أو 1,2,3 (الافتراضي: تلقائي)",
+    "colormap": "خريطة الألوان (نطاق واحد فقط)",
+    "colormapDefault": "الإعداد الافتراضي للعارض",
+    "minValue": "القيمة الدنيا",
+    "maxValue": "القيمة القصوى",
+    "nodata": "قيمة NoData",
+    "nodataPlaceholder": "يتجاوز وسم NoData في الملف",
+    "renderHint": "اترك الحقل فارغًا ليستنتج العارض القيمة من ملف GeoTIFF. تنطبق الخيارات على الأصول المضافة بعد تغييرها.",
+    "initialStatus": "اختر كتالوجًا من STAC Index أو أدخل عنوان URL.",
+    "catalogInfo": "{{title}} · {{kind}}",
+    "zoom": "تكبير",
+    "add": "إضافة",
+    "download": "تنزيل",
+    "adding": "جارٍ إضافة {{asset}}…",
+    "added": "تمت إضافة {{asset}} إلى الخريطة.",
+    "addUnsupported": "يمكن إضافة أصول GeoTIFF/COG وGeoJSON فقط إلى الخريطة",
+    "addFailed": "تعذّرت إضافة الأصل",
+    "cogUnsupported": "لا يستطيع مضيف GeoLibre هذا عرض أصول GeoTIFF البعيدة"
   }
 }