@teselagen/ove 0.8.40 → 0.8.41

package/index.umd.js

@@ -124411,14 +124411,34 @@ ${seq.sequence}
         track.alignmentData.sequence
       );
       const mismatches = matchHighlightRanges.filter(({ isMatch }) => !isMatch);
+      const alignedSeq = track.alignmentData.sequence;
+      const seqLen = alignedSeq.length;
+      const startIndex = seqLen - alignedSeq.replace(/^-+/, "").length;
+      const endIndex = alignedSeq.replace(/-+$/, "").length;
+      const gapRanges = [
+        startIndex > 0 && {
+          start: 0,
+          end: startIndex - 1,
+          differenceType: "gap"
+        },
+        endIndex < seqLen && {
+          start: endIndex,
+          end: seqLen - 1,
+          differenceType: "gap"
+        }
+      ].filter(Boolean);
       return __spreadProps(__spreadValues({}, track), {
         sequenceData: sequenceData2,
         matchHighlightRanges,
-        additionalSelectionLayers: matchHighlightRanges.filter(({ isMatch }) => !isMatch).map((range2) => {
-          return __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
+        additionalSelectionLayers: [
+          ...matchHighlightRanges.filter(({ isMatch }) => !isMatch).map((range2) => __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
             className: "veAlignmentMismatch"
-          });
-        }),
+          })),
+          ...gapRanges.map((range2) => __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
+            className: "veAlignmentMismatch"
+          }))
+        ],
+        gapRanges,
         mismatches
       });
     });
@@ -124552,23 +124572,30 @@ ${seq.sequence}
     const startIndex = seqLength - nonTempSeqWithoutLeadingDashes.length;
     const endIndex = seqLength - (seqLength - nonTempSeqWithoutTrailingDashes.length);
     for (let index2 = startIndex; index2 < endIndex; index2++) {
-      const isMatch = tempSeq[index2].toLowerCase() === nonTempSeq[index2].toLowerCase();
-      const previousRange = ranges[ranges.length - 1];
-      if (previousRange) {
-        if (previousRange.isMatch === isMatch) {
-          previousRange.end++;
+      const tempBase = tempSeq[index2].toLowerCase();
+      const nonTempBase = nonTempSeq[index2].toLowerCase();
+      const isMatch = tempBase === nonTempBase;
+      let differenceType = null;
+      if (!isMatch) {
+        if (tempBase === "-") {
+          differenceType = "insertion";
+        } else if (nonTempBase === "-") {
+          differenceType = "deletion";
         } else {
-          ranges.push({
-            start: index2,
-            end: index2,
-            isMatch
-          });
+          differenceType = "mismatch";
         }
+      }
+      const previousRange = ranges[ranges.length - 1];
+      if (previousRange && previousRange.isMatch === isMatch && previousRange.differenceType === differenceType) {
+        previousRange.end++;
+      } else if (previousRange) {
+        ranges.push({ start: index2, end: index2, isMatch, differenceType });
       } else {
         ranges.push({
           start: startIndex,
           end: startIndex,
-          isMatch
+          isMatch,
+          differenceType
         });
       }
     }
@@ -145343,7 +145370,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.40";
+  const version = "0.8.41";
   const packageJson = {
     version
   };
@@ -151610,11 +151637,13 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           dimensions: { width = 200 },
           laneHeight,
           laneSpacing = 1,
-          isTrackSelected = []
+          isTrackSelected = [],
+          activeFilterType = "all"
         } = this.props;
         const charWidth2 = this.getCharWidth();
         const {
           matchHighlightRanges: _matchHighlightRanges,
+          gapRanges = [],
           alignmentData: { trimmedRange } = {}
         } = alignmentTracks[i2];
         const matchHighlightRanges = !trimmedRange ? _matchHighlightRanges : flatMap(_matchHighlightRanges, (r2) => {
@@ -151641,10 +151670,19 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
             charWidth2
           );
           const toAdd = `M${xStart},${y2} L${xStart + width2},${y2} L${xStart + width2},${y2 + height} L${xStart},${y2 + height}`;
-          if (!range2.isMatch) {
+          if (!range2.isMatch && (activeFilterType === "all" || range2.differenceType === activeFilterType)) {
             redPath += toAdd;
           }
         });
+        if (activeFilterType === "gap") {
+          gapRanges.forEach((range2) => {
+            const { xStart, width: width2 } = getXStartAndWidthFromNonCircularRange(
+              range2,
+              charWidth2
+            );
+            redPath += `M${xStart},${y2} L${xStart + width2},${y2} L${xStart + width2},${y2 + height} L${xStart},${y2 + height}`;
+          });
+        }
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -151674,7 +151712,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         "scrollAlignmentView",
         "laneHeight",
         "laneSpacing",
-        "isTrackSelected"
+        "isTrackSelected",
+        "activeFilterType"
       ].some((key) => props[key] !== newProps[key]))
         return true;
       return false;
@@ -151952,6 +151991,66 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return splitRangeIntoTwoPartsIfItIsCircular(inverted, seqLen);
   }
   __name(getTrimmedRangesToDisplay, "getTrimmedRangesToDisplay");
+  function groupConsecutiveDifferences(differences) {
+    const grouped = [];
+    for (const diff of differences) {
+      if (diff.type === "mismatch") {
+        grouped.push(__spreadProps(__spreadValues({}, diff), { start: diff.position, end: diff.position }));
+        continue;
+      }
+      const last2 = grouped[grouped.length - 1];
+      if (last2 && last2.type === diff.type && last2.end === diff.position - 1) {
+        grouped[grouped.length - 1] = __spreadProps(__spreadValues({}, last2), { end: diff.position });
+      } else {
+        grouped.push(__spreadProps(__spreadValues({}, diff), { start: diff.position, end: diff.position }));
+      }
+    }
+    return grouped;
+  }
+  __name(groupConsecutiveDifferences, "groupConsecutiveDifferences");
+  function findAlignmentDifferences(alignedSeqs) {
+    var _a2;
+    if (alignedSeqs.length < 2 || !((_a2 = alignedSeqs[0]) == null ? void 0 : _a2.length)) return [];
+    const template = alignedSeqs[0].toLowerCase();
+    const nonTemplates = alignedSeqs.slice(1).map((s2) => s2.toLowerCase());
+    const trackBounds = nonTemplates.map((seq) => {
+      const withoutLeading = seq.replace(/^-+/, "");
+      const withoutTrailing = seq.replace(/-+$/, "");
+      const start2 = seq.length - withoutLeading.length;
+      const end2 = seq.length - (seq.length - withoutTrailing.length);
+      return { start: start2, end: end2 };
+    });
+    const differences = [];
+    for (let i2 = 0; i2 < template.length; i2++) {
+      const templateBase = template[i2];
+      const allNonTemplateBases = nonTemplates.map((seq) => seq[i2]);
+      const bases = [templateBase, ...allNonTemplateBases];
+      const alignedIndices = trackBounds.reduce((acc, { start: start2, end: end2 }, idx) => {
+        if (i2 >= start2 && i2 < end2) acc.push(idx);
+        return acc;
+      }, []);
+      if (alignedIndices.length === 0) {
+        differences.push({ position: i2, type: "gap", bases });
+        continue;
+      }
+      const alignedBases = alignedIndices.map((idx) => allNonTemplateBases[idx]);
+      const templateIsGap = templateBase === "-";
+      const nonTemplateHasBase = alignedBases.some((b3) => b3 !== "-");
+      const nonTemplateHasGap = alignedBases.some((b3) => b3 === "-");
+      if (templateIsGap && nonTemplateHasBase) {
+        differences.push({ position: i2, type: "insertion", bases });
+      } else if (!templateIsGap && nonTemplateHasGap) {
+        differences.push({ position: i2, type: "deletion", bases });
+      } else if (!templateIsGap) {
+        const uniqueBases = /* @__PURE__ */ new Set([templateBase, ...alignedBases]);
+        if (uniqueBases.size > 1) {
+          differences.push({ position: i2, type: "mismatch", bases });
+        }
+      }
+    }
+    return differences;
+  }
+  __name(findAlignmentDifferences, "findAlignmentDifferences");
   function scrollToAlignmentSelection() {
     const el = document.querySelector(".veCaret");
     if (el) {
@@ -151965,159 +152064,145 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     }
   }
   __name(updateCaretPosition, "updateCaretPosition");
+  const FILTER_OPTIONS = [
+    { value: "all", label: "All" },
+    { value: "mismatch", label: "Mismatches" },
+    { value: "insertion", label: "Insertions" },
+    { value: "deletion", label: "Deletions" },
+    { value: "gap", label: "Gaps" }
+  ];
   function FindMismatches(props) {
-    const { alignmentJson, id: id2 } = props;
+    var _a2;
+    const { alignmentJson, id: id2, onFilterChange } = props;
     const alignedSeqs = reactExports.useMemo(
       () => alignmentJson.map((t2) => {
-        var _a2;
-        return ((_a2 = t2.alignmentData) == null ? void 0 : _a2.sequence) || "";
+        var _a3;
+        return ((_a3 = t2.alignmentData) == null ? void 0 : _a3.sequence) || "";
       }),
       [alignmentJson]
     );
-    const mismatches = reactExports.useMemo(() => {
-      const result = [{ position: 0, bases: [""] }];
-      if (alignedSeqs.length > 1 && alignedSeqs[0].length) {
-        for (let i2 = 0; i2 < alignedSeqs[0].length; i2++) {
-          const bases = alignedSeqs.map((seq) => seq[i2]);
-          const uniqueBases = new Set(bases);
-          if (uniqueBases.size > 1 && !uniqueBases.has("-")) {
-            result.push({ position: i2, bases });
-          }
-        }
-      }
-      return result;
-    }, [alignedSeqs]);
+    const [activeFilter, setActiveFilter] = React.useState("all");
+    const allDifferences = reactExports.useMemo(
+      () => groupConsecutiveDifferences(findAlignmentDifferences(alignedSeqs)),
+      [alignedSeqs]
+    );
+    const countsByType = reactExports.useMemo(() => {
+      const counts = { all: 0, mismatch: 0, insertion: 0, deletion: 0, gap: 0 };
+      allDifferences.forEach((d2) => {
+        counts[d2.type] = (counts[d2.type] || 0) + 1;
+        counts.all++;
+      });
+      return counts;
+    }, [allDifferences]);
+    const differences = reactExports.useMemo(() => {
+      const filtered = activeFilter === "all" ? allDifferences : allDifferences.filter((d2) => d2.type === activeFilter);
+      return [{ position: -1, start: -1, end: -1, bases: [""] }, ...filtered];
+    }, [allDifferences, activeFilter]);
     const currentCaretPosition = useSelector(
       (state2) => {
-        var _a2;
-        return (_a2 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a2.caretPosition;
+        var _a3;
+        return (_a3 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a3.caretPosition;
       }
     );
     const [currentIdx, setCurrentIdx] = React.useState(0);
-    const [disablePrev, setDisablePrev] = React.useState(true);
-    const [disableNext, setDisableNext] = React.useState(false);
-    const currentMismatch = mismatches[currentIdx];
-    const handleButtonsState = reactExports.useCallback(
-      (caret) => {
-        if (mismatches.length <= 1) {
-          setDisablePrev(true);
-          setDisableNext(true);
-          return;
-        }
-        const firstMismatchPos = mismatches[1].position;
-        const lastMismatchPos = mismatches[mismatches.length - 1].position;
-        setDisablePrev(caret <= firstMismatchPos);
-        setDisableNext(caret >= lastMismatchPos);
-      },
-      [mismatches]
-    );
+    const currentDiff = differences[currentIdx];
+    const disablePrev = currentIdx <= 1;
+    const disableNext = currentIdx >= differences.length - 1;
+    reactExports.useEffect(() => {
+      setCurrentIdx(0);
+    }, [activeFilter]);
+    reactExports.useEffect(() => {
+      onFilterChange == null ? void 0 : onFilterChange({ activeFilter });
+    }, [activeFilter, onFilterChange]);
     reactExports.useEffect(() => {
       if (currentCaretPosition !== -1) {
-        const mismatchIdx = mismatches.findIndex(
-          (m2) => m2.position === currentCaretPosition || m2.position === currentCaretPosition - 1
+        const diffIdx = differences.findIndex(
+          (d2, i2) => i2 > 0 && currentCaretPosition >= d2.start && currentCaretPosition <= d2.end + 1
         );
-        if (mismatchIdx !== -1 && mismatchIdx !== currentIdx) {
-          handleButtonsState(currentCaretPosition);
-          setCurrentIdx(mismatchIdx);
+        if (diffIdx !== -1 && diffIdx !== currentIdx) {
+          setCurrentIdx(diffIdx);
         }
       }
-    }, [currentCaretPosition, mismatches, currentIdx, handleButtonsState]);
-    const updateView = /* @__PURE__ */ __name((mismatch) => {
-      const idx = mismatches.indexOf(mismatch);
-      const position2 = mismatch.position;
-      handleButtonsState(position2);
+    }, [currentCaretPosition, differences, currentIdx]);
+    const updateView = /* @__PURE__ */ __name((diff) => {
+      const idx = differences.indexOf(diff);
+      const { start: start2, end: end2 } = diff;
       setCurrentIdx(idx);
-      updateCaretPosition({ start: position2, end: position2 });
+      updateCaretPosition({ start: start2, end: end2 });
       setTimeout(() => {
         scrollToAlignmentSelection();
       }, 0);
     }, "updateView");
-    const prevMismatch = /* @__PURE__ */ __name(() => {
-      if (currentIdx > 1) {
-        const newIdx = Math.max(0, currentIdx - 1);
-        let prev = mismatches[newIdx];
-        if (currentCaretPosition > 0) {
-          prev = [...mismatches].reverse().find((m2) => m2.position < currentCaretPosition);
-        }
-        if (prev) {
-          updateView(prev);
-        }
-      }
-    }, "prevMismatch");
-    const nextMismatch = /* @__PURE__ */ __name(() => {
-      if (currentIdx < mismatches.length - 1) {
-        const newIdx = Math.min(mismatches.length - 1, currentIdx + 1);
-        let next = mismatches[newIdx];
-        if (currentCaretPosition > 0) {
-          next = mismatches.find(
-            (m2) => m2.position > currentCaretPosition && m2.position > 1
-          );
-        }
-        if (next) {
-          updateView(next);
+    const prevDifference = /* @__PURE__ */ __name(() => {
+      var _a3, _b2;
+      const pivot = currentCaretPosition >= 0 ? currentCaretPosition : (_b2 = (_a3 = differences[currentIdx]) == null ? void 0 : _a3.start) != null ? _b2 : 0;
+      const prev = [...differences].reverse().find((d2) => d2.start >= 0 && d2.start < pivot);
+      if (prev) updateView(prev);
+    }, "prevDifference");
+    const nextDifference = /* @__PURE__ */ __name(() => {
+      var _a3, _b2;
+      const pivot = currentCaretPosition >= 0 ? currentCaretPosition : (_b2 = (_a3 = differences[currentIdx]) == null ? void 0 : _a3.start) != null ? _b2 : -1;
+      const next = differences.find((d2) => d2.start > pivot && d2.start >= 0);
+      if (next) updateView(next);
+    }, "nextDifference");
+    const noDifferences = differences.length <= 1;
+    const activeOption = FILTER_OPTIONS.find((o2) => o2.value === activeFilter);
+    const activeLabel = (_a2 = activeOption == null ? void 0 : activeOption.label) != null ? _a2 : "Differences";
+    const filterMenu = /* @__PURE__ */ React.createElement(Menu, null, FILTER_OPTIONS.map(({ value, label }) => {
+      var _a3;
+      const count2 = (_a3 = countsByType[value]) != null ? _a3 : 0;
+      const isActive2 = activeFilter === value;
+      return /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          key: value,
+          active: isActive2,
+          onClick: /* @__PURE__ */ __name(() => setActiveFilter(value), "onClick"),
+          text: /* @__PURE__ */ React.createElement("span", { className: "veDiffMenuItem-inner" }, label, /* @__PURE__ */ React.createElement(Tag, { round: true, minimal: true, style: { marginLeft: 6 } }, count2))
         }
-      }
-    }, "nextMismatch");
-    return /* @__PURE__ */ React.createElement(
-      "div",
+      );
+    }));
+    return /* @__PURE__ */ React.createElement("div", { className: "veDiffNavigator" }, /* @__PURE__ */ React.createElement(
+      Popover,
       {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          gap: 10
-        }
-      },
-      mismatches.length === 1 ? /* @__PURE__ */ React.createElement("span", { style: { fontStyle: "italic", color: "grey" } }, "no mismatches") : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement("strong", null, "Mismatches"),
-        /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 2 } }, /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            intent: "primary",
-            icon: "arrow-left",
-            "data-tip": "Previous Mismatch",
-            onClick: prevMismatch,
-            disabled: disablePrev,
-            small: true,
-            minimal: true
-          }
-        ), /* @__PURE__ */ React.createElement(
+        minimal: true,
+        position: Position.BOTTOM_LEFT,
+        content: filterMenu,
+        target: /* @__PURE__ */ React.createElement(
           Button,
           {
-            intent: "primary",
-            icon: "arrow-right",
-            "data-tip": "Next Mismatch",
-            onClick: nextMismatch,
-            disabled: disableNext,
+            minimal: true,
+            "data-tip": "Filter Difference Type",
             small: true,
-            minimal: true
-          }
-        ))
-      ), /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          style: {
-            fontSize: "0.8em",
-            color: "grey",
-            lineHeight: "0.8em"
-          }
-        },
-        currentMismatch.position > 1 && /* @__PURE__ */ React.createElement("span", null, "Position: ", currentMismatch.position + 1, " | "),
-        "(",
-        currentIdx,
-        " of ",
-        mismatches.length - 1,
-        ")"
-      ))
-    );
+            rightIcon: "caret-down",
+            className: "veDiffFilter-trigger"
+          },
+          activeLabel
+        )
+      }
+    ), noDifferences ? /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-empty" }, "no", " ", activeFilter === "all" ? "differences" : activeLabel.toLowerCase()) : /* @__PURE__ */ React.createElement("div", { className: "veDiffNav" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        "data-tip": "Previous Difference",
+        icon: "arrow-left",
+        intent: Intent.PRIMARY,
+        onClick: prevDifference,
+        disabled: disablePrev
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "veDiffNav-center" }, /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-fraction" }, currentIdx, /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-sep" }, "/"), differences.length - 1), (currentDiff == null ? void 0 : currentDiff.start) > -1 && /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-pos" }, ":", currentDiff.start + 1)), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        "data-tip": "Next Difference",
+        icon: "arrow-right",
+        intent: Intent.PRIMARY,
+        onClick: nextDifference,
+        disabled: disableNext
+      }
+    )));
   }
   __name(FindMismatches, "FindMismatches");
   function getGapMap(sequence2) {
@@ -152806,17 +152891,18 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         minimal: true,
         position: "bottom",
         content: /* @__PURE__ */ React.createElement(VisibilityOptions$2, __spreadValues({}, props)),
-        target: /* @__PURE__ */ React.createElement(Tooltip, { content: "Visibility Options" }, /* @__PURE__ */ React.createElement(
+        target: /* @__PURE__ */ React.createElement(
           Button,
           {
             className: "tg-alignment-visibility-toggle",
             small: true,
+            "data-tip": "Visibility Options",
             rightIcon: "caret-down",
             intent: Intent.PRIMARY,
             minimal: true,
             icon: "eye-open"
           }
-        ))
+        )
       }
     );
   }, "AlignmentVisibilityTool"));
@@ -166604,6 +166690,10 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     const [tempTrimAfter, setTempTrimAfter] = reactExports.useState({});
     const [tempTrimmingCaret, setTempTrimmingCaret] = reactExports.useState({});
     const [searchMatchLayers, setSearchMatchLayers] = React.useState([]);
+    const [activeFilterType, setActiveFilterType] = reactExports.useState("all");
+    const handleFilterChange = reactExports.useCallback(({ activeFilter }) => {
+      setActiveFilterType(activeFilter);
+    }, []);
     const bindOutsideChangeHelper = reactExports.useRef({});
     const alignmentHolder = reactExports.useRef(null);
     const alignmentHolderTop = reactExports.useRef(null);
@@ -167329,7 +167419,9 @@ ${seqDataToCopy}\r
               chromatogramData
             }) : linearViewOptions)), {
               additionalSelectionLayers: [
-                ...additionalSelectionLayers || [],
+                ...i2 !== 0 ? (additionalSelectionLayers || []).filter(
+                  (layer) => activeFilterType === "all" ? layer.differenceType !== "gap" : layer.differenceType === activeFilterType
+                ) : additionalSelectionLayers || [],
                 ...searchMatchLayers || []
               ],
               dimensions: {
@@ -167988,7 +168080,14 @@ ${seqDataToCopy}\r
                   setSearchMatchLayers
                 }
               ),
-              /* @__PURE__ */ React.createElement(FindMismatches, { alignmentJson: alignmentTracks, id: id2 }),
+              /* @__PURE__ */ React.createElement(
+                FindMismatches,
+                {
+                  alignmentJson: alignmentTracks,
+                  id: id2,
+                  onFilterChange: handleFilterChange
+                }
+              ),
               additionalTopEl,
               saveMessage && /* @__PURE__ */ React.createElement(
                 "div",
@@ -168089,6 +168188,7 @@ ${seqDataToCopy}\r
                 }
               )),
               alignmentTracks,
+              activeFilterType,
               dimensions: {
                 width: Math.max(width, 10) || 10
               },

package/ove.css

@@ -11297,6 +11297,10 @@ path.partWithSelectedTag {
 /* .alignmentViewTrackContainer:hover .alignmentTrackNameDiv {
   opacity: 1 !important;
 } */
+.ve-alignment-top-bar {
+  align-items: center;
+}
+
 .ve-alignment-top-bar > * {
   overflow-wrap: normal;
   flex: 0 0 auto;
@@ -11313,6 +11317,82 @@ path.partWithSelectedTag {
 .veAlignmentMismatch {
   opacity: 0.9;
 }
+
+.veDiffNavigator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Menu item content layout */
+.veDiffMenuItem-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Navigation pill — groups prev/counter/next into one unit */
+.veDiffNav {
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  background: rgba(92, 112, 128, 0.06);
+  border: 1px solid rgba(92, 112, 128, 0.18);
+}
+
+.veDiffNav-center {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  padding: 0 6px;
+  min-width: 64px;
+  justify-content: center;
+}
+
+.veDiffNav-fraction {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: #5c7080;
+  line-height: 1;
+}
+
+.veDiffNav-sep {
+  margin: 0 1px;
+  opacity: 0.45;
+}
+
+/* Position number — monospace fits sequence coordinates */
+.veDiffNav-pos {
+  font-size: 10px;
+  font-family: monospace;
+  font-variant-numeric: tabular-nums;
+  color: #a7b6c2;
+  line-height: 1;
+}
+
+.veDiffNav-empty {
+  font-size: 11px;
+  font-style: italic;
+  color: #a7b6c2;
+  padding: 0 4px;
+}
+
+.bp3-dark .veDiffNav {
+  background: rgba(167, 182, 194, 0.05);
+  border-color: rgba(167, 182, 194, 0.14);
+}
+
+.bp3-dark .veDiffNav-fraction {
+  color: #5c7080;
+}
+
+.bp3-dark .veDiffNav-pos {
+  color: #4f6272;
+}
+
+.bp3-dark .veDiffNav-empty {
+  color: #5c7080;
+}
 .veRowItem:has(.rowViewTextContainer) .veAlignmentMismatch {
   opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.40",
+  "version": "0.8.41",
   "main": "./src/index.js",
   "type": "module",
   "repository": "https://github.com/TeselaGen/tg-oss",