@onekeyfe/react-native-native-list 3.0.157-alpha.248 → 3.0.157-alpha.250

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

@@ -0,0 +1,97 @@
+"use strict";
+
+import { applyTabularNumbers, hasExplicitRowHeight } from "./RowElements.js";
+import { RowVisualStyle } from "./RowVisual.js";
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  body.className = 'ok-native-list-row ok-native-list-action-row' + (row.presentation === 'accountSelector' ? ' ok-native-list-account-action-row' : '');
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined) body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined) body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.title.style.cssText = '';
+  v.title.textContent = row.title;
+  v.title.dataset.tone = row.tone ?? '';
+  if (row.presentation === 'accountSelector' && row.icon) v.title.style.fontWeight = '500';
+  if (style?.title) primitives.textStyle(v.title, style.title);
+  const visualKey = JSON.stringify([row.key, row.icon]);
+  if (v.visualKey !== visualKey) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.icon);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    if (v.visual) body.insertBefore(v.visual, v.title);
+    v.visualKey = visualKey;
+  }
+  if (v.visualStyle && v.visual) {
+    const size = row.presentation === 'accountSelector' ? 32 : 40;
+    v.visualStyle.apply(style?.image, style?.image?.width ?? size, style?.image?.height ?? size, (style?.leadingGap ?? 12) - 12);
+  }
+  v.controls.replaceChildren();
+  v.controls.style.cssText = '';
+  v.controls.removeAttribute('data-native-list-account-control');
+  const descriptors = row.trailing ?? [];
+  if (row.checkbox) v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
+  if (descriptors.length) {
+    const trailing = body.ownerDocument.createElement('span');
+    trailing.className = 'ok-native-list-accessories';
+    if (style?.trailingGap !== undefined) trailing.style.gap = `${style.trailingGap}px`;
+    if (hasExplicitRowHeight(row) && row.presentation === 'accountSelector' && descriptors.length === 1 && descriptors[0]?.kind === 'icon' && descriptors[0].name === 'PlusSmallOutline') trailing.dataset.nativeListAccountControl = 'createAddress';
+    let valueIndex = 0;
+    descriptors.forEach((descriptor, index) => {
+      const node = primitives.accessory(row.key, descriptor, index);
+      if (descriptor.kind === 'value' || descriptor.kind === 'valuePair') {
+        node.dataset.nlSlot = valueIndex++ === 0 ? 'value' : 'valueSecondary';
+        if (node.dataset.nlSlot === 'value' && style?.value) primitives.textStyle(node, style.value);
+      }
+      trailing.appendChild(node);
+    });
+    v.controls.appendChild(trailing);
+  }
+  v.controls.style.display = 'contents';
+  if (row.presentation === 'accountSelector') applyTabularNumbers(body);
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'action';
+  const title = document.createElement('span');
+  title.className = 'ok-native-list-action-title';
+  title.dataset.nlSlot = 'title';
+  const controls = document.createElement('span');
+  body.append(title, controls);
+  views.set(body, {
+    title,
+    controls,
+    visualKey: '',
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  if (v.visual) {
+    v.primitives.dispose(v.visual);
+    v.visual.remove();
+  }
+  v.visual = undefined;
+  v.visualStyle = undefined;
+  v.visualKey = '';
+  v.controls.replaceChildren();
+}
+export const actionRowRenderer = {
+  key: 'action',
+  create,
+  bind,
+  recycle,
+  measure: (row, _width) => row.presentation === 'accountSelector' ? 48 : row.icon ? 60 : 44,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=ActionRowRenderer.js.map

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

@@ -0,0 +1,95 @@
+"use strict";
+
+import { createElement, tagSlot, markActionAnchorSource } from "./RowElements.js";
+import { RowVisualStyle } from "./RowVisual.js";
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined) body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined) body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.column.style.rowGap = style?.lineGap !== undefined ? `${style.lineGap}px` : '';
+  v.amounts.style.gap = style?.trailingGap !== undefined ? `${style.trailingGap}px` : '';
+  for (const key of ['title', 'description', 'status', 'primaryAmount', 'secondaryAmount']) {
+    const node = v.fields[key];
+    node.style.cssText = '';
+    node.textContent = row[key] ?? '';
+    node.hidden = !row[key];
+    if (style?.[key]) primitives.textStyle(node, style[key]);
+  }
+  const visualKey = JSON.stringify([row.key, 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.forEach(node => body.insertBefore(node, v.column));
+    v.visualStyles = v.visuals.map(node => new RowVisualStyle(node));
+    v.visualKey = visualKey;
+  }
+  if (v.visualStyles[0]) v.visualStyles[0].apply(style?.image, style?.image?.width ?? 40, style?.image?.height ?? 40, (style?.leadingGap ?? 12) - 12);
+  v.actions.replaceChildren();
+  v.actions.hidden = !row.footerActions?.length;
+  row.footerActions?.forEach((action, index) => {
+    const button = createElement(body.ownerDocument, 'button', 'ok-native-list-action-button', action.label);
+    button.setAttribute('type', 'button');
+    button.toggleAttribute('disabled', Boolean(action.disabled));
+    button.dataset.tone = action.tone ?? '';
+    button.dataset.nativeListAction = action.key;
+    markActionAnchorSource(button, 'footerAction', index);
+    v.actions.appendChild(button);
+  });
+}
+function create(document, row, primitives) {
+  const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-standard');
+  body.dataset.nlRenderer = 'activity';
+  const column = createElement(document, 'span', 'ok-native-list-flex');
+  const amounts = createElement(document, 'span', 'ok-native-list-amounts');
+  const actions = createElement(document, 'span', 'ok-native-list-actions');
+  const fields = {};
+  for (const key of ['title', 'description', 'status', 'primaryAmount', 'secondaryAmount']) {
+    const node = tagSlot(createElement(document, 'span', key === 'title' ? 'ok-native-list-title' : key === 'primaryAmount' ? 'ok-native-list-value' : 'ok-native-list-secondary'), key);
+    fields[key] = node;
+    (key.endsWith('Amount') ? amounts : column).appendChild(node);
+  }
+  column.appendChild(actions);
+  body.append(column, amounts);
+  views.set(body, {
+    column,
+    amounts,
+    actions,
+    fields,
+    visuals: [],
+    visualStyles: [],
+    visualKey: '',
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  v.visuals.forEach(node => {
+    v.primitives.dispose(node);
+    node.remove();
+  });
+  v.visuals = [];
+  v.visualStyles = [];
+  v.visualKey = '';
+  v.actions.replaceChildren();
+}
+export const activityRowRenderer = {
+  key: 'activity',
+  create,
+  bind,
+  recycle,
+  measure: (row, _width) => row.footerActions?.length ? 100 : 60,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=ActivityRowRenderer.js.map

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

@@ -0,0 +1,145 @@
+"use strict";
+
+import { createElement, tagSlot } from "./RowElements.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})`;
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined) body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined) body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.controls.replaceChildren();
+  if (row.checkbox) v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
+  v.controls.style.display = 'contents';
+  v.index.style.cssText = '';
+  v.index.hidden = row.index === undefined;
+  v.index.textContent = String(row.index ?? '');
+  if (style?.index) primitives.textStyle(v.index, style.index);
+  v.favorite.hidden = !row.favorite;
+  v.favorite.textContent = row.favoriteActive ? '★' : '☆';
+  v.favorite.dataset.active = String(!!row.favoriteActive);
+  const visualKey = JSON.stringify([row.key, row.leading]);
+  if (visualKey !== v.visualKey) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.leading);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    if (v.visual) body.insertBefore(v.visual, v.columns[0].body);
+    v.visualKey = visualKey;
+  }
+  v.visualStyle?.apply(style?.image, style?.image?.width ?? 40, style?.image?.height ?? 40, (style?.leadingGap ?? 12) - 12);
+  v.columns.forEach((cell, index) => {
+    const column = row.columns[index];
+    cell.body.hidden = !column;
+    if (!column) {
+      cell.body.remove();
+      return;
+    }
+    body.appendChild(cell.body);
+    cell.body.style.cssText = '';
+    cell.body.hidden = false;
+    cell.body.style.flex = String(column.weight ?? 1);
+    cell.body.style.display = 'flex';
+    cell.body.dataset.align = column.alignment ?? 'start';
+    if (style?.lineGap !== undefined) cell.body.style.rowGap = `${style.lineGap}px`;
+    cell.primaryLine.style.cssText = '';
+    cell.primaryLine.style.color = tone(column.tone, 'primary');
+    if (style?.titleBadgeGap !== undefined) cell.primaryLine.style.gap = `${style.titleBadgeGap}px`;
+    cell.primary.style.cssText = '';
+    cell.primary.textContent = column.text;
+    if (style?.columns) primitives.textStyle(cell.primary, style.columns);
+    cell.badges.replaceChildren();
+    cell.badges.style.display = 'contents';
+    if (column.key === 'asset') row.badges?.forEach(badge => {
+      const label = tagSlot(createElement(body.ownerDocument, 'span', 'ok-native-list-badge', badge.text), 'badge');
+      label.dataset.tone = badge.tone ?? '';
+      cell.badges.appendChild(label);
+    });
+    // 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 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) label.style.color = tone(column.secondaryTone, 'secondary');
+      if (style?.columnSecondary) primitives.textStyle(label, style.columnSecondary);
+    });
+  });
+}
+function create(document, row, primitives) {
+  const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-data');
+  body.dataset.nlRenderer = 'dataRow';
+  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');
+  body.append(controls, index, favorite);
+  const columns = Array.from({
+    length: 4
+  }, () => {
+    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 badges = createElement(document, 'span');
+    primaryLine.append(primary, badges);
+    const secondaryLine = createElement(document, 'span', 'ok-native-list-data-secondary-line');
+    const secondary = Array.from({
+      length: 2
+    }, () => tagSlot(createElement(document, 'span', 'ok-native-list-secondary'), 'columnSecondary'));
+    secondaryLine.append(...secondary);
+    cell.append(primaryLine, secondaryLine);
+    body.appendChild(cell);
+    return {
+      body: cell,
+      primaryLine,
+      primary,
+      badges,
+      secondaryLine,
+      secondary
+    };
+  });
+  views.set(body, {
+    favorite,
+    index,
+    controls,
+    columns,
+    visualKey: '',
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  if (v.visual) {
+    v.primitives.dispose(v.visual);
+    v.visual.remove();
+  }
+  v.visual = undefined;
+  v.visualStyle = undefined;
+  v.visualKey = '';
+  v.controls.replaceChildren();
+}
+export const dataRowRenderer = {
+  key: 'dataRow',
+  create,
+  bind,
+  recycle,
+  // Legacy presets: table rows without secondary text are 8 units shorter.
+  measure: (row, _width, layout) => {
+    const secondary = row.columns.some(column => column.secondaryText);
+    return (secondary ? 60 : 56) + (layout === 'table' && !secondary ? -8 : 0);
+  },
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=DataRowRenderer.js.map

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

@@ -0,0 +1,289 @@
+"use strict";
+
+import { applyTabularNumbers, hasExplicitRowHeight } from "./RowElements.js";
+import { createElement, setData, tagSlot, markActionAnchorSource, createTextColumn, createBadge } from "./RowElements.js";
+import { applyTextLayout, applyTextStyleToSlot, applyValueSegments } from "./RowText.js";
+import { RowVisualStyle } from "./RowVisual.js";
+function toneColor(tone, fallback) {
+  if (tone === 'positive') return 'var(--nl-positive)';
+  if (tone === 'negative') return 'var(--nl-negative)';
+  if (tone === 'secondary') return 'var(--nl-secondary)';
+  return fallback === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
+}
+function appendAccessories(parent, document, primitives, row, accessories) {
+  if (!accessories?.length) return;
+  const container = createElement(document, 'span', 'ok-native-list-accessories');
+  if (row && hasExplicitRowHeight(row) && 'presentation' in row && row.presentation === 'networkSelector') {
+    container.style.gap = accessories.some(accessory => accessory.kind === 'checkbox') ? '12px' : '20px';
+  }
+  if (row && hasExplicitRowHeight(row) && 'presentation' in row && row.presentation === 'accountSelector' && accessories.length === 1 && accessories[0]?.kind === 'icon' && accessories[0].name === 'PlusSmallOutline') {
+    setData(container, 'nativeListAccountControl', 'createAddress');
+  }
+  let valueIndex = 0;
+  accessories.forEach((accessory, slot) => {
+    const element = primitives.accessory(row.key, accessory, slot);
+    if (accessory.kind === 'value' || accessory.kind === 'valuePair') {
+      tagSlot(element, valueIndex++ === 0 ? 'value' : 'valueSecondary');
+    }
+    container.appendChild(element);
+  });
+  parent.appendChild(container);
+}
+function createIdentityRow(document, primitives, row) {
+  const presentation = row.presentation;
+  const body = createElement(document, 'div', ['ok-native-list-row', 'ok-native-list-standard', !presentation ? 'ok-native-list-identity-row' : '', presentation === 'networkSelector' ? 'ok-native-list-network-row' : '', presentation === 'walletSidebar' ? 'ok-native-list-wallet-row' : '', presentation === 'accountSelector' ? 'ok-native-list-account-row' : ''].filter(Boolean).join(' '));
+  setData(body, 'nativeListSelector', hasExplicitRowHeight(row) ? presentation : undefined);
+  if (row.titleActionKey && row.titleActionOnHover) {
+    setData(body, 'nativeListHoverAction', row.titleActionKey);
+    markActionAnchorSource(body, 'leadingAction');
+  }
+  if (row.leadingAction) {
+    const action = primitives.iconAction(row.leadingAction.name, row.leadingAction.actionKey, row.leadingAction.disabled, row.leadingAction.tintColor);
+    markActionAnchorSource(action, 'leadingAction');
+    body.appendChild(action);
+  }
+  const visual = primitives.visual(row.leading, hasExplicitRowHeight(row) ? presentation : undefined);
+  if (visual && true && hasExplicitRowHeight(row) && row.presentation === 'walletSidebar' && 'fallbackIcon' in row.leading && row.leading.fallbackIcon?.name === 'LockSolid') {
+    // OneKey patch: hidden-wallet locks use WalletAvatar's full 40-point icon.
+    const icon = visual.querySelector('.ok-native-list-visual-fallback svg');
+    if (icon) {
+      icon.style.width = '40px';
+      icon.style.height = '40px';
+    }
+    const fallback = visual.querySelector('.ok-native-list-visual-fallback');
+    if (fallback) {
+      fallback.style.borderRadius = '0';
+      fallback.style.overflow = 'visible';
+    }
+  }
+  if (visual && true && hasExplicitRowHeight(row) && row.presentation === 'walletSidebar' && 'borderStyle' in row.leading && row.leading.borderStyle === 'dashed') visual.style.borderWidth = '1px';
+  if (visual) body.appendChild(visual);
+  const title = row.title;
+  const subtitle = row.subtitle;
+  const column = createTextColumn(document, title, subtitle, row.tertiary, row.tertiaryTone, presentation !== 'walletSidebar' ? row.badges : undefined, {
+    title: 'title',
+    subtitle: 'subtitle',
+    tertiary: 'tertiary'
+  });
+  {
+    const titleElement = column.firstElementChild;
+    if (row.titleMatch?.length) {
+      const textTarget = titleElement.querySelector('[data-nl-slot="title"]') ?? titleElement;
+      const firstText = textTarget.firstChild;
+      if (firstText) firstText.remove();
+      const fragment = document.createDocumentFragment();
+      let offset = 0;
+      row.titleMatch.forEach(({
+        start,
+        end
+      }) => {
+        fragment.appendChild(document.createTextNode(row.title.slice(offset, start)));
+        const match = createElement(document, 'span', 'ok-native-list-info', row.title.slice(start, end));
+        fragment.appendChild(match);
+        offset = end;
+      });
+      fragment.appendChild(document.createTextNode(row.title.slice(offset)));
+      textTarget.prepend(fragment);
+    }
+    if (row.subtitleSegments?.length) {
+      column.querySelector('.ok-native-list-secondary')?.remove();
+      const segments = createElement(document, 'span', 'ok-native-list-subtitle-segments');
+      row.subtitleSegments.forEach(segment => {
+        if (segment.separatorBefore) segments.appendChild(createElement(document, 'span', 'ok-native-list-subtitle-dot'));
+        const text = createElement(document, 'span', 'ok-native-list-secondary', segment.text);
+        tagSlot(text, 'subtitle');
+        applyValueSegments(text, segment.textSegments, 14, 20, 400);
+        setData(text, 'tone', segment.tone);
+        text.style.color = segment.tone === 'disabled' ? 'var(--nl-disabled)' : segment.tone === 'caution' ? 'var(--nl-caution)' : toneColor(segment.tone, 'secondary');
+        segments.appendChild(text);
+      });
+      column.insertBefore(segments, titleElement.nextSibling);
+    }
+    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']) {
+      const lines = row.style?.[key]?.lines ?? row[`${key}Lines`];
+      if (lines !== undefined) column.querySelectorAll(`[data-nl-slot="${key}"]`).forEach(text => applyTextLayout(text, {
+        lines
+      }));
+    }
+  }
+  body.appendChild(column);
+  appendAccessories(body, document, primitives, row, row.trailing);
+  return body;
+}
+const ROW_BOX_STYLE_KEYS = new Set(['container', 'horizontalPadding', 'verticalPadding', 'leadingGap', 'lineGap', 'titleBadgeGap', 'trailingGap', 'image']);
+function applyIdentityStyle(body, row) {
+  const style = row.style;
+  if (!style) return;
+  const box = style;
+  if (box.horizontalPadding !== undefined) body.style.paddingInline = String(box.horizontalPadding) + 'px';
+  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');
+  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');
+    targets.forEach(column => {
+      column.style.rowGap = String(box.lineGap) + 'px';
+    });
+  }
+  if (leading && box.leadingGap !== undefined) {
+    const gap = 'calc(' + String(box.leadingGap) + 'px - ' + defaultGap + ')';
+    if (vertical) leading.style.marginBottom = gap;else leading.style.marginInlineEnd = gap;
+  }
+  if (box.titleBadgeGap !== undefined) {
+    const gap = String(box.titleBadgeGap) + 'px';
+    body.querySelectorAll('.ok-native-list-badges, .ok-native-list-wallet-badges').forEach(badges => {
+      if (badges.classList.contains('ok-native-list-wallet-badges')) badges.style.marginTop = box.lineGap === undefined ? gap : 'calc(' + gap + ' - ' + String(box.lineGap) + 'px)';else badges.style.marginInlineStart = gap;
+    });
+  }
+  if (box.trailingGap !== undefined) {
+    const gap = String(box.trailingGap) + 'px';
+    body.querySelectorAll('.ok-native-list-accessories, .ok-native-list-amounts').forEach(trailing => {
+      trailing.style.gap = gap;
+    });
+  }
+  if (leading && box.image) {
+    const image = box.image;
+    if (image.width !== undefined) {
+      leading.style.width = String(image.width) + 'px';
+      if (!vertical) leading.style.flexBasis = String(image.width) + 'px';
+    }
+    if (image.height !== undefined) leading.style.height = String(image.height) + 'px';
+    const radius = image.cornerRadius !== undefined ? String(image.cornerRadius) + 'px' : image.shape === 'circle' ? '50%' : image.shape === 'square' ? '0px' : image.shape === 'rounded' ? '10px' : undefined;
+    if (radius !== undefined) {
+      leading.style.setProperty('border-radius', radius, 'important');
+      // 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');
+    images.forEach(bitmap => {
+      if (bitmap !== leading) {
+        if (image.width !== undefined) bitmap.style.width = '100%';
+        if (image.height !== undefined) bitmap.style.height = '100%';
+      }
+      if (radius !== undefined) bitmap.style.borderRadius = radius;
+      if (image.contentFit !== undefined) bitmap.style.objectFit = image.contentFit === 'center' ? 'none' : image.contentFit;
+    });
+  }
+  Object.keys(style).forEach(key => {
+    if (ROW_BOX_STYLE_KEYS.has(key)) return;
+    const slotStyle = style[key];
+    if (!slotStyle) return;
+    body.querySelectorAll('[data-nl-slot="' + key + '"]').forEach(element => {
+      applyTextStyleToSlot(element, slotStyle);
+    });
+  });
+}
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  let used = false;
+  const next = createIdentityRow(body.ownerDocument, {
+    ...primitives,
+    visual: (source, presentation) => {
+      used = true;
+      const key = JSON.stringify([row.key, source, presentation]);
+      if (v.visual?.key !== key) {
+        if (v.visual) primitives.dispose(v.visual.node);
+        const node = primitives.visual(source, presentation);
+        if (!node) {
+          v.visual = undefined;
+          return;
+        }
+        v.visual = {
+          key,
+          node,
+          defaults: new RowVisualStyle(node)
+        };
+      }
+      v.visual.defaults.restore();
+      return v.visual.node;
+    }
+  }, row);
+  if (!used && v.visual) {
+    primitives.dispose(v.visual.node);
+    v.visual = undefined;
+  }
+  body.replaceChildren(...Array.from(next.childNodes));
+  body.className = next.className;
+  body.style.cssText = next.style.cssText;
+  if (row.presentation && ['accountSelector', 'networkSelector', 'walletSidebar'].includes(row.presentation)) applyTabularNumbers(body);
+  for (const name of body.getAttributeNames()) if (name.startsWith('data-') && name !== 'data-nl-renderer') body.removeAttribute(name);
+  for (const name of next.getAttributeNames()) if (name.startsWith('data-')) body.setAttribute(name, next.getAttribute(name));
+  if (row.type === 'identity' && hasExplicitRowHeight(row)) {
+    const title = body.querySelector('.ok-native-list-title');
+    if (row.presentation === 'accountSelector') {
+      body.style.gap = '12px';
+      body.style.borderRadius = '12px';
+      if ('shape' in row.leading && row.leading.shape === 'rounded') {
+        const visual = body.querySelector('.ok-native-list-visual');
+        if (visual) visual.style.borderRadius = '8px';
+      }
+      if (title) title.style.lineHeight = '24px';
+    }
+    if (row.presentation === 'networkSelector') {
+      body.style.borderRadius = '12px';
+      const visual = body.querySelector('.ok-native-list-visual');
+      if (visual) {
+        visual.style.width = '32px';
+        visual.style.height = '32px';
+        visual.style.flexBasis = '32px';
+      }
+      if (row.leading.kind === 'network' && !row.leading.image && !row.leading.fallbackIcon && row.leading.fallbackText) {
+        const fallback = visual?.querySelector('.ok-native-list-visual-fallback');
+        if (fallback) {
+          fallback.style.fontSize = '19px';
+          fallback.style.lineHeight = '27px';
+          fallback.style.fontWeight = '600';
+          fallback.style.color = 'var(--nl-inverse-text)';
+        }
+      }
+      visual?.querySelectorAll('.ok-native-list-visual-main').forEach(image => {
+        image.style.width = '32px';
+        image.style.height = '32px';
+      });
+      if (title) {
+        title.style.fontSize = '16px';
+        title.style.lineHeight = '24px';
+        title.style.fontWeight = '500';
+      }
+      body.querySelectorAll('.ok-native-list-accessory').forEach(value => {
+        value.style.fontSize = '16px';
+        value.style.lineHeight = '24px';
+        value.style.fontWeight = '500';
+      });
+    }
+  }
+  applyIdentityStyle(body, row);
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'identity';
+  views.set(body, {
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (v?.visual) v.primitives.dispose(v.visual.node);
+  if (v) v.visual = undefined;
+  body.replaceChildren();
+}
+export const identityRowRenderer = {
+  key: 'identity',
+  create,
+  bind,
+  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
+};
+//# sourceMappingURL=IdentityRowRenderer.js.map