@onekeyfe/react-native-native-list 6.7.0-alpha.426 → 6.7.0-alpha.430

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

@@ -31,6 +31,8 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
   private val titleLine = PackedTitleLineLayout(context)
   private val title = NativeListTextView(context)
   private val titleIcon = OneKeyIconView(context)
+  private val titleLeadingIcon = OneKeyIconView(context)
+  private val titleSegments = NativeListTitleSegmentsView(context)
   private var titleImage: NativeListImageSlot? = null
   private val subtitle = NativeListTextView(context)
   private val tertiary = NativeListTextView(context)
@@ -109,8 +111,13 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     mainColumn.gravity = Gravity.CENTER_VERTICAL
     titleLine.orientation = HORIZONTAL
     titleLine.gravity = Gravity.CENTER_VERTICAL
+    titleLine.addView(titleLeadingIcon, LayoutParams(dp(16), dp(16)).apply { marginEnd = dp(6) })
     titleLine.addView(title, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    titleLine.addView(titleSegments, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
     titleLine.addView(titleIcon, LayoutParams(dp(20), dp(20)).apply { marginStart = dp(4) })
+    titleLine.titleChild = title
+    titleLeadingIcon.visibility = GONE
+    titleSegments.visibility = GONE
     titleLine.addView(badgeLine)
     trailingColumn.onAction = { key, view, slot, target ->
       emitAction(key, view, "trailingAccessory", slot, target, trailingColumn.anchorInset(view))
@@ -223,6 +230,12 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     titleIcon.visibility = GONE
     titleIcon.contentDescription = null
     titleIcon.setOnClickListener(null)
+    titleLeadingIcon.visibility = GONE
+    titleLeadingIcon.contentDescription = null
+    titleSegments.visibility = GONE
+    titleSegments.clearRuns()
+    titleSegments.layoutParams = LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f)
+    titleLine.titleChild = title
     for (view in listOf(title, subtitle, tertiary, badgeLine)) {
       view.text = ""
       view.visibility = GONE
@@ -343,6 +356,46 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     }
     // Legacy: overhanging selector icons/checkboxes must not be clipped by row padding.
     if (trailingColumn.parent === this && trailingColumn.requestsUnclippedHost) clipToPadding = false
+    if (titleSegments.visibility == VISIBLE) bindTitleRuns(item, theme)
+  }
+
+  // Runs take the title's final text appearance and color unless they set
+  // their own tone or weight.
+  private fun bindTitleRuns(item: NativeListItem, theme: JSONObject?) {
+    titleSegments.typeface = title.typeface
+    titleSegments.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, title.textSize)
+    titleSegments.includeFontPadding = title.includeFontPadding
+    titleSegments.letterSpacing = title.letterSpacing
+    titleSegments.opticalOffsetY = title.opticalOffsetY
+    titleSegments.maxLines = 1
+    titleSegments.ellipsize = TextUtils.TruncateAt.END
+    TextViewCompat.setLineHeight(titleSegments, title.lineHeight)
+    val baseColor = title.currentTextColor
+    titleSegments.setTextColor(baseColor)
+    val segments = item.json.optJSONArray("titleSegments") ?: return
+    val runs =
+      (0 until segments.length()).mapNotNull { index ->
+        val segment = segments.optJSONObject(index) ?: return@mapNotNull null
+        NativeListTitleSegmentsView.Run(
+          text = segment.optString("text"),
+          typeface =
+            when (segment.optString("fontWeight")) {
+              "medium" -> fonts.medium(context)
+              "regular" -> fonts.regular(context)
+              else -> null
+            },
+          color =
+            when (segment.optString("tone")) {
+              "secondary" -> color(theme, "secondaryText", "#0000009B")
+              "primary" -> color(theme, "primaryText", "#000000DF")
+              else -> baseColor
+            },
+          shrink = segment.optBoolean("shrink", false),
+          maxWidthRatio =
+            if (segment.has("maxWidthRatio")) segment.optDouble("maxWidthRatio").toFloat() else null,
+        )
+      }
+    titleSegments.setRuns(runs, item.json.optString("title"))
   }
 
   private fun styleGap(column: LinearLayout, gap: Int) {
@@ -476,7 +529,8 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
         val imageWidth = titleImage?.view?.takeIf { it.visibility == VISIBLE }?.let {
           it.layoutParams.width + dp(4)
         } ?: 0
-        val icon = (if (titleIcon.visibility == VISIBLE) dp(24) else 0) + imageWidth
+        val icon = (if (titleIcon.visibility == VISIBLE) dp(24) else 0) + imageWidth +
+          (if (titleLeadingIcon.visibility == VISIBLE) dp(22) else 0)
         (inner * ratio).roundToInt()
           .minus(leading.width + leading.marginEnd + icon)
           .coerceAtLeast(0)
@@ -487,9 +541,10 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     super.onMeasure(widthMeasureSpec, heightMeasureSpec)
     if (titleSuffixLabels.isNotEmpty()) {
       val fixedWidth =
-        (1 until titleLine.childCount).sumOf { index ->
+        (0 until titleLine.childCount).sumOf { index ->
           val view = titleLine.getChildAt(index)
-          if (view.visibility == GONE || titleSuffixLabels.any { it === view }) 0
+          if (view.visibility == GONE || view === titleLine.titleChild ||
+            titleSuffixLabels.any { it === view }) 0
           else {
             val margins = view.layoutParams as MarginLayoutParams
             view.measuredWidth + margins.leftMargin + margins.rightMargin
@@ -753,6 +808,30 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     titleLine.packsChildrenAtStart = true
     title.ellipsize = TextUtils.TruncateAt.END
     showText(title, item.json.optString("title"), item.json.optInt("titleLines", 1))
+    // Runs replace the drawn title except where `title` itself is highlighted;
+    // their content is bound once the title style is final.
+    if ((item.json.optJSONArray("titleSegments")?.length() ?: 0) > 0 &&
+      (item.json.optJSONArray("titleMatch")?.length() ?: 0) == 0
+    ) {
+      title.visibility = GONE
+      titleSegments.visibility = VISIBLE
+      titleLine.titleChild = titleSegments
+    }
+    item.json.optJSONObject("titleLeadingIcon")?.let { icon ->
+      titleLeadingIcon.iconName = icon.optString("name")
+      titleLeadingIcon.glyphSizeDp = 16
+      titleLeadingIcon.useSourceScale = sourceScale
+      titleLeadingIcon.tintColor = safeColor(
+        icon.optString("tintColor").takeIf(String::isNotEmpty),
+        color(theme, "iconSubdued", "#00000072"),
+      )
+      titleLeadingIcon.contentDescription =
+        icon.optString("accessibilityLabel").takeIf(String::isNotEmpty)
+      titleLeadingIcon.importantForAccessibility =
+        if (titleLeadingIcon.contentDescription == null) View.IMPORTANT_FOR_ACCESSIBILITY_NO
+        else View.IMPORTANT_FOR_ACCESSIBILITY_YES
+      titleLeadingIcon.visibility = VISIBLE
+    }
     item.json.optJSONArray("titleSuffixes")?.let { suffixes ->
       for (index in 0 until suffixes.length()) {
         val suffix = suffixes.optJSONObject(index) ?: continue

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

@@ -109,6 +109,9 @@ internal class PackedTitleLineLayout(context: android.content.Context) : LinearL
   var packsChildrenAtStart = false
   // OneKey patch: optional cap for the Market subtitle's localized name.
   var leadingTextMaxWidth = Int.MAX_VALUE
+  // The text view that takes what the other children leave; the first child
+  // when unset, so a glyph may precede the title once this names it.
+  var titleChild: TextView? = null
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     if (!packsChildrenAtStart || childCount < 2) {
@@ -116,13 +119,13 @@ internal class PackedTitleLineLayout(context: android.content.Context) : LinearL
       return
     }
 
-    val title = getChildAt(0)
+    val title = titleChild?.takeIf { it.parent === this } ?: getChildAt(0)
     val widthMode = MeasureSpec.getMode(widthMeasureSpec)
     val widthSize = MeasureSpec.getSize(widthMeasureSpec)
     var accessoryWidth = 0
-    for (index in 1 until childCount) {
+    for (index in 0 until childCount) {
       val child = getChildAt(index)
-      if (child.visibility == GONE) continue
+      if (child === title || child.visibility == GONE) continue
       measureChildWithMargins(
         child,
         widthMeasureSpec,

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

@@ -0,0 +1,38 @@
+package com.margelo.nitro.nativelist
+
+/**
+ * Widths for identity title runs (docs/SPEC.md, "Identity title segments and
+ * leading title icon"). A run's base width is its natural width under its cap;
+ * the one shrinking run takes what the others leave; runs that do not shrink
+ * and still overflow are cut from the end of the line.
+ */
+internal fun nativeListTitleSegmentWidths(
+  natural: List<Float>,
+  shrink: List<Boolean>,
+  maxWidthRatio: List<Float?>,
+  available: Float,
+): List<Float> {
+  val line = available.coerceAtLeast(0f)
+  val widths =
+    natural.indices
+      .map { index ->
+        val width = natural[index].coerceAtLeast(0f)
+        val ratio = maxWidthRatio.getOrNull(index)
+        if (ratio == null) width else minOf(width, ratio * line)
+      }
+      .toMutableList()
+  val shrinking = shrink.indexOf(true)
+  if (shrinking in widths.indices) {
+    val others = widths.indices.filter { it != shrinking }.sumOf { widths[it].toDouble() }.toFloat()
+    widths[shrinking] = minOf(widths[shrinking], line - others).coerceAtLeast(0f)
+  }
+  var overflow = widths.sum() - line
+  var index = widths.lastIndex
+  while (overflow > 0f && index >= 0) {
+    val cut = minOf(widths[index], overflow)
+    widths[index] -= cut
+    overflow -= cut
+    index -= 1
+  }
+  return widths
+}

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

@@ -0,0 +1,105 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.Typeface
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import android.text.TextPaint
+import android.text.TextUtils
+import android.text.style.ForegroundColorSpan
+import android.text.style.MetricAffectingSpan
+
+/**
+ * Identity title runs on one line. The text is rebuilt for each measured width
+ * from the widths `nativeListTitleSegmentWidths` allocates, so a run gives up
+ * width without the others; accessibility reads the row's `title` instead.
+ */
+internal class NativeListTitleSegmentsView(context: android.content.Context) :
+  NativeListTextView(context) {
+  class Run(
+    val text: String,
+    // Null keeps the view's typeface, which follows the title's.
+    val typeface: Typeface?,
+    val color: Int,
+    val shrink: Boolean,
+    val maxWidthRatio: Float?,
+  )
+
+  private var runs: List<Run> = emptyList()
+  private var builtForWidth = -1
+
+  fun setRuns(runs: List<Run>, spokenText: String) {
+    this.runs = runs
+    builtForWidth = -1
+    contentDescription = spokenText.takeIf(String::isNotEmpty)
+    text = runs.joinToString("") { it.text }
+    requestLayout()
+  }
+
+  fun clearRuns() {
+    runs = emptyList()
+    builtForWidth = -1
+    contentDescription = null
+    text = ""
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    if (runs.isEmpty()) {
+      super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+      return
+    }
+    var outer =
+      if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.UNSPECIFIED) Int.MAX_VALUE
+      else MeasureSpec.getSize(widthMeasureSpec)
+    if (maxWidth in 0 until outer) outer = maxWidth
+    val available =
+      if (outer == Int.MAX_VALUE) outer
+      else (outer - compoundPaddingLeft - compoundPaddingRight).coerceAtLeast(0)
+    if (available != builtForWidth) {
+      builtForWidth = available
+      // The same width rebuilds the same text, so the relayout this asks for
+      // measures once more and stops.
+      setText(build(available), BufferType.SPANNABLE)
+    }
+    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    // The runs fill what the title line leaves, so a ratio is a share of it.
+    if (outer != Int.MAX_VALUE) setMeasuredDimension(outer, measuredHeight)
+  }
+
+  private fun build(available: Int): CharSequence {
+    val paints = runs.map { run -> TextPaint(paint).apply { run.typeface?.let { typeface = it } } }
+    val natural = runs.mapIndexed { index, run -> paints[index].measureText(run.text) }
+    val widths =
+      nativeListTitleSegmentWidths(
+        natural,
+        runs.map { it.shrink },
+        runs.map { it.maxWidthRatio },
+        if (available == Int.MAX_VALUE) Float.MAX_VALUE else available.toFloat(),
+      )
+    val built = SpannableStringBuilder()
+    runs.forEachIndexed { index, run ->
+      val width = widths[index]
+      if (width <= 0f) return@forEachIndexed
+      val shown =
+        if (width >= natural[index]) run.text
+        else TextUtils.ellipsize(run.text, paints[index], width, TextUtils.TruncateAt.END)
+      if (shown.isEmpty()) return@forEachIndexed
+      val start = built.length
+      built.append(shown)
+      built.setSpan(ForegroundColorSpan(run.color), start, built.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+      run.typeface?.let {
+        built.setSpan(TypefaceRunSpan(it), start, built.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+    }
+    return built
+  }
+}
+
+private class TypefaceRunSpan(private val typeface: Typeface) : MetricAffectingSpan() {
+  override fun updateMeasureState(paint: TextPaint) {
+    paint.typeface = typeface
+  }
+
+  override fun updateDrawState(paint: TextPaint) {
+    paint.typeface = typeface
+  }
+}

package/android/src/test/java/com/margelo/nitro/nativelist/NativeListTitleSegmentLayoutTest.kt

@@ -0,0 +1,65 @@
+package com.margelo.nitro.nativelist
+
+import org.junit.Assert.assertEquals
+import org.junit.Test
+
+class NativeListTitleSegmentLayoutTest {
+  // Wallet / Account as recipient rows send it: the wallet shrinks, the
+  // account is capped at 70% of the line.
+  private fun walletFirst(wallet: Float, account: Float, line: Float) =
+    nativeListTitleSegmentWidths(
+      listOf(wallet, 20f, account),
+      listOf(true, false, false),
+      listOf(null, null, 0.7f),
+      line,
+    )
+
+  private fun assertWidths(expected: List<Float>, actual: List<Float>) {
+    assertEquals(expected.size, actual.size)
+    expected.zip(actual).forEach { (want, got) -> assertEquals(want, got, 0.001f) }
+  }
+
+  @Test
+  fun keepsNaturalWidthsWhenTheyFit() = assertWidths(listOf(80f, 20f, 90f), walletFirst(80f, 90f, 300f))
+
+  @Test
+  fun theShrinkingRunGivesWayFirst() = assertWidths(listOf(130f, 20f, 100f), walletFirst(200f, 100f, 250f))
+
+  @Test
+  fun aCappedRunStopsAtItsShareOfTheLine() = assertWidths(listOf(70f, 20f, 210f), walletFirst(100f, 400f, 300f))
+
+  @Test
+  fun theAccountShrinksWhenTheWalletMustStayWhole() =
+    assertWidths(
+      listOf(210f, 20f, 70f),
+      nativeListTitleSegmentWidths(
+        listOf(300f, 20f, 150f),
+        listOf(false, false, true),
+        listOf(0.7f, null, null),
+        300f,
+      ),
+    )
+
+  @Test
+  fun runsThatDoNotShrinkAreCutFromTheEnd() {
+    assertWidths(
+      listOf(100f, 50f, 0f),
+      nativeListTitleSegmentWidths(
+        listOf(100f, 100f, 100f),
+        listOf(false, false, true),
+        listOf(null, null, null),
+        150f,
+      ),
+    )
+    assertWidths(
+      listOf(100f, 20f),
+      nativeListTitleSegmentWidths(listOf(100f, 100f), listOf(false, false), listOf(null, null), 120f),
+    )
+  }
+
+  @Test
+  fun aNonPositiveLineLeavesNothing() {
+    assertWidths(listOf(0f, 0f, 0f), walletFirst(80f, 90f, 0f))
+    assertWidths(listOf(0f, 0f, 0f), walletFirst(80f, 90f, -10f))
+  }
+}

package/docs/ROW_TEMPLATES.md

@@ -54,7 +54,14 @@ separately from source implementation in STYLE_SPEC §9.
 
 - **Use:** an identifiable asset, account, wallet, network or setting.
 - **Required data:** `leading`, `title`; optional `subtitle`, `tertiary`, `badges`,
-  `trailing`, `leadingAction`, `titleIcon`, Web-only `secondaryTitleIcon`, match ranges and structured subtitle segments.
+  `trailing`, `leadingAction`, `titleIcon`, Web-only `secondaryTitleIcon`, `titleSegments`,
+  `titleLeadingIcon`, match ranges and structured subtitle segments.
+- **Title runs:** optional `titleSegments` draw 1...4 runs with their own tone and
+  weight in place of `title`, on one line. One run may shrink; the others keep
+  their width under an optional `maxWidthRatio` cap. `title` stays the spoken
+  text. See SPEC.md.
+- **Leading title icon:** optional `titleLeadingIcon` draws a 16-point glyph 6
+  points before the title; it is decorative unless labelled.
 - **Static title icon:** optional 20-point icon immediately after the title with
   a 4-point gap. It has no click action; an optional Web `hoverActionKey`
   emits an icon-anchored tooltip request on hover or touch. A trailing `button` is the fixed small

package/docs/SPEC.md

@@ -188,6 +188,93 @@ and Web acceptance must cover narrow addresses, dynamic type/fonts, long press
 versus tap, keyboard interaction, and the horizontal warning border. Source or
 build success alone is not runtime evidence.
 
+### Identity title segments and leading title icon
+
+Status: implemented in source for iOS, Android and Web; device and Web runtime
+acceptance is pending. These fields travel in snapshot/patch JSON and do not
+change the Nitro ABI. They serve recipient rows whose title is a wallet and an
+account name in two styles, and address book rows marked by an icon before the
+name.
+
+`identity.titleSegments` is an optional list of 1...4 runs drawn on the title
+line in place of `title`:
+
+```ts
+titleSegments?: readonly {
+  text: string;
+  tone?: 'primary' | 'secondary';
+  fontWeight?: 'regular' | 'medium';
+  shrink?: boolean;
+  maxWidthRatio?: number; // (0, 1]
+}[];
+```
+
+- `title` stays required. It is the spoken label and the fallback text, so it
+  carries the same words as the runs; every renderer exposes `title`, not the
+  runs, to accessibility.
+- Each run uses the title's font family, size and line height, including
+  `style.title` and the configured fonts. `tone` picks the primary or secondary
+  text color and defaults to the title color; `fontWeight` picks the weight and
+  defaults to the title weight.
+- The runs share one line. `titleLines` and `style.title.lines` do not apply.
+- Layout. The runs take the whole width the title line leaves after the
+  leading title icon and the title accessories (title icon, title image,
+  suffixes, badges), so those accessories sit at the line's end rather than
+  right after the text. W is that width:
+  1. A run's base width is its natural width, capped at `maxWidthRatio x W`
+     when given. A run longer than its cap truncates at the cap with a tail
+     ellipsis.
+  2. At most one run sets `shrink: true`. Every other run keeps its base width.
+  3. The shrinking run gets `min(base, W - sum of the other runs)` and
+     truncates with a tail ellipsis; it may shrink to zero width.
+  4. When the runs that do not shrink exceed W on their own, the line is cut at
+     its end. Native renderers end the last visible run with an ellipsis; Web
+     clips it. This divergence is accepted: callers avoid the case with
+     `maxWidthRatio`.
+- Development validation rejects an empty or oversized list, blank or
+  oversized text (the 4096-code-unit text bound), unknown keys, tones or
+  weights, a ratio outside `(0, 1]`, more than one shrinking run, `titleMatch`
+  on the same row (its ranges index `title`), and
+  `presentation: 'walletSidebar'`. Production treats the runs as decoration:
+  an invalid list is dropped and the row shows `title`. Renderers draw `title`
+  instead of runs on a row that also has `titleMatch`, and ignore runs and the
+  leading icon with `presentation: 'walletSidebar'`.
+
+`identity.titleLeadingIcon` is an optional `{ name, tintColor?,
+accessibilityLabel? }`: a 16-point glyph before the title text or its runs,
+with a 6-point gap, vertically centered on the title line. It keeps its 16
+points: a long title, or its shrinking run, truncates first. The name comes from
+the same closed icon set as `titleIcon`; an unmapped name leaves an empty
+16-point slot. `tintColor` is a hex `#RRGGBB` or `#RRGGBBAA` color and defaults
+to the theme's `iconSubdued`. Without `accessibilityLabel` the glyph is hidden
+from accessibility. It has no action of its own. Development validation
+rejects unknown keys, a blank name, a malformed color and
+`presentation: 'walletSidebar'`; production drops an invalid icon.
+
+Both fields are identity patch fields. Omission in a full snapshot removes
+them; omission in a patch keeps the current value. Rebind and recycle remove the
+previous runs and glyph, so a row without them never shows another row's.
+
+| Platform | Title runs | Leading icon |
+| --- | --- | --- |
+| iOS | `NativeListTitleSegmentsLabel` draws the runs at the widths that `NativeListTitleSegmentLayout.swift` allocates for its bounds; it fills the title row in place of the row's filler. | `NativeListIconImageView`, first in the title row stack. A plain title beside it drops below required horizontal compression resistance, as beside `titleIcon`, so the title truncates before the glyph narrows. |
+| Android | `NativeListTitleSegmentsView`, a `TextView` whose text is rebuilt for each measured width from `NativeListTitleSegmentLayout.kt` and which measures to the width it is offered. `PackedTitleLineLayout.titleChild` names the flexible title view, so a view may precede it. | `OneKeyIconView`, first in the title line. |
+| Web | A flex line that fills the title line: the shrinking run is `flex: 0 1 auto; min-width: 0`, the others `flex: 0 0 auto` with a `max-width` percentage for a cap. | An icon element before the title text. |
+
+Conformance: `src/validation.ts` (`assertTitleSegments`,
+`assertTitleLeadingIcon`, production sanitizing) with `validation.test.ts`;
+`src/web/templates/IdentityRowRenderer.ts` with `IdentityTitleRunsWeb.test.ts`
+(run styles, flex behavior, accessibility, rebind);
+`ios/NativeListTitleSegmentLayout.swift` with the SwiftPM
+`NativeListTitleSegmentLayoutTests`; the iOS leading glyph beside a long plain
+title with the XCTest `NativeListIdentityTitleIconLayoutTests`;
+`NativeListTitleSegmentLayout.kt` with the
+JVM `NativeListTitleSegmentLayoutTest`. iOS, Android and Web runtime acceptance is pending: recipient rows
+with long wallet and account names in both truncation directions, narrow rows,
+dark mode, dynamic type and configured fonts, and recycling between rows with
+and without runs or a leading icon. Source and build success alone are not
+runtime evidence.
+
 ### DeFi position row controls
 
 Status: implemented in local source, unreleased. Focused validation and Web

package/ios/NativeListIdentityRenderer.swift

@@ -81,7 +81,8 @@ final class NativeListIdentityCell: NativeListRendererCell {
       let title = NativeListResolvedText(
         item.data.string("title"), style: style.dictionary("title"), size: 16,
         weight: .medium, color: .black, lineHeight: 24,
-        lines: item.data.int("titleLines", default: 1), fonts: fonts)
+        lines: item.data.dictionaries("titleSegments").isEmpty
+          ? item.data.int("titleLines", default: 1) : 1, fonts: fonts)
       let subtitle = NativeListResolvedText(
         item.data.string("subtitle"), style: style.dictionary("subtitle"), size: 14,
         color: .black, lineHeight: 20,
@@ -110,6 +111,12 @@ final class NativeListIdentityCell: NativeListRendererCell {
   private let titleRowStack = UIStackView()
   private let titleLabel = NativeListTextLabel()
   private let titleIconView = NativeListIconImageView()
+  private let titleLeadingIconView = NativeListIconImageView()
+  private let titleSegmentsLabel = NativeListTitleSegmentsLabel()
+  // Runs, when shown, take the title's place in the title row.
+  private var visibleTitleView: UIView {
+    titleSegmentsLabel.isHidden ? titleLabel : titleSegmentsLabel
+  }
   private var titleImageSlot: NativeListImageSlot?
   private var titleImageConstraints: [NSLayoutConstraint] = []
   // Absorbs the title row's slack so the title keeps its intrinsic width and the
@@ -170,7 +177,9 @@ final class NativeListIdentityCell: NativeListRendererCell {
     mainStack.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
     titleRowStack.axis = .horizontal
     titleRowStack.alignment = .center
+    titleRowStack.addArrangedSubview(titleLeadingIconView)
     titleRowStack.addArrangedSubview(titleLabel)
+    titleRowStack.addArrangedSubview(titleSegmentsLabel)
     titleRowStack.addArrangedSubview(titleIconView)
     titleRowStack.addArrangedSubview(badgeLabel)
     titleRowStack.addArrangedSubview(titleRowFiller)
@@ -185,6 +194,18 @@ final class NativeListIdentityCell: NativeListRendererCell {
     ])
     titleIconView.contentMode = .scaleAspectFit
     titleIconView.setContentHuggingPriority(.required, for: .horizontal)
+    titleLeadingIconView.translatesAutoresizingMaskIntoConstraints = false
+    let leadingIconWidth = titleLeadingIconView.widthAnchor.constraint(equalToConstant: 16)
+    leadingIconWidth.priority = UILayoutPriority(999)
+    NSLayoutConstraint.activate([
+      leadingIconWidth,
+      titleLeadingIconView.heightAnchor.constraint(equalToConstant: 16),
+    ])
+    titleLeadingIconView.contentMode = .scaleAspectFit
+    titleLeadingIconView.setContentHuggingPriority(.required, for: .horizontal)
+    titleLeadingIconView.setContentCompressionResistancePriority(.required, for: .horizontal)
+    titleLeadingIconView.isHidden = true
+    titleSegmentsLabel.isHidden = true
     [titleRowStack, subtitleLabel, tertiaryLabel].forEach(mainStack.addArrangedSubview)
     visual.translatesAutoresizingMaskIntoConstraints = false
     leadingWidth = visual.widthAnchor.constraint(equalToConstant: 40)
@@ -249,6 +270,15 @@ final class NativeListIdentityCell: NativeListRendererCell {
     titleIconView.isHidden = true
     titleIconView.accessibilityLabel = nil
     titleIconView.isAccessibilityElement = false
+    titleLeadingIconView.image = nil
+    titleLeadingIconView.isHidden = true
+    titleLeadingIconView.accessibilityLabel = nil
+    titleLeadingIconView.isAccessibilityElement = false
+    titleSegmentsLabel.isHidden = true
+    titleSegmentsLabel.reset()
+    titleRowFiller.isHidden = false
+    titleSegmentsLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
+    titleSegmentsLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
     titleImageSlot?.view.isHidden = true
     titleImageSlot?.view.accessibilityLabel = nil
     titleImageSlot?.view.isAccessibilityElement = false
@@ -310,7 +340,7 @@ final class NativeListIdentityCell: NativeListRendererCell {
       let label = titleIcon.string("accessibilityLabel")
       titleIconView.accessibilityLabel = label.isEmpty ? nil : label
       titleIconView.isAccessibilityElement = !label.isEmpty
-      titleRowStack.setCustomSpacing(4, after: titleLabel)
+      titleRowStack.setCustomSpacing(4, after: visibleTitleView)
       // A long title truncates ahead of the 20pt glyph (Android caps the title
       // at row width minus accessories, Web shrinks the title first); with the
       // title at `.required` the icon's 999 width constraint collapsed to 0.
@@ -342,7 +372,7 @@ final class NativeListIdentityCell: NativeListRendererCell {
       ]
       titleImageConstraints.forEach { $0.priority = UILayoutPriority(999) }
       NSLayoutConstraint.activate(titleImageConstraints)
-      titleRowStack.setCustomSpacing(4, after: titleIconView.isHidden ? titleLabel : titleIconView)
+      titleRowStack.setCustomSpacing(4, after: titleIconView.isHidden ? visibleTitleView : titleIconView)
       titleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
       slot.bind(image, key: "\(item.key):titleImage", placeholder: "#00000000")
     } else {
@@ -385,7 +415,7 @@ final class NativeListIdentityCell: NativeListRendererCell {
         titleRowStack.setCustomSpacing(
           CGFloat(style.double("titleBadgeGap")),
           after: titleImageSlot?.view.isHidden == false ? titleImageSlot!.view
-            : titleIconView.isHidden ? titleLabel : titleIconView)
+            : titleIconView.isHidden ? visibleTitleView : titleIconView)
       }
     }
     if style["trailingGap"] != nil { trailingStack.spacing = CGFloat(style.double("trailingGap")) }
@@ -399,6 +429,7 @@ final class NativeListIdentityCell: NativeListRendererCell {
         labels.forEach { NativeListTextStyles.applyStyledText($0, text, fonts: fonts) }
       }
     }
+    if !titleSegmentsLabel.isHidden { bindTitleRuns(item, theme: theme, style: style) }
     contentInsets = UIEdgeInsets(
       top: topInset, left: leftInset, bottom: -bottomInset, right: -rightInset)
     if root.axis == .horizontal {
@@ -464,6 +495,8 @@ final class NativeListIdentityCell: NativeListRendererCell {
   }
   override func recycleContent() {
     visual.recycle()
+    titleSegmentsLabel.reset()
+    titleLeadingIconView.image = nil
     titleImageSlot?.recycle()
     titleImageSlot?.view.isHidden = true
     titleImageSlot?.view.accessibilityLabel = nil
@@ -512,6 +545,30 @@ final class NativeListIdentityCell: NativeListRendererCell {
     visual.bind(
       descriptor, style: image, key: key, theme: currentTheme, isUnread: false, fonts: fonts)
   }
+  // Runs take the title's font, size and color unless they set their own tone
+  // or weight; the title label holds the final style by now.
+  private func bindTitleRuns(_ item: NativeListItem, theme: [String: Any]?, style: [String: Any]) {
+    let baseFont = titleLabel.font ?? nativeListFont(ofSize: 16, weight: .medium, fonts: fonts)
+    let baseColor = titleLabel.textColor ?? nativeListColor(theme, "primaryText", "#202020")
+    let runs = item.data.dictionaries("titleSegments").map { segment in
+      let weight = segment.string("fontWeight")
+      let tone = segment.string("tone")
+      return NativeListTitleSegmentsLabel.Run(
+        text: segment.string("text"),
+        font: weight.isEmpty
+          ? baseFont
+          : nativeListFont(
+            ofSize: baseFont.pointSize, weight: weight == "medium" ? .medium : .regular, fonts: fonts),
+        color: tone == "secondary"
+          ? nativeListColor(theme, "secondaryText", "#646464")
+          : tone == "primary" ? nativeListColor(theme, "primaryText", "#202020") : baseColor,
+        shrink: segment.bool("shrink"),
+        maxWidthRatio: (segment["maxWidthRatio"] as? NSNumber).map { CGFloat(truncating: $0) })
+    }
+    titleSegmentsLabel.lineHeight = CGFloat(
+      style.dictionary("title")?.double("lineHeight", default: 24) ?? 24)
+    titleSegmentsLabel.configure(runs, spokenText: item.data.string("title"))
+  }
   private func bindIdentity(
     _ item: NativeListItem,
     theme: [String: Any]?,
@@ -643,10 +700,36 @@ final class NativeListIdentityCell: NativeListRendererCell {
     }
     root.addArrangedSubview(mainStack)
     show(titleLabel, item.data.string("title"), lines: item.data.int("titleLines", default: 1))
+    // Runs replace the drawn title except where `title` itself is highlighted;
+    // their content is bound once the title style is final.
+    if !item.data.dictionaries("titleSegments").isEmpty,
+      item.data.dictionaries("titleMatch").isEmpty
+    {
+      titleLabel.isHidden = true
+      titleSegmentsLabel.isHidden = false
+      // The runs fill what the title row leaves, so a ratio is a share of it.
+      titleRowFiller.isHidden = true
+      titleSegmentsLabel.setContentHuggingPriority(UILayoutPriority(1), for: .horizontal)
+    }
+    if let icon = item.data.dictionary("titleLeadingIcon") {
+      titleLeadingIconView.bindIcon(icon.string("name"))
+      titleLeadingIconView.tintColor = UIColor(
+        nativeListHex: icon.string("tintColor",
+          default: theme?["iconSubdued"] as? String ?? "#8D8D8D"),
+        fallback: .gray)
+      titleLeadingIconView.isHidden = false
+      let label = icon.string("accessibilityLabel")
+      titleLeadingIconView.accessibilityLabel = label.isEmpty ? nil : label
+      titleLeadingIconView.isAccessibilityElement = !label.isEmpty
+      titleRowStack.setCustomSpacing(6, after: titleLeadingIconView)
+      // As beside `titleIcon`: a plain title left at `.required` collapses the
+      // glyph's 999 width constraint instead of truncating.
+      titleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+    }
     let titleSuffixes = item.data.dictionaries("titleSuffixes")
     if !titleSuffixes.isEmpty {
-      titleLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
-      let minimumTitleWidth = titleLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 80)
+      visibleTitleView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+      let minimumTitleWidth = visibleTitleView.widthAnchor.constraint(greaterThanOrEqualToConstant: 80)
       minimumTitleWidth.priority = UILayoutPriority(751)
       minimumTitleWidth.isActive = true
       selectorConstraints.append(minimumTitleWidth)