@onekeyfe/react-native-native-list 3.0.117 → 3.0.119

package/lib/module/web/NativeListWebEngine.js

@@ -628,11 +628,32 @@ function configureWebAvatar(image, source, uri) {
   });
   webAvatarCleanup.set(image, dispose);
 }
+const WEB_IMAGE_FADE_DELAY_MS = 100;
+const WEB_IMAGE_FADE_DURATION_MS = 140;
+function webImageNow(image) {
+  return image.ownerDocument.defaultView?.performance.now() ?? Date.now();
+}
+function revealWebImage(element, startedAt) {
+  element.getAnimations?.().forEach(animation => animation.cancel());
+  element.style.opacity = '1';
+  const view = element.ownerDocument.defaultView;
+  if (webImageNow(element) - startedAt < WEB_IMAGE_FADE_DELAY_MS || view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches || typeof element.animate !== 'function') return;
+  element.animate([{
+    opacity: 0
+  }, {
+    opacity: 1
+  }], {
+    duration: WEB_IMAGE_FADE_DURATION_MS,
+    easing: 'ease-out'
+  });
+}
 function createImage(context, source, className) {
   const avatarUri = canonicalNativeListAvatarUri(source.uri);
   const uri = avatarUri ?? safeImageUri(source.uri);
   if (!uri) return undefined;
   const image = context.document.createElement('img');
+  const startedAt = webImageNow(image);
+  image.style.opacity = '0';
   if (className) image.className = className;
   // OneKey patch: consume recoverable errors before the visual's final fallback listener.
   if (avatarUri) {
@@ -646,6 +667,13 @@ function createImage(context, source, className) {
   image.loading = 'lazy';
   image.decoding = 'async';
   image.style.objectFit = source.contentFit === 'fill' ? 'fill' : source.contentFit ?? 'cover';
+  image.addEventListener('load', () => {
+    if (image.dataset.nativeListSelectorPaint !== 'true') revealWebImage(image, startedAt);
+  });
+  image.addEventListener('error', () => {
+    image.style.opacity = '0';
+  });
+  image.dataset.nativeListImageStartedAt = String(startedAt);
   return image;
 }
 
@@ -655,14 +683,18 @@ function paintSelectorImageBackground(image, frame, inset = 0) {
   const paint = createElement(image.ownerDocument, 'span', 'ok-native-list-selector-image-background');
   paint.style.cssText = 'position:absolute;pointer-events:none;border-radius:inherit;background-position:center;background-repeat:no-repeat';
   paint.style.inset = String(inset) + 'px';
+  paint.style.opacity = '0';
   paint.style.backgroundSize = image.style.objectFit === 'fill' ? '100% 100%' : image.style.objectFit === 'center' ? 'auto' : image.style.objectFit;
+  image.dataset.nativeListSelectorPaint = 'true';
   image.style.opacity = '0';
   const update = () => {
     paint.style.backgroundImage = 'url(' + JSON.stringify(image.currentSrc || image.src) + ')';
+    revealWebImage(paint, Number(image.dataset.nativeListImageStartedAt) || webImageNow(image));
   };
   image.addEventListener('load', update);
   image.addEventListener('error', () => {
     paint.style.backgroundImage = 'none';
+    paint.style.opacity = '0';
   });
   frame.insertBefore(paint, image);
   if (image.complete && image.naturalWidth > 0) update();
@@ -949,14 +981,28 @@ function createVisual(context, visual, selectorPresentation) {
     frame.appendChild(fallback);
     return frame;
   }
-  if ('backgroundColor' in visual && visual.backgroundColor) frame.style.background = visual.backgroundColor;
+
+  // OneKey patch: NativeList images are usually local and should not flash a
+  // placeholder. Callers can opt in with image.loadingStrategy.
+  const visualBackground = 'backgroundColor' in visual && visual.backgroundColor ? visual.backgroundColor : 'transparent';
   const source = visual.kind === 'image' ? visual.image : visual.image;
+  const showsSourcePlaceholder = !!source && source.loadingStrategy !== undefined && source.loadingStrategy !== 'none';
+  frame.style.background = showsSourcePlaceholder ? 'var(--nl-strong)' : visualBackground;
+  const fallbackIcon = 'fallbackIcon' in visual ? visual.fallbackIcon : undefined;
+  const handlesSourceFallback = showsSourcePlaceholder && (fallbackIcon !== undefined || 'fallbackText' in visual);
   const image = source ? createImage(context, source) : undefined;
   if (image) {
     image.className = 'ok-native-list-visual-main';
     frame.appendChild(image);
+    if (showsSourcePlaceholder) {
+      const restoreBackground = () => {
+        frame.style.background = visualBackground;
+      };
+      image.addEventListener('load', restoreBackground);
+      if (image.complete && image.naturalWidth > 0) restoreBackground();
+    }
     if (selectorPresentation) paintSelectorImageBackground(image, frame);
-  } else {
+  } else if (!source || showsSourcePlaceholder) {
     frame.appendChild(createElement(context.document, 'span', 'ok-native-list-visual-fallback', 'fallbackText' in visual ? visual.fallbackText ?? '' : ''));
   }
   if (visual.kind === 'token' && visual.networkImage) {
@@ -970,17 +1016,19 @@ function createVisual(context, visual, selectorPresentation) {
     frame.appendChild(corner);
   }
   // OneKey patch: image failure uses the same source-derived fallback as v1.
-  if ('fallbackIcon' in visual && visual.fallbackIcon) {
-    const icon = visual.fallbackIcon;
+  const hasFallbackText = 'fallbackText' in visual;
+  if ((fallbackIcon || hasFallbackText) && (!source || handlesSourceFallback)) {
     const showFallback = () => {
       if (image) {
         disposeWebImageRetries(image);
         image.remove();
       }
       frame.querySelector('.ok-native-list-visual-fallback:not(.ok-native-list-visual-corner)')?.remove();
-      const fallback = createElement(context.document, 'span', 'ok-native-list-visual-fallback');
-      applySelectorIcon(fallback, icon.name);
-      if (icon.tintColor) fallback.style.color = icon.tintColor;
+      const fallback = createElement(context.document, 'span', 'ok-native-list-visual-fallback', fallbackIcon ? undefined : 'fallbackText' in visual ? visual.fallbackText ?? '' : '');
+      if (fallbackIcon) {
+        applySelectorIcon(fallback, fallbackIcon.name);
+        if (fallbackIcon.tintColor) fallback.style.color = fallbackIcon.tintColor;
+      }
       frame.prepend(fallback);
     };
     if (image) image.addEventListener('error', showFallback, {
@@ -1833,16 +1881,45 @@ function createMarketRow(context, row) {
     titleLine.appendChild(element);
   });
   main.appendChild(titleLine);
-  if (row.subtitle || row.subtitleSegments?.length) {
-    const subtitle = createElement(context.document, 'span', 'ok-native-list-market-subtitle', row.subtitle);
-    applyMarketTextStyle(subtitle, style?.subtitle, {
-      fontSize: 14,
-      lineHeight: 20,
-      weight: 400,
-      alignment: 'start'
-    });
-    applyValueSegments(subtitle, row.subtitleSegments, style?.subtitle?.fontSize ?? 14, style?.subtitle?.lineHeight ?? 20, marketFontWeight(style?.subtitle?.fontWeight, 400));
-    main.appendChild(subtitle);
+  if (row.subtitlePrefix || row.subtitle || row.subtitleSegments?.length) {
+    const subtitleLine = createElement(context.document, 'span', 'ok-native-list-market-subtitle-line');
+    subtitleLine.style.display = 'flex';
+    subtitleLine.style.alignItems = 'center';
+    subtitleLine.style.minWidth = '0';
+    subtitleLine.style.overflow = 'hidden';
+    subtitleLine.style.gap = String(row.subtitlePrefix ? row.subtitlePrefix.gap ?? 4 : 0) + 'px';
+    if (row.subtitlePrefix) {
+      const prefix = createElement(context.document, 'span', 'ok-native-list-market-subtitle-prefix', row.subtitlePrefix.text);
+      applyMarketTextStyle(prefix, row.subtitlePrefix.style, {
+        fontSize: 12,
+        lineHeight: 16,
+        weight: 400,
+        alignment: 'start'
+      });
+      prefix.style.display = 'block';
+      prefix.style.flex = '1 1 auto';
+      prefix.style.minWidth = '0';
+      prefix.style.overflow = 'hidden';
+      prefix.style.textOverflow = 'ellipsis';
+      prefix.style.color = row.subtitlePrefix.style?.color ?? 'var(--nl-secondary)';
+      if (row.subtitlePrefix.maxWidth !== undefined) {
+        prefix.style.maxWidth = String(row.subtitlePrefix.maxWidth) + 'px';
+      }
+      subtitleLine.appendChild(prefix);
+    }
+    if (row.subtitle || row.subtitleSegments?.length) {
+      const subtitle = createElement(context.document, 'span', 'ok-native-list-market-subtitle', row.subtitle);
+      applyMarketTextStyle(subtitle, style?.subtitle, {
+        fontSize: 14,
+        lineHeight: 20,
+        weight: 400,
+        alignment: 'start'
+      });
+      applyValueSegments(subtitle, row.subtitleSegments, style?.subtitle?.fontSize ?? 14, style?.subtitle?.lineHeight ?? 20, marketFontWeight(style?.subtitle?.fontWeight, 400));
+      subtitle.style.flex = row.subtitlePrefix ? '0 0 auto' : '1 1 auto';
+      subtitleLine.appendChild(subtitle);
+    }
+    main.appendChild(subtitleLine);
   }
   body.appendChild(main);
   const trailing = createElement(context.document, 'span', 'ok-native-list-market-trailing');
@@ -2493,8 +2570,25 @@ 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: (viewportHeight - trackHeight) / 2,
+      originY: Math.min(maxOriginY, Math.max(minOriginY, windowCenterY - railTop - trackHeight / 2)),
       trackHeight
     };
   }

package/lib/typescript/src/NativeList.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { ImageSource } from './models';
 import type { NativeListProps } from './NativeList.types';
 export type { NativeListProps, NativeListRef } from './NativeList.types';
 export type { ActionAnchorState, ScrollAlignment, ScrollPositionOptions, ScrollToEndParams, ScrollToIndexFailedInfo, ScrollToIndexParams, ScrollToItemParams, ScrollToKeyParams, ScrollToLocationParams, ScrollToOffsetParams, } from './NativeList.types';
+export declare function preloadNativeListAvatarImages(sources: readonly ImageSource[]): Promise<boolean>;
 export declare const NativeList: React.ForwardRefExoticComponent<NativeListProps & React.RefAttributes<Readonly<{
     applySnapshot(snapshot: import("./models").NativeListSnapshot): void;
     applyPatches(patches: readonly import("./models").RowPatch[]): void;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { NativeListProps } from './NativeList.types';
-import type { NativeListSnapshot, RowPatch } from './models';
+import type { ImageSource, NativeListSnapshot, RowPatch } from './models';
 export type { NativeListProps, NativeListRef } from './NativeList.types';
 export type { ActionAnchorState, ScrollAlignment, ScrollPositionOptions, ScrollToEndParams, ScrollToIndexFailedInfo, ScrollToIndexParams, ScrollToItemParams, ScrollToKeyParams, ScrollToLocationParams, ScrollToOffsetParams, } from './NativeList.types';
+export declare function preloadNativeListAvatarImages(sources: readonly ImageSource[]): Promise<boolean>;
 export declare const NativeList: React.ForwardRefExoticComponent<NativeListProps & React.RefAttributes<Readonly<{
     applySnapshot(snapshot: NativeListSnapshot): void;
     applyPatches(patches: readonly RowPatch[]): void;

package/lib/typescript/src/index.d.ts

@@ -1,4 +1,4 @@
-export { NativeList } from './NativeList';
+export { NativeList, preloadNativeListAvatarImages } from './NativeList';
 export type { ActionAnchorState, NativeListProps, NativeListRef, ScrollAlignment, ScrollPositionOptions, ScrollToEndParams, ScrollToIndexFailedInfo, ScrollToIndexParams, ScrollToItemParams, ScrollToKeyParams, ScrollToLocationParams, ScrollToOffsetParams, } from './NativeList';
 export type * from './models';
 export { applyRowPatches, serializePatches, serializeSnapshot, validatePatches, validateSnapshot, } from './validation';

package/lib/typescript/src/models.d.ts

@@ -19,6 +19,7 @@ export type ImageSource = Readonly<{
     autoplay?: boolean;
     optimizeTos?: boolean;
     overscan?: number;
+    /** Defaults to `none` in NativeList; use `static` or `skeleton` to opt into loading UI. */
     loadingStrategy?: ImageLoadingStrategy;
     fallbackUri?: string;
     retryTimes?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.117",
+  "version": "3.0.119",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -83,8 +83,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.117",
-    "@onekeyfe/react-native-native-logger": "3.0.117",
+    "@onekeyfe/react-native-image": "3.0.119",
+    "@onekeyfe/react-native-native-logger": "3.0.119",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/NativeList.tsx

@@ -20,6 +20,7 @@ import type {
 } from './NativeList.nitro';
 import type {
   ActionAnchorInvalidatedEvent,
+  ImageSource,
   RowActionEvent,
   SelectionDeltaEvent,
   ReorderEvent,
@@ -64,6 +65,27 @@ const NativeListHost = getHostComponent<
   NativeListMethods
 >('NativeList', () => NativeListConfig);
 
+export function preloadNativeListAvatarImages(
+  sources: readonly ImageSource[]
+): Promise<boolean> {
+  return OneKeyImageCache.preload(
+    sources.map((source) => ({
+      uri: source.uri,
+      headers: source.headers,
+      resizeWidth: source.width,
+      resizeHeight: source.height,
+      optimizeTos: source.optimizeTos !== false,
+      overscan: source.overscan,
+      cachePolicy:
+        source.cachePolicy === 'memory'
+          ? OneKeyImageCachePolicy.MEMORY
+          : source.cachePolicy === 'disk'
+          ? OneKeyImageCachePolicy.DISK
+          : OneKeyImageCachePolicy.MEMORY_DISK,
+    }))
+  );
+}
+
 function parsePayload<T>(payloadJson: string): T {
   return JSON.parse(payloadJson) as T;
 }
@@ -151,21 +173,7 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
     useEffect(() => {
       avatarLifecycle.current = 'mounted';
       const queue = new NativeAvatarPrefetchQueue((source) =>
-        OneKeyImageCache.preload([
-          {
-            uri: source.uri,
-            headers: source.headers,
-            resizeWidth: source.width,
-            resizeHeight: source.height,
-            optimizeTos: false,
-            cachePolicy:
-              source.cachePolicy === 'memory'
-                ? OneKeyImageCachePolicy.MEMORY
-                : source.cachePolicy === 'disk'
-                ? OneKeyImageCachePolicy.DISK
-                : OneKeyImageCachePolicy.MEMORY_DISK,
-          },
-        ])
+        preloadNativeListAvatarImages([source])
       );
       avatarQueueRef.current = queue;
       updateAvatarPrefetchRef.current();

package/src/NativeList.web.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { View } from 'react-native';
 import type { NativeListProps, NativeListRef } from './NativeList.types';
-import type { NativeListSnapshot, RowPatch } from './models';
+import type { ImageSource, NativeListSnapshot, RowPatch } from './models';
 import {
   normalizeIndexScroll,
   normalizeKeyScroll,
@@ -24,6 +24,10 @@ import {
   NativeListWebEngine,
   type NativeListWebCallbacks,
 } from './web/NativeListWebEngine';
+import {
+  acquireNativeListAvatar,
+  canonicalNativeListAvatarUri,
+} from './web/NativeListWebAvatarCache';
 
 export type { NativeListProps, NativeListRef } from './NativeList.types';
 export type {
@@ -39,6 +43,39 @@ export type {
   ScrollToOffsetParams,
 } from './NativeList.types';
 
+export function preloadNativeListAvatarImages(
+  sources: readonly ImageSource[]
+): Promise<boolean> {
+  if (typeof document === 'undefined') return Promise.resolve(false);
+  const uris = [
+    ...new Set(
+      sources
+        .map((source) => canonicalNativeListAvatarUri(source.uri))
+        .filter((uri): uri is string => uri !== undefined)
+    ),
+  ];
+  if (!uris.length) return Promise.resolve(false);
+  return Promise.all(
+    uris.map(
+      (uri) =>
+        new Promise<boolean>((resolve) => {
+          let release: (() => void) | undefined;
+          const settle = (success: boolean) => {
+            resolve(success);
+            queueMicrotask(() => release?.());
+          };
+          release = acquireNativeListAvatar(
+            document,
+            uri,
+            () => settle(true),
+            () => settle(false),
+            0
+          );
+        })
+    )
+  ).then((results) => results.every(Boolean));
+}
+
 export const NativeList = forwardRef<NativeListRef, NativeListProps>(
   function NativeList(
     {

package/src/index.ts

@@ -1,4 +1,4 @@
-export { NativeList } from './NativeList';
+export { NativeList, preloadNativeListAvatarImages } from './NativeList';
 export type {
   ActionAnchorState,
   NativeListProps,

package/src/models.ts

@@ -21,6 +21,7 @@ export type ImageSource = Readonly<{
   autoplay?: boolean;
   optimizeTos?: boolean;
   overscan?: number;
+  /** Defaults to `none` in NativeList; use `static` or `skeleton` to opt into loading UI. */
   loadingStrategy?: ImageLoadingStrategy;
   // OneKey patch: fallbackUri is Web-only; retryTimes opts all platforms into terminal retries.
   fallbackUri?: string;

package/src/web/NativeListWebEngine.ts

@@ -1087,6 +1087,30 @@ function configureWebAvatar(
   webAvatarCleanup.set(image, dispose);
 }
 
+const WEB_IMAGE_FADE_DELAY_MS = 100;
+const WEB_IMAGE_FADE_DURATION_MS = 140;
+
+function webImageNow(image: HTMLImageElement): number {
+  return image.ownerDocument.defaultView?.performance.now() ?? Date.now();
+}
+
+function revealWebImage(element: HTMLElement, startedAt: number) {
+  element.getAnimations?.().forEach((animation) => animation.cancel());
+  element.style.opacity = '1';
+  const view = element.ownerDocument.defaultView;
+  if (
+    webImageNow(element as HTMLImageElement) - startedAt <
+      WEB_IMAGE_FADE_DELAY_MS ||
+    view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ||
+    typeof element.animate !== 'function'
+  )
+    return;
+  element.animate([{ opacity: 0 }, { opacity: 1 }], {
+    duration: WEB_IMAGE_FADE_DURATION_MS,
+    easing: 'ease-out',
+  });
+}
+
 function createImage(
   context: RenderContext,
   source: ImageSource,
@@ -1096,6 +1120,8 @@ function createImage(
   const uri = avatarUri ?? safeImageUri(source.uri);
   if (!uri) return undefined;
   const image = context.document.createElement('img');
+  const startedAt = webImageNow(image);
+  image.style.opacity = '0';
   if (className) image.className = className;
   // OneKey patch: consume recoverable errors before the visual's final fallback listener.
   if (avatarUri) {
@@ -1110,6 +1136,14 @@ function createImage(
   image.decoding = 'async';
   image.style.objectFit =
     source.contentFit === 'fill' ? 'fill' : source.contentFit ?? 'cover';
+  image.addEventListener('load', () => {
+    if (image.dataset.nativeListSelectorPaint !== 'true')
+      revealWebImage(image, startedAt);
+  });
+  image.addEventListener('error', () => {
+    image.style.opacity = '0';
+  });
+  image.dataset.nativeListImageStartedAt = String(startedAt);
   return image;
 }
 
@@ -1128,20 +1162,27 @@ function paintSelectorImageBackground(
   paint.style.cssText =
     'position:absolute;pointer-events:none;border-radius:inherit;background-position:center;background-repeat:no-repeat';
   paint.style.inset = String(inset) + 'px';
+  paint.style.opacity = '0';
   paint.style.backgroundSize =
     image.style.objectFit === 'fill'
       ? '100% 100%'
       : image.style.objectFit === 'center'
       ? 'auto'
       : image.style.objectFit;
+  image.dataset.nativeListSelectorPaint = 'true';
   image.style.opacity = '0';
   const update = () => {
     paint.style.backgroundImage =
       'url(' + JSON.stringify(image.currentSrc || image.src) + ')';
+    revealWebImage(
+      paint,
+      Number(image.dataset.nativeListImageStartedAt) || webImageNow(image)
+    );
   };
   image.addEventListener('load', update);
   image.addEventListener('error', () => {
     paint.style.backgroundImage = 'none';
+    paint.style.opacity = '0';
   });
   frame.insertBefore(paint, image);
   if (image.complete && image.naturalWidth > 0) update();
@@ -1516,15 +1557,38 @@ function createVisual(
     return frame;
   }
 
-  if ('backgroundColor' in visual && visual.backgroundColor)
-    frame.style.background = visual.backgroundColor;
+  // OneKey patch: NativeList images are usually local and should not flash a
+  // placeholder. Callers can opt in with image.loadingStrategy.
+  const visualBackground =
+    'backgroundColor' in visual && visual.backgroundColor
+      ? visual.backgroundColor
+      : 'transparent';
   const source = visual.kind === 'image' ? visual.image : visual.image;
+  const showsSourcePlaceholder =
+    !!source &&
+    source.loadingStrategy !== undefined &&
+    source.loadingStrategy !== 'none';
+  frame.style.background = showsSourcePlaceholder
+    ? 'var(--nl-strong)'
+    : visualBackground;
+  const fallbackIcon =
+    'fallbackIcon' in visual ? visual.fallbackIcon : undefined;
+  const handlesSourceFallback =
+    showsSourcePlaceholder &&
+    (fallbackIcon !== undefined || 'fallbackText' in visual);
   const image = source ? createImage(context, source) : undefined;
   if (image) {
     image.className = 'ok-native-list-visual-main';
     frame.appendChild(image);
+    if (showsSourcePlaceholder) {
+      const restoreBackground = () => {
+        frame.style.background = visualBackground;
+      };
+      image.addEventListener('load', restoreBackground);
+      if (image.complete && image.naturalWidth > 0) restoreBackground();
+    }
     if (selectorPresentation) paintSelectorImageBackground(image, frame);
-  } else {
+  } else if (!source || showsSourcePlaceholder) {
     frame.appendChild(
       createElement(
         context.document,
@@ -1556,8 +1620,8 @@ function createVisual(
     frame.appendChild(corner);
   }
   // OneKey patch: image failure uses the same source-derived fallback as v1.
-  if ('fallbackIcon' in visual && visual.fallbackIcon) {
-    const icon = visual.fallbackIcon;
+  const hasFallbackText = 'fallbackText' in visual;
+  if ((fallbackIcon || hasFallbackText) && (!source || handlesSourceFallback)) {
     const showFallback = () => {
       if (image) {
         disposeWebImageRetries(image);
@@ -1571,10 +1635,18 @@ function createVisual(
       const fallback = createElement(
         context.document,
         'span',
-        'ok-native-list-visual-fallback'
+        'ok-native-list-visual-fallback',
+        fallbackIcon
+          ? undefined
+          : 'fallbackText' in visual
+          ? visual.fallbackText ?? ''
+          : ''
       );
-      applySelectorIcon(fallback, icon.name);
-      if (icon.tintColor) fallback.style.color = icon.tintColor;
+      if (fallbackIcon) {
+        applySelectorIcon(fallback, fallbackIcon.name);
+        if (fallbackIcon.tintColor)
+          fallback.style.color = fallbackIcon.tintColor;
+      }
       frame.prepend(fallback);
     };
     if (image) image.addEventListener('error', showFallback, { once: true });
@@ -3254,27 +3326,67 @@ function createMarketRow(context: RenderContext, row: MarketRow): HTMLElement {
     titleLine.appendChild(element);
   });
   main.appendChild(titleLine);
-  if (row.subtitle || row.subtitleSegments?.length) {
-    const subtitle = createElement(
+  if (row.subtitlePrefix || row.subtitle || row.subtitleSegments?.length) {
+    const subtitleLine = createElement(
       context.document,
       'span',
-      'ok-native-list-market-subtitle',
-      row.subtitle
-    );
-    applyMarketTextStyle(subtitle, style?.subtitle, {
-      fontSize: 14,
-      lineHeight: 20,
-      weight: 400,
-      alignment: 'start',
-    });
-    applyValueSegments(
-      subtitle,
-      row.subtitleSegments,
-      style?.subtitle?.fontSize ?? 14,
-      style?.subtitle?.lineHeight ?? 20,
-      marketFontWeight(style?.subtitle?.fontWeight, 400)
-    );
-    main.appendChild(subtitle);
+      'ok-native-list-market-subtitle-line'
+    );
+    subtitleLine.style.display = 'flex';
+    subtitleLine.style.alignItems = 'center';
+    subtitleLine.style.minWidth = '0';
+    subtitleLine.style.overflow = 'hidden';
+    subtitleLine.style.gap =
+      String(row.subtitlePrefix ? row.subtitlePrefix.gap ?? 4 : 0) + 'px';
+    if (row.subtitlePrefix) {
+      const prefix = createElement(
+        context.document,
+        'span',
+        'ok-native-list-market-subtitle-prefix',
+        row.subtitlePrefix.text
+      );
+      applyMarketTextStyle(prefix, row.subtitlePrefix.style, {
+        fontSize: 12,
+        lineHeight: 16,
+        weight: 400,
+        alignment: 'start',
+      });
+      prefix.style.display = 'block';
+      prefix.style.flex = '1 1 auto';
+      prefix.style.minWidth = '0';
+      prefix.style.overflow = 'hidden';
+      prefix.style.textOverflow = 'ellipsis';
+      prefix.style.color =
+        row.subtitlePrefix.style?.color ?? 'var(--nl-secondary)';
+      if (row.subtitlePrefix.maxWidth !== undefined) {
+        prefix.style.maxWidth = String(row.subtitlePrefix.maxWidth) + 'px';
+      }
+      subtitleLine.appendChild(prefix);
+    }
+    if (row.subtitle || row.subtitleSegments?.length) {
+      const subtitle = createElement(
+        context.document,
+        'span',
+        'ok-native-list-market-subtitle',
+        row.subtitle
+      );
+      applyMarketTextStyle(subtitle, style?.subtitle, {
+        fontSize: 14,
+        lineHeight: 20,
+        weight: 400,
+        alignment: 'start',
+      });
+      applyValueSegments(
+        subtitle,
+        row.subtitleSegments,
+        style?.subtitle?.fontSize ?? 14,
+        style?.subtitle?.lineHeight ?? 20,
+        marketFontWeight(style?.subtitle?.fontWeight, 400)
+      );
+      subtitle.style.flex = row.subtitlePrefix ? '0 0 auto' : '1 1 auto';
+      subtitleLine.appendChild(subtitle);
+    }
+    main.appendChild(subtitleLine);
   }
   body.appendChild(main);
   const trailing = createElement(
@@ -4221,8 +4333,29 @@ 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: (viewportHeight - trackHeight) / 2,
+      originY: Math.min(
+        maxOriginY,
+        Math.max(minOriginY, windowCenterY - railTop - trackHeight / 2)
+      ),
       trackHeight,
     };
   }