@onekeyfe/react-native-native-list 6.7.0-alpha.375 → 6.7.0-alpha.382

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

@@ -22,13 +22,13 @@ function bindLegacy(body, row, primitives) {
     node.hidden = !row[key];
     if (style?.[key]) primitives.textStyle(node, style[key]);
   }
-  const visualKey = JSON.stringify([row.key, row.leading, row.secondaryLeading]);
+  const visualKey = JSON.stringify([row.key, row.hideLeading, row.leading, row.secondaryLeading]);
   if (v.visualKey !== visualKey) {
     v.visuals.forEach(node => {
       primitives.dispose(node);
       node.remove();
     });
-    v.visuals = [row.leading, row.secondaryLeading].map(source => primitives.visual(source)).filter(node => !!node);
+    v.visuals = (row.hideLeading ? [] : [row.leading, row.secondaryLeading]).map(source => primitives.visual(source)).filter(node => !!node);
     v.visuals.forEach(node => body.insertBefore(node, v.column));
     v.visualStyles = v.visuals.map(node => new RowVisualStyle(node));
     v.visualKey = visualKey;
@@ -224,22 +224,23 @@ function bindHistory(body, row, primitives) {
   Object.assign(v.identity.style, {
     display: 'flex',
     alignItems: 'center',
-    gap: '12px',
+    gap: row.hideLeading ? '0' : '12px',
     minWidth: '0',
     flex: '1 1 0'
   });
   Object.assign(v.visual.style, {
+    display: row.hideLeading ? 'none' : '',
     position: 'relative',
     width: '40px',
     height: '40px',
     flex: '0 0 40px'
   });
-  const visualKey = JSON.stringify([row.key, row.leading, row.secondaryLeading]);
+  const visualKey = JSON.stringify([row.key, row.hideLeading, row.leading, row.secondaryLeading]);
   if (v.visualKey !== visualKey) {
     Array.from(v.visual.children).forEach(n => primitives.dispose(n));
     v.visual.replaceChildren();
     v.visuals = [];
-    const sources = [row.leading, row.secondaryLeading].filter(Boolean);
+    const sources = row.hideLeading ? [] : [row.leading, row.secondaryLeading].filter(Boolean);
     sources.forEach(source => {
       const visual = primitives.visual(source);
       if (!visual) return;
@@ -263,7 +264,7 @@ function bindHistory(body, row, primitives) {
     });
     v.visualKey = visualKey;
   }
-  const sources = [row.leading, row.secondaryLeading].filter(Boolean);
+  const sources = row.hideLeading ? [] : [row.leading, row.secondaryLeading].filter(Boolean);
   v.visuals.forEach((retained, index) => {
     const {
       node: visual,
@@ -493,7 +494,7 @@ function bindHistory(body, row, primitives) {
   v.feeSecondary.style.cssText = ellipsis + 'font-size:14px;line-height:20px;font-weight:400;color:var(--nl-secondary);';
   valueText(v.feePrimary, row.fee?.primary, row.fee?.primaryTextSegments, 14, 20, 400);
   valueText(v.feeSecondary, row.fee?.secondary, row.fee?.secondaryTextSegments, 14, 20, 400);
-  v.actions.style.cssText = 'display:flex;gap:12px;padding-left:52px;padding-bottom:4px;';
+  v.actions.style.cssText = `display:flex;gap:12px;padding-left:${row.hideLeading ? 0 : 52}px;padding-bottom:4px;`;
   v.actions.style.display = footer ? 'flex' : 'none';
   const actionKeys = new Set();
   for (const [index, action] of (row.footerActions ?? []).entries()) {

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

@@ -0,0 +1,47 @@
+"use strict";
+
+import { markActionAnchorSource } from "./RowElements.js";
+function bind(body, row) {
+  body.replaceChildren();
+  body.className = 'ok-native-list-row ok-native-list-button-group';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  row.buttons.forEach((descriptor, index) => {
+    const button = body.ownerDocument.createElement('button');
+    button.type = 'button';
+    button.className = 'ok-native-list-block-button';
+    button.dataset.nativeListAction = descriptor.actionKey;
+    button.dataset.nlButtonKey = descriptor.key;
+    button.dataset.nlSlot = `button-${index}`;
+    if (descriptor.testID) button.dataset.testid = descriptor.testID;
+    button.setAttribute('aria-label', descriptor.accessibilityLabel ?? descriptor.label);
+    button.disabled = Boolean(row.disabled || descriptor.disabled || descriptor.loading);
+    button.setAttribute('aria-busy', descriptor.loading ? 'true' : 'false');
+    markActionAnchorSource(button, 'buttonGroup', index);
+    const label = body.ownerDocument.createElement('span');
+    label.textContent = descriptor.label;
+    if (descriptor.loading) {
+      const spinner = body.ownerDocument.createElement('span');
+      spinner.className = 'ok-native-list-spinner';
+      spinner.setAttribute('role', 'progressbar');
+      button.appendChild(spinner);
+    }
+    button.appendChild(label);
+    body.appendChild(button);
+  });
+}
+function create(document, row, _primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'buttonGroup';
+  bind(body, row);
+  return body;
+}
+export const buttonGroupRowRenderer = {
+  key: 'buttonGroup',
+  create,
+  bind,
+  recycle: body => body.replaceChildren(),
+  measure: (_row, _width) => 64,
+  measureRendered: body => body.scrollHeight
+};
+//# sourceMappingURL=ButtonGroupRowRenderer.js.map

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

@@ -1,6 +1,7 @@
 "use strict";
 
-import { createElement, tagSlot } from "./RowElements.js";
+import { createElement, markActionAnchorSource, setData, tagSlot } from "./RowElements.js";
+import { applyValueSegments, fontWeight } from "./RowText.js";
 import { RowVisualStyle } from "./RowVisual.js";
 const views = new WeakMap();
 const tone = (value, fallback) => value === 'positive' ? 'var(--nl-positive)' : value === 'negative' ? 'var(--nl-negative)' : value === 'secondary' ? 'var(--nl-secondary)' : `var(--nl-${fallback})`;
@@ -16,6 +17,9 @@ function bind(body, row, primitives) {
   v.controls.replaceChildren();
   if (row.checkbox) v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
   v.controls.style.display = 'contents';
+  v.trailing.replaceChildren();
+  row.trailing?.forEach((accessory, index) => v.trailing.appendChild(primitives.accessory(row.key, accessory, index)));
+  v.trailing.hidden = !row.trailing?.length;
   v.index.style.cssText = '';
   v.index.hidden = row.index === undefined;
   v.index.textContent = String(row.index ?? '');
@@ -54,7 +58,26 @@ function bind(body, row, primitives) {
     if (style?.titleBadgeGap !== undefined) cell.primaryLine.style.gap = `${style.titleBadgeGap}px`;
     cell.primary.style.cssText = '';
     cell.primary.textContent = column.text;
+    applyValueSegments(cell.primary, column.textSegments, style?.columns?.fontSize ?? 14, style?.columns?.lineHeight ?? 20, fontWeight(style?.columns?.fontWeight, 500));
     if (style?.columns) primitives.textStyle(cell.primary, style.columns);
+    cell.titleIcons.replaceChildren();
+    if (column.titleIcon || column.secondaryTitleIcon) {
+      cell.primary.style.minWidth = '0';
+      cell.primary.style.overflow = 'hidden';
+      cell.primary.style.textOverflow = 'ellipsis';
+      cell.primary.style.whiteSpace = 'nowrap';
+      [column.titleIcon, column.secondaryTitleIcon].filter(icon => icon !== undefined).forEach(descriptor => {
+        const icon = primitives.iconAction(descriptor.name, undefined, undefined, descriptor.tintColor);
+        icon.className = 'ok-native-list-identity-title-icon';
+        if (descriptor.hoverActionKey) {
+          setData(icon, 'nativeListHoverAction', descriptor.hoverActionKey);
+          setData(icon, 'nativeListIconHelp', true);
+          markActionAnchorSource(icon, 'leadingAction');
+        }
+        if (descriptor.accessibilityLabel) icon.setAttribute('aria-label', descriptor.accessibilityLabel);else icon.setAttribute('aria-hidden', 'true');
+        cell.titleIcons.appendChild(icon);
+      });
+    }
     cell.badges.replaceChildren();
     cell.badges.style.display = 'contents';
     if (column.key === 'asset') row.badges?.forEach(badge => {
@@ -64,17 +87,22 @@ function bind(body, row, primitives) {
     });
     // Legacy Web layout: secondary leading text sits inline before the primary
     // text; secondary text is a direct line below it, toned by secondaryTone.
-    cell.secondaryLine.style.display = column.secondaryText ? 'contents' : 'none';
-    [column.secondaryLeadingText, column.secondaryText].forEach((text, slot) => {
+    const secondaryText = column.secondaryTextSegments?.length ? column.secondaryTextSegments.map(segment => segment.text).join('') : column.secondaryText;
+    cell.secondaryLine.style.display = secondaryText ? 'contents' : 'none';
+    [column.secondaryLeadingText, secondaryText].forEach((text, slot) => {
       const label = cell.secondary[slot];
       label.hidden = !text;
       if (!text) label.remove();else if (slot === 0) cell.primaryLine.insertBefore(label, cell.primary);else cell.secondaryLine.appendChild(label);
       label.style.cssText = '';
       label.textContent = text ?? '';
+      if (slot === 1) {
+        applyValueSegments(label, column.secondaryTextSegments, style?.columnSecondary?.fontSize ?? 12, style?.columnSecondary?.lineHeight ?? 16, fontWeight(style?.columnSecondary?.fontWeight, 400));
+      }
       if (slot === 1) label.style.color = tone(column.secondaryTone, 'secondary');
       if (style?.columnSecondary) primitives.textStyle(label, style.columnSecondary);
     });
   });
+  body.appendChild(v.trailing);
 }
 function create(document, row, primitives) {
   const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-data');
@@ -82,6 +110,7 @@ function create(document, row, primitives) {
   const index = tagSlot(createElement(document, 'span', 'ok-native-list-index'), 'index');
   const favorite = createElement(document, 'span', 'ok-native-list-favorite');
   const controls = createElement(document, 'span');
+  const trailing = createElement(document, 'span', 'ok-native-list-accessories');
   body.append(controls, index, favorite);
   const columns = Array.from({
     length: 4
@@ -89,8 +118,10 @@ function create(document, row, primitives) {
     const cell = createElement(document, 'span', 'ok-native-list-data-cell');
     const primaryLine = createElement(document, 'span', 'ok-native-list-data-primary');
     const primary = tagSlot(createElement(document, 'span'), 'columns');
+    const titleIcons = createElement(document, 'span');
+    titleIcons.style.display = 'contents';
     const badges = createElement(document, 'span');
-    primaryLine.append(primary, badges);
+    primaryLine.append(primary, titleIcons, badges);
     const secondaryLine = createElement(document, 'span', 'ok-native-list-data-secondary-line');
     const secondary = Array.from({
       length: 2
@@ -102,15 +133,18 @@ function create(document, row, primitives) {
       body: cell,
       primaryLine,
       primary,
+      titleIcons,
       badges,
       secondaryLine,
       secondary
     };
   });
+  body.appendChild(trailing);
   views.set(body, {
     favorite,
     index,
     controls,
+    trailing,
     columns,
     visualKey: '',
     primitives
@@ -129,6 +163,7 @@ function recycle(body) {
   v.visualStyle = undefined;
   v.visualKey = '';
   v.controls.replaceChildren();
+  v.trailing.replaceChildren();
 }
 export const dataRowRenderer = {
   key: 'dataRow',
@@ -137,7 +172,7 @@ export const dataRowRenderer = {
   recycle,
   // Legacy presets: table rows without secondary text are 8 units shorter.
   measure: (row, _width, layout) => {
-    const secondary = row.columns.some(column => column.secondaryText);
+    const secondary = row.columns.some(column => column.secondaryTextSegments?.length ? column.secondaryTextSegments.some(segment => segment.text.length > 0) : !!column.secondaryText);
     return (secondary ? 60 : 56) + (layout === 'table' && !secondary ? -8 : 0);
   },
   measureRendered: (_body, _row) => undefined

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

@@ -100,6 +100,77 @@ function createIdentityRow(document, primitives, row) {
       });
       column.insertBefore(segments, titleElement.nextSibling);
     }
+    if (row.titleIcon || row.secondaryTitleIcon) {
+      const badgeLine = titleElement.querySelector(':scope > .ok-native-list-badges');
+      const titleText = createElement(document, 'span', 'ok-native-list-identity-title-text');
+      while (titleElement.firstChild && titleElement.firstChild !== badgeLine) titleText.appendChild(titleElement.firstChild);
+      titleElement.prepend(titleText);
+      const icons = [row.titleIcon, row.secondaryTitleIcon].filter(icon => icon !== undefined).map(descriptor => {
+        const icon = primitives.iconAction(descriptor.name, undefined, undefined, descriptor.tintColor);
+        icon.className = 'ok-native-list-identity-title-icon';
+        if (descriptor.hoverActionKey) {
+          setData(icon, 'nativeListHoverAction', descriptor.hoverActionKey);
+          setData(icon, 'nativeListIconHelp', true);
+          markActionAnchorSource(icon, 'leadingAction');
+        }
+        if (descriptor.accessibilityLabel) icon.setAttribute('aria-label', descriptor.accessibilityLabel);else icon.setAttribute('aria-hidden', 'true');
+        return icon;
+      });
+      titleText.after(...icons);
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      titleElement.style.gap = '4px';
+    }
+    if (row.titleSuffixes?.length) {
+      const badges = titleElement.querySelector(':scope > .ok-native-list-badges');
+      let titleText = titleElement.querySelector(':scope > .ok-native-list-identity-title-text, :scope > [data-nl-slot="title"]');
+      if (!titleText) {
+        titleText = tagSlot(createElement(document, 'span', 'ok-native-list-identity-title-text'), 'title');
+        while (titleElement.firstChild && titleElement.firstChild !== badges) titleText.appendChild(titleElement.firstChild);
+        titleElement.prepend(titleText);
+        titleElement.removeAttribute('data-nl-slot');
+      } else if (titleElement.hasAttribute('data-nl-slot')) {
+        titleElement.removeAttribute('data-nl-slot');
+        tagSlot(titleText, 'title');
+      }
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      titleText.style.flex = '0 1 auto';
+      titleText.style.minWidth = 'min(80px, 100%)';
+      titleText.style.overflow = 'hidden';
+      titleText.style.textOverflow = 'ellipsis';
+      titleText.style.whiteSpace = 'nowrap';
+      row.titleSuffixes.forEach(suffix => {
+        const label = createElement(document, 'span', 'ok-native-list-identity-title-suffix', suffix.text);
+        label.style.flex = '0 1 auto';
+        label.style.minWidth = '0';
+        label.style.marginInlineStart = row.titleIcon || row.secondaryTitleIcon ? '4px' : '8px';
+        label.style.maxWidth = suffix.maxWidth === undefined ? '' : `${suffix.maxWidth}px`;
+        label.style.overflow = 'hidden';
+        label.style.textOverflow = 'ellipsis';
+        label.style.whiteSpace = 'nowrap';
+        label.style.fontSize = '12px';
+        label.style.lineHeight = '16px';
+        label.style.fontWeight = '400';
+        label.style.fontFamily = 'var(--nl-font-regular)';
+        label.style.color = suffix.tone === 'disabled' ? 'var(--nl-disabled)' : 'var(--nl-secondary)';
+        titleElement.insertBefore(label, badges);
+      });
+    }
+    if (row.badges?.length && !row.titleIcon && !row.secondaryTitleIcon) {
+      const titleText = titleElement.querySelector(':scope > [data-nl-slot="title"]');
+      const badges = titleElement.querySelector(':scope > .ok-native-list-badges');
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      if (titleText) {
+        titleText.style.flex = '0 1 auto';
+        titleText.style.minWidth = row.titleSuffixes?.length ? 'min(80px, 100%)' : '0';
+      }
+      if (badges) {
+        badges.style.flex = '0 1 auto';
+        badges.style.minWidth = '0';
+      }
+    }
     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)));
@@ -107,9 +178,9 @@ function createIdentityRow(document, primitives, row) {
     }
     for (const key of ['title', 'subtitle']) {
       const lines = row.style?.[key]?.lines ?? row[`${key}Lines`];
-      if (lines !== undefined) column.querySelectorAll(`[data-nl-slot="${key}"]`).forEach(text => applyTextLayout(text, {
+      if (lines !== undefined) column.querySelectorAll(`[data-nl-slot="${key}"]`).forEach(text => applyTextLayout(text, lines === 0 ? {} : {
         lines
-      }));
+      }, lines === 0 ? 0 : undefined));
     }
   }
   body.appendChild(column);
@@ -125,6 +196,17 @@ function applyIdentityStyle(body, row) {
   if (box.verticalPadding !== undefined) body.style.paddingBlock = String(box.verticalPadding) + 'px';
   const vertical = row.type === 'identity' && row.presentation === 'walletSidebar';
   const leading = body.querySelector(':scope > .ok-native-list-visual, :scope > .ok-native-list-stacked');
+  if (row.style?.leadingContentMaxWidthRatio !== undefined && !vertical) {
+    const column = body.querySelector(':scope > .ok-native-list-flex');
+    const trailing = body.querySelector(':scope > .ok-native-list-accessories');
+    const visualWidth = leading ? row.style.image?.width ?? (row.presentation === 'accountSelector' || row.presentation === 'networkSelector' ? 32 : 40) : 0;
+    const gap = leading ? row.style.leadingGap ?? 12 : 0;
+    if (column) {
+      column.style.flex = '0 1 auto';
+      column.style.maxWidth = `calc(${row.style.leadingContentMaxWidthRatio * 100}% - ${visualWidth + gap}px)`;
+    }
+    if (trailing) trailing.style.marginInlineStart = 'auto';
+  }
   const defaultGap = body.style.gap || (row.type === 'identity' && row.presentation === 'walletSidebar' ? '4px' : row.type === 'identity' && row.presentation === 'accountSelector' ? '8px' : '12px');
   if (box.lineGap !== undefined) {
     const targets = body.querySelectorAll(':scope > .ok-native-list-flex');
@@ -161,7 +243,7 @@ function applyIdentityStyle(body, row) {
       // Clip the bitmap itself; decorations may extend beyond the visual slot.
       leading.style.overflow = leading.matches('img') ? 'hidden' : 'visible';
     }
-    const images = leading.matches('img') ? [leading] : leading.querySelectorAll(':scope > img, :scope > .ok-native-list-visual-fallback');
+    const images = leading.matches('img') ? [leading] : leading.querySelectorAll(':scope > img:not(.ok-native-list-visual-corner), :scope > .ok-native-list-visual-fallback:not(.ok-native-list-visual-corner)');
     images.forEach(bitmap => {
       if (bitmap !== leading) {
         if (image.width !== undefined) bitmap.style.width = '100%';
@@ -285,6 +367,10 @@ export const identityRowRenderer = {
   recycle,
   appliesSizePreset: row => !row.presentation,
   measure: (row, _width) => row.presentation === 'walletSidebar' ? 68 + (row.badges?.length ? 24 : 0) : row.presentation === 'networkSelector' ? 47 : row.presentation === 'accountSelector' ? 58 : row.tertiary ? 72 : row.subtitle ? 60 : 56,
-  measureRendered: (_body, _row) => undefined
+  measureRendered: (body, row) => {
+    if (row.contentHeight !== 'auto' || hasExplicitRowHeight(row)) return undefined;
+    const height = body.getBoundingClientRect().height;
+    return height > 0 ? height : undefined;
+  }
 };
 //# sourceMappingURL=IdentityRowRenderer.js.map

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

@@ -46,6 +46,7 @@ export function bindMessageRow(body, row, primitives) {
   body.style.cssText = '';
   body.removeAttribute('data-nl-container-background');
   body.removeAttribute('data-nl-container-border');
+  if (row.presentation === 'inlineWarning') body.setAttribute('data-nl-inline-warning', 'true');else body.removeAttribute('data-nl-inline-warning');
   body.style.padding = `${resolved.verticalPadding}px ${resolved.horizontalPadding}px`;
   body.style.height = resolved.automaticHeight ? 'auto' : '100%';
   views.column.style.cssText = '';
@@ -53,7 +54,22 @@ export function bindMessageRow(body, row, primitives) {
   for (const [view, text] of [[views.title, resolved.title], [views.body, resolved.body], [views.time, resolved.time]]) {
     view.style.cssText = '';
     view.textContent = text.value;
-    primitives.textStyle(view, text.style);
+    const {
+      lines,
+      ...textStyle
+    } = text.style;
+    primitives.textStyle(view, lines === 0 ? textStyle : {
+      ...textStyle,
+      lines
+    });
+    if (lines === 0) {
+      view.style.whiteSpace = 'pre-wrap';
+      view.style.overflow = 'visible';
+      view.style.textOverflow = 'clip';
+      view.style.maxHeight = 'none';
+      view.style.removeProperty('-webkit-line-clamp');
+      view.style.removeProperty('-webkit-box-orient');
+    }
   }
   views.unread.style.cssText = '';
   if (row.body) {
@@ -143,7 +159,7 @@ export function measureMessageRow(row, availableWidth) {
     if (!text.value) return 0;
     const value = text.style.lines === 1 ? text.value.replace(/\r\n|[\r\n]/g, ' ') : text.value;
     const lines = value.split(/\r\n|[\r\n]/).reduce((total, line) => total + Math.max(1, Math.ceil(Array.from(line).reduce((sum, char) => sum + (char.charCodeAt(0) > 255 ? text.style.fontSize : text.style.fontSize / 2), 0) / Math.max(1, width))), 0);
-    return Math.min(text.style.lines, lines) * text.style.lineHeight;
+    return (text.style.lines === 0 ? lines : Math.min(text.style.lines, lines)) * text.style.lineHeight;
   };
   const timeWidth = Math.min(availableWidth / 3, Math.max(0, r.time.value.length * r.time.style.fontSize / 2));
   const textWidth = availableWidth - r.horizontalPadding * 2 - (row.leading ? r.imageWidth + r.leadingGap : 0) - (row.thumbnail ? 76 : 0) - (row.unread ? 19 : 0) - timeWidth - 12;

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

@@ -66,6 +66,7 @@ export function applyRowContainerStyle(body, row) {
     body.style.removeProperty('background-color');
   }
   if (container.cornerRadius !== undefined) set(body, 'border-radius', `${container.cornerRadius}px`);
+  if (row.type === 'message' && row.presentation === 'inlineWarning') set(body, 'border-radius', '0px');
   if (container.borderWidth !== undefined) {
     // Paint above member backgrounds without changing the content box or hit targets.
     body.setAttribute('data-nl-container-border', 'true');

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

@@ -10,6 +10,7 @@ import { dataRowRenderer } from "./DataRowRenderer.js";
 import { activityRowRenderer } from "./ActivityRowRenderer.js";
 import { systemRowRenderer } from "./SystemRowRenderer.js";
 import { actionRowRenderer } from "./ActionRowRenderer.js";
+import { buttonGroupRowRenderer } from "./ButtonGroupRowRenderer.js";
 import { mediaTileRowRenderer } from "./MediaTileRowRenderer.js";
 import { messageRowRenderer } from "./MessageRowRenderer.js";
 import { railRowRenderer } from "./RailRowRenderer.js";
@@ -34,6 +35,7 @@ const factories = {
   activity: row => registration(activityRowRenderer, row),
   system: row => registration(systemRowRenderer, row),
   action: row => registration(actionRowRenderer, row),
+  buttonGroup: row => registration(buttonGroupRowRenderer, row),
   message: row => registration(messageRowRenderer, row),
   rail: row => registration(railRowRenderer, row),
   mediaTile: row => registration(mediaTileRowRenderer, row)
@@ -49,6 +51,7 @@ const renderers = {
   activity: activityRowRenderer,
   system: systemRowRenderer,
   action: actionRowRenderer,
+  buttonGroup: buttonGroupRowRenderer,
   message: messageRowRenderer,
   rail: railRowRenderer,
   mediaTile: mediaTileRowRenderer

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

@@ -4,6 +4,20 @@ import { applyTextWeight } from "./RowText.js";
 import { applyTabularNumbers, hasExplicitRowHeight } from "./RowElements.js";
 import { createElement, setData, tagSlot, markActionAnchorSource, createTextColumn } from "./RowElements.js";
 import { applyValueSegments } from "./RowText.js";
+function bindHelp(target, help) {
+  markActionAnchorSource(target, 'trailingAccessory', 0);
+  if (help.presentation === 'tooltip') {
+    setData(target, 'nativeListHoverAction', help.actionKey);
+    setData(target, 'nativeListIconHelp', true);
+  } else {
+    setData(target, 'nativeListAction', help.actionKey);
+    target.setAttribute('role', 'button');
+  }
+  if (help.underline === 'dashed') {
+    target.style.textDecoration = 'underline dashed';
+    target.style.textUnderlineOffset = '4px';
+  }
+}
 function createSectionHeader(document, primitives, row) {
   const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-section');
   setData(body, 'variant', row.variant);
@@ -17,6 +31,11 @@ function createSectionHeader(document, primitives, row) {
   const column = createTextColumn(document, row.title, row.subtitle);
   const title = column.firstElementChild;
   title.classList.add('ok-native-list-section-title');
+  if (row.leadingBadge) {
+    const badge = createElement(document, 'span', 'ok-native-list-badge', row.leadingBadge.text);
+    if (row.leadingBadge.tone) setData(badge, 'tone', row.leadingBadge.tone);
+    body.appendChild(badge);
+  }
   if (row.titleActionKey) {
     setData(title, 'nativeListAction', row.titleActionKey);
     markActionAnchorSource(title, 'leadingAction');
@@ -31,6 +50,11 @@ function createSectionHeader(document, primitives, row) {
     }
     if (row.titleActionOnHover) setData(title, 'nativeListHoverAction', true);
   }
+  if (row.style?.titleDecoration === 'none') title.style.textDecoration = 'none';
+  if (row.style?.titleDecoration === 'dashed') {
+    title.style.textDecoration = 'underline dashed';
+    title.style.textUnderlineOffset = '4px';
+  }
   if (row.presentation === 'networkSelector' && hasExplicitRowHeight(row)) {
     body.style.padding = row.variant === 'summary' ? '24px 12px 20px' : '0 12px';
     body.style.backgroundColor = 'var(--nl-bg)';
@@ -108,7 +132,7 @@ function createSectionHeader(document, primitives, row) {
     body.appendChild(pendingLine);
   } else body.appendChild(column);
   if (row.value) {
-    const value = tagSlot(createElement(document, row.valueActionKey ? 'button' : 'span', row.valueActionKey ? 'ok-native-list-action-button ok-native-list-section-value' : 'ok-native-list-value ok-native-list-section-value', row.value), 'value');
+    const value = tagSlot(createElement(document, row.valueActionKey || row.valueHelp?.presentation === 'popover' ? 'button' : 'span', row.valueActionKey || row.valueHelp?.presentation === 'popover' ? 'ok-native-list-action-button ok-native-list-section-value' : 'ok-native-list-value ok-native-list-section-value', row.value), 'value');
     applyValueSegments(value, row.valueSegments);
     if (row.presentation === 'networkSelector' && hasExplicitRowHeight(row)) {
       value.style.fontFamily = 'inherit';
@@ -127,7 +151,17 @@ function createSectionHeader(document, primitives, row) {
       setData(value, 'nativeListAction', row.valueActionKey);
       markActionAnchorSource(value, 'trailingAccessory', 0);
     }
-    body.appendChild(value);
+    if (row.valueHelp) bindHelp(value, row.valueHelp);
+    if (row.style?.valuePlacement === 'afterTitle') {
+      value.style.marginLeft = '0';
+      value.style.flexShrink = '0';
+      value.style.alignSelf = 'center';
+      title.insertAdjacentElement('afterend', value);
+      column.style.flexDirection = 'row';
+      column.style.alignItems = 'center';
+      column.style.justifyContent = 'flex-start';
+      column.style.gap = '8px';
+    } else body.appendChild(value);
   }
   if (row.valueIcon) {
     const valueIcon = primitives.iconAction(row.valueIcon.name, row.valueIcon.actionKey, row.valueIcon.disabled, row.valueIcon.tintColor);

package/lib/nitrogen/generated/android/c++/JHybridNativeListSpec.cpp

@@ -88,6 +88,15 @@ namespace margelo::nitro::nativelist {
     static const auto method = _javaPart->javaClassStatic()->getMethod<void(jni::alias_ref<jni::JString> /* containerSlotHeightsJson */)>("setContainerSlotHeightsJson");
     method(_javaPart, jni::make_jstring(containerSlotHeightsJson));
   }
+  std::string JHybridNativeListSpec::getSidecarLayoutJson() {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<jni::local_ref<jni::JString>()>("getSidecarLayoutJson");
+    auto __result = method(_javaPart);
+    return __result->toStdString();
+  }
+  void JHybridNativeListSpec::setSidecarLayoutJson(const std::string& sidecarLayoutJson) {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<void(jni::alias_ref<jni::JString> /* sidecarLayoutJson */)>("setSidecarLayoutJson");
+    method(_javaPart, jni::make_jstring(sidecarLayoutJson));
+  }
   NativeListScrollEdgeEffect JHybridNativeListSpec::getTopScrollEdgeEffect() {
     static const auto method = _javaPart->javaClassStatic()->getMethod<jni::local_ref<JNativeListScrollEdgeEffect>()>("getTopScrollEdgeEffect");
     auto __result = method(_javaPart);
@@ -252,6 +261,23 @@ namespace margelo::nitro::nativelist {
     static const auto method = _javaPart->javaClassStatic()->getMethod<void(jni::alias_ref<JFunc_void_std__string::javaobject> /* onVisibleRangeChanged */)>("setOnVisibleRangeChanged_cxx");
     method(_javaPart, onVisibleRangeChanged.has_value() ? JFunc_void_std__string_cxx::fromCpp(onVisibleRangeChanged.value()) : nullptr);
   }
+  std::optional<std::function<void(const std::string& /* payloadJson */)>> JHybridNativeListSpec::getOnStructuralTransitionSettled() {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<jni::local_ref<JFunc_void_std__string::javaobject>()>("getOnStructuralTransitionSettled_cxx");
+    auto __result = method(_javaPart);
+    return __result != nullptr ? std::make_optional([&]() -> std::function<void(const std::string& /* payloadJson */)> {
+      if (__result->isInstanceOf(JFunc_void_std__string_cxx::javaClassStatic())) [[likely]] {
+        auto downcast = jni::static_ref_cast<JFunc_void_std__string_cxx::javaobject>(__result);
+        return downcast->cthis()->getFunction();
+      } else {
+        auto __resultRef = jni::make_global(__result);
+        return JNICallable<JFunc_void_std__string, void(std::string)>(std::move(__resultRef));
+      }
+    }()) : std::nullopt;
+  }
+  void JHybridNativeListSpec::setOnStructuralTransitionSettled(const std::optional<std::function<void(const std::string& /* payloadJson */)>>& onStructuralTransitionSettled) {
+    static const auto method = _javaPart->javaClassStatic()->getMethod<void(jni::alias_ref<JFunc_void_std__string::javaobject> /* onStructuralTransitionSettled */)>("setOnStructuralTransitionSettled_cxx");
+    method(_javaPart, onStructuralTransitionSettled.has_value() ? JFunc_void_std__string_cxx::fromCpp(onStructuralTransitionSettled.value()) : nullptr);
+  }
 
   // Methods
   void JHybridNativeListSpec::applySnapshot(const std::string& snapshotJson) {

package/lib/nitrogen/generated/android/c++/JHybridNativeListSpec.hpp

@@ -56,6 +56,8 @@ namespace margelo::nitro::nativelist {
     void setFontFamiliesJson(const std::string& fontFamiliesJson) override;
     std::string getContainerSlotHeightsJson() override;
     void setContainerSlotHeightsJson(const std::string& containerSlotHeightsJson) override;
+    std::string getSidecarLayoutJson() override;
+    void setSidecarLayoutJson(const std::string& sidecarLayoutJson) override;
     NativeListScrollEdgeEffect getTopScrollEdgeEffect() override;
     void setTopScrollEdgeEffect(NativeListScrollEdgeEffect topScrollEdgeEffect) override;
     double getTopOverlayHeight() override;
@@ -80,6 +82,8 @@ namespace margelo::nitro::nativelist {
     void setOnEndReached(const std::optional<std::function<void(const std::string& /* payloadJson */)>>& onEndReached) override;
     std::optional<std::function<void(const std::string& /* payloadJson */)>> getOnVisibleRangeChanged() override;
     void setOnVisibleRangeChanged(const std::optional<std::function<void(const std::string& /* payloadJson */)>>& onVisibleRangeChanged) override;
+    std::optional<std::function<void(const std::string& /* payloadJson */)>> getOnStructuralTransitionSettled() override;
+    void setOnStructuralTransitionSettled(const std::optional<std::function<void(const std::string& /* payloadJson */)>>& onStructuralTransitionSettled) override;
 
   public:
     // Methods

package/lib/nitrogen/generated/android/c++/views/JHybridNativeListStateUpdater.cpp

@@ -68,6 +68,11 @@ void JHybridNativeListStateUpdater::updateViewProps(jni::alias_ref<jni::JClass>
         : !newProps->containerSlotHeightsJson.hasSameValue(oldProps->containerSlotHeightsJson)) {
     hybridView->setContainerSlotHeightsJson(newProps->containerSlotHeightsJson.get());
   }
+  if (oldProps == nullptr
+        ? newProps->sidecarLayoutJson.isProvided()
+        : !newProps->sidecarLayoutJson.hasSameValue(oldProps->sidecarLayoutJson)) {
+    hybridView->setSidecarLayoutJson(newProps->sidecarLayoutJson.get());
+  }
   if (oldProps == nullptr
         ? newProps->topScrollEdgeEffect.isProvided()
         : !newProps->topScrollEdgeEffect.hasSameValue(oldProps->topScrollEdgeEffect)) {
@@ -128,6 +133,11 @@ void JHybridNativeListStateUpdater::updateViewProps(jni::alias_ref<jni::JClass>
         : !newProps->onVisibleRangeChanged.hasSameValue(oldProps->onVisibleRangeChanged)) {
     hybridView->setOnVisibleRangeChanged(newProps->onVisibleRangeChanged.get());
   }
+  if (oldProps == nullptr
+        ? newProps->onStructuralTransitionSettled.isProvided()
+        : !newProps->onStructuralTransitionSettled.hasSameValue(oldProps->onStructuralTransitionSettled)) {
+    hybridView->setOnStructuralTransitionSettled(newProps->onStructuralTransitionSettled.get());
+  }
 
   // Update hybridRef if it changed
   if (oldProps == nullptr

package/lib/nitrogen/generated/android/kotlin/com/margelo/nitro/nativelist/HybridNativeListSpec.kt

@@ -45,6 +45,12 @@ abstract class HybridNativeListSpec: HybridView() {
   @set:Keep
   abstract var containerSlotHeightsJson: String
   
+  @get:DoNotStrip
+  @get:Keep
+  @set:DoNotStrip
+  @set:Keep
+  abstract var sidecarLayoutJson: String
+  
   @get:DoNotStrip
   @get:Keep
   @set:DoNotStrip
@@ -172,6 +178,20 @@ abstract class HybridNativeListSpec: HybridView() {
     set(value) {
       onVisibleRangeChanged = value?.let { it }
     }
+  
+  abstract var onStructuralTransitionSettled: ((payloadJson: String) -> Unit)?
+  
+  private var onStructuralTransitionSettled_cxx: Func_void_std__string?
+    @Keep
+    @DoNotStrip
+    get() {
+      return onStructuralTransitionSettled?.let { Func_void_std__string_java(it) }
+    }
+    @Keep
+    @DoNotStrip
+    set(value) {
+      onStructuralTransitionSettled = value?.let { it }
+    }
 
   // Methods
   @DoNotStrip