@macrostrat/map-interface 1.1.0 → 1.2.1

package/dist/cjs/vector-tile-features.456f887b.js

@@ -0,0 +1,268 @@
+var $33088e8384af337c$exports = require("./main.module.ccec47df.js");
+require("./main.module.becc2fe7.css");
+var $750d69d73bfbdc9a$exports = require("./expansion-panel.08532cee.js");
+var $dHcMG$blueprintjscore = require("@blueprintjs/core");
+var $dHcMG$macrostratmapboxreact = require("@macrostrat/mapbox-react");
+var $dHcMG$macrostrathyper = require("@macrostrat/hyper");
+var $dHcMG$react = require("react");
+var $dHcMG$macrostratuicomponents = require("@macrostrat/ui-components");
+var $dHcMG$d3array = require("d3-array");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "FeatureProperties", () => $db14eb7a5c07abdb$export$2906e7f4b228efe9);
+$parcel$export(module.exports, "FeatureRecord", () => $db14eb7a5c07abdb$export$dc87b4d46cea200d);
+$parcel$export(module.exports, "FeatureSelectionHandler", () => $db14eb7a5c07abdb$export$214daccdda0f4ac6);
+$parcel$export(module.exports, "Features", () => $db14eb7a5c07abdb$export$617d79dae526d2cf);
+$parcel$export(module.exports, "TileInfo", () => $db14eb7a5c07abdb$export$43c75dec9d0b96c);
+$parcel$export(module.exports, "FeaturePanel", () => $db14eb7a5c07abdb$export$43277c51a01761c1);
+
+
+
+
+
+
+
+
+const $db14eb7a5c07abdb$var$h = (0, ($parcel$interopDefault($dHcMG$macrostrathyper))).styled((0, ($parcel$interopDefault($33088e8384af337c$exports))));
+function $db14eb7a5c07abdb$export$2906e7f4b228efe9({ data: data, ...rest }) {
+    // Instead of managing hover state with CSS, we use a state variable,
+    // so that the button re-renders when the state changes
+    const [showControls, setShowControls] = (0, $dHcMG$react.useState)(false);
+    const onMouseEnter = (0, $dHcMG$react.useCallback)(()=>setShowControls(true), []);
+    const onMouseLeave = (0, $dHcMG$react.useCallback)(()=>setShowControls(false), []);
+    return $db14eb7a5c07abdb$var$h("div.feature-properties", {
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, [
+        $db14eb7a5c07abdb$var$h.if(showControls)("div.controls", $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$CopyJSONButton, {
+            data: data
+        })),
+        $db14eb7a5c07abdb$var$h((0, $dHcMG$macrostratuicomponents.JSONView), {
+            data: data,
+            hideRoot: true,
+            ...rest
+        })
+    ]);
+}
+function $db14eb7a5c07abdb$export$dc87b4d46cea200d({ feature: feature }) {
+    const props = feature.properties;
+    return $db14eb7a5c07abdb$var$h("div.feature-record", [
+        $db14eb7a5c07abdb$var$h.if(Object.keys(props).length > 0)($db14eb7a5c07abdb$export$2906e7f4b228efe9, {
+            data: props
+        })
+    ]);
+}
+function $db14eb7a5c07abdb$var$CopyJSONButton({ data: data }) {
+    const [copied, setCopied] = (0, $dHcMG$react.useState)(false);
+    return $db14eb7a5c07abdb$var$h((0, $dHcMG$blueprintjscore.Button), {
+        icon: copied ? "tick" : "clipboard",
+        intent: copied ? (0, $dHcMG$blueprintjscore.Intent).SUCCESS : (0, $dHcMG$blueprintjscore.Intent).NONE,
+        minimal: true,
+        small: true,
+        onClick () {
+            navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+            setCopied(true);
+        }
+    });
+}
+function $db14eb7a5c07abdb$export$214daccdda0f4ac6({ selectedLocation: selectedLocation, setFeatures: setFeatures, radius: radius = 2 }) {
+    const mapRef = (0, $dHcMG$macrostratmapboxreact.useMapRef)();
+    const isLoading = (0, $dHcMG$macrostratmapboxreact.useMapStatus)((s)=>s.isLoading);
+    const isInitialized = (0, $dHcMG$macrostratmapboxreact.useMapStatus)((s)=>s.isInitialized);
+    const prevLocation = (0, $dHcMG$react.useRef)(null);
+    const prevFeatures = (0, $dHcMG$react.useRef)([]);
+    (0, $dHcMG$react.useEffect)(()=>{
+        const map = mapRef?.current;
+        if (map == null) return;
+        if (selectedLocation == null) {
+            setFeatures(null);
+            return;
+        }
+        if (!isInitialized) return;
+        const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+        const locationMemo = JSON.stringify(selectedLocation);
+        if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures) return;
+        prevLocation.current = locationMemo;
+        // Don't update if the location hasn't changed
+        //if (selectedLocation == prevLocation) return;
+        const r = radius;
+        const pt = map.project(selectedLocation);
+        const bbox = [
+            [
+                pt.x - r,
+                pt.y - r
+            ],
+            [
+                pt.x + r,
+                pt.y + r
+            ]
+        ];
+        const features = map.queryRenderedFeatures(bbox);
+        prevFeatures.current = features ?? [];
+        setFeatures(features);
+    }, [
+        isInitialized,
+        selectedLocation,
+        isLoading
+    ]);
+    return null;
+}
+function $db14eb7a5c07abdb$var$FeatureHeader({ feature: feature }) {
+    return $db14eb7a5c07abdb$var$h("div.feature-header", [
+        $db14eb7a5c07abdb$var$h("h3", [
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+                label: "Source",
+                value: feature.source
+            }),
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+                label: "Source layer",
+                value: feature.sourceLayer
+            })
+        ])
+    ]);
+}
+function $db14eb7a5c07abdb$var$KeyValue({ label: label, value: value }) {
+    return $db14eb7a5c07abdb$var$h("span.key-value", [
+        $db14eb7a5c07abdb$var$h("span.key", label),
+        $db14eb7a5c07abdb$var$h("code.value", value)
+    ]);
+}
+function $db14eb7a5c07abdb$var$LoadingAwareFeatureSet({ features: features, sourceID: sourceID }) {
+    const map = (0, $dHcMG$macrostratmapboxreact.useMapRef)();
+    if (map?.current == null) return null;
+    const [isLoaded, setIsLoaded] = (0, $dHcMG$react.useState)(false);
+    const sourceFeatures = features.filter((d)=>d.source == "burwell");
+    (0, $dHcMG$react.useEffect)(()=>{
+        if (sourceFeatures.length > 0) {
+            setIsLoaded(true);
+            return;
+        }
+        const isLoaded = map.current.isSourceLoaded(sourceID);
+        setIsLoaded(isLoaded);
+        if (!isLoaded) map.current.once("sourcedata", (e)=>{
+            if (e.sourceId == sourceID) setIsLoaded(true);
+        });
+    }, [
+        map.current,
+        sourceID,
+        sourceFeatures.length
+    ]);
+    if (!isLoaded) return $db14eb7a5c07abdb$var$h((0, $dHcMG$blueprintjscore.Spinner));
+    return $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$export$617d79dae526d2cf, {
+        features: sourceFeatures
+    });
+}
+function $db14eb7a5c07abdb$export$43c75dec9d0b96c({ feature: feature, showExtent: showExtent, setShowExtent: setShowExtent }) {
+    if (feature == null) return null;
+    const size = feature._vectorTileFeature._pbf.length;
+    return $db14eb7a5c07abdb$var$h("div.tile-info", [
+        $db14eb7a5c07abdb$var$h("h3", "Tile"),
+        $db14eb7a5c07abdb$var$h("div.tile-index", [
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+                label: "x",
+                value: feature._x
+            }),
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+                label: "y",
+                value: feature._y
+            }),
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+                label: "z",
+                value: feature._z
+            })
+        ]),
+        $db14eb7a5c07abdb$var$h("div.spacer"),
+        $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$KeyValue, {
+            label: "Size",
+            value: $db14eb7a5c07abdb$var$formatSize(size)
+        }),
+        $db14eb7a5c07abdb$var$h((0, $dHcMG$blueprintjscore.Switch), {
+            label: "Show extent",
+            alignIndicator: "right",
+            checked: showExtent,
+            onChange () {
+                setShowExtent(!showExtent);
+            }
+        })
+    ]);
+}
+function $db14eb7a5c07abdb$var$formatSize(size) {
+    if (size > 1000000) return $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$UnitNumber, {
+        value: size / 1000000,
+        unit: "Mb"
+    });
+    if (size > 1000) return $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$UnitNumber, {
+        value: size / 1000,
+        unit: "Kb"
+    });
+    return `${size} bytes`;
+}
+function $db14eb7a5c07abdb$var$UnitNumber({ value: value, unit: unit, precision: precision = 1 }) {
+    return $db14eb7a5c07abdb$var$h("span.unit-number", [
+        $db14eb7a5c07abdb$var$h("span.number", value.toFixed(precision)),
+        $db14eb7a5c07abdb$var$h("span.unit", unit)
+    ]);
+}
+function $db14eb7a5c07abdb$export$43277c51a01761c1({ features: features, focusedSource: focusedSource = null }) {
+    if (features == null) return null;
+    let focusedSourcePanel = null;
+    let filteredFeatures = features;
+    let title = "Features";
+    if (focusedSource != null) {
+        title = "Basemap features";
+        focusedSourcePanel = $db14eb7a5c07abdb$var$h((0, $750d69d73bfbdc9a$exports.ExpansionPanel), {
+            title: "Macrostrat features",
+            className: "macrostrat-features",
+            expanded: true
+        }, [
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$LoadingAwareFeatureSet, {
+                features: features,
+                sourceID: focusedSource
+            })
+        ]);
+        filteredFeatures = features.filter((d)=>d.source != focusedSource);
+    }
+    return $db14eb7a5c07abdb$var$h("div.feature-panel", [
+        focusedSourcePanel,
+        $db14eb7a5c07abdb$var$h((0, $750d69d73bfbdc9a$exports.ExpansionPanel), {
+            title: title,
+            className: "basemap-features",
+            expanded: focusedSource == null
+        }, [
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$FeatureGroups, {
+                features: filteredFeatures
+            })
+        ])
+    ]);
+}
+function $db14eb7a5c07abdb$var$FeatureGroups({ features: features }) {
+    /** Group features by source and sourceLayer */ if (features == null) return null;
+    const groups = (0, $dHcMG$d3array.group)(features, (d)=>`${d.source} - ${d.sourceLayer}`);
+    return $db14eb7a5c07abdb$var$h("div.feature-groups", Array.from(groups).map(([key, features])=>{
+        return $db14eb7a5c07abdb$var$h("div.feature-group", [
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$var$FeatureHeader, {
+                feature: features[0]
+            }),
+            $db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$export$617d79dae526d2cf, {
+                features: features
+            })
+        ]);
+    }));
+}
+function $db14eb7a5c07abdb$export$617d79dae526d2cf({ features: features }) {
+    return $db14eb7a5c07abdb$var$h("div.features", features.map((feature, i)=>$db14eb7a5c07abdb$var$h($db14eb7a5c07abdb$export$dc87b4d46cea200d, {
+            key: i,
+            feature: feature
+        })));
+}
+
+
+//# sourceMappingURL=vector-tile-features.456f887b.js.map

package/dist/cjs/vector-tile-features.456f887b.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/map-interface/src/dev/vector-tile-features.ts"],"sourcesContent":["import { Spinner, Switch, Button, Intent } from \"@blueprintjs/core\";\nimport { useMapRef, useMapStatus } from \"@macrostrat/mapbox-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { group } from \"d3-array\";\nimport { ExpansionPanel } from \"../expansion-panel\";\n\nconst h = hyper.styled(styles);\n\nexport function FeatureProperties({ data, ...rest }) {\n  // Instead of managing hover state with CSS, we use a state variable,\n  // so that the button re-renders when the state changes\n  const [showControls, setShowControls] = useState(false);\n  const onMouseEnter = useCallback(() => setShowControls(true), []);\n  const onMouseLeave = useCallback(() => setShowControls(false), []);\n\n  return h(\"div.feature-properties\", { onMouseEnter, onMouseLeave }, [\n    h.if(showControls)(\"div.controls\", h(CopyJSONButton, { data })),\n    h(JSONView, {\n      data,\n      hideRoot: true,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function FeatureRecord({ feature }) {\n  const props = feature.properties;\n  return h(\"div.feature-record\", [\n    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props }),\n  ]);\n}\n\nfunction CopyJSONButton({ data }) {\n  const [copied, setCopied] = useState(false);\n  return h(Button, {\n    icon: copied ? \"tick\" : \"clipboard\",\n    intent: copied ? Intent.SUCCESS : Intent.NONE,\n    minimal: true,\n    small: true,\n    onClick() {\n      navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n      setCopied(true);\n    },\n  });\n}\n\n/** This component wraps queryRenderedFeatures to get features at a given location */\nexport function FeatureSelectionHandler({\n  selectedLocation,\n  setFeatures,\n  radius = 2,\n}: {\n  selectedLocation: mapboxgl.LngLat;\n  setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;\n  radius?: number;\n}) {\n  const mapRef = useMapRef();\n  const isLoading = useMapStatus((s) => s.isLoading);\n  const isInitialized = useMapStatus((s) => s.isInitialized);\n  const prevLocation = useRef(null);\n  const prevFeatures = useRef([]);\n\n  useEffect(() => {\n    const map = mapRef?.current;\n    if (map == null) return;\n    if (selectedLocation == null) {\n      setFeatures(null);\n      return;\n    }\n\n    if (!isInitialized) return;\n\n    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n\n    const locationMemo = JSON.stringify(selectedLocation);\n    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)\n      return;\n\n    prevLocation.current = locationMemo;\n\n    // Don't update if the location hasn't changed\n    //if (selectedLocation == prevLocation) return;\n\n    const r = radius;\n    const pt = map.project(selectedLocation);\n\n    const bbox: [mapboxgl.PointLike, mapboxgl.PointLike] = [\n      [pt.x - r, pt.y - r],\n      [pt.x + r, pt.y + r],\n    ];\n    const features = map.queryRenderedFeatures(bbox);\n    prevFeatures.current = features ?? [];\n    setFeatures(features);\n  }, [isInitialized, selectedLocation, isLoading]);\n\n  return null;\n}\n\nfunction FeatureHeader({ feature }) {\n  return h(\"div.feature-header\", [\n    h(\"h3\", [\n      h(KeyValue, { label: \"Source\", value: feature.source }),\n      h(KeyValue, { label: \"Source layer\", value: feature.sourceLayer }),\n    ]),\n  ]);\n}\n\nfunction KeyValue({ label, value }) {\n  return h(\"span.key-value\", [h(\"span.key\", label), h(\"code.value\", value)]);\n}\n\nfunction LoadingAwareFeatureSet({ features, sourceID }) {\n  const map = useMapRef();\n  if (map?.current == null) return null;\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  const sourceFeatures = features.filter((d) => d.source == \"burwell\");\n\n  useEffect(() => {\n    if (sourceFeatures.length > 0) {\n      setIsLoaded(true);\n      return;\n    }\n\n    const isLoaded = map.current.isSourceLoaded(sourceID);\n    setIsLoaded(isLoaded);\n    if (!isLoaded) {\n      map.current.once(\"sourcedata\", (e) => {\n        if (e.sourceId == sourceID) {\n          setIsLoaded(true);\n        }\n      });\n    }\n  }, [map.current, sourceID, sourceFeatures.length]);\n\n  if (!isLoaded) return h(Spinner);\n  return h(Features, { features: sourceFeatures });\n}\n\nexport function TileInfo({ feature, showExtent, setShowExtent }) {\n  if (feature == null) return null;\n  const size = feature._vectorTileFeature._pbf.length;\n  return h(\"div.tile-info\", [\n    h(\"h3\", \"Tile\"),\n    h(\"div.tile-index\", [\n      h(KeyValue, { label: \"x\", value: feature._x }),\n      h(KeyValue, { label: \"y\", value: feature._y }),\n      h(KeyValue, { label: \"z\", value: feature._z }),\n    ]),\n    h(\"div.spacer\"),\n    h(KeyValue, { label: \"Size\", value: formatSize(size) }),\n    h(Switch, {\n      label: \"Show extent\",\n      alignIndicator: \"right\",\n      checked: showExtent,\n      onChange() {\n        setShowExtent(!showExtent);\n      },\n    }),\n  ]);\n}\n\nfunction formatSize(size: number) {\n  if (size > 1000000)\n    return h(UnitNumber, { value: size / 1000000, unit: \"Mb\" });\n  if (size > 1000) return h(UnitNumber, { value: size / 1000, unit: \"Kb\" });\n  return `${size} bytes`;\n}\n\nfunction UnitNumber({ value, unit, precision = 1 }) {\n  return h(\"span.unit-number\", [\n    h(\"span.number\", value.toFixed(precision)),\n    h(\"span.unit\", unit),\n  ]);\n}\n\nexport function FeaturePanel({ features, focusedSource = null }) {\n  if (features == null) return null;\n\n  let focusedSourcePanel = null;\n  let filteredFeatures = features;\n  let title = \"Features\";\n\n  if (focusedSource != null) {\n    title = \"Basemap features\";\n    focusedSourcePanel = h(\n      ExpansionPanel,\n      {\n        title: \"Macrostrat features\",\n        className: \"macrostrat-features\",\n        expanded: true,\n      },\n      [\n        h(LoadingAwareFeatureSet, {\n          features,\n          sourceID: focusedSource,\n        }),\n      ]\n    );\n    filteredFeatures = features.filter((d) => d.source != focusedSource);\n  }\n\n  return h(\"div.feature-panel\", [\n    focusedSourcePanel,\n    h(\n      ExpansionPanel,\n      { title, className: \"basemap-features\", expanded: focusedSource == null },\n      [\n        h(FeatureGroups, {\n          features: filteredFeatures,\n        }),\n      ]\n    ),\n  ]);\n}\n\nfunction FeatureGroups({ features }) {\n  /** Group features by source and sourceLayer */\n  if (features == null) return null;\n\n  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);\n\n  return h(\n    \"div.feature-groups\",\n    Array.from(groups).map(([key, features]) => {\n      return h(\"div.feature-group\", [\n        h(FeatureHeader, { feature: features[0] }),\n        h(Features, { features }),\n      ]);\n    })\n  );\n}\n\nexport function Features({ features }) {\n  return h(\n    \"div.features\",\n    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))\n  );\n}\n"],"names":[],"version":3,"file":"vector-tile-features.456f887b.js.map"}

package/dist/cjs/xray.a23f8660.js

@@ -0,0 +1,89 @@
+var $aGB2m$macrostratmapboxutils = require("@macrostrat/mapbox-utils");
+var $aGB2m$macrostratcolorutils = require("@macrostrat/color-utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "buildXRayStyle", () => $8646508ae99a5857$export$eff5fb2e10d05b1d);
+$parcel$export(module.exports, "buildInspectorStyle", () => $8646508ae99a5857$export$e739dc8dfc0db9a6);
+
+
+async function $8646508ae99a5857$export$eff5fb2e10d05b1d(baseStyle, params = null) {
+    const { inDarkMode: inDarkMode = false, color: color = "rgb(74, 242, 161)", mapboxToken: mapboxToken, xRaySources: xRaySources } = params;
+    const style = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(baseStyle, {
+        access_token: mapboxToken
+    });
+    const sources = xRaySources ?? Object.keys(style.sources);
+    let layers = [];
+    for (let layer of style.layers){
+        if (!sources.includes(layer.source)) {
+            layers.push(layer);
+            continue;
+        }
+        let newLayer = $8646508ae99a5857$var$transformMapboxLayer(layer, color, inDarkMode);
+        if (newLayer != null) layers.push(newLayer);
+    }
+    return {
+        ...style,
+        layers: layers
+    };
+}
+function $8646508ae99a5857$var$transformMapboxLayer(layer, color, inDarkMode) {
+    const c = (0, $aGB2m$macrostratcolorutils.asChromaColor)(color);
+    const xRayColor = (opacity = 1, darken = 0)=>{
+        if (!inDarkMode) return (0, $aGB2m$macrostratcolorutils.toRGBAString)(c.darken(2 - darken).alpha(opacity));
+        return (0, $aGB2m$macrostratcolorutils.toRGBAString)(c.alpha(opacity).darken(darken));
+    };
+    if (layer.type == "background") return null;
+    let newLayer = {
+        ...layer
+    };
+    console.log(xRayColor(0.5));
+    if (layer.type == "fill") newLayer.paint = {
+        "fill-color": xRayColor(0.1),
+        "fill-outline-color": xRayColor(0.5)
+    };
+    else if (layer.type == "line") newLayer.paint = {
+        "line-color": xRayColor(0.5, 0),
+        "line-width": 1.5
+    };
+    else if (layer.type == "symbol") newLayer.paint = {
+        "text-color": xRayColor(1, -0.5),
+        "text-halo-color": "#000"
+    };
+    else if (layer.type == "circle") newLayer.paint = {
+        "circle-color": xRayColor(0.5, 0),
+        "circle-stroke-color": xRayColor(0.5, 1),
+        "circle-radius": 2
+    };
+    return newLayer;
+}
+async function $8646508ae99a5857$export$e739dc8dfc0db9a6(baseStyle, overlayStyle = null, params = {}) {
+    const { mapboxToken: mapboxToken, xRay: xRay = false, xRaySources: _xRaySources, ...rest } = params;
+    let xRaySources = _xRaySources;
+    let style = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(baseStyle, {
+        access_token: mapboxToken
+    });
+    if (overlayStyle != null) {
+        const overlay = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(overlayStyle, {
+            access_token: mapboxToken
+        });
+        style = (0, $aGB2m$macrostratmapboxutils.mergeStyles)(style, overlay);
+        xRaySources ??= Object.keys(overlay.sources);
+    }
+    if (xRay) {
+        // If we haven't specified sources, then we'll use all of them
+        xRaySources ??= Object.keys(style.sources);
+        style = await $8646508ae99a5857$export$eff5fb2e10d05b1d(style, {
+            ...rest,
+            mapboxToken: mapboxToken,
+            xRaySources: xRaySources
+        });
+    }
+    return style;
+}
+
+
+//# sourceMappingURL=xray.a23f8660.js.map

package/dist/cjs/xray.a23f8660.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;AAWO,eAAe,0CACpB,SAA0B,EAC1B,SAAsB,IAAI;IAE1B,MAAM,cACJ,aAAa,cACb,QAAQ,kCACR,WAAW,eACX,WAAW,EACZ,GAAG;IACJ,MAAM,QAAQ,MAAM,CAAA,GAAA,2CAAa,EAAE,WAAW;QAAE,cAAc;IAAY;IAC1E,MAAM,UAAU,eAAe,OAAO,IAAI,CAAC,MAAM,OAAO;IAExD,IAAI,SAAS,EAAE;IACf,KAAK,IAAI,SAAS,MAAM,MAAM,CAAE;QAC9B,IAAI,CAAC,QAAQ,QAAQ,CAAC,MAAM,MAAM,GAAG;YACnC,OAAO,IAAI,CAAC;YACZ;QACF;QACA,IAAI,WAAW,2CAAqB,OAAO,OAAO;QAClD,IAAI,YAAY,MACd,OAAO,IAAI,CAAC;IAEhB;IAEA,OAAO;QACL,GAAG,KAAK;gBACR;IACF;AACF;AAEA,SAAS,2CAAqB,KAAK,EAAE,KAAK,EAAE,UAAU;IACpD,MAAM,IAAI,CAAA,GAAA,yCAAY,EAAE;IACxB,MAAM,YAAY,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;QACxC,IAAI,CAAC,YACH,OAAO,CAAA,GAAA,wCAAW,EAAE,EAAE,MAAM,CAAC,IAAI,QAAQ,KAAK,CAAC;QAEjD,OAAO,CAAA,GAAA,wCAAW,EAAE,EAAE,KAAK,CAAC,SAAS,MAAM,CAAC;IAC9C;IAEA,IAAI,MAAM,IAAI,IAAI,cAChB,OAAO;IAGT,IAAI,WAAW;QAAE,GAAG,KAAK;IAAC;IAE1B,QAAQ,GAAG,CAAC,UAAU;IAEtB,IAAI,MAAM,IAAI,IAAI,QAChB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU;QACxB,sBAAsB,UAAU;IAClC;SACK,IAAI,MAAM,IAAI,IAAI,QACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,KAAK;QAC7B,cAAc;IAChB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,GAAG;QAC3B,mBAAmB;IACrB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,gBAAgB,UAAU,KAAK;QAC/B,uBAAuB,UAAU,KAAK;QACtC,iBAAiB;IACnB;IAGF,OAAO;AACT;AAMO,eAAe,0CACpB,SAAkC,EAClC,eAA+C,IAAI,EACnD,SAAgC,CAAC,CAAC;IAElC,MAAM,eACJ,WAAW,QACX,OAAO,OACP,aAAa,YAAY,EACzB,GAAG,MACJ,GAAG;IACJ,IAAI,cAAc;IAClB,IAAI,QAAQ,MAAM,CAAA,GAAA,2CAAa,EAAE,WAAW;QAC1C,cAAc;IAChB;IAEA,IAAI,gBAAgB,MAAM;QACxB,MAAM,UAAU,MAAM,CAAA,GAAA,2CAAa,EAAE,cAAc;YACjD,cAAc;QAChB;QACA,QAAQ,CAAA,GAAA,wCAAU,EAAE,OAAO;QAC3B,gBAAgB,OAAO,IAAI,CAAC,QAAQ,OAAO;IAC7C;IAEA,IAAI,MAAM;QACR,8DAA8D;QAC9D,gBAAgB,OAAO,IAAI,CAAC,MAAM,OAAO;QAEzC,QAAQ,MAAM,0CAAe,OAAO;YAAE,GAAG,IAAI;yBAAE;yBAAa;QAAY;IAC1E;IACA,OAAO;AACT","sources":["packages/map-interface/src/dev/xray.ts"],"sourcesContent":["import { getMapboxStyle, mergeStyles } from \"@macrostrat/mapbox-utils\";\nimport { asChromaColor, toRGBAString } from \"@macrostrat/color-utils\";\nimport mapboxgl from \"mapbox-gl\";\n\ninterface XRayOptions {\n  color?: string;\n  inDarkMode?: boolean;\n  mapboxToken?: string;\n  xRaySources?: string[];\n}\n\nexport async function buildXRayStyle(\n  baseStyle: string | object,\n  params: XRayOptions = null\n) {\n  const {\n    inDarkMode = false,\n    color = \"rgb(74, 242, 161)\",\n    mapboxToken,\n    xRaySources,\n  } = params;\n  const style = await getMapboxStyle(baseStyle, { access_token: mapboxToken });\n  const sources = xRaySources ?? Object.keys(style.sources);\n\n  let layers = [];\n  for (let layer of style.layers) {\n    if (!sources.includes(layer.source)) {\n      layers.push(layer);\n      continue;\n    }\n    let newLayer = transformMapboxLayer(layer, color, inDarkMode);\n    if (newLayer != null) {\n      layers.push(newLayer);\n    }\n  }\n\n  return {\n    ...style,\n    layers,\n  };\n}\n\nfunction transformMapboxLayer(layer, color, inDarkMode) {\n  const c = asChromaColor(color);\n  const xRayColor = (opacity = 1, darken = 0) => {\n    if (!inDarkMode) {\n      return toRGBAString(c.darken(2 - darken).alpha(opacity));\n    }\n    return toRGBAString(c.alpha(opacity).darken(darken));\n  };\n\n  if (layer.type == \"background\") {\n    return null;\n  }\n\n  let newLayer = { ...layer };\n\n  console.log(xRayColor(0.5));\n\n  if (layer.type == \"fill\") {\n    newLayer.paint = {\n      \"fill-color\": xRayColor(0.1),\n      \"fill-outline-color\": xRayColor(0.5),\n    };\n  } else if (layer.type == \"line\") {\n    newLayer.paint = {\n      \"line-color\": xRayColor(0.5, 0),\n      \"line-width\": 1.5,\n    };\n  } else if (layer.type == \"symbol\") {\n    newLayer.paint = {\n      \"text-color\": xRayColor(1, -0.5),\n      \"text-halo-color\": \"#000\",\n    };\n  } else if (layer.type == \"circle\") {\n    newLayer.paint = {\n      \"circle-color\": xRayColor(0.5, 0),\n      \"circle-stroke-color\": xRayColor(0.5, 1),\n      \"circle-radius\": 2,\n    };\n  }\n\n  return newLayer;\n}\n\ntype InspectorStyleOptions = XRayOptions & {\n  xRay?: boolean;\n};\n\nexport async function buildInspectorStyle(\n  baseStyle: mapboxgl.Style | string,\n  overlayStyle: mapboxgl.Style | string | null = null,\n  params: InspectorStyleOptions = {}\n) {\n  const {\n    mapboxToken,\n    xRay = false,\n    xRaySources: _xRaySources,\n    ...rest\n  } = params;\n  let xRaySources = _xRaySources;\n  let style = await getMapboxStyle(baseStyle, {\n    access_token: mapboxToken,\n  });\n\n  if (overlayStyle != null) {\n    const overlay = await getMapboxStyle(overlayStyle, {\n      access_token: mapboxToken,\n    });\n    style = mergeStyles(style, overlay);\n    xRaySources ??= Object.keys(overlay.sources);\n  }\n\n  if (xRay) {\n    // If we haven't specified sources, then we'll use all of them\n    xRaySources ??= Object.keys(style.sources);\n\n    style = await buildXRayStyle(style, { ...rest, mapboxToken, xRaySources });\n  }\n  return style;\n}\n"],"names":[],"version":3,"file":"xray.a23f8660.js.map"}

package/dist/esm/container.16bde261.js

@@ -0,0 +1,126 @@
+import $gPxI6$mainmodulef70e002bjs from "./main.module.f70e002b.js";
+import "../cjs/main.module.f085a193.css";
+import {MapBottomControls as $91d5aa004eeb2226$export$db1a2e058a06fb5c} from "./controls.f757ce16.js";
+import $gPxI6$macrostrathyper, {addClassNames as $gPxI6$addClassNames} from "@macrostrat/hyper";
+import $gPxI6$classnames from "classnames";
+import {useTransition as $gPxI6$useTransition} from "transition-hook";
+import {ZoomControl as $gPxI6$ZoomControl, MapboxMapProvider as $gPxI6$MapboxMapProvider, useMapPosition as $gPxI6$useMapPosition} from "@macrostrat/mapbox-react";
+import {ToasterContext as $gPxI6$ToasterContext} from "@macrostrat/ui-components";
+import {mapViewInfo as $gPxI6$mapViewInfo} from "@macrostrat/mapbox-utils";
+import {Card as $gPxI6$Card} from "@blueprintjs/core";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+
+const $4bdfa9cd8240b2fd$var$h = (0, $gPxI6$macrostrathyper).styled((0, ($parcel$interopDefault($gPxI6$mainmodulef70e002bjs))));
+const $4bdfa9cd8240b2fd$export$ec68dd77edbe678b = (props)=>$4bdfa9cd8240b2fd$var$h((0, $gPxI6$Card), {
+        ...props,
+        className: (0, $gPxI6$classnames)("panel-card", props.className)
+    });
+var $4bdfa9cd8240b2fd$export$612ca936d3ed4784 = /*#__PURE__*/ function(DetailPanelStyle) {
+    DetailPanelStyle["FIXED"] = "fixed";
+    DetailPanelStyle["FLOATING"] = "floating";
+    return DetailPanelStyle;
+}({});
+const $4bdfa9cd8240b2fd$export$9fa5da0bcfd0a290 = (props)=>$4bdfa9cd8240b2fd$var$h($4bdfa9cd8240b2fd$var$MapProviders, $4bdfa9cd8240b2fd$var$h($4bdfa9cd8240b2fd$var$_MapAreaContainer, props));
+function $4bdfa9cd8240b2fd$var$_MapAreaContainer({ children: children, className: className, navbar: navbar, contextPanel: contextPanel = null, detailPanel: detailPanel = null, detailPanelOpen: detailPanelOpen, contextPanelOpen: contextPanelOpen = true, bottomPanel: bottomPanel = null, mainPanel: mainPanel, mapControls: mapControls = $4bdfa9cd8240b2fd$var$h((0, $91d5aa004eeb2226$export$db1a2e058a06fb5c)), contextStackProps: contextStackProps = null, detailStackProps: detailStackProps = null, detailPanelStyle: detailPanelStyle = "floating", fitViewport: fitViewport = true, showPanelOutlines: showPanelOutlines = false, preventMapInteraction: preventMapInteraction = false, ...rest }) {
+    const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
+    const contextPanelTrans = (0, $gPxI6$useTransition)(contextPanelOpen, 800);
+    const detailPanelTrans = (0, $gPxI6$useTransition)(_detailPanelOpen, 800);
+    /*- We apply a custom style to the panel container when we are interacting
+      with the search bar, so that we can block map interactions until search
+      bar focus is lost.
+    - We also apply a custom style when the infodrawer is open so we can hide
+      the search bar on mobile platforms
+    - These styles are doubly applied so we can have both namespaced and
+      outside-accessible styles for each case.
+  */ const mainUIClassNames = (0, $gPxI6$classnames)("map-container", className, `detail-panel-${detailPanelStyle}`, `context-panel-${contextPanelTrans.stage}`, `map-context-${contextPanelTrans.stage}`, `detail-panel-${detailPanelTrans.stage}`, `map-detail-${detailPanelTrans.stage}`, {
+        "detail-panel-open": _detailPanelOpen,
+        "map-context-open": contextPanelOpen,
+        "show-panel-outlines": showPanelOutlines,
+        "fit-viewport": fitViewport
+    });
+    const mapControlsExt = $4bdfa9cd8240b2fd$var$h([
+        $4bdfa9cd8240b2fd$var$h((0, $gPxI6$ZoomControl), {
+            className: "zoom-control"
+        }),
+        $4bdfa9cd8240b2fd$var$h("div.spacer"),
+        mapControls
+    ]);
+    const detailStackExt = $4bdfa9cd8240b2fd$var$h("div.detail-stack.infodrawer-container", detailStackProps, [
+        $4bdfa9cd8240b2fd$var$h("div.detail-panel-holder", null, detailPanel),
+        $4bdfa9cd8240b2fd$var$h.if(detailPanelStyle == "floating")([
+            mapControlsExt
+        ])
+    ]);
+    let contextStack = null;
+    if (navbar != null && contextPanel != null) contextStack = $4bdfa9cd8240b2fd$var$h($4bdfa9cd8240b2fd$var$ContextStack, {
+        navbar: navbar,
+        ...contextStackProps
+    }, [
+        $4bdfa9cd8240b2fd$var$h.if(contextPanelTrans.shouldMount)([
+            contextPanel
+        ])
+    ]);
+    return $4bdfa9cd8240b2fd$var$h($4bdfa9cd8240b2fd$export$fa395a37c3898ae3, {
+        className: mainUIClassNames
+    }, [
+        $4bdfa9cd8240b2fd$var$h("div.main-row", [
+            $4bdfa9cd8240b2fd$var$h("div.map-ui", {
+                ...rest
+            }, [
+                contextStack,
+                //h(MapView),
+                children ?? mainPanel,
+                $4bdfa9cd8240b2fd$var$h.if(detailPanelStyle == "floating")([
+                    detailStackExt
+                ]),
+                $4bdfa9cd8240b2fd$var$h.if(detailPanelStyle == "fixed")("div.map-control-stack", mapControlsExt)
+            ]),
+            $4bdfa9cd8240b2fd$var$h.if(detailPanelStyle == "fixed")([
+                detailStackExt
+            ])
+        ]),
+        $4bdfa9cd8240b2fd$var$h("div.bottom", null, bottomPanel)
+    ]);
+}
+function $4bdfa9cd8240b2fd$var$ContextStack(props) {
+    const { adaptiveWidth: adaptiveWidth, navbar: navbar, children: children, ...rest } = props;
+    const props1 = (0, $gPxI6$addClassNames)(rest, {
+        "adaptive-width": adaptiveWidth
+    });
+    return $4bdfa9cd8240b2fd$var$h("div.context-stack", props1, [
+        navbar,
+        $4bdfa9cd8240b2fd$var$h("div.context-panel-holder", null, children),
+        $4bdfa9cd8240b2fd$var$h("div.spacer")
+    ]);
+}
+const $4bdfa9cd8240b2fd$var$MapProviders = ({ children: children })=>$4bdfa9cd8240b2fd$var$h((0, $gPxI6$ToasterContext), $4bdfa9cd8240b2fd$var$h((0, $gPxI6$MapboxMapProvider), children));
+function $4bdfa9cd8240b2fd$export$fa395a37c3898ae3({ className: className, children: children }) {
+    const mapPosition = (0, $gPxI6$useMapPosition)();
+    if (mapPosition != null) {
+        const { mapIsRotated: mapIsRotated, mapUse3D: mapUse3D, mapIsGlobal: mapIsGlobal } = (0, $gPxI6$mapViewInfo)(mapPosition);
+        className = (0, $gPxI6$classnames)(className, {
+            "map-is-rotated": mapIsRotated,
+            "map-3d-available": mapUse3D,
+            "map-is-global": mapIsGlobal
+        });
+    }
+    return $4bdfa9cd8240b2fd$var$h("div", {
+        className: className
+    }, children);
+} //const _MapPage = compose(HotkeysProvider, MapPage);
+
+
+export {$4bdfa9cd8240b2fd$export$ec68dd77edbe678b as PanelCard, $4bdfa9cd8240b2fd$export$612ca936d3ed4784 as DetailPanelStyle, $4bdfa9cd8240b2fd$export$9fa5da0bcfd0a290 as MapAreaContainer, $4bdfa9cd8240b2fd$export$fa395a37c3898ae3 as MapStyledContainer};
+//# sourceMappingURL=container.16bde261.js.map

package/dist/esm/container.16bde261.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,sEAAK;AAIrB,MAAM,4CAAY,CAAC,QACxB,wBAAE,CAAA,GAAA,WAAG,GAAG;QAAE,GAAG,KAAK;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,cAAc,MAAM,SAAS;IAAE;AAOpE,IAAA,AAAK,mEAAA;;;WAAA;;AAKL,MAAM,4CAAmB,CAAC,QAC/B,wBAAE,oCAAc,wBAAE,yCAAmB;AAsBvC,SAAS,wCAAkB,YACzB,QAAQ,aACR,SAAS,UACT,MAAM,gBACN,eAAe,mBACf,cAAc,uBACd,eAAe,oBACf,mBAAmB,mBACnB,cAAc,iBACd,SAAS,eACT,cAAc,wBAAE,CAAA,GAAA,yCAAgB,uBAChC,oBAAoB,wBACpB,mBAAmB,wBACnB,4CACA,cAAc,yBACd,oBAAoB,8BACpB,wBAAwB,OACxB,GAAG,MACmB;IACtB,MAAM,mBAAmB,mBAAmB,eAAe;IAC3D,MAAM,oBAAoB,CAAA,GAAA,oBAAY,EAAE,kBAAkB;IAC1D,MAAM,mBAAmB,CAAA,GAAA,oBAAY,EAAE,kBAAkB;IAEzD;;;;;;;EAOA,GACA,MAAM,mBAAmB,CAAA,GAAA,iBAAS,EAChC,iBACA,WACA,CAAC,aAAa,EAAE,kBAAkB,EAClC,CAAC,cAAc,EAAE,kBAAkB,KAAK,EAAE,EAC1C,CAAC,YAAY,EAAE,kBAAkB,KAAK,EAAE,EACxC,CAAC,aAAa,EAAE,iBAAiB,KAAK,EAAE,EACxC,CAAC,WAAW,EAAE,iBAAiB,KAAK,EAAE,EACtC;QACE,qBAAqB;QACrB,oBAAoB;QACpB,uBAAuB;QACvB,gBAAgB;IAClB;IAGF,MAAM,iBAAiB,wBAAE;QACvB,wBAAE,CAAA,GAAA,kBAAU,GAAG;YAAE,WAAW;QAAe;QAC3C,wBAAE;QACF;KACD;IAED,MAAM,iBAAiB,wBACrB,yCACA,kBACA;QACE,wBAAE,2BAA2B,MAAM;QACnC,wBAAE,EAAE,CAAC,gCAA+C;YAAC;SAAe;KACrE;IAGH,IAAI,eAAe;IACnB,IAAI,UAAU,QAAQ,gBAAgB,MACpC,eAAe,wBAAE,oCAAc;gBAAE;QAAQ,GAAG,iBAAiB;IAAC,GAAG;QAC/D,wBAAE,EAAE,CAAC,kBAAkB,WAAW,EAAE;YAAC;SAAa;KACnD;IAGH,OAAO,wBAAE,2CAAoB;QAAE,WAAW;IAAiB,GAAG;QAC5D,wBAAE,gBAAgB;YAChB,wBAAE,cAAc;gBAAE,GAAG,IAAI;YAAC,GAAG;gBAC3B;gBACA,aAAa;gBACb,YAAY;gBACZ,wBAAE,EAAE,CAAC,gCAA+C;oBAAC;iBAAe;gBACpE,wBAAE,EAAE,CAAC,6BACH,yBACA;aAEH;YACD,wBAAE,EAAE,CAAC,6BAA4C;gBAAC;aAAe;SAClE;QACD,wBAAE,cAAc,MAAM;KACvB;AACH;AAEA,SAAS,mCAAa,KAAwB;IAC5C,MAAM,iBAAE,aAAa,UAAE,MAAM,YAAE,QAAQ,EAAE,GAAG,MAAM,GAAG;IACrD,MAAM,SAAS,CAAA,GAAA,oBAAY,EAAE,MAAM;QAAE,kBAAkB;IAAc;IACrE,OAAO,wBAAE,qBAAqB,QAAQ;QACpC;QACA,wBAAE,4BAA4B,MAAM;QACpC,wBAAE;KACH;AACH;AAEA,MAAM,qCAAe,CAAC,YAAE,QAAQ,EAAE,GAChC,wBAAE,CAAA,GAAA,qBAAa,GAAG,wBAAE,CAAA,GAAA,wBAAgB,GAAG;AAOlC,SAAS,0CAAmB,aAAE,SAAS,YAAE,QAAQ,EAAqB;IAC3E,MAAM,cAAc,CAAA,GAAA,qBAAa;IACjC,IAAI,eAAe,MAAM;QACvB,MAAM,gBAAE,YAAY,YAAE,QAAQ,eAAE,WAAW,EAAE,GAAG,CAAA,GAAA,kBAAU,EAAE;QAC5D,YAAY,CAAA,GAAA,iBAAS,EAAE,WAAW;YAChC,kBAAkB;YAClB,oBAAoB;YACpB,iBAAiB;QACnB;IACF;IAEA,OAAO,wBAAE,OAAO;mBAAE;IAAU,GAAG;AACjC,EAEA,qDAAqD","sources":["packages/map-interface/src/container.ts"],"sourcesContent":["import hyper, { addClassNames } from \"@macrostrat/hyper\";\nimport { HTMLDivProps } from \"@blueprintjs/core\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { useTransition } from \"transition-hook\";\nimport {\n  MapboxMapProvider,\n  ZoomControl,\n  useMapPosition,\n} from \"@macrostrat/mapbox-react\";\nimport { ToasterContext } from \"@macrostrat/ui-components\";\nimport { MapBottomControls } from \"./controls\";\nimport { mapViewInfo, MapPosition } from \"@macrostrat/mapbox-utils\";\nimport { Card } from \"@blueprintjs/core\";\n\nimport { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\ntype AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;\n\nexport const PanelCard = (props) =>\n  h(Card, { ...props, className: classNames(\"panel-card\", props.className) });\n\ninterface ContextStackProps extends HTMLDivProps {\n  adaptiveWidth: boolean;\n  navbar: AnyElement;\n}\n\nexport enum DetailPanelStyle {\n  FIXED = \"fixed\",\n  FLOATING = \"floating\",\n}\n\nexport const MapAreaContainer = (props) =>\n  h(MapProviders, h(_MapAreaContainer, props));\n\ninterface MapAreaContainerProps {\n  navbar: AnyElement;\n  children?: AnyElement;\n  mapControls?: AnyElement;\n  contextPanel?: AnyElement;\n  contextStack?: AnyElement;\n  mainPanel?: AnyElement;\n  detailPanel?: AnyElement;\n  bottomPanel?: AnyElement;\n  className?: string;\n  detailPanelOpen?: boolean;\n  contextPanelOpen?: boolean;\n  contextStackProps?: ContextStackProps;\n  detailStackProps?: HTMLDivProps;\n  detailPanelStyle: DetailPanelStyle;\n  fitViewport?: boolean;\n  showPanelOutlines?: boolean;\n  preventMapInteraction?: boolean;\n}\n\nfunction _MapAreaContainer({\n  children,\n  className,\n  navbar,\n  contextPanel = null,\n  detailPanel = null,\n  detailPanelOpen,\n  contextPanelOpen = true,\n  bottomPanel = null,\n  mainPanel,\n  mapControls = h(MapBottomControls),\n  contextStackProps = null,\n  detailStackProps = null,\n  detailPanelStyle = DetailPanelStyle.FLOATING,\n  fitViewport = true,\n  showPanelOutlines = false,\n  preventMapInteraction = false,\n  ...rest\n}: MapAreaContainerProps) {\n  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;\n  const contextPanelTrans = useTransition(contextPanelOpen, 800);\n  const detailPanelTrans = useTransition(_detailPanelOpen, 800);\n\n  /*- We apply a custom style to the panel container when we are interacting\n      with the search bar, so that we can block map interactions until search\n      bar focus is lost.\n    - We also apply a custom style when the infodrawer is open so we can hide\n      the search bar on mobile platforms\n    - These styles are doubly applied so we can have both namespaced and\n      outside-accessible styles for each case.\n  */\n  const mainUIClassNames = classNames(\n    \"map-container\",\n    className,\n    `detail-panel-${detailPanelStyle}`,\n    `context-panel-${contextPanelTrans.stage}`,\n    `map-context-${contextPanelTrans.stage}`,\n    `detail-panel-${detailPanelTrans.stage}`,\n    `map-detail-${detailPanelTrans.stage}`,\n    {\n      \"detail-panel-open\": _detailPanelOpen,\n      \"map-context-open\": contextPanelOpen,\n      \"show-panel-outlines\": showPanelOutlines,\n      \"fit-viewport\": fitViewport,\n    }\n  );\n\n  const mapControlsExt = h([\n    h(ZoomControl, { className: \"zoom-control\" }),\n    h(\"div.spacer\"),\n    mapControls,\n  ]);\n\n  const detailStackExt = h(\n    \"div.detail-stack.infodrawer-container\",\n    detailStackProps,\n    [\n      h(\"div.detail-panel-holder\", null, detailPanel),\n      h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([mapControlsExt]),\n    ]\n  );\n\n  let contextStack = null;\n  if (navbar != null && contextPanel != null) {\n    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [\n      h.if(contextPanelTrans.shouldMount)([contextPanel]),\n    ]);\n  }\n\n  return h(MapStyledContainer, { className: mainUIClassNames }, [\n    h(\"div.main-row\", [\n      h(\"div.map-ui\", { ...rest }, [\n        contextStack,\n        //h(MapView),\n        children ?? mainPanel,\n        h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([detailStackExt]),\n        h.if(detailPanelStyle == DetailPanelStyle.FIXED)(\n          \"div.map-control-stack\",\n          mapControlsExt\n        ),\n      ]),\n      h.if(detailPanelStyle == DetailPanelStyle.FIXED)([detailStackExt]),\n    ]),\n    h(\"div.bottom\", null, bottomPanel),\n  ]);\n}\n\nfunction ContextStack(props: ContextStackProps) {\n  const { adaptiveWidth, navbar, children, ...rest } = props;\n  const props1 = addClassNames(rest, { \"adaptive-width\": adaptiveWidth });\n  return h(\"div.context-stack\", props1, [\n    navbar,\n    h(\"div.context-panel-holder\", null, children),\n    h(\"div.spacer\"),\n  ]);\n}\n\nconst MapProviders = ({ children }) =>\n  h(ToasterContext, h(MapboxMapProvider, children));\n\ninterface MapContainerProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function MapStyledContainer({ className, children }: MapContainerProps) {\n  const mapPosition = useMapPosition();\n  if (mapPosition != null) {\n    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);\n    className = classNames(className, {\n      \"map-is-rotated\": mapIsRotated,\n      \"map-3d-available\": mapUse3D,\n      \"map-is-global\": mapIsGlobal,\n    });\n  }\n\n  return h(\"div\", { className }, children);\n}\n\n//const _MapPage = compose(HotkeysProvider, MapPage);\n"],"names":[],"version":3,"file":"container.16bde261.js.map"}

package/dist/esm/context-panel.c288c5cd.js

@@ -0,0 +1,81 @@
+import "../cjs/main.module.92978d8b.css";
+import $9qPq1$mainmodule9c57cc95js from "./main.module.9c57cc95.js";
+import {Spinner as $9qPq1$Spinner, Button as $9qPq1$Button, Text as $9qPq1$Text, Navbar as $9qPq1$Navbar, Card as $9qPq1$Card} from "@blueprintjs/core";
+import $9qPq1$macrostrathyper from "@macrostrat/hyper";
+import {useMapStatus as $9qPq1$useMapStatus} from "@macrostrat/mapbox-react";
+import {Spacer as $9qPq1$Spacer} from "@macrostrat/ui-components";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+const $6e914c81c8e053da$var$h = (0, $9qPq1$macrostrathyper).styled((0, ($parcel$interopDefault($9qPq1$mainmodule9c57cc95js))));
+const $6e914c81c8e053da$var$spinnerElement = $6e914c81c8e053da$var$h((0, $9qPq1$Spinner), {
+    size: 16
+});
+function $6e914c81c8e053da$export$4ec83e90d030b2f3({ isLoading: isLoading = false, onClick: onClick, active: active = false, large: large = true, icon: icon = "menu", style: style }) {
+    return $6e914c81c8e053da$var$h((0, $9qPq1$Button), {
+        className: "loading-button",
+        icon: isLoading ? $6e914c81c8e053da$var$spinnerElement : icon,
+        large: large,
+        minimal: true,
+        onClick: onClick,
+        active: active && !isLoading,
+        style: style
+    });
+}
+function $6e914c81c8e053da$export$9e3bae3c08bde368(props) {
+    const isLoading = (0, $9qPq1$useMapStatus)((s)=>s.isLoading);
+    return $6e914c81c8e053da$var$h($6e914c81c8e053da$export$4ec83e90d030b2f3, {
+        ...props,
+        isLoading: isLoading
+    });
+}
+function $6e914c81c8e053da$export$a8cc0062d02a3841({ className: className, children: children, headerElement: headerElement = null, title: title = null, statusElement: statusElement = null, rightElement: rightElement = null, height: height, width: width, style: style = {} }) {
+    let _rightElement = null;
+    if (rightElement != null) _rightElement = $6e914c81c8e053da$var$h("div.right-element", rightElement);
+    let _headerElement = headerElement;
+    if (title != null && _headerElement == null) {
+        if (typeof title === "string") _headerElement = $6e914c81c8e053da$var$h((0, $9qPq1$Text), {
+            tagName: "h2",
+            ellipsize: true
+        }, title);
+        else _headerElement = title;
+    }
+    if (_headerElement != null) _headerElement = $6e914c81c8e053da$var$h([
+        _headerElement,
+        $6e914c81c8e053da$var$h((0, $9qPq1$Spacer))
+    ]);
+    return $6e914c81c8e053da$var$h("div.searchbar-holder", {
+        className: className,
+        style: {
+            width: width
+        }
+    }, [
+        $6e914c81c8e053da$var$h("div.navbar-holder", [
+            $6e914c81c8e053da$var$h((0, $9qPq1$Navbar), {
+                className: "searchbar navbar panel",
+                style: {
+                    height: height,
+                    ...style
+                }
+            }, [
+                _headerElement,
+                children,
+                _rightElement
+            ])
+        ]),
+        $6e914c81c8e053da$var$h.if(statusElement != null)((0, $9qPq1$Card), {
+            className: "status-tongue"
+        }, statusElement)
+    ]);
+}
+
+
+export {$6e914c81c8e053da$export$4ec83e90d030b2f3 as LoadingButton, $6e914c81c8e053da$export$9e3bae3c08bde368 as MapLoadingButton, $6e914c81c8e053da$export$a8cc0062d02a3841 as FloatingNavbar};
+//# sourceMappingURL=context-panel.c288c5cd.js.map

package/dist/esm/context-panel.c288c5cd.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;AAOA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,sEAAK;AAE5B,MAAM,uCAAiB,wBAAE,CAAA,GAAA,cAAM,GAAG;IAAE,MAAM;AAAG;AAEtC,SAAS,0CAAc,aAC5B,YAAY,gBACZ,OAAO,UACP,SAAS,cACT,QAAQ,YACR,OAAO,eACP,KAAK,EACN;IACC,OAAO,wBAAE,CAAA,GAAA,aAAK,GAAG;QACf,WAAW;QACX,MAAM,YAAY,uCAAiB;eACnC;QACA,SAAS;iBACT;QACA,QAAQ,UAAU,CAAC;eACnB;IACF;AACF;AAEO,SAAS,0CAAiB,KAAK;IACpC,MAAM,YAAY,CAAA,GAAA,mBAAW,EAAE,CAAC,IAAM,EAAE,SAAS;IACjD,OAAO,wBAAE,2CAAe;QAAE,GAAG,KAAK;mBAAE;IAAU;AAChD;AAgBO,SAAS,0CAAe,aAC7B,SAAS,YACT,QAAQ,iBACR,gBAAgB,aAChB,QAAQ,qBACR,gBAAgB,oBAChB,eAAe,cACf,MAAM,SACN,KAAK,SACL,QAAQ,CAAC,GACW;IACpB,IAAI,gBAAwC;IAC5C,IAAI,gBAAgB,MAClB,gBAAgB,wBAAE,qBAAqB;IAGzC,IAAI,iBAAyC;IAC7C,IAAI,SAAS,QAAQ,kBAAkB;QACrC,IAAI,OAAO,UAAU,UACnB,iBAAiB,wBAAE,CAAA,GAAA,WAAG,GAAG;YAAE,SAAS;YAAM,WAAW;QAAK,GAAG;aAE7D,iBAAiB;;IAIrB,IAAI,kBAAkB,MACpB,iBAAiB,wBAAE;QAAC;QAAgB,wBAAE,CAAA,GAAA,aAAK;KAAG;IAGhD,OAAO,wBAAE,wBAAwB;mBAAE;QAAW,OAAO;mBAAE;QAAM;IAAE,GAAG;QAChE,wBAAE,qBAAqB;YACrB,wBACE,CAAA,GAAA,aAAK,GACL;gBACE,WAAW;gBACX,OAAO;4BAAE;oBAAQ,GAAG,KAAK;gBAAC;YAC5B,GACA;gBAAC;gBAAgB;gBAAU;aAAc;SAE5C;QACD,wBAAE,EAAE,CAAC,iBAAiB,MACpB,CAAA,GAAA,WAAG,GACH;YAAE,WAAW;QAAgB,GAC7B;KAEH;AACH","sources":["packages/map-interface/src/context-panel/index.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Navbar, Button, Spinner, Card, Text } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMapStatus } from \"@macrostrat/mapbox-react\";\nimport { Spacer } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\nconst spinnerElement = h(Spinner, { size: 16 });\n\nexport function LoadingButton({\n  isLoading = false,\n  onClick,\n  active = false,\n  large = true,\n  icon = \"menu\",\n  style,\n}) {\n  return h(Button, {\n    className: \"loading-button\",\n    icon: isLoading ? spinnerElement : icon,\n    large,\n    minimal: true,\n    onClick,\n    active: active && !isLoading,\n    style,\n  });\n}\n\nexport function MapLoadingButton(props) {\n  const isLoading = useMapStatus((s) => s.isLoading);\n  return h(LoadingButton, { ...props, isLoading });\n}\n\ntype AnyChildren = React.ReactNode;\n\nexport interface FloatingNavbarProps {\n  className?: string;\n  children?: AnyChildren;\n  headerElement?: AnyChildren;\n  title?: AnyChildren;\n  statusElement?: AnyChildren;\n  rightElement?: AnyChildren;\n  height?: number | string;\n  width?: number | string;\n  style?: object;\n}\n\nexport function FloatingNavbar({\n  className,\n  children,\n  headerElement = null,\n  title = null,\n  statusElement = null,\n  rightElement = null,\n  height,\n  width,\n  style = {},\n}: FloatingNavbarProps) {\n  let _rightElement: React.ReactNode | null = null;\n  if (rightElement != null) {\n    _rightElement = h(\"div.right-element\", rightElement);\n  }\n\n  let _headerElement: React.ReactNode | null = headerElement;\n  if (title != null && _headerElement == null) {\n    if (typeof title === \"string\") {\n      _headerElement = h(Text, { tagName: \"h2\", ellipsize: true }, title);\n    } else {\n      _headerElement = title;\n    }\n  }\n\n  if (_headerElement != null) {\n    _headerElement = h([_headerElement, h(Spacer)]);\n  }\n\n  return h(\"div.searchbar-holder\", { className, style: { width } }, [\n    h(\"div.navbar-holder\", [\n      h(\n        Navbar,\n        {\n          className: \"searchbar navbar panel\",\n          style: { height, ...style },\n        },\n        [_headerElement, children, _rightElement]\n      ),\n    ]),\n    h.if(statusElement != null)(\n      Card,\n      { className: \"status-tongue\" },\n      statusElement\n    ),\n  ]);\n}\n"],"names":[],"version":3,"file":"context-panel.c288c5cd.js.map"}