react-msaview-cli 9.2.0 → 9.3.0

package/dist/index.js

@@ -4694,7 +4694,7 @@ var init_identifier = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/esm/extends.js
+// ../../node_modules/.pnpm/@babel+runtime@7.29.10/node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e3 = 1; e3 < arguments.length; e3++) {
@@ -4705,7 +4705,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 var init_extends = __esm({
-  "../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/esm/extends.js"() {
+  "../../node_modules/.pnpm/@babel+runtime@7.29.10/node_modules/@babel/runtime/helpers/esm/extends.js"() {
   }
 });
 
@@ -5641,6 +5641,12 @@ var init_emotion_cache_esm = __esm({
   }
 });
 
+// ../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/esm/extends.js
+var init_extends2 = __esm({
+  "../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/esm/extends.js"() {
+  }
+});
+
 // ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
   "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
@@ -6202,7 +6208,7 @@ var init_emotion_element_d59e098f_esm = __esm({
     React2 = __toESM(require_react());
     import_react = __toESM(require_react());
     init_emotion_cache_esm();
-    init_extends();
+    init_extends2();
     init_emotion_weak_memoize_esm();
     init_emotion_utils_esm();
     init_emotion_serialize_esm();
@@ -6318,16 +6324,16 @@ var init_emotion_element_d59e098f_esm = __esm({
 // ../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
   "../../node_modules/.pnpm/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
-    function _extends2() {
-      return module.exports = _extends2 = Object.assign ? Object.assign.bind() : function(n2) {
+    function _extends3() {
+      return module.exports = _extends3 = Object.assign ? Object.assign.bind() : function(n2) {
         for (var e3 = 1; e3 < arguments.length; e3++) {
           var t3 = arguments[e3];
           for (var r4 in t3) ({}).hasOwnProperty.call(t3, r4) && (n2[r4] = t3[r4]);
         }
         return n2;
-      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends2.apply(null, arguments);
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends3.apply(null, arguments);
     }
-    module.exports = _extends2, module.exports.__esModule = true, module.exports["default"] = module.exports;
+    module.exports = _extends3, module.exports.__esModule = true, module.exports["default"] = module.exports;
   }
 });
 
@@ -6619,12 +6625,28 @@ var init_emotion_styled_base_esm = __esm({
   }
 });
 
+// ../../node_modules/.pnpm/@babel+runtime@7.29.10/node_modules/@babel/runtime/helpers/extends.js
+var require_extends2 = __commonJS({
+  "../../node_modules/.pnpm/@babel+runtime@7.29.10/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
+    function _extends3() {
+      return module.exports = _extends3 = Object.assign ? Object.assign.bind() : function(n2) {
+        for (var e3 = 1; e3 < arguments.length; e3++) {
+          var t3 = arguments[e3];
+          for (var r4 in t3) ({}).hasOwnProperty.call(t3, r4) && (n2[r4] = t3[r4]);
+        }
+        return n2;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends3.apply(null, arguments);
+    }
+    module.exports = _extends3, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  }
+});
+
 // ../../node_modules/.pnpm/@emotion+styled@11.14.1_@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.1_support_96e6059dc34d61fb5723d6878bab7582/node_modules/@emotion/styled/dist/emotion-styled.esm.js
 var import_extends4, import_react3, tags, styled;
 var init_emotion_styled_esm = __esm({
   "../../node_modules/.pnpm/@emotion+styled@11.14.1_@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.1_support_96e6059dc34d61fb5723d6878bab7582/node_modules/@emotion/styled/dist/emotion-styled.esm.js"() {
     init_emotion_styled_base_esm();
-    import_extends4 = __toESM(require_extends());
+    import_extends4 = __toESM(require_extends2());
     init_emotion_serialize_esm();
     init_emotion_use_insertion_effect_with_fallbacks_esm();
     init_emotion_utils_esm();
@@ -44846,7 +44868,6 @@ var init_material = __esm({
     init_Alert2();
     init_AlertTitle();
     init_AppBar2();
-    init_AppBar2();
     init_Autocomplete2();
     init_Autocomplete2();
     init_Avatar();
@@ -44861,7 +44882,6 @@ var init_material = __esm({
     init_Button2();
     init_Button2();
     init_ButtonBase2();
-    init_ButtonBase2();
     init_ButtonGroup();
     init_Card();
     init_CardActionArea();
@@ -45038,11 +45058,13 @@ function useDragScroll(axis, onScroll) {
       };
       var onMove = onMove2, onUp = onUp2;
       const { client: startClient, startScroll } = mouseDown;
-      document.addEventListener("mousemove", onMove2);
-      document.addEventListener("mouseup", onUp2);
+      document.addEventListener("pointermove", onMove2);
+      document.addEventListener("pointerup", onUp2);
+      document.addEventListener("pointercancel", onUp2);
       return () => {
-        document.removeEventListener("mousemove", onMove2);
-        document.removeEventListener("mouseup", onUp2);
+        document.removeEventListener("pointermove", onMove2);
+        document.removeEventListener("pointerup", onUp2);
+        document.removeEventListener("pointercancel", onUp2);
       };
     }
   }, [axis, onScroll, mouseDown]);
@@ -45077,10 +45099,11 @@ function DragHandle({ axis, variant, getStart, onDrag, style: style3 }) {
     setHovered(true);
   }, onMouseLeave: () => {
     setHovered(false);
-  }, onMouseDown: (event) => {
+  }, onPointerDown: (event) => {
     startDrag(event, getStart());
   }, style: {
     position: position3,
+    touchAction: "none",
     zIndex: zIndex3,
     cursor: cursor2(axis),
     background: hovered ? fillHovered(theme) : fill(theme),
@@ -45763,13 +45786,14 @@ var init_renderHighlights = __esm({
 function fontSizeFor(rowHeight) {
   return Math.min(Math.max(6, rowHeight - 3), 18);
 }
-var defaultRowHeight, defaultColWidth, defaultHeight, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, zoomFrameMaxLetters, minFeatureLabelHeight, labelFitFontSize, minColWidth, minRowHeight, maxCellSize, settingsPanelWidth, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, minTreeWidth, maxFitTreeWidth, pxPerTreeDepth, maxTreeAreaShare, defaultShowBranchLen, treeOrders, defaultTreeOrder, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultShowTreeScaleBar, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
+var defaultRowHeight, defaultColWidth, defaultHeight, resizeHandleWidth, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, zoomFrameMaxLetters, minFeatureLabelHeight, labelFitFontSize, minColWidth, minRowHeight, maxCellSize, settingsPanelWidth, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, minTreeWidth, maxFitTreeWidth, pxPerTreeDepth, maxTreeAreaShare, defaultShowBranchLen, treeOrders, defaultTreeOrder, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultShowTreeScaleBar, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
 var init_constants = __esm({
   "../lib/dist/constants.js"() {
     "use strict";
     defaultRowHeight = 16;
     defaultColWidth = 12;
     defaultHeight = 550;
+    resizeHandleWidth = 5;
     defaultScrollX = 0;
     defaultScrollY = 0;
     defaultCurrentAlignment = 0;
@@ -49534,7 +49558,7 @@ var require_react_dom_client_production = __commonJS({
           return true;
       }
     }
-    var aliases2 = /* @__PURE__ */ new Map([
+    var aliases3 = /* @__PURE__ */ new Map([
       ["acceptCharset", "accept-charset"],
       ["htmlFor", "for"],
       ["httpEquiv", "http-equiv"],
@@ -59119,7 +59143,7 @@ var require_react_dom_client_production = __commonJS({
           return;
         default:
           if (!(2 < key.length) || "o" !== key[0] && "O" !== key[0] || "n" !== key[1] && "N" !== key[1])
-            key = aliases2.get(key) || key, setValueForAttribute(domElement, key, value);
+            key = aliases3.get(key) || key, setValueForAttribute(domElement, key, value);
           else return;
       }
       viewTransitionMutationContext = true;
@@ -84844,19 +84868,35 @@ var init_wheelZoom = __esm({
 });
 
 // ../lib/dist/useWheelScroll.js
-function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, onZoomSettle, onWheelScroll, scrollZoom }) {
+function canScrollY(model2, delta) {
+  const { scrollY, maxScrollY } = model2;
+  return delta > 0 ? scrollY > maxScrollY : delta < 0 && scrollY < 0;
+}
+function withPinch(pan) {
+  return pinchZoom ? `${pan} ${pinchZoom}` : pan;
+}
+function panTouchAction(model2, axes) {
+  const x2 = axes.includes("x") && model2.maxScrollX < 0;
+  const y2 = axes.includes("y") && model2.maxScrollY < 0;
+  return x2 && y2 ? pinchZoom ?? "none" : x2 ? withPinch("pan-y") : y2 ? withPinch("pan-x") : "auto";
+}
+function useWheelScroll({ ref, model: model2, axes, zoom, onWheelScroll }) {
   const scheduled = (0, import_react39.useRef)(false);
   const zoomFrame = (0, import_react39.useRef)(void 0);
   const zoomSettle = (0, import_react39.useRef)(void 0);
   const deltaX = (0, import_react39.useRef)(0);
   const deltaY = (0, import_react39.useRef)(0);
+  const lastTaken = (0, import_react39.useRef)(Number.NEGATIVE_INFINITY);
   const zoomSmoother = (0, import_react39.useRef)(new WheelZoomSmoother());
   const zoomX = (0, import_react39.useRef)(0);
   const zoomY = (0, import_react39.useRef)(0);
   const lastZoomTime = (0, import_react39.useRef)(null);
-  const prevX = (0, import_react39.useRef)(0);
-  const prevY = (0, import_react39.useRef)(0);
-  const [mouseDragging, setMouseDragging] = (0, import_react39.useState)(false);
+  const prev2 = (0, import_react39.useRef)({ x: 0, y: 0 });
+  const latest = (0, import_react39.useRef)({ x: 0, y: 0 });
+  const panFrame = (0, import_react39.useRef)(false);
+  const [panPointer, setPanPointer] = (0, import_react39.useState)();
+  const x2 = axes.includes("x");
+  const y2 = axes.includes("y");
   (0, import_react39.useEffect)(() => {
     const curr = ref.current;
     if (!curr) {
@@ -84864,9 +84904,8 @@ function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, onZoomSettle, onWhe
     }
     function onWheel(event) {
       const isCtrlZoom = event.ctrlKey || event.metaKey;
-      const isScrollZoom = scrollZoom && !event.shiftKey && Math.abs(event.deltaY) >= Math.abs(event.deltaX);
-      if (onZoom && (isCtrlZoom || isScrollZoom)) {
-        const zoom = onZoom;
+      const isScrollZoom = model2.scrollZoom && !event.shiftKey && Math.abs(event.deltaY) >= Math.abs(event.deltaX);
+      if (zoom && (isCtrlZoom || isScrollZoom)) {
         const rect = curr.getBoundingClientRect();
         zoomSmoother.current.add(event.deltaY, event.deltaMode, isCtrlZoom);
         zoomX.current = event.clientX - rect.left;
@@ -84876,10 +84915,10 @@ function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, onZoomSettle, onWhe
           const frame = (now) => {
             const elapsed = lastZoomTime.current === null ? 16.67 : now - lastZoomTime.current;
             lastZoomTime.current = now;
-            zoom(zoomSmoother.current.step(Math.min(100, elapsed)), zoomX.current, zoomY.current);
+            model2.wheelZoomToPos(zoomSmoother.current.step(Math.min(100, elapsed)), zoomX.current, zoomY.current);
             clearTimeout(zoomSettle.current);
             zoomSettle.current = setTimeout(() => {
-              onZoomSettle?.();
+              model2.endWheelZoom();
             }, zoomSettleMs);
             zoomFrame.current = zoomSmoother.current.idle ? void 0 : requestAnimationFrame(frame);
           };
@@ -84889,27 +84928,25 @@ function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, onZoomSettle, onWhe
         event.stopPropagation();
         return;
       }
-      const consumeX = !!onScrollX && event.deltaX !== 0;
-      const consumeY = !!onScrollY && event.deltaY !== 0;
-      if (consumeX || consumeY) {
-        onWheelScroll?.(event);
-        if (onScrollX) {
-          deltaX.current += event.deltaX;
-        }
-        if (onScrollY) {
-          deltaY.current += event.deltaY;
+      const { deltaX: dx, deltaY: dy } = event;
+      const vertical = Math.abs(dy) >= Math.abs(dx);
+      const latched = event.timeStamp - lastTaken.current < wheelLatchMs;
+      const takeY = y2 && dy !== 0 && (latched || canScrollY(model2, dy) || !vertical);
+      const takeX = x2 && dx !== 0 && (!vertical || takeY);
+      if (takeX || takeY) {
+        if (takeY && vertical) {
+          lastTaken.current = event.timeStamp;
         }
+        onWheelScroll?.(event);
+        deltaX.current += takeX ? event.deltaX : 0;
+        deltaY.current += takeY ? event.deltaY : 0;
         if (!scheduled.current) {
           scheduled.current = true;
           requestAnimationFrame(() => {
-            if (onScrollX) {
-              onScrollX(-deltaX.current);
-              deltaX.current = 0;
-            }
-            if (onScrollY) {
-              onScrollY(-deltaY.current);
-              deltaY.current = 0;
-            }
+            model2.doScrollX(-deltaX.current);
+            model2.doScrollY(-deltaY.current);
+            deltaX.current = 0;
+            deltaY.current = 0;
             scheduled.current = false;
           });
         }
@@ -84926,68 +84963,60 @@ function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, onZoomSettle, onWhe
       }
       clearTimeout(zoomSettle.current);
     };
-  }, [
-    ref,
-    onScrollX,
-    onScrollY,
-    onZoom,
-    onZoomSettle,
-    onWheelScroll,
-    scrollZoom
-  ]);
+  }, [ref, model2, x2, y2, zoom, onWheelScroll]);
   (0, import_react39.useEffect)(() => {
-    if (!mouseDragging) {
+    if (panPointer === void 0) {
       return;
     }
-    function globalMouseMove(event) {
+    function onMove(event) {
+      if (event.pointerId !== panPointer) {
+        return;
+      }
       event.preventDefault();
-      const distanceX = event.clientX - prevX.current;
-      const distanceY = event.clientY - prevY.current;
-      if (distanceX && onScrollX || distanceY && onScrollY) {
-        if (!scheduled.current) {
-          scheduled.current = true;
-          requestAnimationFrame(() => {
-            onScrollX?.(distanceX);
-            onScrollY?.(distanceY);
-            scheduled.current = false;
-            prevX.current = event.clientX;
-            prevY.current = event.clientY;
-          });
-        }
+      latest.current = { x: event.clientX, y: event.clientY };
+      if (!panFrame.current) {
+        panFrame.current = true;
+        requestAnimationFrame(() => {
+          const to = latest.current;
+          model2.doScrollX(x2 ? to.x - prev2.current.x : 0);
+          model2.doScrollY(y2 ? to.y - prev2.current.y : 0);
+          prev2.current = to;
+          panFrame.current = false;
+        });
       }
     }
-    function globalMouseUp() {
-      prevX.current = 0;
-      prevY.current = 0;
-      setMouseDragging(false);
+    function onUp(event) {
+      if (event.pointerId === panPointer) {
+        setPanPointer(void 0);
+      }
     }
-    window.addEventListener("mousemove", globalMouseMove, true);
-    window.addEventListener("mouseup", globalMouseUp, true);
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
     return () => {
-      window.removeEventListener("mousemove", globalMouseMove, true);
-      window.removeEventListener("mouseup", globalMouseUp, true);
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
     };
-  }, [mouseDragging, onScrollX, onScrollY]);
-  function onMouseDown(event) {
-    if (event.button === 0) {
-      prevX.current = event.clientX;
-      prevY.current = event.clientY;
-      setMouseDragging(true);
+  }, [panPointer, model2, x2, y2]);
+  function onPointerDown(event) {
+    if (event.button === 0 && event.isPrimary && panPointer === void 0) {
+      prev2.current = { x: event.clientX, y: event.clientY };
+      latest.current = prev2.current;
+      setPanPointer(event.pointerId);
     }
   }
-  function onMouseUp(event) {
-    event.preventDefault();
-    setMouseDragging(false);
-  }
-  return { onMouseDown, onMouseUp };
+  return { onPointerDown, touchAction: panTouchAction(model2, axes) };
 }
-var import_react39, zoomSettleMs;
+var import_react39, zoomSettleMs, wheelLatchMs, pinchZoom;
 var init_useWheelScroll = __esm({
   "../lib/dist/useWheelScroll.js"() {
     "use strict";
     import_react39 = __toESM(require_react(), 1);
     init_wheelZoom();
     zoomSettleMs = 150;
+    wheelLatchMs = 150;
+    pinchZoom = typeof CSS !== "undefined" && CSS.supports("touch-action", "pinch-zoom") ? "pinch-zoom" : void 0;
   }
 });
 
@@ -85573,13 +85602,10 @@ var init_Track = __esm({
       );
     });
     Track = (0, import_mobx_react35.observer)(function({ model: model2, track }) {
-      const { resizeHandleWidth, rowPanelsWidth, showColumnStats } = model2;
+      const { resizeHandleWidth: resizeHandleWidth2, rowPanelsWidth, showColumnStats } = model2;
       const { model: { height: height2 } } = track;
       const ref = (0, import_react47.useRef)(null);
-      const onScrollX = (0, import_react47.useCallback)((d3) => {
-        model2.doScrollX(d3);
-      }, [model2]);
-      useWheelScroll({ ref, onScrollX });
+      useWheelScroll({ ref, model: model2, axes: "x" });
       const { classes } = useStyles10();
       const { anchor, onMouseMove, onMouseDown, onMouseLeave } = useTrackHover({
         model: model2,
@@ -85589,7 +85615,7 @@ var init_Track = __esm({
         "div",
         { className: classes.row, style: { height: height2 } },
         import_react47.default.createElement(TrackLabel, { model: model2, track }),
-        import_react47.default.createElement("div", { style: { width: rowPanelsWidth + resizeHandleWidth, flexShrink: 0 } }),
+        import_react47.default.createElement("div", { style: { width: rowPanelsWidth + resizeHandleWidth2, flexShrink: 0 } }),
         import_react47.default.createElement(
           "div",
           { ref, "data-testid": `track_${track.model.id}`, tabIndex: -1, style: { outline: "none" }, onKeyDown: (event) => {
@@ -85639,7 +85665,7 @@ var init_VerticalScrollbar = __esm({
       }, [model2, unit]);
       return import_react48.default.createElement(
         "div",
-        { onMouseDown: (event) => {
+        { onPointerDown: (event) => {
           if (event.button === 0 && event.target === event.currentTarget) {
             const y2 = event.clientY - event.currentTarget.getBoundingClientRect().top;
             model2.setScrollY(-y2 / unit + msaAreaHeight / 2);
@@ -86502,7 +86528,7 @@ var version2;
 var init_version3 = __esm({
   "../lib/dist/version.js"() {
     "use strict";
-    version2 = "9.2.0";
+    version2 = "9.3.0";
   }
 });
 
@@ -87821,6 +87847,7 @@ var init_Header = __esm({
     init_useMeasure();
     init_Tune();
     init_material();
+    init_AppBar2();
     import_mobx_react54 = __toESM(require_dist3(), 1);
     init_StatusMessage();
     init_HeaderInfoArea();
@@ -87937,7 +87964,7 @@ var init_Minimap = __esm({
           width: msaCanvasWidth,
           flexShrink: 0
         } },
-        import_react76.default.createElement("canvas", { ref, width: barWidth, height: barHeight, onMouseDown: (event) => {
+        import_react76.default.createElement("canvas", { ref, width: barWidth, height: barHeight, onPointerDown: (event) => {
           if (event.button === 0 && unit > 0) {
             const x2 = event.clientX - event.currentTarget.getBoundingClientRect().left;
             model2.setScrollX(-x2 / unit + msaCanvasWidth / 2);
@@ -88368,51 +88395,52 @@ var init_MSACanvas = __esm({
     init_WheelZoomHint();
     init_msaKeys();
     MSACanvas = (0, import_mobx_react58.observer)(function({ model: model2 }) {
-      const { MSA, msaFilehandle, height: height2, msaCanvasWidth, blocks2d, scrollZoom, scrollX, scrollY, zoomSnapshot } = model2;
+      const { MSA, msaFilehandle, height: height2, msaCanvasWidth, blocks2d, scrollX, scrollY, zoomSnapshot } = model2;
       const blocks = zoomSnapshot ? zoomSnapshot.blocksY.flatMap((by) => zoomSnapshot.blocksX.map((bx) => [bx, by])) : blocks2d;
       const scale = zoomSnapshot ? zoomSnapshotScale(model2, zoomSnapshot) : void 0;
       const ref = (0, import_react82.useRef)(null);
-      const onScrollX = (0, import_react82.useCallback)((d3) => {
-        model2.doScrollX(d3);
-      }, [model2]);
-      const onScrollY = (0, import_react82.useCallback)((d3) => {
-        model2.doScrollY(d3);
-      }, [model2]);
-      const onZoom = (0, import_react82.useCallback)((scaleFactor, offsetX, offsetY) => {
-        model2.wheelZoomToPos(scaleFactor, offsetX, offsetY);
-      }, [model2]);
-      const onZoomSettle = (0, import_react82.useCallback)(() => {
-        model2.endWheelZoom();
-      }, [model2]);
       const hint = useWheelZoomHint(model2);
-      const { onMouseDown, onMouseUp } = useWheelScroll({
+      const { onPointerDown, touchAction } = useWheelScroll({
         ref,
-        onScrollX,
-        onScrollY,
-        onZoom,
-        onZoomSettle,
-        onWheelScroll: hint.onWheelScroll,
-        scrollZoom
+        model: model2,
+        axes: "xy",
+        zoom: true,
+        onWheelScroll: hint.onWheelScroll
       });
       return import_react82.default.createElement(
         "div",
-        { ref, "data-testid": "msa_canvas", tabIndex: 0, "aria-label": alignmentAriaLabel, onKeyDown: (event) => {
-          if (onMsaKey(model2, event)) {
-            event.preventDefault();
-          }
-        }, onMouseDown: (event) => {
-          if (event.shiftKey) {
-            event.preventDefault();
-            ref.current?.focus({ preventScroll: true });
-          } else {
-            onMouseDown(event);
+        {
+          ref,
+          "data-testid": "msa_canvas",
+          tabIndex: 0,
+          "aria-label": alignmentAriaLabel,
+          onKeyDown: (event) => {
+            if (onMsaKey(model2, event)) {
+              event.preventDefault();
+            }
+          },
+          // a shifted press selects cells (useMsaBlockMouse), so it takes the
+          // focus Escape clears from, and leaves out the pan and the page's own
+          // text selection
+          onMouseDown: (event) => {
+            if (event.shiftKey) {
+              event.preventDefault();
+              ref.current?.focus({ preventScroll: true });
+            }
+          },
+          onPointerDown: (event) => {
+            if (!event.shiftKey) {
+              onPointerDown(event);
+            }
+          },
+          style: {
+            position: "relative",
+            touchAction,
+            height: height2,
+            width: msaCanvasWidth,
+            overflow: "hidden"
           }
-        }, onMouseUp, style: {
-          position: "relative",
-          height: height2,
-          width: msaCanvasWidth,
-          overflow: "hidden"
-        } },
+        },
         !MSA && !msaFilehandle ? null : MSA ? import_react82.default.createElement("div", { style: {
           position: "absolute",
           top: 0,
@@ -88686,13 +88714,15 @@ var init_RowPanels = __esm({
     RowPanel = (0, import_mobx_react63.observer)(function({ model: model2, panel }) {
       const ref = (0, import_react87.useRef)(null);
       const { height: height2, blocksY, scrollY } = model2;
-      const onScrollY = (0, import_react87.useCallback)((d3) => {
-        model2.doScrollY(d3);
-      }, [model2]);
-      const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY });
+      const { onPointerDown, touchAction } = useWheelScroll({
+        ref,
+        model: model2,
+        axes: "y"
+      });
       return import_react87.default.createElement(
         "div",
-        { ref, "data-testid": `rowpanel_${panel.id}`, onMouseDown, onMouseUp, style: {
+        { ref, "data-testid": `rowpanel_${panel.id}`, onPointerDown, style: {
+          touchAction,
           height: height2,
           width: panel.width,
           flexShrink: 0,
@@ -88934,6 +88964,7 @@ var init_SettingsPanel = __esm({
     init_ArrowRight();
     init_Close2();
     init_material();
+    init_ButtonBase2();
     import_mobx_react65 = __toESM(require_dist3(), 1);
     init_constants();
     init_getAnnotationsMenu();
@@ -89953,10 +89984,11 @@ var init_TreeCanvas = __esm({
     TreeCanvas = (0, import_mobx_react71.observer)(function({ model: model2 }) {
       const ref = (0, import_react97.useRef)(null);
       const { height: height2, blocksY, effectiveTreeAreaWidth, scrollY, highResScaleFactor } = model2;
-      const onScrollY = (0, import_react97.useCallback)((d3) => {
-        model2.doScrollY(d3);
-      }, [model2]);
-      const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY });
+      const { onPointerDown, touchAction } = useWheelScroll({
+        ref,
+        model: model2,
+        axes: "y"
+      });
       const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor;
       const canvasHeight = height2 * highResScaleFactor;
       const mouseoverRef = useCanvasAutorun({
@@ -89971,7 +90003,8 @@ var init_TreeCanvas = __esm({
       });
       return import_react97.default.createElement(
         "div",
-        { ref, onMouseDown, onMouseUp, style: {
+        { ref, onPointerDown, style: {
+          touchAction,
           height: height2,
           position: "relative",
           width: effectiveTreeAreaWidth
@@ -90071,7 +90104,7 @@ var init_MSAView = __esm({
     init_TreePanel();
     init_TreeRuler();
     TopArea = (0, import_mobx_react74.observer)(function({ model: model2 }) {
-      const { showHorizontalScrollbar, showTreeOverview, resizeHandleWidth } = model2;
+      const { showHorizontalScrollbar, showTreeOverview, resizeHandleWidth: resizeHandleWidth2 } = model2;
       return import_react100.default.createElement(
         "div",
         { style: { display: "flex" } },
@@ -90082,12 +90115,12 @@ var init_MSAView = __esm({
           import_react100.default.createElement(TreeRuler_default, { model: model2 })
         ),
         import_react100.default.createElement(RowPanelHeaders_default, { model: model2 }),
-        import_react100.default.createElement("div", { style: { width: resizeHandleWidth, flexShrink: 0 } }),
+        import_react100.default.createElement("div", { style: { width: resizeHandleWidth2, flexShrink: 0 } }),
         showHorizontalScrollbar ? import_react100.default.createElement(Minimap_default, { model: model2 }) : null
       );
     });
     TrackColumnIndicator = (0, import_mobx_react74.observer)(function({ model: model2 }) {
-      const { mouseCol, mouseClickCol, colWidth, scrollX, effectiveTreeAreaWidth, rowPanelsWidth, resizeHandleWidth, totalTrackAreaHeight, msaCanvasWidth, resolvedSelection } = model2;
+      const { mouseCol, mouseClickCol, colWidth, scrollX, effectiveTreeAreaWidth, rowPanelsWidth, resizeHandleWidth: resizeHandleWidth2, totalTrackAreaHeight, msaCanvasWidth, resolvedSelection } = model2;
       const bands = [
         {
           start: resolvedSelection?.startCol,
@@ -90099,7 +90132,7 @@ var init_MSAView = __esm({
       ];
       return import_react100.default.createElement("div", { style: {
         position: "absolute",
-        left: effectiveTreeAreaWidth + rowPanelsWidth + resizeHandleWidth,
+        left: effectiveTreeAreaWidth + rowPanelsWidth + resizeHandleWidth2,
         top: 0,
         width: msaCanvasWidth,
         height: totalTrackAreaHeight,
@@ -90971,9 +91004,9 @@ var init_scaleBar = __esm({
 
 // ../lib/dist/ggplotPalettes.js
 function paletteNamed(name) {
-  return name === void 0 ? void 0 : namedPalettes[name];
+  return name === void 0 ? void 0 : Object.hasOwn(namedPalettes, name) ? namedPalettes[name] : Object.hasOwn(aliases2, name) ? namedPalettes[aliases2[name]] : void 0;
 }
-var palettes, ggplotPalettes_default, namedPalettes;
+var palettes, ggplotPalettes_default, namedPalettes, aliases2;
 var init_ggplotPalettes = __esm({
   "../lib/dist/ggplotPalettes.js"() {
     "use strict";
@@ -91044,6 +91077,10 @@ var init_ggplotPalettes = __esm({
         "#bab0ac"
       ]
     };
+    aliases2 = {
+      okabeIto: "okabeito",
+      tableau10: "tableau"
+    };
   }
 });
 
@@ -91080,32 +91117,6 @@ var init_exportFileName = __esm({
   }
 });
 
-// ../lib/dist/scales.js
-function resolveScale(spec, values3) {
-  const domain = [...new Set(values3)].sort((a3, b2) => a3.localeCompare(b2));
-  const { map: map2, palette: palette2 } = spec ?? {};
-  const colors2 = map2 ?? createPaletteMap(domain, paletteNamed(palette2));
-  const present = new Set(domain);
-  const labels = map2 ? Object.keys(map2).filter((v2) => present.has(v2)) : domain;
-  return {
-    kind: "categorical",
-    colorOf: (value) => colors2[value],
-    // a categorical value is its own label, and the id a legend keys on
-    legend: labels.map((value) => ({
-      id: value,
-      label: value,
-      color: colors2[value]
-    }))
-  };
-}
-var init_scales = __esm({
-  "../lib/dist/scales.js"() {
-    "use strict";
-    init_createPaletteMap();
-    init_ggplotPalettes();
-  }
-});
-
 // ../lib/dist/featurePanels.js
 function rowPanelWidth(panel, view) {
   return panel.width ?? (panel.kind === "features" ? defaultFeaturePanelWidth : view.rowHeight);
@@ -91226,25 +91237,13 @@ function featurePanelSpans({ panel, width: width3, colWidth, domainBands, annota
     }))
   ]));
 }
-function resolveFeatureScale(field, scale, annotations, drawn) {
-  const valuesOf = (list) => list.map((a3) => featureField(a3, field)).filter(notEmpty);
-  const resolved = resolveScale(scale, valuesOf(annotations));
-  const shown = new Set(valuesOf(drawn));
-  return {
-    field,
-    ...resolved,
-    legend: resolved.legend.filter((entry) => shown.has(entry.id))
-  };
-}
 var UNSCALED_FEATURE, laneOverlap;
 var init_featurePanels = __esm({
   "../lib/dist/featurePanels.js"() {
     "use strict";
-    init_util5();
     init_packDomainLanes();
     init_constants();
     init_featureFields();
-    init_scales();
     init_util3();
     UNSCALED_FEATURE = "#d9d9d9";
     laneOverlap = 0.1;
@@ -92236,6 +92235,166 @@ var init_rowCoordinateCalculations = __esm({
   }
 });
 
+// ../lib/dist/groupKeys.js
+function compareRuns(a3, b2) {
+  const runsA = a3.match(DIGIT_RUNS) ?? [];
+  const runsB = b2.match(DIGIT_RUNS) ?? [];
+  const shared = Math.min(runsA.length, runsB.length);
+  for (let i2 = 0; i2 < shared; i2++) {
+    const x2 = runsA[i2];
+    const y2 = runsB[i2];
+    if (x2 === y2) {
+      continue;
+    }
+    if (/^\d/.test(x2) && /^\d/.test(y2)) {
+      const nx = Number(x2);
+      const ny = Number(y2);
+      if (nx !== ny) {
+        return nx < ny ? -1 : 1;
+      }
+      return x2.length < y2.length ? -1 : 1;
+    }
+    return x2 < y2 ? -1 : 1;
+  }
+  return runsA.length - runsB.length;
+}
+function compareGroupKeys(a3, b2) {
+  if (a3 === b2) {
+    return 0;
+  }
+  if (a3 === "" || b2 === "") {
+    return a3 === "" ? 1 : -1;
+  }
+  const numA = NUMERIC.test(a3);
+  const numB = NUMERIC.test(b2);
+  if (numA !== numB) {
+    return numA ? -1 : 1;
+  }
+  if (numA) {
+    const diff = Number(a3) - Number(b2);
+    if (diff !== 0) {
+      return diff < 0 ? -1 : 1;
+    }
+  }
+  return compareRuns(a3, b2);
+}
+var NUMERIC, DIGIT_RUNS;
+var init_groupKeys = __esm({
+  "../lib/dist/groupKeys.js"() {
+    "use strict";
+    NUMERIC = /^-?\d+(\.\d+)?$/;
+    DIGIT_RUNS = /\d+|\D+/g;
+  }
+});
+
+// ../lib/dist/scales.js
+function rangeList(range) {
+  if (typeof range !== "string") {
+    return range;
+  }
+  if (paletteNamed(range)) {
+    return void 0;
+  }
+  const colors2 = range.split(/,(?![^(]*\))/).map((c2) => c2.trim());
+  return colors2.every((c2) => A(c2).isValid()) ? colors2 : void 0;
+}
+function rangeColors(range, order2) {
+  const list = rangeList(range);
+  return list ? new Map(order2.slice(0, list.length).map((value, i2) => [value, list[i2]])) : new Map(Object.entries(createPaletteMap(order2, paletteNamed(typeof range === "string" ? range : void 0))));
+}
+function resolveScale(spec, values3) {
+  const present = new Set(values3);
+  const listed = new Set(spec?.domain);
+  const order2 = [
+    ...listed,
+    ...[...present].filter((v2) => !listed.has(v2)).sort(compareGroupKeys)
+  ];
+  const colors2 = rangeColors(spec?.range, order2);
+  return {
+    kind: "categorical",
+    colorOf: (value) => colors2.get(value),
+    legend: order2.filter((value) => present.has(value) && colors2.has(value)).map((value) => ({ id: value, label: value, color: colors2.get(value) }))
+  };
+}
+function declarationKey({ spec, field, table }) {
+  const { scale = "categorical", domain, range, title = field } = spec;
+  return JSON.stringify([table, scale, domain, range, title]);
+}
+function resolveShared(uses) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const use4 of uses) {
+    const key = declarationKey(use4);
+    groups.set(key, [...groups.get(key) ?? [], use4]);
+  }
+  return new Map([...groups].map(([key, group]) => {
+    const { spec, field } = group[0];
+    const resolved = resolveScale(spec, group.flatMap((u2) => u2.values));
+    const shown = group[0].shown ? new Set(group.flatMap((u2) => u2.shown ?? [])) : void 0;
+    const scale = {
+      ...resolved,
+      key,
+      title: spec.title ?? field,
+      legend: shown ? resolved.legend.filter((entry) => shown.has(entry.id)) : resolved.legend
+    };
+    return [key, scale];
+  }));
+}
+function readColor(record) {
+  const { scale, legend, ...rest } = record;
+  if (typeof scale !== "object" && legend === void 0) {
+    return record;
+  }
+  const lifted = typeof scale !== "object" ? scale === void 0 ? {} : { scale } : scale.map ? { domain: Object.keys(scale.map), range: Object.values(scale.map) } : scale.palette === void 0 ? {} : { range: scale.palette };
+  return {
+    ...legend === void 0 ? {} : { title: legend },
+    ...lifted,
+    ...rest
+  };
+}
+function readEncoding(encoding) {
+  return readColor(encoding);
+}
+function readRowPanel(panel) {
+  if (panel.kind === "strip") {
+    return readColor(panel);
+  }
+  const color2 = panel.encoding?.color;
+  return color2 ? { ...panel, encoding: { ...panel.encoding, color: readColor(color2) } } : panel;
+}
+function readColumnTrack(track) {
+  const { max: max3, colors: colors2, ...rest } = track;
+  if (max3 === void 0 && colors2 === void 0) {
+    return track;
+  }
+  return {
+    ...colors2 ? {
+      encoding: {
+        color: {
+          domain: Object.keys(colors2),
+          range: Object.values(colors2)
+        }
+      }
+    } : {},
+    ...max3 === void 0 ? {} : { scales: { y: { domainMax: max3 } } },
+    ...rest
+  };
+}
+function colorTable(spec, values3) {
+  return Object.fromEntries(resolveScale(spec, values3).legend.map((e3) => [e3.id, e3.color]));
+}
+function letterColors(scheme) {
+  return "map" in scheme ? scheme.map : colorTable(scheme, scheme.domain ?? []);
+}
+var init_scales = __esm({
+  "../lib/dist/scales.js"() {
+    "use strict";
+    init_colord();
+    init_createPaletteMap();
+    init_ggplotPalettes();
+    init_groupKeys();
+  }
+});
+
 // ../lib/dist/seqPosToGlobalCol.js
 function buildSeqPosIndex(row) {
   const index3 = new Int32Array(row.length);
@@ -93043,7 +93202,9 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * tracks supplied as data: per-column values drawn as bars, or a
      * per-column string drawn as a text track. See docs/layers.md
      */
-    columnTracks: stripDefault2(types.array(types.frozen()), []),
+    columnTracks: stripDefault2(types.array(types.snapshotProcessor(types.frozen(), {
+      preProcessor: readColumnTrack
+    })), []),
     /**
      * #property
      * row-to-structure residue correspondence, computed outside the viewer
@@ -93123,20 +93284,25 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
     clades: stripDefault2(types.array(types.frozen()), []),
     /**
      * #property
-     * what the viewer's own marks read from `rowData`:
-     * `{channel, field, scale?}` per channel, where `channel` is
-     * `tipLabel` or `rowTint`. See docs/layers.md
+     * what the viewer's own marks read from `rowData` or the feature
+     * table: `{channel, field, range?, domain?, title?}` per channel. The
+     * earlier `scale: {palette}` and `scale: {map}` read as `range` and
+     * `domain`. See docs/layers.md
      */
-    encodings: stripDefault2(types.array(types.frozen()), []),
+    encodings: stripDefault2(types.array(types.snapshotProcessor(types.frozen(), {
+      preProcessor: readEncoding
+    })), []),
     /**
      * #property
      * panels drawn between the tree and the alignment:
-     * `{kind: "strip", field, scale?, width?, header?}` colors one cell
-     * per row from a `rowData` field, and
+     * `{kind: "strip", field, range?, domain?, title?, width?, header?}`
+     * colors one cell per row from a `rowData` field, and
      * `{kind: "features", x, encoding?, transform?, width?, header?}`
      * draws the spans the GFF carries. See docs/layers.md
      */
-    rowPanels: stripDefault2(types.array(types.frozen()), [])
+    rowPanels: stripDefault2(types.array(types.snapshotProcessor(types.frozen(), {
+      preProcessor: readRowPanel
+    })), [])
   })).volatile(() => ({
     /**
      * #volatile
@@ -93196,9 +93362,10 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
     volatileWidth: void 0,
     /**
      * #volatile
-     * resize handle width between tree and msa area, px
+     * thickness of the dividers, between the tree and the alignment and under
+     * the view, px
      */
-    resizeHandleWidth: 5,
+    resizeHandleWidth,
     /**
      * #volatile
      * size of blocks of content to be drawn, px
@@ -94491,7 +94658,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
             return [track.id, { arcs }];
           }
           if (track.kind === "bar") {
-            const max3 = track.max ?? 1;
+            const max3 = track.scales?.y?.domainMax ?? 1;
             const values3 = skip2(project(track, track.values ?? [], 0)).map((v2) => Math.min(1, Math.max(0, v2 / max3)));
             return [track.id, { values: values3 }];
           }
@@ -94530,7 +94697,10 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
                 height: this.trackHeight(track.kind, heightKey, track.height),
                 barColor: track.color,
                 arcColor: track.color,
-                customColorScheme: track.colors,
+                customColorScheme: track.encoding?.color ? colorTable(track.encoding.color, [
+                  ...track.encoding.color.domain ?? [],
+                  ...new Set(track.data)
+                ]) : void 0,
                 data: content?.data,
                 arcs: content?.arcs
               }
@@ -95391,7 +95561,7 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * #action
      */
     setColumnTracks(tracks) {
-      self.columnTracks.replace(tracks);
+      self.columnTracks.replace(tracks.map(readColumnTrack));
     },
     /**
      * #action
@@ -95406,14 +95576,14 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * replace what the viewer's marks read from the row table
      */
     setEncodings(encodings) {
-      self.encodings.replace(encodings);
+      self.encodings.replace(encodings.map(readEncoding));
     },
     /**
      * #action
      * replace the panels drawn between the tree and the alignment
      */
     setRowPanels(panels) {
-      self.rowPanels.replace(panels);
+      self.rowPanels.replace(panels.map(readRowPanel));
     },
     /**
      * #action
@@ -95582,46 +95752,42 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * the categorical color keys drawn for this view, shared by the on-screen
      * legend overlay and the SVG export's reserved column. The domain overlay
      * produces the first, listing the `featureFill` scale where an encoding
-     * names one. Every field a row-table encoding or a row panel reads
-     * produces one more, so two channels over one field, or two strips over
-     * it, list that field once. A strip's `legend` names the title it lists
-     * under, so strips over eight fields with one set of colors list one
-     * legend between them
+     * names one. Every scale a row-table encoding or a row panel reads
+     * produces one more, keyed by its declaration, so two channels or two
+     * strips declaring one scale list it once, and strips over eight fields
+     * naming one `title` list one legend between them
      */
     get legends() {
       const { featureFillEncoding, fillPalette, visibleDomainTypes } = this;
       const byKey = /* @__PURE__ */ new Map();
-      const add = (field, entries3, id) => {
-        if (entries3.length === 0) {
+      const ids = /* @__PURE__ */ new Set();
+      const add = (key, title, entries3, overlay = false) => {
+        const k2 = key ?? "domains";
+        if (entries3.length === 0 || byKey.has(k2)) {
           return;
         }
-        const key = field === void 0 ? "domains" : `field:${field}`;
-        const legend = byKey.get(key);
-        if (legend) {
-          const seen = new Set(legend.entries.map((e3) => e3.id));
-          legend.entries.push(...entries3.filter((e3) => !seen.has(e3.id)));
-        } else {
-          byKey.set(key, {
-            id: id ?? (field === void 0 ? "domains" : `rowData-${field}`),
-            title: field ?? "Domains",
-            entries: [...entries3]
-          });
+        const base = overlay || key === void 0 ? "domains" : `rowData-${title}`;
+        let id = base;
+        for (let n2 = 2; ids.has(id); n2++) {
+          id = `${base}-${n2}`;
         }
+        ids.add(id);
+        byKey.set(k2, { id, title: title ?? "Domains", entries: entries3 });
       };
       if (self.actuallyShowDomains && self.numColumns > 0) {
-        add(featureFillEncoding?.field, featureFillEncoding ? featureFillEncoding.legend : visibleDomainTypes.map((d3) => ({
+        add(featureFillEncoding?.key, featureFillEncoding?.title, featureFillEncoding ? featureFillEncoding.legend : visibleDomainTypes.map((d3) => ({
           id: d3.accession,
           label: d3.name,
           color: d3.color ?? fillPalette[d3.accession]
-        })), "domains");
+        })), true);
       }
-      for (const { channel, field, legend } of this.resolvedEncodings) {
+      for (const { channel, key, title, legend } of this.resolvedEncodings) {
         if (!featureChannels.has(channel)) {
-          add(field, legend);
+          add(key, title, legend);
         }
       }
-      for (const { legendTitle, legend } of this.rowPanelScales) {
-        add(legendTitle, legend);
+      for (const { legendKey, legendTitle, legend } of this.rowPanelScales) {
+        add(legendKey, legendTitle, legend);
       }
       return [...byKey.values()];
     },
@@ -95853,12 +96019,46 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
      * table or the encodings, never per row per frame.
      */
     get resolvedEncodings() {
-      const rows = Object.values(self.rowData);
       return self.encodings.map((encoding) => ({
         ...encoding,
-        ...featureChannels.has(encoding.channel) ? resolveFeatureScale(encoding.field, encoding.scale, self.allAnnotations, self.filteredAnnotations) : resolveScale(encoding.scale, rows.map((row) => row?.[encoding.field]).filter(notEmpty))
+        ...this.scaleOf(encoding, featureChannels.has(encoding.channel) ? "features" : "rows")
       }));
     },
+    /**
+     * #getter
+     * every color object the encodings and the row panels declare, keyed
+     * by declaration (`declarationKey`) and resolved once over the union
+     * of the values its records' fields take, so a value two strips share
+     * takes one color in both. A feature field reads every feature loaded,
+     * so hiding a type in the filter dialog leaves the rest in their
+     * colors, and its legend lists the values of the drawn features.
+     */
+    get resolvedScales() {
+      const rows = Object.values(self.rowData);
+      const featureValues = (list, field) => list.map((a3) => featureField(a3, field)).filter(notEmpty);
+      const use4 = (channel, table) => ({
+        spec: channel,
+        field: channel.field,
+        table,
+        ...table === "rows" ? {
+          values: rows.map((row) => row?.[channel.field]).filter(notEmpty)
+        } : {
+          values: featureValues(self.allAnnotations, channel.field),
+          shown: featureValues(self.filteredAnnotations, channel.field)
+        }
+      });
+      return resolveShared([
+        ...self.encodings.map((encoding) => use4(encoding, featureChannels.has(encoding.channel) ? "features" : "rows")),
+        ...self.rowPanels.flatMap((panel) => panel.kind === "strip" ? [use4(panel, "rows")] : panel.encoding?.color ? [use4(panel.encoding.color, "features")] : [])
+      ]);
+    },
+    /**
+     * #method
+     * the shared scale a record's color object resolves to
+     */
+    scaleOf(channel, table) {
+      return this.resolvedScales.get(declarationKey({ spec: channel, field: channel.field, table }));
+    },
     /**
      * #getter
      * each row panel's scale resolved against the values its field takes,
@@ -95872,14 +96072,15 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
       return self.rowPanels.map((panel) => {
         if (panel.kind === "features") {
           const color2 = panel.encoding?.color;
-          const encoding = color2 ? resolveFeatureScale(color2.field, color2.scale, self.allAnnotations, annotations) : featureFillEncoding;
+          const encoding = color2 ? { field: color2.field, ...this.scaleOf(color2, "features") } : featureFillEncoding;
           const label2 = panel.encoding?.label;
           return {
             kind: panel.kind,
             x: panel.x,
             header: panel.header ?? "",
             field: encoding?.field,
-            legendTitle: encoding?.field,
+            legendKey: encoding?.key,
+            legendTitle: encoding?.title,
             colors: color2 ? featureColorMap(annotations, encoding, fillPalette) : this.featureColors,
             labels: label2 ? featureLabelMap(annotations, label2) : featureLabels,
             legend: encoding?.legend ?? this.visibleDomainTypes.map((d3) => ({
@@ -95889,12 +96090,13 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
             }))
           };
         }
-        const { colorOf, legend } = resolveScale(panel.scale, Object.values(rowData).map((row) => row?.[panel.field]).filter(notEmpty));
+        const { colorOf, legend, key, title } = this.scaleOf(panel, "rows");
         return {
           kind: panel.kind,
           field: panel.field,
           header: panel.header ?? panel.field,
-          legendTitle: panel.legend ?? panel.field,
+          legendKey: key,
+          legendTitle: title,
           colors: colorByRow(rowData, panel.field, colorOf),
           legend
         };
@@ -96438,7 +96640,7 @@ var init_model = __esm({
 
 // ../lib/dist/viewerSnapshot.js
 function colorSchemeSnapshot(scheme) {
-  return typeof scheme === "string" ? { colorSchemeName: scheme } : scheme ? { customColorScheme: scheme.map } : {};
+  return typeof scheme === "string" ? { colorSchemeName: scheme } : scheme ? { customColorScheme: letterColors(scheme) } : {};
 }
 function columnHighlights(columns = []) {
   const sorted = [...new Set(columns)].sort((a3, b2) => a3 - b2);
@@ -96514,6 +96716,7 @@ var init_viewerSnapshot = __esm({
   "../lib/dist/viewerSnapshot.js"() {
     "use strict";
     init_theme();
+    init_scales();
   }
 });
 
@@ -96628,6 +96831,7 @@ var init_MSAViewer = __esm({
     init_styles();
     import_mobx7 = __toESM(require_dist(), 1);
     init_model();
+    init_scales();
     init_viewerSnapshot();
     init_Loading2();
     MSAViewer = (0, import_react104.forwardRef)(function MSAViewer2(props, ref) {
@@ -96689,7 +96893,7 @@ var init_MSAViewer = __esm({
         if (typeof scheme === "string") {
           m2.setColorSchemeName(scheme);
         } else if (scheme) {
-          m2.setCustomColorScheme(scheme.map);
+          m2.setCustomColorScheme(letterColors(scheme));
         }
       }),
       synced(viewerHighlights, (m2, v2) => {
@@ -96814,6 +97018,7 @@ function defineMsaElement(tagName = "jbrowse-msa") {
   class MsaElement extends HTMLElement {
     static observedAttributes = [...ownAttributes, ...nightingaleAttributes];
     #viewer;
+    #nearby;
     #model;
     #manager;
     #cancelRange;
@@ -96947,7 +97152,18 @@ function defineMsaElement(tagName = "jbrowse-msa") {
       if (!this.style.display) {
         this.style.display = "block";
       }
-      this.#viewer = mount(this, this.#props());
+      if (this.#lazy) {
+        const height2 = numberAttribute(this.getAttribute("height")) ?? defaultHeight;
+        this.style.minHeight = `${height2 + resizeHandleWidth}px`;
+        this.#nearby = new IntersectionObserver((entries3) => {
+          if (entries3.some((entry) => entry.isIntersecting)) {
+            this.#mount();
+          }
+        }, { rootMargin: lazyMargin });
+        this.#nearby.observe(this);
+      } else {
+        this.#mount();
+      }
       const manager2 = this.closest("nightingale-manager");
       if (manager2) {
         void customElements.whenDefined("nightingale-manager").then(() => {
@@ -96958,7 +97174,17 @@ function defineMsaElement(tagName = "jbrowse-msa") {
         });
       }
     }
+    get #lazy() {
+      return this.getAttribute("loading") === "lazy" && typeof IntersectionObserver !== "undefined";
+    }
+    #mount() {
+      this.#nearby?.disconnect();
+      this.#nearby = void 0;
+      this.#viewer ??= mount(this, this.#props());
+    }
     disconnectedCallback() {
+      this.#nearby?.disconnect();
+      this.#nearby = void 0;
       this.#manager?.unregister(this);
       this.#manager = void 0;
       this.#cancelRange?.();
@@ -96977,6 +97203,10 @@ function defineMsaElement(tagName = "jbrowse-msa") {
         }
       } else if (name === "highlight") {
         this.#followHighlight();
+      } else if (name === "loading") {
+        if (this.#nearby && !this.#lazy) {
+          this.#mount();
+        }
       } else {
         this.#viewer?.update(this.#props());
       }
@@ -96985,11 +97215,12 @@ function defineMsaElement(tagName = "jbrowse-msa") {
   customElements.define(tagName, MsaElement);
   return MsaElement;
 }
-var import_mobx8, dataProperties, ownAttributes, nightingaleAttributes;
+var import_mobx8, dataProperties, ownAttributes, lazyMargin, nightingaleAttributes;
 var init_element = __esm({
   "../lib/dist/element.js"() {
     "use strict";
     import_mobx8 = __toESM(require_dist(), 1);
+    init_constants();
     init_mount();
     dataProperties = [
       "msa",
@@ -97010,8 +97241,10 @@ var init_element = __esm({
       "hide-header",
       "theme",
       "reference-row",
-      "tree-area-width"
+      "tree-area-width",
+      "loading"
     ];
+    lazyMargin = "200px";
     nightingaleAttributes = ["display-start", "display-end", "highlight"];
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-msaview-cli",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -20,8 +20,8 @@
     "@types/node": "^26.6.5",
     "esbuild": "^0.28.2",
     "mobx-react": "^10.0.2",
-    "msa-parsers": "9.2.0",
-    "react-msaview": "9.2.0"
+    "msa-parsers": "9.3.0",
+    "react-msaview": "9.3.0"
   },
   "dependencies": {
     "jsdom": "^30.1.3"