diff --git a/deps/web-components b/deps/web-components
index 8eb36d77..50c01b4e 160000
--- a/deps/web-components
+++ b/deps/web-components
@@ -1 +1 @@
-Subproject commit 8eb36d77e89f11b80d1ece92331410552885821c
+Subproject commit 50c01b4eb767bad997bdb5376a2c6eb97243e1e4
diff --git a/package.json b/package.json
index 84b5b025..e269559f 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@yarnpkg/sdks": "^3.1.0",
     "prettier": "^2.7.1",
     "sass": "^1.49.0",
+    "sass-embedded": "^1.79.1",
     "stylus": "^0.55.0",
     "typescript": "^5.1.6",
     "vite-plugin-rewrite-all": "^1.0.1",
diff --git a/pages/+Layout.ts b/pages/+Layout.ts
index 643e374b..4763af42 100644
--- a/pages/+Layout.ts
+++ b/pages/+Layout.ts
@@ -1,9 +1,8 @@
-import { DarkModeProvider } from "@macrostrat/ui-components";
+import { DarkModeProvider, DevToolsConsole } from "@macrostrat/ui-components";
 import { ReactNode } from "react";
 
 import { AuthProvider } from "~/_providers/auth";
 import { usePageContext } from "vike-react/usePageContext";
-import { enableAdmin } from "@macrostrat-web/settings";
 
 import "~/styles/blueprint-core";
 import "~/styles/_theme.styl";
@@ -12,7 +11,7 @@ import "~/styles/padding.css";
 //
 import h from "./layout.module.sass";
 
-import { PageAdminConsole } from "~/components";
+import { ClientOnly } from "vike-react/ClientOnly";
 
 export default function Layout({ children }: { children: ReactNode }) {
   const pageContext = usePageContext();
@@ -28,14 +27,28 @@ export default function Layout({ children }: { children: ReactNode }) {
       { followSystem: true },
       h("div.app-shell", { className: pageStyle + "-page" }, [
         children,
-        h.if(enableAdmin)(PageAdminConsole, {
-          className: "page-admin-container",
-        }),
+        h(
+          DevToolsConsole,
+          { className: "page-admin-container" },
+          h(DevToolsData)
+        ),
       ])
     )
   );
 }
 
+function DevToolsData() {
+  return h(
+    ClientOnly,
+    {
+      load() {
+        return import("~/components/developer").then((mod) => mod.DevToolsData);
+      },
+    },
+    (DevToolsData) => h(DevToolsData)
+  );
+}
+
 function NoOpDarkModeProvider(props) {
   return props.children;
 }
diff --git a/pages/dev/+Page.mdx b/pages/dev/+Page.mdx
index da46c8b2..0a504cdc 100644
--- a/pages/dev/+Page.mdx
+++ b/pages/dev/+Page.mdx
@@ -12,6 +12,13 @@ import { PageHeader, PageBreadcrumbs } from "~/components";
 - [CriticalMAAS](/integrations/criticalmaas)
 - [Sources](/dev/sources)
 
+## xDD integration
+
+- [Map legend affinity](/dev/legend-affinity)
+- [Extractions](/dev/extractions)
+
+## Apps
+
 - [Concept apps](/dev/concepts)
 - [Built with Macrostrat](/dev/apps)
 - [Test Site](/dev/test-site/main-page)
diff --git a/pages/dev/legend-affinity/+Page.client.ts b/pages/dev/legend-affinity/+Page.client.ts
new file mode 100644
index 00000000..40dffd27
--- /dev/null
+++ b/pages/dev/legend-affinity/+Page.client.ts
@@ -0,0 +1,363 @@
+import h from "./main.module.sass";
+import { mapboxAccessToken, tileserverDomain } from "@macrostrat-web/settings";
+import {
+  buildQueryString,
+  useDarkMode,
+  useStoredState,
+} from "@macrostrat/ui-components";
+import { Select, SelectProps } from "@blueprintjs/select";
+import mapboxgl from "mapbox-gl";
+import { useCallback, useState, useEffect, useMemo } from "react";
+import {
+  MapMarker,
+  MapLoadingButton,
+  MapAreaContainer,
+  buildInspectorStyle,
+  LocationPanel,
+  MapView,
+  FeaturePanel,
+  FeatureSelectionHandler,
+  TileInfo,
+  MapMovedReporter,
+  PanelCard,
+  ExpandableDetailsPanel,
+  getMapPositionForHash,
+  applyMapPositionToHash,
+} from "@macrostrat/map-interface";
+import { MapPosition } from "@macrostrat/mapbox-utils";
+import { PageBreadcrumbs } from "~/components";
+import { Button, Collapse, InputGroup } from "@blueprintjs/core";
+import { DataField } from "~/components/unit-details";
+import { getQueryString, setQueryString } from "@macrostrat/ui-components";
+
+import { useDebouncedCallback } from "use-debounce";
+
+export function Page() {
+  const dark = useDarkMode();
+  const isEnabled = dark?.isEnabled;
+
+  const startPos = {
+    camera: {
+      lng: -100,
+      lat: 40,
+      altitude: 500_000,
+    },
+  };
+
+  const [mapPosition, setMapPosition] = useMapPosition(startPos.camera);
+
+  // For now, we just have cmbert
+  const models = [
+    {
+      name: "cm_bert",
+      description: "Embeddings against mining documents using xDD",
+    },
+  ];
+
+  // const modelData =
+  //   useAPIResult(embeddingTileserverDomain, null, null)?.models ?? {};
+  // const models = Object.entries(modelData).map(([key, value]) => ({
+  //   name: key,
+  //   description: value,
+  // }));
+  //
+  const [model, setModel] = useState(null);
+  const activeModel = model ?? models?.[0]?.name;
+
+  const [value, term, setValue] = useSearchTerm();
+
+  const style = useMapStyle({
+    inDarkMode: isEnabled,
+    term,
+    model: activeModel,
+  });
+
+  const [inspectPosition, setInspectPosition] =
+    useState<mapboxgl.LngLat | null>(null);
+  const [features, setFeatures] = useState(null);
+
+  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
+    setInspectPosition(position);
+  }, []);
+
+  let detailElement = null;
+  if (inspectPosition != null) {
+    detailElement = h(
+      LocationPanel,
+      {
+        onClose() {
+          setInspectPosition(null);
+        },
+        position: inspectPosition,
+      },
+      [
+        h(TileInfo, {
+          feature: features?.[0] ?? null,
+        }),
+        h(FeaturePanel, { features: features }),
+      ]
+    );
+  }
+
+  if (style == null) {
+    return null;
+  }
+
+  return h(
+    MapAreaContainer,
+    {
+      contextPanel: h(PanelCard, [
+        h(PageBreadcrumbs, { title: "Legend affinity" }),
+        h("div.flex.row", [
+          h(InputGroup, {
+            placeholder: "Search",
+            large: true,
+            onChange: (e) => setValue(e.target.value),
+            value,
+            rightElement: h(MapLoadingButton, {
+              disabled: term == null,
+              icon: "search",
+            }),
+          }),
+        ]),
+        h("div.settings-panel", [
+          h(ExpandableDetailsPanel, { title: "Settings" }, [
+            h(ModelSelector, {
+              models,
+              model: activeModel,
+              setModel,
+            }),
+          ]),
+        ]),
+      ]),
+      detailPanel: detailElement,
+      contextPanelOpen: true,
+    },
+    h(
+      MapView,
+      {
+        style,
+        mapPosition,
+        projection: { name: "globe" },
+        mapboxToken: mapboxAccessToken,
+      },
+      [
+        h(FeatureSelectionHandler, {
+          selectedLocation: inspectPosition,
+          setFeatures: setFeatures,
+        }),
+        h(MapMovedReporter, {
+          onMapMoved: setMapPosition,
+        }),
+        h(MapMarker, {
+          position: inspectPosition,
+          setPosition: onSelectPosition,
+        }),
+      ]
+    )
+  );
+}
+
+function isValidMapPosition(data: any): boolean {
+  if (data == null) return false;
+  if (typeof data !== "object") return false;
+  if (data?.camera?.lng == null) return false;
+  if (data?.camera?.lat == null) return false;
+  return true;
+}
+
+interface StyleParams {
+  inDarkMode: boolean;
+  term: string | null;
+  model: string | null;
+}
+
+function useMapStyle(params: StyleParams): mapboxgl.Style | null {
+  const [actualStyle, setActualStyle] = useState(null);
+  const { inDarkMode, term, model } = params;
+
+  useEffect(() => {
+    console.log("Building style", term, model);
+    buildStyle({
+      inDarkMode,
+      term,
+      model,
+    }).then(setActualStyle);
+  }, [inDarkMode, term, model]);
+
+  return actualStyle;
+}
+
+async function buildStyle(params: StyleParams) {
+  const { inDarkMode, term, model } = params;
+
+  const baseStyle = inDarkMode
+    ? "mapbox://styles/mapbox/dark-v10"
+    : "mapbox://styles/mapbox/light-v10";
+
+  const greyColor = inDarkMode ? 255 : 20;
+
+  const overlayStyle: mapboxgl.Style = {
+    version: 8,
+    sources: {
+      macrostrat: {
+        type: "vector",
+        tiles: [tileserverURL(term, model)],
+        maxzoom: 9,
+      },
+    },
+    layers: [
+      {
+        id: "macrostrat",
+        type: "fill",
+        source: "macrostrat",
+        "source-layer": "units",
+        paint: paintProperties(term, greyColor),
+      },
+    ],
+  };
+
+  return buildInspectorStyle(baseStyle, overlayStyle, {
+    mapboxToken: mapboxAccessToken,
+    inDarkMode,
+    xRay: false,
+  });
+}
+
+function paintProperties(term: string | null, grayColor: number) {
+  if (term == null) {
+    return {
+      "fill-color": `rgba(${grayColor}, ${grayColor}, ${grayColor}, 0.1)`,
+    };
+  }
+  // Data-driven styling by the 'similarity' property [0, 1]
+  return {
+    "fill-color": [
+      "interpolate",
+      ["exponential", 1.2],
+      ["get", "similarity"],
+      0,
+      `rgba(${grayColor}, ${grayColor}, ${grayColor}, 0.02)`,
+      1,
+      "rgba(255, 0, 0, 0.5)",
+    ],
+  };
+}
+
+function tileserverURL(term: string | null, model: string | null) {
+  if (term == null) {
+    return tileserverDomain + "/carto/{z}/{x}/{y}";
+  }
+  let termSuffix = "?term=" + term;
+  let model_ = model ?? "cmbert";
+  return tileserverDomain + `/search/${model_}/tiles/{z}/{x}/{y}` + termSuffix;
+}
+
+function getStartingText() {
+  let query = getQueryString(window.location.search)?.term;
+  if (Array.isArray(query)) {
+    query = query[0];
+  }
+  return decodeURIComponent(query ?? "");
+}
+
+function useSearchTerm() {
+  const startingText = useMemo(getStartingText, []);
+  const [term, setTerm] = useState(startingText.length > 3 ? startingText : "");
+  const [userText, setUserText] = useState(startingText);
+  // Set the search term, debounced
+  const setTermDebounced = useDebouncedCallback((term) => {
+    setTerm(term);
+    // Set term on the URL
+    // Modify the query string without affecting other parameters
+    updateSearchTerm(term);
+  }, 500);
+
+  function getUserInput(text) {
+    setUserText(text);
+    if (text.length <= 3) {
+      setTerm(null);
+    } else {
+      setTermDebounced(text);
+    }
+  }
+
+  return [userText, term, getUserInput];
+}
+
+function updateSearchTerm(term) {
+  // Modify the query string without affecting other parameters
+  const qst = new URLSearchParams(window.location.search);
+  if (term == null || term.length == 0) {
+    qst.delete("term");
+  } else {
+    qst.set("term", encodeURIComponent(term));
+  }
+  window.history.replaceState({}, "", "?" + qst.toString());
+}
+
+interface Model {
+  name: string;
+  description: string;
+}
+
+function ModelSelector({ models, model, setModel }) {
+  return h(
+    DataField,
+    { label: "Model" },
+    h<SelectProps<Model>>(
+      Select,
+      {
+        items: models,
+        onItemSelect: (item) => {
+          setModel(item.name);
+        },
+        itemPredicate: (query, item) => {
+          return item.name.toLowerCase().includes(query.toLowerCase());
+        },
+        itemRenderer: (item, { handleClick, modifiers }) => {
+          return h(
+            "div.model-item",
+            {
+              onClick: handleClick,
+              key: item.name,
+              className: modifiers.active ? "active" : "",
+            },
+            [
+              h("span", null, item.name),
+              ": ",
+              h("span", { className: "bp5-text-muted" }, item.description),
+            ]
+          );
+        },
+      },
+      [
+        h(Button, {
+          text: model,
+          rightIcon: "caret-down",
+          minimal: true,
+        }),
+      ]
+    )
+  );
+}
+
+function useMapPosition(startPos) {
+  /** Use map position stored in the query string */
+  const [mapPosition, setMapPosition_] = useState<MapPosition | null>(null);
+
+  useEffect(() => {
+    const hashData = getQueryString(window.location.search) ?? {};
+    const position = getMapPositionForHash(hashData, startPos);
+    setMapPosition_(position);
+  }, []);
+
+  const setMapPosition = useCallback((position) => {
+    setMapPosition_(position);
+    let params = getQueryString(window.location.search) ?? {};
+    applyMapPositionToHash(params, position);
+    setQueryString(params);
+  }, []);
+
+  return [mapPosition, setMapPosition];
+}
diff --git a/pages/dev/legend-affinity/+config.ts b/pages/dev/legend-affinity/+config.ts
new file mode 100644
index 00000000..a262c14b
--- /dev/null
+++ b/pages/dev/legend-affinity/+config.ts
@@ -0,0 +1,3 @@
+export default {
+  title: "Legend affinity search",
+};
diff --git a/pages/dev/legend-affinity/main.module.sass b/pages/dev/legend-affinity/main.module.sass
new file mode 100644
index 00000000..9072b190
--- /dev/null
+++ b/pages/dev/legend-affinity/main.module.sass
@@ -0,0 +1,2 @@
+.model-item
+  margin: 1em 1em
diff --git a/pages/map/map-interface/map-page/index.ts b/pages/map/map-interface/map-page/index.ts
index cbcc3734..5a674475 100644
--- a/pages/map/map-interface/map-page/index.ts
+++ b/pages/map/map-interface/map-page/index.ts
@@ -81,7 +81,6 @@ function MapPage({
       detailPanel: h(InfoDrawerHolder),
       detailPanelStyle: "floating",
       bottomPanel: h(ElevationChart, null),
-      mapControls: h(MapBottomControls, [h(PageAdminButton)]),
       contextPanelOpen: contextPanelOpen || inputFocus,
       detailPanelOpen: infoDrawerOpen,
       className: classNames(
diff --git a/src/components/admin/_inner.ts b/src/components/admin/_inner.ts
deleted file mode 100644
index be7754de..00000000
--- a/src/components/admin/_inner.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Dialog } from "@blueprintjs/core";
-import { JSONView } from "@macrostrat/ui-components";
-import { usePageContext } from "vike-react/usePageContext";
-import h from "./page-admin.module.sass";
-
-export function PageAdminInner({ isOpen, setIsOpen }) {
-  return h([
-    h(
-      Dialog,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        title: "Page info",
-        className: "page-admin",
-      },
-      h("div.dialog-content.bp5-dialog-content", [h(PageContextViewer)])
-    ),
-    h("span.__render_alarm__"),
-  ]);
-}
-
-function PageContextViewer() {
-  return h(JSONView, { data: usePageContext(), hideRoot: true });
-}
diff --git a/src/components/admin/index.ts b/src/components/admin/index.ts
deleted file mode 100644
index 4f2eb22c..00000000
--- a/src/components/admin/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Button } from "@blueprintjs/core";
-import { useEffect } from "react";
-import h from "./page-admin.module.sass";
-import loadable from "@loadable/component";
-import { create } from "zustand";
-
-const useStore: any = create((set) => {
-  return {
-    isOpen: false,
-    isButtonShown: false,
-    setIsOpen(isOpen) {
-      set({ isOpen });
-    },
-    toggle() {
-      set((state) => ({ isOpen: !state.isOpen }));
-    },
-    toggleButton() {
-      set((state) => {
-        let isOpen = state.isButtonShown ? false : state.isOpen;
-        return { isButtonShown: !state.isButtonShown, isOpen };
-      });
-    },
-    buttonRef: null,
-    setButtonRef(ref) {
-      console.log("Setting button ref");
-      set({ buttonRef: ref });
-    },
-  };
-});
-
-function PageAdmin({ isOpen, setIsOpen }) {
-  if (!isOpen) return null;
-
-  const Window = loadable(() =>
-    import("./_inner").then((mod) => mod.PageAdminInner)
-  );
-
-  return h(Window, { isOpen, setIsOpen });
-}
-
-export function PageAdminConsole({ className }) {
-  const [isOpen, setIsOpen] = usePageAdminIsOpen();
-  const buttonRef = useStore((state) => state.buttonRef);
-  usePageAdminButtonEffect();
-
-  return h("div", { className }, [
-    h(PageAdmin, { isOpen, setIsOpen }),
-    h.if(buttonRef == null)(PageAdminButton, { setRef: false }),
-  ]);
-}
-
-export function PageAdminButton({ setRef = true }) {
-  const onClick = useStore((state) => state.toggle);
-  const _setRef = useStore((state) => state.setButtonRef);
-  const isShown = useStore((state) => state.isButtonShown);
-  const ref = (el) => {
-    if (setRef) _setRef(el);
-  };
-
-  return h.if(isShown)(Button, {
-    onClick,
-    className: "page-admin-button",
-    ref,
-    minimal: true,
-    small: true,
-    icon: "cog",
-  });
-}
-
-function usePageAdminButtonEffect() {
-  // Show the page admin console only if the appropriate query parameter is set
-  // OR if the user presses shift+alt+I
-  const toggleButton = useStore((s) => s.toggleButton);
-
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "I" && event.shiftKey) {
-        toggleButton();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
-}
-
-function usePageAdminIsOpen(): [boolean, (isOpen: boolean) => void] {
-  const isOpen = useStore((state) => state.isOpen);
-  const _setIsOpen = useStore((state) => state.setIsOpen);
-
-  // Check if the appropriate query parameter is set
-  useEffect(() => {
-    if (window == null) return;
-    const params = new URLSearchParams(window.location.search);
-    const isOpen = params.get("show") == "admin";
-    _setIsOpen(isOpen);
-  }, []);
-
-  function setIsOpen(isOpen: boolean) {
-    if (window == null) return;
-    const params = new URLSearchParams(window.location.search);
-    if (isOpen) {
-      params.set("show", "admin");
-    } else {
-      params.delete("show");
-    }
-    const search = params.toString();
-    let url = window.location.pathname;
-    if (search != null && search.length > 0) {
-      url += `?${search}`;
-    }
-    window.history.replaceState({}, "", url);
-    _setIsOpen(isOpen);
-  }
-
-  return [isOpen, setIsOpen];
-}
diff --git a/src/components/admin/page-admin.module.sass b/src/components/admin/page-admin.module.sass
deleted file mode 100644
index fd94522f..00000000
--- a/src/components/admin/page-admin.module.sass
+++ /dev/null
@@ -1,10 +0,0 @@
-.dialog-content
-  padding: 1em
-  overflow-y: scroll
-
-.page-admin
-  max-height: 80vh
-
-.page-admin-button
-    width: 16px
-    height: 16px
diff --git a/src/components/developer.ts b/src/components/developer.ts
new file mode 100644
index 00000000..f1432d23
--- /dev/null
+++ b/src/components/developer.ts
@@ -0,0 +1,9 @@
+import { JSONView } from "@macrostrat/ui-components";
+import { usePageContext } from "vike-react/usePageContext";
+import h from "@macrostrat/hyper";
+
+export function DevToolsData() {
+  const pageContext = usePageContext();
+
+  return h(JSONView, { data: pageContext, showRoot: false });
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 8fbe7310..72bdf34a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,5 +6,4 @@ export * from "./map-info";
 export * from "./lithology";
 export * from "./buttons";
 export * from "./navigation";
-export * from "./admin";
 export { buildCrossSectionLayers } from "~/_utils/map-layers";
diff --git a/src/components/navigation/PageBreadcrumbs.ts b/src/components/navigation/PageBreadcrumbs.ts
index d4616990..2787e8e0 100644
--- a/src/components/navigation/PageBreadcrumbs.ts
+++ b/src/components/navigation/PageBreadcrumbs.ts
@@ -1,13 +1,20 @@
 import { PageContext } from "vike/types";
 import { usePageContext } from "vike-react/usePageContext";
 import { Breadcrumbs } from "@blueprintjs/core";
-import React from "react";
+import React, { useMemo } from "react";
 import { MacrostratIcon } from "~/components";
 import h from "./breadcrumbs.module.sass";
 
-export function PageBreadcrumbs({ showLogo = false }) {
+export function PageBreadcrumbs({ showLogo = false, title }) {
   const ctx = usePageContext();
-  let items = buildBreadcrumbs(ctx.urlPathname, sitemap, ctx);
+  const items = useMemo(() => {
+    let items = buildBreadcrumbs(ctx.urlPathname, sitemap, ctx);
+    if (title != null) {
+      items[items.length - 1].text = title;
+    }
+    return items;
+  }, [ctx.urlPathname, title]);
+
   return h(PageBreadcrumbsInternal, {
     showLogo,
     items,
diff --git a/src/styles/core.sass b/src/styles/core.sass
index 75a25904..b1d6d17e 100644
--- a/src/styles/core.sass
+++ b/src/styles/core.sass
@@ -1,5 +1,6 @@
 @use "@blueprintjs/colors/lib/scss/colors.scss" as colors
 
+
 .float-right
   float: right
 
diff --git a/vite.config.ts b/vite.config.ts
index 65636e4a..0b2043bb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -100,4 +100,11 @@ export default defineConfig({
   ssr: {
     noExternal: ["labella", "@supabase/postgrest-js"],
   },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: "modern-compiler",
+      },
+    },
+  },
 });
diff --git a/yarn.lock b/yarn.lock
index cda28037..601a8753 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4417,6 +4417,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bufbuild/protobuf@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "@bufbuild/protobuf@npm:2.1.0"
+  checksum: 10/de780b67a36c1066c51cc1214eb15facb03619f08ec59f9c9ebff034ed7838069010739e615a2ee8f31b555127c554a1e6421f7d1d3d718dbcdd47c458cefef6
+  languageName: node
+  linkType: hard
+
 "@cesium/engine@npm:^4.0.0":
   version: 4.0.0
   resolution: "@cesium/engine@npm:4.0.0"
@@ -6780,7 +6787,7 @@ __metadata:
     "@macrostrat/hyper": "npm:^2.2.1"
     "@macrostrat/mapbox-react": "workspace:*"
     "@macrostrat/mapbox-utils": "workspace:*"
-    "@macrostrat/ui-components": "workspace:*"
+    "@macrostrat/ui-components": "workspace:^4.1.0"
     "@mapbox/tilebelt": "npm:^1.0.2"
     "@turf/bbox": "npm:^6.5.0"
     chroma-js: "npm:^2.4.2"
@@ -6938,7 +6945,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@macrostrat/ui-components@npm:^0.5.0||^1.0.0||^2.0.0||^3.0.0||^4.0.0, @macrostrat/ui-components@workspace:*, @macrostrat/ui-components@workspace:deps/web-components/packages/ui-components":
+"@macrostrat/ui-components@npm:^0.5.0||^1.0.0||^2.0.0||^3.0.0||^4.0.0, @macrostrat/ui-components@workspace:*, @macrostrat/ui-components@workspace:^4.1.0, @macrostrat/ui-components@workspace:deps/web-components/packages/ui-components":
   version: 0.0.0-use.local
   resolution: "@macrostrat/ui-components@workspace:deps/web-components/packages/ui-components"
   dependencies:
@@ -6978,6 +6985,7 @@ __metadata:
     underscore: "npm:^1.9.1"
     use-async-effect: "npm:^2.2.1"
     use-element-dimensions: "npm:^2.1.3"
+    zustand: "npm:^4.5.1"
   peerDependencies:
     "@types/react-dom": ^17 || ^18
     react: ^16.8.6 || ^17 || ^18
@@ -7091,6 +7099,7 @@ __metadata:
     reduce-reducers: "npm:^1.0.4"
     redux: "npm:^4.0.5"
     sass: "npm:^1.49.0"
+    sass-embedded: "npm:^1.79.1"
     sirv: "npm:^2.0.3"
     stylus: "npm:^0.55.0"
     swagger-ui-react: "npm:^5.12.3"
@@ -14789,6 +14798,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer-builder@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "buffer-builder@npm:0.2.0"
+  checksum: 10/16bd9eb8ac6630a05441bcb56522e956ae6a0724371ecc49b9a6bc10d35690489140df73573d0577e1e85c875737e560a4e2e67521fddd14714ddf4e0097d0ec
+  languageName: node
+  linkType: hard
+
 "buffer-equal@npm:0.0.1":
   version: 0.0.1
   resolution: "buffer-equal@npm:0.0.1"
@@ -15721,6 +15737,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorjs.io@npm:^0.5.0":
+  version: 0.5.2
+  resolution: "colorjs.io@npm:0.5.2"
+  checksum: 10/a6f6345865b177d19481008cb299c46ec9ff1fd206f472cd9ef69ddbca65832c81237b19fdcd24f3f9540c3e6343a22eb486cd800f5eab9815ce7c98c16a0f0e
+  languageName: node
+  linkType: hard
+
 "colors@npm:1.0.3, colors@npm:1.0.x":
   version: 1.0.3
   resolution: "colors@npm:1.0.3"
@@ -32254,6 +32277,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.4.0":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: "npm:^2.1.0"
+  checksum: 10/b10cac1a5258f885e9dd1b70d23c34daeb21b61222ee735d2ec40a8685bdca40429000703a44f0e638c27a684ac139e1c37e835d2a0dc16f6fc061a138ae3abb
+  languageName: node
+  linkType: hard
+
 "sade@npm:^1.7.3, sade@npm:^1.7.4":
   version: 1.8.1
   resolution: "sade@npm:1.8.1"
@@ -32314,6 +32346,224 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-embedded-android-arm64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-android-arm64@npm:1.79.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-arm@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-android-arm@npm:1.79.1"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-ia32@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-android-ia32@npm:1.79.1"
+  conditions: os=android & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-riscv64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-android-riscv64@npm:1.79.1"
+  conditions: os=android & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-x64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-android-x64@npm:1.79.1"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-darwin-arm64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-darwin-arm64@npm:1.79.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-darwin-x64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-darwin-x64@npm:1.79.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-arm64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-arm64@npm:1.79.1"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-arm@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-arm@npm:1.79.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-ia32@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-ia32@npm:1.79.1"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-arm64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-musl-arm64@npm:1.79.1"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-arm@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-musl-arm@npm:1.79.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-ia32@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-musl-ia32@npm:1.79.1"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-riscv64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-musl-riscv64@npm:1.79.1"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-x64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-musl-x64@npm:1.79.1"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-riscv64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-riscv64@npm:1.79.1"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-x64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-linux-x64@npm:1.79.1"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-win32-arm64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-win32-arm64@npm:1.79.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-win32-ia32@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-win32-ia32@npm:1.79.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"sass-embedded-win32-x64@npm:1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded-win32-x64@npm:1.79.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded@npm:^1.79.1":
+  version: 1.79.1
+  resolution: "sass-embedded@npm:1.79.1"
+  dependencies:
+    "@bufbuild/protobuf": "npm:^2.0.0"
+    buffer-builder: "npm:^0.2.0"
+    colorjs.io: "npm:^0.5.0"
+    immutable: "npm:^4.0.0"
+    rxjs: "npm:^7.4.0"
+    sass-embedded-android-arm: "npm:1.79.1"
+    sass-embedded-android-arm64: "npm:1.79.1"
+    sass-embedded-android-ia32: "npm:1.79.1"
+    sass-embedded-android-riscv64: "npm:1.79.1"
+    sass-embedded-android-x64: "npm:1.79.1"
+    sass-embedded-darwin-arm64: "npm:1.79.1"
+    sass-embedded-darwin-x64: "npm:1.79.1"
+    sass-embedded-linux-arm: "npm:1.79.1"
+    sass-embedded-linux-arm64: "npm:1.79.1"
+    sass-embedded-linux-ia32: "npm:1.79.1"
+    sass-embedded-linux-musl-arm: "npm:1.79.1"
+    sass-embedded-linux-musl-arm64: "npm:1.79.1"
+    sass-embedded-linux-musl-ia32: "npm:1.79.1"
+    sass-embedded-linux-musl-riscv64: "npm:1.79.1"
+    sass-embedded-linux-musl-x64: "npm:1.79.1"
+    sass-embedded-linux-riscv64: "npm:1.79.1"
+    sass-embedded-linux-x64: "npm:1.79.1"
+    sass-embedded-win32-arm64: "npm:1.79.1"
+    sass-embedded-win32-ia32: "npm:1.79.1"
+    sass-embedded-win32-x64: "npm:1.79.1"
+    supports-color: "npm:^8.1.1"
+    varint: "npm:^6.0.0"
+  dependenciesMeta:
+    sass-embedded-android-arm:
+      optional: true
+    sass-embedded-android-arm64:
+      optional: true
+    sass-embedded-android-ia32:
+      optional: true
+    sass-embedded-android-riscv64:
+      optional: true
+    sass-embedded-android-x64:
+      optional: true
+    sass-embedded-darwin-arm64:
+      optional: true
+    sass-embedded-darwin-x64:
+      optional: true
+    sass-embedded-linux-arm:
+      optional: true
+    sass-embedded-linux-arm64:
+      optional: true
+    sass-embedded-linux-ia32:
+      optional: true
+    sass-embedded-linux-musl-arm:
+      optional: true
+    sass-embedded-linux-musl-arm64:
+      optional: true
+    sass-embedded-linux-musl-ia32:
+      optional: true
+    sass-embedded-linux-musl-riscv64:
+      optional: true
+    sass-embedded-linux-musl-x64:
+      optional: true
+    sass-embedded-linux-riscv64:
+      optional: true
+    sass-embedded-linux-x64:
+      optional: true
+    sass-embedded-win32-arm64:
+      optional: true
+    sass-embedded-win32-ia32:
+      optional: true
+    sass-embedded-win32-x64:
+      optional: true
+  bin:
+    sass: dist/bin/sass.js
+  checksum: 10/e276ef14414dbac30007b46e2ef7ad7b0a7756005b1df9ae9224cd7db39b5ec42c2e6a742daa737d861f0eac898f18d934d45b1d675038fb4218b98432042e5d
+  languageName: node
+  linkType: hard
+
 "sass@npm:^1.32.8, sass@npm:^1.49.0, sass@npm:^1.49.8, sass@npm:^1.50.0":
   version: 1.68.0
   resolution: "sass@npm:1.68.0"
@@ -33929,7 +34179,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^8.0.0":
+"supports-color@npm:^8.0.0, supports-color@npm:^8.1.1":
   version: 8.1.1
   resolution: "supports-color@npm:8.1.1"
   dependencies:
@@ -35789,21 +36039,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:1.2.0, use-sync-external-store@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "use-sync-external-store@npm:1.2.0"
+"use-sync-external-store@npm:1.2.2, use-sync-external-store@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "use-sync-external-store@npm:1.2.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/a676216affc203876bd47981103f201f28c2731361bb186367e12d287a7566763213a8816910c6eb88265eccd4c230426eb783d64c373c4a180905be8820ed8e
+  checksum: 10/671e9c190aab9a8374a5d468c6ba17f52c38b6fae970110bc196fc1e2b57204149aea9619be49a1bb5207fb6e51d8afd19c3bcb94afe61813fed039821461dc0
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.2.0":
-  version: 1.2.2
-  resolution: "use-sync-external-store@npm:1.2.2"
+"use-sync-external-store@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/671e9c190aab9a8374a5d468c6ba17f52c38b6fae970110bc196fc1e2b57204149aea9619be49a1bb5207fb6e51d8afd19c3bcb94afe61813fed039821461dc0
+  checksum: 10/a676216affc203876bd47981103f201f28c2731361bb186367e12d287a7566763213a8816910c6eb88265eccd4c230426eb783d64c373c4a180905be8820ed8e
   languageName: node
   linkType: hard
 
@@ -35970,6 +36220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"varint@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "varint@npm:6.0.0"
+  checksum: 10/7684113c9d497c01e40396e50169c502eb2176203219b96e1c5ac965a3e15b4892bd22b7e48d87148e10fffe638130516b6dbeedd0efde2b2d0395aa1772eea7
+  languageName: node
+  linkType: hard
+
 "vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -37285,10 +37542,10 @@ __metadata:
   linkType: hard
 
 "zustand@npm:^4.5.1":
-  version: 4.5.1
-  resolution: "zustand@npm:4.5.1"
+  version: 4.5.5
+  resolution: "zustand@npm:4.5.5"
   dependencies:
-    use-sync-external-store: "npm:1.2.0"
+    use-sync-external-store: "npm:1.2.2"
   peerDependencies:
     "@types/react": ">=16.8"
     immer: ">=9.0.6"
@@ -37300,7 +37557,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 10/c5dcd734ddcc393bc1febcf1811d606222c6d40cb4cf0e4d605be6cfa1855c8b09b6725ab6b73a395f1e020f8f617b605c800c1f19301b240c45d5042e1b2a10
+  checksum: 10/481b8210187b69678074a1ca51107654c2379688e90407bfcb7961e0803a259742bfd0d77171c3f07e290896ad55fe9659b3863f30d34cb2572650ead1249f25
   languageName: node
   linkType: hard