Support controlled tabs for embedded map details

lib/components/navigation/tabs.jsx

@@ -1,9 +1,18 @@
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import gwMerge from "../../gw-merge";
 
-function Tabs({ tabs, fill = false, defaultIndex = 0 }) {
+function Tabs({
+  tabs,
+  fill = false,
+  defaultIndex = 0,
+  selectedIndex,
+  onChange,
+}) {
+  const controlledProps =
+    selectedIndex === undefined ? {} : { selectedIndex, onChange };
+
   return (
-    <TabGroup defaultIndex={defaultIndex}>
+    <TabGroup defaultIndex={defaultIndex} {...controlledProps}>
       <TabList className="gw-flex gw-flex-wrap gw-gap-x-1 gw-text-gray-500 gw-font-semibold gw-border-b-2 gw-border-gray-300">
         {tabs.map((tab, idx) => (
           <Tab

package.json

@@ -67,6 +67,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@babel/parser": "^7.29.7",
     "@lhci/cli": "^0.15.1",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",

src/app-bundles/routes-bundle.js

@@ -49,6 +49,7 @@ import PackageMaintenance from "../app-pages/documentation/getting-started/packa
 import Mapping from "../app-pages/documentation/mapping";
 import MapDocs from "../app-pages/documentation/mapping/map";
 import LayerDocs from "../app-pages/documentation/mapping/layer";
+import StatusMarkerLayerDocs from "../app-pages/documentation/mapping/status-marker-layer";
 import GeoJSONLayerDocs from "../app-pages/documentation/mapping/geojson-layer";
 import MapServerDocs from "../app-pages/documentation/mapping/map-server";
 import FeatureServerDocs from "../app-pages/documentation/mapping/feature-server";
@@ -118,6 +119,7 @@ export default createRouteBundle(
     "/docs/mapping/map-layout": MapLayoutDocs,
     "/docs/mapping/map": MapDocs,
     "/docs/mapping/layer": LayerDocs,
+    "/docs/mapping/status-marker-layer": StatusMarkerLayerDocs,
     "/docs/mapping/geojson-layer": GeoJSONLayerDocs,
     "/docs/mapping/map-server": MapServerDocs,
     "/docs/mapping/feature-server": FeatureServerDocs,

src/app-pages/documentation/mapping/status-marker-layer.jsx

@@ -0,0 +1,132 @@
+import { UsaceBox, Code, Text } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: `${BASE_URL}#/docs`,
+  },
+  {
+    text: "Mapping",
+    href: `${BASE_URL}#/docs/mapping`,
+  },
+  {
+    text: "Status Marker Layer",
+    href: `${BASE_URL}#/docs/mapping/status-marker-layer`,
+  },
+];
+
+const componentProps = [
+  {
+    name: "source",
+    type: "array or GeoJSON FeatureCollection",
+    default: "[]",
+    desc: "Point records to render. GeoJSON coordinates must be longitude, latitude.",
+  },
+  {
+    name: "statusAccessor",
+    type: "function",
+    default: "threshold status from statusValue or value",
+    desc: "Returns the status bucket used to choose the marker color. Use a numeric bucket, missing, or transparent.",
+  },
+  {
+    name: "shapeAccessor",
+    type: "function",
+    default: "reservoir/project triangle, lock square, other diamond",
+    desc: "Returns circle, triangle, square, or diamond for each marker.",
+  },
+  {
+    name: "labelAccessor",
+    type: "function",
+    default: "mapLabel, publicName, name, or id",
+    desc: "Returns the text label drawn above the marker.",
+  },
+  {
+    name: "fit",
+    type: "boolean",
+    default: "false",
+    desc: "Fits the map view to the marker extent after the layer is added.",
+  },
+  {
+    name: "onClick",
+    type: "function",
+    default: "undefined",
+    desc: "Receives the clicked OpenLayers feature and map coordinate.",
+  },
+];
+
+function StatusMarkerLayerDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Status Marker Layer">
+        <Text className="gw-pb-6">
+          StatusMarkerLayer renders point datasets with configurable status
+          colors, marker shapes, labels, and click handling. It is intended for
+          office-neutral status maps where the application owns the data query
+          and domain-specific grouping.
+        </Text>
+        <CodeExample
+          code={`import {
+  getThresholdStatus,
+  Map,
+  MapLayout,
+  StatusLegend,
+  StatusMarkerLayer
+} from "@usace/groundwork-geo";
+
+const locations = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [-95.8, 35.3] },
+      properties: {
+        name: "Example.Project",
+        publicName: "Example Project",
+        locationType: "reservoir",
+        statusValue: 62
+      }
+    }
+  ]
+};
+
+const layers = [
+  new StatusMarkerLayer({
+    id: "project-status",
+    name: "Project Status",
+    source: locations,
+    fit: true,
+    statusAccessor: (location) =>
+      location.statusValue == null
+        ? "missing"
+        : getThresholdStatus(location.statusValue),
+    onClick: (feature) => console.log(feature.getProperties())
+  })
+];
+
+function Component() {
+  return (
+    <div>
+      <MapLayout>
+        <Map mapId="status-map" layers={layers} />
+      </MapLayout>
+      <StatusLegend title="Percent Full/Flow" />
+    </div>
+  );
+}`}
+        />
+        <div className="gw-font-bold gw-text-lg gw-pt-6">
+          Class API - <Code className="gw-p-2">{`StatusMarkerLayer`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default StatusMarkerLayerDocs;
+export { StatusMarkerLayerDocs };

src/nav-links.js

@@ -277,6 +277,11 @@ export default [
         text: "Layer",
         href: `${BASE_URL}#/docs/mapping/layer`,
       },
+      {
+        id: "status-marker-layer",
+        text: "Status Marker Layer",
+        href: `${BASE_URL}#/docs/mapping/status-marker-layer`,
+      },
       {
         id: "geojson-layer",
         text: "GeoJSON Layer",