@vitessce/statistical-plots 4.0.7 → 4.0.9

package/dist/{index-CFje_HC1.js → index-DySLEwfl.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useContext, useRef, useEffect, forwardRef as forwardRef$1, useMemo, createContext, createElement, isValidElement, cloneElement, Children, PureComponent, Suspense, useCallback } from "react";
-import { usePlotOptionsStyles, OptionsContainer, OptionSelect, useLoaders, useCoordinationScopes, useCoordination, useGridItemSize, useFeatureSelection, useFeatureLabelsData, useExpandedFeatureLabelsMap, useObsFeatureMatrixIndices, useObsSetsData, useSampleSetsData, useSampleEdgesData, useReady, useUrls, TitleInfo, useObsFeatureMatrixData, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData } from "@vitessce/vit-s";
+import { usePlotOptionsStyles, OptionsContainer, OptionSelect, useLoaders, useCoordinationScopes, useCoordination, useGridItemSize, useFeatureSelection, useFeatureLabelsData, useExpandedFeatureLabelsMap, useObsFeatureMatrixIndices, useObsSetsData, useSampleSetsData, useSampleEdgesData, useReady, useUrls, TitleInfo, useObsFeatureMatrixData, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useMultiCoordinationScopes } from "@vitessce/vit-s";
 import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
@@ -53,7 +53,9 @@ const ViewType$1 = {
   DUAL_SCATTERPLOT: "dualScatterplot",
   TREEMAP: "treemap",
   SAMPLE_SET_PAIR_MANAGER: "sampleSetPairManager",
-  FEATURE_STATS_TABLE: "featureStatsTable"
+  FEATURE_STATS_TABLE: "featureStatsTable",
+  SINGLE_OBS_SET_SELECTOR: "singleObsSetSelector",
+  ANNOTATION_CONTROLLER: "annotationController"
 };
 const DataType$2 = {
   OBS_LABELS: "obsLabels",
@@ -74,7 +76,8 @@ const DataType$2 = {
   COMPARISON_METADATA: "comparisonMetadata",
   FEATURE_STATS: "featureStats",
   FEATURE_SET_STATS: "featureSetStats",
-  OBS_SET_STATS: "obsSetStats"
+  OBS_SET_STATS: "obsSetStats",
+  ANNOTATION_STORY: "annotationStory"
 };
 const AsyncFunctionType = {
   TRANSFORM_FEATURE: "transformFeature"
@@ -99,6 +102,7 @@ const FileType$1 = {
   OBS_SETS_CSV: "obsSets.csv",
   OBS_SETS_JSON: "obsSets.json",
   SAMPLE_SETS_CSV: "sampleSets.csv",
+  ANNOTATION_STORY_JSON: "annotationStory.json",
   // OME-Zarr
   IMAGE_OME_ZARR: "image.ome-zarr",
   OBS_SEGMENTATIONS_OME_ZARR: "obsSegmentations.ome-zarr",
@@ -383,7 +387,15 @@ const CoordinationType$1 = {
   FEATURE_POINT_FOLD_CHANGE_THRESHOLD: "featurePointFoldChangeThreshold",
   FEATURE_LABEL_FOLD_CHANGE_THRESHOLD: "featureLabelFoldChangeThreshold",
   // Treemap
-  HIERARCHY_LEVELS: "hierarchyLevels"
+  HIERARCHY_LEVELS: "hierarchyLevels",
+  // Annotation frames
+  ANNOTATION_STORY: "annotationStory",
+  ANNOTATION_FRAME_INDEX: "annotationFrameIndex",
+  ANNOTATION_SHAPES: "annotationShapes",
+  ANNOTATION_OVERLAY_VISIBLE: "annotationOverlayVisible",
+  ANNOTATION_TRANSITION_DURATION: "annotationTransitionDuration",
+  ANNOTATION_SEMANTIC_ZOOM: "annotationSemanticZoom",
+  ANNOTATION_EDITABLE: "annotationEditable"
 };
 const ViewHelpMapping = {
   OBS_SET_SIZES: "The observation set sizes view displays a bar plot with the currently-selected observation sets (e.g., cell types) on the x-axis and bars representing their size (e.g., number of cells) on the y-axis.",
@@ -411,6 +423,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_SEGMENTATIONS_JSON]: DataType$2.OBS_SEGMENTATIONS,
   [FileType$1.OBS_SETS_CSV]: DataType$2.OBS_SETS,
   [FileType$1.OBS_SETS_JSON]: DataType$2.OBS_SETS,
+  [FileType$1.ANNOTATION_STORY_JSON]: DataType$2.ANNOTATION_STORY,
   [FileType$1.IMAGE_OME_ZARR]: DataType$2.IMAGE,
   [FileType$1.OBS_SEGMENTATIONS_OME_ZARR]: DataType$2.OBS_SEGMENTATIONS,
   [FileType$1.OBS_FEATURE_MATRIX_ANNDATA_ZARR]: DataType$2.OBS_FEATURE_MATRIX,
@@ -533,7 +546,8 @@ const ViewHelpMapping = {
   [DataType$2.OBS_SET_STATS]: [
     CoordinationType$1.OBS_TYPE
     // TODO: should sampleType, obsSetSelection, and/or sampleSetSelection be used here?
-  ]
+  ],
+  [DataType$2.ANNOTATION_STORY]: []
 });
 ({
   // For AnnData:
@@ -666,7 +680,9 @@ const ViewHelpMapping = {
   CoordinationType$1.SPATIAL_TARGET_Z,
   CoordinationType$1.SPATIAL_AXIS_FIXED,
   CoordinationType$1.SPATIAL_ORBIT_AXIS,
-  CoordinationType$1.FEATURE_AGGREGATION_STRATEGY
+  CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
+  // Annotation shapes are specific to a view's coordinate system.
+  CoordinationType$1.ANNOTATION_SHAPES
 ];
 const COMPONENT_COORDINATION_TYPES = {
   [ViewType$1.NEUROGLANCER]: [
@@ -758,7 +774,14 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.EMBEDDING_CONTOURS_FILLED,
     CoordinationType$1.EMBEDDING_CONTOUR_PERCENTILES,
     CoordinationType$1.CONTOUR_COLOR_ENCODING,
-    CoordinationType$1.CONTOUR_COLOR
+    CoordinationType$1.CONTOUR_COLOR,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
   ],
   [ViewType$1.DUAL_SCATTERPLOT]: [
     CoordinationType$1.DATASET,
@@ -874,7 +897,14 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.MOLECULE_HIGHLIGHT,
     CoordinationType$1.TOOLTIPS_VISIBLE,
-    CoordinationType$1.PHOTOMETRIC_INTERPRETATION
+    CoordinationType$1.PHOTOMETRIC_INTERPRETATION,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
   ],
   [ViewType$1.SPATIAL_BETA]: [
     CoordinationType$1.META_COORDINATION_SCOPES,
@@ -952,7 +982,27 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
     CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
     CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER,
-    CoordinationType$1.PHOTOMETRIC_INTERPRETATION
+    CoordinationType$1.PHOTOMETRIC_INTERPRETATION,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
+  ],
+  [ViewType$1.ANNOTATION_CONTROLLER]: [
+    CoordinationType$1.DATASET,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
+    // Note: the annotation controller also needs to read the coordination state
+    // of all other views/coordination types via the full config.
+    // Note: we get/set the CoordinationType.ANNOTATION_SHAPES from the full config,
+    // as this info is view-specific rather than global to the story.
   ],
   [ViewType$1.HEATMAP]: [
     CoordinationType$1.DATASET,
@@ -1262,6 +1312,11 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_POINT_FOLD_CHANGE_THRESHOLD,
     CoordinationType$1.FEATURE_LABEL_FOLD_CHANGE_THRESHOLD
   ],
+  [ViewType$1.SINGLE_OBS_SET_SELECTOR]: [
+    CoordinationType$1.OBS_TYPE,
+    CoordinationType$1.OBS_SET_COLOR,
+    CoordinationType$1.OBS_SET_SELECTION
+  ],
   [ViewType$1.OBS_SET_COMPOSITION_BAR_PLOT]: [
     CoordinationType$1.DATASET,
     CoordinationType$1.OBS_TYPE,
@@ -8673,7 +8728,7 @@ const latestFileDefSchema = z.object({
   options: fileOptionsSchema.optional(),
   requestInit: requestInit.optional(),
   // New: file def can have coordinationValues.
-  coordinationValues: z.record(z.string()).optional()
+  coordinationValues: z.record(z.any()).optional()
 });
 const datasetsSchema1_0_13 = z.array(z.object({
   uid: z.string(),
@@ -8704,7 +8759,8 @@ const configSchema1_0_16 = configSchema1_0_13.extend({
     h: z.number().int().optional(),
     // Updates coordinationScopes and coordinationScopesBy
     coordinationScopes: componentCoordinationScopes.optional(),
-    coordinationScopesBy: componentCoordinationScopesBy.optional()
+    coordinationScopesBy: componentCoordinationScopesBy.optional(),
+    coordinationValues: z.record(z.any()).optional()
   }))
 });
 const configSchema1_0_17 = configSchema1_0_16.extend({
@@ -11789,6 +11845,124 @@ z.object({
   radius: z.number(),
   opacity: z.number()
 });
+const shapeBaseObj = z.object({
+  uid: z.string(),
+  text: z.string().optional(),
+  strokeColor: z.array(z.number()).length(3).optional(),
+  strokeWidth: z.number().optional(),
+  // SVG-style dash pattern, e.g. "10 5" or "10 20 30 10". "none" or omitted = solid.
+  strokeDashArray: z.string().optional(),
+  visible: z.boolean().optional()
+  // TODO: define unit modes for x and y axes
+  // ("pixels" vs "normalized" vs "physical" etc.)
+  // TODO: a coordinate system identifier (e.g., "DeckGL" for now,
+  // but a coordinate system from OME-NGFF/SpatialData eventually?)
+});
+const rectangleShapeObj = shapeBaseObj.extend({
+  type: z.literal("rectangle"),
+  // OME-XML field names verbatim (upper-left origin)
+  x: z.number(),
+  y: z.number(),
+  width: z.number(),
+  height: z.number(),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const lineShapeObj = shapeBaseObj.extend({
+  type: z.literal("line"),
+  // OME-XML field names verbatim
+  x1: z.number(),
+  y1: z.number(),
+  x2: z.number(),
+  y2: z.number(),
+  markerStart: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  markerEnd: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  textPosition: z.enum(["start", "middle", "end"]).optional(),
+  textBufferPx: z.number().optional()
+});
+const ellipseShapeObj = shapeBaseObj.extend({
+  type: z.literal("ellipse"),
+  // OME-XML field names verbatim (centre point + radii)
+  x1: z.number(),
+  y1: z.number(),
+  radiusX: z.number(),
+  radiusY: z.number(),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const polygonShapeObj = shapeBaseObj.extend({
+  type: z.literal("polygon"),
+  // OME-XML: array of [x, y] coordinate pairs, closed automatically
+  points: z.array(z.tuple([z.number(), z.number()])),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const polylineShapeObj = shapeBaseObj.extend({
+  type: z.literal("polyline"),
+  // OME-XML: array of [x, y] coordinate pairs, open (not closed)
+  points: z.array(z.tuple([z.number(), z.number()])),
+  markerStart: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  markerEnd: z.enum(["Arrow", "Tick"]).nullable().optional()
+});
+const annotationShapeObj = z.discriminatedUnion("type", [
+  rectangleShapeObj,
+  lineShapeObj,
+  ellipseShapeObj,
+  polygonShapeObj,
+  polylineShapeObj
+]);
+z.array(annotationShapeObj);
+const annotationFrameObj = z.object({
+  uid: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  descriptionType: z.enum(["text", "markdown"]).optional(),
+  // A frame can define per-view: coordinationValues
+  // (if the view's state should not be coordinated with other views)
+  // or per-view coordinationScopes/coordinationScopesBy
+  // (if at this frame, the view should be coordinated with other views).
+  // We can also define a frame-level coordination space,
+  // which will be merged with the global coordination space.
+  // TODO: datasets
+  // TODO: coordinationSpace
+  layout: z.array(
+    // Note: for now, we will infer view objects which have a uid
+    // that is present in the global layout, and do NOT have x/y/w/h defined,
+    // to mean that in this frame, the layout and set of views is unchanged
+    // from the global layout.
+    // This will allow each frame to omit the full list of views from the layout,
+    // and only specify the views whose coordination state is changing in this frame.
+    // If a frame includes a view with a uid that is not present
+    // in the global layout, then that view will be added to the layout at this frame.
+    // This frame should also define x/y/w/h for all views,
+    // since it will otherwise be ambiguous how to layout the updated set of views
+    // for this frame.
+    z.object({
+      // The view UID. If this view uid is not present in the global layout,
+      // it will be added to the layout at this frame,
+      // and will need to have its coordination values initialized to their defaults
+      // for any that were not fully specified.
+      uid: z.string(),
+      coordinationValues: z.record(
+        z.string(),
+        // The coordination type name, e.g. "embeddingType"
+        z.any()
+      ).optional()
+      // TODO: support coordinationScopes/coordinationScopesBy for per-view coordination
+      // at this frame.
+      // TODO: view x/y/w/h once we support view layout changes per-frame.
+    })
+  ).optional()
+});
+z.object({
+  // TODO: schema version for the story schema?
+  // Same as current Vitessce schema version?
+  uid: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  descriptionType: z.enum(["text", "markdown"]).optional(),
+  frames: z.array(annotationFrameObj)
+});
 const SETS_DATATYPE_OBS = "obs";
 const HIERARCHICAL_SCHEMAS = {
   latestVersion: "0.1.3"
@@ -18378,7 +18552,7 @@ function useThemeProps$1({
   themeId
 }) {
   let theme = useTheme$1(defaultTheme2);
-  {
+  if (themeId) {
     theme = theme[themeId] || theme;
   }
   return getThemeProps$1({
@@ -18972,6 +19146,400 @@ function isMuiElement(element2, muiNames) {
     element2.type.muiName ?? element2.type?._payload?.value?.muiName
   ) !== -1;
 }
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter((key2) => responsiveKeys.includes(key2));
+const traverseBreakpoints = (breakpoints2, responsive, iterator) => {
+  const smallestBreakpoint = breakpoints2.keys[0];
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index2) => {
+      iterator((responsiveStyles, style2) => {
+        if (index2 <= breakpoints2.keys.length - 1) {
+          if (index2 === 0) {
+            Object.assign(responsiveStyles, style2);
+          } else {
+            responsiveStyles[breakpoints2.up(breakpoints2.keys[index2])] = style2;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && typeof responsive === "object") {
+    const keys2 = Object.keys(responsive).length > breakpoints2.keys.length ? breakpoints2.keys : filterBreakpointKeys(breakpoints2.keys, Object.keys(responsive));
+    keys2.forEach((key2) => {
+      if (breakpoints2.keys.includes(key2)) {
+        const breakpointValue = responsive[key2];
+        if (breakpointValue !== void 0) {
+          iterator((responsiveStyles, style2) => {
+            if (smallestBreakpoint === key2) {
+              Object.assign(responsiveStyles, style2);
+            } else {
+              responsiveStyles[breakpoints2.up(key2)] = style2;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === "number" || typeof responsive === "string") {
+    iterator((responsiveStyles, style2) => {
+      Object.assign(responsiveStyles, style2);
+    }, responsive);
+  }
+};
+function getSelfSpacingVar(axis2) {
+  return `--Grid-${axis2}Spacing`;
+}
+function getParentSpacingVar(axis2) {
+  return `--Grid-parent-${axis2}Spacing`;
+}
+const selfColumnsVar = "--Grid-columns";
+const parentColumnsVar = "--Grid-parent-columns";
+const generateGridSizeStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles2 = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value2) => {
+    let style2 = {};
+    if (value2 === "grow") {
+      style2 = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: "100%"
+      };
+    }
+    if (value2 === "auto") {
+      style2 = {
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: "none",
+        width: "auto"
+      };
+    }
+    if (typeof value2 === "number") {
+      style2 = {
+        flexGrow: 0,
+        flexBasis: "auto",
+        width: `calc(100% * ${value2} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value2}) * (var(${getParentSpacingVar("column")}) / var(${parentColumnsVar})))`
+      };
+    }
+    appendStyle(styles2, style2);
+  });
+  return styles2;
+};
+const generateGridOffsetStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles2 = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value2) => {
+    let style2 = {};
+    if (value2 === "auto") {
+      style2 = {
+        marginLeft: "auto"
+      };
+    }
+    if (typeof value2 === "number") {
+      style2 = {
+        marginLeft: value2 === 0 ? "0px" : `calc(100% * ${value2} / var(${parentColumnsVar}) + var(${getParentSpacingVar("column")}) * ${value2} / var(${parentColumnsVar}))`
+      };
+    }
+    appendStyle(styles2, style2);
+  });
+  return styles2;
+};
+const generateGridColumnsStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+  const styles2 = {
+    [selfColumnsVar]: 12
+  };
+  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value2) => {
+    const columns = value2 ?? 12;
+    appendStyle(styles2, {
+      [selfColumnsVar]: columns,
+      "> *": {
+        [parentColumnsVar]: columns
+      }
+    });
+  });
+  return styles2;
+};
+const generateGridRowSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+  const styles2 = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value2) => {
+    const spacing2 = typeof value2 === "string" ? value2 : theme.spacing?.(value2);
+    appendStyle(styles2, {
+      [getSelfSpacingVar("row")]: spacing2,
+      "> *": {
+        [getParentSpacingVar("row")]: spacing2
+      }
+    });
+  });
+  return styles2;
+};
+const generateGridColumnSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+  const styles2 = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value2) => {
+    const spacing2 = typeof value2 === "string" ? value2 : theme.spacing?.(value2);
+    appendStyle(styles2, {
+      [getSelfSpacingVar("column")]: spacing2,
+      "> *": {
+        [getParentSpacingVar("column")]: spacing2
+      }
+    });
+  });
+  return styles2;
+};
+const generateGridDirectionStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+  const styles2 = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value2) => {
+    appendStyle(styles2, {
+      flexDirection: value2
+    });
+  });
+  return styles2;
+};
+const generateGridStyles = ({
+  ownerState
+}) => {
+  return {
+    minWidth: 0,
+    boxSizing: "border-box",
+    ...ownerState.container && {
+      display: "flex",
+      flexWrap: "wrap",
+      ...ownerState.wrap && ownerState.wrap !== "wrap" && {
+        flexWrap: ownerState.wrap
+      },
+      gap: `var(${getSelfSpacingVar("row")}) var(${getSelfSpacingVar("column")})`
+    }
+  };
+};
+const generateSizeClassNames = (size2) => {
+  const classNames = [];
+  Object.entries(size2).forEach(([key2, value2]) => {
+    if (value2 !== false && value2 !== void 0) {
+      classNames.push(`grid-${key2}-${String(value2)}`);
+    }
+  });
+  return classNames;
+};
+const generateSpacingClassNames = (spacing2, smallestBreakpoint = "xs") => {
+  function isValidSpacing(val) {
+    if (val === void 0) {
+      return false;
+    }
+    return typeof val === "string" && !Number.isNaN(Number(val)) || typeof val === "number" && val > 0;
+  }
+  if (isValidSpacing(spacing2)) {
+    return [`spacing-${smallestBreakpoint}-${String(spacing2)}`];
+  }
+  if (typeof spacing2 === "object" && !Array.isArray(spacing2)) {
+    const classNames = [];
+    Object.entries(spacing2).forEach(([key2, value2]) => {
+      if (isValidSpacing(value2)) {
+        classNames.push(`spacing-${key2}-${String(value2)}`);
+      }
+    });
+    return classNames;
+  }
+  return [];
+};
+const generateDirectionClasses = (direction) => {
+  if (direction === void 0) {
+    return [];
+  }
+  if (typeof direction === "object") {
+    return Object.entries(direction).map(([key2, value2]) => `direction-${key2}-${value2}`);
+  }
+  return [`direction-xs-${String(direction)}`];
+};
+const getLegacyGridWarning = (propName) => {
+  if (["item", "zeroMinWidth"].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+function deleteLegacyGridProps(props, breakpoints2) {
+  const propsToWarn = [];
+  if (props.item !== void 0) {
+    delete props.item;
+    propsToWarn.push("item");
+  }
+  if (props.zeroMinWidth !== void 0) {
+    delete props.zeroMinWidth;
+    propsToWarn.push("zeroMinWidth");
+  }
+  breakpoints2.keys.forEach((breakpoint) => {
+    if (props[breakpoint] !== void 0) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  {
+    propsToWarn.forEach((prop) => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}
+`);
+      }
+    });
+  }
+}
+const defaultTheme$1 = createTheme$1();
+const defaultCreateStyledComponent = styled$1("div", {
+  name: "MuiGrid",
+  slot: "Root"
+});
+function useThemePropsDefault(props) {
+  return useThemeProps$1({
+    props,
+    name: "MuiGrid",
+    defaultTheme: defaultTheme$1
+  });
+}
+function createGrid(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps: useThemeProps2 = useThemePropsDefault,
+    useTheme: useTheme2 = useTheme$1,
+    componentName = "MuiGrid"
+  } = options;
+  const useUtilityClasses2 = (ownerState, theme) => {
+    const {
+      container,
+      direction,
+      spacing: spacing2,
+      wrap: wrap2,
+      size: size2
+    } = ownerState;
+    const slots = {
+      root: ["root", container && "container", wrap2 !== "wrap" && `wrap-xs-${String(wrap2)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size2), ...container ? generateSpacingClassNames(spacing2, theme.breakpoints.keys[0]) : []]
+    };
+    return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
+  };
+  function parseResponsiveProp(propValue, breakpoints2, shouldUseValue = () => true) {
+    const parsedProp = {};
+    if (propValue === null) {
+      return parsedProp;
+    }
+    if (Array.isArray(propValue)) {
+      propValue.forEach((value2, index2) => {
+        if (value2 !== null && shouldUseValue(value2) && breakpoints2.keys[index2]) {
+          parsedProp[breakpoints2.keys[index2]] = value2;
+        }
+      });
+    } else if (typeof propValue === "object") {
+      Object.keys(propValue).forEach((key2) => {
+        const value2 = propValue[key2];
+        if (value2 !== null && value2 !== void 0 && shouldUseValue(value2)) {
+          parsedProp[key2] = value2;
+        }
+      });
+    } else {
+      parsedProp[breakpoints2.keys[0]] = propValue;
+    }
+    return parsedProp;
+  }
+  const GridRoot3 = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
+  const Grid2 = /* @__PURE__ */ React.forwardRef(function Grid22(inProps, ref2) {
+    const theme = useTheme2();
+    const themeProps = useThemeProps2(inProps);
+    const props = extendSxProp$1(themeProps);
+    deleteLegacyGridProps(props, theme.breakpoints);
+    const {
+      className,
+      children: children2,
+      columns: columnsProp = 12,
+      container = false,
+      component = "div",
+      direction = "row",
+      wrap: wrap2 = "wrap",
+      size: sizeProp = {},
+      offset: offsetProp = {},
+      spacing: spacingProp = 0,
+      rowSpacing: rowSpacingProp = spacingProp,
+      columnSpacing: columnSpacingProp = spacingProp,
+      unstable_level: level = 0,
+      ...other
+    } = props;
+    const size2 = parseResponsiveProp(sizeProp, theme.breakpoints, (val) => val !== false);
+    const offset2 = parseResponsiveProp(offsetProp, theme.breakpoints);
+    const columns = inProps.columns ?? (level ? void 0 : columnsProp);
+    const spacing2 = inProps.spacing ?? (level ? void 0 : spacingProp);
+    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? void 0 : rowSpacingProp);
+    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? void 0 : columnSpacingProp);
+    const ownerState = {
+      ...props,
+      level,
+      columns,
+      container,
+      direction,
+      wrap: wrap2,
+      spacing: spacing2,
+      rowSpacing,
+      columnSpacing,
+      size: size2,
+      offset: offset2
+    };
+    const classes2 = useUtilityClasses2(ownerState, theme);
+    return /* @__PURE__ */ jsx$1(GridRoot3, {
+      ref: ref2,
+      as: component,
+      ownerState,
+      className: clsx(classes2.root, className),
+      ...other,
+      children: React.Children.map(children2, (child) => {
+        if (/* @__PURE__ */ React.isValidElement(child) && isMuiElement(child, ["Grid"]) && container && child.props.container) {
+          return /* @__PURE__ */ React.cloneElement(child, {
+            unstable_level: child.props?.unstable_level ?? level + 1
+          });
+        }
+        return child;
+      })
+    });
+  });
+  Grid2.propTypes = {
+    children: _pt.node,
+    className: _pt.string,
+    columns: _pt.oneOfType([_pt.arrayOf(_pt.number), _pt.number, _pt.object]),
+    columnSpacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+    component: _pt.elementType,
+    container: _pt.bool,
+    direction: _pt.oneOfType([_pt.oneOf(["column-reverse", "column", "row-reverse", "row"]), _pt.arrayOf(_pt.oneOf(["column-reverse", "column", "row-reverse", "row"])), _pt.object]),
+    offset: _pt.oneOfType([_pt.string, _pt.number, _pt.arrayOf(_pt.oneOfType([_pt.string, _pt.number])), _pt.object]),
+    rowSpacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+    size: _pt.oneOfType([_pt.string, _pt.bool, _pt.number, _pt.arrayOf(_pt.oneOfType([_pt.string, _pt.bool, _pt.number])), _pt.object]),
+    spacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+    sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object]),
+    wrap: _pt.oneOf(["nowrap", "wrap-reverse", "wrap"])
+  };
+  Grid2.muiName = "Grid";
+  return Grid2;
+}
 const common$2 = {
   black: "#000",
   white: "#fff"
@@ -20302,7 +20870,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$1m = (ownerState) => {
+const useUtilityClasses$1n = (ownerState) => {
   const {
     color: color2,
     fontSize: fontSize2,
@@ -20441,7 +21009,7 @@ const SvgIcon = /* @__PURE__ */ React.forwardRef(function SvgIcon2(inProps, ref2
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes2 = useUtilityClasses$1m(ownerState);
+  const classes2 = useUtilityClasses$1n(ownerState);
   return /* @__PURE__ */ jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes2.root, className),
@@ -20568,6 +21136,26 @@ function ownerWindow(node2) {
   const doc = ownerDocument(node2);
   return doc.defaultView || window;
 }
+function requirePropFactory(componentNameInError, Component2) {
+  const prevPropTypes = Component2 ? {
+    ...Component2.propTypes
+  } : null;
+  const requireProp = (requiredProp) => (props, propName, componentName, location, propFullName, ...args) => {
+    const propFullNameSafe = propFullName || propName;
+    const defaultTypeChecker = prevPropTypes?.[propFullNameSafe];
+    if (defaultTypeChecker) {
+      const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);
+      if (typeCheckerResult) {
+        return typeCheckerResult;
+      }
+    }
+    if (typeof props[propName] !== "undefined" && !props[requiredProp]) {
+      return new Error(`The prop \`${propFullNameSafe}\` of \`${componentNameInError}\` can only be used together with the \`${requiredProp}\` prop.`);
+    }
+    return null;
+  };
+  return requireProp;
+}
 function setRef$1(ref2, value2) {
   if (typeof ref2 === "function") {
     ref2(value2);
@@ -21325,7 +21913,7 @@ var values$5 = Object.values || function(obj) {
     return obj[k];
   });
 };
-var defaultProps$P = {
+var defaultProps$Q = {
   component: "div",
   childFactory: function childFactory(child) {
     return child;
@@ -21452,7 +22040,7 @@ TransitionGroup.propTypes = {
    */
   childFactory: _pt.func
 };
-TransitionGroup.defaultProps = defaultProps$P;
+TransitionGroup.defaultProps = defaultProps$Q;
 const UNINITIALIZED = {};
 function useLazyRef(init2, initArg) {
   const ref2 = React.useRef(UNINITIALIZED);
@@ -21582,7 +22170,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$1l = (ownerState) => {
+const useUtilityClasses$1m = (ownerState) => {
   const {
     square: square2,
     elevation,
@@ -21654,7 +22242,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref2) {
     square: square2,
     variant
   };
-  const classes2 = useUtilityClasses$1l(ownerState);
+  const classes2 = useUtilityClasses$1m(ownerState);
   {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -22331,7 +22919,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$1k = (ownerState) => {
+const useUtilityClasses$1l = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -22547,7 +23135,7 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
     tabIndex,
     focusVisible
   };
-  const classes2 = useUtilityClasses$1k(ownerState);
+  const classes2 = useUtilityClasses$1l(ownerState);
   return /* @__PURE__ */ jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes2.root, className),
@@ -22799,7 +23387,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$1j = (ownerState) => {
+const useUtilityClasses$1k = (ownerState) => {
   const {
     classes: classes2,
     variant,
@@ -22921,7 +23509,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     value: value2,
     variant
   };
-  const classes2 = useUtilityClasses$1j(ownerState);
+  const classes2 = useUtilityClasses$1k(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -23030,7 +23618,7 @@ function getIconButtonUtilityClass(slot) {
   return generateUtilityClass("MuiIconButton", slot);
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$1i = (ownerState) => {
+const useUtilityClasses$1j = (ownerState) => {
   const {
     classes: classes2,
     disabled,
@@ -23215,7 +23803,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton2(inProps
     loadingIndicator,
     size: size2
   };
-  const classes2 = useUtilityClasses$1i(ownerState);
+  const classes2 = useUtilityClasses$1j(ownerState);
   return /* @__PURE__ */ jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes2.root, className),
@@ -25748,7 +26336,7 @@ function isHTMLElement(element2) {
 function isVirtualElement(element2) {
   return !isHTMLElement(element2);
 }
-const useUtilityClasses$1h = (ownerState) => {
+const useUtilityClasses$1i = (ownerState) => {
   const {
     classes: classes2
   } = ownerState;
@@ -25857,7 +26445,7 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes2 = useUtilityClasses$1h(props);
+  const classes2 = useUtilityClasses$1i(props);
   const Root = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root,
@@ -26256,7 +26844,7 @@ function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass("MuiListSubheader", slot);
 }
 generateUtilityClasses("MuiListSubheader", ["root", "colorPrimary", "colorInherit", "gutters", "inset", "sticky"]);
-const useUtilityClasses$1g = (ownerState) => {
+const useUtilityClasses$1h = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -26351,7 +26939,7 @@ const ListSubheader = /* @__PURE__ */ React.forwardRef(function ListSubheader2(i
     disableSticky,
     inset
   };
-  const classes2 = useUtilityClasses$1g(ownerState);
+  const classes2 = useUtilityClasses$1h(ownerState);
   return /* @__PURE__ */ jsx$1(ListSubheaderRoot, {
     as: component,
     className: clsx(classes2.root, className),
@@ -26417,7 +27005,7 @@ function getChipUtilityClass(slot) {
   return generateUtilityClass("MuiChip", slot);
 }
 const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
-const useUtilityClasses$1f = (ownerState) => {
+const useUtilityClasses$1g = (ownerState) => {
   const {
     classes: classes2,
     disabled,
@@ -26808,7 +27396,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref2) {
     clickable,
     variant
   };
-  const classes2 = useUtilityClasses$1f(ownerState);
+  const classes2 = useUtilityClasses$1g(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes2.focusVisible,
@@ -27228,7 +27816,7 @@ const inputOverridesResolver = (props, styles2) => {
   } = props;
   return [styles2.input, ownerState.size === "small" && styles2.inputSizeSmall, ownerState.multiline && styles2.inputMultiline, ownerState.type === "search" && styles2.inputTypeSearch, ownerState.startAdornment && styles2.inputAdornedStart, ownerState.endAdornment && styles2.inputAdornedEnd, ownerState.hiddenLabel && styles2.inputHiddenLabel];
 };
-const useUtilityClasses$1e = (ownerState) => {
+const useUtilityClasses$1f = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -27632,7 +28220,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
     startAdornment,
     type: type2
   };
-  const classes2 = useUtilityClasses$1e(ownerState);
+  const classes2 = useUtilityClasses$1f(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input3 = slots.input || components.Input || InputBaseInput;
@@ -27953,7 +28541,7 @@ function getAutocompleteUtilityClass(slot) {
 }
 const autocompleteClasses = generateUtilityClasses("MuiAutocomplete", ["root", "expanded", "fullWidth", "focused", "focusVisible", "tag", "tagSizeSmall", "tagSizeMedium", "hasPopupIcon", "hasClearIcon", "inputRoot", "input", "inputFocused", "endAdornment", "clearIndicator", "popupIndicator", "popupIndicatorOpen", "popper", "popperDisablePortal", "paper", "listbox", "loading", "noOptions", "option", "groupLabel", "groupUl"]);
 var _ClearIcon, _ArrowDropDownIcon;
-const useUtilityClasses$1d = (ownerState) => {
+const useUtilityClasses$1e = (ownerState) => {
   const {
     classes: classes2,
     disablePortal,
@@ -28442,7 +29030,7 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     popupOpen,
     size: size2
   };
-  const classes2 = useUtilityClasses$1d(ownerState);
+  const classes2 = useUtilityClasses$1e(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -29116,7 +29704,7 @@ const ButtonGroupButtonContext = /* @__PURE__ */ React.createContext(void 0);
 {
   ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
 }
-const useUtilityClasses$1c = (ownerState) => {
+const useUtilityClasses$1d = (ownerState) => {
   const {
     color: color2,
     disableElevation,
@@ -29616,7 +30204,7 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref2)
     type: type2,
     variant
   };
-  const classes2 = useUtilityClasses$1c(ownerState);
+  const classes2 = useUtilityClasses$1d(ownerState);
   const startIcon = (startIconProp || loading && loadingPosition === "start") && /* @__PURE__ */ jsx$1(ButtonStartIcon, {
     className: classes2.startIcon,
     ownerState,
@@ -29783,7 +30371,7 @@ function getSwitchBaseUtilityClass(slot) {
   return generateUtilityClass("PrivateSwitchBase", slot);
 }
 generateUtilityClasses("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
-const useUtilityClasses$1b = (ownerState) => {
+const useUtilityClasses$1c = (ownerState) => {
   const {
     classes: classes2,
     checked,
@@ -29920,7 +30508,7 @@ const SwitchBase = /* @__PURE__ */ React.forwardRef(function SwitchBase2(props,
     disableFocusRipple,
     edge
   };
-  const classes2 = useUtilityClasses$1b(ownerState);
+  const classes2 = useUtilityClasses$1c(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -30126,7 +30714,7 @@ function getCheckboxUtilityClass(slot) {
   return generateUtilityClass("MuiCheckbox", slot);
 }
 const checkboxClasses = generateUtilityClasses("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]);
-const useUtilityClasses$1a = (ownerState) => {
+const useUtilityClasses$1b = (ownerState) => {
   const {
     classes: classes2,
     indeterminate,
@@ -30235,7 +30823,7 @@ const Checkbox$1 = /* @__PURE__ */ React.forwardRef(function Checkbox2(inProps,
     indeterminate,
     size: size2
   };
-  const classes2 = useUtilityClasses$1a(ownerState);
+  const classes2 = useUtilityClasses$1b(ownerState);
   const externalInputProps = slotProps.input ?? inputProps;
   const [RootSlot, rootSlotProps] = useSlot("root", {
     ref: ref2,
@@ -31188,7 +31776,7 @@ function getBackdropUtilityClass(slot) {
   return generateUtilityClass("MuiBackdrop", slot);
 }
 generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
-const useUtilityClasses$19 = (ownerState) => {
+const useUtilityClasses$1a = (ownerState) => {
   const {
     classes: classes2,
     invisible
@@ -31251,7 +31839,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, re
     component,
     invisible
   };
-  const classes2 = useUtilityClasses$19(ownerState);
+  const classes2 = useUtilityClasses$1a(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -31548,7 +32136,7 @@ function getModalUtilityClass(slot) {
   return generateUtilityClass("MuiModal", slot);
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
-const useUtilityClasses$18 = (ownerState) => {
+const useUtilityClasses$19 = (ownerState) => {
   const {
     open,
     exited,
@@ -31655,7 +32243,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref2) {
     ...propsWithDefaults,
     exited
   };
-  const classes2 = useUtilityClasses$18(ownerState);
+  const classes2 = useUtilityClasses$19(ownerState);
   const childProps = {};
   if (children2.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -31919,7 +32507,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$17 = (ownerState) => {
+const useUtilityClasses$18 = (ownerState) => {
   const {
     align: align2,
     gutterBottom,
@@ -32059,7 +32647,7 @@ const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps
     variantMapping
   };
   const Component2 = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes2 = useUtilityClasses$17(ownerState);
+  const classes2 = useUtilityClasses$18(ownerState);
   return /* @__PURE__ */ jsx$1(TypographyRoot, {
     as: Component2,
     ref: ref2,
@@ -32164,7 +32752,7 @@ function getFormControlUtilityClasses(slot) {
   return generateUtilityClass("MuiFormControl", slot);
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
-const useUtilityClasses$16 = (ownerState) => {
+const useUtilityClasses$17 = (ownerState) => {
   const {
     classes: classes2,
     margin: margin2,
@@ -32254,7 +32842,7 @@ const FormControl = /* @__PURE__ */ React.forwardRef(function FormControl2(inPro
     size: size2,
     variant
   };
-  const classes2 = useUtilityClasses$16(ownerState);
+  const classes2 = useUtilityClasses$17(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     let initialAdornedStart = false;
     if (children2) {
@@ -32429,7 +33017,7 @@ function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiFormControlLabel", slot);
 }
 const formControlLabelClasses = generateUtilityClasses("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]);
-const useUtilityClasses$15 = (ownerState) => {
+const useUtilityClasses$16 = (ownerState) => {
   const {
     classes: classes2,
     disabled,
@@ -32564,7 +33152,7 @@ const FormControlLabel$1 = /* @__PURE__ */ React.forwardRef(function FormControl
     required: required2,
     error: fcs.error
   };
-  const classes2 = useUtilityClasses$15(ownerState);
+  const classes2 = useUtilityClasses$16(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -32694,7 +33282,7 @@ function getFormHelperTextUtilityClasses(slot) {
 }
 const formHelperTextClasses = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 var _span$3;
-const useUtilityClasses$14 = (ownerState) => {
+const useUtilityClasses$15 = (ownerState) => {
   const {
     classes: classes2,
     contained,
@@ -32789,7 +33377,7 @@ const FormHelperText = /* @__PURE__ */ React.forwardRef(function FormHelperText2
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes2 = useUtilityClasses$14(ownerState);
+  const classes2 = useUtilityClasses$15(ownerState);
   return /* @__PURE__ */ jsx$1(FormHelperTextRoot, {
     as: component,
     className: clsx(classes2.root, className),
@@ -32868,7 +33456,7 @@ function getFormLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiFormLabel", slot);
 }
 const formLabelClasses = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
-const useUtilityClasses$13 = (ownerState) => {
+const useUtilityClasses$14 = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -32965,7 +33553,7 @@ const FormLabel = /* @__PURE__ */ React.forwardRef(function FormLabel2(inProps,
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes2 = useUtilityClasses$13(ownerState);
+  const classes2 = useUtilityClasses$14(ownerState);
   return /* @__PURE__ */ jsxs(FormLabelRoot, {
     as: component,
     ownerState,
@@ -33033,11 +33621,129 @@ FormLabel.propTypes = {
    */
   sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object])
 };
+const Grid = createGrid({
+  createStyledComponent: styled("div", {
+    name: "MuiGrid",
+    slot: "Root",
+    overridesResolver: (props, styles2) => {
+      const {
+        ownerState
+      } = props;
+      return [styles2.root, ownerState.container && styles2.container];
+    }
+  }),
+  componentName: "MuiGrid",
+  useThemeProps: (inProps) => useDefaultProps({
+    props: inProps,
+    name: "MuiGrid"
+  }),
+  useTheme
+});
+Grid.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: _pt.node,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: _pt.oneOfType([_pt.arrayOf(_pt.number), _pt.number, _pt.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: _pt.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: _pt.oneOfType([_pt.oneOf(["column-reverse", "column", "row-reverse", "row"]), _pt.arrayOf(_pt.oneOf(["column-reverse", "column", "row-reverse", "row"])), _pt.object]),
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset: _pt.oneOfType([_pt.string, _pt.number, _pt.arrayOf(_pt.oneOfType([_pt.string, _pt.number])), _pt.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size: _pt.oneOfType([_pt.string, _pt.bool, _pt.number, _pt.arrayOf(_pt.oneOfType([_pt.string, _pt.bool, _pt.number])), _pt.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.number, _pt.string])), _pt.number, _pt.object, _pt.string]),
+  /**
+   * @ignore
+   */
+  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object]),
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level: _pt.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: _pt.oneOf(["nowrap", "wrap-reverse", "wrap"])
+};
+{
+  const Component2 = Grid;
+  const requireProp = requirePropFactory("Grid", Component2);
+  Component2["propTypes"] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Component2.propTypes,
+    direction: requireProp("container"),
+    spacing: requireProp("container"),
+    wrap: requireProp("container")
+  };
+}
 function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiInputLabel", slot);
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
-const useUtilityClasses$12 = (ownerState) => {
+const useUtilityClasses$13 = (ownerState) => {
   const {
     classes: classes2,
     formControl,
@@ -33226,7 +33932,7 @@ const InputLabel = /* @__PURE__ */ React.forwardRef(function InputLabel2(inProps
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes2 = useUtilityClasses$12(ownerState);
+  const classes2 = useUtilityClasses$13(ownerState);
   return /* @__PURE__ */ jsx$1(InputLabelRoot, {
     "data-shrink": shrink,
     ref: ref2,
@@ -33365,7 +34071,7 @@ const bufferKeyframe = keyframes`
 const bufferAnimation = typeof bufferKeyframe !== "string" ? css`
         animation: ${bufferKeyframe} 3s infinite linear;
       ` : null;
-const useUtilityClasses$11 = (ownerState) => {
+const useUtilityClasses$12 = (ownerState) => {
   const {
     classes: classes2,
     variant,
@@ -33640,7 +34346,7 @@ const LinearProgress = /* @__PURE__ */ React.forwardRef(function LinearProgress2
     color: color2,
     variant
   };
-  const classes2 = useUtilityClasses$11(ownerState);
+  const classes2 = useUtilityClasses$12(ownerState);
   const isRtl = useRtl();
   const rootProps = {};
   const inlineStyles = {
@@ -33742,7 +34448,7 @@ function getListUtilityClass(slot) {
   return generateUtilityClass("MuiList", slot);
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
-const useUtilityClasses$10 = (ownerState) => {
+const useUtilityClasses$11 = (ownerState) => {
   const {
     classes: classes2,
     disablePadding,
@@ -33808,7 +34514,7 @@ const List = /* @__PURE__ */ React.forwardRef(function List2(inProps, ref2) {
     dense,
     disablePadding
   };
-  const classes2 = useUtilityClasses$10(ownerState);
+  const classes2 = useUtilityClasses$11(ownerState);
   return /* @__PURE__ */ jsx$1(ListContext.Provider, {
     value: context2,
     children: /* @__PURE__ */ jsxs(ListRoot, {
@@ -33868,7 +34574,7 @@ function getListItemTextUtilityClass(slot) {
   return generateUtilityClass("MuiListItemText", slot);
 }
 const listItemTextClasses = generateUtilityClasses("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
-const useUtilityClasses$$ = (ownerState) => {
+const useUtilityClasses$10 = (ownerState) => {
   const {
     classes: classes2,
     inset,
@@ -33955,7 +34661,7 @@ const ListItemText = /* @__PURE__ */ React.forwardRef(function ListItemText2(inP
     secondary: !!secondary,
     dense
   };
-  const classes2 = useUtilityClasses$$(ownerState);
+  const classes2 = useUtilityClasses$10(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -34085,7 +34791,7 @@ function getListItemIconUtilityClass(slot) {
   return generateUtilityClass("MuiListItemIcon", slot);
 }
 const listItemIconClasses = generateUtilityClasses("MuiListItemIcon", ["root", "alignItemsFlexStart"]);
-const useUtilityClasses$_ = (ownerState) => {
+const useUtilityClasses$$ = (ownerState) => {
   const {
     alignItems,
     classes: classes2
@@ -34134,7 +34840,7 @@ const ListItemIcon = /* @__PURE__ */ React.forwardRef(function ListItemIcon2(inP
     ...props,
     alignItems: context2.alignItems
   };
-  const classes2 = useUtilityClasses$_(ownerState);
+  const classes2 = useUtilityClasses$$(ownerState);
   return /* @__PURE__ */ jsx$1(ListItemIconRoot, {
     className: clsx(classes2.root, className),
     ownerState,
@@ -34412,7 +35118,7 @@ function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
 const dividerClasses = generateUtilityClasses("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-const useUtilityClasses$Z = (ownerState) => {
+const useUtilityClasses$_ = (ownerState) => {
   const {
     absolute,
     children: children2,
@@ -34626,7 +35332,7 @@ const Divider$1 = /* @__PURE__ */ React.forwardRef(function Divider2(inProps, re
     textAlign: textAlign2,
     variant
   };
-  const classes2 = useUtilityClasses$Z(ownerState);
+  const classes2 = useUtilityClasses$_(ownerState);
   return /* @__PURE__ */ jsx$1(DividerRoot, {
     as: component,
     className: clsx(classes2.root, className),
@@ -34718,7 +35424,7 @@ const overridesResolver$1 = (props, styles2) => {
   } = props;
   return [styles2.root, ownerState.dense && styles2.dense, ownerState.divider && styles2.divider, !ownerState.disableGutters && styles2.gutters];
 };
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     disabled,
     dense,
@@ -34878,7 +35584,7 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
     divider,
     disableGutters
   };
-  const classes2 = useUtilityClasses$Y(props);
+  const classes2 = useUtilityClasses$Z(props);
   const handleRef = useForkRef$1(menuItemRef, ref2);
   let tabIndex;
   if (!props.disabled) {
@@ -34978,7 +35684,7 @@ function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass("MuiNativeSelect", slot);
 }
 const nativeSelectClasses = generateUtilityClasses("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
-const useUtilityClasses$X = (ownerState) => {
+const useUtilityClasses$Y = (ownerState) => {
   const {
     classes: classes2,
     variant,
@@ -35133,7 +35839,7 @@ const NativeSelectInput = /* @__PURE__ */ React.forwardRef(function NativeSelect
     variant,
     error: error2
   };
-  const classes2 = useUtilityClasses$X(ownerState);
+  const classes2 = useUtilityClasses$Y(ownerState);
   return /* @__PURE__ */ jsxs(React.Fragment, {
     children: [/* @__PURE__ */ jsx$1(NativeSelectSelect, {
       ownerState,
@@ -35203,7 +35909,7 @@ NativeSelectInput.propTypes = {
    */
   variant: _pt.oneOf(["standard", "outlined", "filled"])
 };
-const useUtilityClasses$W = (ownerState) => {
+const useUtilityClasses$X = (ownerState) => {
   const {
     classes: classes2,
     disableUnderline
@@ -35336,7 +36042,7 @@ const Input$1 = /* @__PURE__ */ React.forwardRef(function Input2(inProps, ref2)
     type: type2 = "text",
     ...other
   } = props;
-  const classes2 = useUtilityClasses$W(props);
+  const classes2 = useUtilityClasses$X(props);
   const ownerState = {
     disableUnderline
   };
@@ -35549,6 +36255,121 @@ Input$1.propTypes = {
   value: _pt.any
 };
 Input$1.muiName = "Input";
+const useUtilityClasses$W = (ownerState) => {
+  const {
+    classes: classes2
+  } = ownerState;
+  const slots = {
+    root: ["root"]
+  };
+  return composeClasses(slots, getNativeSelectUtilityClasses, classes2);
+};
+const defaultInput = /* @__PURE__ */ jsx$1(Input$1, {});
+const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSelect2(inProps, ref2) {
+  const props = useDefaultProps({
+    name: "MuiNativeSelect",
+    props: inProps
+  });
+  const {
+    className,
+    children: children2,
+    classes: classesProp = {},
+    IconComponent = ArrowDropDownIcon,
+    input = defaultInput,
+    inputProps,
+    variant,
+    ...other
+  } = props;
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ["variant"]
+  });
+  const ownerState = {
+    ...props,
+    classes: classesProp
+  };
+  const classes2 = useUtilityClasses$W(ownerState);
+  const {
+    root: root2,
+    ...otherClasses
+  } = classesProp;
+  return /* @__PURE__ */ jsx$1(React.Fragment, {
+    children: /* @__PURE__ */ React.cloneElement(input, {
+      // Most of the logic is implemented in `NativeSelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent: NativeSelectInput,
+      inputProps: {
+        children: children2,
+        classes: otherClasses,
+        IconComponent,
+        variant: fcs.variant,
+        type: void 0,
+        // We render a select. We can ignore the type provided by the `Input`.
+        ...inputProps,
+        ...input ? input.props.inputProps : {}
+      },
+      ref: ref2,
+      ...other,
+      className: clsx(classes2.root, input.props.className, className)
+    })
+  });
+});
+NativeSelect.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The option elements to populate the select with.
+   * Can be some `<option>` elements.
+   */
+  children: _pt.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * @default {}
+   */
+  classes: _pt.object,
+  /**
+   * @ignore
+   */
+  className: _pt.string,
+  /**
+   * The icon that displays the arrow.
+   * @default ArrowDropDownIcon
+   */
+  IconComponent: _pt.elementType,
+  /**
+   * An `Input` element; does not have to be a material-ui specific `Input`.
+   * @default <Input />
+   */
+  input: _pt.element,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#attributes) applied to the `select` element.
+   */
+  inputProps: _pt.object,
+  /**
+   * Callback fired when a menu item is selected.
+   *
+   * @param {React.ChangeEvent<HTMLSelectElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: _pt.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object]),
+  /**
+   * The `input` value. The DOM API casts this to a string.
+   */
+  value: _pt.any,
+  /**
+   * The variant to use.
+   */
+  variant: _pt.oneOf(["filled", "outlined", "standard"])
+};
+NativeSelect.muiName = "Select";
 function getScale$2(value2) {
   return `scale(${value2}, ${value2 ** 2})`;
 }
@@ -81441,6 +82262,12 @@ function multiply$3(out, a2, b2) {
   out[2] = a2[2] * b2[2];
   return out;
 }
+function distance$3(a2, b2) {
+  var x2 = b2[0] - a2[0];
+  var y2 = b2[1] - a2[1];
+  var z2 = b2[2] - a2[2];
+  return Math.hypot(x2, y2, z2);
+}
 function squaredLength$2(a2) {
   var x2 = a2[0];
   var y2 = a2[1];
@@ -81564,6 +82391,7 @@ function angle$3(a2, b2) {
 }
 var sub = subtract;
 var mul = multiply$3;
+var dist$1 = distance$3;
 var len = length$5;
 var sqrLen = squaredLength$2;
 (function() {
@@ -96034,7 +96862,7 @@ function noop$7() {
 const getCursor = ({
   isDragging
 }) => isDragging ? "grabbing" : "grab";
-const defaultProps$O = {
+const defaultProps$P = {
   id: "",
   width: "100%",
   height: "100%",
@@ -96165,7 +96993,7 @@ class Deck {
       this._lastPointerDownInfo = pickedInfo.result[0] || pickedInfo.emptyInfo;
     });
     this.props = {
-      ...defaultProps$O,
+      ...defaultProps$P,
       ...props
     };
     props = this.props;
@@ -96667,7 +97495,7 @@ class Deck {
     metrics.gpuMemory = memoryStats.get("GPU Memory").count;
   }
 }
-_defineProperty$3(Deck, "defaultProps", defaultProps$O);
+_defineProperty$3(Deck, "defaultProps", defaultProps$P);
 _defineProperty$3(Deck, "VERSION", deckGlobal.VERSION);
 class ShaderAttribute {
   constructor(dataColumn, opts2) {
@@ -99422,7 +100250,7 @@ const areViewportsEqual = memoize$2(({
   return oldViewport.equals(viewport2);
 });
 let pickingColorCache = new Uint8ClampedArray(0);
-const defaultProps$N = {
+const defaultProps$O = {
   data: {
     type: "data",
     value: EMPTY_ARRAY$1,
@@ -100297,7 +101125,7 @@ class Layer extends Component {
     this.setNeedsUpdate();
   }
 }
-_defineProperty$3(Layer, "defaultProps", defaultProps$N);
+_defineProperty$3(Layer, "defaultProps", defaultProps$O);
 _defineProperty$3(Layer, "layerName", "Layer");
 const TRACE_RENDER_LAYERS = "compositeLayer.renderLayers";
 class CompositeLayer extends Layer {
@@ -101333,6 +102161,124 @@ const esm$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   project32,
   shadow
 }, Symbol.toStringTag, { value: "Module" }));
+const dashShaders = {
+  inject: {
+    "vs:#decl": "\nattribute vec2 instanceDashArrays;\nattribute float instanceDashOffsets;\nvarying vec2 vDashArray;\nvarying float vDashOffset;\n",
+    "vs:#main-end": "\nvDashArray = instanceDashArrays;\nvDashOffset = instanceDashOffsets / width.x;\n",
+    "fs:#decl": "\nuniform float dashAlignMode;\nuniform float capType;\nuniform bool dashGapPickable;\nvarying vec2 vDashArray;\nvarying float vDashOffset;\n\nfloat round(float x) {\n  return floor(x + 0.5);\n}\n",
+    "fs:#main-start": "\n  float solidLength = vDashArray.x;\n  float gapLength = vDashArray.y;\n  float unitLength = solidLength + gapLength;\n\n  float offset;\n\n  if (unitLength > 0.0) {\n    if (dashAlignMode == 0.0) {\n      offset = vDashOffset;\n    } else {\n      unitLength = vPathLength / round(vPathLength / unitLength);\n      offset = solidLength / 2.0;\n    }\n\n    float unitOffset = mod(clamp(vPathPosition.y, 0.0, vPathLength) + offset, unitLength);\n\n    if (gapLength > 0.0 && unitOffset > solidLength) {\n      if (capType <= 0.5) {\n        if (!(dashGapPickable && picking_uActive)) {\n          discard;\n        }\n      } else {\n        // caps are rounded, test the distance to solid ends\n        float distToEnd = length(vec2(\n          min(unitOffset - solidLength, unitLength - unitOffset),\n          vPathPosition.x\n        ));\n        if (distToEnd > 1.0) {\n          if (!(dashGapPickable && picking_uActive)) {\n            discard;\n          }\n        }\n      }\n    }\n  }\n"
+  }
+};
+const offsetShaders = {
+  inject: {
+    "vs:#decl": "\nattribute float instanceOffsets;\n",
+    "vs:DECKGL_FILTER_SIZE": "\n  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;\n  size *= offsetWidth;\n",
+    "vCornerOffset = offsetVec;": "\n  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;\n  vec2 offsetCenter = -instanceOffsets * (isCap ? perp : miterVec * miterSize) * 2.0;\n  vCornerOffset = vCornerOffset * offsetWidth - offsetCenter;\n",
+    "fs:#main-start": "\n  float isInside;\n  isInside = step(-1.0, vPathPosition.x) * step(vPathPosition.x, 1.0);\n  if (isInside == 0.0) {\n    discard;\n  }\n"
+  }
+};
+const defaultProps$N = {
+  getDashArray: {
+    type: "accessor",
+    value: [0, 0]
+  },
+  getOffset: {
+    type: "accessor",
+    value: 0
+  },
+  dashJustified: false,
+  dashGapPickable: false
+};
+class PathStyleExtension extends LayerExtension {
+  constructor({
+    dash = false,
+    offset: offset2 = false,
+    highPrecisionDash = false
+  } = {}) {
+    super({
+      dash: dash || highPrecisionDash,
+      offset: offset2,
+      highPrecisionDash
+    });
+  }
+  isEnabled(layer) {
+    return "pathTesselator" in layer.state;
+  }
+  getShaders(extension2) {
+    if (!extension2.isEnabled(this)) {
+      return null;
+    }
+    let result = {};
+    if (extension2.opts.dash) {
+      result = mergeShaders(result, dashShaders);
+    }
+    if (extension2.opts.offset) {
+      result = mergeShaders(result, offsetShaders);
+    }
+    return result;
+  }
+  initializeState(context2, extension2) {
+    const attributeManager = this.getAttributeManager();
+    if (!attributeManager || !extension2.isEnabled(this)) {
+      return;
+    }
+    if (extension2.opts.dash) {
+      attributeManager.addInstanced({
+        instanceDashArrays: {
+          size: 2,
+          accessor: "getDashArray"
+        }
+      });
+    }
+    if (extension2.opts.highPrecisionDash) {
+      attributeManager.addInstanced({
+        instanceDashOffsets: {
+          size: 1,
+          accessor: "getPath",
+          transform: extension2.getDashOffsets.bind(this)
+        }
+      });
+    }
+    if (extension2.opts.offset) {
+      attributeManager.addInstanced({
+        instanceOffsets: {
+          size: 1,
+          accessor: "getOffset"
+        }
+      });
+    }
+  }
+  updateState(params2, extension2) {
+    if (!extension2.isEnabled(this)) {
+      return;
+    }
+    const uniforms = {};
+    if (extension2.opts.dash) {
+      uniforms.dashAlignMode = this.props.dashJustified ? 1 : 0;
+      uniforms.dashGapPickable = Boolean(this.props.dashGapPickable);
+    }
+    this.state.model.setUniforms(uniforms);
+  }
+  getDashOffsets(path2) {
+    const result = [0];
+    const positionSize = this.props.positionFormat === "XY" ? 2 : 3;
+    const isNested2 = Array.isArray(path2[0]);
+    const geometrySize = isNested2 ? path2.length : path2.length / positionSize;
+    let p;
+    let prevP;
+    for (let i2 = 0; i2 < geometrySize - 1; i2++) {
+      p = isNested2 ? path2[i2] : path2.slice(i2 * positionSize, i2 * positionSize + positionSize);
+      p = this.projectPosition(p);
+      if (i2 > 0) {
+        result[i2] = result[i2 - 1] + dist$1(prevP, p);
+      }
+      prevP = p;
+    }
+    return result;
+  }
+}
+_defineProperty$3(PathStyleExtension, "defaultProps", defaultProps$N);
+_defineProperty$3(PathStyleExtension, "extensionName", "PathStyleExtension");
 const defaultProps$M = {
   clipBounds: [0, 0, 1, 1]
 };
@@ -173688,22 +174634,22 @@ function addDecoder(cases2, importFn) {
   }
   cases2.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-DA0bjume.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-BS2ckxRa.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-Dg8kCOnj.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-DkbMJx1b.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-HJZeqbJ9.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-C-0XOaix.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-8sTofHBF.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DhNGUcND.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-BG2HUqgg.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-8pX5TxcK.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-BtoOWLPL.js").then(async (m2) => {
+  () => import("./lerc-CeaVG0Hd.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-C3yiEsf-.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-DqIQm4cj.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -180906,7 +181852,7 @@ function padColors({ colors: colors2, channelsVisible }) {
   ).reduce((acc, val) => acc.concat(val), []);
   return paddedColors;
 }
-const defaultProps$3$1 = {
+const defaultProps$3$2 = {
   colors: { type: "array", value: null, compare: true },
   opacity: { type: "number", value: 1, compare: true },
   transparentColor: { type: "array", value: null, compare: true },
@@ -180923,9 +181869,9 @@ const ColorPaletteExtension = class extends LayerExtension {
     const {
       colors: colors2,
       channelsVisible,
-      opacity: opacity2 = defaultProps$3$1.opacity.value,
-      transparentColor = defaultProps$3$1.transparentColor.value,
-      useTransparentColor = defaultProps$3$1.useTransparentColor.value
+      opacity: opacity2 = defaultProps$3$2.opacity.value,
+      transparentColor = defaultProps$3$2.transparentColor.value,
+      useTransparentColor = defaultProps$3$2.useTransparentColor.value
     } = this.props;
     const paddedColors = padColors({
       channelsVisible: channelsVisible || this.selections.map(() => true),
@@ -180941,7 +181887,7 @@ const ColorPaletteExtension = class extends LayerExtension {
   }
 };
 ColorPaletteExtension.extensionName = "ColorPaletteExtension";
-ColorPaletteExtension.defaultProps = defaultProps$3$1;
+ColorPaletteExtension.defaultProps = defaultProps$3$2;
 const fs$4 = `// lens bounds for ellipse
 uniform float majorLensAxis;
 uniform float minorLensAxis;
@@ -182236,7 +183182,7 @@ const MultiscaleImageLayer = class extends CompositeLayer {
 };
 MultiscaleImageLayer.layerName = "MultiscaleImageLayer";
 MultiscaleImageLayer.defaultProps = defaultProps$4;
-const defaultProps$3 = {
+const defaultProps$3$1 = {
   pickable: { type: "boolean", value: true, compare: true },
   loader: {
     type: "object",
@@ -182323,7 +183269,7 @@ const OverviewLayer = class extends CompositeLayer {
   }
 };
 OverviewLayer.layerName = "OverviewLayer";
-OverviewLayer.defaultProps = defaultProps$3;
+OverviewLayer.defaultProps = defaultProps$3$1;
 function getPosition(boundingBox, position2, length2) {
   const viewWidth2 = boundingBox[2][0] - boundingBox[0][0];
   const viewHeight2 = boundingBox[2][1] - boundingBox[0][1];
@@ -183311,7 +184257,7 @@ function padWithDefault$1(arr, defaultValue2, padWidth) {
   }
   return newArr;
 }
-const defaultProps$2 = {
+const defaultProps$3 = {
   hoveredCell: { type: "number", value: null, compare: true },
   // We do not want to deep-compare cellColorData,
   // as it is potentially a TypedArray with millions of elements.
@@ -183428,7 +184374,7 @@ let BitmaskLayer$1 = class BitmaskLayer extends XRLayer {
   }
 };
 BitmaskLayer$1.layerName = "BitmaskLayer";
-BitmaskLayer$1.defaultProps = defaultProps$2;
+BitmaskLayer$1.defaultProps = defaultProps$3;
 const vs = `
 #define SHADER_NAME bitmask-layer-vertex-shader
 
@@ -183770,7 +184716,7 @@ function isEqualShallow(prevArr, nextArr) {
   }
   return prevArr === nextArr;
 }
-const defaultProps$1 = {
+const defaultProps$2 = {
   channelStrokeWidths: { type: "array", value: null, compare: true },
   channelsFilled: { type: "array", value: null, compare: true },
   channelOpacities: { type: "array", value: null, compare: true },
@@ -184034,7 +184980,7 @@ class BitmaskLayer2 extends XRLayer {
   }
 }
 BitmaskLayer2.layerName = "BitmaskLayer";
-BitmaskLayer2.defaultProps = defaultProps$1;
+BitmaskLayer2.defaultProps = defaultProps$2;
 var isNumeric$1 = /^-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i, mathceil = Math.ceil, mathfloor = Math.floor, bignumberError = "[BigNumber Error] ", tooManyDigits = bignumberError + "Number primitive has more than 15 significant digits: ", BASE = 1e14, LOG_BASE = 14, MAX_SAFE_INTEGER$2 = 9007199254740991, POWS_TEN = [1, 10, 100, 1e3, 1e4, 1e5, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12, 1e13], SQRT_BASE = 1e7, MAX$1 = 1e9;
 function clone$1(configObject) {
   var div, convertBase, parseNumeric, P = BigNumber2.prototype = { constructor: BigNumber2, toString: null, valueOf: null }, ONE = new BigNumber2(1), DECIMAL_PLACES = 20, ROUNDING_MODE = 4, TO_EXP_NEG = -7, TO_EXP_POS = 21, MIN_EXP = -1e7, MAX_EXP = 1e7, CRYPTO = false, MODULO_MODE = 1, POW_PRECISION = 0, FORMAT = {
@@ -186977,7 +187923,7 @@ function ringArea(coords) {
   return total * FACTOR;
 }
 const DEFAULT_THRESHOLD = 1;
-const defaultProps = {
+const defaultProps$1 = {
   // for text
   obsSetPath: { type: "object" },
   sampleSetPath: { type: "object" },
@@ -187151,7 +188097,1077 @@ class ContourLayerWithText extends ContourLayer {
   }
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
-ContourLayerWithText.defaultProps = defaultProps;
+ContourLayerWithText.defaultProps = defaultProps$1;
+const ARROW_SCREEN_PX = 14;
+const LABEL_FONT_FAMILY = '"Roboto", "Helvetica", "Arial", sans-serif';
+const LABEL_FONT_WEIGHT = "bold";
+const LABEL_FONT_SIZE = 14;
+const RATIO_CLUSTER = 0.1;
+const RATIO_DOT = 0.3;
+const RATIO_GEO_FADE = 0.55;
+const RATIO_TIPS = 0.7;
+const RATIO_LABEL = 0.55;
+const RATIO_LABEL_FULL = 0.75;
+function textBgColor(strokeColor) {
+  const [r3, g2, b2] = strokeColor;
+  const lum = (0.299 * r3 + 0.587 * g2 + 0.114 * b2) / 255;
+  return lum > 0.45 ? [20, 20, 20, 210] : [245, 245, 245, 210];
+}
+function parseDashArray(strokeDashArray) {
+  if (!strokeDashArray || strokeDashArray === "none")
+    return null;
+  const nums = strokeDashArray.trim().split(/\s+/).map(Number).filter((n2) => !Number.isNaN(n2) && n2 >= 0);
+  return nums.length >= 2 ? [nums[0], nums[1]] : null;
+}
+function computeEllipsePolygon(cx, cy, rx, ry, numSegments = 64) {
+  const pts = [];
+  for (let i2 = 0; i2 < numSegments; i2++) {
+    const angle2 = 2 * Math.PI * i2 / numSegments;
+    pts.push([cx + rx * Math.cos(angle2), cy + ry * Math.sin(angle2)]);
+  }
+  return pts;
+}
+function createPreviewLayer(inProgress, hoverCoord, strokeColor = [255, 255, 0]) {
+  if (!inProgress || inProgress.vertices.length === 0)
+    return null;
+  const { type: type2, vertices } = inProgress;
+  const base2 = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN };
+  const previewColor = [...strokeColor, 160];
+  const cursor2 = hoverCoord ?? vertices[vertices.length - 1];
+  if (type2 === "rectangle" && vertices.length === 1) {
+    const [ax, ay] = vertices[0];
+    const [bx, by] = cursor2;
+    const path2 = [[ax, ay], [bx, ay], [bx, by], [ax, by], [ax, ay]];
+    return new PathLayer({
+      ...base2,
+      id: "annotation-preview-rectangle",
+      data: [{ path: path2 }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if (type2 === "line" && vertices.length === 1) {
+    const path2 = [vertices[0], cursor2];
+    return new PathLayer({
+      ...base2,
+      id: "annotation-preview-line",
+      data: [{ path: path2 }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if (type2 === "ellipse" && vertices.length === 1) {
+    const [cx, cy] = vertices[0];
+    const [ex, ey] = cursor2;
+    const rx = Math.abs(ex - cx);
+    const ry = Math.abs(ey - cy);
+    if (rx < 1 && ry < 1)
+      return null;
+    const pts = computeEllipsePolygon(cx, cy, Math.max(rx, 1), Math.max(ry, 1));
+    const path2 = [...pts, pts[0]];
+    return new PathLayer({
+      ...base2,
+      id: "annotation-preview-ellipse",
+      data: [{ path: path2 }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if ((type2 === "polygon" || type2 === "polyline") && vertices.length >= 1) {
+    const path2 = [...vertices, cursor2];
+    if (type2 === "polygon" && vertices.length >= 2)
+      path2.push(vertices[0]);
+    return new PathLayer({
+      ...base2,
+      id: `annotation-preview-${type2}`,
+      data: [{ path: path2 }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      jointRounded: true,
+      capRounded: true,
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  return null;
+}
+function computeTickCap(tipX, tipY, dirX, dirY, dataSize) {
+  const len2 = Math.sqrt(dirX * dirX + dirY * dirY);
+  if (len2 === 0)
+    return null;
+  const ux = dirX / len2;
+  const uy = dirY / len2;
+  const px2 = -uy;
+  const py2 = ux;
+  const half = dataSize * 0.55;
+  return [
+    [tipX + px2 * half, tipY + py2 * half],
+    [tipX - px2 * half, tipY - py2 * half]
+  ];
+}
+function computeArrowhead(tipX, tipY, dirX, dirY, dataSize) {
+  const len2 = Math.sqrt(dirX * dirX + dirY * dirY);
+  if (len2 === 0)
+    return null;
+  const ux = dirX / len2;
+  const uy = dirY / len2;
+  const px2 = -uy;
+  const py2 = ux;
+  const halfBase = dataSize * 0.4;
+  const bx = tipX - ux * dataSize;
+  const by = tipY - uy * dataSize;
+  return [
+    [tipX, tipY],
+    [bx + px2 * halfBase, by + py2 * halfBase],
+    [bx - px2 * halfBase, by - py2 * halfBase]
+  ];
+}
+function fmtCommas(n2) {
+  return Math.round(n2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function getMeasurementLabel(shape2, physicalPixelSize, viewType = ViewType$1.SPATIAL) {
+  const pps = physicalPixelSize;
+  const px2 = pps?.x ?? 1;
+  const py2 = pps?.y ?? 1;
+  const unit2 = pps ? pps.unit ?? "" : null;
+  const hasPhys = !!pps;
+  const isEmbedding = viewType === ViewType$1.SCATTERPLOT;
+  const fmtDist = (d) => {
+    if (hasPhys)
+      return `${d.toFixed(2)} ${unit2}`;
+    if (isEmbedding)
+      return d.toFixed(2);
+    return `${fmtCommas(d)} px`;
+  };
+  const fmtArea = (a2) => {
+    if (hasPhys)
+      return `${a2.toFixed(2)} ${unit2}²`;
+    if (isEmbedding)
+      return a2.toFixed(2);
+    return `${fmtCommas(a2)} px²`;
+  };
+  if (shape2.type === "line") {
+    const dx = (shape2.x2 ?? 0) - (shape2.x1 ?? 0);
+    const dy = (shape2.y2 ?? 0) - (shape2.y1 ?? 0);
+    const dist2 = hasPhys ? Math.sqrt((dx * px2) ** 2 + (dy * py2) ** 2) : Math.sqrt(dx * dx + dy * dy);
+    return fmtDist(dist2);
+  }
+  if (shape2.type === "rectangle") {
+    return fmtArea(hasPhys ? Math.abs(shape2.width ?? 0) * px2 * Math.abs(shape2.height ?? 0) * py2 : Math.abs((shape2.width ?? 0) * (shape2.height ?? 0)));
+  }
+  if (shape2.type === "ellipse") {
+    const rx = Math.abs(shape2.radiusX ?? 0);
+    const ry = Math.abs(shape2.radiusY ?? 0);
+    return fmtArea(hasPhys ? Math.PI * rx * px2 * ry * py2 : Math.PI * rx * ry);
+  }
+  if (shape2.type === "polygon" && shape2.points?.length >= 3) {
+    const pts = shape2.points;
+    let shoelace = 0;
+    for (let i2 = 0; i2 < pts.length; i2++) {
+      const [ax, ay] = pts[i2];
+      const [bx, by] = pts[(i2 + 1) % pts.length];
+      shoelace += (hasPhys ? ax * px2 : ax) * (hasPhys ? by * py2 : by) - (hasPhys ? bx * px2 : bx) * (hasPhys ? ay * py2 : ay);
+    }
+    return fmtArea(Math.abs(shoelace / 2));
+  }
+  if (shape2.type === "polyline" && shape2.points?.length >= 2) {
+    let total = 0;
+    for (let i2 = 0; i2 < shape2.points.length - 1; i2++) {
+      const [ax, ay] = shape2.points[i2];
+      const [bx, by] = shape2.points[i2 + 1];
+      total += hasPhys ? Math.sqrt(((bx - ax) * px2) ** 2 + ((by - ay) * py2) ** 2) : Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);
+    }
+    return fmtDist(total);
+  }
+  return null;
+}
+function pickBelowPerp(ux, uy) {
+  const rp = [uy, -ux];
+  const lp = [-uy, ux];
+  return rp[1] > lp[1] || rp[1] === lp[1] && rp[0] > lp[0] ? rp : lp;
+}
+function readableAngle(deg) {
+  let a2 = deg;
+  if (a2 > 90)
+    a2 -= 180;
+  if (a2 < -90)
+    a2 += 180;
+  return a2;
+}
+function getShapeCentroid(shape2) {
+  if (shape2.type === "rectangle") {
+    return [(shape2.x ?? 0) + (shape2.width ?? 0) / 2, (shape2.y ?? 0) + (shape2.height ?? 0) / 2];
+  }
+  if (shape2.type === "line") {
+    return [((shape2.x1 ?? 0) + (shape2.x2 ?? 0)) / 2, ((shape2.y1 ?? 0) + (shape2.y2 ?? 0)) / 2];
+  }
+  if (shape2.type === "ellipse") {
+    return [shape2.x1 ?? 0, shape2.y1 ?? 0];
+  }
+  if ((shape2.type === "polygon" || shape2.type === "polyline") && shape2.points?.length >= 1) {
+    const mx = shape2.points.reduce((s2, p) => s2 + p[0], 0) / shape2.points.length;
+    const my = shape2.points.reduce((s2, p) => s2 + p[1], 0) / shape2.points.length;
+    return [mx, my];
+  }
+  return [0, 0];
+}
+function computeClusters(shapeList, zoom2, cellPx = 50) {
+  const cellSize = cellPx / 2 ** Math.floor(zoom2);
+  const cells = /* @__PURE__ */ new Map();
+  shapeList.forEach(({ shape: shape2 }) => {
+    const [cx, cy] = getShapeCentroid(shape2);
+    const key2 = `${Math.floor(cx / cellSize)},${Math.floor(cy / cellSize)}`;
+    if (!cells.has(key2)) {
+      cells.set(key2, { sumX: 0, sumY: 0, count: 0, color: shape2.strokeColor ?? [255, 255, 255] });
+    }
+    const c2 = cells.get(key2);
+    c2.sumX += cx;
+    c2.sumY += cy;
+    c2.count++;
+  });
+  return Array.from(cells.values()).map((c2) => ({
+    position: [c2.sumX / c2.count, c2.sumY / c2.count, 0],
+    count: c2.count,
+    color: c2.color
+  }));
+}
+function createAnnotationLayers(shapes = [], zoom2 = 0, selectedShapeUid = null, physicalPixelSize = null, authoredZoom = null, semanticZoom = true, viewType = ViewType$1.SPATIAL) {
+  const selectionLayers = [];
+  if (selectedShapeUid) {
+    const sel = shapes.find((s2) => s2.uid === selectedShapeUid);
+    if (sel) {
+      const { uid: sUid, type: sType, strokeWidth: sStrokeWidth = 3 } = sel;
+      const haloColor = [255, 220, 50, 70];
+      const haloWidth = Math.max(sStrokeWidth + 8, 10);
+      const base2 = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN };
+      if (sType === "rectangle") {
+        const { x: x2, y: y2, width: width2, height: height2 } = sel;
+        selectionLayers.push(new PathLayer({
+          ...base2,
+          id: `annotation-select-${sUid}`,
+          data: [{
+            path: [
+              [x2, y2],
+              [x2 + width2, y2],
+              [x2 + width2, y2 + height2],
+              [x2, y2 + height2],
+              [x2, y2]
+            ]
+          }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true,
+          capRounded: true
+        }));
+      }
+      if (sType === "line") {
+        const { x1: x12, y1: y12, x2, y2 } = sel;
+        selectionLayers.push(new PathLayer({
+          ...base2,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [[x12, y12], [x2, y2]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          capRounded: true
+        }));
+      }
+      if (sType === "ellipse") {
+        const polygon2 = computeEllipsePolygon(sel.x1, sel.y1, sel.radiusX, sel.radiusY);
+        selectionLayers.push(new PathLayer({
+          ...base2,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [...polygon2, polygon2[0]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true
+        }));
+      }
+      if (sType === "polygon" && sel.points?.length >= 3) {
+        selectionLayers.push(new PathLayer({
+          ...base2,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [...sel.points, sel.points[0]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true
+        }));
+      }
+      if (sType === "polyline" && sel.points?.length >= 2) {
+        selectionLayers.push(new PathLayer({
+          ...base2,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: sel.points }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true,
+          capRounded: true
+        }));
+      }
+    }
+  }
+  const layers = [];
+  const dotShapes = [];
+  const clusterDotShapes = [];
+  shapes.forEach((shape2, i2) => {
+    const { uid: uid2, type: type2, strokeColor = [255, 255, 255], strokeWidth = 3, strokeDashArray } = shape2;
+    const isSelected = uid2 === selectedShapeUid;
+    let shapeOpacity = 1;
+    let tipsOpacity = 1;
+    let labelOpacity = 0;
+    if (isSelected || !semanticZoom || authoredZoom === null) {
+      tipsOpacity = 1;
+      labelOpacity = 1;
+    } else {
+      const zoomRatio = 2 ** (zoom2 - authoredZoom);
+      if (zoomRatio < RATIO_CLUSTER) {
+        clusterDotShapes.push({ shape: shape2 });
+        return;
+      }
+      if (zoomRatio < RATIO_DOT) {
+        dotShapes.push({ shape: shape2, alpha: 200 });
+        return;
+      }
+      if (zoomRatio < RATIO_GEO_FADE) {
+        const t4 = (zoomRatio - RATIO_DOT) / (RATIO_GEO_FADE - RATIO_DOT);
+        shapeOpacity = t4;
+        dotShapes.push({ shape: shape2, alpha: Math.round((1 - t4) * 200) });
+      }
+      tipsOpacity = zoomRatio >= RATIO_TIPS ? shapeOpacity : Math.max(0, (zoomRatio - RATIO_GEO_FADE) / (RATIO_TIPS - RATIO_GEO_FADE) * shapeOpacity);
+      if (zoomRatio >= RATIO_LABEL_FULL) {
+        labelOpacity = shapeOpacity;
+      } else if (zoomRatio >= RATIO_LABEL) {
+        labelOpacity = (zoomRatio - RATIO_LABEL) / (RATIO_LABEL_FULL - RATIO_LABEL) * shapeOpacity;
+      }
+    }
+    const arrowDataSize = Math.max(ARROW_SCREEN_PX, strokeWidth * 4) / 2 ** zoom2;
+    const base2 = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: shapeOpacity };
+    const tipsBase = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: tipsOpacity };
+    const labelBase = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: labelOpacity };
+    const labelBgProps = shape2.labelBackground ? {
+      background: true,
+      getBackgroundColor: textBgColor(strokeColor),
+      backgroundPadding: [3, 1, 3, 2]
+    } : {};
+    const labelProps = { ...labelBgProps };
+    const dashArray = parseDashArray(strokeDashArray);
+    const dashExt = [new PathStyleExtension({ dash: true })];
+    const getDash = dashArray ?? [0, 0];
+    if (type2 === "rectangle") {
+      const { x: x2, y: y2, width: width2, height: height2, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      const filled = fillOpacity > 0;
+      const rectPolygon = [[x2, y2], [x2 + width2, y2], [x2 + width2, y2 + height2], [x2, y2 + height2]];
+      layers.push(new PolygonLayer({
+        ...base2,
+        id: `annotation-rect-${uid2}-${i2}`,
+        data: [{ polygon: rectPolygon }],
+        getPolygon: (d) => d.polygon,
+        filled,
+        stroked: true,
+        getFillColor: filled ? [...fillColor, Math.round(fillOpacity * 255)] : [0, 0, 0, 0],
+        getLineColor: strokeColor,
+        getLineWidth: strokeWidth,
+        lineWidthUnits: "pixels",
+        ...dashArray ? {
+          extensions: [new PathStyleExtension({ dash: true })],
+          getDashArray: dashArray
+        } : {}
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-rect-text-${uid2}-${i2}`,
+          data: [{ position: [x2, y2], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [3, -7],
+          getTextAnchor: "start",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type2 === "line") {
+      const { x1: x12, y1: y12, x2, y2, markerStart, markerEnd } = shape2;
+      const dx = x2 - x12;
+      const dy = y2 - y12;
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      const ux = len2 > 0 ? dx / len2 : 0;
+      const uy = len2 > 0 ? dy / len2 : 0;
+      const srcX = markerStart === "Arrow" ? x12 + ux * arrowDataSize : x12;
+      const srcY = markerStart === "Arrow" ? y12 + uy * arrowDataSize : y12;
+      const tgtX = markerEnd === "Arrow" ? x2 - ux * arrowDataSize : x2;
+      const tgtY = markerEnd === "Arrow" ? y2 - uy * arrowDataSize : y2;
+      layers.push(new PathLayer({
+        ...base2,
+        id: `annotation-line-${uid2}-${i2}`,
+        extensions: [new PathStyleExtension({ dash: true })],
+        getDashArray: dashArray ?? [0, 0],
+        data: [{ path: [[srcX, srcY], [tgtX, tgtY]] }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        capRounded: true
+      }));
+      if (markerEnd === "Arrow" && tipsOpacity > 0) {
+        const head = computeArrowhead(x2, y2, x2 - x12, y2 - y12, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-end-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerStart === "Arrow" && tipsOpacity > 0) {
+        const head = computeArrowhead(x12, y12, x12 - x2, y12 - y2, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-start-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerEnd === "Tick" && tipsOpacity > 0) {
+        const tick2 = computeTickCap(x2, y2, x2 - x12, y2 - y12, arrowDataSize);
+        if (tick2) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-end-tick-${uid2}-${i2}`,
+            data: [{ path: tick2 }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (markerStart === "Tick" && tipsOpacity > 0) {
+        const tick2 = computeTickCap(x12, y12, x12 - x2, y12 - y2, arrowDataSize);
+        if (tick2) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-start-tick-${uid2}-${i2}`,
+            data: [{ path: tick2 }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (shape2.text) {
+        const pos = shape2.textPosition ?? "start";
+        let textX;
+        let textY;
+        if (pos === "start") {
+          textX = x12;
+          textY = y12;
+        } else if (pos === "end") {
+          textX = x2;
+          textY = y2;
+        } else {
+          textX = (x12 + x2) / 2;
+          textY = (y12 + y2) / 2;
+        }
+        let pixelOffset = [0, 0];
+        let textAnchor = "middle";
+        let alignmentBaseline = "center";
+        if (pos !== "middle") {
+          const dxT = x2 - x12;
+          const dyT = y2 - y12;
+          const lenT = Math.sqrt(dxT * dxT + dyT * dyT);
+          if (lenT > 0) {
+            const uxT = dxT / lenT;
+            const uyT = dyT / lenT;
+            const sign2 = pos === "start" ? -1 : 1;
+            const bufferPx = shape2.textBufferPx ?? 8;
+            const offsetX = sign2 * uxT * bufferPx;
+            const offsetY = sign2 * uyT * bufferPx;
+            pixelOffset = [offsetX, offsetY];
+            const absX = Math.abs(offsetX);
+            const absY = Math.abs(offsetY);
+            if (absX >= absY) {
+              textAnchor = offsetX > 0 ? "start" : "end";
+            }
+            if (absY >= absX) {
+              alignmentBaseline = offsetY > 0 ? "top" : "bottom";
+            }
+          }
+        } else if (len2 > 0) {
+          const belowPerp = pickBelowPerp(ux, uy);
+          const bufferPx = shape2.textBufferPx ?? 14;
+          pixelOffset = [-belowPerp[0] * bufferPx, -belowPerp[1] * bufferPx];
+          textAnchor = "middle";
+          alignmentBaseline = "center";
+        }
+        const middleAngle = pos === "middle" && len2 > 0 ? -readableAngle(Math.atan2(dy, dx) * 180 / Math.PI) : null;
+        if (labelOpacity <= 0)
+          return;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-line-text-${uid2}-${i2}`,
+          data: [{ position: [textX, textY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: pixelOffset,
+          getTextAnchor: textAnchor,
+          getAlignmentBaseline: alignmentBaseline,
+          ...middleAngle !== null && { getAngle: middleAngle }
+        }));
+      }
+    }
+    if (type2 === "ellipse") {
+      const { x1: x12, y1: y12, radiusX, radiusY, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      const polygon2 = computeEllipsePolygon(x12, y12, radiusX, radiusY);
+      const filled = fillOpacity > 0;
+      layers.push(new PolygonLayer({
+        ...base2,
+        id: `annotation-ellipse-${uid2}-${i2}`,
+        data: [{ polygon: polygon2 }],
+        getPolygon: (d) => d.polygon,
+        filled,
+        stroked: true,
+        getFillColor: filled ? [...fillColor, Math.round(fillOpacity * 255)] : [0, 0, 0, 0],
+        getLineColor: strokeColor,
+        getLineWidth: strokeWidth,
+        lineWidthUnits: "pixels",
+        ...dashArray ? {
+          extensions: [new PathStyleExtension({ dash: true })],
+          getDashArray: dashArray
+        } : {}
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-ellipse-text-${uid2}-${i2}`,
+          data: [{ position: [x12, y12 - radiusY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [0, -4],
+          getTextAnchor: "middle",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type2 === "polygon") {
+      const { points: points2, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      if (!points2 || points2.length < 3)
+        return;
+      const closedPath = [...points2, points2[0]];
+      if (fillOpacity > 0) {
+        layers.push(new PolygonLayer({
+          ...base2,
+          id: `annotation-polygon-fill-${uid2}-${i2}`,
+          data: [{ polygon: points2 }],
+          getPolygon: (d) => d.polygon,
+          stroked: false,
+          filled: true,
+          getFillColor: [...fillColor, Math.round(fillOpacity * 255)]
+        }));
+      }
+      layers.push(new PathLayer({
+        ...base2,
+        id: `annotation-polygon-${uid2}-${i2}`,
+        extensions: dashExt,
+        getDashArray: getDash,
+        data: [{ path: closedPath }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        jointRounded: true
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        const minX = Math.min(...points2.map((p) => p[0]));
+        const maxX = Math.max(...points2.map((p) => p[0]));
+        const minY = Math.min(...points2.map((p) => p[1]));
+        const topCenterX = (minX + maxX) / 2;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-polygon-text-${uid2}-${i2}`,
+          data: [{ position: [topCenterX, minY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [0, -4],
+          getTextAnchor: "middle",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type2 === "polyline") {
+      const { points: points2, markerStart, markerEnd } = shape2;
+      if (!points2 || points2.length < 2)
+        return;
+      let pathPoints = points2;
+      if (markerStart === "Arrow") {
+        const [x02, y02] = points2[0];
+        const [x12, y12] = points2[1];
+        const dx = x02 - x12;
+        const dy = y02 - y12;
+        const len2 = Math.sqrt(dx * dx + dy * dy);
+        if (len2 > 0) {
+          const ux = dx / len2;
+          const uy = dy / len2;
+          pathPoints = [[x02 - ux * arrowDataSize, y02 - uy * arrowDataSize], ...pathPoints.slice(1)];
+        }
+      }
+      if (markerEnd === "Arrow") {
+        const last = pathPoints[pathPoints.length - 1];
+        const prev2 = pathPoints[pathPoints.length - 2];
+        const dx = last[0] - prev2[0];
+        const dy = last[1] - prev2[1];
+        const len2 = Math.sqrt(dx * dx + dy * dy);
+        if (len2 > 0) {
+          const ux = dx / len2;
+          const uy = dy / len2;
+          const shortened = [last[0] - ux * arrowDataSize, last[1] - uy * arrowDataSize];
+          pathPoints = [...pathPoints.slice(0, -1), shortened];
+        }
+      }
+      layers.push(new PathLayer({
+        ...base2,
+        id: `annotation-polyline-${uid2}-${i2}`,
+        extensions: dashExt,
+        getDashArray: getDash,
+        data: [{ path: pathPoints }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        jointRounded: true,
+        capRounded: true
+      }));
+      if (markerStart === "Arrow" && tipsOpacity > 0) {
+        const [x02, y02] = points2[0];
+        const [x12, y12] = points2[1];
+        const head = computeArrowhead(x02, y02, x02 - x12, y02 - y12, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-polyline-start-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerEnd === "Arrow" && tipsOpacity > 0) {
+        const last = points2[points2.length - 1];
+        const prev2 = points2[points2.length - 2];
+        const dxArrow = last[0] - prev2[0];
+        const dyArrow = last[1] - prev2[1];
+        const head = computeArrowhead(last[0], last[1], dxArrow, dyArrow, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-polyline-end-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerStart === "Tick" && tipsOpacity > 0) {
+        const [x02, y02] = points2[0];
+        const [x12, y12] = points2[1];
+        const tick2 = computeTickCap(x02, y02, x02 - x12, y02 - y12, arrowDataSize);
+        if (tick2) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-polyline-start-tick-${uid2}-${i2}`,
+            data: [{ path: tick2 }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (markerEnd === "Tick" && tipsOpacity > 0) {
+        const last = points2[points2.length - 1];
+        const prev2 = points2[points2.length - 2];
+        const dxTick = last[0] - prev2[0];
+        const dyTick = last[1] - prev2[1];
+        const tick2 = computeTickCap(last[0], last[1], dxTick, dyTick, arrowDataSize);
+        if (tick2) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-polyline-end-tick-${uid2}-${i2}`,
+            data: [{ path: tick2 }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (shape2.text) {
+        const pos = shape2.textPosition ?? "start";
+        const bufferPx = shape2.textBufferPx ?? 8;
+        let textPt;
+        let dirX;
+        let dirY;
+        if (pos === "end") {
+          const last = points2[points2.length - 1];
+          const prev2 = points2[points2.length - 2];
+          textPt = last;
+          dirX = last[0] - prev2[0];
+          dirY = last[1] - prev2[1];
+        } else if (pos === "middle") {
+          const mx = points2.reduce((s2, p) => s2 + p[0], 0) / points2.length;
+          const my = points2.reduce((s2, p) => s2 + p[1], 0) / points2.length;
+          textPt = [mx, my];
+          dirX = 0;
+          dirY = 0;
+        } else {
+          [textPt] = points2;
+          dirX = points2[0][0] - points2[1][0];
+          dirY = points2[0][1] - points2[1][1];
+        }
+        const [textX, textY] = textPt;
+        const lenT = Math.sqrt(dirX * dirX + dirY * dirY);
+        let polylinePixelOffset = [0, 0];
+        let polylineTextAnchor = "middle";
+        let polylineAlignmentBaseline = pos === "middle" ? "center" : "bottom";
+        if (lenT > 0) {
+          const uxT = dirX / lenT;
+          const uyT = dirY / lenT;
+          const offX = uxT * bufferPx;
+          const offY = uyT * bufferPx;
+          polylinePixelOffset = [offX, offY];
+          if (Math.abs(offX) >= Math.abs(offY)) {
+            polylineTextAnchor = offX > 0 ? "start" : "end";
+          }
+          if (Math.abs(offY) >= Math.abs(offX)) {
+            polylineAlignmentBaseline = offY > 0 ? "top" : "bottom";
+          }
+        }
+        if (labelOpacity <= 0)
+          return;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-polyline-text-${uid2}-${i2}`,
+          data: [{ position: [textX, textY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: polylinePixelOffset,
+          getTextAnchor: polylineTextAnchor,
+          getAlignmentBaseline: polylineAlignmentBaseline
+        }));
+      }
+    }
+  });
+  if (dotShapes.length > 0) {
+    layers.push(new ScatterplotLayer({
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      id: "annotation-dots",
+      data: dotShapes.map(({ shape: s2, alpha: alpha2 }) => ({
+        position: getShapeCentroid(s2),
+        color: [...s2.strokeColor ?? [255, 255, 255], alpha2]
+      })),
+      getPosition: (d) => d.position,
+      getFillColor: (d) => d.color,
+      getRadius: 4,
+      radiusUnits: "pixels",
+      filled: true,
+      stroked: false
+    }));
+  }
+  if (clusterDotShapes.length > 0) {
+    const clusters = computeClusters(clusterDotShapes, zoom2);
+    layers.push(new ScatterplotLayer({
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      id: "annotation-clusters",
+      data: clusters,
+      getPosition: (d) => d.position,
+      getFillColor: (d) => [...d.color, 180],
+      getRadius: (d) => Math.max(6, 4 + Math.sqrt(d.count) * 2),
+      radiusUnits: "pixels",
+      filled: true,
+      stroked: true,
+      getLineColor: (d) => [...d.color, 220],
+      lineWidthMinPixels: 1.5
+    }));
+    const multiClusters = clusters.filter((c2) => c2.count > 1);
+    if (multiClusters.length > 0) {
+      layers.push(new TextLayer({
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        id: "annotation-cluster-counts",
+        data: multiClusters,
+        getPosition: (d) => d.position,
+        getText: (d) => String(d.count),
+        getColor: [255, 255, 255],
+        getSize: 10,
+        sizeUnits: "pixels",
+        fontWeight: "bold",
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center"
+      }));
+    }
+  }
+  const measureLayers = [];
+  shapes.forEach((shape2) => {
+    if (!shape2.showMeasure)
+      return;
+    const mIsSelected = shape2.uid === selectedShapeUid;
+    const label2 = getMeasurementLabel(shape2, physicalPixelSize, viewType);
+    if (!label2)
+      return;
+    const color2 = shape2.strokeColor ?? [255, 255, 255];
+    let mShapeOpacity = 1;
+    let mLabelFactor = 0;
+    if (mIsSelected || !semanticZoom || authoredZoom === null) {
+      mLabelFactor = 1;
+    } else {
+      const mZoomRatio = 2 ** (zoom2 - authoredZoom);
+      if (mZoomRatio < RATIO_DOT)
+        return;
+      if (mZoomRatio < RATIO_GEO_FADE) {
+        mShapeOpacity = (mZoomRatio - RATIO_DOT) / (RATIO_GEO_FADE - RATIO_DOT);
+      }
+      if (mZoomRatio >= RATIO_LABEL_FULL) {
+        mLabelFactor = 1;
+      } else if (mZoomRatio >= RATIO_LABEL) {
+        mLabelFactor = (mZoomRatio - RATIO_LABEL) / (RATIO_LABEL_FULL - RATIO_LABEL);
+      }
+    }
+    const measureOpacity = mShapeOpacity * mLabelFactor;
+    if (measureOpacity <= 0)
+      return;
+    const base2 = {
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      opacity: measureOpacity,
+      getText: (d) => d.text,
+      getPosition: (d) => d.position,
+      getColor: color2,
+      getSize: 13,
+      sizeUnits: "pixels",
+      fontFamily: LABEL_FONT_FAMILY,
+      fontWeight: "bold",
+      // 'auto' builds the font atlas from the actual rendered characters (e.g. µ, ²)
+      // instead of deck.gl's default ASCII-only atlas.
+      characterSet: "auto",
+      ...shape2.measureBackground ? {
+        background: true,
+        getBackgroundColor: textBgColor(color2),
+        backgroundPadding: [3, 1, 3, 2]
+      } : {}
+    };
+    if (shape2.type === "line") {
+      const mx = ((shape2.x1 ?? 0) + (shape2.x2 ?? 0)) / 2;
+      const my = ((shape2.y1 ?? 0) + (shape2.y2 ?? 0)) / 2;
+      const dx = (shape2.x2 ?? 0) - (shape2.x1 ?? 0);
+      const dy = (shape2.y2 ?? 0) - (shape2.y1 ?? 0);
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      if (len2 === 0)
+        return;
+      const perp = pickBelowPerp(dx / len2, dy / len2);
+      const angle2 = readableAngle(Math.atan2(dy, dx) * 180 / Math.PI);
+      measureLayers.push(new TextLayer({
+        ...base2,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [mx, my], text: label2 }],
+        getAngle: -angle2,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center",
+        getPixelOffset: [perp[0] * 16, perp[1] * 16]
+      }));
+    } else if (shape2.type === "polyline" && shape2.points?.length >= 2) {
+      const pts = shape2.points;
+      const mi = Math.floor((pts.length - 1) / 2);
+      const [ax, ay] = pts[mi];
+      const [bx, by] = pts[mi + 1];
+      const dx = bx - ax;
+      const dy = by - ay;
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      if (len2 === 0)
+        return;
+      const perp = pickBelowPerp(dx / len2, dy / len2);
+      const angle2 = readableAngle(Math.atan2(dy, dx) * 180 / Math.PI);
+      measureLayers.push(new TextLayer({
+        ...base2,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [(ax + bx) / 2, (ay + by) / 2], text: label2 }],
+        getAngle: -angle2,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center",
+        getPixelOffset: [perp[0] * 16, perp[1] * 16]
+      }));
+    } else if (shape2.type === "rectangle") {
+      const x02 = shape2.x ?? 0;
+      const y02 = shape2.y ?? 0;
+      const w2 = shape2.width ?? 0;
+      const h2 = shape2.height ?? 0;
+      const rx = x02 + (w2 >= 0 ? w2 : 0);
+      const ry = y02 + (h2 >= 0 ? h2 : 0);
+      measureLayers.push(new TextLayer({
+        ...base2,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [rx, ry], text: label2 }],
+        getTextAnchor: "end",
+        getAlignmentBaseline: "bottom",
+        getPixelOffset: [-6, -6]
+      }));
+    } else if (shape2.type === "ellipse") {
+      const cx = shape2.x1 ?? 0;
+      const cy = shape2.y1 ?? 0;
+      const ry = Math.abs(shape2.radiusY ?? 0);
+      measureLayers.push(new TextLayer({
+        ...base2,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [cx, cy + ry], text: label2 }],
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top",
+        getPixelOffset: [0, 8]
+      }));
+    } else if (shape2.type === "polygon" && shape2.points?.length >= 3) {
+      const xs = shape2.points.map((p) => p[0]);
+      const ys = shape2.points.map((p) => p[1]);
+      const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+      const maxY2 = Math.max(...ys);
+      measureLayers.push(new TextLayer({
+        ...base2,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [cx, maxY2], text: label2 }],
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top",
+        getPixelOffset: [0, 8]
+      }));
+    }
+  });
+  return [...selectionLayers, ...layers, ...measureLayers];
+}
+const defaultProps = {
+  // Array of annotation shape objects (see annotationShapeObj in @vitessce/schemas).
+  data: { type: "object", value: [], compare: true },
+  // UID of the shape to highlight with a selection halo.
+  selectedShapeUid: { type: "string", value: null },
+  // { x, y, unit } used to format measurement labels in physical units.
+  physicalPixelSize: { type: "object", value: null, compare: true },
+  // The zoom level at which the shapes were authored (reference for semantic zoom).
+  authoredZoom: { type: "number", value: null },
+  // Whether to apply semantic zoom (level-of-detail) based on authoredZoom.
+  semanticZoom: { type: "boolean", value: true },
+  // The view type in which the layer is rendered (affects measurement label formatting).
+  viewType: { type: "string", value: ViewType$1.SPATIAL },
+  // In-progress shape being drawn, as { type, vertices }.
+  inProgressShape: { type: "object", value: null, compare: true },
+  // Current mouse position (in data coordinates) while drawing.
+  hoverCoord: { type: "array", value: null, compare: true },
+  // Stroke color [r, g, b] of the in-progress shape preview.
+  previewStrokeColor: { type: "color", value: [255, 255, 0] }
+};
+class AnnotationLayer extends CompositeLayer {
+  // The semantic zoom and arrowhead sizes depend on the current zoom level,
+  // so the sublayers must also be re-rendered when the viewport changes.
+  // eslint-disable-next-line class-methods-use-this
+  shouldUpdateState({ changeFlags }) {
+    return changeFlags.propsOrDataChanged || changeFlags.viewportChanged;
+  }
+  /**
+   * Prefix the sublayer ID with this layer's ID (so that multiple
+   * AnnotationLayers can co-exist), and combine this layer's
+   * opacity with the per-shape opacity of the sublayer.
+   * Note: we avoid getSubLayerProps here, since it would
+   * overwrite the sublayer extensions (e.g., PathStyleExtension)
+   * and opacity values.
+   * @param {object} layer A DeckGL layer instance.
+   * @returns {object} The cloned layer instance.
+   */
+  wrapSubLayer(layer) {
+    const { id: id2, opacity: opacity2, pickable, visible } = this.props;
+    return layer.clone({
+      id: `${id2}-${layer.id}`,
+      opacity: layer.props.opacity * opacity2,
+      pickable,
+      visible
+    });
+  }
+  renderLayers() {
+    const { data: data2, selectedShapeUid, physicalPixelSize, authoredZoom, semanticZoom, viewType, inProgressShape, hoverCoord, previewStrokeColor } = this.props;
+    const zoom2 = this.context.viewport?.zoom ?? 0;
+    const visibleShapes = (data2 ?? []).filter((shape2) => shape2.visible !== false);
+    const annotationLayers = createAnnotationLayers(visibleShapes, zoom2, selectedShapeUid, physicalPixelSize, authoredZoom, semanticZoom, viewType);
+    const previewLayer = createPreviewLayer(inProgressShape, hoverCoord, previewStrokeColor.slice(0, 3));
+    return [
+      ...annotationLayers,
+      ...previewLayer ? [previewLayer] : []
+    ].map((layer) => this.wrapSubLayer(layer));
+  }
+}
+AnnotationLayer.layerName = "AnnotationLayer";
+AnnotationLayer.defaultProps = defaultProps;
 const FEATURE_AGGREGATION_STRATEGIES = ["first", "last", "sum", "mean"];
 function CellSetExpressionPlotOptions(props) {
   const {
@@ -245829,7 +247845,7 @@ function VolcanoPlot(props) {
       return [null, null];
     }
     let xExtentResult = extent$2(
-      computedData.flatMap((d) => extent$2(d.df.logFoldChange))
+      computedData.flatMap((d) => extent$2(d.df.logFoldChange.filter((v) => Number.isFinite(v))))
     );
     const xAbsMax = Math.max(Math.abs(xExtentResult[0]), Math.abs(xExtentResult[1]));
     xExtentResult = [-xAbsMax, xAbsMax];
@@ -245874,7 +247890,8 @@ function VolcanoPlot(props) {
     const g2 = svg.append("g");
     filteredData.forEach((comparisonObject) => {
       const obsSetG = g2.append("g");
-      const { df: filteredDf, metadata: metadata2 } = comparisonObject;
+      const { df: rawFilteredDf, metadata: metadata2 } = comparisonObject;
+      const filteredDf = rawFilteredDf.filter((d) => !Number.isNaN(d.minusLog10p) && !Number.isNaN(d.logFoldChange));
       const coordinationValues = metadata2.coordination_values;
       const rawObsSetPath = coordinationValues.obsSetFilter ? coordinationValues.obsSetFilter[0] : coordinationValues.obsSetSelection[0];
       const obsSetPath = [...rawObsSetPath];
@@ -245977,7 +247994,7 @@ function VolcanoPlotOptions(props) {
       valueLabelDisplay: "auto",
       step: 1,
       min: 0,
-      max: 100
+      max: 50
     }
   ))), /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { className: classes2.labelCell, variant: "head", scope: "row" }, /* @__PURE__ */ React__default.createElement(
     "label",
@@ -245999,7 +248016,7 @@ function VolcanoPlotOptions(props) {
       valueLabelDisplay: "auto",
       step: 0.5,
       min: 0,
-      max: 50
+      max: 10
     }
   ))), /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { className: classes2.labelCell, variant: "head", scope: "row" }, /* @__PURE__ */ React__default.createElement(
     "label",
@@ -246144,6 +248161,9 @@ function VolcanoPlotSubscriber(props) {
   const onFeatureClick = useCallback((featureId2) => {
     setFeatureSelection([featureId2]);
   }, [setFeatureSelection]);
+  const anyNonEmpty = useMemo(() => featureStats?.some(
+    (d) => !d.metadata?.analysis_params?.is_empty
+  ), [featureStats]);
   return /* @__PURE__ */ React__default.createElement(
     TitleInfo,
     {
@@ -246169,7 +248189,7 @@ function VolcanoPlotSubscriber(props) {
         }
       )
     },
-    /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, featureStats ? /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, featureStats ? anyNonEmpty ? /* @__PURE__ */ React__default.createElement(
       VolcanoPlot,
       {
         theme,
@@ -246192,7 +248212,7 @@ function VolcanoPlotSubscriber(props) {
         featureLabelSignificanceThreshold,
         featureLabelFoldChangeThreshold
       }
-    ) : /* @__PURE__ */ React__default.createElement("span", null, "Select at least one ", obsType, " set."))
+    ) : /* @__PURE__ */ React__default.createElement("span", null, "Differential expression tests were not performed for the currently selected groups due to insufficient data.") : /* @__PURE__ */ React__default.createElement("span", null, "Select at least one ", obsType, " set."))
   );
 }
 const MAX_BAR_SIZE = 40;
@@ -246257,6 +248277,7 @@ function CellSetCompositionBarPlot(props) {
           interceptExpectedSample: df.interceptExpectedSample[i2],
           effectExpectedSample: df.effectExpectedSample[i2],
           isCredibleEffect: df.isCredibleEffect[i2],
+          significanceText: df.isCredibleEffect[i2] ? " " : "NS",
           // Boolean flag for wasReferenceObsSet (check metadata)
           isReferenceSet: obsSetId === referenceCellType
         };
@@ -246301,68 +248322,103 @@ function CellSetCompositionBarPlot(props) {
     }
     return void 0;
   }, [computedData]);
+  const nsTextAlign = useMemo(() => {
+    if (computedData) {
+      const firstNotSig = computedData.find((d) => !d.isCredibleEffect);
+      return firstNotSig?.logFoldChange < 0 ? "right" : "left";
+    }
+    return "center";
+  }, [computedData]);
+  const areAnySignificant = useMemo(() => computedData?.some(
+    (d) => d.isCredibleEffect
+  ), [computedData]);
   const xScale = {
     domain: xExtent
   };
   const spec = {
-    mark: { type: "bar", stroke: "black", cursor: "pointer" },
-    params: [
+    layer: [
       {
-        name: "bar_select",
-        select: {
-          type: "point",
-          on: "click[event.shiftKey === false]",
-          fields: ["obsSetPath"],
-          empty: "none"
+        params: [
+          {
+            name: "bar_select",
+            select: {
+              type: "point",
+              on: "click[event.shiftKey === false]",
+              fields: ["obsSetPath"],
+              empty: "none"
+            }
+          },
+          {
+            name: "shift_bar_select",
+            select: {
+              type: "point",
+              on: "click[event.shiftKey]",
+              fields: ["obsSetPath"],
+              empty: "none"
+            }
+          }
+        ],
+        mark: { type: "bar", stroke: "black", cursor: "pointer" },
+        encoding: {
+          y: {
+            field: "keyName",
+            type: "nominal",
+            axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+            title: `${captializedObsType} Set`,
+            sort: keys2
+          },
+          x: {
+            // TODO: support using intercept+effect here based on user-selected options?
+            field: "logFoldChange",
+            type: "quantitative",
+            title: "Log fold-change",
+            scale: xScale
+          },
+          color: {
+            field: "key",
+            type: "nominal",
+            scale: colorScale2,
+            legend: null
+          },
+          fillOpacity: {
+            field: "isCredibleEffect",
+            type: "nominal",
+            scale: opacityScale
+          },
+          strokeWidth: {
+            field: "isReferenceSet",
+            type: "nominal",
+            scale: strokeWidthScale,
+            legend: null
+          },
+          tooltip: {
+            field: "effectExpectedSample",
+            type: "quantitative"
+          }
         }
       },
       {
-        name: "shift_bar_select",
-        select: {
-          type: "point",
-          on: "click[event.shiftKey]",
-          fields: ["obsSetPath"],
-          empty: "none"
+        mark: { type: "text", align: nsTextAlign, dx: nsTextAlign === "right" ? -5 : 5 },
+        encoding: {
+          y: {
+            field: "keyName",
+            type: "nominal",
+            axis: { labelExpr: `substring(datum.label, ${keyLength})` },
+            title: `${captializedObsType} Set`,
+            sort: keys2
+          },
+          x: {
+            field: "logFoldChange",
+            type: "quantitative",
+            title: "Log fold-change",
+            scale: xScale
+          },
+          text: {
+            field: "significanceText"
+          }
         }
       }
     ],
-    encoding: {
-      y: {
-        field: "keyName",
-        type: "nominal",
-        axis: { labelExpr: `substring(datum.label, ${keyLength})` },
-        title: `${captializedObsType} Set`,
-        sort: keys2
-      },
-      x: {
-        // TODO: support using intercept+effect here based on user-selected options?
-        field: "logFoldChange",
-        type: "quantitative",
-        title: "Log fold-change",
-        scale: xScale
-      },
-      color: {
-        field: "key",
-        type: "nominal",
-        scale: colorScale2,
-        legend: null
-      },
-      fillOpacity: {
-        field: "isCredibleEffect",
-        type: "nominal",
-        scale: opacityScale
-      },
-      strokeWidth: {
-        field: "isReferenceSet",
-        type: "nominal",
-        scale: strokeWidthScale,
-        legend: null
-      },
-      tooltip: {
-        field: "effectExpectedSample",
-        type: "quantitative"
-      }
-    },
     // TODO: for width, also subtract length of longest y-axis set name label.
     width: clamp$6(width2 - marginRight, 10, Infinity),
     height: clamp$6(height2 - marginBottom, 10, Infinity),
@@ -246382,7 +248438,7 @@ function CellSetCompositionBarPlot(props) {
     interceptExpectedSample: item.datum.interceptExpectedSample,
     effectExpectedSample: item.datum.effectExpectedSample
   }), [captializedObsType]);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, areAnySignificant ? /* @__PURE__ */ React__default.createElement(
     VegaPlot,
     {
       data: computedData,
@@ -246390,7 +248446,7 @@ function CellSetCompositionBarPlot(props) {
       signalListeners,
       getTooltipText
     }
-  );
+  ) : /* @__PURE__ */ React__default.createElement("p", null, "No results were significant for the selected conditions."));
 }
 function CellSetCompositionBarPlotSubscriber(props) {
   const {
@@ -247062,12 +249118,127 @@ function FeatureStatsTableSubscriber(props) {
     ) : /* @__PURE__ */ React__default.createElement("p", { style: { padding: "12px" } }, "Select at least one ", obsType, " set.")
   );
 }
+function pathToKey(pathArr) {
+  return pathArr.join("___");
+}
+function keyToPath(keyStr) {
+  return keyStr.split("___");
+}
+function SingleCellSetSelector(props) {
+  const {
+    multiObsSetSelection,
+    singleObsSetSelection,
+    setSingleObsSetSelection
+  } = props;
+  const handleChange = useCallback((event2) => {
+    if (event2.target.value === "__none__") {
+      setSingleObsSetSelection(null);
+    } else {
+      const nextPath = keyToPath(event2.target.value);
+      setSingleObsSetSelection([
+        nextPath
+      ]);
+    }
+  }, []);
+  const hasMultiOptions = Array.isArray(multiObsSetSelection) && multiObsSetSelection.length > 0;
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, size: 12 }, /* @__PURE__ */ React__default.createElement(
+    NativeSelect,
+    {
+      onChange: handleChange,
+      value: singleObsSetSelection ? pathToKey(singleObsSetSelection) : "__none__",
+      variant: "standard",
+      sx: { width: "100%" }
+    },
+    /* @__PURE__ */ React__default.createElement("option", { value: "__none__" }, "None"),
+    hasMultiOptions ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, multiObsSetSelection.map((o2) => /* @__PURE__ */ React__default.createElement("option", { value: pathToKey(o2) }, o2.at(-1)))) : null
+  ));
+}
+function SingleCellSetSelectorSubscriber(props) {
+  const {
+    title: title2 = "Cell Type of Interest",
+    coordinationScopes: coordinationScopesRaw,
+    removeGridComponent,
+    theme,
+    helpText = ViewHelpMapping.SINGLE_OBS_SET_SELECTOR
+  } = props;
+  useLoaders();
+  const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+  const [{
+    obsType,
+    obsSetColor
+  }, {
+    setObsType,
+    setObsSetColor
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.SINGLE_OBS_SET_SELECTOR],
+    coordinationScopes
+  );
+  const obsSetSelectionScopes = useMultiCoordinationScopes(
+    CoordinationType$1.OBS_SET_SELECTION,
+    coordinationScopes
+  );
+  const [{
+    obsSetSelection: multiObsSetSelection
+  }, {
+    setObsSetSelection: setMultiObsSetSelection
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.SINGLE_OBS_SET_SELECTOR],
+    { obsSetSelection: obsSetSelectionScopes?.[0] }
+  );
+  const [{
+    obsSetSelection: singleObsSetSelectionArr
+  }, {
+    setObsSetSelection: setSingleObsSetSelection
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.SINGLE_OBS_SET_SELECTOR],
+    { obsSetSelection: obsSetSelectionScopes?.[1] }
+  );
+  const singleObsSetSelection = singleObsSetSelectionArr?.[0];
+  useEffect(() => {
+    if (!Array.isArray(multiObsSetSelection) || multiObsSetSelection.length === 0) {
+      setSingleObsSetSelection(null);
+    } else {
+      const multiContainsSingle = multiObsSetSelection.some(
+        (setPath) => isEqual$3(setPath, singleObsSetSelection)
+      );
+      if (!multiContainsSingle) {
+        setSingleObsSetSelection([multiObsSetSelection?.[0]]);
+      }
+    }
+  }, [multiObsSetSelection]);
+  const errors = [];
+  const isReady = useReady([]);
+  return /* @__PURE__ */ React__default.createElement(
+    TitleInfo,
+    {
+      title: title2,
+      removeGridComponent,
+      theme,
+      isReady,
+      helpText,
+      errors,
+      withPadding: false
+    },
+    Array.isArray(multiObsSetSelection) && multiObsSetSelection.length > 0 ? /* @__PURE__ */ React__default.createElement(
+      SingleCellSetSelector,
+      {
+        theme,
+        obsType,
+        obsSetColor,
+        multiObsSetSelection,
+        singleObsSetSelection,
+        setSingleObsSetSelection
+      }
+    ) : /* @__PURE__ */ React__default.createElement("p", { style: { padding: "12px" } }, "Select at least one ", obsType, " set.")
+  );
+}
 export {
   BaseDecoder as B,
   CellSetExpressionPlotSubscriber as C,
   DotPlotSubscriber as D,
   ExpressionHistogramSubscriber as E,
   FeatureBarPlotSubscriber as F,
+  SingleCellSetSelectorSubscriber as S,
   TreemapSubscriber as T,
   VolcanoPlotSubscriber as V,
   CellSetSizesPlotSubscriber as a,