@vitessce/all 4.0.8 → 4.0.9

package/dist/{index-CzTdHRMx.js → index-EoA5CfO8.js}

@@ -8,7 +8,7 @@ var __privateSet = (obj, member, value2, setter2) => (__accessCheck(obj, member,
 var _inner;
 import * as React from "react";
 import React__default, { useContext, forwardRef as forwardRef$1, useRef, useMemo as useMemo$1, createContext as createContext$1, createElement, isValidElement, cloneElement, Children, PureComponent, useEffect, useState, version as version$6, useLayoutEffect as useLayoutEffect$1, useImperativeHandle, Component as Component$1, useCallback, useDeferredValue, Suspense, useReducer } from "react";
-import { useLoaders, useCoordinationScopes, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useGridItemSize, useMultiObsPoints, usePointMultiObsLabels, usePointMultiObsFeatureMatrixIndices, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useViewConfigStoreApi, useViewConfig, useSetViewConfig, createLoaders, useWarning, useGenomicProfilesData, shallowDiff, shallowDiffByChannelWithKeys, shallowDiffByLayer, shallowDiffByChannelCoordinationWithKeys, shallowDiffByChannel, shallowDiffByLayerCoordinationWithKeys, useMemoCustomComparison, useSegmentationMultiObsColors, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useMultiCoordinationScopes, useComparisonMetadata, logConfig, VitSContainer } from "@vitessce/vit-s";
+import { useLoaders, useCoordinationScopes, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useViewMapping, useSetComponentHover, useSetComponentViewInfo, useAnnotationFrameCoordination, useInitialCoordination, useDeckCanvasSize, useAnnotationStoryData, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useGridItemSize, useMultiObsPoints, usePointMultiObsLabels, usePointMultiObsFeatureMatrixIndices, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useViewConfigStoreApi, useViewConfig, useSetViewConfig, createLoaders, useWarning, useGenomicProfilesData, shallowDiff, shallowDiffByChannelWithKeys, shallowDiffByLayer, shallowDiffByChannelCoordinationWithKeys, shallowDiffByChannel, shallowDiffByLayerCoordinationWithKeys, useMemoCustomComparison, useSegmentationMultiObsColors, useMatchingLoader, useColumnNameMapping, useFeatureStatsData, useObsSetStatsData, useAsyncFunction, useFeatureSetStatsData, useMultiCoordinationScopes, useComparisonMetadata, logConfig, VitSContainer } from "@vitessce/vit-s";
 import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
@@ -4261,7 +4261,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(),
@@ -4292,7 +4292,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({
@@ -9167,7 +9168,8 @@ const ViewType$1 = {
   TREEMAP: "treemap",
   SAMPLE_SET_PAIR_MANAGER: "sampleSetPairManager",
   FEATURE_STATS_TABLE: "featureStatsTable",
-  SINGLE_OBS_SET_SELECTOR: "singleObsSetSelector"
+  SINGLE_OBS_SET_SELECTOR: "singleObsSetSelector",
+  ANNOTATION_CONTROLLER: "annotationController"
 };
 const DataType$3 = {
   OBS_LABELS: "obsLabels",
@@ -9188,7 +9190,8 @@ const DataType$3 = {
   COMPARISON_METADATA: "comparisonMetadata",
   FEATURE_STATS: "featureStats",
   FEATURE_SET_STATS: "featureSetStats",
-  OBS_SET_STATS: "obsSetStats"
+  OBS_SET_STATS: "obsSetStats",
+  ANNOTATION_STORY: "annotationStory"
 };
 const AsyncFunctionType = {
   // String input (rather than Node input)
@@ -9220,6 +9223,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",
@@ -9504,7 +9508,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 STATUS$1 = {
   SUCCESS: "success"
@@ -9536,7 +9548,8 @@ const ViewHelpMapping = {
   SAMPLE_SET_PAIR_MANAGER: "Select pairs of sample groups.",
   FEATURE_STATS_TABLE: "This table displays per-feature statistics, for example, from a differential expression test.",
   LAYER_CONTROLLER_BETA: "The spatial layer controller provides an interface for manipulating the visualization layers displayed in the spatial view.",
-  SPATIAL_BETA: "The spatial view displays (potentially layered) spatially-resolved data including RGB or multiplexed images, segmentations of observations (bitmask- or polygon-based), and/or points (e.g., representing FISH transcripts)."
+  SPATIAL_BETA: "The spatial view displays (potentially layered) spatially-resolved data including RGB or multiplexed images, segmentations of observations (bitmask- or polygon-based), and/or points (e.g., representing FISH transcripts).",
+  ANNOTATION_CONTROLLER: "The annotation controller displays a guided sequence of narrative frames, each with descriptive text and optional shapes (rectangles, lines, arrows, ellipses, or polygons)."
 };
 ({
   // For new file types
@@ -9552,6 +9565,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_SEGMENTATIONS_JSON]: DataType$3.OBS_SEGMENTATIONS,
   [FileType$1.OBS_SETS_CSV]: DataType$3.OBS_SETS,
   [FileType$1.OBS_SETS_JSON]: DataType$3.OBS_SETS,
+  [FileType$1.ANNOTATION_STORY_JSON]: DataType$3.ANNOTATION_STORY,
   [FileType$1.IMAGE_OME_ZARR]: DataType$3.IMAGE,
   [FileType$1.OBS_SEGMENTATIONS_OME_ZARR]: DataType$3.OBS_SEGMENTATIONS,
   [FileType$1.OBS_FEATURE_MATRIX_ANNDATA_ZARR]: DataType$3.OBS_FEATURE_MATRIX,
@@ -9674,7 +9688,8 @@ const ViewHelpMapping = {
   [DataType$3.OBS_SET_STATS]: [
     CoordinationType$1.OBS_TYPE
     // TODO: should sampleType, obsSetSelection, and/or sampleSetSelection be used here?
-  ]
+  ],
+  [DataType$3.ANNOTATION_STORY]: []
 });
 const ALT_ZARR_STORE_TYPES = {
   // For AnnData:
@@ -9807,7 +9822,9 @@ const ALT_ZARR_STORE_TYPES = {
   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]: [
@@ -9899,7 +9916,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,
@@ -10015,7 +10039,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,
@@ -10093,7 +10124,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,
@@ -11193,6 +11244,124 @@ const moleculesLayerObj = 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
+]);
+const annotationShapesArray = 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()
+});
+const annotationStoryObj = 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)
+});
 class PluginViewType {
   name;
   component;
@@ -18426,7 +18595,7 @@ const { tss } = createTss({
   },
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
-const useStyles$z = tss.create({});
+const useStyles$A = tss.create({});
 function createChainedFunction$1(...funcs) {
   return funcs.reduce((acc, func) => {
     if (func == null) {
@@ -19537,7 +19706,7 @@ var values$5 = Object.values || function(obj) {
     return obj[k];
   });
 };
-var defaultProps$Q = {
+var defaultProps$R = {
   component: "div",
   childFactory: function childFactory(child) {
     return child;
@@ -19664,7 +19833,7 @@ TransitionGroup.propTypes = {
    */
   childFactory: _pt.func
 };
-TransitionGroup.defaultProps = defaultProps$Q;
+TransitionGroup.defaultProps = defaultProps$R;
 const UNINITIALIZED = {};
 function useLazyRef(init2, initArg) {
   const ref2 = React.useRef(UNINITIALIZED);
@@ -45818,6 +45987,12 @@ InputAdornment$1.propTypes = {
 const AddIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
 }), "Add");
+const ArrowRight = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
+  d: "m10 17 5-5-5-5z"
+}), "ArrowRight");
+const ArrowLeft = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
+  d: "m14 7-5 5 5 5z"
+}), "ArrowLeft");
 const CenterFocusStrong = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m-7 7H3v4c0 1.1.9 2 2 2h4v-2H5zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2m0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2z"
 }), "CenterFocusStrong");
@@ -72714,7 +72889,7 @@ const Popper = React.forwardRef((props, ref2) => {
   }, [handlePopperRef]);
   React.useImperativeHandle(popperRefProp, () => popperRef.current, []);
   const [exited, setExited] = React.useState(true);
-  const { theme } = useStyles$z();
+  const { theme } = useStyles$A();
   const rtlPlacement = flipPlacement(initialPlacement, theme);
   const [placement, setPlacement] = React.useState(rtlPlacement);
   React.useEffect(() => {
@@ -73448,7 +73623,7 @@ var VariableSizeList$1 = /* @__PURE__ */ createListComponent({
 });
 const VariableSizeList = VariableSizeList$1;
 const LIST_ROW_HEIGHT$1 = 48;
-const useStyles$y = makeStyles()(() => ({
+const useStyles$z = makeStyles()(() => ({
   searchInput: {
     lineHeight: "initial",
     height: "auto !important"
@@ -73488,7 +73663,7 @@ const ListboxComponent$1 = React__default.forwardRef((props, ref2) => {
 });
 function SimpleAutocomplete(props) {
   const { getMatches, onChange, textInputLabel = "Enter a gene", getItemLabel = (option) => option.label } = props;
-  const { classes: classes2 } = useStyles$y();
+  const { classes: classes2 } = useStyles$z();
   const [potentialItems, setPotentialItems] = useState([]);
   const handleInputChange = async (_event, value2) => {
     if (!value2) {
@@ -83038,7 +83213,7 @@ function defaultUrlTransform(value2) {
   }
   return "";
 }
-const useStyles$x = makeStyles()((theme) => ({
+const useStyles$y = makeStyles()((theme) => ({
   description: {
     "& p, details, table": {
       fontSize: "80%",
@@ -83075,7 +83250,7 @@ const useStyles$x = makeStyles()((theme) => ({
 }));
 function Description(props) {
   const { description: description2, metadata: metadata2, descriptionType } = props;
-  const { classes: classes2 } = useStyles$x();
+  const { classes: classes2 } = useStyles$y();
   return jsxs("div", { className: classes2.description, children: [descriptionType && descriptionType === DescriptionType.MARKDOWN ? jsx$1(Markdown, { children: description2 }) : jsx$1("p", { children: description2 }), metadata2 && Array.from(metadata2.entries()).map(([layerIndex, { name: layerName, metadata: metadataRecord }]) => metadataRecord && Object.entries(metadataRecord).length > 0 ? jsxs("details", { children: [jsx$1("summary", { children: layerName }), jsx$1("div", { className: classes2.metadataContainer, children: jsx$1("table", { children: jsx$1("tbody", { children: Object.entries(metadataRecord).map(([key2, value2]) => jsxs("tr", { children: [jsx$1("th", { title: key2, children: key2 }), jsx$1("td", { title: value2, children: value2 })] }, key2)) }) }) })] }, layerIndex) : null)] });
 }
 function DescriptionSubscriber(props) {
@@ -93697,7 +93872,7 @@ const Tooltip$2 = /* @__PURE__ */ React.forwardRef((props, ref2) => {
   }, extraProps), getChildren());
 });
 const nodeHeight = 32;
-const useStyles$w = makeStyles()((theme) => ({
+const useStyles$x = makeStyles()((theme) => ({
   setsManager: {
     position: "relative",
     width: "100%",
@@ -93864,7 +94039,7 @@ const useStyles$w = makeStyles()((theme) => ({
 }));
 function SetsManagerTreeGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$z();
+  const { theme } = useStyles$A();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.setsManagerTree, styles: {
     ".rc-tree": {
       paddingLeft: "0",
@@ -94205,7 +94380,7 @@ function HelpTooltipGlobalStyles(props) {
 }
 function PopoverGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$z();
+  const { theme } = useStyles$A();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.popover, styles: {
     ".rc-tooltip-inner": {
       boxSizing: "border-box",
@@ -98889,7 +99064,7 @@ function NamedSetNodeStatic(props) {
   const onClick = level === 0 && !expanded ? () => onCheckLevel(nodeKey, nextLevelToCheck) : () => onNodeView(path2);
   const tooltipProps = disableTooltip ? { visible: false } : {};
   const popoverMenuConfig = makeNodeViewMenuConfig(props);
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsxs("span", { children: [jsx$1(HelpTooltip, { title: tooltipText, ...tooltipProps, children: jsx$1("button", { type: "button", onClick, onKeyPress: (e3) => callbackOnKeyPress(e3, "v", () => onNodeView(path2)), className: classes2.titleButton, children: title2 }) }), popoverMenuConfig.length > 0 ? jsx$1(PopoverMenu, { menuConfig: makeNodeViewMenuConfig(props), color: level > 0 && editable ? color2 || getDefaultColor(theme) : null, setColor: (c2) => onNodeSetColor(path2, c2), children: jsx$1("span", { children: jsx$1(SvgMenu, { className: classes2.nodeMenuIcon, "aria-label": "Open Node View Menu" }) }) }) : null, level > 0 && isChecking ? checkbox2 : null, level > 0 && jsx$1("span", { className: classes2.nodeSizeLabel, children: niceSize })] });
 }
 function NamedSetNodeEditing(props) {
@@ -98901,7 +99076,7 @@ function NamedSetNodeEditing(props) {
       onNodeSetName(path2, currentTitle, true);
     }
   }
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsxs("span", { className: classes2.titleButtonWithInput, children: [jsx$1("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: true,
@@ -98927,7 +99102,7 @@ function LevelsButtons(props) {
       onCheckLevel(nodeKey, newLevel);
     }
   }
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsx$1("div", { className: classes2.levelButtonsContainer, children: range$e(1, height2 + 1).map((i2) => {
     const isChecked = isEqual$3(path2, checkedLevelPath) && i2 === checkedLevelIndex;
     return jsx$1("div", { children: jsx$1(HelpTooltip, { title: getLevelTooltipText(i2), children: jsx$1("input", { className: clsx(classes2.levelRadioButton, { [classes2.levelRadioButtonChecked]: isChecked && !hasColorEncoding }), type: "checkbox", value: i2, checked: isChecked && hasColorEncoding, onChange: onCheck }) }) }, i2);
@@ -99011,7 +99186,7 @@ let TreeNode$1 = class TreeNode extends TreeNode$2 {
 };
 function PlusButton(props) {
   const { datatype, onError, onImportTree, onCreateLevelZeroNode, importable, editable } = props;
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   const onImport = useCallback((importHandler, mimeType) => () => {
     const uploadInputNode = document.createElement("input");
     uploadInputNode.setAttribute("type", "file");
@@ -99128,7 +99303,7 @@ function SetsManager(props) {
       }, onNodeCheckNewName, onNodeSetIsEditing: setIsEditingNodeName, onNodeRemove, onExportLevelZeroNodeJSON, onExportLevelZeroNodeTabular, onExportSetJSON, disableTooltip: isDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: renderTreeNodes(node2.children, readOnly, newPath) }, pathToKey$1(newPath));
     });
   }
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsxs("div", { className: classes2.setsManager, children: [jsx$1(SetsManagerTreeGlobalStyles, { classes: classes2 }), jsxs("div", { className: classes2.setsManagerTree, children: [jsx$1(Tree$1, { draggable: false, checkable, checkedKeys: setSelectionKeys, expandedKeys: setExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), children: renderTreeNodes(processedSets.tree, true, []) }), jsx$1(Tree$1, { draggable: true, checkable, checkedKeys: additionalSetSelectionKeys, expandedKeys: additionalSetExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), onDrop: (info2) => {
     const { eventKey: dropKey } = info2.node.props;
     const { eventKey: dragKey } = info2.dragNode.props;
@@ -111499,6 +111674,12 @@ function multiply$4(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];
@@ -111622,6 +111803,7 @@ function angle$3(a2, b2) {
 }
 var sub$1 = subtract$1;
 var mul$1 = multiply$4;
+var dist$1 = distance$3;
 var len = length$5;
 var sqrLen = squaredLength$2;
 (function() {
@@ -126092,7 +126274,7 @@ function noop$9() {
 const getCursor$1 = ({
   isDragging
 }) => isDragging ? "grabbing" : "grab";
-const defaultProps$P = {
+const defaultProps$Q = {
   id: "",
   width: "100%",
   height: "100%",
@@ -126223,7 +126405,7 @@ class Deck {
       this._lastPointerDownInfo = pickedInfo.result[0] || pickedInfo.emptyInfo;
     });
     this.props = {
-      ...defaultProps$P,
+      ...defaultProps$Q,
       ...props
     };
     props = this.props;
@@ -126725,7 +126907,7 @@ class Deck {
     metrics.gpuMemory = memoryStats.get("GPU Memory").count;
   }
 }
-_defineProperty$3(Deck, "defaultProps", defaultProps$P);
+_defineProperty$3(Deck, "defaultProps", defaultProps$Q);
 _defineProperty$3(Deck, "VERSION", deckGlobal.VERSION);
 class ShaderAttribute {
   constructor(dataColumn, opts2) {
@@ -129480,7 +129662,7 @@ const areViewportsEqual = memoize$3(({
   return oldViewport.equals(viewport2);
 });
 let pickingColorCache = new Uint8ClampedArray(0);
-const defaultProps$O = {
+const defaultProps$P = {
   data: {
     type: "data",
     value: EMPTY_ARRAY$1,
@@ -130355,7 +130537,7 @@ class Layer extends Component {
     this.setNeedsUpdate();
   }
 }
-_defineProperty$3(Layer, "defaultProps", defaultProps$O);
+_defineProperty$3(Layer, "defaultProps", defaultProps$P);
 _defineProperty$3(Layer, "layerName", "Layer");
 const TRACE_RENDER_LAYERS = "compositeLayer.renderLayers";
 class CompositeLayer extends Layer {
@@ -131514,7 +131696,7 @@ const parameters = {
   blendEquation: [32774, 32774],
   depthTest: false
 };
-const defaultProps$N = {
+const defaultProps$O = {
   getFilterValue: {
     type: "accessor",
     value: 0
@@ -131690,8 +131872,126 @@ class DataFilterExtension extends LayerExtension {
     }
   }
 }
-_defineProperty$3(DataFilterExtension, "defaultProps", defaultProps$N);
+_defineProperty$3(DataFilterExtension, "defaultProps", defaultProps$O);
 _defineProperty$3(DataFilterExtension, "extensionName", "DataFilterExtension");
+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: dash2 = false,
+    offset: offset2 = false,
+    highPrecisionDash = false
+  } = {}) {
+    super({
+      dash: dash2 || 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]
 };
@@ -205110,22 +205410,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-akfNT_LS.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-63HBqTiG.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-CR3kVxsB.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-CIpLYaya.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-g9i0I1mK.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-D1RcEgtg.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-i970u6wg.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DXSq15HV.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-BKJk_mLF.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-Cf0TB9M_.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-B4lSBwWt.js").then(async (m2) => {
+  () => import("./lerc-uTsWAc7Y.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-CA4EiJGO.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-Dp3HLfwF.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -215621,7 +215921,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 },
@@ -215638,9 +215938,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),
@@ -215656,7 +215956,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;
@@ -216958,7 +217258,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",
@@ -217045,7 +217345,7 @@ const OverviewLayer = class extends CompositeLayer {
   }
 };
 OverviewLayer.layerName = "OverviewLayer";
-OverviewLayer.defaultProps = defaultProps$3;
+OverviewLayer.defaultProps = defaultProps$3$1;
 function getPosition$1(boundingBox, position2, length2) {
   const viewWidth2 = boundingBox[2][0] - boundingBox[0][0];
   const viewHeight2 = boundingBox[2][1] - boundingBox[0][1];
@@ -218058,7 +218358,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.
@@ -218175,7 +218475,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
 
@@ -218517,7 +218817,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 },
@@ -218781,7 +219081,7 @@ class BitmaskLayer2 extends XRLayer {
   }
 }
 BitmaskLayer2.layerName = "BitmaskLayer";
-BitmaskLayer2.defaultProps = defaultProps$1;
+BitmaskLayer2.defaultProps = defaultProps$2;
 var isNumeric$2 = /^-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i, mathceil = Math.ceil, mathfloor$1 = Math.floor, bignumberError = "[BigNumber Error] ", tooManyDigits = bignumberError + "Number primitive has more than 15 significant digits: ", BASE$1 = 1e14, LOG_BASE$1 = 14, MAX_SAFE_INTEGER$3 = 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$3(configObject) {
   var div2, convertBase2, parseNumeric, P2 = 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 = {
@@ -221724,7 +222024,7 @@ function ringArea(coords) {
   return total * FACTOR;
 }
 const DEFAULT_THRESHOLD = 1;
-const defaultProps = {
+const defaultProps$1 = {
   // for text
   obsSetPath: { type: "object" },
   sampleSetPath: { type: "object" },
@@ -221898,8 +222198,1078 @@ class ContourLayerWithText extends ContourLayer {
   }
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
-ContourLayerWithText.defaultProps = defaultProps;
-const useStyles$v = makeStyles()(() => ({
+ContourLayerWithText.defaultProps = defaultProps$1;
+const ARROW_SCREEN_PX = 14;
+const LABEL_FONT_FAMILY$1 = '"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((n3) => !Number.isNaN(n3) && n3 >= 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(n3) {
+  return Math.round(n3).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$1,
+          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$1,
+          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$1,
+          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$1,
+          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$1,
+          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$1,
+      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 useStyles$w = makeStyles()(() => ({
   toolButton: {
     display: "inline-flex",
     "&:active": {
@@ -221961,12 +223331,12 @@ const useStyles$v = makeStyles()(() => ({
 }));
 function IconTool(props) {
   const { alt, onClick, isActive: isActive2, children: children3 } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsx$1("button", { className: clsx(classes2.toolIcon, { [classes2.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children3 });
 }
 function IconButton(props) {
   const { alt, onClick, children: children3 } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsx$1("button", { className: clsx(classes2.toolIcon, classes2.toolButton), onClick, type: "button", title: alt, children: children3 });
 }
 function ToolMenu(props) {
@@ -221974,7 +223344,7 @@ function ToolMenu(props) {
   const lassoIconAltText = "Select lasso";
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
@@ -222456,11 +223826,13 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     this.cellSetsLabelPrevZoom = null;
     this.cellSetsLayers = [];
     this.contourLayers = [];
+    this.annotationLayer = null;
     this.onUpdateCellsData();
     this.onUpdateCellsLayer();
     this.onUpdateCellSetsLayers();
     this.onUpdateStratifiedData();
     this.onUpdateContourLayers();
+    this.onUpdateAnnotationLayer();
   }
   // Want to support multiple types of contour layers
   // - One layer for all data points (no filtering)
@@ -222524,6 +223896,21 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     }));
     return layers;
   }
+  createAnnotationLayer() {
+    const { annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection } = this.props;
+    return new AnnotationLayer({
+      data: annotationShapes,
+      visible: annotationOverlayVisible,
+      semanticZoom: annotationSemanticZoom,
+      selectedShapeUid: annotationShapeSelection,
+      viewType: ViewType$1.SCATTERPLOT
+      // TODO: is this needed?
+      // TODO: these are view-level properties, rather than layer-level.
+      // annotationTransitionDuration,
+      // annotationEditable,
+      // Other coordination types related to editing...
+    });
+  }
   createCellsLayer() {
     const {
       obsEmbeddingIndex: obsIndex,
@@ -222657,12 +224044,13 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     ], flipYTooltip, this.props.onSelectionBusy);
   }
   getLayers() {
-    const { cellsLayer, cellSetsLayers, contourLayers } = this;
+    const { cellsLayer, cellSetsLayers, contourLayers, annotationLayer } = this;
     return [
       cellsLayer,
       ...contourLayers,
       ...cellSetsLayers,
-      this.createSelectionLayer()
+      this.createSelectionLayer(),
+      annotationLayer
     ];
   }
   /**
@@ -222699,6 +224087,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       this.cellsLayer = null;
     }
   }
+  onUpdateAnnotationLayer() {
+    const { annotationShapes } = this.props;
+    if (annotationShapes) {
+      this.annotationLayer = this.createAnnotationLayer();
+    } else {
+      this.annotationLayer = null;
+    }
+  }
   onUpdateStratifiedData() {
     const { stratifiedData } = this.props;
     if (stratifiedData) {
@@ -222814,6 +224210,16 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       this.onUpdateCellSetsLayers(true);
       forceUpdate = true;
     }
+    if ([
+      "annotationShapes",
+      "annotationOverlayVisible",
+      "annotationSemanticZoom",
+      "annotationTransitionDuration",
+      "annotationEditable"
+    ].some(shallowDiff2)) {
+      this.onUpdateAnnotationLayer();
+      forceUpdate = true;
+    }
     if (forceUpdate) {
       this.forceUpdate();
     }
@@ -223169,7 +224575,7 @@ function ScatterplotOptions(props) {
     id: `feature-aggregation-strategy-${scatterplotOptionsId}`
   }, children: FEATURE_AGGREGATION_STRATEGIES$2.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
 }
-const useStyles$u = makeStyles()((theme) => ({
+const useStyles$v = makeStyles()((theme) => ({
   tooltipAnchor: {
     position: "relative",
     width: "0px",
@@ -223200,7 +224606,7 @@ const useStyles$u = makeStyles()((theme) => ({
 function Tooltip3(props) {
   const { x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
   const ref2 = useRef();
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   const [placementX, setPlacementX] = useState("start");
   const [placementY, setPlacementY] = useState("bottom");
   const getTooltipContainer = useVitessceContainer(ref2);
@@ -223216,7 +224622,7 @@ function Tooltip3(props) {
   }, [x2, y2, parentWidth, parentHeight]);
   return jsx$1("div", { ref: ref2, className: classes2.tooltipAnchor, children: ref2 && ref2.current ? jsx$1(Popper, { open: true, anchorEl: ref2.current, container: getTooltipContainer, transition: true, placement: `${placementY}-${placementX}`, children: jsx$1(Paper, { elevation: 8, className: classes2.tooltipContent, children: children3 }) }) : null });
 }
-const useStyles$t = makeStyles()((theme) => ({
+const useStyles$u = makeStyles()((theme) => ({
   cellEmphasisCrosshair: {
     zIndex: 50,
     position: "absolute",
@@ -223227,7 +224633,7 @@ const useStyles$t = makeStyles()((theme) => ({
 }));
 function Tooltip2D(props) {
   const { parentUuid, sourceUuid, x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   if (x2 < 0 || x2 > parentWidth || y2 < 0 || y2 > parentHeight) {
     return null;
   }
@@ -227139,7 +228545,7 @@ function getXlinkHref(cmap) {
   const xlinkHref = ramp(color2.copy().domain(quantize$3(interpolate$1$1(0, 1), n3))).toDataURL();
   return xlinkHref;
 }
-const useStyles$s = makeStyles()(() => ({
+const useStyles$t = makeStyles()(() => ({
   legend: {
     position: "relative",
     // Needed for absolute positioning of slider overlay
@@ -227336,7 +228742,7 @@ function Legend(props) {
     contourThresholds
   } = props;
   const svgRef = useRef(null);
-  const { classes: classes2 } = useStyles$s();
+  const { classes: classes2 } = useStyles$t();
   const [localRange, setLocalRange] = useState(featureValueColormapRange);
   useEffect(() => {
     setLocalRange(featureValueColormapRange);
@@ -227670,7 +229076,7 @@ function Legend(props) {
     }
   } })] })] });
 }
-const useStyles$r = makeStyles()(() => ({
+const useStyles$s = makeStyles()(() => ({
   multiLegend: {
     position: "absolute",
     top: "0px",
@@ -227697,7 +229103,7 @@ function MultiLegend(props) {
     pointLayerCoordination,
     pointMultiIndicesData
   } = props;
-  const { classes: classes2 } = useStyles$r();
+  const { classes: classes2 } = useStyles$s();
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
@@ -227790,7 +229196,7 @@ function MultiLegend(props) {
     }) : null;
   }) : null] });
 }
-const useStyles$q = makeStyles()(() => ({
+const useStyles$r = makeStyles()(() => ({
   channelNamesLegendContainer: {
     position: "absolute",
     bottom: "0px",
@@ -227813,7 +229219,7 @@ const useStyles$q = makeStyles()(() => ({
 }));
 function ChannelNamesLegend(props) {
   const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination } = props;
-  const { classes: classes2 } = useStyles$q();
+  const { classes: classes2 } = useStyles$r();
   const reversedImageLayerScopes = useMemo$1(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
   return jsx$1("div", { className: classes2.channelNamesLegendContainer, children: imageLayerScopes ? reversedImageLayerScopes.map((layerScope) => {
     const layerCoordination = imageLayerCoordination[0][layerScope];
@@ -227843,7 +229249,6 @@ const DEFAULT_FEATURE_AGGREGATION_STRATEGY$3 = "first";
 function EmbeddingScatterplotSubscriber(props) {
   const {
     uuid: uuid2,
-    coordinationScopes: coordinationScopesRaw,
     closeButtonVisible,
     downloadButtonVisible,
     removeGridComponent,
@@ -227859,16 +229264,23 @@ function EmbeddingScatterplotSubscriber(props) {
     circleScaleFactor = 0.8
   } = props;
   const loaders = useLoaders();
-  const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+  const [
+    // eslint-disable-next-line no-unused-vars
+    coordinationScopes,
+    _coordinationScopesBy,
+    coordinationValues
+  ] = useViewMapping(uuid2);
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid2);
-  const [{ dataset, obsType, featureType, featureValueType, sampleType, embeddingZoom: zoom2, embeddingTargetX: targetX2, embeddingTargetY: targetY2, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, sampleSetSelection: sampleSetSelectionFromCoordination, sampleSetColor, embeddingPointsVisible, embeddingContoursVisible, embeddingContoursFilled, embeddingContourPercentiles: contourPercentiles, contourColorEncoding, contourColor, featureAggregationStrategy }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setEmbeddingPointsVisible, setEmbeddingContoursVisible, setEmbeddingContoursFilled, setEmbeddingContourPercentiles: setContourPercentiles, setContourColorEncoding, setFeatureAggregationStrategy }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
-  const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
+  useAnnotationFrameCoordination(uuid2, coordinationScopes, coordinationValues);
+  const [{ dataset, obsType, featureType, featureValueType, sampleType, embeddingZoom: zoom2, embeddingTargetX: targetX2, embeddingTargetY: targetY2, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, sampleSetSelection: sampleSetSelectionFromCoordination, sampleSetColor, embeddingPointsVisible, embeddingContoursVisible, embeddingContoursFilled, embeddingContourPercentiles: contourPercentiles, contourColorEncoding, contourColor, featureAggregationStrategy, annotationStory, annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationTransitionDuration, annotationEditable }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setEmbeddingPointsVisible, setEmbeddingContoursVisible, setEmbeddingContoursFilled, setEmbeddingContourPercentiles: setContourPercentiles, setContourColorEncoding, setFeatureAggregationStrategy, setAnnotationStory }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes, coordinationValues, uuid2);
+  const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes, coordinationValues);
   const observationsLabel = observationsLabelOverride || obsType;
   const sampleSetSelection = sampleSetSelectionFromProps || sampleSetSelectionFromCoordination;
   const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY$3;
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title2 = titleOverride || `Scatterplot (${mapping})`;
+  const [, annotationStoryStatus, annotationStoryUrls, annotationStoryError] = useAnnotationStoryData(loaders, dataset, false, { setAnnotationStory }, { annotationStory }, {});
   const [
     // eslint-disable-next-line no-unused-vars
     obsLabelsTypes,
@@ -227900,11 +229312,13 @@ function EmbeddingScatterplotSubscriber(props) {
     matrixIndicesError,
     featureLabelsError,
     sampleSetsError,
-    sampleEdgesError
+    sampleEdgesError,
+    annotationStoryError
   ];
   const isReady = useReady([
     obsEmbeddingStatus,
     obsSetsStatus,
+    annotationStoryStatus,
     featureSelectionStatus,
     featureLabelsStatus,
     expandedFeatureLabelsStatus,
@@ -227918,7 +229332,8 @@ function EmbeddingScatterplotSubscriber(props) {
     matrixIndicesUrls,
     featureLabelsUrls,
     sampleSetsUrl,
-    sampleEdgesUrl
+    sampleEdgesUrl,
+    annotationStoryUrls
   ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [isSelectionPending, setIsSelectionPending] = useState(false);
@@ -228195,7 +229610,13 @@ function EmbeddingScatterplotSubscriber(props) {
     embeddingPointsVisible,
     embeddingContoursVisible,
     circleInfo,
-    featureSelection: geneSelection
+    featureSelection: geneSelection,
+    // Annotation stuff
+    annotationShapes,
+    annotationOverlayVisible,
+    annotationSemanticZoom,
+    annotationTransitionDuration,
+    annotationEditable
   }), tooltipsVisible && width2 && height2 ? jsx$1(ScatterplotTooltipSubscriber, { parentUuid: uuid2, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, featureType, featureLabelsMap }) : null, jsx$1(Legend, {
     visible: true,
     theme,
@@ -243356,8 +244777,8 @@ async function getSingleSelectionStats2D({ loader: loader2, selection }) {
   const filteredSelection = filterSelection(loader2, selection);
   const raster = await data2.getRaster({ selection: filteredSelection });
   const selectionStats = getChannelStats(raster.data);
-  const { domain: domain2, contrastLimits: slider } = selectionStats;
-  return { domain: domain2, slider };
+  const { domain: domain2, contrastLimits: slider, q1, q3 } = selectionStats;
+  return { domain: domain2, slider, q1, q3 };
 }
 async function getSingleSelectionStats3D({ loader: loader2, selection }) {
   const lowResSource = loader2[loader2.length - 1];
@@ -243384,7 +244805,9 @@ async function getSingleSelectionStats3D({ loader: loader2, selection }) {
     slider: [
       Math.min(stats0.contrastLimits[0], statsMid.contrastLimits[0], statsTop.contrastLimits[0]),
       Math.max(stats0.contrastLimits[1], statsMid.contrastLimits[1], statsTop.contrastLimits[1])
-    ]
+    ],
+    q1: Math.min(stats0.q1[0], statsMid.q1[0], statsTop.q1[0]),
+    q3: Math.max(stats0.q3[1], statsMid.q3[1], statsTop.q3[1])
   };
 }
 const getSingleSelectionStats = async ({ loader: loader2, selection, use3d }) => {
@@ -243395,7 +244818,9 @@ const getMultiSelectionStats = async ({ loader: loader2, selections, use3d }) =>
   const stats = await Promise.all(selections.map((selection) => getSingleSelectionStats({ loader: loader2, selection, use3d })));
   const domains = stats.map((stat) => stat.domain);
   const sliders = stats.map((stat) => stat.slider);
-  return { domains, sliders };
+  const q1s = stats.map((stat) => stat.q1);
+  const q3s = stats.map((stat) => stat.q3);
+  return { domains, sliders, q1s, q3s };
 };
 function getPhysicalSizeScalingMatrix(loader2) {
   const { x: x2, y: y2, z: z2 } = loader2?.meta?.physicalSizes ?? {};
@@ -247639,6 +249064,7 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
     this.obsSegmentationsPolygonLayer = null;
     this.obsLocationsLayer = null;
     this.neighborhoodsLayer = null;
+    this.annotationLayer = null;
     this.layerLoaderSelections = {};
     this.randomColorData = {
       data: new Uint8Array(2048 * 2048 * 3).map((_, j) => j < 4 ? 0 : Math.round(255 * Math.random())),
@@ -247660,6 +249086,7 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
     this.onUpdateNeighborhoodsData();
     this.onUpdateNeighborhoodsLayer();
     this.onUpdateImages();
+    this.onUpdateAnnotationLayer();
   }
   createPolygonSegmentationsLayer(layerDef, hasExplicitPolygons) {
     const { stroked, visible, opacity: opacity2, radius: radius2 } = layerDef;
@@ -247991,7 +249418,7 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
     return [];
   }
   getLayers() {
-    const { imageLayers, obsSegmentationsPolygonLayer, neighborhoodsLayer, obsLocationsLayer, obsSegmentationsBitmaskLayers } = this;
+    const { imageLayers, obsSegmentationsPolygonLayer, neighborhoodsLayer, obsLocationsLayer, obsSegmentationsBitmaskLayers, annotationLayer } = this;
     return [
       ...imageLayers,
       ...obsSegmentationsBitmaskLayers,
@@ -247999,7 +249426,8 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
       neighborhoodsLayer,
       obsLocationsLayer,
       this.createScaleBarLayer(),
-      this.createSelectionLayer()
+      this.createSelectionLayer(),
+      annotationLayer
     ];
   }
   /**
@@ -248106,6 +249534,25 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
   onUpdateImages() {
     this.imageLayers = this.createImageLayers();
   }
+  createAnnotationLayer() {
+    const { annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection } = this.props;
+    return new AnnotationLayer({
+      id: "annotation-layer",
+      data: annotationShapes,
+      visible: annotationOverlayVisible,
+      semanticZoom: annotationSemanticZoom,
+      selectedShapeUid: annotationShapeSelection,
+      viewType: ViewType$1.SPATIAL
+    });
+  }
+  onUpdateAnnotationLayer() {
+    const { annotationShapes } = this.props;
+    if (annotationShapes) {
+      this.annotationLayer = this.createAnnotationLayer();
+    } else {
+      this.annotationLayer = null;
+    }
+  }
   viewInfoDidUpdate() {
     const { obsCentroidsIndex, obsCentroids } = this.props;
     super.viewInfoDidUpdate(obsCentroidsIndex, obsCentroids, makeDefaultGetObsCoords$1);
@@ -248205,6 +249652,15 @@ let Spatial$1 = class Spatial extends AbstractSpatialOrScatterplot {
       this.onUpdateImages();
       forceUpdate = true;
     }
+    if ([
+      "annotationShapes",
+      "annotationOverlayVisible",
+      "annotationSemanticZoom",
+      "annotationShapeSelection"
+    ].some(shallowDiff2)) {
+      this.onUpdateAnnotationLayer();
+      forceUpdate = true;
+    }
     if (forceUpdate) {
       this.forceUpdate();
     }
@@ -248304,7 +249760,8 @@ function SpatialSubscriber$1(props) {
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid2);
-  const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialRotationX: rotationX, spatialRotationY: rotationY, spatialRotationZ: rotationZ, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialImageLayer: imageLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer, spatialNeighborhoodLayer: neighborhoodsLayer, obsFilter: cellFilter, obsHighlight: cellHighlight, moleculeHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, spatialAxisFixed, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, photometricInterpretation: photometricInterpretationFromCoordination, featureAggregationStrategy }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialOrbitAxis: setOrbitAxis, setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialNeighborhoodLayer: setNeighborhoodsLayer, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setMoleculeHighlight, setSpatialAxisFixed, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setFeatureAggregationStrategy }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
+  useAnnotationFrameCoordination(uuid2, coordinationScopes);
+  const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialRotationX: rotationX, spatialRotationY: rotationY, spatialRotationZ: rotationZ, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialImageLayer: imageLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer, spatialNeighborhoodLayer: neighborhoodsLayer, obsFilter: cellFilter, obsHighlight: cellHighlight, moleculeHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, spatialAxisFixed, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, photometricInterpretation: photometricInterpretationFromCoordination, featureAggregationStrategy, annotationStory, annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialOrbitAxis: setOrbitAxis, setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialNeighborhoodLayer: setNeighborhoodsLayer, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setMoleculeHighlight, setSpatialAxisFixed, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, setFeatureAggregationStrategy, setAnnotationStory }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
   const { spatialZoom: initialZoom, spatialTargetX: initialTargetX, spatialTargetY: initialTargetY, spatialTargetZ: initialTargetZ } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
   const [{ imageLayerCallbacks, segmentationLayerCallbacks }] = useAuxiliaryCoordination(COMPONENT_COORDINATION_TYPES.layerController, coordinationScopes);
@@ -248341,6 +249798,7 @@ function SpatialSubscriber$1(props) {
   const [neighborhoods, neighborhoodsStatus, neighborhoodsUrls, neighborhoodsError] = useNeighborhoodsData(loaders, dataset, false, { setSpatialNeighborhoodLayer: setNeighborhoodsLayer }, { spatialNeighborhoodLayer: neighborhoodsLayer });
   const [{ featureLabelsMap: featureLabelsMapOrig }, featureLabelsStatus, featureLabelsUrls, featureLabelsError] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
   const [featureLabelsMap, expandedFeatureLabelsStatus] = useExpandedFeatureLabelsMap(featureType, featureLabelsMapOrig, { stripCuriePrefixes: true });
+  const [, annotationStoryStatus, annotationStoryUrls, annotationStoryError] = useAnnotationStoryData(loaders, dataset, false, { setAnnotationStory }, { annotationStory }, {});
   const errors = [
     ...obsLabelsErrorsMulti,
     obsLocationsError,
@@ -248352,7 +249810,8 @@ function SpatialSubscriber$1(props) {
     matrixIndicesError,
     imageError,
     neighborhoodsError,
-    featureLabelsError
+    featureLabelsError,
+    annotationStoryError
   ];
   const photometricInterpretation = photometricInterpretationFromCoordination ?? instance2?.getPhotometricInterpretation();
   const isReady = useReady([
@@ -248366,7 +249825,8 @@ function SpatialSubscriber$1(props) {
     imageStatus,
     neighborhoodsStatus,
     featureLabelsStatus,
-    expandedFeatureLabelsStatus
+    expandedFeatureLabelsStatus,
+    annotationStoryStatus
   ]);
   const urls2 = useUrls([
     obsLocationsUrls,
@@ -248377,7 +249837,8 @@ function SpatialSubscriber$1(props) {
     matrixIndicesUrls,
     imageUrls,
     neighborhoodsUrls,
-    featureLabelsUrls
+    featureLabelsUrls,
+    annotationStoryUrls
   ]);
   const obsLocationsFeatureIndex = useMemo$1(() => {
     if (obsLocationsLabels) {
@@ -248616,7 +250077,7 @@ function SpatialSubscriber$1(props) {
     orbitAxis
   }, setViewState, originalViewState, imageLayerDefs: imageLayers, obsSegmentationsLayerDefs: cellsLayer, obsLocationsLayerDefs: moleculesLayer, neighborhoodLayerDefs: neighborhoodsLayer, obsLocationsIndex, obsSegmentationsIndex, obsLocations, obsLocationsLabels, obsLocationsFeatureIndex, hasSegmentations: hasSegmentationsData, obsSegmentations, obsSegmentationsType, obsCentroids, obsCentroidsIndex, cellFilter, cellSelection, cellHighlight, cellColors, neighborhoods, imageLayerLoaders: resolutionFilteredImageLayerLoaders, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, setHoverInfo, setMoleculeHighlight, setComponentHover: () => {
     setComponentHover(uuid2);
-  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage, photometricInterpretation }), tooltipsVisible && jsx$1(SpatialTooltipSubscriber$1, { parentUuid: uuid2, obsHighlight: cellHighlight || moleculeHighlight, width: width2, height: height2, getObsInfo: getTooltipObsInfo, useHoverInfoForTooltip, hoverData, hoverCoord, hoverMode, getObsIdFromHoverData, featureType, featureLabelsMap }), jsx$1(Legend, {
+  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage, photometricInterpretation, annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection }), tooltipsVisible && jsx$1(SpatialTooltipSubscriber$1, { parentUuid: uuid2, obsHighlight: cellHighlight || moleculeHighlight, width: width2, height: height2, getObsInfo: getTooltipObsInfo, useHoverInfoForTooltip, hoverData, hoverCoord, hoverMode, getObsIdFromHoverData, featureType, featureLabelsMap }), jsx$1(Legend, {
     visible: true,
     // Fix to dark theme due to black background of spatial plot.
     theme: "dark",
@@ -248864,6 +250325,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.obsSegmentationsLayers = [];
     this.obsSpotsLayers = [];
     this.obsPointsLayers = [];
+    this.annotationLayer = null;
     this.obsPointsLabelsData = {};
     this.spotToMatrixIndexMap = {};
     this.spotColors = {};
@@ -248905,6 +250367,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.onUpdateAllSpotsExpressionData();
     this.onUpdateSpotsLayer();
     this.onUpdateImages();
+    this.onUpdateAnnotationLayer();
   }
   createPolygonSegmentationLayer(layerScope, layerCoordination, channelScopes, channelCoordinations, layerObsSegmentations, layerFeatureValues) {
     const { theme, delegateHover } = this.props;
@@ -249643,7 +251106,8 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       imageLayers,
       obsSpotsLayers,
       obsPointsLayers,
-      obsSegmentationsLayers
+      obsSegmentationsLayers,
+      annotationLayer
       // neighborhoodsLayer,
       // obsLocationsLayer,
     } = this;
@@ -249655,7 +251119,8 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       // neighborhoodsLayer,
       // obsLocationsLayer,
       this.createScaleBarLayer(),
-      this.createSelectionLayer()
+      this.createSelectionLayer(),
+      annotationLayer
     ];
   }
   // onUpdate functions:
@@ -250011,6 +251476,25 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
   onUpdateImages() {
     this.imageLayers = this.createImageLayers();
   }
+  createAnnotationLayer() {
+    const { annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection } = this.props;
+    return new AnnotationLayer({
+      id: "annotation-layer",
+      data: annotationShapes,
+      visible: annotationOverlayVisible,
+      semanticZoom: annotationSemanticZoom,
+      selectedShapeUid: annotationShapeSelection,
+      viewType: ViewType$1.SPATIAL_BETA
+    });
+  }
+  onUpdateAnnotationLayer() {
+    const { annotationShapes } = this.props;
+    if (annotationShapes) {
+      this.annotationLayer = this.createAnnotationLayer();
+    } else {
+      this.annotationLayer = null;
+    }
+  }
   viewInfoDidUpdate() {
     super.viewInfoDidUpdate(null, null, makeDefaultGetObsCoords);
   }
@@ -250208,6 +251692,15 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       this.onUpdateImages();
       forceUpdate = true;
     }
+    if ([
+      "annotationShapes",
+      "annotationOverlayVisible",
+      "annotationSemanticZoom",
+      "annotationShapeSelection"
+    ].some(shallowDiff2)) {
+      this.onUpdateAnnotationLayer();
+      forceUpdate = true;
+    }
     if (forceUpdate) {
       this.forceUpdate();
     }
@@ -250347,16 +251840,16 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-B8xbImKw.js").then((n3) => n3.a);
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CfweEgJW.js").then((n3) => n3.a);
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialThree, { ...props }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-Bub8madF.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CNXTPnLt.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialAccelerated, { ...props }) }) }) }));
-const useStyles$p = makeStyles()(() => ({
+const useStyles$q = makeStyles()(() => ({
   spatialBetaCameraLabel: {
     padding: "0px 0px 0px 16px"
   },
@@ -250367,7 +251860,7 @@ const useStyles$p = makeStyles()(() => ({
 function SpatialOptions(props) {
   const { spatialAxisFixed, setSpatialAxisFixed, use3d } = props;
   const toggleAxisId = $bdb11010cef70236$export$f680877a34711e37();
-  const { classes: classes2 } = useStyles$p();
+  const { classes: classes2 } = useStyles$q();
   return jsx$1(OptionsContainer, { children: jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.spatialBetaCameraLabel, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `spatial-camera-axis-${toggleAxisId}`, children: "Fix Camera Axis" }) }), jsx$1(TableCell, { className: classes2.spatialBetaToggleBox, variant: "body", children: jsx$1(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed), slotProps: { input: {
     "aria-label": "Fix or not fix spatial camera axis",
     id: `spatial-camera-axis-${toggleAxisId}`
@@ -250555,6 +252048,7 @@ function SpatialSubscriber(props) {
   const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const coordinationScopesBy = useCoordinationScopesBy(coordinationScopes, coordinationScopesByRaw);
+  useAnnotationFrameCoordination(uuid2, coordinationScopes);
   const [{
     dataset,
     obsType,
@@ -250576,7 +252070,12 @@ function SpatialSubscriber(props) {
     additionalObsSets,
     obsSetColor,
     obsColorEncoding,
-    obsSetSelection
+    obsSetSelection,
+    annotationStory,
+    annotationShapes,
+    annotationOverlayVisible,
+    annotationSemanticZoom,
+    annotationShapeSelection
   }, {
     setSpatialZoom: setZoom,
     setSpatialTargetX: setTargetX,
@@ -250592,7 +252091,8 @@ function SpatialSubscriber(props) {
     setAdditionalObsSets,
     setObsSetColor,
     setObsColorEncoding,
-    setObsSetSelection
+    setObsSetSelection,
+    setAnnotationStory
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL_BETA], coordinationScopes);
   const { spatialZoom: initialZoom, spatialTargetX: initialTargetX, spatialTargetY: initialTargetY, spatialTargetZ: initialTargetZ } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL_BETA], coordinationScopes);
   const [segmentationLayerScopes, segmentationChannelScopesByLayer] = useMultiCoordinationScopesSecondaryNonNull(CoordinationType$1.SEGMENTATION_CHANNEL, CoordinationType$1.SEGMENTATION_LAYER, coordinationScopes, coordinationScopesBy);
@@ -250735,6 +252235,7 @@ function SpatialSubscriber(props) {
     channelCoordination: segmentationChannelCoordination
   });
   const [imageData, imageDataStatus, imageUrls, imageDataErrors] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
+  const [, annotationStoryStatus, annotationStoryUrls, annotationStoryError] = useAnnotationStoryData(loaders, dataset, false, { setAnnotationStory }, { annotationStory }, {});
   const errors = [
     ...obsPointsErrors,
     ...obsSpotsErrors,
@@ -250749,7 +252250,8 @@ function SpatialSubscriber(props) {
     ...pointMultiIndicesDataErrors,
     ...segmentationMultiFeatureSelectionErrors,
     ...segmentationMultiIndicesDataErrors,
-    ...obsSegmentationsLocationsDataErrors
+    ...obsSegmentationsLocationsDataErrors,
+    annotationStoryError
   ];
   const isReadyToComputeInitialViewState = useReady([
     obsPointsDataStatus,
@@ -250774,13 +252276,16 @@ function SpatialSubscriber(props) {
     segmentationMultiIndicesDataStatus,
     obsSegmentationsLocationsDataStatus,
     // Images
-    imageDataStatus
+    imageDataStatus,
+    // Annotations
+    annotationStoryStatus
   ]);
   const urls2 = useUrls([
     Object.values(obsSpotsUrls || {}).flat(),
     Object.values(obsPointsUrls || {}).flat(),
     Object.values(obsSegmentationsUrls || {}).flat(),
-    Object.values(imageUrls || {}).flat()
+    Object.values(imageUrls || {}).flat(),
+    annotationStoryUrls
     // TODO: more urls
     // TODO: a bit of memoization
   ]);
@@ -251028,7 +252533,7 @@ function SpatialSubscriber(props) {
     target: [targetX2, targetY2, targetZ],
     rotationX,
     rotationOrbit
-  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, pointMatrixIndices: pointMultiIndicesData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormDataAggregated || spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormDataAggregated || segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, setTiledPointsLoadingProgress }), !disableTooltip && jsx$1(SpatialTooltipSubscriber, {
+  } : DEFAULT_VIEW_STATE, orbitAxis, spatialAxisFixed, setViewState: isValidViewState ? setViewState : SET_VIEW_STATE_NOOP, originalViewState, spatialRenderingMode, updateViewInfo: setComponentViewInfo, delegateHover, obsPoints: obsPointsData, pointLayerScopes, pointLayerCoordination, pointMultiObsLabels: pointMultiObsLabelsData, pointMatrixIndices: pointMultiIndicesData, obsSpots: obsSpotsData, spotLayerScopes, spotLayerCoordination, obsSpotsSets: obsSpotsSetsData, spotMatrixIndices: spotMultiIndicesData, spotMultiExpressionData: spotMultiExpressionNormDataAggregated || spotMultiExpressionNormData, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, obsSegmentations: obsSegmentationsData, obsSegmentationsLocations: obsSegmentationsLocationsData, obsSegmentationsSets: obsSegmentationsSetsData, segmentationMatrixIndices: segmentationMultiIndicesData, segmentationMultiExpressionData: segmentationMultiExpressionNormDataAggregated || segmentationMultiExpressionNormData, bitmaskValueIsIndex, images: imageData, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, setTiledPointsLoadingProgress, annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection }), !disableTooltip && jsx$1(SpatialTooltipSubscriber, {
     parentUuid: uuid2,
     width: width2,
     height: height2,
@@ -258445,7 +259950,7 @@ _defineProperty$3(WindowScroller, "defaultProps", {
   serverHeight: 0,
   serverWidth: 0
 });
-const useStyles$o = makeStyles()((theme) => ({
+const useStyles$p = makeStyles()((theme) => ({
   selectableTable: {
     flex: "1 1 auto",
     outline: "none"
@@ -258594,7 +260099,7 @@ function SelectableTable(props) {
       onChange(null);
     }
   }, [selectedRows, allowMultiple]);
-  const { classes: classes2 } = useStyles$o();
+  const { classes: classes2 } = useStyles$p();
   const inputUuid = v4$1();
   const rowRenderer = ({ index: index2, style: style2 }) => (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -258619,7 +260124,7 @@ const FEATURELIST_SORT_OPTIONS = [
   "original"
 ];
 const ALT_COLNAME = "Alternate ID";
-const useStyles$n = makeStyles()(() => ({
+const useStyles$o = makeStyles()(() => ({
   searchBar: {
     marginTop: "10px",
     marginLeft: "10px",
@@ -258632,7 +260137,7 @@ const useStyles$n = makeStyles()(() => ({
 }));
 function FeatureList(props) {
   const { width: width2, height: height2, hasColorEncoding, geneList = [], featureLabelsMap, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showFeatureTable, featureListSort, featureListSortKey, hasFeatureLabels, primaryColumnName } = props;
-  const { classes: classes2 } = useStyles$n();
+  const { classes: classes2 } = useStyles$o();
   const [searchTerm, setSearchTerm] = useState("");
   const selectableTableSortKey = featureListSortKey === "featureIndex" ? "key" : "name";
   const searchResults = useMemo$1(() => geneList.filter((gene) => gene.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(gene)?.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(cleanFeatureId(gene))?.toLowerCase().includes(searchTerm.toLowerCase())), [geneList, searchTerm, featureLabelsMap]);
@@ -258705,7 +260210,7 @@ function FeatureListOptions(props) {
     id: `feature-list-show-alternative-ids-${featureListId}`
   } } }) })] })] }) : null] });
 }
-const useStyles$m = makeStyles()((theme) => ({
+const useStyles$n = makeStyles()((theme) => ({
   featureListContainer: {
     width: "100%",
     height: "100%",
@@ -258720,7 +260225,7 @@ function FeatureListSubscriber(props) {
   const loaders = useLoaders();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const [width2, height2, containerRef] = useGridItemSize();
-  const { classes: classes2 } = useStyles$m();
+  const { classes: classes2 } = useStyles$n();
   const [{ dataset, obsType, featureType, featureSelection: geneSelection, featureFilter: geneFilter, obsColorEncoding: cellColorEncoding }, { setFeatureSelection: setGeneSelection, setFeatureFilter: setGeneFilter, setFeatureHighlight: setGeneHighlight, setObsColorEncoding: setCellColorEncoding }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_LIST], coordinationScopes);
   const variablesLabel = variablesLabelOverride || featureType;
   const title2 = titleOverride || `${capitalize$3(variablesLabel)} List`;
@@ -258855,7 +260360,7 @@ const useSelectionSliderStyles = makeStyles()(() => ({
     backgroundColor: "rgba(128, 128, 128, 0.7)"
   }
 }));
-const useStyles$l = makeStyles()((theme) => ({
+const useStyles$m = makeStyles()((theme) => ({
   paletteContainer: {
     width: "70px",
     height: "40px",
@@ -258876,10 +260381,10 @@ const useStyles$l = makeStyles()((theme) => ({
   }
 }));
 const ColorPalette = ({ handleChange }) => {
-  const { classes: classes2 } = useStyles$l();
+  const { classes: classes2 } = useStyles$m();
   return jsx$1("div", { className: classes2.paletteContainer, "aria-label": "Color swatch", children: VIEWER_PALETTE.map((color2) => jsx$1(IconButton$1, { className: classes2.button, onClick: () => handleChange(color2), "aria-label": `Change color to ${color2}`, children: jsx$1(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes2.icon }) }, color2)) });
 };
-const useStyles$k = makeStyles()(() => ({
+const useStyles$l = makeStyles()(() => ({
   menuButton: {
     backgroundColor: "transparent"
   },
@@ -258898,7 +260403,7 @@ function MuiSpan(props) {
 }
 function ChannelOptions$1({ handlePropertyChange, handleChannelRemove, handleIQRUpdate }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$k();
+  const { classes: classes2 } = useStyles$l();
   const handleColorSelect = (color2) => {
     handlePropertyChange("color", color2);
   };
@@ -259515,7 +261020,7 @@ function LayerController$1(props) {
     minWidth: "50%"
   } })] }), jsx$1(TabPanel, { value: tab2, index: 0, children: FullController }), jsx$1(TabPanel, { value: tab2, index: 1, style: { marginTop: 4 }, children: jsx$1(VolumeOptions, { loader: loader2, handleSlicerSetting, handleRenderingModeChange: setRenderingMode, renderingMode, xSlice, ySlice, zSlice, use3d, setViewState, spatialHeight, spatialWidth, modelMatrix: modelMatrix2 }) })] }) : FullController, shouldShowRemoveLayerButton ? jsx$1(Button, { onClick: handleLayerRemove, fullWidth: true, variant: "outlined", style: buttonStyles, size: "small", children: "Remove Image Layer" }) : null] })] });
 }
-const useStyles$j = makeStyles()(() => ({
+const useStyles$k = makeStyles()(() => ({
   addButton: {
     marginTop: "10px",
     marginBottom: "10px",
@@ -259527,7 +261032,7 @@ function ImageAddIcon() {
 }
 function ImageAddButton({ imageOptions, handleImageAdd }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$j();
+  const { classes: classes2 } = useStyles$k();
   const handleAdd = (imgData) => {
     setOpen((prev2) => !prev2);
     handleImageAdd(imgData);
@@ -259889,7 +261394,7 @@ const channelControlCellSx = {
   }
 };
 const channelSpacerCellSx = { flexShrink: 0, minWidth: "44px" };
-const useStyles$i = makeStyles()(() => ({
+const useStyles$j = makeStyles()(() => ({
   colorPickerPaper: {
     overflow: "hidden",
     "& > ul": {
@@ -259947,7 +261452,7 @@ function ChannelColorPickerMenu(props) {
       setColor2([rgb2.r, rgb2.g, rgb2.b]);
     }
   }
-  const { classes: classes2 } = useStyles$i();
+  const { classes: classes2 } = useStyles$j();
   const currentColor = color2 ? colorArrayToString(color2) : colorArrayToString(getDefaultColor(theme));
   const isWritable = typeof setColor2 === "function";
   const derivedOpen = isWritable ? isStaticColor && visible ? open2 : false : false;
@@ -259955,7 +261460,7 @@ function ChannelColorPickerMenu(props) {
     [classes2.colorIconOutline]: theme !== "dark" && isEqual$3(color2, [255, 255, 255])
   }), style: { backgroundColor: currentColor } }) : isColormap && visible && featureValueColormap ? jsx$1("div", { className: classes2.colorIcon, children: jsx$1("svg", { width: "18", height: "18", children: jsx$1("image", { x: 0, y: 0, width: 18, height: 18, preserveAspectRatio: "none", href: getXlinkHref(featureValueColormap), clipPath: "inset(0% round 4px)" }) }) }) : jsx$1("div", { className: classes2.colorIcon }), buttonClassName: classes2.colorIconButton, withPaper: true, paperClassName: classes2.colorPickerPaper, "aria-label": "Open color picker menu", children: jsx$1(Twitter$1, { className: classes2.colorPicker, disableAlpha: true, width: 108, triangle: "hide", colors: defaultPalette, color: currentColor, onChangeComplete: handleColorChange }) });
 }
-const useStyles$h = makeStyles()(() => ({
+const useStyles$i = makeStyles()(() => ({
   layerTypeSpotIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -259968,7 +261473,7 @@ const useStyles$h = makeStyles()(() => ({
 function SpotLayerEllipsisMenu(props) {
   const { strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$h();
+  const { classes: classes2 } = useStyles$i();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -259990,7 +261495,7 @@ function SpotLayerController(props) {
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const { classes: classes2 } = useStyles$h();
+  const { classes: classes2 } = useStyles$i();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -260000,7 +261505,7 @@ function SpotLayerController(props) {
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle spot layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SpotLayerEllipsisMenu, { filled, setFilled, strokeWidth, setStrokeWidth, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgSpots, { className: classes2.layerTypeSpotIcon }) })] }) }) });
 }
-const useStyles$g = makeStyles()(() => ({
+const useStyles$h = makeStyles()(() => ({
   layerFeatureControllerGrid: {
     padding: "0",
     flexWrap: "nowrap"
@@ -260045,7 +261550,7 @@ function LayerPerFeatureController(props) {
       ]);
     }
   }, [featureName, featureColor, setFeatureColor, featureColorIndex]);
-  const { classes: classes2 } = useStyles$g();
+  const { classes: classes2 } = useStyles$h();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const [open2, setOpen] = useState(false);
@@ -260099,7 +261604,7 @@ function LayerPerFeatureController(props) {
   ]);
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleRemoveFeature, className: menuClasses.imageLayerVisibleButton, "aria-label": "Remove feature", children: jsx$1(ClearIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(Tooltip$3, { title: colorPickerTooltip ?? "", disableHoverListener: !colorPickerTooltip, placement: "top", children: jsx$1("span", { children: jsx$1(ChannelColorPickerMenu, { theme, color: colorPickerColor, setColor: colorPickerWritable ? handleColorChange : null, palette, isStaticColor: colorPickerReadable, isColormap: false, featureValueColormap, visible: true }) }) }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: featureName }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${featureName}` }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypeFeatureIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.layerFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null] }) }, featureName);
 }
-const useStyles$f = makeStyles()(() => ({
+const useStyles$g = makeStyles()(() => ({
   pointLayerButton: {
     borderStyle: "dashed",
     marginTop: "10px",
@@ -260216,7 +261721,7 @@ function PointLayerController(props) {
     featureSelection,
     showStaticColor
   ]);
-  const { classes: classes2 } = useStyles$f();
+  const { classes: classes2 } = useStyles$g();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -260245,7 +261750,7 @@ function PointLayerController(props) {
   }, [featureSelection, obsColorEncoding, featureIndex, featureColor]);
   return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: menuClasses.imageLayerName, title: label2, children: label2 }) }), jsx$1(Grid$1, { size: 2, sx: channelSliderCellSx, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode, featureValueColormap, setFeatureValueColormap }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", sx: channelControlCellSx, children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
 }
-const useStyles$e = makeStyles()(() => ({
+const useStyles$f = makeStyles()(() => ({
   // Cap the channel name's width; imageLayerName ellipsizes the overflow.
   channelName: {
     overflow: "hidden",
@@ -260264,7 +261769,7 @@ const useStyles$e = makeStyles()(() => ({
 function SegmentationChannelEllipsisMenu(props) {
   const { obsType, featureType, featureValueType, strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$e();
+  const { classes: classes2 } = useStyles$f();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -260283,7 +261788,7 @@ function SegmentationChannelController(props) {
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialChannelColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const { classes: classes2 } = useStyles$e();
+  const { classes: classes2 } = useStyles$f();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -261524,7 +263029,7 @@ function useBaseQuery(options, Observer, queryClient) {
 function useQuery(options, queryClient) {
   return useBaseQuery(options, QueryObserver);
 }
-const useStyles$d = makeStyles()(() => ({
+const useStyles$e = makeStyles()(() => ({
   channelMenuButton: {
     backgroundColor: "transparent",
     padding: "3px 0",
@@ -261538,7 +263043,7 @@ const useStyles$d = makeStyles()(() => ({
 function ChannelOptions(props) {
   const { onRemove: onRemove2, onResetWindowUsingIQR, showValueExtent, setShowValueExtent, numResolutions, spatialMaxResolution, setSpatialMaxResolution } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$d();
+  const { classes: classes2 } = useStyles$e();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   function handleRemove() {
@@ -261551,7 +263056,7 @@ function ChannelOptions(props) {
   const domainTypeId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes2.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Best Resolution: " }), jsx$1(Slider, { value: spatialMaxResolution || 1, valueLabelDisplay: "auto", onChange: (e3, v) => setSpatialMaxResolution(v), min: 1, max: numResolutions - 1, step: 1, orientation: "horizontal" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxs(NativeSelect, { onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "Value Min/Max", children: "Value Min/Max" }), jsx$1("option", { value: "Dtype Min/Max", children: "Dtype Min/Max" })] })] }), jsx$1(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes2.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsx$1(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes2.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
 }
-const useStyles$c = makeStyles()(() => ({
+const useStyles$d = makeStyles()(() => ({
   channelSlider: {
     marginTop: "7px"
   }
@@ -261561,13 +263066,13 @@ function ChannelSlider(props) {
   const rgbColor = toRgbUIString(colormapOn, color2, theme);
   const dtype = image2?.getDtype();
   const fullDomain = dtype ? DOMAINS[dtype] : [0, 0];
-  const { classes: classes2 } = useStyles$c();
+  const { classes: classes2 } = useStyles$d();
   useEffect(() => {
-    if (!window2 && !disabled && Array.isArray(minMaxDomain)) {
-      setWindow2(minMaxDomain);
+    if (!window2 && !disabled && Array.isArray(minMaxDomain?.upperThreeQuarters)) {
+      setWindow2(minMaxDomain?.upperThreeQuarters);
     }
   }, [minMaxDomain, window2, disabled]);
-  const [min2, max2] = (showValueExtent ? minMaxDomain : fullDomain) || [0, 0];
+  const [min2, max2] = (showValueExtent ? minMaxDomain?.minMax : fullDomain) || [0, 0];
   const step = max2 - min2 < 500 && dtype?.startsWith("Float") ? (max2 - min2) / 500 : 1;
   const handleChangeDebounced = useCallback(debounce$5(setWindow2 || (() => {
   }), 3, { trailing: true }), [setWindow2]);
@@ -261576,7 +263081,7 @@ function ChannelSlider(props) {
     return `${labelPrefix} for ${rgbColor} colormap channel`;
   }, getAriaValueText: () => `Current colormap values: ${rgbColor}-${window2}`, min: min2, max: max2, step, orientation: "horizontal", className: classes2.channelSlider, style: { color: rgbColor }, disabled });
 }
-const useStyles$b = makeStyles()(() => ({
+const useStyles$c = makeStyles()(() => ({
   visibilityCheckbox: {
     padding: "10px 0"
   }
@@ -261590,10 +263095,10 @@ function getCheckboxColor(colormapOn, color2, theme) {
 function ChannelVisibilityCheckbox(props) {
   const { color: color2, visible, setVisible, disabled, theme, colormapOn } = props;
   const rgbColor = getCheckboxColor(colormapOn, color2, theme);
-  const { classes: classes2 } = useStyles$b();
+  const { classes: classes2 } = useStyles$c();
   return jsx$1(Checkbox$1, { onChange: (e3, v) => setVisible(v), checked: visible, disabled, className: classes2.visibilityCheckbox, style: { color: rgbColor, "&$checked": { color: rgbColor } }, slotProps: { input: { "aria-label": "Toggle channel visibility" } } });
 }
-const useStyles$a = makeStyles()(() => ({
+const useStyles$b = makeStyles()(() => ({
   oneLineChannelSelect: {
     width: "90%",
     marginLeft: "5%",
@@ -261602,7 +263107,7 @@ const useStyles$a = makeStyles()(() => ({
 }));
 function ChannelSelectionDropdown(props) {
   const { featureIndex, channelsSortOrder, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
-  const { classes: classes2 } = useStyles$a();
+  const { classes: classes2 } = useStyles$b();
   const { classes: selectClasses2 } = useSelectStyles();
   function handleChange(event2) {
     setTargetC(event2.target.value === "" ? null : Number(event2.target.value));
@@ -261672,7 +263177,13 @@ function ImageChannelController(props) {
         use3d: ctx.queryKey[5]
       });
       const [newDomain] = stats.domains;
-      return newDomain;
+      return {
+        minMax: newDomain,
+        // iqr: [stats.q1s[0], stats.q3s[0]],
+        // This seems to work better than the IQR for the slider
+        // upper bound.
+        upperThreeQuarters: [stats.q1s[0], newDomain[1]]
+      };
     },
     meta: { image: image2 }
   });
@@ -261680,7 +263191,7 @@ function ImageChannelController(props) {
   const disabled = minMaxQuery.isLoading;
   function handleResetWindowUsingIQR() {
     if (!disabled) {
-      setWindow2(minMaxDomain);
+      setWindow2(minMaxDomain?.upperThreeQuarters);
     }
   }
   return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, sx: channelSelectorCellSx, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading, channelsSortOrder }) }), jsx$1(Grid$1, { size: 3, sx: channelSliderCellSx, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
@@ -261737,7 +263248,7 @@ function LoadingStatusIndicator(props) {
   }
   return jsxs(Grid$1, { container: true, px: 0.5, children: [jsx$1(Grid$1, { size: 6, alignItems: "start", children: jsx$1(Grid$1, { container: true, alignItems: "center", gap: 1, children: statusColor !== "success" ? jsx$1(StatusChip, { label: statusLabel, color: statusColor, size: "small" }) : null }) }), jsx$1(Grid$1, { size: 6, px: 1, my: 0.25, children: jsx$1(LoadingText, { bricksLoaded, currentRequestCount, totalBricksRequested, isLoading }) }), jsx$1(Grid$1, { size: 12, children: jsxs(Grid$1, { container: true, direction: "row", spacing: 2, alignItems: "center", wrap: "nowrap", children: [jsx$1(LoadingControlButton, { startIcon: jsx$1(Stop, {}), onClick: onStopLoading, disabled: noNewRequests, ariaLabel: "Stop loading data and render at highest resolution", children: "Stop Loading" }), jsx$1(LoadingControlButton, { startIcon: jsx$1(Replay, {}), onClick: onRestartLoading, disabled: !noNewRequests && !isLoading, ariaLabel: "Restart data loading", children: "Restart Loading" })] }) }), jsx$1(Grid$1, { size: 12, visibility: isLoading ? "visible" : "hidden", mt: 1, mb: 0.5, children: jsx$1(LinearProgress, { variant: "determinate", value: percentage }) })] });
 }
-const useStyles$9 = makeStyles()(() => ({
+const useStyles$a = makeStyles()(() => ({
   imageLayerButton: {
     borderStyle: "dashed",
     marginTop: "10px",
@@ -261880,7 +263391,7 @@ function ImageLayerController(props) {
   }, [visible, setVisible]);
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
   const handleOpenChange = useCallback(() => setOpen((prev2) => !prev2), []);
-  const { classes: classes2 } = useStyles$9();
+  const { classes: classes2 } = useStyles$a();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const { classes: controllerSectionClasses } = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
@@ -261892,7 +263403,7 @@ function ImageLayerController(props) {
     return jsx$1(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, channelsSortOrder, spatialRenderingMode, numResolutions, spatialMaxResolution, setSpatialMaxResolution }, cScope);
   }), jsx$1(Button, { disabled: channelScopes.length === MAX_CHANNELS$1 || channelScopes.length === imageNumChannels, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", className: classes2.imageLayerButton, startIcon: jsx$1(AddIcon, {}), size: "small", "aria-label": "Add a channel to this layer", children: "Add Channel" })] }) : null, is3dMode && image2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [jsx$1(Typography, { className: classes2.clippingPanesLabel, children: "Clipping planes:" }), jsx$1(Grid$1, { size: 12, className: classes2.clippingSliders, children: jsx$1(ClippingSliders, { image: image2, spatialSliceX, spatialSliceY, spatialSliceZ, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ }) }), jsx$1(LoadingStatusIndicator, { loadingProgress: volumeLoadingProgress, onStopLoading: onStopVolumeLoading, onRestartLoading: onRestartVolumeLoading, stillRef: volumeStillRef, spatialRenderingMode })] }) : null] }) });
 }
-const useStyles$8 = makeStyles()((theme) => ({
+const useStyles$9 = makeStyles()((theme) => ({
   dimensionsIcon: {
     height: "40px",
     width: "40px",
@@ -261916,7 +263427,7 @@ const useStyles$8 = makeStyles()((theme) => ({
 function GlobalDimensionSlider(props) {
   const { label: label2, targetValue, setTargetValue, min: min2 = 0, max: max2 = 0, spatialRenderingMode = null, setSpatialRenderingMode = null, enable3d = true } = props;
   const { classes: lcClasses } = useControllerSectionStyles();
-  const { classes: classes2 } = useStyles$8();
+  const { classes: classes2 } = useStyles$9();
   const isForZ = spatialRenderingMode !== null;
   const is3dMode = spatialRenderingMode === "3D";
   function handleRenderingModeChange(event2) {
@@ -261927,7 +263438,7 @@ function GlobalDimensionSlider(props) {
   }
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", sx: channelRowContainerSx, children: [jsx$1(Grid$1, { size: 1, sx: channelControlCellSx, children: jsx$1(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsx$1(Grid$1, { size: 1, sx: channelSelectorCellSx, children: jsx$1(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsx$1(Grid$1, { size: 8, sx: channelSliderCellSx, children: !is3dMode ? jsx$1(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) : null }), jsx$1(Grid$1, { size: 2, sx: channelControlCellSx, children: isForZ && enable3d ? jsx$1(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsx$1(FormControlLabel$1, { control: jsx$1(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
 }
-const useStyles$7 = makeStyles()(() => ({
+const useStyles$8 = makeStyles()(() => ({
   layerTypeCentroidSegmentationIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -261977,7 +263488,7 @@ function CombinedEllipsisMenu(props) {
 }
 function SegmentationCentroidsController(props) {
   const { theme, segScope, segLayerCoordination, segChannelScopesByLayer, segChannelCoordination, pointScope, pointLayerCoordination } = props;
-  const { classes: classes2 } = useStyles$7();
+  const { classes: classes2 } = useStyles$8();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const channelScopes = segChannelScopesByLayer?.[segScope] ?? [];
@@ -262419,6 +263930,218 @@ function LinkControllerSubscriber(props) {
   } = props;
   return jsx$1(TitleInfo, { title: title2, closeButtonVisible, removeGridComponent, isScroll: true, theme, isReady: true, children: jsx$1(LinkController, { linkIDInit: linkID, authToken, linkEndpoint, websocketEndpoint, fileTypes, stores, coordinationTypes }) });
 }
+const useStyles$7 = makeStyles()((theme) => ({
+  textSection: {
+    padding: "6px 10px"
+  },
+  annotationMarkdown: {
+    "& p, details, table": {
+      fontSize: "80%",
+      opacity: "0.8"
+    },
+    "& details": {
+      marginBottom: "6px"
+    },
+    "& summary": {
+      // TODO(monorepo): lighten color by 10%
+      borderBottom: `1px solid ${theme.palette.primaryBackground}`,
+      cursor: "pointer"
+    }
+  },
+  navigation: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 4px",
+    borderTop: `1px solid ${theme.palette.primaryBackground}`,
+    borderBottom: `1px solid ${theme.palette.primaryBackground}`
+  }
+}));
+function AnnotationText(props) {
+  const { text: text2, textType } = props;
+  const { classes: classes2 } = useStyles$7();
+  if (!text2) {
+    return null;
+  }
+  return jsx$1("div", { className: classes2.annotationMarkdown, children: textType === DescriptionType.MARKDOWN ? jsx$1(Markdown, { children: text2 }) : jsx$1("p", { children: text2 }) });
+}
+function AnnotationController(props) {
+  const { story, frameIndex, setFrameIndex } = props;
+  const { classes: classes2 } = useStyles$7();
+  if (!story) {
+    return jsx$1("div", { className: classes2.textSection, children: jsx$1(Typography, { variant: "body2", children: "No annotation story has been loaded." }) });
+  }
+  const frames = story.frames || [];
+  const numFrames = frames.length;
+  const hasFrameIndex = typeof frameIndex === "number";
+  const currentFrame = hasFrameIndex ? frames[frameIndex] : null;
+  const canGoBack = hasFrameIndex;
+  const canGoForward = hasFrameIndex ? frameIndex < numFrames - 1 : numFrames > 0;
+  function goBack() {
+    setFrameIndex(frameIndex > 0 ? frameIndex - 1 : null);
+  }
+  function goForward() {
+    setFrameIndex(hasFrameIndex ? frameIndex + 1 : 0);
+  }
+  const frameLabel = hasFrameIndex ? `Frame ${frameIndex + 1} of ${numFrames}` : `Overview (${numFrames} frames)`;
+  return jsxs("div", { children: [jsxs("div", { className: classes2.textSection, children: [story.title ? jsx$1(Typography, { variant: "h6", children: story.title }) : null, jsx$1(AnnotationText, { text: story.description, textType: story.descriptionType })] }), jsxs("div", { className: classes2.navigation, children: [jsx$1(Button, { size: "small", onClick: goBack, disabled: !canGoBack, startIcon: jsx$1(ArrowLeft, {}), children: "Previous" }), jsx$1(Typography, { variant: "body2", children: frameLabel }), jsx$1(Button, { size: "small", onClick: goForward, disabled: !canGoForward, endIcon: jsx$1(ArrowRight, {}), children: "Next" })] }), currentFrame ? jsxs("div", { className: classes2.textSection, children: [currentFrame.title ? jsx$1(Typography, { variant: "subtitle1", children: currentFrame.title }) : null, jsx$1(AnnotationText, { text: currentFrame.description, textType: currentFrame.descriptionType })] }) : null, jsx$1(MenuList, { dense: true, "aria-label": "Annotation frames", children: frames.map((frame2, i2) => jsx$1(MenuItem, { selected: i2 === frameIndex, onClick: () => setFrameIndex(i2), children: jsx$1(ListItemText, { primary: `${i2 + 1}. ${frame2.title || frame2.uid}` }) }, frame2.uid)) })] });
+}
+function AnnotationControllerSubscriber(props) {
+  const {
+    uuid: uuid2,
+    removeGridComponent,
+    theme,
+    title: title2 = "Annotation",
+    closeButtonVisible,
+    downloadButtonVisible,
+    helpText = ViewHelpMapping.ANNOTATION_CONTROLLER,
+    // TODO: importable/exportable
+    // Note: areAnnotationsEditable is a prop passed down from
+    // the ancestor <Vitessce/> or <VitS/> component.
+    // TODO: use areAnnotationsEditable.
+    // eslint-disable-next-line no-unused-vars
+    areAnnotationsEditable
+  } = props;
+  const loaders = useLoaders();
+  const [
+    // eslint-disable-next-line no-unused-vars
+    coordinationScopes,
+    _coordinationScopesBy,
+    coordinationValues
+  ] = useViewMapping(uuid2);
+  const [{ dataset, annotationStory, annotationFrameIndex }, { setAnnotationStory, setAnnotationFrameIndex }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.ANNOTATION_CONTROLLER], coordinationScopes, coordinationValues, uuid2);
+  const [, annotationStoryStatus, annotationStoryUrls, annotationStoryError] = useAnnotationStoryData(loaders, dataset, false, { setAnnotationStory }, { annotationStory }, {});
+  const errors = [annotationStoryError];
+  const isReady = useReady([annotationStoryStatus]);
+  const urls2 = useUrls([annotationStoryUrls]);
+  return jsx$1(TitleInfo, { title: title2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isScroll: true, isReady, urls: urls2, errors, helpText, withPadding: false, children: jsx$1(AnnotationController, { story: annotationStory, frameIndex: annotationFrameIndex, setFrameIndex: setAnnotationFrameIndex }) });
+}
+const NUM_GRID_COLUMNS = 12;
+const NUM_GRID_ROWS = 12;
+const DEFAULT_ANNOTATION_CONTROLLER_UID = "annotation-controller";
+const DEFAULT_ANNOTATION_CONTROLLER_WIDTH = 3;
+function hasAnnotationControllerView(config3) {
+  return (config3?.layout || []).some((view) => view.component === ViewType$1.ANNOTATION_CONTROLLER);
+}
+function getUniqueViewUid(layout, baseUid) {
+  const usedUids = new Set(layout.map((view) => view.uid).filter(Boolean));
+  if (!usedUids.has(baseUid)) {
+    return baseUid;
+  }
+  let i2 = 1;
+  while (usedUids.has(`${baseUid}-${i2}`)) {
+    i2 += 1;
+  }
+  return `${baseUid}-${i2}`;
+}
+function getExistingScope(layout, coordinationType) {
+  const scope = layout.map((view) => view.coordinationScopes?.[coordinationType]).find((s2) => typeof s2 === "string");
+  return scope;
+}
+function addAnnotationControllerView(config3, options = {}) {
+  const { width: width2 = DEFAULT_ANNOTATION_CONTROLLER_WIDTH, uid: uid2 = DEFAULT_ANNOTATION_CONTROLLER_UID } = options;
+  if (!Number.isInteger(width2) || width2 < 1 || width2 >= NUM_GRID_COLUMNS) {
+    throw new Error(`The annotationController width must be a whole number between 1 and ${NUM_GRID_COLUMNS - 1}.`);
+  }
+  const layout = config3?.layout || [];
+  const remainingColumns = NUM_GRID_COLUMNS - width2;
+  const scaleX2 = (value2) => Math.round(Math.min(Math.max(value2, 0), NUM_GRID_COLUMNS) * remainingColumns / NUM_GRID_COLUMNS);
+  const newLayout = layout.map((view) => {
+    const x2 = scaleX2(view.x);
+    const right2 = Math.max(scaleX2(view.x + view.w), x2 + 1);
+    return {
+      ...view,
+      x: Math.min(x2, remainingColumns - 1),
+      w: Math.min(right2, remainingColumns) - Math.min(x2, remainingColumns - 1)
+    };
+  });
+  const coordinationScopes = Object.fromEntries([
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE
+  ].map((coordinationType) => [coordinationType, getExistingScope(layout, coordinationType)]).filter(([, scope]) => scope !== void 0));
+  newLayout.push({
+    uid: getUniqueViewUid(layout, uid2),
+    component: ViewType$1.ANNOTATION_CONTROLLER,
+    ...Object.keys(coordinationScopes).length > 0 ? { coordinationScopes } : {},
+    x: remainingColumns,
+    y: 0,
+    w: width2,
+    h: NUM_GRID_ROWS
+  });
+  return {
+    ...config3,
+    layout: newLayout
+  };
+}
+function isAnyAnnotationEditing(config3) {
+  const type2 = CoordinationType$1.ANNOTATION_EDITABLE;
+  const scopeValues = Object.values(config3?.coordinationSpace?.[type2] || {});
+  const viewValues = (config3?.layout || []).map((view) => view.coordinationValues?.[type2]);
+  return [...scopeValues, ...viewValues].some((value2) => value2 === true);
+}
+function hasScopeMapping(view, coordinationSpace, coordinationType) {
+  if (view.coordinationScopes?.[coordinationType] !== void 0) {
+    return true;
+  }
+  const metaScopes = view.coordinationScopes?.[CoordinationType$1.META_COORDINATION_SCOPES];
+  const metaScopesArr = Array.isArray(metaScopes) ? metaScopes : [metaScopes].filter(Boolean);
+  const metaSpace = coordinationSpace?.[CoordinationType$1.META_COORDINATION_SCOPES] || {};
+  return metaScopesArr.some((metaScope) => metaSpace[metaScope]?.[coordinationType] !== void 0);
+}
+function getUnusedScopeName(config3, coordinationType) {
+  const usedScopes = /* @__PURE__ */ new Set([
+    ...Object.keys(config3?.coordinationSpace?.[coordinationType] || {}),
+    ...(config3?.layout || []).map((view) => view.coordinationScopes?.[coordinationType])
+  ]);
+  let i2 = 0;
+  const toName = (n3) => n3 < 26 ? String.fromCharCode(65 + n3) : toName(Math.floor(n3 / 26) - 1) + String.fromCharCode(65 + n3 % 26);
+  while (usedScopes.has(toName(i2))) {
+    i2 += 1;
+  }
+  return toName(i2);
+}
+function setAnnotationEditing(config3, value2) {
+  if (!hasAnnotationControllerView(config3)) {
+    throw new Error("The view config does not contain an annotationController view. Call addAnnotationControllerView first.");
+  }
+  const type2 = CoordinationType$1.ANNOTATION_EDITABLE;
+  const coordinationSpace = config3.coordinationSpace || {};
+  const supportsEditable = (view) => view.component === ViewType$1.ANNOTATION_CONTROLLER || COMPONENT_COORDINATION_TYPES[view.component]?.includes(type2);
+  const needsScope = (view) => supportsEditable(view) && view.coordinationValues?.[type2] === void 0 && !hasScopeMapping(view, coordinationSpace, type2);
+  const existingControllerScope = config3.layout.filter((view) => view.component === ViewType$1.ANNOTATION_CONTROLLER).map((view) => view.coordinationScopes?.[type2]).find((scope) => typeof scope === "string");
+  const newScope = config3.layout.some(needsScope) ? existingControllerScope ?? getUnusedScopeName(config3, type2) : void 0;
+  const newLayout = config3.layout.map((view) => {
+    if (needsScope(view)) {
+      return {
+        ...view,
+        coordinationScopes: { ...view.coordinationScopes, [type2]: newScope }
+      };
+    }
+    if (view.coordinationValues?.[type2] !== void 0) {
+      return {
+        ...view,
+        coordinationValues: { ...view.coordinationValues, [type2]: value2 }
+      };
+    }
+    return view;
+  });
+  const newScopeValues = Object.fromEntries([...Object.keys(coordinationSpace[type2] || {}), ...newScope ? [newScope] : []].map((scope) => [scope, value2]));
+  return {
+    ...config3,
+    coordinationSpace: {
+      ...coordinationSpace,
+      [type2]: newScopeValues
+    },
+    layout: newLayout
+  };
+}
+function enableAnnotationEditing(config3) {
+  return setAnnotationEditing(config3, true);
+}
+function disableAnnotationEditing(config3) {
+  return setAnnotationEditing(config3, false);
+}
 const useStyles$6 = makeStyles()(() => ({
   info: {
     // details
@@ -264230,7 +265953,7 @@ function HiglassGlobalStyles(props) {
 }
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-BLYM2C4s.js");
+  const { HiGlassComponent } = await import("./higlass-BzshVp46.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -267187,7 +268910,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxs(Fragment, { children: [jsx$1(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsx$1(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-Cm_ERWOf.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-Ch1xO_u5.js"));
 function createWorker() {
   const worker = new WorkerFactory$1();
   worker.AsyncComputationWorker = WorkerFactory;
@@ -321504,7 +323227,7 @@ const VEGA_THEMES = {
 };
 const DATASET_NAME = "table";
 function VegaGlobalStyles() {
-  const { theme } = useStyles$z();
+  const { theme } = useStyles$A();
   return jsx$1(GlobalStyles$3, { styles: {
     "#vg-tooltip-element.vg-tooltip.custom-theme": {
       boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
@@ -321538,7 +323261,7 @@ function renderTooltipContents(tooltipText) {
 }
 function VegaPlot(props) {
   const { spec: partialSpec, data: data2, getTooltipText, signalListeners, renderer = "svg", onNewView } = props;
-  const { classes: tooltipClasses2 } = useStyles$u();
+  const { classes: tooltipClasses2 } = useStyles$v();
   const tooltipHandler = useMemo$1(() => {
     if (typeof getTooltipText === "function") {
       const tooltipConfig = {
@@ -324250,6 +325973,24 @@ class ObsSetsJsonLoader extends JsonLoader {
     }, url, coordinationValues));
   }
 }
+class AnnotationStoryJsonLoader extends JsonLoader {
+  constructor(dataSource, params2) {
+    super(dataSource, params2);
+    this.schema = annotationStoryObj;
+  }
+  async load() {
+    if (this.cachedResult) {
+      return this.cachedResult;
+    }
+    const payload = await super.load();
+    const { data: annotationStory, url } = payload;
+    const coordinationValues = {
+      annotationStory
+    };
+    this.cachedResult = new LoaderResult({ annotationStory }, url, coordinationValues);
+    return this.cachedResult;
+  }
+}
 class CellsJsonAsObsEmbeddingLoader extends JsonLoader {
   constructor(dataSource, params2) {
     super(dataSource, params2);
@@ -347039,7 +348780,8 @@ const baseViewTypes = [
   makeViewType(ViewType$1.COMPARATIVE_HEADING, ComparativeHeadingSubscriber),
   makeViewType(ViewType$1.SAMPLE_SET_PAIR_MANAGER, SampleSetPairManagerSubscriber),
   makeViewType(ViewType$1.OBS_SET_COMPOSITION_BAR_PLOT, CellSetCompositionBarPlotSubscriber),
-  makeViewType(ViewType$1.FEATURE_SET_ENRICHMENT_BAR_PLOT, FeatureSetEnrichmentBarPlotSubscriber)
+  makeViewType(ViewType$1.FEATURE_SET_ENRICHMENT_BAR_PLOT, FeatureSetEnrichmentBarPlotSubscriber),
+  makeViewType(ViewType$1.ANNOTATION_CONTROLLER, AnnotationControllerSubscriber)
 ];
 const baseFileTypes = [
   // All CSV file types
@@ -347056,6 +348798,7 @@ const baseFileTypes = [
   // All JSON file types
   makeFileType(FileType$1.OBS_SEGMENTATIONS_JSON, DataType$3.OBS_SEGMENTATIONS, ObsSegmentationsJsonLoader, JsonSource, z.null()),
   makeFileType(FileType$1.OBS_SETS_JSON, DataType$3.OBS_SETS, ObsSetsJsonLoader, JsonSource, z.null()),
+  makeFileType(FileType$1.ANNOTATION_STORY_JSON, DataType$3.ANNOTATION_STORY, AnnotationStoryJsonLoader, JsonSource, z.null()),
   // All AnnData file types
   ...makeZarrFileTypes(FileType$1.OBS_SETS_ANNDATA_ZARR, DataType$3.OBS_SETS, ObsSetsAnndataLoader, AnnDataSource, obsSetsAnndataSchema),
   ...makeZarrFileTypes(FileType$1.OBS_EMBEDDING_ANNDATA_ZARR, DataType$3.OBS_EMBEDDING, ObsEmbeddingAnndataLoader, AnnDataSource, obsEmbeddingAnndataSchema),
@@ -347407,7 +349150,16 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.FEATURE_POINT_SIGNIFICANCE_THRESHOLD, 0.01, z.number().nullable()),
   new PluginCoordinationType(CoordinationType$1.FEATURE_LABEL_SIGNIFICANCE_THRESHOLD, 0.01, z.number().nullable()),
   new PluginCoordinationType(CoordinationType$1.FEATURE_POINT_FOLD_CHANGE_THRESHOLD, 1, z.number().nullable()),
-  new PluginCoordinationType(CoordinationType$1.FEATURE_LABEL_FOLD_CHANGE_THRESHOLD, 5, z.number().nullable())
+  new PluginCoordinationType(CoordinationType$1.FEATURE_LABEL_FOLD_CHANGE_THRESHOLD, 5, z.number().nullable()),
+  // Annotation frames
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_STORY, null, annotationStoryObj.nullable()),
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_SHAPES, null, annotationShapesArray.nullable()),
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_FRAME_INDEX, null, z.number().nullable()),
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE, true, z.boolean()),
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_TRANSITION_DURATION, 0, z.number()),
+  // TODO: make this non-zero by default?
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM, true, z.boolean()),
+  new PluginCoordinationType(CoordinationType$1.ANNOTATION_EDITABLE, false, z.boolean())
 ];
 const baseAsyncFunctions = [
   new PluginAsyncFunction(AsyncFunctionType.AUTOCOMPLETE_FEATURE, autocompleteFeature),
@@ -347515,6 +349267,11 @@ export {
   PluginJointFileType as a5,
   PluginAsyncFunction as a6,
   z as a7,
+  hasAnnotationControllerView as a8,
+  addAnnotationControllerView as a9,
+  isAnyAnnotationEditing as aa,
+  enableAnnotationEditing as ab,
+  disableAnnotationEditing as ac,
   LercAddCompression as b,
   commonjsGlobal$1 as c,
   requireAssign as d,