@onekeyfe/react-native-native-list 3.0.123 → 3.0.124

package/README.md

@@ -155,6 +155,8 @@ order, skips headers without `indexTitle`, and scrolls to the header's existing
 row `key`. Titles must be unique after Unicode NFC normalization, contain no
 leading/trailing whitespace, and be at most eight Unicode code points. Set
 `hapticsEnabled: false` to follow an application-level reduced-haptics setting.
+Set `centeredInWindow: true` to render the interactive index rail against the
+full window and center it on the window's geometric midpoint.
 The web implementation renders the same explicit index entries as a DOM
 overlay, with click and pointer-drag navigation.
 

package/android/src/main/java/com/onekey/nativelist/NativeListView.kt

@@ -18,14 +18,13 @@ import android.view.Gravity
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewConfiguration
+import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
 import android.view.accessibility.AccessibilityNodeInfo
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.SeekBar
 import android.widget.TextView
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -168,6 +167,8 @@ class NativeListView(
   private var sectionIndexScrubbing = false
   private var sectionIndexProgrammaticScroll = false
   private var sectionIndexHapticsEnabled = true
+  private val sectionIndexLocationOnScreen = IntArray(2)
+  private val sectionIndexHostLocationOnScreen = IntArray(2)
   private var pendingScrollRequest: ScrollRequest? = null
   private val actionAnchorInstanceId = UUID.randomUUID().toString()
   private var actionAnchorCounter = 0L
@@ -304,6 +305,7 @@ class NativeListView(
     lastLayoutWidth = nextWidth
     lastLayoutHeight = nextHeight
     lastLayoutDirection = layoutDirection
+    updateSectionIndexAttachment()
     performPendingScrollIfNeeded()
   }
 
@@ -318,6 +320,7 @@ class NativeListView(
 
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
+    updateSectionIndexAttachment()
     val first = config?.items?.firstOrNull()
     if (recyclerView.isLayoutRequested && (first?.type == "market" || first?.json?.optString("presentation") == "market")) {
       relayoutContents()
@@ -325,6 +328,7 @@ class NativeListView(
   }
 
   override fun onDetachedFromWindow() {
+    attachSectionIndexToList()
     updateRefreshIndicatorOffset(0)
     super.onDetachedFromWindow()
   }
@@ -950,6 +954,7 @@ class NativeListView(
 
   fun dispose() {
     if (disposed) return
+    attachSectionIndexToList()
     stopReorderRelayoutLoop()
     invalidateActionAnchor("destroy")
     actionAnchor = null
@@ -1024,9 +1029,9 @@ class NativeListView(
       themeColor(next.theme, "disabledText", "#8D8D8D"),
       themeColor(next.theme, "positive", "#218358"),
       themeColor(next.theme, "inverseText", "#FCFCFC"),
-      next.sectionIndexCenteredInWindow,
     )
     sectionIndexView.visibility = if (sectionIndexEntries.isEmpty()) GONE else VISIBLE
+    updateSectionIndexAttachment()
     sectionIndexPreview.setTextColor(Color.WHITE)
     sectionIndexPreview.background = sectionIndexPreviewBackground()
     sectionIndexView.setActiveIndex(
@@ -1078,11 +1083,75 @@ class NativeListView(
   private fun positionSectionIndexPreview(index: Int) {
     val halfHeight = sectionIndexDp(SECTION_INDEX_PREVIEW_HEIGHT_DP) / 2f
     val maximumY = (contentContainer.height - halfHeight).coerceAtLeast(halfHeight)
-    val targetY = sectionIndexView.top + sectionIndexView.centerYForIndex(index)
+    sectionIndexView.getLocationOnScreen(sectionIndexLocationOnScreen)
+    contentContainer.getLocationOnScreen(sectionIndexHostLocationOnScreen)
+    val targetY = sectionIndexLocationOnScreen[1] - sectionIndexHostLocationOnScreen[1] +
+      sectionIndexView.centerYForIndex(index)
     val clampedY = targetY.coerceIn(halfHeight, maximumY)
     sectionIndexPreview.translationY = clampedY - contentContainer.height / 2f
   }
 
+  private fun updateSectionIndexAttachment() {
+    val windowHost = rootView as? FrameLayout
+    val useWindowHost = config?.sectionIndexCenteredInWindow == true &&
+      sectionIndexEntries.isNotEmpty() &&
+      isAttachedToWindow &&
+      isShown &&
+      width > 0 &&
+      height > 0 &&
+      windowHost != null &&
+      windowHost.width > 0 &&
+      windowHost.height > 0 &&
+      windowHost !== contentContainer
+    if (useWindowHost) {
+      attachSectionIndexToWindow(windowHost)
+    } else {
+      attachSectionIndexToList()
+    }
+  }
+
+  private fun attachSectionIndexToList() {
+    if (sectionIndexView.parent === contentContainer) return
+    (sectionIndexView.parent as? ViewGroup)?.removeView(sectionIndexView)
+    contentContainer.addView(
+      sectionIndexView,
+      FrameLayout.LayoutParams(
+        sectionIndexDp(SECTION_INDEX_RAIL_WIDTH_DP),
+        FrameLayout.LayoutParams.MATCH_PARENT,
+        Gravity.END,
+      ),
+    )
+  }
+
+  private fun attachSectionIndexToWindow(windowHost: FrameLayout) {
+    val railWidth = sectionIndexDp(SECTION_INDEX_RAIL_WIDTH_DP)
+    val railHeight = sectionIndexView.preferredHeight(windowHost.height)
+    windowHost.getLocationOnScreen(sectionIndexHostLocationOnScreen)
+    getLocationOnScreen(sectionIndexLocationOnScreen)
+    val listLeft = sectionIndexLocationOnScreen[0] - sectionIndexHostLocationOnScreen[0]
+    val maximumEndMargin = (windowHost.width - railWidth).coerceAtLeast(0)
+    val endMargin = if (layoutDirection == LAYOUT_DIRECTION_RTL) {
+      listLeft
+    } else {
+      windowHost.width - listLeft - width
+    }.coerceIn(0, maximumEndMargin)
+    val layoutParams = FrameLayout.LayoutParams(
+      railWidth,
+      railHeight,
+      Gravity.TOP or Gravity.END,
+    ).apply {
+      marginEnd = endMargin
+      topMargin = (windowHost.height - railHeight) / 2
+    }
+    if (sectionIndexView.parent !== windowHost) {
+      (sectionIndexView.parent as? ViewGroup)?.removeView(sectionIndexView)
+      windowHost.addView(sectionIndexView, layoutParams)
+      sectionIndexView.bringToFront()
+    } else {
+      sectionIndexView.layoutParams = layoutParams
+    }
+  }
+
   private fun sectionIndexPreviewBackground(): ShapeDrawable {
     val path = Path().apply {
       moveTo(25f, 0f)
@@ -2108,10 +2177,7 @@ private class NativeListSectionIndexView(
   private var normalColor = Color.GRAY
   private var activeColor = Color.BLACK
   private var activeTextColor = Color.WHITE
-  private var centeredInWindow = false
   private var lastTouchIndex: Int? = null
-  private val rootLocationOnScreen = IntArray(2)
-  private val locationOnScreen = IntArray(2)
   private val activeBackgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
   private val normalPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     textAlign = Paint.Align.CENTER
@@ -2134,13 +2200,11 @@ private class NativeListSectionIndexView(
     normalColor: Int,
     activeColor: Int,
     activeTextColor: Int,
-    centeredInWindow: Boolean,
   ) {
     this.titles = titles
     this.normalColor = normalColor
     this.activeColor = activeColor
     this.activeTextColor = activeTextColor
-    this.centeredInWindow = centeredInWindow
     activeIndex = null
     updateContentDescription()
     invalidate()
@@ -2271,6 +2335,11 @@ private class NativeListSectionIndexView(
 
   fun centerYForIndex(index: Int): Float = entryCenterY(index, indexMetrics())
 
+  fun preferredHeight(maximumHeight: Int): Int = minOf(
+    maximumHeight,
+    (dp(8f) * 2f + dp(16f) * titles.size).roundToInt(),
+  )
+
   private data class Metrics(val originY: Float, val trackHeight: Float)
 
   private fun indexMetrics(): Metrics {
@@ -2279,25 +2348,7 @@ private class NativeListSectionIndexView(
     val labelSpacing = dp(16f)
     val availableHeight = (height - edgePadding * 2f).coerceAtLeast(0f)
     val trackHeight = minOf(availableHeight, labelSpacing * titles.size)
-    val centeredOriginY = (height - trackHeight) / 2f
-    if (!centeredInWindow || !isAttachedToWindow) {
-      return Metrics(centeredOriginY, trackHeight)
-    }
-    val systemBarInsets = ViewCompat.getRootWindowInsets(rootView)
-      ?.getInsetsIgnoringVisibility(
-        WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
-      ) ?: return Metrics(centeredOriginY, trackHeight)
-    rootView.getLocationOnScreen(rootLocationOnScreen)
-    getLocationOnScreen(locationOnScreen)
-    val safeTop = rootLocationOnScreen[1] + systemBarInsets.top
-    val safeBottom = rootLocationOnScreen[1] + rootView.height - systemBarInsets.bottom
-    if (safeBottom <= safeTop) return Metrics(centeredOriginY, trackHeight)
-    val localCenterY = (safeTop + safeBottom) / 2f - locationOnScreen[1]
-    val maximumOrigin = (height - edgePadding - trackHeight).coerceAtLeast(edgePadding)
-    return Metrics(
-      (localCenterY - trackHeight / 2f).coerceIn(edgePadding, maximumOrigin),
-      trackHeight,
-    )
+    return Metrics((height - trackHeight) / 2f, trackHeight)
   }
 
   private fun entryCenterY(index: Int, metrics: Metrics): Float {

package/ios/NativeListCell.swift

@@ -100,6 +100,15 @@ final class NativeListActionOrigin {
 
 // OneKey patch: explicit summary actions use the source text's physical-pixel line box.
 private final class NativeListAccessoryButton: UIButton {
+  var pressedBackgroundColor: UIColor?
+
+  override var isHighlighted: Bool {
+    didSet {
+      guard let pressedBackgroundColor else { return }
+      backgroundColor = isHighlighted ? pressedBackgroundColor : .clear
+    }
+  }
+
   var selectorSummaryLineHeight: CGFloat? {
     didSet { invalidateIntrinsicContentSize(); setNeedsLayout() }
   }
@@ -1373,6 +1382,7 @@ final class NativeListCell: UICollectionViewCell {
       button.setImage(nil, for: .disabled)
       button.isEnabled = true
       button.alpha = 1
+      button.pressedBackgroundColor = nil
       button.titleLabel?.numberOfLines = 1
       button.contentHorizontalAlignment = .center
       button.backgroundColor = .clear
@@ -1924,6 +1934,15 @@ final class NativeListCell: UICollectionViewCell {
       trailingStack.spacing = 10
     }
     bindAccessories(item, accessories, theme, checkboxState)
+    if item.data.string("presentation") == "accountSelector",
+       accessories.count == 1,
+       let accessory = accessoryButtons.first(where: { !$0.isHidden }) {
+      // The vertical trailing stack has no stable intrinsic width, so keep its
+      // flexible space in the account title and subtitle column.
+      let width = trailingStack.widthAnchor.constraint(equalTo: accessory.widthAnchor)
+      width.isActive = true
+      selectorConstraints.append(width)
+    }
   }
 
   private func bindRail(_ item: NativeListItem, theme: [String: Any]?) {
@@ -3965,6 +3984,10 @@ final class NativeListCell: UICollectionViewCell {
     let isAccountIcon = currentItem?.data.string("presentation") == "accountSelector" && !isDrillIn
     let size: CGFloat = isDrillIn ? 24 : isAccountIcon && !isAccountCreate ? 38 : 36
     if isAccountCreate { button.layer.cornerRadius = 8 }
+    if isAccountIcon && !isAccountCreate && !data.string("actionKey").isEmpty {
+      button.pressedBackgroundColor = nativeListColor(currentTheme, "rowPressedBackground", "#E8E8E8")
+      button.layer.cornerRadius = size / 2
+    }
     if isAccountIcon { rootStack.setCustomSpacing(5, after: mainStack) }
     button.accessibilityIdentifier = data["testID"] as? String
     button.accessibilityLabel = data["accessibilityLabel"] as? String

package/ios/RNCNativeListView.swift

@@ -65,6 +65,8 @@ final class NativeListView: UIView {
   private let footerCell = NativeListCell(frame: .zero)
   private let sectionIndexView = NativeListSectionIndexView()
   private let sectionIndexPreview = NativeListSectionIndexPreviewView()
+  private var sectionIndexLayoutConstraints: [NSLayoutConstraint] = []
+  private var sectionIndexWindowHeightConstraint: NSLayoutConstraint?
   private var footerHeightConstraint: NSLayoutConstraint!
   private var dataSource: UICollectionViewDiffableDataSource<Int, String>!
   private var config: NativeListConfig?
@@ -161,10 +163,6 @@ final class NativeListView: UIView {
       footerContainer.trailingAnchor.constraint(equalTo: trailingAnchor),
       footerContainer.bottomAnchor.constraint(equalTo: bottomAnchor),
       footerHeightConstraint,
-      sectionIndexView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),
-      sectionIndexView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
-      sectionIndexView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor),
-      sectionIndexView.widthAnchor.constraint(equalToConstant: Self.sectionIndexRailWidth),
       sectionIndexPreview.trailingAnchor.constraint(
         equalTo: safeAreaLayoutGuide.trailingAnchor,
         constant: -Self.sectionIndexPreviewEndMargin
@@ -173,6 +171,7 @@ final class NativeListView: UIView {
       sectionIndexPreview.widthAnchor.constraint(equalToConstant: Self.sectionIndexPreviewWidth),
       sectionIndexPreview.heightAnchor.constraint(equalToConstant: Self.sectionIndexPreviewHeight),
     ])
+    attachSectionIndexToList()
 
     sectionIndexView.isHidden = true
     sectionIndexView.onSelect = { [weak self] index, interacting in
@@ -233,8 +232,19 @@ final class NativeListView: UIView {
     fatalError("init(coder:) has not been implemented")
   }
 
+  override func willMove(toWindow newWindow: UIWindow?) {
+    if newWindow == nil { attachSectionIndexToList() }
+    super.willMove(toWindow: newWindow)
+  }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    updateSectionIndexAttachment()
+  }
+
   override func layoutSubviews() {
     super.layoutSubviews()
+    updateSectionIndexAttachment()
     let direction = effectiveUserInterfaceLayoutDirection
     if let lastLayoutSize,
        lastLayoutSize != bounds.size || lastLayoutDirection != nil && lastLayoutDirection != direction {
@@ -1027,10 +1037,10 @@ final class NativeListView: UIView {
       titles: sectionIndexEntries.map(\.title),
       textColor: nativeListColor(config.theme, "disabledText", "#8D8D8D"),
       activeColor: nativeListColor(config.theme, "positive", "#218358"),
-      activeTextColor: nativeListColor(config.theme, "inverseText", "#FCFCFC"),
-      centeredInWindow: config.sectionIndexCenteredInWindow
+      activeTextColor: nativeListColor(config.theme, "inverseText", "#FCFCFC")
     )
     sectionIndexView.isHidden = sectionIndexEntries.isEmpty
+    updateSectionIndexAttachment()
     sectionIndexPreview.configure(
       fillColor: UIColor(
         red: 202.0 / 255.0,
@@ -1049,6 +1059,63 @@ final class NativeListView: UIView {
     if sectionIndexEntries.isEmpty { finishSectionIndexInteraction(immediately: true) }
   }
 
+  private func updateSectionIndexAttachment() {
+    guard config?.sectionIndexCenteredInWindow == true,
+          !sectionIndexEntries.isEmpty,
+          bounds.width > 0,
+          bounds.height > 0,
+          isVisibleInHierarchy,
+          let window else {
+      attachSectionIndexToList()
+      return
+    }
+    attachSectionIndex(to: window)
+  }
+
+  private var isVisibleInHierarchy: Bool {
+    var current: UIView? = self
+    while let view = current {
+      if view.isHidden || view.alpha <= 0.01 { return false }
+      current = view.superview
+    }
+    return true
+  }
+
+  private func attachSectionIndexToList() {
+    guard sectionIndexView.superview !== self || sectionIndexLayoutConstraints.isEmpty else { return }
+    NSLayoutConstraint.deactivate(sectionIndexLayoutConstraints)
+    sectionIndexWindowHeightConstraint = nil
+    sectionIndexView.removeFromSuperview()
+    addSubview(sectionIndexView)
+    sectionIndexLayoutConstraints = [
+      sectionIndexView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),
+      sectionIndexView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
+      sectionIndexView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor),
+      sectionIndexView.widthAnchor.constraint(equalToConstant: Self.sectionIndexRailWidth),
+    ]
+    NSLayoutConstraint.activate(sectionIndexLayoutConstraints)
+  }
+
+  private func attachSectionIndex(to window: UIWindow) {
+    let railHeight = sectionIndexView.preferredHeight(constrainedTo: window.bounds.height)
+    if sectionIndexView.superview === window {
+      sectionIndexWindowHeightConstraint?.constant = railHeight
+      return
+    }
+    NSLayoutConstraint.deactivate(sectionIndexLayoutConstraints)
+    sectionIndexView.removeFromSuperview()
+    window.addSubview(sectionIndexView)
+    let heightConstraint = sectionIndexView.heightAnchor.constraint(equalToConstant: railHeight)
+    sectionIndexWindowHeightConstraint = heightConstraint
+    sectionIndexLayoutConstraints = [
+      sectionIndexView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),
+      sectionIndexView.centerYAnchor.constraint(equalTo: window.centerYAnchor),
+      sectionIndexView.widthAnchor.constraint(equalToConstant: Self.sectionIndexRailWidth),
+      heightConstraint,
+    ]
+    NSLayoutConstraint.activate(sectionIndexLayoutConstraints)
+  }
+
   private func selectSectionIndex(_ index: Int, interacting: Bool) {
     guard let entry = sectionIndexEntries[safe: index] else { return }
     let changed = sectionIndexView.activeIndex != index
@@ -2156,7 +2223,6 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
   private var textColor: UIColor = .secondaryLabel
   private var activeColor: UIColor = .tintColor
   private var activeTextColor: UIColor = .white
-  private var centeredInWindow = false
   private var lastTouchIndex: Int?
   private(set) var activeIndex: Int?
 
@@ -2197,14 +2263,12 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
     titles: [String],
     textColor: UIColor,
     activeColor: UIColor,
-    activeTextColor: UIColor,
-    centeredInWindow: Bool
+    activeTextColor: UIColor
   ) {
     self.titles = titles
     self.textColor = textColor
     self.activeColor = activeColor
     self.activeTextColor = activeTextColor
-    self.centeredInWindow = centeredInWindow
     labels.forEach { $0.removeFromSuperview() }
     labels = titles.map { title in
       let label = UILabel()
@@ -2313,20 +2377,15 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
     entryCenterY(index: index, metrics: indexMetrics(count: titles.count))
   }
 
+  func preferredHeight(constrainedTo maximumHeight: CGFloat) -> CGFloat {
+    min(maximumHeight, Self.edgePadding * 2 + Self.labelSpacing * CGFloat(titles.count))
+  }
+
   private func indexMetrics(count: Int) -> (originY: CGFloat, trackHeight: CGFloat) {
     guard count > 0 else { return (bounds.midY, 0) }
     let availableHeight = max(0, bounds.height - Self.edgePadding * 2)
     let trackHeight = min(availableHeight, Self.labelSpacing * CGFloat(count))
-    let centeredOriginY = (bounds.height - trackHeight) / 2
-    guard centeredInWindow, let window else { return (centeredOriginY, trackHeight) }
-    let windowCenterY = window.safeAreaLayoutGuide.layoutFrame.midY
-    let localCenterY = convert(CGPoint(x: 0, y: windowCenterY), from: window).y
-    return (
-      (localCenterY - trackHeight / 2).clamped(
-        to: Self.edgePadding...max(Self.edgePadding, bounds.height - Self.edgePadding - trackHeight)
-      ),
-      trackHeight
-    )
+    return ((bounds.height - trackHeight) / 2, trackHeight)
   }
 
   private func entryCenterY(

package/lib/module/web/NativeListWebEngine.js

@@ -10,6 +10,7 @@ const SECTION_INDEX_RAIL_WIDTH = 32;
 const SECTION_INDEX_EDGE_PADDING = 8;
 const SECTION_INDEX_LABEL_SPACING = 16;
 const SECTION_INDEX_MIN_HEIGHT = 120;
+const SECTION_INDEX_WINDOW_Z_INDEX = 100_000;
 const DEFAULT_VIEWPORT_WIDTH = 320;
 const DEFAULT_VIEWPORT_HEIGHT = 640;
 const OVERSCAN_VIEWPORTS = 1;
@@ -467,12 +468,12 @@ export const WEB_LIST_CSS = `
 .ok-native-list-item[data-native-list-reorderable="true"]>.ok-native-list-row{cursor:grab}
 .ok-native-list-root[data-native-list-dragging="true"] .ok-native-list-row{cursor:grabbing}
 .ok-native-list-item[data-native-list-animate-reorder="true"]{transition:transform ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction},height ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction}}
-.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row{overflow:hidden;border-radius:12px;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row{overflow:hidden;border-radius:12px;background:var(--nl-pressed)}
 .ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row>*{visibility:hidden}
-.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group{border-color:transparent;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group{border-color:transparent;background:var(--nl-pressed)}
 .ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group>*{visibility:hidden}
 .ok-native-list-reorder-preview{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);transform-origin:center;will-change:transform;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
-.ok-native-list-reorder-preview>.ok-native-list-row{background:var(--nl-row);cursor:grabbing}
+.ok-native-list-reorder-preview>.ok-native-list-row{background:var(--nl-pressed);cursor:grabbing}
 .ok-native-list-reorder-preview[data-native-list-selected="true"]>.ok-native-list-row{background:var(--nl-selected)}
 .ok-native-list-reorder-count{position:absolute;right:4px;bottom:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--nl-row);border-radius:12px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;line-height:22px;font-weight:600}
 .ok-native-list-item[data-separator="true"]>.ok-native-list-row{border-bottom:1px solid var(--nl-separator)}
@@ -504,7 +505,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
 .ok-native-list-row.ok-native-list-market-skeleton{padding:12px 20px;gap:0}.ok-native-list-skeleton-left{display:flex;align-items:center;gap:12px;flex:1}.ok-native-list-skeleton-text{display:flex;flex-direction:column;gap:4px}.ok-native-list-skeleton-right{display:flex;align-items:center;gap:8px}.ok-native-list-skeleton-mark{display:block;flex-shrink:0;border-radius:8px;animation:ok-native-list-skeleton 1.5s linear infinite alternate}@keyframes ok-native-list-skeleton{from{background-color:var(--nl-skeleton-base)}to{background-color:var(--nl-skeleton-highlight)}}.ok-native-list-market-spinner{display:block;width:20px;height:20px;flex-shrink:0;color:var(--nl-icon);animation:ok-native-list-spin .75s linear infinite}
 @media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner,.ok-native-list-market-spinner{animation:none}.ok-native-list-skeleton-mark{animation:none;background:var(--nl-skeleton-base)}}
-.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport{scrollbar-width:none}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport::-webkit-scrollbar{display:none}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:15px;display:flex;width:14px;height:14px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--nl-disabled);font-family:inherit;font-size:10px;font-weight:400;line-height:1;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-positive);color:var(--nl-inverse-text);font-weight:500}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-positive);outline-offset:1px}
+.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport,.ok-native-list-viewport-frame[data-section-index-visible="true"]>.ok-native-list-viewport{scrollbar-width:none}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport::-webkit-scrollbar,.ok-native-list-viewport-frame[data-section-index-visible="true"]>.ok-native-list-viewport::-webkit-scrollbar{display:none}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:15px;display:flex;width:14px;height:14px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--nl-disabled);font-family:inherit;font-size:10px;font-weight:400;line-height:1;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-positive);color:var(--nl-inverse-text);font-weight:500}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-positive);outline-offset:1px}
 .ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
 .ok-native-list-warning{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px;border-top:1px solid;border-bottom:1px solid;box-sizing:border-box;cursor:default}.ok-native-list-warning-title,.ok-native-list-warning-message{font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere}.ok-native-list-warning-title{font-weight:500;color:var(--nl-primary)}.ok-native-list-warning-message{font-weight:400;color:var(--nl-secondary)}
 .ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
@@ -2257,6 +2258,7 @@ export class NativeListWebEngine {
     disposeWebImageRetries(this.root);
     this.pool.forEach(disposeWebImageRetries);
     this.root.remove();
+    this.indexRail.remove();
     this.hideReorderPreview();
     this.reorderPreview.remove();
     if (host) host.style.position = this.previousHostPosition;
@@ -2308,6 +2310,7 @@ export class NativeListWebEngine {
     Object.entries(values).forEach(([name, value]) => {
       if (!value) return;
       this.root.style.setProperty(name, value);
+      this.indexRail.style.setProperty(name, value);
       this.reorderPreview.style.setProperty(name, value);
     });
   }
@@ -2315,14 +2318,12 @@ export class NativeListWebEngine {
     if (this.destroyed) return;
     const viewportWidth = this.viewport.clientWidth;
     const viewportHeight = this.snapshot.layout.orientation === 'horizontal' ? this.viewport.clientHeight : this.verticalScrollMetrics().viewportLength;
+    const stickyInset = this.snapshot.layout.orientation === 'horizontal' ? 0 : this.collapsiblePagerInsets().sticky;
     if (this.snapshot.layout.orientation !== 'horizontal') {
-      const stickyInset = this.collapsiblePagerInsets().sticky;
       this.sticky.style.top = String(stickyInset) + 'px';
-      this.indexRail.style.top = String(stickyInset) + 'px';
       this.refreshIndicator.style.top = String(stickyInset + 8) + 'px';
     } else {
       this.sticky.style.top = '0px';
-      this.indexRail.style.top = '0px';
       this.refreshIndicator.style.top = '8px';
     }
     if (this.lastViewportWidth >= 0 && (viewportWidth !== this.lastViewportWidth || viewportHeight !== this.lastViewportHeight)) {
@@ -2342,7 +2343,7 @@ export class NativeListWebEngine {
     this.layout = computeWebListLayout(measuredSnapshot, viewportWidth, viewportHeight, this.reorderCompactKey);
     this.content.style.width = String(this.layout.contentWidth) + 'px';
     this.content.style.height = String(this.layout.contentHeight) + 'px';
-    this.renderSectionIndex(this.viewport.clientHeight <= 0 ? DEFAULT_VIEWPORT_HEIGHT : Math.max(1, viewportHeight));
+    this.renderSectionIndex(this.viewport.clientHeight <= 0 ? DEFAULT_VIEWPORT_HEIGHT : Math.max(1, viewportHeight), stickyInset);
     if (previousHorizontal !== this.layout.horizontal) {
       this.viewport.scrollLeft = 0;
       this.viewport.scrollTop = 0;
@@ -2570,32 +2571,54 @@ export class NativeListWebEngine {
   sectionIndexMetrics(viewportHeight) {
     const availableHeight = Math.max(0, viewportHeight - SECTION_INDEX_EDGE_PADDING * 2);
     const trackHeight = Math.min(availableHeight, SECTION_INDEX_LABEL_SPACING * this.sectionIndexEntries.length);
-    const centeredOriginY = (viewportHeight - trackHeight) / 2;
-    if (!this.snapshot.capabilities?.sectionIndex?.centeredInWindow) {
-      return {
-        originY: centeredOriginY,
-        trackHeight
-      };
-    }
-    const view = this.document.defaultView;
-    if (!view) return {
-      originY: centeredOriginY,
-      trackHeight
-    };
-    const visualViewport = view.visualViewport;
-    const windowCenterY = visualViewport ? visualViewport.offsetTop + visualViewport.height / 2 : view.innerHeight / 2;
-    const railTop = this.viewportFrame.getBoundingClientRect().top + (Number.parseFloat(this.indexRail.style.top) || 0);
-    const minOriginY = SECTION_INDEX_EDGE_PADDING;
-    const maxOriginY = Math.max(minOriginY, viewportHeight - SECTION_INDEX_EDGE_PADDING - trackHeight);
     return {
-      originY: Math.min(maxOriginY, Math.max(minOriginY, windowCenterY - railTop - trackHeight / 2)),
+      originY: (viewportHeight - trackHeight) / 2,
       trackHeight
     };
   }
-  renderSectionIndex(viewportHeight) {
+  configureSectionIndexRail(viewportHeight, stickyInset, windowCentered) {
+    const view = this.document.defaultView;
+    const direction = view?.getComputedStyle(this.viewportFrame).direction === 'rtl' ? 'rtl' : 'ltr';
+    this.indexRail.style.direction = direction;
+    if (!windowCentered) {
+      if (this.indexRail.parentElement !== this.viewportFrame) {
+        this.viewportFrame.appendChild(this.indexRail);
+      }
+      this.indexRail.style.removeProperty('position');
+      this.indexRail.style.removeProperty('left');
+      this.indexRail.style.removeProperty('right');
+      this.indexRail.style.removeProperty('height');
+      this.indexRail.style.removeProperty('z-index');
+      this.indexRail.style.insetInlineEnd = '0px';
+      this.indexRail.style.top = String(stickyInset) + 'px';
+      this.indexRail.style.bottom = '0px';
+      return viewportHeight;
+    }
+    if (!view) return viewportHeight;
+    const visualViewport = view.visualViewport;
+    const windowTop = visualViewport?.offsetTop ?? 0;
+    const windowHeight = visualViewport?.height ?? view.innerHeight;
+    const railHeight = Math.min(windowHeight, SECTION_INDEX_EDGE_PADDING * 2 + SECTION_INDEX_LABEL_SPACING * this.sectionIndexEntries.length);
+    const frame = this.viewportFrame.getBoundingClientRect();
+    if (this.indexRail.parentElement !== this.document.body) {
+      this.document.body.appendChild(this.indexRail);
+    }
+    this.indexRail.style.position = 'fixed';
+    this.indexRail.style.removeProperty('left');
+    this.indexRail.style.removeProperty('right');
+    this.indexRail.style.insetInlineEnd = String(Math.max(0, direction === 'rtl' ? frame.left : view.innerWidth - frame.right)) + 'px';
+    this.indexRail.style.top = String(windowTop + (windowHeight - railHeight) / 2) + 'px';
+    this.indexRail.style.bottom = 'auto';
+    this.indexRail.style.height = String(railHeight) + 'px';
+    this.indexRail.style.zIndex = String(SECTION_INDEX_WINDOW_Z_INDEX);
+    return railHeight;
+  }
+  renderSectionIndex(viewportHeight, stickyInset) {
     this.indexRail.replaceChildren();
     if (!sectionIndexEnabled(this.snapshot)) {
       this.sectionIndexEntries = [];
+      this.configureSectionIndexRail(viewportHeight, stickyInset, false);
+      setData(this.viewportFrame, 'sectionIndexVisible', false);
       this.indexRail.hidden = true;
       return;
     }
@@ -2605,12 +2628,16 @@ export class NativeListWebEngine {
       position
     }] : []);
     if (this.sectionIndexEntries.length === 0 || viewportHeight < SECTION_INDEX_MIN_HEIGHT) {
+      this.configureSectionIndexRail(viewportHeight, stickyInset, false);
+      setData(this.viewportFrame, 'sectionIndexVisible', false);
       this.indexRail.hidden = true;
       return;
     }
-    const visibleEntryIndices = this.sectionIndexVisibleEntryIndices(viewportHeight);
+    const windowCentered = this.snapshot.capabilities?.sectionIndex?.centeredInWindow === true && this.viewport.clientHeight > 0;
+    const indexLayoutHeight = this.configureSectionIndexRail(viewportHeight, stickyInset, windowCentered);
+    const visibleEntryIndices = this.sectionIndexVisibleEntryIndices(indexLayoutHeight);
     setData(this.indexRail, 'compact', visibleEntryIndices.length < this.sectionIndexEntries.length);
-    const metrics = this.sectionIndexMetrics(viewportHeight);
+    const metrics = this.sectionIndexMetrics(indexLayoutHeight);
     const visibleTrackHeight = Math.min(metrics.trackHeight, SECTION_INDEX_LABEL_SPACING * visibleEntryIndices.length);
     const visibleOriginY = metrics.originY + (metrics.trackHeight - visibleTrackHeight) / 2;
     const fragment = this.document.createDocumentFragment();
@@ -2628,6 +2655,7 @@ export class NativeListWebEngine {
     });
     this.indexRail.appendChild(fragment);
     this.indexRail.hidden = this.indexRail.childElementCount === 0;
+    setData(this.viewportFrame, 'sectionIndexVisible', !this.indexRail.hidden);
   }
   updateVisibleSelection() {
     const update = (element, row) => {

package/lib/typescript/src/web/NativeListWebEngine.d.ts

@@ -154,6 +154,7 @@ export declare class NativeListWebEngine {
     private renderFooter;
     private sectionIndexVisibleEntryIndices;
     private sectionIndexMetrics;
+    private configureSectionIndexRail;
     private renderSectionIndex;
     private updateVisibleSelection;
     private updateVisibleState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.123",
+  "version": "3.0.124",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -38,7 +38,7 @@
     "nitrogen": "nitrogen",
     "typecheck": "tsc -b",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "test": "jest --runInBand",
+    "test": "jest --runInBand && node --test src/__tests__/selector-parity.cjs",
     "release": "yarn prepare && npm whoami && npm publish --access public"
   },
   "keywords": [
@@ -83,8 +83,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.123",
-    "@onekeyfe/react-native-native-logger": "3.0.123",
+    "@onekeyfe/react-native-image": "3.0.124",
+    "@onekeyfe/react-native-native-logger": "3.0.124",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/web/NativeListWebEngine.ts

@@ -51,6 +51,7 @@ const SECTION_INDEX_RAIL_WIDTH = 32;
 const SECTION_INDEX_EDGE_PADDING = 8;
 const SECTION_INDEX_LABEL_SPACING = 16;
 const SECTION_INDEX_MIN_HEIGHT = 120;
+const SECTION_INDEX_WINDOW_Z_INDEX = 100_000;
 const DEFAULT_VIEWPORT_WIDTH = 320;
 const DEFAULT_VIEWPORT_HEIGHT = 640;
 const OVERSCAN_VIEWPORTS = 1;
@@ -885,12 +886,12 @@ export const WEB_LIST_CSS = `
 .ok-native-list-item[data-native-list-reorderable="true"]>.ok-native-list-row{cursor:grab}
 .ok-native-list-root[data-native-list-dragging="true"] .ok-native-list-row{cursor:grabbing}
 .ok-native-list-item[data-native-list-animate-reorder="true"]{transition:transform ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction},height ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction}}
-.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row{overflow:hidden;border-radius:12px;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row{overflow:hidden;border-radius:12px;background:var(--nl-pressed)}
 .ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row>*{visibility:hidden}
-.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group{border-color:transparent;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group{border-color:transparent;background:var(--nl-pressed)}
 .ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group>*{visibility:hidden}
 .ok-native-list-reorder-preview{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);transform-origin:center;will-change:transform;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
-.ok-native-list-reorder-preview>.ok-native-list-row{background:var(--nl-row);cursor:grabbing}
+.ok-native-list-reorder-preview>.ok-native-list-row{background:var(--nl-pressed);cursor:grabbing}
 .ok-native-list-reorder-preview[data-native-list-selected="true"]>.ok-native-list-row{background:var(--nl-selected)}
 .ok-native-list-reorder-count{position:absolute;right:4px;bottom:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--nl-row);border-radius:12px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;line-height:22px;font-weight:600}
 .ok-native-list-item[data-separator="true"]>.ok-native-list-row{border-bottom:1px solid var(--nl-separator)}
@@ -922,7 +923,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
 .ok-native-list-row.ok-native-list-market-skeleton{padding:12px 20px;gap:0}.ok-native-list-skeleton-left{display:flex;align-items:center;gap:12px;flex:1}.ok-native-list-skeleton-text{display:flex;flex-direction:column;gap:4px}.ok-native-list-skeleton-right{display:flex;align-items:center;gap:8px}.ok-native-list-skeleton-mark{display:block;flex-shrink:0;border-radius:8px;animation:ok-native-list-skeleton 1.5s linear infinite alternate}@keyframes ok-native-list-skeleton{from{background-color:var(--nl-skeleton-base)}to{background-color:var(--nl-skeleton-highlight)}}.ok-native-list-market-spinner{display:block;width:20px;height:20px;flex-shrink:0;color:var(--nl-icon);animation:ok-native-list-spin .75s linear infinite}
 @media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner,.ok-native-list-market-spinner{animation:none}.ok-native-list-skeleton-mark{animation:none;background:var(--nl-skeleton-base)}}
-.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport{scrollbar-width:none}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport::-webkit-scrollbar{display:none}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:15px;display:flex;width:14px;height:14px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--nl-disabled);font-family:inherit;font-size:10px;font-weight:400;line-height:1;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-positive);color:var(--nl-inverse-text);font-weight:500}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-positive);outline-offset:1px}
+.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport,.ok-native-list-viewport-frame[data-section-index-visible="true"]>.ok-native-list-viewport{scrollbar-width:none}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport::-webkit-scrollbar,.ok-native-list-viewport-frame[data-section-index-visible="true"]>.ok-native-list-viewport::-webkit-scrollbar{display:none}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:15px;display:flex;width:14px;height:14px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--nl-disabled);font-family:inherit;font-size:10px;font-weight:400;line-height:1;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-positive);color:var(--nl-inverse-text);font-weight:500}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-positive);outline-offset:1px}
 .ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
 .ok-native-list-warning{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px;border-top:1px solid;border-bottom:1px solid;box-sizing:border-box;cursor:default}.ok-native-list-warning-title,.ok-native-list-warning-message{font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere}.ok-native-list-warning-title{font-weight:500;color:var(--nl-primary)}.ok-native-list-warning-message{font-weight:400;color:var(--nl-secondary)}
 .ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
@@ -3887,6 +3888,7 @@ export class NativeListWebEngine {
     disposeWebImageRetries(this.root);
     this.pool.forEach(disposeWebImageRetries);
     this.root.remove();
+    this.indexRail.remove();
     this.hideReorderPreview();
     this.reorderPreview.remove();
     if (host) host.style.position = this.previousHostPosition;
@@ -3945,6 +3947,7 @@ export class NativeListWebEngine {
     Object.entries(values).forEach(([name, value]) => {
       if (!value) return;
       this.root.style.setProperty(name, value);
+      this.indexRail.style.setProperty(name, value);
       this.reorderPreview.style.setProperty(name, value);
     });
   }
@@ -3956,14 +3959,15 @@ export class NativeListWebEngine {
       this.snapshot.layout.orientation === 'horizontal'
         ? this.viewport.clientHeight
         : this.verticalScrollMetrics().viewportLength;
+    const stickyInset =
+      this.snapshot.layout.orientation === 'horizontal'
+        ? 0
+        : this.collapsiblePagerInsets().sticky;
     if (this.snapshot.layout.orientation !== 'horizontal') {
-      const stickyInset = this.collapsiblePagerInsets().sticky;
       this.sticky.style.top = String(stickyInset) + 'px';
-      this.indexRail.style.top = String(stickyInset) + 'px';
       this.refreshIndicator.style.top = String(stickyInset + 8) + 'px';
     } else {
       this.sticky.style.top = '0px';
-      this.indexRail.style.top = '0px';
       this.refreshIndicator.style.top = '8px';
     }
     if (
@@ -3999,7 +4003,8 @@ export class NativeListWebEngine {
     this.renderSectionIndex(
       this.viewport.clientHeight <= 0
         ? DEFAULT_VIEWPORT_HEIGHT
-        : Math.max(1, viewportHeight)
+        : Math.max(1, viewportHeight),
+      stickyInset
     );
     if (previousHorizontal !== this.layout.horizontal) {
       this.viewport.scrollLeft = 0;
@@ -4333,37 +4338,75 @@ export class NativeListWebEngine {
       availableHeight,
       SECTION_INDEX_LABEL_SPACING * this.sectionIndexEntries.length
     );
-    const centeredOriginY = (viewportHeight - trackHeight) / 2;
-    if (!this.snapshot.capabilities?.sectionIndex?.centeredInWindow) {
-      return { originY: centeredOriginY, trackHeight };
-    }
-    const view = this.document.defaultView;
-    if (!view) return { originY: centeredOriginY, trackHeight };
-    const visualViewport = view.visualViewport;
-    const windowCenterY = visualViewport
-      ? visualViewport.offsetTop + visualViewport.height / 2
-      : view.innerHeight / 2;
-    const railTop =
-      this.viewportFrame.getBoundingClientRect().top +
-      (Number.parseFloat(this.indexRail.style.top) || 0);
-    const minOriginY = SECTION_INDEX_EDGE_PADDING;
-    const maxOriginY = Math.max(
-      minOriginY,
-      viewportHeight - SECTION_INDEX_EDGE_PADDING - trackHeight
-    );
     return {
-      originY: Math.min(
-        maxOriginY,
-        Math.max(minOriginY, windowCenterY - railTop - trackHeight / 2)
-      ),
+      originY: (viewportHeight - trackHeight) / 2,
       trackHeight,
     };
   }
 
-  private renderSectionIndex(viewportHeight: number) {
+  private configureSectionIndexRail(
+    viewportHeight: number,
+    stickyInset: number,
+    windowCentered: boolean
+  ): number {
+    const view = this.document.defaultView;
+    const direction =
+      view?.getComputedStyle(this.viewportFrame).direction === 'rtl'
+        ? 'rtl'
+        : 'ltr';
+    this.indexRail.style.direction = direction;
+    if (!windowCentered) {
+      if (this.indexRail.parentElement !== this.viewportFrame) {
+        this.viewportFrame.appendChild(this.indexRail);
+      }
+      this.indexRail.style.removeProperty('position');
+      this.indexRail.style.removeProperty('left');
+      this.indexRail.style.removeProperty('right');
+      this.indexRail.style.removeProperty('height');
+      this.indexRail.style.removeProperty('z-index');
+      this.indexRail.style.insetInlineEnd = '0px';
+      this.indexRail.style.top = String(stickyInset) + 'px';
+      this.indexRail.style.bottom = '0px';
+      return viewportHeight;
+    }
+
+    if (!view) return viewportHeight;
+    const visualViewport = view.visualViewport;
+    const windowTop = visualViewport?.offsetTop ?? 0;
+    const windowHeight = visualViewport?.height ?? view.innerHeight;
+    const railHeight = Math.min(
+      windowHeight,
+      SECTION_INDEX_EDGE_PADDING * 2 +
+        SECTION_INDEX_LABEL_SPACING * this.sectionIndexEntries.length
+    );
+    const frame = this.viewportFrame.getBoundingClientRect();
+    if (this.indexRail.parentElement !== this.document.body) {
+      this.document.body.appendChild(this.indexRail);
+    }
+    this.indexRail.style.position = 'fixed';
+    this.indexRail.style.removeProperty('left');
+    this.indexRail.style.removeProperty('right');
+    this.indexRail.style.insetInlineEnd =
+      String(
+        Math.max(
+          0,
+          direction === 'rtl' ? frame.left : view.innerWidth - frame.right
+        )
+      ) + 'px';
+    this.indexRail.style.top =
+      String(windowTop + (windowHeight - railHeight) / 2) + 'px';
+    this.indexRail.style.bottom = 'auto';
+    this.indexRail.style.height = String(railHeight) + 'px';
+    this.indexRail.style.zIndex = String(SECTION_INDEX_WINDOW_Z_INDEX);
+    return railHeight;
+  }
+
+  private renderSectionIndex(viewportHeight: number, stickyInset: number) {
     this.indexRail.replaceChildren();
     if (!sectionIndexEnabled(this.snapshot)) {
       this.sectionIndexEntries = [];
+      this.configureSectionIndexRail(viewportHeight, stickyInset, false);
+      setData(this.viewportFrame, 'sectionIndexVisible', false);
       this.indexRail.hidden = true;
       return;
     }
@@ -4376,17 +4419,27 @@ export class NativeListWebEngine {
       this.sectionIndexEntries.length === 0 ||
       viewportHeight < SECTION_INDEX_MIN_HEIGHT
     ) {
+      this.configureSectionIndexRail(viewportHeight, stickyInset, false);
+      setData(this.viewportFrame, 'sectionIndexVisible', false);
       this.indexRail.hidden = true;
       return;
     }
+    const windowCentered =
+      this.snapshot.capabilities?.sectionIndex?.centeredInWindow === true &&
+      this.viewport.clientHeight > 0;
+    const indexLayoutHeight = this.configureSectionIndexRail(
+      viewportHeight,
+      stickyInset,
+      windowCentered
+    );
     const visibleEntryIndices =
-      this.sectionIndexVisibleEntryIndices(viewportHeight);
+      this.sectionIndexVisibleEntryIndices(indexLayoutHeight);
     setData(
       this.indexRail,
       'compact',
       visibleEntryIndices.length < this.sectionIndexEntries.length
     );
-    const metrics = this.sectionIndexMetrics(viewportHeight);
+    const metrics = this.sectionIndexMetrics(indexLayoutHeight);
     const visibleTrackHeight = Math.min(
       metrics.trackHeight,
       SECTION_INDEX_LABEL_SPACING * visibleEntryIndices.length
@@ -4418,6 +4471,7 @@ export class NativeListWebEngine {
     });
     this.indexRail.appendChild(fragment);
     this.indexRail.hidden = this.indexRail.childElementCount === 0;
+    setData(this.viewportFrame, 'sectionIndexVisible', !this.indexRail.hidden);
   }
 
   private updateVisibleSelection() {