@teamimpact/veda-ui-blocks 0.1.0-beta.7 → 0.1.0-beta.8

package/dist/index.js

@@ -19,9 +19,13 @@ var isNull = (x) => x === null;
 var isUndefined = (x) => x === void 0;
 var isNil = (x) => isNull(x) || isUndefined(x);
 var isDefined = (x) => !isNil(x);
+var isNumber = (x) => typeof x === "number";
 var isObject = (x) => !isNil(x) && typeof x === "object" && x instanceof Object;
+var isEmptyObject = (x) => isObject(x) && isEmptyArray(Object.keys(x));
 var isArray = (as) => Array.isArray(as);
+var isEmptyArray = (as) => isArray(as) && as.length === 0;
 var isNonEmptyArray = (as) => isArray(as) && as.length > 0;
+var getTypedValues = Object.values;
 
 // src/utils/component-utils.tsx
 var get_external_anchor_props = (isExternal) => isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
@@ -228,31 +232,32 @@ function CardDetailed({
   title,
   description,
   tags = [],
-  contentTypeTag,
+  callToAction,
+  callToActionSecondary,
+  tagPrimary,
   image,
-  action,
   imagePosition = "top",
-  borderAccent = false,
-  titleAs = "h2",
   className = ""
 }) {
-  const TitleTag = titleAs;
-  const cardClassName = make_class_name("blocks-card-detailed", [
+  const rootClassName = make_class_name("blocks-card-detailed", [
     imagePosition !== "top" ? `blocks-card-detailed--image-${imagePosition}` : "",
     className
   ]);
-  return /* @__PURE__ */ jsxs4("div", { className: cardClassName, children: [
-    borderAccent && /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", className: "blocks-card-detailed__accent-bar" }),
-    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__content", children: [
-      intro && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__intro", children: intro }),
-      /* @__PURE__ */ jsx5(TitleTag, { className: "blocks-card-detailed__title", children: title }),
-      description && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__description", children: description }),
-      isNonEmptyArray(tags) && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tags", children: tags }),
-      action && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__action", children: action })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__image-wrapper", children: [
+  const hasContent = intro || title || description || tags.length || callToAction || callToActionSecondary;
+  return /* @__PURE__ */ jsxs4("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__media", children: [
       image,
-      contentTypeTag && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__content-type-tag", children: contentTypeTag })
+      tagPrimary && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tag-primary", children: tagPrimary })
+    ] }),
+    hasContent && /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__content-container", children: [
+      intro && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__intro", title: intro, children: intro }),
+      title && (typeof title === "string" ? /* @__PURE__ */ jsx5("h2", { className: "blocks-card-detailed__title", title, children: title }) : title),
+      isNonEmptyArray(tags) && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tags", children: tags }),
+      description && /* @__PURE__ */ jsx5("p", { className: "blocks-card-detailed__description", children: description }),
+      (callToAction || callToActionSecondary) && /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__actions", children: [
+        callToAction && /* @__PURE__ */ jsx5("a", { href: callToAction.href, className: "usa-button", children: callToAction.label }),
+        callToActionSecondary && /* @__PURE__ */ jsx5("a", { href: callToActionSecondary.href, className: "usa-button usa-button--outline", children: callToActionSecondary.label })
+      ] })
     ] })
   ] });
 }
@@ -282,21 +287,19 @@ function CardSimple({
   image,
   url,
   tag,
-  showOverlay = false,
   size = "default",
   titleAs = "h2",
   className
 }) {
   const TitleTag = titleAs;
   const rootClassName = make_class_name("blocks-card-simple", [
-    showOverlay ? "blocks-card-simple--with-overlay" : void 0,
     size === "compact" ? "blocks-card-simple--compact" : void 0,
     className
   ]);
   return /* @__PURE__ */ jsxs6("a", { href: url, className: rootClassName, children: [
     /* @__PURE__ */ jsxs6("div", { className: "blocks-card-simple__media", children: [
       image,
-      showOverlay && /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "blocks-card-simple__body", children: [
       tag && /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__tag", children: tag }),
@@ -321,24 +324,24 @@ function Footer({
     {
       className: footerClassName,
       size: "slim",
-      primary: /* @__PURE__ */ jsxs7(GridContainer, { children: [
-        portalDetails.logo ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__primary-section-upper", children: portalDetails.logo }) : null,
-        /* @__PURE__ */ jsxs7("section", { className: "blocks-footer__primary-section-lower", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "blocks-footer__title", children: [
+      primary: /* @__PURE__ */ jsx8(GridContainer, { children: /* @__PURE__ */ jsxs7("section", { className: "blocks-footer__primary-section", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "blocks-footer__title", children: [
+          portalDetails.logo ? /* @__PURE__ */ jsx8("div", { className: "blocks-footer__logo", children: portalDetails.logo }) : null,
+          /* @__PURE__ */ jsxs7("div", { className: "blocks-footer__title-text", children: [
             /* @__PURE__ */ jsx8("span", { children: portalDetails.title }),
             portalDetails.tagline ? /* @__PURE__ */ jsx8("p", { children: portalDetails.tagline }) : null
-          ] }),
-          primaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__primary-nav", "aria-label": "Footer primary navigation", children: /* @__PURE__ */ jsx8("ul", { children: primaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx8("li", { className: "usa-footer__primary-content", children: /* @__PURE__ */ jsx8(
-            Link,
-            {
-              className: "usa-footer__primary-link",
-              href,
-              ...get_external_anchor_props(isExternal),
-              children: label
-            }
-          ) }, href)) }) }) : null
-        ] })
-      ] }),
+          ] })
+        ] }),
+        primaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__primary-nav", "aria-label": "Footer primary navigation", children: /* @__PURE__ */ jsx8("ul", { children: primaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx8("li", { className: "usa-footer__primary-content", children: /* @__PURE__ */ jsx8(
+          Link,
+          {
+            className: "usa-footer__primary-link",
+            href,
+            ...get_external_anchor_props(isExternal),
+            children: label
+          }
+        ) }, href)) }) }) : null
+      ] }) }),
       secondary: /* @__PURE__ */ jsxs7(Fragment, { children: [
         secondaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__secondary-section-upper", children: /* @__PURE__ */ jsx8(
           "nav",
@@ -351,6 +354,7 @@ function Footer({
         utilityNavItems?.length || portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs7("section", { className: "blocks-footer__secondary-section-lower", children: [
           utilityNavItems?.length ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__utility-nav", "aria-label": "Site utilities", children: /* @__PURE__ */ jsx8("ul", { children: utilityNavItems.length ? utilityNavItems.map(({ text, label, href, isExternal }) => /* @__PURE__ */ jsxs7("li", { children: [
             text,
+            " ",
             /* @__PURE__ */ jsx8(Link, { href, ...get_external_anchor_props(isExternal), children: label })
           ] }, href)) : null }) }) : null,
           portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs7("div", { className: "blocks-footer__secondary-meta", children: [
@@ -622,8 +626,185 @@ function Tag({
   ] });
 }
 
-// src/geo/SingleLayerMap/SingleLayerMap.tsx
-import { Map as MapLibreMap } from "react-map-gl/maplibre";
+// src/geo/Legend/Legend.tsx
+import { Icon as Icon3 } from "@trussworks/react-uswds";
+import { useState as useState3 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function Legend({ initialExpanded = false, ...props }) {
+  const { title, description, unit, min, max, colorStops, provider, spatialExtent, timeDensity } = props;
+  const [isExpanded, setIsExpanded] = useState3(initialExpanded);
+  const subtitle = [provider, spatialExtent, timeDensity].some(isDefined) ? [provider, spatialExtent, timeDensity].filter(isDefined).join(" \xB7 ") : void 0;
+  return /* @__PURE__ */ jsxs11("div", { className: "blocks-legend", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__header", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__header-text", children: [
+        title && /* @__PURE__ */ jsx12("h3", { className: "blocks-legend__title", title, children: title }),
+        subtitle && /* @__PURE__ */ jsx12("p", { className: "blocks-legend__subtitle", title: subtitle, children: subtitle })
+      ] }),
+      description && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "blocks-legend__info-toggle",
+          "aria-expanded": isExpanded,
+          "aria-label": "Toggle layer description",
+          onClick: () => setIsExpanded((v) => !v),
+          children: /* @__PURE__ */ jsx12(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: "blocks-legend__gradient",
+        style: {
+          background: `linear-gradient(to right, ${colorStops.join(", ")})`
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__labels", children: [
+      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__min", children: min }),
+      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__unit", children: unit }),
+      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__max", children: max })
+    ] }),
+    isExpanded && description && /* @__PURE__ */ jsx12("div", { className: "blocks-legend__description", children: /* @__PURE__ */ jsx12("div", { className: "blocks-legend__description-inner", children: description }) })
+  ] });
+}
+
+// src/geo/StacCompareMap/StacCompareMap.tsx
+import { useEffect as useEffect3, useId, useRef as useRef3, useState as useState4 } from "react";
+import {
+  Layer,
+  Map as MapLibreMap,
+  NavigationControl,
+  Source
+} from "react-map-gl/maplibre";
+
+// src/geo/AttributionMapControl.tsx
+import maplibregl from "maplibre-gl";
+import { useControl } from "react-map-gl/maplibre";
+function AttributionMapControl({ position = "top-right" }) {
+  useControl(() => new maplibregl.AttributionControl(), { position });
+  return null;
+}
+
+// src/geo/utils/formatDateRange.ts
+function formatDateRange(dateRange) {
+  const from = /* @__PURE__ */ new Date(`${dateRange.from}T00:00:00Z`);
+  const to = /* @__PURE__ */ new Date(`${dateRange.to}T00:00:00Z`);
+  if (from.getUTCFullYear() === to.getUTCFullYear() && from.getUTCMonth() === to.getUTCMonth()) {
+    return from.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric",
+      timeZone: "UTC"
+    });
+  }
+  const fromStr = from.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+  const toStr = to.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+  return `${fromStr} \u2013 ${toStr}`;
+}
+
+// src/geo/DateChip/DateChip.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function DateChip({ left, right }) {
+  const label = right === void 0 || left.from === right.from && left.to === right.to ? formatDateRange(left) : `${formatDateRange(left)} vs ${formatDateRange(right)}`;
+  return /* @__PURE__ */ jsx13("div", { className: "blocks-date-chip", children: label });
+}
+
+// src/geo/hooks/useStacRasterLayer.ts
+import { useCollection } from "@developmentseed/stac-react";
+
+// src/geo/hooks/useMosaicTiles.ts
+import { useQuery } from "@tanstack/react-query";
+
+// src/geo/api/titiler/fetchTilejson.ts
+async function fetchTilejson(tilejsonUrl, queryString) {
+  const response = await fetch(`${tilejsonUrl}?${queryString}`);
+  if (!response.ok) {
+    const error = { detail: `Failed to fetch tilejson: ${response.statusText}` };
+    throw error;
+  }
+  const tilejson = await response.json();
+  if (!tilejson.tiles?.[0]) {
+    const error = { detail: "No tile URL found in response" };
+    throw error;
+  }
+  return tilejson.tiles[0];
+}
+
+// src/geo/api/titiler/mosaicLinks.ts
+function findTileLink(links) {
+  return links.find((link) => link.rel === "tiles") ?? links.at(1) ?? links.at(0) ?? null;
+}
+function buildTilejsonUrl(tileLinkHref, tileMatrixSet) {
+  return tileLinkHref.replace("/{tileMatrixSetId}", `/${tileMatrixSet}`);
+}
+function extractTileUrl(registrationResponse, tileMatrixSet) {
+  const tileLink = findTileLink(registrationResponse.links);
+  if (!tileLink?.href) {
+    const error = { detail: "No tile URL found in registration response" };
+    throw error;
+  }
+  const tilejsonUrl = buildTilejsonUrl(tileLink.href, tileMatrixSet);
+  return tilejsonUrl;
+}
+
+// src/geo/api/titiler/registerMosaic.ts
+async function registerMosaic(request) {
+  const { rasterApiUrl, collectionId, datetime } = request;
+  const response = await fetch(`${rasterApiUrl}/searches/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      collections: [collectionId],
+      datetime
+    })
+  });
+  if (!response.ok) {
+    const error = {
+      detail: `Failed to register mosaic: ${response.statusText}`,
+      status: response.status
+    };
+    throw error;
+  }
+  return response.json();
+}
+
+// src/geo/api/titiler/fetchMosaicTileUrl.ts
+var TILE_PARAMS = {
+  ASSETS: "assets",
+  RESCALE: "rescale",
+  RESAMPLING: "resampling",
+  COLORMAP_NAME: "colormap_name",
+  BIDX: "bidx"
+};
+function buildQueryParams(sourceParams) {
+  const params = new URLSearchParams();
+  if (sourceParams.assets) params.append(TILE_PARAMS.ASSETS, sourceParams.assets.join(","));
+  if (sourceParams.rescale) params.append(TILE_PARAMS.RESCALE, sourceParams.rescale);
+  if (sourceParams.resampling) params.append(TILE_PARAMS.RESAMPLING, sourceParams.resampling);
+  if (sourceParams.colormap_name)
+    params.append(TILE_PARAMS.COLORMAP_NAME, sourceParams.colormap_name);
+  if (sourceParams.bidx) params.append(TILE_PARAMS.BIDX, sourceParams.bidx.join(","));
+  return params;
+}
+async function fetchMosaicTileUrl(request) {
+  const { sourceParams, tileMatrixSet } = request;
+  const queryParams = buildQueryParams(sourceParams);
+  const queryString = queryParams.toString();
+  const registrationResponse = await registerMosaic(request);
+  const tilejsonUrl = extractTileUrl(registrationResponse, tileMatrixSet);
+  return fetchTilejson(tilejsonUrl, queryString);
+}
 
 // src/geo/constants.ts
 var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
@@ -647,25 +828,272 @@ var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
     }
   ]
 };
+var TITILER_BASE_URL = "https://openveda.cloud/api/raster";
+var DEFAULT_RENDER_PARAMS = {
+  assets: ["cog_default"],
+  rescale: "0,0.0001",
+  resampling: "bilinear",
+  colormap_name: "viridis",
+  bidx: [1]
+};
+var DEFAULT_TILE_MATRIX_SET = "WebMercatorQuad";
+var STAC_COLORSTOP_RGBA_ARG_COUNT = 4;
 
-// src/geo/SingleLayerMap/SingleLayerMap.tsx
-import "maplibre-gl/dist/maplibre-gl.css";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var SingleLayerMap = function SingleLayerMap2({
+// src/geo/hooks/useMosaicTiles.ts
+function useMosaicTiles(rasterLayerConfig) {
+  const { collectionId, dateRange, tileMatrixSet = DEFAULT_TILE_MATRIX_SET } = rasterLayerConfig;
+  const datetime = dateRange.from === dateRange.to ? dateRange.from : `${dateRange.from}/${dateRange.to}`;
+  const request = {
+    rasterApiUrl: TITILER_BASE_URL,
+    collectionId,
+    datetime,
+    sourceParams: {
+      ...DEFAULT_RENDER_PARAMS,
+      assets: [...DEFAULT_RENDER_PARAMS.assets],
+      bidx: [...DEFAULT_RENDER_PARAMS.bidx]
+    },
+    tileMatrixSet
+  };
+  return useQuery({
+    queryKey: [collectionId, dateRange],
+    queryFn: () => fetchMosaicTileUrl(request),
+    staleTime: 30 * 60 * 1e3,
+    gcTime: 60 * 60 * 1e3,
+    enabled: !!collectionId && !!dateRange?.from && !!dateRange?.to
+  });
+}
+
+// src/geo/hooks/useStacRasterLegend.ts
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+
+// src/geo/utils/stac.formatters.ts
+var formatSpatialExtent = (spatialExtent) => {
+  const [minX, minY, maxX, maxY] = spatialExtent?.bbox?.[0] ?? [];
+  if (minX === void 0 || minY === void 0 || maxX === void 0 || maxY === void 0)
+    return void 0;
+  return maxX - minX >= 359 && maxY - minY >= 179 ? "global" : "regional";
+};
+
+// src/geo/utils/stac.typeguards.ts
+var isRgbaColorStopMap = (value) => {
+  return !isNil(value) && isObject(value) && !isEmptyObject(value) && getTypedValues(value).every(
+    (rgba) => isArray(rgba) && rgba.length === STAC_COLORSTOP_RGBA_ARG_COUNT && rgba.every(isNumber)
+  );
+};
+
+// src/geo/utils/extractLegendProps.ts
+function extractLegendProps(collection, colorStopMap) {
+  const rescale = collection.renders?.dashboard?.rescale?.[0];
+  if (!rescale) return null;
+  if (!isRgbaColorStopMap(colorStopMap)) return null;
+  const colorStops = getTypedValues(colorStopMap).map((rgba) => `rgba(${rgba.join(",")})`);
+  const title = collection.title;
+  const description = collection.description;
+  const provider = collection.providers?.[0]?.name;
+  const timeDensity = collection.properties?.["dashboard:time_density"];
+  const spatialExtent = formatSpatialExtent(collection.extent?.spatial);
+  const unit = collection.item_assets?.cog_default?.["raster:bands"]?.[0]?.unit;
+  return {
+    type: "gradient",
+    ...title && { title },
+    ...description && { description },
+    min: rescale[0],
+    max: rescale[1],
+    colorStops,
+    ...provider && { provider },
+    ...timeDensity && { timeDensity },
+    ...spatialExtent && { spatialExtent },
+    ...unit && { unit }
+  };
+}
+
+// src/geo/hooks/useStacRasterLegend.ts
+function useStacRasterLegend(collection) {
+  const query = useQuery2({
+    queryKey: ["legend", collection],
+    queryFn: async () => {
+      if (!collection) return null;
+      const colormapName = collection?.renders?.dashboard?.colormap_name;
+      if (!colormapName) return null;
+      const response = await fetch(`${TITILER_BASE_URL}/colorMaps/${colormapName}`);
+      if (!response.ok) {
+        const error = {
+          detail: `Colormap "${colormapName}" not found (HTTP ${response.status})`,
+          status: response.status
+        };
+        throw error;
+      }
+      const colorMap = await response.json();
+      return extractLegendProps(collection, colorMap);
+    },
+    enabled: !!collection
+  });
+  return {
+    legend: query.data ?? null,
+    isLoading: query.isLoading,
+    error: query.error || null
+  };
+}
+
+// src/geo/hooks/useStacRasterLayer.ts
+function useStacRasterLayer(rasterLayerConfig) {
+  const { collectionId } = rasterLayerConfig;
+  const {
+    collection,
+    isLoading: isLoadingCollection,
+    error: collectionError
+  } = useCollection(collectionId);
+  const {
+    data: tiles,
+    isLoading: tilesetLoading,
+    error: tilesetError
+  } = useMosaicTiles(rasterLayerConfig);
+  const {
+    legend,
+    isLoading: isLoadingLegend,
+    error: legendError
+  } = useStacRasterLegend(collection);
+  return {
+    mapSource: {
+      tiles: tiles ?? null
+    },
+    legend,
+    isLoading: isLoadingCollection || tilesetLoading || isLoadingLegend,
+    error: collectionError || tilesetError || legendError || null
+  };
+}
+
+// src/geo/StacCompareMap/StacCompareMap.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var MAP_PANEL_STYLE = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: "100%"
+};
+function StacCompareMap({
+  baseMapStyle,
+  initialViewState,
+  leftLayerConfig,
+  rightLayerConfig,
+  className
+}) {
+  const instanceId = useId();
+  const leftMapRef = useRef3(null);
+  const rightMapRef = useRef3(null);
+  const compareRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const [leftMapLoaded, setLeftMapLoaded] = useState4(false);
+  const [rightMapLoaded, setRightMapLoaded] = useState4(false);
+  const containerClassName = make_class_name("blocks-stacmap-compare", [className]);
+  const left = useStacRasterLayer(leftLayerConfig);
+  const right = useStacRasterLayer(rightLayerConfig);
+  const isSameCollection = leftLayerConfig.collectionId === rightLayerConfig.collectionId;
+  const leftSourceId = `${leftLayerConfig.collectionId}-raster-source-left-${instanceId}`;
+  const leftLayerId = `${leftLayerConfig.collectionId}-raster-layer-left-${instanceId}`;
+  const rightSourceId = `${rightLayerConfig.collectionId}-raster-source-right-${instanceId}`;
+  const rightLayerId = `${rightLayerConfig.collectionId}-raster-layer-right-${instanceId}`;
+  useEffect3(() => {
+    if (!leftMapLoaded || !rightMapLoaded) return;
+    if (compareRef.current) return;
+    const leftMap = leftMapRef.current?.getMap();
+    const rightMap = rightMapRef.current?.getMap();
+    const container = containerRef.current;
+    if (!leftMap || !rightMap || !container) return;
+    import("mapbox-gl-compare").then(({ default: MapboxCompare }) => {
+      if (compareRef.current) return;
+      try {
+        compareRef.current = new MapboxCompare(leftMap, rightMap, container, {
+          mousemove: false,
+          orientation: "vertical"
+        });
+      } catch (error) {
+        console.error("Failed to initialize mapbox-gl-compare:", error);
+      }
+    });
+  }, [leftMapLoaded, rightMapLoaded]);
+  useEffect3(() => {
+    return () => {
+      compareRef.current?.remove();
+      compareRef.current = null;
+    };
+  }, []);
+  const mapProps = {
+    ...baseMapStyle && { mapStyle: baseMapStyle },
+    ...initialViewState && { initialViewState },
+    style: MAP_PANEL_STYLE
+  };
+  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: containerClassName, children: [
+    /* @__PURE__ */ jsxs12(
+      MapLibreMap,
+      {
+        ref: leftMapRef,
+        ...mapProps,
+        attributionControl: false,
+        onLoad: () => setLeftMapLoaded(true),
+        children: [
+          /* @__PURE__ */ jsx14(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx14(NavigationControl, { position: "top-left", showCompass: false }),
+          left.mapSource.tiles && /* @__PURE__ */ jsx14(Source, { id: leftSourceId, type: "raster", tiles: [left.mapSource.tiles], children: /* @__PURE__ */ jsx14(Layer, { id: leftLayerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs12(
+      MapLibreMap,
+      {
+        ref: rightMapRef,
+        ...mapProps,
+        attributionControl: false,
+        onLoad: () => setRightMapLoaded(true),
+        children: [
+          /* @__PURE__ */ jsx14(AttributionMapControl, {}),
+          right.mapSource.tiles && /* @__PURE__ */ jsx14(Source, { id: rightSourceId, type: "raster", tiles: [right.mapSource.tiles], children: /* @__PURE__ */ jsx14(Layer, { id: rightLayerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx14("div", { className: "blocks-stacmap-compare__date-chip", children: /* @__PURE__ */ jsx14(DateChip, { left: leftLayerConfig.dateRange, right: rightLayerConfig.dateRange }) }),
+    !isSameCollection && left.legend && /* @__PURE__ */ jsx14("div", { className: "blocks-stacmap-compare__legend-left", children: /* @__PURE__ */ jsx14(Legend, { ...left.legend }) }),
+    right.legend && /* @__PURE__ */ jsx14("div", { className: "blocks-stacmap-compare__legend-right", children: /* @__PURE__ */ jsx14(Legend, { ...right.legend }) })
+  ] });
+}
+
+// src/geo/StacSingleLayerMap/StacSingleLayerMap.tsx
+import { useId as useId2 } from "react";
+import {
+  Layer as Layer2,
+  Map as MapLibreMap2,
+  NavigationControl as NavigationControl2,
+  Source as Source2
+} from "react-map-gl/maplibre";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function StacSingleLayerMap({
   baseMapStyle = NASA_BLUE_MARBLE_BASEMAP_STYLE,
   initialViewState,
-  children
+  layerConfig
 }) {
-  return /* @__PURE__ */ jsx12(
-    MapLibreMap,
-    {
-      mapStyle: baseMapStyle,
-      ...initialViewState && { initialViewState },
-      style: { width: "100%", flex: 1, minHeight: 0 },
-      children
-    }
-  );
-};
+  const instanceId = useId2();
+  const sourceId = `${layerConfig.collectionId}-raster-source-${instanceId}`;
+  const layerId = `${layerConfig.collectionId}-raster-layer-${instanceId}`;
+  const { mapSource, legend } = useStacRasterLayer(layerConfig);
+  return /* @__PURE__ */ jsxs13("div", { className: "blocks-stacmap-singlelayer", children: [
+    /* @__PURE__ */ jsxs13(
+      MapLibreMap2,
+      {
+        mapStyle: baseMapStyle,
+        ...initialViewState && { initialViewState },
+        style: { position: "absolute", inset: 0 },
+        attributionControl: false,
+        children: [
+          /* @__PURE__ */ jsx15(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx15(NavigationControl2, { position: "top-left", showCompass: false }),
+          mapSource.tiles && /* @__PURE__ */ jsx15(Source2, { id: sourceId, type: "raster", tiles: [mapSource.tiles], children: /* @__PURE__ */ jsx15(Layer2, { id: layerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx15("div", { className: "blocks-stacmap-singlelayer__legend", children: legend && /* @__PURE__ */ jsx15(Legend, { ...legend }) }),
+    /* @__PURE__ */ jsx15("div", { className: "blocks-stacmap-singlelayer__date-chip", children: /* @__PURE__ */ jsx15(DateChip, { left: layerConfig.dateRange }) })
+  ] });
+}
 export {
   Banner,
   Button,
@@ -676,6 +1104,8 @@ export {
   CardSimple,
   Footer,
   Header,
-  SingleLayerMap,
+  Legend,
+  StacCompareMap,
+  StacSingleLayerMap,
   Tag
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamimpact/veda-ui-blocks",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "description": "UI component library for VEDA-based portals, built on USWDS and React",
   "license": "MIT",
   "repository": {
@@ -24,12 +24,10 @@
       "types": "./dist/index.d.ts"
     },
     "./default.css": "./dist/default.css",
-    "./disasters.css": "./dist/disasters.css",
-    "./earthgov.css": "./dist/earthgov.css"
+    "./disasters.css": "./dist/disasters.css"
   },
   "files": [
-    "dist",
-    "src/styles"
+    "dist"
   ],
   "peerDependencies": {
     "@developmentseed/stac-react": "^1.0.0-alpha.2",
@@ -72,7 +70,7 @@
     "vitest": "^4.0.18"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts && pnpm run build:assets && pnpm run build:css",
+    "build": "tsup src/index.ts --format esm --dts && pnpm run build:css",
     "build:assets": "./scripts/build-assets.sh",
     "build:css": "./scripts/build-css.sh --quiet",
     "build:css:watch": "./scripts/build-css.sh --quiet --watch --load-path=src/styles",

package/src/styles/components/banner.scss

@@ -1,18 +0,0 @@
-@use "uswds-core" as *;
-
-.blocks-banner {
-  &__row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(4);
-  }
-
-  &__guidance {
-    flex: 1 1 100%;
-    min-width: 0;
-    @include at-media("tablet") {
-      flex: 1 1 0;
-      max-width: 50%;
-    }
-  }
-}