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

package/ios/NativeListTitleSegmentLayout.swift

@@ -0,0 +1,32 @@
+import Foundation
+
+/// 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.
+func nativeListTitleSegmentWidths(
+  natural: [CGFloat],
+  shrink: [Bool],
+  maxWidthRatio: [CGFloat?],
+  available: CGFloat
+) -> [CGFloat] {
+  let line = max(0, available)
+  var widths = natural.indices.map { index -> CGFloat in
+    let width = max(0, natural[index])
+    guard index < maxWidthRatio.count, let ratio = maxWidthRatio[index] else { return width }
+    return min(width, ratio * line)
+  }
+  if let shrinking = shrink.firstIndex(of: true), shrinking < widths.count {
+    let others = widths.indices.reduce(CGFloat(0)) { $1 == shrinking ? $0 : $0 + widths[$1] }
+    widths[shrinking] = max(0, min(widths[shrinking], line - others))
+  }
+  var overflow = widths.reduce(0, +) - line
+  var index = widths.count - 1
+  while overflow > 0, index >= 0 {
+    let cut = min(widths[index], overflow)
+    widths[index] -= cut
+    overflow -= cut
+    index -= 1
+  }
+  return widths
+}

package/ios/NativeListTitleSegmentsLabel.swift

@@ -0,0 +1,80 @@
+import UIKit
+
+/// Draws identity title runs on one line, each at the width that
+/// `nativeListTitleSegmentWidths` allocates for the current bounds. Its
+/// intrinsic width is the runs' natural width, so the title row stack can
+/// give it less, and accessibility reads the row's `title` instead of runs.
+final class NativeListTitleSegmentsLabel: UIView {
+  struct Run {
+    let text: String
+    let font: UIFont
+    let color: UIColor
+    let shrink: Bool
+    let maxWidthRatio: CGFloat?
+  }
+
+  private var runs: [Run] = []
+  private var naturalWidths: [CGFloat] = []
+  var lineHeight: CGFloat = 24 {
+    didSet {
+      invalidateIntrinsicContentSize()
+      setNeedsDisplay()
+    }
+  }
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    isOpaque = false
+    backgroundColor = .clear
+    contentMode = .redraw
+    isAccessibilityElement = true
+    accessibilityTraits = .staticText
+  }
+
+  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+  func configure(_ runs: [Run], spokenText: String) {
+    self.runs = runs
+    naturalWidths = runs.map {
+      ceil(($0.text as NSString).size(withAttributes: [.font: $0.font]).width)
+    }
+    accessibilityLabel = spokenText.isEmpty ? nil : spokenText
+    invalidateIntrinsicContentSize()
+    setNeedsDisplay()
+  }
+
+  func reset() {
+    configure([], spokenText: "")
+  }
+
+  override var intrinsicContentSize: CGSize {
+    CGSize(width: naturalWidths.reduce(0, +), height: lineHeight)
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    setNeedsDisplay()
+  }
+
+  override func draw(_ rect: CGRect) {
+    guard !runs.isEmpty else { return }
+    let widths = nativeListTitleSegmentWidths(
+      natural: naturalWidths, shrink: runs.map(\.shrink),
+      maxWidthRatio: runs.map(\.maxWidthRatio), available: bounds.width)
+    let isRightToLeft = effectiveUserInterfaceLayoutDirection == .rightToLeft
+    var x: CGFloat = isRightToLeft ? bounds.width : 0
+    for (run, width) in zip(runs, widths) where width > 0 {
+      let paragraph = NSMutableParagraphStyle()
+      paragraph.lineBreakMode = .byTruncatingTail
+      let text = NSAttributedString(
+        string: run.text,
+        attributes: [.font: run.font, .foregroundColor: run.color, .paragraphStyle: paragraph])
+      let height = ceil(run.font.lineHeight)
+      let originX = isRightToLeft ? x - width : x
+      text.draw(
+        with: CGRect(x: originX, y: (bounds.height - height) / 2, width: width, height: height),
+        options: [.usesLineFragmentOrigin, .truncatesLastVisibleLine], context: nil)
+      x += isRightToLeft ? -width : width
+    }
+  }
+}

package/ios/tests/NativeListIdentityTitleIconLayoutTests.swift

@@ -78,4 +78,36 @@ final class NativeListIdentityTitleIconLayoutTests: XCTestCase {
     XCTAssertGreaterThan(badgeFrame.minX, iconFrame.maxX)
     XCTAssertLessThanOrEqual(badgeFrame.maxX, cell.bounds.width)
   }
+
+  // An address book row: a plain title after the 16pt `titleLeadingIcon`. A
+  // long name truncates after the glyph instead of squeezing it to nothing.
+  func testLongPlainTitleTruncatesAfterTheLeadingIcon() throws {
+    let cell = NativeListIdentityCell(frame: CGRect(x: 0, y: 0, width: 320, height: 60))
+    let window = UIWindow(frame: CGRect(x: 0, y: 0, width: 320, height: 200))
+    window.addSubview(cell)
+    let leadingIcon = try child(cell, "titleLeadingIconView", as: UIImageView.self)
+    let titleLabel = try child(cell, "titleLabel", as: UILabel.self)
+    let item = try NativeListItem(data: [
+      "key": "book", "type": "identity",
+      "title": "A very long address book name that cannot possibly fit on one line",
+      "height": 60,
+      "leading": ["kind": "token", "fallbackIcon": ["name": "CryptoCoinOutline"]],
+      "titleLeadingIcon": ["name": "BookOpenOutline"],
+      "subtitle": "0x1234...abcd",
+    ])
+    cell.bind(item: item, theme: nil, layout: "linear", selected: false,
+      checkboxState: { _, _, fallback in fallback }, fonts: NativeListFontFamilies())
+    cell.layoutIfNeeded()
+
+    let iconFrame = leadingIcon.convert(leadingIcon.bounds, to: cell)
+    let labelFrame = titleLabel.convert(titleLabel.bounds, to: cell)
+    XCTAssertFalse(leadingIcon.isHidden)
+    XCTAssertEqual(leadingIcon.bounds.width, 16, accuracy: 0.5,
+      "the leading glyph keeps its 16pt width")
+    XCTAssertEqual(labelFrame.minX, iconFrame.maxX + 6, accuracy: 1,
+      "the title follows the glyph with the 6pt gap")
+    XCTAssertLessThan(titleLabel.bounds.width, titleLabel.intrinsicContentSize.width,
+      "the title truncates instead of the glyph")
+    XCTAssertLessThanOrEqual(labelFrame.maxX, cell.bounds.width)
+  }
 }

package/lib/module/models.js

@@ -39,6 +39,8 @@ export const ROW_BOX_STYLE_KEYS_BY_TYPE = {
 
 // OneKey patch: preserve compact very-small-balance digit runs.
 
+/** One run of an identity title line; see docs/SPEC.md. */
+
 /** Native Market quote row. All values are already localized/formatted strings. */
 
 /** Compact KPI card for dashboards and grids. */

package/lib/module/validation.js

@@ -702,6 +702,66 @@ function assertButtonGroup(row, path) {
     }
   });
 }
+const MAX_TITLE_SEGMENTS = 4;
+const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
+function assertTitleSegments(value, path) {
+  if (!Array.isArray(value) || value.length === 0 || value.length > MAX_TITLE_SEGMENTS) fail(path, `must hold 1...${MAX_TITLE_SEGMENTS} segments`);
+  let shrinking = 0;
+  value.forEach((item, index) => {
+    const segmentPath = `${path}[${index}]`;
+    const segment = protocolObject(item, segmentPath);
+    assertUnknownKeys(segment, ['text', 'tone', 'fontWeight', 'shrink', 'maxWidthRatio'], segmentPath, 'title segment key');
+    const {
+      text,
+      tone,
+      fontWeight,
+      shrink,
+      maxWidthRatio
+    } = segment;
+    if (typeof text !== 'string' || !text.trim()) fail(`${segmentPath}.text`, 'must be non-blank');
+    assertText(text, `${segmentPath}.text`);
+    if (tone !== undefined && tone !== 'primary' && tone !== 'secondary') fail(`${segmentPath}.tone`, 'must be primary or secondary');
+    if (fontWeight !== undefined && fontWeight !== 'regular' && fontWeight !== 'medium') fail(`${segmentPath}.fontWeight`, 'must be regular or medium');
+    if (shrink !== undefined && typeof shrink !== 'boolean') fail(`${segmentPath}.shrink`, 'must be a boolean');
+    if (shrink) shrinking += 1;
+    if (maxWidthRatio !== undefined && (typeof maxWidthRatio !== 'number' || !Number.isFinite(maxWidthRatio) || maxWidthRatio <= 0 || maxWidthRatio > 1)) fail(`${segmentPath}.maxWidthRatio`, 'must be finite within (0, 1]');
+  });
+  if (shrinking > 1) fail(path, 'allows at most one shrinking segment');
+}
+function assertTitleLeadingIcon(value, path) {
+  const icon = protocolObject(value, path);
+  assertUnknownKeys(icon, ['name', 'tintColor', 'accessibilityLabel'], path, 'title leading icon key');
+  const {
+    name,
+    tintColor,
+    accessibilityLabel
+  } = icon;
+  if (typeof name !== 'string' || !name.trim()) fail(`${path}.name`, 'must be non-blank');
+  if (tintColor !== undefined && (typeof tintColor !== 'string' || !HEX_COLOR_PATTERN.test(tintColor))) fail(`${path}.tintColor`, 'must be #RRGGBB or #RRGGBBAA');
+  if (accessibilityLabel !== undefined && typeof accessibilityLabel !== 'string') fail(`${path}.accessibilityLabel`, 'must be a string');
+}
+function assertIdentityTitleRuns(row, path) {
+  if (row.titleSegments !== undefined) {
+    assertTitleSegments(row.titleSegments, `${path}.titleSegments`);
+    // titleMatch ranges index `title`, which the runs replace on screen.
+    if (row.titleMatch?.length) fail(`${path}.titleMatch`, 'cannot be combined with titleSegments');
+    if (row.presentation === 'walletSidebar') fail(`${path}.titleSegments`, 'is not supported with walletSidebar');
+  }
+  if (row.titleLeadingIcon !== undefined) {
+    assertTitleLeadingIcon(row.titleLeadingIcon, `${path}.titleLeadingIcon`);
+    if (row.presentation === 'walletSidebar') fail(`${path}.titleLeadingIcon`, 'is not supported with walletSidebar');
+  }
+}
+
+/** Production keeps decorative title runs only when they pass the rules. */
+function passesTitleRunRules(check) {
+  try {
+    check();
+    return true;
+  } catch {
+    return false;
+  }
+}
 function assertIdentityExtras(row, path) {
   for (const field of ['titleIcon', 'secondaryTitleIcon']) {
     const titleIcon = row[field];
@@ -933,6 +993,7 @@ function assertRow(row, index, path = `rows[${index}]`) {
         if (suffix.maxWidth !== undefined && (!Number.isFinite(suffix.maxWidth) || suffix.maxWidth < 0 || suffix.maxWidth > 4096)) fail(`${path}.titleSuffixes[${index}].maxWidth`, 'must be finite within 0...4096');
       });
       assertIdentityExtras(row, path);
+      assertIdentityTitleRuns(row, path);
       assertText(row.subtitle, `${path}.subtitle`);
       // OneKey patch: selector text segments truncate independently.
       row.subtitleSegments?.forEach((segment, segmentIndex) => {
@@ -1226,7 +1287,7 @@ function assertSnapshotContract(snapshot) {
 }
 const COMMON_ROW_FIELDS = ['height', 'heightRounding', 'testID', 'opacity', 'backgroundColor', 'backgroundFullWidth', 'pressDisabled', 'key', 'revision', 'sectionKey', 'groupId', 'groupPosition', 'size', 'density', 'disabled', 'selected', 'accessibilityLabel', 'separator', 'type', 'style'];
 const ROW_FIELDS = {
-  identity: [...COMMON_ROW_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'presentation', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'subtitle', 'tertiary', 'tertiaryTone', 'titleLines', 'subtitleLines', 'badges', 'trailing', 'draggable'],
+  identity: [...COMMON_ROW_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'presentation', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'titleSegments', 'titleLeadingIcon', 'subtitle', 'tertiary', 'tertiaryTone', 'titleLines', 'subtitleLines', 'badges', 'trailing', 'draggable'],
   walletGroup: [...COMMON_ROW_FIELDS, 'parent', 'children', 'draggable'],
   rail: [...COMMON_ROW_FIELDS, 'visual', 'title', 'status', 'badge', 'draggable'],
   activity: [...COMMON_ROW_FIELDS, 'leading', 'hideLeading', 'secondaryLeading', 'title', 'description', 'status', 'primaryAmount', 'secondaryAmount', 'amounts', 'badges', 'presentation', 'fee', 'descriptionActionKey', 'footerActions'],
@@ -1242,7 +1303,7 @@ const ROW_FIELDS = {
 };
 const COMMON_PATCH_FIELDS = ['height', 'heightRounding', 'opacity', 'pressDisabled', 'revision', 'disabled', 'selected', 'accessibilityLabel', 'separator', 'style'];
 const PATCH_FIELDS = {
-  identity: [...COMMON_PATCH_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'subtitle', 'tertiary', 'tertiaryTone', 'subtitleLines', 'badges', 'trailing'],
+  identity: [...COMMON_PATCH_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'titleSegments', 'titleLeadingIcon', 'subtitle', 'tertiary', 'tertiaryTone', 'subtitleLines', 'badges', 'trailing'],
   rail: [...COMMON_PATCH_FIELDS, 'title', 'visual', 'status', 'badge'],
   activity: [...COMMON_PATCH_FIELDS, 'presentation', 'leading', 'title', 'badges', 'status', 'hideLeading', 'secondaryLeading', 'description', 'primaryAmount', 'secondaryAmount', 'amounts', 'fee', 'descriptionActionKey', 'footerActions'],
   message: [...COMMON_PATCH_FIELDS, 'presentation', 'title', 'unread', 'body', 'bodyLines', 'time', 'thumbnail'],
@@ -1262,7 +1323,7 @@ function protocolObject(value, path) {
 function protocolKey(value, path) {
   if (typeof value !== 'string' || value.trim().length === 0) fail(path, 'must be a non-blank string');
 }
-const PROTOCOL_ARRAY_FIELDS = new Set(['columns', 'titleSuffixes', 'cells', 'points', 'images', 'overlays', 'badges', 'trailing', 'footerActions', 'buttons', 'amounts', 'metrics', 'children', 'subtitleSegments', 'titleMatch', 'selectedKeys', 'segments', 'hoverSecondary', 'hoverImages', 'secondaryBadges', 'fallbackUris', 'probeOrder', 'priceSegments', 'textSegments', 'secondaryTextSegments', 'primaryTextSegments']);
+const PROTOCOL_ARRAY_FIELDS = new Set(['columns', 'titleSuffixes', 'titleSegments', 'cells', 'points', 'images', 'overlays', 'badges', 'trailing', 'footerActions', 'buttons', 'amounts', 'metrics', 'children', 'subtitleSegments', 'titleMatch', 'selectedKeys', 'segments', 'hoverSecondary', 'hoverImages', 'secondaryBadges', 'fallbackUris', 'probeOrder', 'priceSegments', 'textSegments', 'secondaryTextSegments', 'primaryTextSegments']);
 const PROTOCOL_NUMBER_FIELDS = new Set(['leadingContentMaxWidthRatio', 'height', 'width', 'fontSize', 'lineHeight', 'opacity', 'offsetY', 'offsetX', 'cornerRadius', 'borderWidth', 'horizontalPadding', 'verticalPadding', 'leadingGap', 'lineGap', 'titleBadgeGap', 'trailingGap', 'start', 'end', 'padding', 'offset', 'overscan', 'minWidth', 'flex', 'paddingStart', 'paddingEnd', 'changeWidth', 'changeHeight', 'changeCornerRadius', 'contentTrailingGap', 'subtitleTrailingPadding', 'partGap', 'contentPadding', 'contentPaddingHorizontal', 'contentPaddingTop', 'contentPaddingBottom', 'itemSpacing', 'gridColumns']);
 
 /** Validate only shapes that renderers dereference, not display budgets. */
@@ -1333,7 +1394,10 @@ function assertRowProtocol(row, path) {
   }
   if (row.height !== undefined && row.height < 0) fail(`${path}.height`, 'must be non-negative');
   if (row.type === 'identity') {
-    if (isDevelopment()) assertIdentityExtras(row, path);
+    if (isDevelopment()) {
+      assertIdentityExtras(row, path);
+      assertIdentityTitleRuns(row, path);
+    }
     if (row.titleSuffixes !== undefined && !Array.isArray(row.titleSuffixes)) fail(`${path}.titleSuffixes`, 'must be an array');
     row.titleSuffixes?.forEach((suffix, index) => {
       protocolObject(suffix, `${path}.titleSuffixes[${index}]`);
@@ -1583,6 +1647,8 @@ const NESTED_DECORATION_FIELDS = {
 };
 function sanitizeDecoration(value, field) {
   if (value === undefined || value === null) return undefined;
+  if (field === 'titleSegments') return passesTitleRunRules(() => assertTitleSegments(value, field)) ? value : undefined;
+  if (field === 'titleLeadingIcon') return passesTitleRunRules(() => assertTitleLeadingIcon(value, field)) ? value : undefined;
   if (!Array.isArray(value) && ['image', 'networkImage', 'thumbnail', 'source', 'images', 'hoverImages'].includes(field)) return sanitizeImage(value);
   if (['titleImage', 'titleIcon', 'secondaryTitleIcon', 'fallbackIcon', 'cornerIcon', 'media'].includes(field) && !isRecord(value)) return undefined;
   if (field === 'style' && typeof value !== 'string' && !isRecord(value)) return undefined;

package/lib/module/web/NativeListWebEngine.js

@@ -467,7 +467,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-trailing-button{appearance:none;box-sizing:border-box;flex:0 0 auto;padding:4px 10px;border:1px solid transparent;border-radius:9999px;background:var(--nl-button-bg,var(--nl-strong));color:var(--nl-button-text,var(--nl-primary));font:500 14px/20px var(--nl-font-medium);white-space:nowrap;cursor:pointer}.ok-native-list-trailing-button:hover:not(:disabled){background:var(--nl-button-hover,var(--nl-strong))}.ok-native-list-trailing-button:active:not(:disabled){background:var(--nl-button-pressed,var(--nl-pressed))}.ok-native-list-trailing-button:focus-visible{outline:2px solid var(--nl-button-focus,var(--nl-accent))}.ok-native-list-trailing-button:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;margin:-7px;padding:6px;border:1px solid transparent;border-radius:9999px;color:var(--nl-icon-subdued);background:transparent}.ok-native-list-icon-button.ok-native-list-tertiary-icon:hover:not(:disabled){background:var(--nl-hover)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:active:not(:disabled){background:var(--nl-pressed)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon:focus-visible:not(:disabled){outline:2px solid var(--nl-accent)}
-.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-leading-icon{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:16px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ok-native-list-account-row .ok-native-list-visual,.ok-native-list-account-action-row .ok-native-list-visual{width:32px;height:32px;flex-basis:32px}.ok-native-list-account-row .ok-native-list-visual>img,.ok-native-list-account-row .ok-native-list-visual-main,.ok-native-list-account-action-row .ok-native-list-visual>img,.ok-native-list-account-action-row .ok-native-list-visual-main{width:32px;height:32px}.ok-native-list-account-row .ok-native-list-visual>.ok-native-list-visual-corner{width:20px;height:20px;padding:2px}.ok-native-list-account-action-row .ok-native-list-visual{border-radius:8px!important}.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-secondary);font-size:12px;line-height:16px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-primary)}.ok-native-list-account-row .ok-native-list-title{font-size:16px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-account-row .ok-native-list-secondary{font-size:14px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}
 .ok-native-list-flex{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center}.ok-native-list-title{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--nl-font-semibold)}.ok-native-list-secondary{font-size:13px;line-height:18px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-tertiary{color:var(--nl-secondary)}.ok-native-list-info{color:var(--nl-info)}
 .ok-native-list-identity-row .ok-native-list-title,.ok-native-list-identity-row .ok-native-list-amounts>span:first-child{font-size:16px;line-height:20px}.ok-native-list-identity-row .ok-native-list-secondary{font-size:14px;line-height:20px}

package/lib/module/web/templates/IdentityRowRenderer.js

@@ -11,6 +11,54 @@ function toneColor(tone, fallback) {
   if (tone === 'secondary') return 'var(--nl-secondary)';
   return fallback === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
 }
+// Hidden from sight, still read: the runs themselves are hidden from
+// assistive technology in favor of `title`.
+const VISUALLY_HIDDEN = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  whiteSpace: 'nowrap'
+};
+function appendTitleRuns(document, target, row) {
+  const runs = createElement(document, 'span', 'ok-native-list-identity-title-runs');
+  runs.setAttribute('aria-hidden', 'true');
+  Object.assign(runs.style, {
+    display: 'flex',
+    flex: '1 1 auto',
+    minWidth: '0',
+    maxWidth: '100%',
+    overflow: 'hidden'
+  });
+  row.titleSegments?.forEach(segment => {
+    const run = createElement(document, 'span', 'ok-native-list-identity-title-run', segment.text);
+    // Only the shrinking run gives up width; a cap is a share of the line.
+    Object.assign(run.style, {
+      flex: segment.shrink ? '0 1 auto' : '0 0 auto',
+      minWidth: segment.shrink ? '0' : '',
+      maxWidth: segment.maxWidthRatio === undefined ? '' : `${segment.maxWidthRatio * 100}%`,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'pre'
+    });
+    if (segment.tone) run.style.color = segment.tone === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
+    if (segment.fontWeight === 'medium') {
+      run.style.fontWeight = '500';
+      run.style.fontFamily = 'var(--nl-font-medium)';
+    } else if (segment.fontWeight === 'regular') {
+      run.style.fontWeight = '400';
+      run.style.fontFamily = 'var(--nl-font-regular)';
+    }
+    setData(run, 'tone', segment.tone);
+    runs.appendChild(run);
+  });
+  const spoken = createElement(document, 'span', 'ok-native-list-identity-title-spoken', row.title);
+  Object.assign(spoken.style, VISUALLY_HIDDEN);
+  target.replaceChildren(runs, spoken);
+  target.style.display = 'flex';
+  target.style.minWidth = '0';
+}
 function appendAccessories(parent, document, primitives, row, accessories) {
   if (!accessories?.length) return;
   const container = createElement(document, 'span', 'ok-native-list-accessories');
@@ -86,6 +134,13 @@ function createIdentityRow(document, primitives, row) {
       fragment.appendChild(document.createTextNode(row.title.slice(offset)));
       textTarget.prepend(fragment);
     }
+    // The runs replace the plain title, except where `title` itself is
+    // highlighted or shown in the wallet sidebar.
+    const hasTitleRuns = !!row.titleSegments?.length && presentation !== 'walletSidebar' && !row.titleMatch?.length;
+    if (hasTitleRuns) {
+      const textTarget = titleElement.querySelector('[data-nl-slot="title"]') ?? titleElement;
+      appendTitleRuns(document, textTarget, row);
+    }
     if (row.subtitleSegments?.length) {
       column.querySelector('.ok-native-list-secondary')?.remove();
       const segments = createElement(document, 'span', 'ok-native-list-subtitle-segments');
@@ -211,12 +266,48 @@ function createIdentityRow(document, primitives, row) {
         badges.style.minWidth = '0';
       }
     }
+    if (hasTitleRuns) {
+      // The runs fill what the title line leaves, so a ratio is a share of
+      // that width and title accessories sit at the line's end.
+      const runs = titleElement.querySelector('.ok-native-list-identity-title-runs');
+      for (let node = runs?.parentElement; node && node !== titleElement; node = node.parentElement) {
+        node.style.display = 'flex';
+        node.style.flex = '1 1 auto';
+        node.style.minWidth = '0';
+      }
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+    }
+    if (row.titleLeadingIcon && presentation !== 'walletSidebar') {
+      const descriptor = row.titleLeadingIcon;
+      if (titleElement.hasAttribute('data-nl-slot')) {
+        // Keep the glyph out of the title slot that text styles apply to.
+        const titleText = tagSlot(createElement(document, 'span', 'ok-native-list-identity-title-text'), 'title');
+        while (titleElement.firstChild) titleText.appendChild(titleElement.firstChild);
+        if (hasTitleRuns) {
+          titleText.style.display = 'flex';
+          titleText.style.minWidth = '0';
+        }
+        titleElement.removeAttribute('data-nl-slot');
+        titleElement.appendChild(titleText);
+      }
+      const icon = primitives.iconAction(descriptor.name, undefined, undefined, descriptor.tintColor);
+      icon.className = 'ok-native-list-identity-title-leading-icon';
+      if (descriptor.accessibilityLabel) icon.setAttribute('aria-label', descriptor.accessibilityLabel);else icon.setAttribute('aria-hidden', 'true');
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      // 6px to the title, whatever gap the title line already has.
+      const lineGap = Number.parseFloat(titleElement.style.gap || '0') || 0;
+      icon.style.marginInlineEnd = `${Math.max(0, 6 - lineGap)}px`;
+      titleElement.prepend(icon);
+    }
     if (presentation === 'walletSidebar' && row.badges?.length) {
       const badges = createElement(document, 'span', 'ok-native-list-wallet-badges');
       row.badges.forEach(badge => badges.appendChild(createBadge(document, badge)));
       column.appendChild(badges);
     }
     for (const key of ['title', 'subtitle']) {
+      if (key === 'title' && hasTitleRuns) continue;
       const lines = row.style?.[key]?.lines ?? row[`${key}Lines`];
       if (lines !== undefined) column.querySelectorAll(`[data-nl-slot="${key}"]`).forEach(text => applyTextLayout(text, lines === 0 ? {} : {
         lines

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

@@ -394,6 +394,18 @@ export type RowBase = Readonly<{
     accessibilityLabel?: string;
     separator?: boolean;
 }>;
+/** One run of an identity title line; see docs/SPEC.md. */
+export type IdentityTitleSegment = Readonly<{
+    text: string;
+    /** Omitted: the title color. */
+    tone?: 'primary' | 'secondary';
+    /** Omitted: the title weight. */
+    fontWeight?: 'regular' | 'medium';
+    /** The one run that gives up width when the line is too narrow. */
+    shrink?: boolean;
+    /** Caps the run at this fraction of the title line, within (0, 1]. */
+    maxWidthRatio?: number;
+}>;
 export type IdentityRow = RowBase & Readonly<{
     type: 'identity';
     /** Opt in to content-based height; explicit row/container height still wins. */
@@ -428,6 +440,14 @@ export type IdentityRow = RowBase & Readonly<{
     }>;
     /** Web-only additional help icon after titleIcon. */
     secondaryTitleIcon?: IdentityRow['titleIcon'];
+    /** Runs drawn in place of `title`, which stays the spoken label. */
+    titleSegments?: readonly IdentityTitleSegment[];
+    /** 16-point glyph before the title; decorative unless labelled. */
+    titleLeadingIcon?: Readonly<{
+        name: string;
+        tintColor?: string;
+        accessibilityLabel?: string;
+    }>;
     /** Circular image after title icons; image dimensions must be square, 1...40. */
     titleImage?: Readonly<{
         image: ImageSource;
@@ -880,7 +900,7 @@ export type PatchClearableChanges<Row, Keys extends keyof Row> = Readonly<{
 export type RowPatch = Readonly<{
     type: 'identity';
     key: string;
-    changes: PatchClearableChanges<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'titleImage' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>;
+    changes: PatchClearableChanges<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'titleImage' | 'titleSegments' | 'titleLeadingIcon' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>;
 }> | Readonly<{
     type: 'rail';
     key: string;

package/package.json

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

package/src/models.ts

@@ -513,6 +513,19 @@ export type RowBase = Readonly<{
   separator?: boolean;
 }>;
 
+/** One run of an identity title line; see docs/SPEC.md. */
+export type IdentityTitleSegment = Readonly<{
+  text: string;
+  /** Omitted: the title color. */
+  tone?: 'primary' | 'secondary';
+  /** Omitted: the title weight. */
+  fontWeight?: 'regular' | 'medium';
+  /** The one run that gives up width when the line is too narrow. */
+  shrink?: boolean;
+  /** Caps the run at this fraction of the title line, within (0, 1]. */
+  maxWidthRatio?: number;
+}>;
+
 export type IdentityRow = RowBase &
   Readonly<{
     type: 'identity';
@@ -544,6 +557,14 @@ export type IdentityRow = RowBase &
     }>;
     /** Web-only additional help icon after titleIcon. */
     secondaryTitleIcon?: IdentityRow['titleIcon'];
+    /** Runs drawn in place of `title`, which stays the spoken label. */
+    titleSegments?: readonly IdentityTitleSegment[];
+    /** 16-point glyph before the title; decorative unless labelled. */
+    titleLeadingIcon?: Readonly<{
+      name: string;
+      tintColor?: string;
+      accessibilityLabel?: string;
+    }>;
     /** Circular image after title icons; image dimensions must be square, 1...40. */
     titleImage?: Readonly<{
       image: ImageSource;
@@ -1093,6 +1114,8 @@ export type RowPatch =
         | 'titleIcon'
         | 'secondaryTitleIcon'
         | 'titleImage'
+        | 'titleSegments'
+        | 'titleLeadingIcon'
         | 'subtitle'
         | 'subtitleLines'
         | 'contentHeight'